如何将 JavaScript 添加到 HTML 页面

介绍

JavaScript，简称 JS，是一种用于网页开发的编程语言。作为 Web 的核心技术之一，JavaScript 与 HTML 和 CSS 一起用于使网页具有交互性并构建 Web 应用程序。现代 Web 浏览器遵循通用的显示标准，通过内置引擎支持 JavaScript，无需额外的插件。

在处理 Web 文件时，JavaScript 需要与 HTML 标记一起加载和运行。这可以通过两种方式实现：要么内联在 HTML 文档中，要么作为浏览器将与 HTML 文档一起下载的单独文件运行。

本教程将介绍如何将 JavaScript 整合到您的 Web 文件中，包括内联到 HTML 文档和作为单独文件。

将 JavaScript 添加到 HTML 文档中

您可以通过使用专用的 HTML 标记 <script> 将 JavaScript 代码添加到 HTML 文档中。

<script> 标记可以放置在 HTML 的 <head> 部分或 <body> 部分，具体取决于您希望 JavaScript 何时加载。

通常，JavaScript 代码可以放在文档的 <head> 部分中，以便将其包含在 HTML 文档的主要内容之外。

但是，如果您的脚本需要在页面布局的某个特定点运行（例如在使用 document.write 生成内容时），则应将其放在应调用它的位置，通常在 <body> 部分内。

让我们考虑以下带有浏览器标题为“今天的日期”的空白 HTML 文档：

<!DOCTYPE html>
<html lang="en-US"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Today's Date</title>
</head><body></body></html>

目前，此文件仅包含 HTML 标记。假设我们想要将以下 JavaScript 代码添加到文档中：

let d = new Date();
alert("Today's date is " + d);

这将使网页显示一个警报，其中包含当前日期，无论用户何时加载该站点。

为了实现这一点，我们将在 HTML 文件中添加一个 <script> 标记以及一些 JavaScript 代码。

首先，我们将在 <head> 标记之间添加 JavaScript 代码，以通知浏览器在加载页面的其余部分之前运行 JavaScript 脚本。我们可以在 <title> 标记下方添加 JavaScript，如下所示：

<!DOCTYPE html>
<html lang="en-US"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Today's Date</title><script>let d = new Date();alert("Today's date is " + d);</script>
</head><body></body></html>

加载页面后，您将收到类似于以下内容的警报：

!JavaScript Alert Example

如果我们要修改 HTML 主体中显示的内容，我们需要在 <head> 部分之后实现，以便它显示在页面上，如下例所示：

<!DOCTYPE html>
<html lang="en-US"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Today's Date</title>
</head><body><script>let d = new Date();document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"</script></body></html>

通过 Web 浏览器加载上述 HTML 文档的输出将类似于以下内容：

!JavaScript Date Example

小型或仅在一个页面上运行的脚本可以在 HTML 文件中正常工作，但对于较大的脚本或将在许多页面上使用的脚本来说，这不是一个非常有效的解决方案，因为包含它可能变得笨拙或难以阅读和理解。在下一节中，我们将介绍如何在 HTML 文档中处理单独的 JavaScript 文件。

使用单独的 JavaScript 文件

为了容纳较大的脚本或将在多个页面上使用的脚本，JavaScript 代码通常存储在一个或多个 js 文件中，并在 HTML 文档中引用，类似于引用外部资源（如 CSS）。

使用单独的 JavaScript 文件的好处包括：

将 HTML 标记和 JavaScript 代码分开，使两者更加简单
单独的文件使维护更容易
当 JavaScript 文件被缓存时，页面加载更快

为了演示如何将 JavaScript 文档连接到 HTML 文档，让我们创建一个小型 Web 项目。它将包括 js/ 目录中的 script.js，css/ 目录中的 style.css，以及项目根目录中的主 index.html。

project/
├── css/
|   └── style.css
├── js/
|   └── script.js
└── index.html

我们可以从上面的部分中开始使用我们之前的 HTML 模板：

<!DOCTYPE html>
<html lang="en-US"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Today's Date</title>
</head><body></body></html>

现在，让我们将显示日期的 JavaScript 代码移动到 script.js 文件中，作为一个 <h1> 标题：

let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"

我们可以在 <body> 部分添加对此脚本的引用，代码如下：

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

<script> 标记指向我们 Web 项目中 js/ 目录中的 script.js 文件。

让我们在我们的 HTML 文件的上下文中考虑这行代码，即在 <body> 部分中：

<!DOCTYPE html>
<html lang="en-US"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Today's Date</title>
</head><body><script src="js/script.js"></script></body> </html>

最后，让我们还编辑 style.css 文件，为 <h1> 标题添加背景颜色和样式：

body {background-color: #0080ff;
}h1 {color: #fff;font-family: Arial, Helvetica, sans-serif;
}

我们可以在 HTML 文档的 <head> 部分引用该 CSS 文件：

<!DOCTYPE html>
<html lang="en-US"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Today's Date</title><link rel="stylesheet" href="css/style.css">
</head><body><script src="js/script.js"></script></body></html>