如何将JavaScript添加到HTML
介绍
JavaScript，也缩写为 JS，是一种用于 Web 开发的编程语言。 作为与 HTML 和 CSS 并列的 Web 核心技术之一，JavaScript 用于使网页具有交互性并构建 Web 应用程序。 遵循通用显示标准的现代 Web 浏览器通过内置引擎支持 JavaScript，无需额外的插件。
处理 Web 文件时，需要加载 JavaScript 并与 HTML 标记一起运行。 这可以在 HTML 文档中内联或在浏览器将与 HTML 文档一起下载的单独文件中完成。
本教程将介绍如何将 JavaScript 合并到您的 Web 文件中，既可以内嵌到 HTML 文档中，也可以作为单独的文件。
将 JavaScript 添加到 HTML 文档中
您可以通过使用包裹 JavaScript 代码的专用 HTML 标签 <script> 在 HTML 文档中添加 JavaScript 代码。
<script> 标记可以放置在 HTML 的 <head> 部分或 <body> 部分中，具体取决于您希望何时加载 JavaScript。
通常，JavaScript 代码可以进入文档 <head> 部分，以保持它们包含在 HTML 文档的主要内容之外。
然而，如果你的脚本需要在页面布局中的某个点运行——比如使用 document.write 生成内容时——你应该把它放在应该调用它的点，通常在 [ X210X] 部分。
让我们考虑以下浏览器标题为 Today's Date 的空白 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 代码：
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>
加载页面后，您将收到类似于以下内容的警报：
如果我们要修改 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 文档的输出类似于以下内容：
较小的脚本或仅在一个页面上运行的脚本可以在 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>
现在，让我们将显示日期为 <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 项目的 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>
最后，让我们通过在 <h1> 标题中添加背景颜色和样式来编辑 style.css 文件：
样式.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 放在了一个文件中，我们可以从其他网页以相同的方式调用它，并在一个位置更新它们
结论
本教程介绍了如何将 JavaScript 合并到您的 Web 文件中，既可以内嵌到 HTML 文档中，也可以作为单独的 .js 文件。
从这里，您可以了解如何使用 JavaScript 开发者控制台 和 如何在 JavaScript 中编写注释。
