用 const 記住 DOM 元素
條件：在 DevTools Console 執行 createGreeting('小安')，確認函數回傳含有姓名的完整問候；這一步尚未實作按鈕事件。 驗收：函數收到名字後回傳完整問候
CHAPTER 15 · 180 MINUTES
JavaScript：變數、函數、事件與 DOM
HTML 只能先寫死文字；要讓使用者輸入資料後改變畫面，必須分清楚資料、處理步驟、事件與 DOM 各自責任。
3個明確任務
2個接回點
1份可見成果
LEARNING GOALS
本章結束時，你能做出什麼
用具名函數產生問候文字
條件：更換姓名後再次點擊，確認結果區讀到最新輸入並更新。 驗收：結果區顯示輸入者的名字
點擊後讀取 input 並更新畫面
條件：連續點擊切換按鈕，確認結果區的重點 class 可以加入也可以移除。 驗收：可切換結果區的重點外觀
進場檢核與作品接力
- 具備第 14 章成果：具備清楚 README 與可檢查 commit history 的作品 repo：不看答案，展示或口述第 14 章成果，並說出一項可見證據。 需要補強時從這裡接回
- 能從 Starter、Checkpoint 與 Solution 中辨識目前工作階段：開啟本章主講義，指出 TASK-01 的修改檔案、可見結果與第一個 Checkpoint。 需要補強時從這裡接回
- 能用「操作後看見什麼」描述驗收證據：閱讀三個任務後，選一題說出操作條件與預期可見結果。 需要補強時從這裡接回
輸入：第 14 章產物：具備清楚 README 與可檢查 commit history 的作品 repo
本章輸出：輸入名字後即時更新問候與作品預覽的互動
產物類型：mainline；後續用途：第 16 章
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 章會加入判斷、清單資料與本機保存。