介绍
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>
现在，有了 JavaScript 和 CSS，我们可以将 index.html 页面加载到我们选择的 Web 浏览器中。我们应该看到一个类似于以下内容的页面：
!JavaScript Date with CSS Example
现在，我们已经将 JavaScript 放在一个文件中，可以以相同的方式从其他网页调用它，并在单个位置更新它们。
结论
本教程介绍了如何将 JavaScript 集成到您的 Web 文件中，包括内联到 HTML 文档中以及作为单独的 .js 文件。
从这里，您可以学习如何使用 JavaScript 开发者控制台以及如何在 JavaScript 中编写注释。
版权声明：本文为博主作者：白如意i原创文章，版权归属原作者，如果侵权，请联系我们删除！
原文链接：https://blog.csdn.net/rubys007/article/details/137245942
