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 程式碼。它使使用者能夠立即與網頁互動並獲得即時更新。

內聯和外部指令碼

可以使用`