💻 主題 21：網頁程式設計 (JavaScript)

歡迎來到 A Level IT 學習之旅的最後一個主題！這一章節極具實用性且令人興奮，我們將重點探討如何讓網頁「動起來」。到目前為止，你可能已經使用 HTML 來構建頁面結構，並使用 CSS 來讓頁面變得美觀。但正是 JavaScript (JS) 為網頁賦予了大腦，讓它能夠與使用者進行互動。

先備知識： 我們假設你已經對 HTML（結構）和 CSS（樣式）有了良好的理解，這些內容在之前的課程（如 IGCSE Website Authoring）中已經涵蓋。

讓我們一起深入探討如何利用 JavaScript 為你的網頁注入生命力吧！

21.1 使用 JavaScript 增加互動性

JavaScript 是一種高階、直譯式的指令碼語言，主要用於用戶端（使用者的網頁瀏覽器）。它允許你在網頁載入後，動態地更改頁面的內容、樣式和行為。

插入 JavaScript 的方法

你可以透過兩種主要方式將 JS 程式碼加入 HTML 文件中：

  1. 在 HTML 中插入 JavaScript（內部腳本）：
    你將程式碼直接放在 HTML 文件中使用 <script> 標籤包裹，通常放在 <head> 內，或者在 </body> 結束標籤之前。這適合小型、特定的腳本。
  2. 建立並使用外部腳本：
    你將 JS 程式碼寫在一個獨立的檔案中（例如 script.js），並使用 <script src="script.js"></script> 標籤將其連結到 HTML。這是大型專案的最佳實踐，因為這樣可以讓程式碼更容易整理、維護和重複使用。

重點摘要： 將 JS 分離到外部檔案中可以保持 HTML 的整潔，並提高頁面載入速度（因為腳本可以被瀏覽器快取）。

操作 HTML 內容與樣式（DOM）

為了改變網頁上的任何內容，JavaScript 會與 文件物件模型 (Document Object Model, DOM) 進行互動。你可以將 DOM 想像成一個樹狀結構，代表頁面上的所有元素。

要操作一個元素，首先你需要定位到它。定位單一元素最常見的方法是使用其 ID：

document.getElementById(id)

一旦定位成功，你就可以更改以下內容：

  1. 文字/數字內容：
    使用 innerHTML 屬性來插入或更改目標元素內的文字或數值。

    2. 範例： document.getElementById("greeting").innerHTML = "Hello World!";

  2. 計算與字串處理：
    JS 可以執行計算並顯示結果。它還可以進行字串處理，例如將文字連接起來（`concatenation`）。

    3. 範例： document.getElementById("output").innerHTML = 5 + 7;

  3. 樣式（CSS 屬性）：
    你可以透過存取元素的 style 物件並修改 CSS 屬性（以 camelCase 寫法，例如 backgroundColor）來更改元素的樣式。

    4. 語法： document.getElementById(id).style.property = new style

    範例： document.getElementById("btn1").style.color = "red";

  4. 影像與影像屬性：
    你可以動態地更改影像元素的來源 (`src`) 或大小。

    5. 範例： document.getElementById("photo").src = "new_image.jpg";

顯示與隱藏 HTML 元素

這是互動性的基本要素，經常用於選單、彈出視窗或展開資訊。

  • 使用 style.visibility：
    設定 .style.visibility = "hidden" 會隱藏元素，但它仍然會佔用頁面上的原始空間。
  • 使用 style.display：
    設定 .style.display = "none" 會完全隱藏元素，且它原本佔用的空間會被頁面上的其他元素重新填補。
✅ 快速複習：Visibility 與 Display 的區別

Visibility： 隱藏它，但保留空間（就像一張隱形的椅子）。

Display： 隱藏它並將其從佈局流中移除（就像把椅子完全拿走）。這通常是讓物件消失的首選方法。

顯示資料與使用者互動

JavaScript 提供了幾種內建方法來顯示輸出內容以及徵求使用者的輸入。

