教程 > Javascript 教程 > Javascript 基础 阅读：68

Javascript 脚本位置

用户可以灵活地在 HTML 文档中的任何位置包含 JavaScript 代码。然而，在 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 = "向世界问好" />
   </body>  
</html>

尝试一下

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

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

<html>
   <head>
   </head>
   
   <body>
      <script type = "text/javascript">
         <!--
            document.write("Hello World")
         //-->
      </script>
      
      <p>这是web页中的 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 = "向世界打招呼" />
   </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文件中，然后在包含 filename.js 文件后，就可以在 HTML 文件中使用sayHello函数了。

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

这样以后需要在其他HTML文档中向世界打招呼的时候，是不是就不用再定义一遍 sayHello这个函数了，直接引用js文件就可以了。

查看笔记

扫码一下
查看教程更方便