JavaScript 基础

JavaScript 是一种编程语言，它为您的网站添加交互性。这发生在游戏中，在按钮被按下时的响应行为中，在表单的数据输入中，在动态样式中，在动画中等等。本文将帮助您开始使用 JavaScript，并进一步了解其可能性。

什么是 JavaScript？

JavaScript 是一种强大的编程语言，可以为网站添加交互性。它是由 Brendan Eich 发明的。

JavaScript 多才多艺且适合初学者。随着经验的积累，您将能够创建游戏、动画 2D 和 3D 图形、全面的数据库驱动应用程序等等！

JavaScript 本身相对紧凑，但非常灵活。开发人员在核心 JavaScript 语言之上编写了各种工具，以最小的努力解锁了大量的功能。这些工具包括

内置于 Web 浏览器中的浏览器应用程序编程接口 (API)，提供功能，例如动态创建 HTML 和设置 CSS 样式；从用户的网络摄像头收集和操作视频流，或生成 3D 图形和音频样本。
第三方 API，允许开发人员将来自其他内容提供商的功能整合到网站中，例如 Disqus 或 Facebook。
您可以应用于 HTML 的第三方框架和库，以加速构建网站和应用程序的工作。

作为对 JavaScript 的简要介绍，本文没有涉及核心 JavaScript 语言与上面列出的工具的不同之处。您可以在 MDN 的 JavaScript 学习区域以及 MDN 的其他部分了解更多信息。

下面的部分介绍了核心语言的某些方面，并提供了一个机会来玩一些浏览器 API 功能。玩得开心！

"Hello world!" 示例

JavaScript 是最流行的现代 Web 技术之一！随着您的 JavaScript 技能的提升，您的网站将进入一个新的力量和创造力维度。

然而，与 HTML 和 CSS 相比，熟悉 JavaScript 更具挑战性。您可能需要从小处着手，逐步进步。首先，让我们研究如何将 JavaScript 添加到您的页面以创建一个Hello world! 示例。（Hello world! 是介绍性编程示例的标准。）

警告：如果您没有一直关注我们的课程，请下载此示例代码并将其用作起点。

转到您的测试站点并创建一个名为scripts 的新文件夹。在 scripts 文件夹中，创建一个名为main.js 的新文本文档，并保存它。
在您的index.html 文件中，在新行上输入此代码，就在结束的</body> 标签之前
html
```
<script src="scripts/main.js"></script>
```
这与 CSS 的 <link> 元素的作用相同。它将 JavaScript 应用于页面，因此它可以对 HTML（以及 CSS 和页面上的任何其他内容）产生影响。

将此代码添加到scripts/main.js 文件中

const myHeading = document.querySelector("h1");
myHeading.textContent = "Hello world!";

确保 HTML 和 JavaScript 文件已保存。然后在浏览器中加载index.html。您应该看到类似于以下内容

Heading "hello world" above a firefox logo

注意：上述说明将 <script> 元素放在 HTML 文件底部的原因是，浏览器按其在文件中的出现顺序读取代码。

如果 JavaScript 首先加载，并且它应该影响尚未加载的 HTML，那么可能会出现问题。将 JavaScript 放在 HTML 页面底部是解决此依赖关系的一种方法。要了解有关替代方法的更多信息，请参阅脚本加载策略。

发生了什么？

标题文本使用 JavaScript 更改为Hello world!。您通过使用名为 querySelector() 的函数获取对您标题的引用，然后将其存储在名为myHeading 的变量中。这类似于我们使用 CSS 选择器所做的事情。当您想要对元素执行某些操作时，您需要先选择它。

接下来，代码将变量myHeading 的 textContent 属性的值（表示标题的内容）设置为Hello world!。

注意：您在此练习中使用的这两个功能都是文档对象模型 (DOM) API 的一部分，该 API 具有操作文档的功能。

语言基础速成课程

为了让您更好地了解 JavaScript 的工作原理，让我们解释一下该语言的一些核心特性。值得注意的是，这些特性在所有编程语言中都是通用的。如果您掌握了这些基础知识，那么您在学习其他语言时也将占先！

警告：在本文中，尝试将示例代码行输入到您的 JavaScript 控制台中，看看会发生什么。有关 JavaScript 控制台的更多详细信息，请参阅发现浏览器开发者工具。

