如何将 JavaScript 添加到 HTML

介绍

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

在处理 Web 文件时，需要加载 JavaScript 并与 HTML 标记一起运行。这可以在 HTML 文档中内联完成，也可以在浏览器将与 HTML 文档一起下载的单独文件中完成。

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

将 JavaScript 添加到 HTML 文档中

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

该<script>标签可以放置在<head>你的HTML的部分或<body>段，这取决于当你想在JavaScript来负载上。

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

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

让我们考虑以下浏览器标题为 的空白 HTML 文档Today's Date：

索引.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);

这将使网页能够显示带有当前日期的警报，而不管用户何时加载站点。

为了实现这一点，我们将<script>在 HTML 文件中添加一个标签和一些 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 警报示例

如果我们要修改 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 日期示例

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

使用单独的 JavaScript 文件

为了适应更大的脚本或将在多个页面中使用的脚本，JavaScript 代码通常存在于一个或多个jsHTML 文档中引用的文件中，类似于引用 CSS 等外部资产的方式。

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

  • 分离 HTML 标记和 JavaScript 代码，使两者更直接
  • 单独的文件使维护更容易
  • 缓存 JavaScript 文件时，页面加载速度更快

为了演示如何将 JavaScript 文档连接到 HTML 文档，让我们创建一个小型 Web 项目。这将包括script.js在js/目录，style.css在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>

现在，让我们移动将日期显示为文件<h1>头的JavaScript 代码script.js：

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

我们可以<body>使用以下代码行将对此脚本的引用添加到该部分：

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

该<script>标签指向我们的 web 项目目录中的script.js文件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>标题添加背景颜色和样式来编辑文件：

样式文件
body {
    background-color: #0080ff;
}

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

我们可以在<head>HTML 文档的部分中引用该 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 浏览器中。我们应该会看到一个类似于以下内容的页面：

带有 CSS 示例的 JavaScript 日期

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

结论

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

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

觉得文章有用？

点个广告表达一下你的爱意吧 ！😁