以不同方式顯示資料
  1. 寫入 HTML 元素（使用 innerHTML）：
    （如上所述）這是標準且對使用者友善的方式，將資料顯示在頁面結構內。
  2. 寫入 HTML 輸出（使用 document.write()）：
    這會直接寫入文件串流。警告： 如果在頁面完全載入後（例如在事件內）執行，它通常會覆蓋整個現有文件，刪除所有目前的內容！請謹慎使用。
  3. 提示框（使用 window.alert()）：
    這會顯示一個包含訊息和「確定」按鈕的小型對話框。它會暫停程式執行，直到使用者點擊「確定」。

    4. 範例： window.alert("資料已成功提交！");

  4. 瀏覽器控制台（使用 console.log()）：
    這會將輸出寫入瀏覽器的開發者控制台。這種方法對於 除錯 (debugging) 至關重要，它讓程式設計師可以在不干擾可見網頁的情況下，檢查變數值並確認程式碼區塊是否正在執行。
使用者互動彈出視窗

這些彈出視窗允許進行簡單的資料收集和決策。

  • confirm()： 顯示一個帶有訊息和兩個按鈕（「確定」和「取消」）的對話框。它會回傳一個 布林值 (Boolean)（點擊「確定」回傳 true，點擊「取消」回傳 false）。

    • 類比： 詢問「你確定要繼續嗎？」（是/否）。

  • prompt()： 顯示一個要求使用者輸入數值的對話框。它會將使用者的輸入以 字串 (string) 形式回傳；若按下「取消」，則回傳 null。

    • 類比： 詢問「你的名字是什麼？」（一個文字輸入框）。

對常見 HTML 事件作出反應

網頁是 事件驅動 (event-driven) 的。這意味著 JavaScript 程式碼僅在特定動作（事件）發生時才會執行。你必須能夠辨識並使用以下常見的 HTML 事件：

  • onload： 當物件（例如整個頁面或圖片）載入完成時觸發。用途：確保所有頁面元素就緒後再執行腳本。
  • onchange： 當元素的內容被變更時觸發（通常用於輸入欄位或下拉式選單）。
  • onclick： 當使用者點擊元素時觸發（按鈕最常用的事件）。
  • onmouseover： 當滑鼠游標移動到元素上方時觸發。
  • onmouseout： 當滑鼠游標移開元素時觸發。
  • onkeydown： 當元素（如輸入欄位）處於焦點狀態且按下鍵盤按鍵時觸發。

你知道嗎？ 使用事件可以讓網頁感覺更有反應且即時，這就是為什麼 JS 對於現代使用者體驗如此重要的原因。

JavaScript 程式碼的結構與語法

要撰寫功能正常的 JS，你必須理解其基本組成。

JavaScript 語句

JavaScript 語句 (statement) 是由網頁瀏覽器執行的指令。語句之間使用分號 (;) 分隔。

  • 值（字面量與變數）：
    值是 JS 處理的資料。字面量 (Literals) 是固定值（例如 10.5, "Text", true）。變數 (Variables) 用於儲存資料值（例如 let score = 50;）。
  • 關鍵字 (Keywords)：
    JS 保留用於特定功能的詞彙（例如 let, if, function, for）。你不能將關鍵字用作變數名稱。
  • 表達式 (Expressions)：
    由值、變數和運算子組成的組合，經計算後會得出單一值。範例： 5 * (x + 2)
資料型別與型別轉換

你必須了解基本的資料型別：

  • number： 用於整數和浮點數。
  • string： 用於文字（需用引號括起來）。
  • Boolean： 儲存 true 或 false。
  • array： 用於在單一變數中儲存多個值（例如 let colours = ["red", "blue", "green"]）。
  • object： 用於儲存命名值的集合（例如 let person = {name: "Ali", age: 18}）。

型別轉換： JavaScript 屬於弱型別語言，這意味著變數可以隨時改變型別，直譯器通常會執行自動型別轉換（強制轉型）。你需要留意這一點，特別是在對輸入資料執行數學運算時，因為輸入值最初可能會被讀取為 string。

