CHAPTER 15 · PRACTICE WORKSPACE

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

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

02 Checkpoint 1 1/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-01；先核對可見結果，再前往 TASK-02。

FOCUS TASK · TASK-02

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

修改：script.js

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

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

input.value vs textContent｜讀取與顯示

比較：輸入框的值從 value 讀取，結果區的文字用 textContent 顯示；元素角色不同。

現在做：先在 script.js 的 greetButton click handler 做一次最小對照：只改這個責任並重新整理／操作，接著依「更換姓名後再次點擊，確認結果區讀到最新輸入並更新；再清空輸入後點擊，確認顯示『訪客』作為空白 fallback。」重跑，記下前後差異。

看預期與證據

預期：完成後能觀察到「結果區顯示輸入者的名字；空白時顯示訪客」，並說出輸入框的值從 value 讀取，結果區的文字用 textContent 顯示；元素角色不同。

證據：用前後截圖或口述比較正常輸入與空白輸入的結果，指出這個小型實驗如何證明輸入框的值從 value 讀取，結果區的文字用 textContent 顯示；元素角色不同。

事件入口 vs DOM 更新｜點擊後的資料流

比較：事件只負責觸發流程，讀值、產生文字與更新畫面應能各自說明。

現在做：先在 script.js 的 greetButton click handler 做一次最小對照：只改這個責任並重新整理／操作，接著依「更換姓名後再次點擊，確認結果區讀到最新輸入並更新；再清空輸入後點擊，確認顯示『訪客』作為空白 fallback。」重跑，記下前後差異。

看預期與證據

預期：完成後能觀察到「結果區顯示輸入者的名字；空白時顯示訪客」，並說出事件只負責觸發流程，讀值、產生文字與更新畫面應能各自說明。

證據：用前後截圖或口述比較正常輸入與空白輸入的結果，指出這個小型實驗如何證明事件只負責觸發流程，讀值、產生文字與更新畫面應能各自說明。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：在 Checkpoint 1 先以 Console 確認 createGreeting 已能組出姓名，再輸入另一個名字，觀察按鈕尚未把結果寫回 DOM。
  2. B｜預測：更換姓名後再次點擊，確認結果區讀到最新輸入並更新；再清空輸入後點擊，確認顯示「訪客」作為空白 fallback。
  3. C｜實作：在 script.js 的 greetButton click handler 完成「點擊後讀取輸入、處理空白並更新 DOM」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 greetButton click handler 與 script.js，最後重跑原操作。
  5. E｜驗收：結果區顯示輸入者的名字；空白時顯示訪客

完成條件：DONE-02：結果區顯示輸入者的名字；空白時顯示訪客

FIRST JAVASCRIPT

作品集問候小工具

問候會顯示在這裡。

CHAPTER HANDOFF

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

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

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

CONTINUE

繼續完成 TASK-02

前往 Checkpoint 2，依要求完成「點擊後讀取輸入、處理空白並更新 DOM」。

前往 Checkpoint 2：完成 TASK-02