JavaScript

---

---

簡介

JavaScript 是一種輕量級、解釋型的程式語言，具有面向物件的功能，允許您在靜態 HTML 頁面中構建互動性。

JavaScript 程式碼不會被編譯，而是由直譯器進行翻譯。此直譯器嵌入在瀏覽器中，負責翻譯 JavaScript 程式碼。

關鍵點

• 它是輕量級的解釋型程式語言。

• 它專為建立網路中心應用程式而設計。

• 它與 Java 相互補充並整合。

• 它與 HTML 相互補充並整合。

• 它是一個開放的跨平臺語言。

JavaScript語句

JavaScript 語句是命令瀏覽器執行操作的指令。語句之間用分號 (;) 分隔。

JavaScript 語句構成 JavaScript 程式碼，瀏覽器逐行翻譯。

JavaScript 語句示例

document.getElementById("demo").innerHTML = "Welcome";

下表顯示了各種 JavaScript 語句：

JavaScript 註釋

JavaScript 支援 C 樣式和 C++ 樣式的註釋，因此

• 任何在 // 和行尾之間的文字都被視為註釋，JavaScript 會忽略。

• 任何在字元 /* 和 */ 之間的文字都被視為註釋。這可能跨越多行。

• JavaScript 還識別 HTML 註釋起始序列 <!--。JavaScript 將其視為單行註釋，就像 // 註釋一樣。-->

• HTML 註釋結束序列 --> JavaScript 不識別，因此應寫為 //-->。

示例

<script language="javascript" type="text/javascript">
   <!--

      // this is a comment. It is similar to comments in C++

      /*
         * This is a multiline comment in JavaScript
         * It is very similar to comments in C Programming
      */
   //-->
<script>

JavaScript 變數

變數被稱為用於儲存資訊的命名容器。我們可以將資料放入這些容器中，然後只需命名容器即可引用資料。

在 JavaScript 中宣告變數的規則

以下是宣告 JavaScript 變數時必須遵循的重要規則。

• 在 JavaScript 中，變數名區分大小寫，即 a 與 A 不同。

• 變數名只能以下劃線 (_) 或字母 (a 到 z 或 A 到 Z) 或美元符號 ($) 開頭。

• 數字 (0 到 9) 只能在字母之後使用。

• 變數名中不允許使用其他特殊字元。

在 JavaScript 程式中使用變數之前，必須先宣告它。變數使用 var 關鍵字宣告，如下所示：

<script type="text/javascript">
   <!--
      var money;
      var name, age;
   //-->
</script>

變數可以在宣告時初始化，也可以在聲明後初始化，如下所示：

<script type="text/javascript">
   <!--
      var name = "Ali";
      var money;
      money = 2000.50;
   //-->
</script>

Javascript 資料型別

如下所述，有兩種資料型別：

• 原始資料型別

• 非原始資料型別

下表描述了 JavaScript 中可用的原始資料型別

下表描述了 JavaScript 中的非原始資料型別

JavaScript 函式

函式是一組可重用的語句（程式碼），可以在程式的任何地方呼叫。在 JavaScript 中，函式關鍵字用於宣告或定義函式。

關鍵點

• 要定義函式，請使用 function 關鍵字，後跟函式名，後跟括號 ()。

• 在括號中，我們定義引數或屬性。

• 可重用語句（程式碼）組用大括號 {} 括起來。每當呼叫函式時，都會執行此程式碼。

語法

function functionname (p1, p2) {
   function coding…
}

JavaScript 運算子

運算子用於對一個、兩個或多個運算元執行運算。運算子由符號表示，例如 +、=、*、% 等。以下是 JavaScript 支援的運算子：

• 算術運算子

• 比較運算子

• 邏輯（或關係）運算子

• 賦值運算子

• 條件（或三元）運算子

• 算術運算子

算術運算子

下表顯示了 JavaScript 支援的所有算術運算子：

比較運算子

下表顯示了 JavaScript 支援的所有比較運算子：

邏輯運算子

下表顯示了 JavaScript 支援的所有邏輯運算子：

賦值運算子

