用 if 處理空白與有效輸入
條件：先留空再輸入名字，各按一次確認提示與歡迎訊息分支。 驗收：空白時提醒輸入，有名字時顯示歡迎
CHAPTER 16 · 180 MINUTES
判斷、陣列、迴圈與 localStorage
單一問候能互動，但還不能依空白輸入做判斷、不能批次顯示作品，也無法在重新整理後保留資料。
3個明確任務
2個接回點
1份可見成果
LEARNING GOALS
本章結束時，你能做出什麼
用迴圈把陣列顯示到頁面
條件：重新整理後查看作品清單，確認三項內容都由陣列迴圈產生。 驗收：三項作品從資料產生為清單
儲存並在重新整理後讀回名字
條件：先輸入並儲存名字後重新整理，再清空名字儲存並重新整理。 驗收：重新整理後能讀回名字；清空並儲存後舊名字不會復活
進場檢核與作品接力
- 具備第 15 章成果：三項 DOM 互動任務已驗收：不看答案，展示一次輸入名字後的問候更新、一次空白輸入的訪客 fallback 與一次預覽重點切換，並指出 createGreeting、greetButton click handler、previewButton click handler 各自的責任。 需要補強時從這裡接回
- 能從 Starter、Checkpoint 與 Solution 中辨識目前工作階段：開啟本章主講義，指出 TASK-01 的修改檔案、可見結果與第一個 Checkpoint。 需要補強時從這裡接回
- 能用「操作後看見什麼」描述驗收證據：閱讀三個任務後，選一題說出操作條件與預期可見結果。 需要補強時從這裡接回
輸入：第 15 章產物：三項 DOM 互動任務——具名函數產生問候、按鈕讀取輸入更新 DOM、class 切換預覽狀態
本章輸出：可顯示作品清單並記住訪客名字的小功能
產物類型：mainline；後續用途：第 17 章、第 26 章
PROBLEM & ANALOGY
先理解責任，再寫語法
判斷像入口驗票，陣列像有順序的作品架，迴圈像逐格巡架，localStorage 像同一台瀏覽器裡的小置物櫃。
本章要解決：單一問候能互動，但還不能依空白輸入做判斷、不能批次顯示作品，也無法在重新整理後保留資料。
接住上一章：第 15 章能由事件讀取輸入並更新 DOM。
合回共同作品：本章成果必須回到同一份作品集檢查，不另開一個無關小作品。
把名詞對回畫面與程式
- if / else
- 依輸入或狀態選擇不同畫面結果。
- 陣列
- 集中保存多筆作品資料。
- forEach
- 逐筆把陣列資料轉成畫面內容。
- localStorage
- 保存目前瀏覽器的簡單資料，不是雲端資料庫。
- JSON stringify / parse
- 在 JavaScript 資料與儲存文字間轉換。
SCOPE
今天的學習邊界
能自己完成
用 if 處理空白與有效輸入；用迴圈把陣列顯示到頁面；儲存並在重新整理後讀回名字。
看得懂即可
能辨識 JSON 字串與 JavaScript 陣列的差別。
刻意延後
不教高階陣列方法鏈、資料庫或跨裝置同步。
本章術語：if、array、loop、localStorage、JSON、render。遇到英文先回到畫面責任，不要求背拼字。
CORE IDEAS
三個核心觀念
- 判斷先處理不允許的輸入，再進入正常流程。
- 陣列存資料，render 負責把目前資料全部同步到 DOM。
- localStorage 只存在同一個瀏覽器，不能存密碼或敏感資料。
DEBUG
錯誤觀察與排查順序
課堂刻意錯誤：故意把陣列直接指定給 innerHTML，畫面只出現逗號文字；再逐項建立 li，說明資料與 HTML 節點不同。
- 清單沒出現：確認 render 是否被呼叫，以及容器 id 是否正確。
- 重新整理後消失：到 Application 檢查 key 名稱是否一致。
- 畫面出現 [object Object]：先確認資料型別，不直接把物件塞進 textContent。
固定順序：先重現 → 讀 Console／Styles → 確認檔案與元素 → 一次只修一處 → 重跑原操作。
空白輸入仍顯示歡迎
先查：確認判斷條件是在 trim 後的值上執行。
清單改一筆要改很多 HTML
先查：檢查作品是否在陣列，render 是否用迴圈產生。
重新整理後名字消失
先查：查看 localStorage key、保存時機與 parse 訊息。
PRACTICE CONTRACT
Starter 到 Solution 是同一份骨架，任務一路加厚
開始前先確認這四件事
- 我先列出空白與有名字兩條結果。
- 作品資料集中在陣列，不複製三份卡片。
- 我知道何時 save、何時 load。
- 我會重新整理後判斷保存是否成功。
用判斷產生正確歡迎訊息
檔案：script.js
位置：createWelcome(name)
結果：空白時提醒輸入，有名字時顯示歡迎
用陣列與迴圈渲染作品
檔案：script.js
位置：renderWorks()
結果：三項作品從資料產生為清單
把名字存入並讀回 localStorage
檔案：script.js
位置：saveName() 與初始讀取
結果：重新整理後能讀回名字；清空並儲存後舊名字不會復活
EVIDENCE
成果證據與檢核
30 秒說法可以直接照這個句型練習：
空白時 if ______ 顯示 ______；作品來自陣列 ______，由 ______ 逐筆渲染；名字存於 ______。
localStorage 只屬於目前瀏覽器與裝置；不要把它描述成帳號同步或雲端保存。
輸入名字後重新整理仍保留；清空名字並儲存後再次重新整理不應恢復舊名字，並指出清單由哪個陣列產生。
交給下一章：保留「資料陣列 → render → DOM」責任模式與 localStorage 已驗收的邊界；第 17 章會在獨立輪播頁把這套模式套到 slides 與 currentIndex，不重新講解資料與 render 的基本分工，也不共用本章 HTML 檔案。