HTML - JavaScript

JavaScript 是一種高階程式語言，也是 Web 開發的核心技術。指令碼是一個 HTML 元素，它與 JavaScript 協同工作，使我們的網頁更具互動性。

例如，指令碼可以生成彈出警報框訊息，或者根據某些條件（例如使用者單擊按鈕）提供下拉選單。此指令碼可以使用 JavaScript 或 VBScript 編寫。如今，大多數 Web 開發人員只使用JavaScript 和相關的框架，VBScript 甚至不受主流瀏覽器支援。

有多種方法可以將指令碼新增到 HTML 文件中。我們可以將 JavaScript 程式碼儲存在單獨的檔案中，然後在需要的地方包含它，也可以在 HTML 文件本身內定義功能。讓我們逐一檢視這兩種情況並給出合適的示例。

語法

<script>
   function Hello() {
      alert("Hello, World");
   }
</script>

JavaScript 在 HTML 中的示例

以下是一些示例，說明了在 HTML 頁面中使用 JavaScript 的方法。這將探討將 HTML 頁面與 JavaScript 連線的方式。

HTML 文件內的指令碼

我們可以直接將指令碼程式碼寫入 HTML 文件中。通常，我們將指令碼程式碼儲存在文件的頭部，位於<script>標籤內，但是沒有限制。我們可以在文件中的任何位置放置指令碼程式碼，但必須位於<script>標籤內。

<!DOCTYPE html>
<html>

<head>
   <title>
      JavaScript Internal Script
   </title>
   <script type="text/JavaScript"> 
      function Hello(){
         alert("Hello, World");
      }
   </script>
</head>

<body>
   <input type="button" 
          onclick="Hello();" 
          name="ok" 
          value="Click Me" />
</body>

</html>

匯入外部 JavaScript

如果開發人員要定義將在各種 HTML 文件中使用的功能，那麼最好將該功能儲存在單獨的 JavaScript 檔案中，然後將該檔案包含在 HTML 文件中。

JavaScript 檔案的副檔名為.js，它將使用<script>標籤包含在 HTML 檔案中。

假設我們在script.js中使用 JavaScript 定義了一個小函式，其中包含以下程式碼

function Hello() {
   alert("Hello, World");
}

現在，讓我們在下面的 HTML 文件中使用上述外部 JavaScript 檔案

<!DOCTYPE html>
<html>

<head>
   <title>JavaScript External Script</title>
   <script src="/html/script.js" type="text/JavaScript" />
   </script>
</head>

<body>
   <input type="button" 
          onclick="Hello();" 
          name="ok" 
          value="Click Me" />
</body>

</html>

JavaScript 中的事件處理程式

事件處理程式是簡單的函式，可以針對任何滑鼠或鍵盤事件呼叫。我們可以在事件處理程式中定義任何型別的邏輯，這可以從一行程式碼到數千行程式碼不等。

下面的示例說明了如何編寫事件處理程式。我們將編寫一個名為EventHandler()的簡單函式，放在文件的頭部。當任何使用者將滑鼠懸停在段落上時，我們將呼叫此函式。

<!DOCTYPE html>
<html>

<head>
   <title>Event Handlers Example</title>
   <script type="text/JavaScript"> 
      function EventHandler(){
      alert("I'm event handler!!");
      }
   </script>
</head>

<body>
   <p onmouseover="EventHandler();">
      Bring your mouse here to see an alert
   </p>
</body>

</html>

從舊版瀏覽器中隱藏指令碼

儘管如今大多數瀏覽器都支援 JavaScript，但有些舊版瀏覽器不支援。如果瀏覽器不支援 JavaScript，它不會執行您的指令碼，而是會將程式碼顯示給使用者。為了防止這種情況，我們可以簡單地將 HTML 註釋放在腳本週圍，如下所示。

JavaScript 示例

<script type="text/JavaScript">
   <!--
   document.write("Hello JavaScript!");
   //-->
</script>

VBScript 示例

<script type="text/vbscript">
   <!--
   document.write("Hello VBScript!")
   '-->
</script>

HTML <noscript> 元素

對於瀏覽器不支援指令碼的使用者，或者在瀏覽器中停用了指令碼的使用者，我們可以使用<noscript>標籤將指令碼嵌入網頁中，如下例所示。

JavaScript 示例

<script type="text/JavaScript">
   <!--
   document.write("Hello JavaScript!");
   //-->
</script>
<noscript>Your browser does not support JavaScript!</noscript>

VBScript 示例

<script type="text/vbscript">
   <!--
   document.write("Hello VBScript!")
   '-->
</script>
<noscript>Your browser does not support VBScript!</noscript>

預設指令碼語言

我們可能需要包含多個指令碼檔案，最終使用多個<script>標籤。我們可以一次為所有指令碼標籤指定預設指令碼語言。這樣可以避免每次在頁面中使用指令碼標籤時都指定語言。以下是一個示例。

<meta http-equiv="Content-Script-Type" content="text/JavaScript" />

請注意，您仍然可以透過在指令碼標籤中指定語言來覆蓋預設值。

列印頁面