HTML - JavaScript - 極客書

A腳本是一個小程序，可以向您的網站添加交互性。例如，腳本可以生成彈出的警報框消息，或提供下拉菜單。此腳本可以使用JavaScript或VBScript編寫。

可以使用任何腳本語言編寫各種稱爲事件處理程序的小函數，然後可以使用HTML屬性觸發這些函數。

現在，大多數web開發人員只使用JavaScript和相關的框架，而VBScript甚至不受各種主流瀏覽器的支持。

您可以將JavaScript代碼保存在一個單獨的文件中，然後根據需要將其包含在任何地方，也可以在HTML文檔本身中定義功能。讓我們用合適的例子逐一看這兩個案例。

External JavaScript

如果要定義一個將在各種HTML文檔中使用的功能，那麼最好將該功能保存在單獨的JavaScript文件中，然後將該文件包含在HTML文檔中。JavaScript文件的擴展名爲.js，它將使用<script>標記包含在HTML文件中。

Example

假設我們在script.js中使用JavaScript定義了一個小函數，它有以下代碼−

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

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

Live Demo

<!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>

這將產生以下結果，您可以嘗試單擊給定的按鈕−

Internal Script

您可以將腳本代碼直接寫入HTML文檔。通常，我們使用<script>標記將腳本代碼保留在文檔的標題中，否則沒有限制，您可以將原始碼放在文檔中除<script>標記之外的任何位置。

Example

Live Demo

<!DOCTYPE html>
<html>

   <head>
      <title>JavaScript Internal Script</title>
      <base href = "https://www.tutorialspoint.com/" />
      
      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>

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

</html>

這將產生以下結果，您可以嘗試單擊給定的按鈕−

Event Handlers

事件處理程序只是簡單定義的函數，可以針對任何滑鼠或鍵盤事件調用。您可以在事件處理程序中定義您的業務邏輯，它可以從一行代碼到1000行代碼不等。

下面的示例說明如何編寫事件處理程序。讓我們在文檔頭中編寫一個簡單的函數EventHandler（）。當任何用戶將滑鼠移到段落上時，我們將調用此函數。

Live Demo

<!DOCTYPE html>
<html>

   <head>
      <title>Event Handlers Example</title>
      <base href = "https://www.tutorialspoint.com/" />
      
      <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>

現在這將產生以下結果。把你的滑鼠移到這條線上，看看結果;

Hide Scripts from Older Browsers

雖然現在大多數（如果不是所有）瀏覽器都支持JavaScript，但有些老的瀏覽器不支持，如果瀏覽器不支持JavaScript，它將向用戶顯示代碼，而不是運行腳本。爲了防止這種情況，您可以簡單地在腳本周圍放置HTML注釋，如下所示。

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

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

The <noscript> Element

您還可以爲其瀏覽器不支持腳本的用戶以及禁用腳本的用戶選擇其瀏覽器提供其他信息。您可以使用<noscript>標記來執行此操作。

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

<noscript>Your browser does not support JavaScript!</noscript>

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

<noscript>Your browser does not support VBScript!</noscript>

Default Scripting Language

可能會出現這樣的情況：您將包含多個腳本文件，並最終使用多個<script>標記。您可以爲所有腳本標記指定默認腳本語言。這樣可以避免每次在頁面中使用腳本標記時都指定語言。下面是一個例子;

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

請注意，仍然可以通過在腳本標記中指定語言來覆蓋默認值。