介绍
JavaScript 无需赘述。它是最受欢迎的网页开发编程语言之一。它的工作原理类似于 HTML 和 CSS。所有这些语言都有助于设计和开发基于 Web 的应用程序和程序。
那么，JavaScript 具体有什么用呢？在 JavaScript 的帮助下，你可以让你的 Web 应用程序和网页具有很强的互动性。在现代领域，没有自满的余地。你需要在最初的几秒钟内吸引观众的注意力，并让他们保持参与。毫无疑问，一个有趣且响应迅速的网页设计是实现这一目标的最佳方式之一。值得庆幸的是，大多数浏览器都支持 JavaScript。它可以在一些内置引擎的帮助下在你的浏览器上运行。
将 JavaScript 添加到 HTML
如果你想在 Web 应用中使用 JavaScript 文件，你需要将它们与 HTML 标记并排运行。有两种方法可以将 JavaScript 添加到 HTML 中。一种方法是在 HTML 文档中以内联方式进行。另一种方法是将其作为一个单独的文件添加。该文件将与 HTML 文档一起下载。
在本教程中，我们将详细探讨如何将 JavaScript 添加到 HTML ，使用这两种方法。
如何以内联方式将 JavaScript 添加到 HTML 文档中
首先，我们将了解如何以内联方式将 JavaScript 添加到 HTML 文档中。为此，你必须使用专用的 HTML 标签。它就是 <script>。此标签包裹着 JavaScript 代码。你可以将该标签放置在 HTML 标记的任何位置。放置的位置取决于你希望何时加载 JavaScript。
例如，你可以将其放在 <head> 部分、<body> 部分，甚至放在 </body> 闭合标签之后。如果你想让 JavaScript 远离 HTML 代码的主要内容，最好将该标签放在 <head> 部分。这将包含 JavaScript 代码。另一方面，你可能希望你的 JavaScript 代码在网页的布局中运行。如果是这种情况，你应该将该标签放在 <body> 部分。例如，如果你正在使用 document.write 来生成内容，你就会这样做。
通过一个代码示例可以更好地理解这一点。考虑以下空白的 HTML 文档。该文档的浏览器标题是 Today’s Date：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>今天的日期</title> </head> <body> </body> </html> |
如你所见，这里没有 JavaScript 的踪影。该文档目前仅包含 HTML 标记。现在，我们想以内联方式添加一些 JavaScript 代码，使其同时加载和运行。考虑以下这段 JavaScript 代码：
|
1 2 |
let d = new Date(); alert("今天的日期是 " + d); |
根据上述代码，我们正在使我们的网页显示一个带有今天日期的警报。因此，无论访问者何时启动该网站，页面都将显示当前日期。
现在，要将这段 JavaScript 代码添加到 HTML 文档中，我们将使用 <script> 标签。首先，你需要将 JavaScript 代码添加到 <head> 标签之间。这会告诉网页，这段特定的代码必须在页面的其他内容之前加载。你可以将代码添加到 <title> 标签下方。以下是具体的操作方法：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>今天的日期</title> <script> let d = new Date(); alert("今天的日期是 " + d); </script> </head> <body> </body> </html> |
您的 JavaScript 代码现在已添加。您的网页将在加载页面其余部分之前运行并加载此脚本。当您启动网站时，您将收到一个包含当前日期的弹窗提示，类似于这样：
这就是将代码添加到 HTML 文档的 <head> 部分的方法。另一种选择是将脚本添加到 <body> 标签的内部或外部。正如您在下面的示例中看到的，我们将在 <head> 部分之后添加这段代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>今天的日期</title> </head> <body> <script> let d = new Date(); document.body.innerHTML = "<h1>今天的日期是 " + d + "</h1>" </script> </body> </html> |
进行此修改后，重新加载页面时您将看到类似以下的内容：
如何使用独立的 JavaScript 文件将 JavaScript 添加到 HTML
较小的 JavaScript 脚本与 HTML 文件配合得很好。这是因为它们可以完整地在单个页面或更少的内容中运行。如果您处理的是占用多个页面的较大脚本，文件可能会变得非常难以理解。这就是为什么您可能需要将其添加为独立的 JavaScript 文件。该文件将与 HTML 文档同时加载。
在本节中，我们将讨论如何使用独立文件将 JavaScript 添加到 HTML 中。代码通常存放在一个或多个 .js 文件中。HTML 文档将像引用任何其他外部资源一样引用这些文件。想要完全使用独立 JavaScript 文件的原因有很多。主要原因在于，它使代码更容易阅读和理解。更不用说，独立的文件可以让缓存的页面快速加载，而且维护起来也相对更容易。
为了利用这些优势，您需要知道如何将两者（JavaScript 文件和 HTML 文档）连接起来。为了帮助您理解，我们将以一个小型 Web 项目为例。这个假设的项目在根目录下包含一个主 index.html，在 css/ 目录中包含 style.css，在 js/ 目录中包含 script.js。这是我们的小项目：
|
1 2 3 4 5 6 7 8 9 10 11 |
project/ ├── css/ | └── style.css ├── js/ | └── script.js └── index.html |
对于我们的 HTML 标记，我们将使用之前使用的文档：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>今天的日期</title> </head> <body> </body> </html> |
现在我们有了这两个文档，可以开始将它们连接起来。我们需要将与日期相关的 JavaScript 代码添加到 script.js 文件中。您将按如下方式将其添加为 <h1> 标题：
|
1 2 |
let d = new Date(); document.body.innerHTML = "<h1>今天的日期是 " + d + "</h1>" |
要将代码连接到 HTML 文档，您需要添加对该脚本的引用。该引用应位于 HTML 模板的 <body> 部分内部或下方。以下是您在此处需要使用的代码：
|
1 |
<script src="js/script.js"></script> |
如您所见，我们正在使用 <script> 标签。该标签指向项目 js/ 目录中的 script.js 文件。以下是代码在 HTML 文档中的呈现方式：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>今天的日期</title> </head> <body> </body> <script src="js/script.js"></script> </html> |
如果您愿意，可以进行一些样式修改来美化您的页面。例如，让我们为 <h1> 标题添加一些背景颜色。我们将在 style.css 文件中进行此修改：
|
1 2 3 4 5 6 7 8 |
body { background-color: #0080ff; } h1 { color: #fff; font-family: Arial, Helvetica, sans-serif; } |
由于修改要在页眉中显示，我们将在 HTML 文档的 <head> 部分中引用它。以下是您引用此 CSS 文件的方法：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>今天的日期</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> <script src="js/script.js"></script> </html> |
现在我们已经做好了所需的引用，您可以直观地看到这些变化。在浏览器中加载 index.html，您将看到如下页面：
如果您想更新代码，可以从一个位置编辑所有页面。这使得网页的维护变得非常容易。这就是为 JavaScript 脚本使用单独文件的好处。
结论
希望本教程能帮助您了解更多关于将 JavaScript 添加到 HTML 中的过程。我们介绍了如何将其内联添加到 HTML 文档中，以及如何将其作为 .js 文件添加。现在您已经了解了基础知识，您可以使用 HTML 中的 JavaScript 做更多事情。
以下是我们博客中的一些资源，它们将帮助您进一步利用 JavaScript：
- 如果您正在构建自己的 Web 应用程序，请查看 我们关于如何选择最佳服务器配置的指南.
- 如果您想学习 如何使用 Ghost 搭建博客，请查看本教程.
- 请查看本教程 以了解如何在 Ubuntu 18.04 上安装 Node.js.
祝您计算愉快！
评论
暂无评论。发表第一条评论吧。