练习 - 使用 Javascript 添加交互性

10 分钟

JavaScript（或 ECMAScript）是有助于向网页添加交互性的编程语言。

例如，可以使用 JavaScript 来定义用户选择某个按钮时会发生的行为，例如，打开弹出窗口。使用 JavaScript，无需重载即可从网页添加或删除内容。

在本单元中，你将为网页设置一个示例 JavaScript 文件。你将在此创建一个按钮来在浅色和深色主题之间切换。然后，将按钮附加到执行实际主题切换的 JavaScript 代码。最后，你将使用浏览器的开发人员工具检查完成的项目。

链接到 JavaScript

与 CSS 一样，你可以将 JavaScript 直接添加到 HTML 文件中，但推荐的最佳做法是将 JavaScript 保存在单独的文件中。将 JavaScript 代码添加到单独的文件中可以更轻松地在多个网页中重复使用它。例如，可以通过在网页正文中的任何位置添加以下代码来创建弹出警报：

<script>alert('Hello World')</script>

但最好将 JavaScript 代码添加到一个单独的文件，你可以将该文件链接到需要自定义功能的每个文件。

使用 HTML 脚本标记 <script>，可以链接到外部 JavaScript 文件，这是本练习中配置 Web 应用的方法。

在 Visual Studio Code 中，打开 index.html 文件。
找到结束 </body> 元素，并将光标置于其上方的新行上。输入 script:src，然后按 Enter。 <script> 元素的开始标记和结束标记会添加到代码中。

修改 <script> 元素以加载 app.js 文件，如以下示例所示。确保它位于列表的结束 </ul> 元素之后。

...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<script src="app.js"></script>
...

你可以将 <script> 元素放在 <head> 或 <body> 中的其他位置。但是，通过将 <script> 元素放在 <body> 部分的末尾，可以先在屏幕上显示所有页面内容，然后再加载脚本。

添加容错功能

在 HTML 文件中的 </script> 结束标记之后添加 <noscript> 元素，该元素可用于在停用 JavaScript 时显示消息。
```
<script src="app.js"></script>
<noscript>You need to enable JavaScript to view the full site.</noscript>
```
添加 <noscript> 元素是容错或故障弱化的一个示例。使用 <noscript> 元素后，代码可以检测并规划功能何时不受支持或不可用。

设置严格模式

JavaScript 旨在简化学习，它允许开发人员犯一些错误。例如，如果使用的变量拼写错误，则 JavaScript 将不会引发错误，而会创建新的全局变量。开始学习 JavaScript 时，减少错误会很方便。但这可能导致浏览器难以优化所编写的代码，也会增加调试这些代码的难度。

切换到严格模式，在出错时获得更有用的错误。

在 Visual Studio Code 中，打开 app.js 文件并输入以下内容：
```
'use strict';
```

添加按钮

你需要通过一种方式让用户在你的网页中的浅色和深色主题之间切换。在本练习中，你将使用 HTML <button> 元素实现该功能。

在 HTML 文件（index.html）中，添加一个 <button> 元素。将按钮放在 <div> 元素内部，并将其添加到列表末尾（</ul>）。
```
...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<div>
  <button class="btn">Dark</button>
</div>
<script src="app.js"></script>
...
```
请注意，本示例中的 <button> 元素包含可用于应用 CSS 样式的类属性。
使用键盘快捷方式 Control+S (Windows) 或 Command+S (macOS) 将更改保存到 HTML 文件。
在 CSS 文件（main.css）中，为 HTML 按钮添加带有 .btn 类选择器的新规则。要使按钮颜色不同于一般的浅色或深色主题颜色，请在此规则中设置 color 和 background-color 属性。当页面显示时，这些 .btn 属性将替代 CSS 文件规则 body 规则设置的默认属性。
```
.btn {
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}
```

接下来，修改 .btn 规则，为按钮的大小、形状、外观和位置添加一些样式。以下 CSS 在页面标题的右侧创建一个圆形按钮。

.btn {
  position: absolute;
  top: 20px;
  left: 250px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: none;
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}

接下来，更新浅色和深色主题的 CSS。定义一些新的变量，--btnBg 和 --btnFontColor，以指定特定于按钮的背景色和字体颜色。

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
  --btnBg: var(--black);
  --btnFontColor: var(--white);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
  --btnBg: var(--white);
  --btnFontColor: var(--black);
}

使用键盘快捷方式 Control+S (Windows) 或 Command+S (macOS) 将更改保存到 CSS 文件。

添加事件处理程序

若要在选择按钮时执行某些操作，需要在 JavaScript 文件中提供一个事件处理程序。事件处理程序是在页面上发生事件时运行 JavaScript 函数的一种方法。对于按钮，让我们为 click 事件添加一个事件处理程序；事件处理程序函数在 click 事件发生时运行。

添加事件处理程序之前，需要对按钮元素的引用。

在 JavaScript 文件（app.js）中，使用 document.querySelector 获取按钮引用。
```
const switcher = document.querySelector('.btn');
```
document.querySelector 函数使用你在 CSS 文件中使用的相同 CSS 选择器。 switcher 现在是对页面中按钮的引用。
接下来，为 click 事件添加事件处理程序。在以下代码中，你将为 click 事件添加侦听器，并定义在 click 事件发生时由浏览器执行的事件处理程序函数。
```
switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');
});
```

在上述代码中，你使用 toggle 方法修改了 <body> 元素的类属性。此方法会自动添加或删除 light-theme 和 dark-theme 类。此代码在单击时应用深色样式而不是浅色样式，如果再次单击，则应用浅色样式而不是深色样式。

但是，还需要更新按钮的标签以显示正确的主题，因此需要添加一个 if 语句来确定当前主题并更新按钮标签。

下面是添加事件处理程序后 JavaScript 代码的外观。

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }
});

对于包含多个单词的变量名（例如变量 className），JavaScript 通常使用驼峰式大小写。

控制台消息

作为 Web 开发人员，你可以创建虽然不会显示在网页上，但可以在开发人员工具的“控制台”选项卡中阅读的隐藏消息。使用控制台消息非常有助于查看代码的结果。

在 JavaScript 文件中，在 if 语句后但在事件侦听器内添加对 console.log 的调用。

进行此更改后，完整的 JavaScript 代码应如下所示。

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }

    console.log('current class name: ' + className);
});

如果位于 Visual Studio Code 中的 JavaScript 文件中，可以通过输入 log，然后按 Enter 来为 console.log 使用自动完成功能。

可以在文本中用单引号或双引号定义文本字符串。

在浏览器中打开

若要进行预览，请右键点击 index.html，然后选择“在默认浏览器中打开”，或按 F5 重新加载同一浏览器标签页。
选择新的“深色”按钮可切换为深色主题。
确保一切看起来正确且按预期方式运行。否则，应查看前面的步骤，确认是否遗漏了什么。

检查开发人员工具中的页面

右键点击网页并选择“检查”，或使用键盘快捷键 F12 以打开开发人员工具。或者，在 Windows 或 Linux 上使用 Ctrl+Shift+I 快捷方式，在 macOS 上使用 Option+Command+I。
选择“元素”选项卡，然后选择“样式”选项卡。
选择 <body> 元素。在“样式”选项卡中，查看应用的主题。如果当前主题为深色，则应用 dark-theme 样式。

请确保选中深色主题。
选择“控制台”选项卡以查看 console.log 消息：current class name: dark-theme。

使用控制台，可以从 JavaScript 代码中获取有趣的见解。添加更多控制台消息，以了解代码的哪些部分正在执行并了解其他变量的当前值。

要了解有关控制台的更多信息，请查看控制台概述一文。