JavaScript - 在 HTML 文件中的位置

JavaScript 在 HTML 文件中的位置

您可以灵活地将 JavaScript 代码 放置在 HTML 文档中的任何位置。但是，在 HTML 文件中添加 JavaScript 的最佳方式如下:

• 将脚本放置在 <head>...</head> 部分中。

• 将脚本放置在 <body>...</body> 部分中。

• 将脚本放置在 <body>...</body> 和 <head>...</head> 部分中。

• 将脚本放置在外部文件中，然后将其添加到 <head>...</head>部分。

您可以按照以下语法使用 script 标签添加 JavaScript 代码。

<script>
// JavaScript 代码
</script>

在下一节中，我们将了解如何以不同的方式将 JavaScript 放置在 HTML 文件中。

<head>...</head> 部分中的 JavaScript

如果您想在某些事件(例如用户点击某个位置时)上运行脚本，则可以按如下方式将该脚本放置在 head 中 -

<html>
<head>
   <script type = "text/javascript">
      function sayHello() {
	     alert("Hello World")
	  }
   </script>
</head>

<body>
   <input type = "button" onclick = "sayHello()" value = "Say Hello" />
</body>
</html>

<body>...</body> 部分中的 JavaScript

如果您需要在页面加载时运行脚本，以便该脚本在页面中生成内容，则该脚本应位于文档的 <body> 部分。在这种情况下，您无需使用 JavaScript 定义任何函数。请看以下代码。

<html>
<head>
</head>
<body>   
   <script type = "text/javascript">
      document.write("Hello World")
   </script>  
   <p>This is web page body </p>   
</body>
</html>

<body> 和 <head> 部分中的 JavaScript

您可以将 JavaScript 代码同时放在 <head> 和 <body> 部分中，如下所示 -

<html>
<head>
   <script type = "text/javascript">
      function sayHello() {
	     alert("Hello World")
	  }
   </script>
</head>
  
<body>
   <script type = "text/javascript">
      document.write("Hello World")
   </script>
   <input type = "button" onclick = "sayHello()" value = "Say Hello" />
</body>
</html>

外部文件中的 JavaScript

随着您开始更广泛地使用 JavaScript，您可能会发现在网站的多个页面上重复使用相同 JavaScript 代码的情况。

您不必在多个 HTML 文件中维护相同的代码。script 标签提供了一种机制，允许您将 JavaScript 存储在外部文件中，然后将其包含在 HTML 文件中。

要从外部文件源使用 JavaScript，您需要将所有 JavaScript 源代码编写到一个扩展名为".js"的简单文本文件中，然后包含该文件，如下所示。

例如，您可以将以下内容保存在 filename.js 文件中，然后在包含 filename.js 文件后，即可在 HTML 文件中使用 sayHello 函数。

filename.js

function sayHello() {
   alert("Hello World")
}

外部 JavaScript 文件不包含 <script> 标签。

以下示例展示了如何使用 script 标签及其 src 属性在 HTML 代码中包含外部 JavaScript 文件。

您可以在 <head> 或 <body> 标签中包含外部脚本引用。

<html>
<head>
<script type = "text/javascript" src = "filename.js" ></script>
</head>
<body>
...
</body>
</html>

此外，您可以创建不同的模块以更好地维护代码，并将每个模块导入另一个 JavaScript 文件，或将所有模块导入一个 HTML 文件。

您可以按照以下代码将多个脚本添加到一个 HTML 文件中。

<head>
  <script src = "filename1.js" ></script>
  <script src = "filename2.js" ></script>
  <script src = "filename3.js" ></script>
</head>

外部引用

您可以使用以下三种方式在 HTML 中添加外部 JavaScript 文件。

1. 使用完整文件路径

当您需要将任何托管的 JavaScript 文件或同一项目中不存在的文件添加到 HTML 中时，应使用完整文件路径。

例如:

<head>
<script src = "C://javascript/filename.js" ></script>
</head>

2. 使用相对文件路径

如果您正在处理项目，并且 JavaScript 和 HTML 文件位于不同的文件夹中，则可以使用相对文件路径。

<head>
  <script src = "javascript\filename.js" ></script>
</head>

3. 仅使用文件名

如果 HTML 和 JavaScript 文件位于同一文件夹中，则可以使用文件名。

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

使用 <script> 标签的优势

以下是使用 <script> 标签在 HTML 中添加 JavaScript 的优势。

易于集成

<script> 标签允许开发人员轻松地将 JavaScript 集成到 HTML 文件中。将 JavaScript 添加到 HTML 文件可以为您的网页添加行为和交互性。

立即执行

每当浏览器在网页上发现 <script> 标签时，它会立即执行其中定义的 JavaScript 代码。它使网站访问者能够与网页进行交互并立即获得实时更新。

内联脚本和外部脚本

您可以使用 <script> 标签将内联脚本或外部脚本添加到 HTML 文件中。如果您想在网页 HTML 之前加载 JavaScript，您可以在 <head> 标签中添加 <script. 标签。否则，您可以在 <body> 标签中添加 <script> 标签。

外部库和框架集成

<script>标签允许您将外部库和框架添加到 HTML 网页。

例如，在下面的代码中，我们使用 JQuery 的 CDN 将其添加到网页。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"> </script>

这里的"src"属性包含指向库的托管链接。

全局范围访问

您在 script 标签中定义的任何代码都可以访问网页的全局范围。您可以在代码中的任何位置访问全局变量、函数等。