变量

变量是存储值的容器。您首先使用 let 关键字声明一个变量，然后是您为变量提供的名称

let myVariable;

行末的分号表示语句的结束位置。只有在需要在单行上分隔语句时才需要它。但是，有些人认为在每个语句末尾使用分号是一种良好的做法。关于何时应该和不应该使用分号，还有其他规则。有关更多详细信息，请参阅 Your Guide to Semicolons in JavaScript。

您可以将变量几乎命名为任何东西，但有一些限制。（请参阅有关命名规则的本节。）如果您不确定，您可以检查您的变量名以查看它是否有效。

JavaScript 区分大小写。这意味着myVariable 与myvariable 不同。如果您的代码中出现问题，请检查大小写！

声明变量后，您可以为它赋值

myVariable = "Bob";

此外，您可以在同一行上执行这两个操作

let myVariable = "Bob";

您可以通过调用变量名来检索值

myVariable;

为变量赋值后，您可以在代码中的其他位置更改它

let myVariable = "Bob";
myVariable = "Steve";

请注意，变量可以保存具有不同数据类型的值

变量	解释	示例
字符串	这是一系列文本，称为字符串。要表示该值为字符串，请将其用单引号或双引号括起来。	`let myVariable = 'Bob';` 或 `let myVariable = "Bob";`
数字	这是一个数字。数字周围没有引号。	`let myVariable = 10;`
布尔值	这是一个真/假值。`true` 和 `false` 这些词是特殊的关键字，不需要引号。	`let myVariable = true;`
数组	这是一种结构，允许您在单个引用中存储多个值。	`let myVariable = [1,'Bob','Steve',10];` 像这样引用数组的每个成员 `myVariable[0]`、`myVariable[1]` 等等。
对象	这可以是任何东西。JavaScript 中的所有内容都是对象，可以存储在变量中。在学习时请牢记这一点。	`let myVariable = document.querySelector('h1');` 所有上述示例也是如此。

那么为什么我们需要变量呢？变量是进行任何有趣的编程操作所必需的。如果值不能更改，那么您就无法执行任何动态操作，例如个性化问候语或更改图像库中显示的图像。

注释

注释是可以与代码一起添加的文本片段。浏览器会忽略标记为注释的文本。您可以在 JavaScript 中编写注释，就像您在 CSS 中一样

/*
Everything in between is a comment.
*/

如果您的注释不包含任何换行符，则可以选择将其放在两个斜杠后面，如下所示

// This is a comment

运算符

一个运算符 是一个数学符号，它根据两个值（或变量）生成结果。在下表中，您可以看到一些最简单的运算符，以及一些在 JavaScript 控制台中尝试的示例。

运算符	解释	符号	示例
加法	将两个数字加在一起或将两个字符串组合在一起。	`+`	`6 + 9; 'Hello ' + 'world!';`
减法、乘法、除法	这些运算符执行您在基本数学中所期望的操作。	`-`, `*`, `/`	`9 - 3; 8 * 2; // 在 JS 中，乘法运算符为星号 9 / 3;`
赋值	如您已经看到的那样：这将值分配给变量。	`=`	`let myVariable = 'Bob';`
严格相等	这将执行一个测试，以查看两个值是否相等且数据类型相同。它返回一个`true`/`false`（布尔值）结果。	`===`	`let myVariable = 3; myVariable === 4;`
非、不相等	这将返回它之前的值的逻辑相反值。它将`true` 转换为`false` 等等。当它与相等运算符一起使用时，否定运算符测试两个值是否不相等。	`!`, `!==`	对于“非”，基本表达式为`true`，但比较返回`false`，因为我们对其进行了否定 `let myVariable = 3; !(myVariable === 3);` “不相等”在语法上有所不同，但基本上给出相同的结果。这里我们测试的是“`myVariable` 是否不等于 3”。这将返回`false`，因为`myVariable` 等于 3 `let myVariable = 3; myVariable !== 3;`

还有许多其他运算符有待探索，但现在这些就足够了。有关完整列表，请参阅表达式和运算符。

