用具名函數產生問候文字
條件：在 DevTools Console 執行 createGreeting('小安')，確認函數回傳含有姓名的完整問候；這一步尚未實作按鈕事件。 驗收：函數收到名字後回傳完整問候
CHAPTER 15 · 180 MINUTES
JavaScript：變數、函數、事件與 DOM
HTML 只能先寫死文字；要讓使用者輸入資料後改變畫面，必須分清楚資料、處理步驟、事件與 DOM 各自責任。
3個明確任務
2個接回點
1份可見成果
LEARNING GOALS
本章結束時，你能做出什麼
點擊後讀取輸入、處理空白並更新 DOM
條件：更換姓名後再次點擊，確認結果區讀到最新輸入並更新；清空輸入後再點擊，確認畫面顯示「訪客」作為空白 fallback。 驗收：結果區顯示輸入者的名字；空白時顯示訪客
用 class 表達預覽重點狀態
條件：連續點擊切換按鈕，確認結果區的重點 class 可以加入也可以移除。 驗收：可切換結果區的重點外觀
進場檢核與作品接力
- 具備第 14 章成果：清楚 README、三筆可說明 commit、乾淨 git status 與可核對遠端版本的作品 repo：不看答案，展示 README、git log --oneline -3 與 git status --short；若已設定遠端，再說明遠端最新 hash 如何與本機 HEAD 核對。 需要補強時從這裡接回
- 能從 Starter、Checkpoint 與 Solution 中辨識目前工作階段：開啟本章主講義，指出 TASK-01 的修改檔案、可見結果與第一個 Checkpoint。 需要補強時從這裡接回
- 能用「操作後看見什麼」描述驗收證據：閱讀三個任務後，選一題說出操作條件與預期可見結果。 需要補強時從這裡接回
輸入：第 14 章產物：清楚 README、三筆可說明 commit、乾淨 git status 與可核對遠端版本的作品 repo
本章輸出：三項 DOM 互動任務：具名函數產生問候、按鈕讀取輸入更新 DOM、class 切換預覽狀態
產物類型：mainline；後續用途：第 16 章
PROBLEM & ANALOGY
先理解責任，再寫語法
變數像貼標籤的收納盒，函數像固定操作流程，事件像門鈴，DOM 則是可被找到與更新的房間物件。
本章要解決：HTML 只能先寫死文字；要讓使用者輸入資料後改變畫面，必須分清楚資料、處理步驟、事件與 DOM 各自責任。
接住上一章：第 14 章已建立版本紀錄的作品集。
合回共同作品：本章成果必須回到同一份作品集檢查，不另開一個無關小作品。
把名詞對回畫面與程式
- 具名函數
- 有名字、可單獨測試與重複呼叫的行為單位。
- input value
- 使用者目前輸入的資料，不是 input 元素本身。
- addEventListener
- 把點擊等事件接到處理函數。
- DOM
- JavaScript 讀取與更新的頁面節點。
- classList
- 用 class 表達狀態，不把樣式寫死在 JavaScript。
SCOPE
今天的學習邊界
能自己完成
用 const 保存 DOM 參照；用具名函數產生問候文字；點擊後讀取 input、處理空白並更新畫面；用 classList 切換狀態。
看得懂即可
能辨識 value、textContent、classList 與事件處理器各自的責任。
刻意延後
不教陣列、迴圈、非同步或箭頭函數縮寫。
本章術語：const、function、event、DOM、querySelector、textContent、classList。遇到英文先回到畫面責任，不要求背拼字。
CORE IDEAS
三個核心觀念
- 先選到元素並確認不是 null，再綁定事件。
- 函數只做一件可說明的事，輸入名字、輸出問候文字。
- 資料先進 JavaScript，再由事件處理器更新 DOM，不直接把所有步驟塞成一行。
DEBUG
錯誤觀察與排查順序
課堂刻意錯誤：把 #name-input 寫成 #nameInput，讓 console 出現 null 相關錯誤；依序比對 HTML id、querySelector 與載入順序。
- 按鈕沒反應：先看 console，再確認 script 是否在 DOM 後載入。
- 結果顯示空白：在事件內 log input.value，確認資料是否讀到。
- class 沒變：比對 CSS 的
.is-highlighted與 classList 字串。
固定順序：先重現 → 讀 Console／Styles → 確認檔案與元素 → 一次只修一處 → 重跑原操作。
按鈕沒有反應
先查：確認 script、元素 id 與事件綁定時機。
結果出現 undefined
先查：檢查函數參數、回傳值與 value 是否真的讀到。
外觀沒有切換
先查：看 classList 名稱是否和 CSS 規則完全一致。
PRACTICE CONTRACT
Starter 到 Solution 是同一份骨架，任務一路加厚
開始前先確認這四件事
- 我已找到 input、按鈕與結果區 id。
- 我能說出函數收到什麼、回傳什麼。
- 事件流程是讀值 → 呼叫函數 → 更新 DOM。
- 我會測試正常、空白與重複點擊。
完成產生問候文字的具名函數
檔案：script.js
位置：createGreeting(name)
結果：函數收到名字後回傳完整問候
點擊後讀取輸入、處理空白並更新 DOM
檔案：script.js
位置：greetButton click handler
結果：結果區顯示輸入者的名字；空白時顯示訪客
用 class 表達預覽重點狀態
檔案：script.js
位置：previewButton click handler
結果：可切換結果區的重點外觀
EVIDENCE
成果證據與檢核
30 秒說法可以直接照這個句型練習：
事件 ______ 讀取 ______，交給函數 ______，再更新 DOM ______；空白時顯示 ______，重點狀態由 class ______ 表達。
本章先用安全文字與 class 操作 DOM；不要把整段 HTML 字串直接塞進 innerHTML。
輸入自己的名字、清空輸入各按一次問候按鈕，再切換預覽狀態；口頭指出變數、函數、事件、空白 fallback 與 DOM 更新各在哪一段。
下一章：第 16 章會加入判斷、清單資料與本機保存。