JavaScript：在 HTML 中嵌入脚本

介绍

欢迎来到你的第一个 JavaScript 实验！JavaScript 是一种强大的脚本语言，它允许你在网页上创建动态和交互式的内容。没有它，网页将是静态的，并且吸引力大大降低。

在这个实验中，你将学习在网页中包含 JavaScript 的两种基本方法：

**内部 JavaScript (Internal JavaScript)**：直接在 HTML 文件内的 <script> 标签中编写代码。
**外部 JavaScript (External JavaScript)**：将代码放在一个单独的 .js 文件中，并将其链接到 HTML 文件。

我们将从一个基本的 HTML 页面开始，并逐步添加 JavaScript 功能。你将使用内置的 WebIDE 来编辑你的文件，并通过 "Web 8080" 标签实时预览你的更改。让我们开始吧！

创建带有 script 标签的 HTML 文件

在此步骤中，你将在 HTML 文件中添加一个内部 JavaScript 代码块。设置过程已在 ~/project 目录为你创建了一个 index.html 文件。我们现在将 <script> 标签添加到其中，这是声明 JavaScript 代码块的标准方法。

首先，在 WebIDE 左侧的文件浏览器中找到 index.html 文件，然后双击打开它。

现在，在 </body> 闭合标签之前添加一个空的 <script> 标签。这是推荐的做法，因为它能确保在浏览器开始执行任何 JavaScript 之前，HTML 内容已被解析并显示给用户，从而提高页面的感知加载速度。

你的 index.html 文件应该如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Lab</title>
  </head>
  <body>
    <h1>Welcome to the JavaScript Lab!</h1>

    <script></script>
  </body>
</html>

请确保在进行更改后保存文件（你可以使用 Ctrl+S 或 Cmd+S）。

HTML file with script tag added

编写 console.log 输出 Hello World

现在你已经有了一个编写 JavaScript 的地方，让我们添加你的第一行代码。我们将使用 console.log() 函数。这是任何 JavaScript 开发者的基本工具，因为它允许你在浏览器的开发者控制台中打印消息。它对于调试和理解你的代码是如何执行的非常有帮助。

在你的 index.html 文件中，在你在上一步创建的 <script> 标签内添加 console.log('Hello World');。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Lab</title>
  </head>
  <body>
    <h1>Welcome to the JavaScript Lab!</h1>

    <script>
      console.log("Hello World");
    </script>
  </body>
</html>

保存文件后，让我们看看结果。

点击 LabEx 界面顶部的 Web 8080 标签。
你将看到 <h1> 标题。要查看控制台输出，请在页面任意位置右键单击并选择 "Inspect"。
一个新的面板将打开。点击此面板中的 "Console" 标签。
你应该会在控制台中看到打印出的 Hello World 消息。

Console output showing Hello World

使用 src 属性链接外部 JavaScript 文件

虽然内部脚本对于小型任务来说是可以的，但最佳实践是将你的 JavaScript 保存在单独的文件中。这使得你的代码更整洁、更易于管理，并且可以在不同的 HTML 页面之间重用。

在此步骤中，我们将把代码移动到一个名为 script.js 的外部文件中（该文件已为你创建），并将其链接到 index.html。

首先，修改你的 index.html 文件。删除 <script> 标签之间的 console.log 行，并在 <script> 的开始标签中添加 src 属性，指向你的外部文件。

你的 index.html 现在应该如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Lab</title>
  </head>
  <body>
    <h1>Welcome to the JavaScript Lab!</h1>

    <script src="script.js"></script>
  </body>
</html>

接下来，从文件浏览器中打开 script.js 文件。它目前是空的。将相同的 console.log 语句添加到此文件中。

你的 script.js 文件应该只包含这一行：

console.log("Hello World");

保存这两个文件。如果你回到 Web 8080 标签并刷新页面，你将在控制台中看到完全相同的结果。浏览器现在加载 index.html，看到 <script src="script.js"> 标签，然后获取并执行 script.js 的内容。

添加 alert 函数以显示弹出消息

除了向控制台输出日志外，JavaScript 还可以更直接地与用户进行交互。其中一种最简单的方法是使用 alert() 函数，它会向用户显示一个弹出消息框。

让我们在脚本中添加一个 alert。打开 script.js 文件并添加一行新代码来创建一个欢迎提示。

你的 script.js 文件现在应该如下所示：

console.log("Hello World");
alert("Welcome to JavaScript!");

alert() 函数会暂停脚本的执行和页面的渲染，直到用户在弹出框中点击“OK”。这使得它成为传达重要信息的非常直接的方式。

保存 script.js 文件。我们将在下一步看到它的效果。

刷新浏览器以执行脚本

你现在已经将控制台日志和 alert 添加到了你的外部 JavaScript 文件中。是时候看看最终结果了。

导航回 Web 8080 标签。

要查看你对 script.js 文件所做的更改，你必须刷新浏览器标签。这会告诉浏览器重新下载 HTML 和所有链接的文件，包括你更新的脚本。

刷新后，你应该会立即看到一个带有“Welcome to JavaScript!”消息的弹出框。

在你点击“OK”后，弹出框会消失，页面的其余部分将加载。如果你再次打开开发者控制台（右键单击 -> Inspect -> Console），你仍然会看到那里记录的“Hello World”消息。这展示了你脚本中的执行顺序。

恭喜你，你已经成功地使用内部和外部方法将 JavaScript 嵌入到了网页中！

总结

在本实验中，你迈出了使用 JavaScript 进行 Web 脚本编写的第一步。你获得了在 Web 项目中包含 JavaScript 的核心概念的实践经验。

你已经学会了：

如何使用 <script> 标签将 JavaScript 直接添加到 HTML 文件中。
如何使用 console.log() 将消息打印到浏览器的开发者控制台进行调试。
将代码分离到外部 .js 文件的优势。
如何使用 <script> 标签的 src 属性将外部 JavaScript 文件链接到你的 HTML。
如何使用 alert() 函数创建面向用户的弹出消息。

这个基础对于构建更复杂和交互式的 Web 应用程序至关重要。继续实验并巩固你所学到的知识！

JavaScript 入门与嵌入

介绍

创建带有 script 标签的 HTML 文件

编写 console.log 输出 Hello World

使用 src 属性链接外部 JavaScript 文件

添加 alert 函数以显示弹出消息

刷新浏览器以执行脚本

总结