CHAPTER 15 · PRACTICE WORKSPACE

JavaScript：變數、函數、事件與 DOM

輸入名字後即時更新問候與作品預覽的互動

03 Checkpoint 2 2/3
  1. 01Starter讀懂作品骨架
  2. 02Checkpoint 1加入第一項能力
  3. 03Checkpoint 2累積第二項能力
  4. 04Solution核對完整結果

TASK STATUS

三項任務目前狀態

TASK-01已完成

完成產生問候文字的具名函數

修改檔案：script.js

完成後看見：函數收到名字後回傳完整問候

TASK-02已完成

點擊後讀取輸入、處理空白並更新 DOM

修改檔案：script.js

完成後看見：結果區顯示輸入者的名字；空白時顯示訪客

TASK-03本階段處理

用 class 表達預覽重點狀態

修改檔案：script.js

完成後看見：可切換結果區的重點外觀

WORKSPACE

本階段實作區

已完成 TASK-02；先核對可見結果，再前往 TASK-03。

FOCUS TASK · TASK-03

現在只處理：用 class 表達預覽重點狀態

修改：script.js

完成後：可切換結果區的重點外觀

講解時展開：2 個小型比較

class 狀態 vs inline style｜狀態可維護

比較：用 class 表達預覽狀態，CSS 管理外觀，比每次點擊直接寫 inline style 更容易重用。

現在做：先在 script.js 的 previewButton click handler 做一次最小對照：只改這個責任並重新整理／操作，接著依「連續點擊切換按鈕，確認結果區的重點 class 可以加入也可以移除。」重跑，記下前後差異。

看預期與證據

預期：完成後能觀察到「可切換結果區的重點外觀」，並說出用 class 表達預覽狀態，CSS 管理外觀，比每次點擊直接寫 inline style 更容易重用。

證據：用前後截圖或口述比較「可切換結果區的重點外觀」，指出這個小型實驗如何證明用 class 表達預覽狀態，CSS 管理外觀，比每次點擊直接寫 inline style 更容易重用。

加入 vs 移除 class｜可逆的互動

比較：可切換狀態必須同時驗證開啟與關閉，不只測一次點擊後的畫面。

現在做：先在 script.js 的 previewButton click handler 做一次最小對照：只改這個責任並重新整理／操作，接著依「連續點擊切換按鈕，確認結果區的重點 class 可以加入也可以移除。」重跑，記下前後差異。

看預期與證據

預期：完成後能觀察到「可切換結果區的重點外觀」，並說出可切換狀態必須同時驗證開啟與關閉，不只測一次點擊後的畫面。

證據：用前後截圖或口述比較「可切換結果區的重點外觀」，指出這個小型實驗如何證明可切換狀態必須同時驗證開啟與關閉，不只測一次點擊後的畫面。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：在 Checkpoint 2 輸入兩個不同名字確認結果區會更新，接著按預覽切換鍵，確認 is-highlighted 尚未加入或移除。
  2. B｜預測：連續點擊切換按鈕，確認結果區的重點 class 可以加入也可以移除。
  3. C｜實作：在 script.js 的 previewButton click handler 完成「用 class 表達預覽重點狀態」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 previewButton click handler 與 script.js，最後重跑原操作。
  5. E｜驗收：可切換結果區的重點外觀

完成條件：DONE-03：可切換結果區的重點外觀

FIRST JAVASCRIPT

作品集問候小工具

問候會顯示在這裡。

CHAPTER HANDOFF

從第 14 章作品交付接上第一段 JavaScript

接收：帶著第 14 章已版本化的 index.html、style.css、README 與 Git 證據，在同一份作品上新增 script.js。

本章交棒：具名函數、輸入事件更新 DOM、空白 fallback 與 class 狀態切換；第 16 章可直接加入判斷、陣列、迴圈與 localStorage。

CONTINUE

繼續完成 TASK-03

前往 Solution，依要求完成「用 class 表達預覽重點狀態」。

前往 Solution：完成 TASK-03