Chapter 06

JavaScript 基礎

JavaScript 負責網頁互動。你會用按鈕事件改變文字、更新狀態，並理解 DOM 操作的基本流程。

互動流程

1. 找到元素
2. 設定初始資料
3. 監聽事件
4. 更新資料
5. 把資料顯示回頁面

沒有 JS vs 有 JS 的差異

• 沒有 JS 時的死網頁：按鈕按了沒反應，內容永遠是寫死的。
• 有 JS 後的活網頁：
  1. 監聽點擊：「當使用者按下按鈕時...」
  2. 執行邏輯：「把目前數量加 1...」
  3. 更新畫面：「把新的數字顯示在畫面上。」

這三個步驟就是前端互動的核心。

認識開發者工具 (Developer Tools)

在真正寫 JS 之前，你要先知道怎麼看到 JS 的錯誤訊息與輸出。
請在瀏覽器（如 Chrome 或 Edge）按下 F12 鍵，或者在網頁上點擊右鍵選擇「檢查 (Inspect)」，然後切換到 Console (主控台) 標籤頁。

你可以試著在這個 Console 輸入你人生的第一行 JS 程式碼並按下 Enter：

console.log("Hello AI Coding!");

如果你看到它在下一行印出了 Hello AI Coding!，恭喜你，這就是 JS 跟瀏覽器溝通的橋樑！未來所有除錯、變數檢查，都會在這裡進行。

常用語法

• querySelector：選取頁面元素
• addEventListener：監聽事件
• textContent：修改文字
• classList：新增或移除 class

Prompt 範例

請只修改 script.js，幫我替這個頁面加入互動。點擊「完成一項」按鈕時，完成數量加一，並更新提示文字。請用初學者能理解的寫法。

範例檔案

本章範例在 examples/ch06-js-interaction/。