JavaScript - 在HTML文件中放置位置

JavaScript 在 HTML 文件中的位置

可以在 HTML 文档中的任何位置灵活地放置JavaScript 代码。但是，在 HTML 文件中包含 JavaScript 的最优方式如下：

在 <head>...</head> 部分中的脚本。
在 <body>...</body> 部分中的脚本。
在 <body>...</body> 和 <head>...</head> 部分中的脚本。
在外部文件中编写脚本，然后在 <head>...</head> 部分中包含。

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

<script>
   // JavaScript code
</script>

在下一节中，我们将看到如何通过不同的方式在 HTML 文件中放置 JavaScript。

在 <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 代码。它使用户能够立即与网页互动并获得实时更新。

内联和外部脚本

可以使用`