下表顯示了 JavaScript 支援的所有賦值運算子：

條件運算子

它也稱為三元運算子，因為它有三個運算元。

控制結構

控制結構實際上控制程式的執行流程。以下是 JavaScript 支援的幾種控制結構。

• if … else

• switch case

• do while 迴圈

• while 迴圈

• for 迴圈

If … else

if 語句是基本的控制語句，它允許 JavaScript 進行決策並有條件地執行語句。

語法

if (expression){
   Statement(s) to be executed if expression is true
}

示例

<script type="text/javascript">
   <!--
      var age = 20;
      if( age > 18 ){
         document.write("<b>Qualifies for driving</b>");
      }
   //-->
</script>

switch case

switch 語句的基本語法是提供一個要計算的表示式和幾個不同的語句，這些語句根據表示式的值執行。直譯器將每個 case 與表示式的值進行比較，直到找到匹配項。如果沒有匹配項，則將使用預設條件。

語法

switch (expression) {
   case condition 1: statement(s)
                    break;
   case condition 2: statement(s)
                    break;
   ...
   case condition n: statement(s)
                    break;
   default: statement(s)
}

示例

<script type="text/javascript">
   <!--
      var grade='A';
      document.write("Entering switch block<br/>");
      switch (grade) {
         case 'A': document.write("Good job<br/>");
            break;
         case 'B': document.write("Pretty good<br/>");
            break;
         case 'C': document.write("Passed<br/>");
            break;
         case 'D': document.write("Not so good<br/>");
            break;
         case 'F': document.write("Failed<br/>");
            break;
         default:  document.write("Unknown grade<br/>")
      }
      document.write("Exiting switch block");
   //-->
</script>

Do while 迴圈

do...while 迴圈類似於 while 迴圈，只是條件檢查發生在迴圈的末尾。這意味著即使條件為假，迴圈也將至少執行一次。

語法

do{
   Statement(s) to be executed;
} while (expression);

示例

<script type="text/javascript">
   <!--
      var count = 0;
      document.write("Starting Loop" + "<br/>");
      do{
         document.write("Current Count : " + count + "<br/>");
         count++;
      }while (count < 0);
      document.write("Loop stopped!");
   //-->
</script>

這將產生以下結果：

Starting Loop
Current Count : 0
Loop stopped! 

While 迴圈

while 迴圈的目的是隻要表示式為真就重複執行語句或程式碼塊。一旦表示式變為假，迴圈將退出。

語法

while (expression){
   Statement(s) to be executed if expression is true
}

示例

<script type="text/javascript">
   <!--
      var count = 0;
      document.write("Starting Loop" + "<br/>");
      while (count < 10){
         document.write("Current Count : " + count + "<br/>");
         count++;
      }
      document.write("Loop stopped!");
   //-->
</script>

這將產生以下結果：

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped! 

For 迴圈

for 迴圈是最緊湊的迴圈形式，包括以下三個重要部分：

• 迴圈初始化，我們將計數器初始化為起始值。初始化語句在迴圈開始之前執行。

• 測試語句，它將測試給定條件是否為真。如果條件為真，則將執行迴圈中給出的程式碼，否則迴圈將退出。

• 迭代語句，你可以在其中增加或減少計數器。

語法

for (initialization; test condition; iteration statement){
   Statement(s) to be executed if test condition is true
}

示例

<script type="text/javascript">
   <!--
      var count;
      document.write("Starting Loop" + "<br/>");
      for(count = 0; count < 10; count++){
         document.write("Current Count : " + count );
         document.write("<br/>");
      }
      document.write("Loop stopped!");
   //-->
</script>

這將產生與 while 迴圈類似的結果：

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped! 

建立示例程式

以下是一個示例程式，它顯示單擊按鈕時的當前時間。

<html>
   <body>
      <button onclick="this.innerHTML=Date()">The time is?</button>
      <p>Click to display the date.</p>
      <button onclick="displayDate()">The time is?</button>
      <script>
         function displayDate() {
            document.getElementById("demo").innerHTML = Date();
         }</script>

         <p id="demo"></p>
      </script>
   </body>
</html>

輸出