如何将 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 文档：

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 代码添加到文档中：

javascript 复制代码

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

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

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

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

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>
    <script>
        let d = new Date();
        alert("Today's date is " + d);
    </script>
</head>
 
<body>
 
</body>
 
</html>

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

!JavaScript Alert Example

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

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>
  
  <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 模板：

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> 标题：

javascript 复制代码

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

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

javascript 复制代码

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

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

让我们在我们的 HTML 文件的上下文中考虑这行代码，即在 <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>
 

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

</body> 
 
</html>

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

css 复制代码

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

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

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>
    <link rel="stylesheet" href="css/style.css">
</head>
 
<body>
 

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

</body>
 
</html>

现在，有了 JavaScript 和 CSS，我们可以将 index.html 页面加载到我们选择的 Web 浏览器中。我们应该看到一个类似于以下内容的页面：

!JavaScript Date with CSS Example

现在，我们已经将 JavaScript 放在一个文件中，可以以相同的方式从其他网页调用它，并在单个位置更新它们。

结论

本教程介绍了如何将 JavaScript 集成到您的 Web 文件中，包括内联到 HTML 文档中以及作为单独的 .js 文件。

从这里，您可以学习如何使用 JavaScript 开发者控制台以及如何在 JavaScript 中编写注释。