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文件中维护相同的代码。该 脚本 标签提供一种机制,允许你存储的JavaScript在外部文件中,然后包含到你的HTML文件。

这是一个示例,说明如何使用脚本 标签及其 src 属性在HTML代码中包含外部JavaScript文件 。

<html>

   <head>

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

   </head>

   

   <body>

      .......

   </body>

</html>

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

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

function sayHello() {

   alert("Hello World")

}

以上是 JavaScript ::在HTML文件中的放置 的全部内容, 来源链接: utcz.com/z/327649.html

回到顶部