Placement

优质

小牛编辑

133浏览

2023-12-01

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

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

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

... 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>部分中的JavaScript

如果您需要在页面加载时运行脚本以便脚本在页面中生成内容，则脚本将进入文档的部分。在这种情况下，您将不会使用JavaScript定义任何函数。看看下面的代码。

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

和部分中的JavaScript

您可以将您的JavaScript代码完全放在和部分中，如下所示 -

<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，您需要在扩展名为“.js”的简单文本文件中编写所有JavaScript源代码，然后包含该文件，如上所示。

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

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