第10节课：JavaScript基础——网页交互的魔法
目录
- JavaScript的作用
- JavaScript的基本语法
- 基本语法规则
- 变量、数据类型和运算符
- 变量
- 数据类型
- 运算符
- 实践：使用JavaScript增强网页功能
- 结语
JavaScript是一种高级的、解释型的编程语言，它使得网页能够从静态文档转变为具有动态交互性的应用程序。本节课将介绍JavaScript的基本概念、基本语法，以及变量、数据类型和运算符的使用。
JavaScript的作用
JavaScript最初是为网页上的交互式元素设计的，但随着技术的发展，它的应用范围已经远远超出了网页。JavaScript可以用于：
- 表单验证
- 动态内容更新（Ajax）
- 动画和视觉效果
- Web游戏开发
- 响应用户事件（如点击、键盘输入等）
- 服务端编程（Node.js）
JavaScript的基本语法
JavaScript语法与其他C语言家族的语言类似，包括变量声明、数据类型、函数定义等。
基本语法规则
- 使用
var、let或const声明变量。 - 使用函数
function定义函数。 - 使用花括号
{}定义代码块。 - 使用分号
;分隔语句。
变量、数据类型和运算符
变量
变量是存储数据值的容器。在JavaScript中，变量可以有不同的数据类型。
var message = "Hello, World!"; // 字符串
let age = 25; // 数字
const pi = 3.14; // 常量
数据类型
JavaScript主要有以下几种数据类型：
- Undefined：未定义，表示变量已声明但未赋值。
- Null：空值，表示故意赋予变量的空值。
- Boolean：逻辑实体，
true或false。 - Number：数值，包括整数和浮点数。
- BigInt：可以安全地表示及操作大整数。
- String：文本数据。
- Symbol：ES6引入的新类型，一个唯一的、不可变的数据类型。
- Object：复杂的数据结构，可以包含多个属性。
运算符
运算符用于执行数学和逻辑运算。
- 算术运算符：
+、-、*、/、%等。 - 比较运算符：
==（等于）、===（严格等于）、!=（不等于）、!==（严格不等于）等。 - 逻辑运算符：
&&（逻辑与）、||（逻辑或）、!（逻辑非）等。 - 赋值运算符：
=、+=、-=等。
实践：使用JavaScript增强网页功能
下面是一个简单的示例，展示如何使用JavaScript来增强网页的功能。
<!DOCTYPE html>
<html>
<head><title>JavaScript示例</title>
</head>
<body><h1 id="greeting">欢迎来到学问小小谢的网页！</h1><button onclick="changeGreeting()">点击我改变问候语</button><script>// 定义变量let userName = "访客";// 函数定义function changeGreeting() {// 获取元素const greetingElement = document.getElementById("greeting");// 改变文本greetingElement.textContent = `你好，${userName}！`;}// 监听键盘事件document.addEventListener("keydown", function(event) {if (event.key === "Enter") {changeGreeting();}});</script>
</body>
</html>
结语
通过本节课的学习，你应该对JavaScript的基本概念、基本语法，以及变量、数据类型和运算符有了基本的了解。JavaScript是实现网页动态交互的关键技术。掌握这些基础，你将能够为网页添加各种交互功能。继续深入学习JavaScript的高级特性，如函数、对象、数组、DOM操作等，你将能够创建出更加丰富和互动的网页体验。