用 const 記住 DOM 元素
不是背名詞，而是能在練習頁操作、指出程式位置並解釋畫面結果。
CHAPTER 15 · 180 MINUTES
JavaScript：變數、函數、事件與 DOM
HTML 只能先寫死文字；要讓使用者輸入資料後改變畫面，必須分清楚資料、處理步驟、事件與 DOM 各自責任。
3個明確任務
2個接回點
1份可見成果
LEARNING GOALS
本章結束時，你能做出什麼
用具名函數產生問候文字
不是背名詞，而是能在練習頁操作、指出程式位置並解釋畫面結果。
點擊後讀取 input 並更新畫面
不是背名詞，而是能在練習頁操作、指出程式位置並解釋畫面結果。
PROBLEM & ANALOGY
先理解責任，再寫語法
變數像貼標籤的收納盒，函數像固定操作流程，事件像門鈴，DOM 則是可被找到與更新的房間物件。
本章要解決：HTML 只能先寫死文字；要讓使用者輸入資料後改變畫面，必須分清楚資料、處理步驟、事件與 DOM 各自責任。
接住上一章：第 14 章已建立版本紀錄的作品集。
合回共同作品：本章成果必須回到同一份作品集檢查，不另開一個無關小作品。
把名詞對回畫面與程式
- 具名函數
- 有名字、可單獨測試與重複呼叫的行為單位。
- input value
- 使用者目前輸入的資料，不是 input 元素本身。
- addEventListener
- 把點擊等事件接到處理函數。
- DOM
- JavaScript 讀取與更新的頁面節點。
- classList
- 用 class 表達狀態，不把樣式寫死在 JavaScript。
SCOPE
今天的學習邊界
能自己完成
用 const 記住 DOM 元素；用具名函數產生問候文字；點擊後讀取 input 並更新畫面。
看得懂即可
能辨識 value、textContent 與 classList 的責任。
刻意延後
不教陣列、迴圈、非同步或箭頭函數縮寫。
本章術語：const、function、event、DOM、querySelector、textContent。遇到英文先回到畫面責任，不要求背拼字。
CORE IDEAS
三個核心觀念
- 先選到元素並確認不是 null，再綁定事件。
- 函數只做一件可說明的事，輸入名字、輸出問候文字。
- 資料先進 JavaScript，再由 render 更新 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
位置：依任務文字搜尋對應元素或函式
結果：函數收到名字後回傳完整問候
點擊後讀取輸入並更新 DOM
檔案：script.js
位置：依任務文字搜尋對應元素或函式
結果：結果區顯示輸入者的名字
用 class 表達預覽重點狀態
檔案：script.js
位置：依任務文字搜尋對應元素或函式
結果：可切換結果區的重點外觀
EVIDENCE
成果證據與檢核
30 秒說法可以直接照這個句型練習：
事件 ______ 讀取 ______，交給函數 ______，再更新 DOM ______；重點狀態由 class ______ 表達。
本章先用安全文字與 class 操作 DOM；不要把整段 HTML 字串直接塞進 innerHTML。
輸入自己的名字、按下按鈕並切換預覽狀態；口頭指出變數、函數、事件與 DOM 更新各在哪一段。
下一章：第 16 章會加入判斷、清單資料與本機保存。