JavaScript快速入门教程

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; "Hello " + "world!";`
减、乘、除	这些运算符操作与基础算术一致。只是乘法写作星号，除法写作斜杠。	`-`, `*`, `/`	`9 - 3; 8 * 2; //乘法在 JS 中是一个星号 9 / 3;`
赋值运算符	为变量赋值（你之前已经见过这个符号了）	`=`	`let myVariable = '李雷';`
等于	测试两个值是否相等，并返回一个 `true`/`false` （布尔）值。	`===`	`let myVariable = 3; myVariable === 4; // false`
不等于	和等于运算符相反，测试两个值是否不相等，并返回一个 `true`/`false` （布尔）值。	`!==`	`let myVariable = 3; myVariable !== 3; // false`
取非	返回逻辑相反的值，比如当前值为真，则返回 `false`。	`!`	原式为真，但经取非后值为 `false`： `let myVariable = 3; !(myVariable === 3); // false`

条件语句是一种代码结构，用来测试表达式的真假，并根据测试结果运行不同的代码。一个常用的条件语句是 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("别戳我，我怕疼。");
});

学习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”。将看到如下内容：