JavaScript - HTML 文件中的放置

可以灵活地将 JavaScript 代码包含在 HTML 文档中的任何位置。然而，在 HTML 文件中包含 JavaScript 的最首选方法如下 -

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

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

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

如果您想让脚本在某些事件上运行，例如当用户单击某处时，那么您可以将该脚本放置在头部，如下所示 -

<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 文件中。

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

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

要从外部文件源使用 JavaScript，您需要将所有 JavaScript 源代码写入扩展名为“.js”的简单文本文件中，然后包含该文件，如上所示。

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

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