# 第 6 章：JavaScript 基礎

## 本章目標

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

## 你會做出什麼

你會做出一個小型「學習狀態卡」，點擊按鈕後更新完成數量與提示文字。

## 核心觀念

JavaScript 可以選取 HTML 元素，監聽使用者動作，然後改變畫面。最常見的流程是：

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：
```javascript
console.log("Hello AI Coding!");
```
如果你看到它在下一行印出了 `Hello AI Coding!`，恭喜你，這就是 JS 跟瀏覽器溝通的橋樑！未來所有除錯、變數檢查，都會在這裡進行。

## 常用語法

- `const`：宣告不重新指定的變數
- `let`：宣告會改變的變數
- `querySelector`：選取頁面元素
- `addEventListener`：監聽事件
- `textContent`：修改文字
- `classList`：新增或移除 class

## 實作步驟

1. 在 HTML 建立訊息文字、計數文字與按鈕。
2. 在 `script.js` 選取這些元素。
3. 建立一個 `completedCount` 變數。
4. 點擊按鈕時讓數字加一。
5. 更新頁面文字。

## Codex Prompt 範例

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

## 常見錯誤

*   **[錯誤] JS 執行時 HTML 元素還不存在**
    **[解法]**：確保 `<script>` 放在 `</body>` 前面，這樣 JS 執行時畫面標籤都已經準備好了。

*   **[錯誤] `id` 名稱和 `querySelector` 不一致**
    **[解法]**：如果在 HTML 中是 `<button id="myBtn">`，JS 裡面一定要用 `querySelector("#myBtn")`，注意那個 `#` 字號。

*   **[錯誤] 忘記把數字更新回畫面**
    **[解法]**：變數加一不代表畫面會動。記得加上 `element.textContent = 變數` 才能更新畫面。

## 本章練習

請替範例加上「重置」按鈕，點擊後完成數量回到 0，提示文字回到初始狀態。



> **[小提示]** 記得要遵循互動三步驟：1. 用 `querySelector` 抓取重置按鈕；2. 加上 `click` 事件監聽；3. 在大括號內把計數變數設為 `0` 並更新畫面 textContent。

## 檢查清單

- 我知道 JavaScript 負責互動
- 我能用 `querySelector` 選取元素
- 我能用 `addEventListener` 處理點擊
- 我能更新頁面上的文字