站长百科 | 数字化技能提升教程 数字化时代生存宝典 
JavaScript是一种强大而灵活的编程语言，被广泛应用于网页开发中，用于实现网页的交互和动态效果。本文将带大家快速入门JavaScript，介绍其基本语法、常用功能以及如何在网页中应用。
一、变量
变量（Variable）是用于存储值的容器。在JavaScript中，要声明一个变量，可以使用关键字 let 或 var，然后给它一个合适的名称：
let myVariable;
变量定义后可以进行赋值：
myVariable = "李雷";
也可以将定义、赋值操作写在同一行：
let myVariable = "李雷";
可以直接通过变量名取得变量的值：
myVariable;
变量在赋值后是可以更改的：
let myVariable = '李雷'; myVariable = '韩梅梅';
变量有不同的数据类型 ：
| 变量 | 解释 | 示例 |
|---|---|---|
| String | 字符串（一串文本）：字符串的值必须用引号（单双均可，必须成对）括起来。 | let myVariable = '李雷'; |
| Number | 数字：无需引号。 | let myVariable = 10; |
| Boolean | 布尔值（真 / 假）： true/false 是 JS 里的特殊关键字，无需引号。 |
let myVariable = true; |
| Array | 数组：用于在单一引用中存储多个值的结构。 | let myVariable = [1, '李雷', '韩梅梅', 10];元素引用方法： myVariable[0], myVariable[1] …… |
| Object | 对象：JavaScript 里一切皆对象，一切皆可储存在变量里。这一点要牢记于心。 | let myVariable = document.querySelector('h1');以及上面所有示例都是对象。 |
变量在编程中起着至关重要的作用，它们是存储和操作数据的核心。想象一下，如果值无法改变，我们就无法实现任何动态的功能，比如根据用户信息发送个性化的问候语，或者根据用户的选择切换当前展示的图片。变量使得程序能够根据不同情况存储、修改和使用数据，从而实现丰富的交互和动态效果。
二、注释
和CSS一样，JavaScript 中可以添加注释。
例如：
/* 这里的所有内容 都是注释。 */
如果注释只有一行，可以更简单地将注释放在两个斜杠之后，就像这样：
// 这是一条注释。
三、运算符
运算符是一类数学符号，用于根据一个或多个值（或变量）生成结果。下面的表格介绍了一些最常见的运算符，你可以在浏览器的控制台中尝试后面提供的示例。
| 运算符 | 解释 | 符号 | 示例 |
|---|---|---|---|
| 加 | 将两个数字相加，或拼接两个字符串。 | + |
6 + 9; |
| 减、乘、除 | 这些运算符操作与基础算术一致。只是乘法写作星号，除法写作斜杠。 | -, *, / |
9 - 3; |
| 赋值运算符 | 为变量赋值（你之前已经见过这个符号了） | = |
let myVariable = '李雷'; |
| 等于 | 测试两个值是否相等，并返回一个 true/false （布尔）值。 |
=== |
let myVariable = 3; |
| 不等于 | 和等于运算符相反，测试两个值是否不相等，并返回一个 true/false （布尔）值。 |
!== |
let myVariable = 3; |
| 取非 | 返回逻辑相反的值，比如当前值为真，则返回 false。 |
! |
原式为真，但经取非后值为 false：let myVariable = 3; |
四、条件语句
条件语句是一种代码结构，用来测试表达式的真假，并根据测试结果运行不同的代码。一个常用的条件语句是 if ... else。下面是一个示例：
let iceCream = "chocolate";
if (iceCream === "chocolate") {
alert("我最喜欢巧克力冰淇淋了。");
} else {
alert("但是巧克力才是我的最爱呀……");
}
if ( ... ) 中的表达式进行测试，用（上文所提到的）等于运算符来比较变量 iceCream 与字符串 'chocolate' 是否相等。如果返回 true，则运行第一个代码块；如果返回 false，则跳过第一块直接运行 else 之后的第二个代码块。
五、函数
函数（Function）用于封装可重复使用的功能块。通过使用函数，可以避免在代码中重复编写相同的操作步骤，提高代码的可维护性和可读性。之前已经介绍过一些函数，比如：
let myVariable = document.querySelector("h1");
alert("hello!");
document.querySelector 和 alert 是浏览器内置的函数，随时可用。
函数通常通过在函数名后加上小括号 () 来调用。函数可以包含参数，这些参数是函数执行所需的数据，在小括号内部列出，多个参数之间用逗号分隔。
举例来说，alert() 函数在浏览器窗口中弹出一个警告框，需要提供一个字符串参数，告诉它要显示的警告内容。
另一个好消息是，每个人都可以定义自己的函数。下面是一个示例，展示了一个用于进行两个参数乘法运算的函数：
function multiply(num1, num2) {
let result = num1 * num2;
return result;
}
尝试在控制台运行这个函数，不妨多试几组参数，比如：
multiply(4, 7); multiply(20, 20); multiply(0.5, 3);
六、事件
事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码做为响应。最简单的事件是点击事件，鼠标的点击操作会触发该事件。可尝试将下面的代码输入到控制台，然后点击页面的任意位置：
document.querySelector("html").addEventListener("click", function () {
alert("别戳我，我怕疼。");
});
将事件与元素绑定有许多方法。在这里选用了 <html> 元素，然后调用了它的 addEventListener() 方法，将事件名称（'click'）以及其回调函数（当事件发生时，调用该函数）传入该函数中作为调用参数。
刚刚我们传递给 addEventListener() 的函数被称为匿名函数，因为它没有名字。匿名函数还有另一种我们称之为箭头函数的写法，箭头函数使用 () => 代替 function ()：
document.querySelector("html").addEventListener("click", () => {
alert("别戳我，我怕疼。");
});
七、“Hello World!”
学习JavaScript相比HTML和CSS来说可能稍微复杂一些，因此需要循序渐进地学习。首先，让我们看看如何在网页中添加一些基本的JavaScript脚本，创建一个“Hello World！”的示例，因为所有的开始都源于Hello World示例。
首先，打开测试站点，并创建一个名为 "scripts" 的文件夹。然后在其中创建一个名为 "main.js" 的文件。
接下来，在 "index.html" 文件的 </body> 标签前添加以下代码：
<script src="scripts/main.js" defer></script>
这段代码类似于CSS中的 <link> 元素，它将JavaScript引入页面以作用于HTML（以及CSS等页面上的所有内容）。
现在，将以下代码添加到 "main.js" 文件中：
let myHeading = document.querySelector("h1");
myHeading.textContent = "Hello world!";
最后，保存HTML和JavaScript文件，并用浏览器打开 "index.html"。将看到如下内容：