注意：在执行计算时，混合数据类型会导致一些奇怪的结果。请谨慎操作，确保您正确引用了变量，并获得了预期的结果。例如，在您的控制台中输入'35' + '25'。为什么您没有得到预期的结果？因为引号将数字转换为字符串，因此您最终连接了字符串而不是添加数字。如果您输入35 + 25，您将得到这两个数字的总和。

条件语句

条件语句是用于测试表达式是否返回 true 的代码结构。条件语句的一种常见形式是if...else 语句。例如

let iceCream = "chocolate";
if (iceCream === "chocolate") {
  alert("Yay, I love chocolate ice cream!");
} else {
  alert("Awwww, but chocolate is my favorite…");
}

if () 中的表达式是测试条件。这使用严格相等运算符（如上所述）将变量iceCream 与字符串chocolate 进行比较，以查看两者是否相等。如果此比较返回true，则执行第一个代码块。如果此比较不为 true，则执行第二个代码块（在else 语句之后）。

函数

函数是一种打包您希望重用的功能的方法。可以将一段代码定义为函数，并在代码中调用函数名时执行该函数。这比重复编写相同的代码要好。您已经看到函数的一些用法。例如

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);

注意：return 语句告诉浏览器将 result 变量从函数中返回，以便可以使用它。这是必要的，因为在函数内部定义的变量只能在这些函数内部使用。这被称为变量作用域。（阅读更多关于变量作用域的内容。）

事件

网站上的真实交互需要事件处理程序。这些是监听浏览器活动并相应地运行代码的代码结构。最明显的例子是处理点击事件，它是在你用鼠标点击某个东西时由浏览器触发的。为了演示这一点，将以下内容输入你的控制台，然后点击当前网页

document.querySelector("html").addEventListener("click", function () {
  alert("Ouch! Stop poking me!");
});

有多种方法可以将事件处理程序附加到元素。这里我们选择了 <html> 元素。然后我们调用它的 addEventListener() 函数，传入要监听的事件的名称（'click'）以及事件发生时要运行的函数。

我们刚刚传递给 addEventListener() 的函数被称为匿名函数，因为它没有名字。还有一种编写匿名函数的替代方法，我们称之为箭头函数。箭头函数使用 () => 而不是 function ()

document.querySelector("html").addEventListener("click", () => {
  alert("Ouch! Stop poking me!");
});

增强我们的示例网站

完成了对 JavaScript 基础知识的回顾（以上），让我们为我们的示例站点添加一些新功能。

在继续之前，请删除你的 main.js 文件的当前内容——你在“Hello world！”示例中添加的那部分——并保存空文件。如果你不这样做，现有的代码将与你即将添加的新代码冲突。

添加一个图片切换器

在本节中，你将学习如何使用 JavaScript 和 DOM API 功能来交替显示两张图片中的一张。这种改变将在用户点击显示的图片时发生。

选择你想在你的示例站点上展示的图片。理想情况下，图片大小应与你之前添加的图片相同，或尽可能接近。
将此图片保存到你的 images 文件夹中。
将图片重命名为 firefox2.png。

将以下 JavaScript 代码添加到你的 main.js 文件中。

const myImage = document.querySelector("img");

myImage.onclick = () => {
  const mySrc = myImage.getAttribute("src");
  if (mySrc === "images/firefox-icon.png") {
    myImage.setAttribute("src", "images/firefox2.png");
  } else {
    myImage.setAttribute("src", "images/firefox-icon.png");
  }
};

保存所有文件，并在浏览器中加载 index.html。现在，当你点击图片时，它应该切换到另一张图片。

这就是发生的事情。你将对你的 <img> 元素的引用存储在 myImage 中。接下来，你将它的 onclick 事件处理程序属性设置为一个没有名字的函数（一个“匿名”函数）。因此，每次点击此元素时

代码将检索图片的 src 属性的值。
代码使用一个条件语句来检查 src 值是否等于原始图片的路径
1. 如果是，代码将 src 值更改为第二张图片的路径，强制另一张图片加载到 <img> 元素中。
2. 如果不是（意味着它已经改变了），src 值将切换回原始图片路径，回到原始状态。

添加个性化的欢迎消息

