CHAPTER 15 · PRACTICE WORKSPACE

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

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

01 Starter 0/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 開始修改。

FOCUS TASK · TASK-01

現在只處理：完成產生問候文字的具名函數

修改：script.js

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

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

return vs DOM 副作用｜函數責任分開

比較：具名函數先產生可測試的回傳值，畫面更新則是另一個 DOM 責任。

現在做：先在 script.js 的 createGreeting(name) 做一次最小對照：只改這個責任並重新整理／操作，接著依「在 DevTools Console 執行 createGreeting('小安')，確認函數回傳含有姓名的完整問候；這一步尚未實作按鈕事件。」重跑，記下前後差異。

看預期與證據

預期：完成後能觀察到「函數收到名字後回傳完整問候」，並說出具名函數先產生可測試的回傳值，畫面更新則是另一個 DOM 責任。

證據：用前後截圖或口述比較「函數收到名字後回傳完整問候」，指出這個小型實驗如何證明具名函數先產生可測試的回傳值，畫面更新則是另一個 DOM 責任。

參數 vs 寫死文字｜同一函數可重用

比較：名字從參數進入函數，才能讓同一個問候邏輯處理不同使用者。

現在做：先在 script.js 的 createGreeting(name) 做一次最小對照：只改這個責任並重新整理／操作，接著依「在 DevTools Console 執行 createGreeting('小安')，確認函數回傳含有姓名的完整問候；這一步尚未實作按鈕事件。」重跑，記下前後差異。

看預期與證據

預期：完成後能觀察到「函數收到名字後回傳完整問候」，並說出名字從參數進入函數，才能讓同一個問候邏輯處理不同使用者。

證據：用前後截圖或口述比較「函數收到名字後回傳完整問候」，指出這個小型實驗如何證明名字從參數進入函數，才能讓同一個問候邏輯處理不同使用者。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：在 Starter 的 Console 執行 createGreeting('小安')，確認目前只回傳空字串，按鈕事件尚未列入本步。
  2. B｜預測：在 DevTools Console 執行 createGreeting('小安')，確認函數回傳含有姓名的完整問候；這一步尚未實作按鈕事件。
  3. C｜實作：在 script.js 的 createGreeting(name) 完成「完成產生問候文字的具名函數」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 createGreeting(name) 與 script.js，最後重跑原操作。
  5. E｜驗收：函數收到名字後回傳完整問候

完成條件：DONE-01：函數收到名字後回傳完整問候

FIRST JAVASCRIPT

作品集問候小工具

問候會顯示在這裡。

CHAPTER HANDOFF

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

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

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

CONTINUE

開始 TASK-01

前往 Checkpoint 1，依要求完成「完成產生問候文字的具名函數」。

前往 Checkpoint 1：完成 TASK-01