運算子（JS 的計算機）

運算子對值和變數執行運算。

  • 賦值運算子： 用於為變數賦值（例如 x = 5, x += 2）。
  • 算術運算子： 標準數學運算（+, -, *, /, %（取模，即餘數））。
  • 代數運算子： 與算術運算子類似，用於表達式中。
  • 字串運算子： 主要為加號 (+)，用於字串串接（連接字串）。
  • 邏輯運算子： 用於判斷變數或值之間的邏輯關係。
    • AND (&&)：若兩者皆為真，結果為真。
    • OR (||)：若至少有一者為真，結果為真。
    • NOT (!)：反轉邏輯狀態。
  • 比較運算子（邏輯、條件、型別）： 用於條件測試（例如在 if 語句或迴圈中）以檢查相等性或關係。
    • == (等於)：僅比較 值。（常見錯誤："5" == 5 為 true）
    • === (嚴格等於)：比較 值與型別。（"5" === 5 為 false）
    • != (不等於)
    • !== (嚴格不等於)
    • > (大於), < (小於), >= (大於等於), <= (小於等於)
⚠ 常見錯誤警示

除非你特別想要忽略資料型別，否則請始終在 JavaScript 中使用 ===（三個等號）。三個等號可以避免因自動型別轉換而導致的非預期行為！

流程控制、函式與計時器

為了讓程式發揮作用，它需要能夠進行決策並重複執行動作。

條件運算子與流程控制

這些運算子允許程式碼區塊根據條件的真偽來執行。

  • if, else, else if： 用於決策。JS 也支援 三元運算子 (Ternary operator)（簡單 if...else 語句的捷徑）。

    • 範例： if (score >= 90) { grade = 'A'; } else { grade = 'B'; }

  • switch： 用於將一個變數與多個可能的值（cases）進行比對測試。
JavaScript 的迴圈（迭代方法）

迴圈允許程式碼區塊重複執行（迭代）。

  1. for 迴圈： 當你明確知道要重複執行程式碼的次數時使用。

    結構： for (初始化; 條件; 遞增) { 程式碼... }

  2. for/in 迴圈： 用於遍歷 物件 (Object) 的屬性。
  3. while 迴圈： 當不知道迭代次數時使用；只要條件為真，迴圈就會持續執行。
  4. do/while 迴圈： 與 while 迴圈類似，但程式碼區塊在檢查條件前會 至少執行一次。

break 語句可以用在任何迴圈或 switch 區塊內，以立即離開該結構。

函式 (Functions)

函式 是為執行特定任務而設計的一段程式碼。函式是結構化程式設計的基礎，可以避免重複編寫程式碼。

函式可以透過三種方式執行：

  1. 當事件發生時（例如 onclick）。
  2. 被其他程式碼呼叫時（例如另一個函式呼叫它）。
  3. 自動執行（自我呼叫）：當頁面載入時，如果函式在括號內定義並立即執行。
JavaScript 計時事件

計時事件允許你隨時間排程執行函式，增加回應感或延遲效果。

  • setTimeout()： 在指定的毫秒數 (ms) 後 執行一次 函式。

    用途： 在表單提交後 3 秒顯示「感謝」訊息。

  • setInterval()： 以指定的間隔 (ms) 重複執行 函式。

    用途： 製作一個每 1000ms（1 秒）更新一次的時鐘。

為 JavaScript 程式碼加入註解

註解 (Comments) 是程式碼中不會被執行的文字，用來解釋其目的或功能。它們對於程式碼的可讀性至關重要，特別是在團隊合作或稍後回顧自己的程式碼時。

  • 單行註解： 以 // 開頭
  • 多行註解： 以 /* 開頭，並以 */ 結尾

🚀 實作重點摘要（Paper 4）

在 Paper 4 中，你經常需要編寫一個函式來執行計算、使用 document.getElementById() 修改元素的樣式或內容，然後將該函式連結到使用者事件（如 onclick 或 onchange）。多加練習這個流程，直到它成為你的直覺為止！