接下来，让我们在用户首次访问网站时将页面标题更改为个性化的欢迎消息。此欢迎消息将持久保存。如果用户离开网站并在稍后返回，我们将使用 Web Storage API 保存消息。我们还将包含一个选项来更改用户，从而更改欢迎消息。

在 index.html 中，在 <script> 元素之前添加以下行
html
```
<button>Change user</button>
```
在 main.js 中，将以下代码放在文件底部，完全按照它写的方式。这将获取对新按钮和标题的引用，并将它们分别存储在变量中
js
```
let myButton = document.querySelector("button");
let myHeading = document.querySelector("h1");
```
添加以下函数来设置个性化的问候语。现在它还不会做任何事情，但很快就会改变。
js
```
function setUserName() {
  const myName = prompt("Please enter your name.");
  localStorage.setItem("name", myName);
  myHeading.textContent = `Mozilla is cool, ${myName}`;
}
```
setUserName() 函数包含一个 prompt() 函数，它会显示一个对话框，类似于 alert()。这个 prompt() 函数比 alert() 做得更多，它会要求用户输入数据，并在用户点击确定后将数据存储在一个变量中。在本例中，我们要求用户输入一个姓名。接下来，代码调用 API localStorage，它允许我们存储数据到浏览器并在以后检索它。我们使用 localStorage 的 setItem() 函数来创建和存储一个名为 'name' 的数据项，并将其值设置为 myName 变量，其中包含用户输入的姓名。最后，我们将标题的 textContent 设置为一个字符串，加上用户新存储的姓名。
在函数声明之后添加以下条件块。我们可以将这段代码称为初始化代码，因为它在应用程序首次加载时对其进行结构化。
js
```
if (!localStorage.getItem("name")) {
  setUserName();
} else {
  const storedName = localStorage.getItem("name");
  myHeading.textContent = `Mozilla is cool, ${storedName}`;
}
```
此块的第一行使用否定运算符（逻辑非，用 ! 表示）来检查 name 数据是否存在。如果不存在，则运行 setUserName() 函数来创建它。如果它存在（即用户在之前的访问中设置了用户名），我们使用 getItem() 检索存储的名称，并像我们在 setUserName() 中所做的那样将标题的 textContent 设置为一个字符串，加上用户的姓名。
将此 onclick 事件处理程序（下面）放在按钮上。点击时，setUserName() 会运行。这允许用户通过按下按钮来输入不同的姓名。
js
```
myButton.onclick = () => {
  setUserName();
};
```

用户名为 null？

当你运行示例并得到提示你输入用户名的对话框时，尝试按下取消按钮。你应该得到一个标题，上面写着Mozilla 很酷，null。发生这种情况是因为——当你取消提示时——该值被设置为 null。Null 是 JavaScript 中的一个特殊值，它表示没有值。

另外，尝试点击确定，但不输入姓名。你应该得到一个标题，上面写着Mozilla 很酷， 原因很明显。

为了避免这些问题，你可以检查用户是否没有输入空白姓名。将你的 setUserName() 函数更新为以下内容

function setUserName() {
  const myName = prompt("Please enter your name.");
  if (!myName) {
    setUserName();
  } else {
    localStorage.setItem("name", myName);
    myHeading.textContent = `Mozilla is cool, ${myName}`;
  }
}

用人类语言来说，这意味着：如果 myName 没有值，则从头开始再次运行 setUserName()。如果它有值（如果上述语句不成立），则将值存储在 localStorage 中，并将其设置为标题的文本。

结论

如果你按照本文中的所有说明操作，你最终应该得到一个看起来类似于下面图片的页面。你也可以查看我们的版本.

Final look of HTML page after creating elements: a header, large centered logo, content, and a button

如果你遇到困难，可以将你的作品与我们在 GitHub 上的完成示例代码进行比较。

我们只是触及了 JavaScript 的表面。如果你喜欢玩，并希望更进一步，请利用下面列出的资源。

另请参阅

使用 JavaScript 进行动态客户端脚本编写: 更详细地深入了解 JavaScript。
学习 JavaScript: 这是一个面向有抱负的 Web 开发人员的绝佳资源！在交互式环境中学习 JavaScript，通过简短的课程和交互式测试，在自动评估的指导下学习。前 40 课免费。完整的课程可通过一次性付款购买。