极客笔记HTML 如何使用外部的“.js”文件
在本文中，我们将介绍如何在 HTML 文件中使用外部的 JavaScript 文件（“.js”文件）。使用外部的 JavaScript 文件可以将脚本代码与 HTML 内容分离，使代码结构更清晰，易于维护和更新。
阅读更多：HTML 教程
什么是外部的“.js”文件
外部的 “.js” 文件是包含 JavaScript 代码的独立文件，通常具有 “.js” 扩展名。这些文件可以在 HTML 页面的头部或身体部分被引用，使得其中的 JavaScript 代码可以被页面调用和执行。
如何引用外部的“.js”文件
要在 HTML 文件中引用外部的 JavaScript 文件，我们可以使用 <script> 标签，并将其放置在 <head> 或 <body> 部分。
下面是一个例子：
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
<p>Example paragraph</p>
</body>
</html>
在上面的示例中， <script> 标签内的 src 属性指定了外部 JavaScript 文件的路径。在这个例子中， script.js 文件与 HTML 文件位于同一目录下，我们可以通过相对路径来引用该文件。如果需要引用其他目录中的 JavaScript 文件，可以使用相对路径或绝对路径指定文件的位置。
JavaScript 文件的位置
在使用外部 JavaScript 文件时，可以将 <script> 标签放置在 HTML 页面的 <head> 部分或 <body> 部分。这取决于你的需求和 JavaScript 代码运行的时机。
如果 <script> 标签放置在 <head> 部分，那么 JavaScript 文件会在 HTML 文档加载时被下载，并在文档被解析之前被执行。这种方式适用于需要在页面加载前运行的 JavaScript 代码。
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
<p>Example paragraph</p>
</body>
</html>
如果 <script> 标签放置在 <body> 部分的末尾，那么 JavaScript 文件会在 HTML 文档加载完成后被下载，并在 HTML 内容被解析之后被执行。这种方式适用于需要在页面加载完成后运行的 JavaScript 代码。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Hello, World!</h1>
<p>Example paragraph</p>
<script src="script.js"></script>
</body>
</html>
引用多个外部的“.js”文件
在一个 HTML 文件中，我们可以引用多个外部的 JavaScript 文件。只需在 <head> 或 <body> 部分添加多个 <script> 标签，并分别指定不同的文件路径。
<!DOCTYPE html>
<html>
<head>
<script src="script1.js"></script>
<script src="script2.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
<p>Example paragraph</p>
<script src="script3.js"></script>
</body>
</html>
在上面的示例中，我们引用了三个外部的 JavaScript 文件。
JavaScript 文件加载顺序
当页面引用多个外部 JavaScript 文件时，它们的加载顺序是按照在 HTML 中的顺序进行的。这意味着，如果一个文件依赖于另一个文件中的变量或函数，确保先引用依赖的文件，再引用依赖的文件。
<!DOCTYPE html>
<html>
<head>
<script src="script1.js"></script>
<script src="script2.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
<p>Example paragraph</p>
<script src="script3.js"></script>
</body>
</html>
在上面的示例中，如果 script3.js 依赖于 script1.js 或 script2.js 中的代码，那么 script3.js 应该在这两个文件的前面被引用。
总结
本文介绍了如何在 HTML 文件中使用外部的 JavaScript 文件（“.js”文件）。我们可以通过在 <head> 或 <body> 部分添加 <script> 标签，并指定外部 JavaScript 文件的路径来引用这些文件。引用外部的 JavaScript 文件可以使代码更清晰，易于维护和更新。同时，在引用多个外部 JavaScript 文件时，要注意它们的加载顺序，确保依赖关系的正确性。通过使用外部的 JavaScript 文件，可以使网页更加可靠和高效。