用 if 處理空白與有效輸入
不是背名詞，而是能在練習頁操作、指出程式位置並解釋畫面結果。
CHAPTER 16 · 180 MINUTES
判斷、陣列、迴圈與 localStorage
單一問候能互動，但還不能依空白輸入做判斷、不能批次顯示作品，也無法在重新整理後保留資料。
3個明確任務
2個接回點
1份可見成果
LEARNING GOALS
本章結束時，你能做出什麼
用迴圈把陣列顯示到頁面
不是背名詞，而是能在練習頁操作、指出程式位置並解釋畫面結果。
儲存並在重新整理後讀回名字
不是背名詞，而是能在練習頁操作、指出程式位置並解釋畫面結果。
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
位置：依任務文字搜尋對應元素或函式
結果：空白時提醒輸入，有名字時顯示歡迎
用陣列與迴圈渲染作品
檔案：script.js
位置：依任務文字搜尋對應元素或函式
結果：三項作品從資料產生為清單
把名字存入並讀回 localStorage
檔案：script.js
位置：依任務文字搜尋對應元素或函式
結果：重新整理後仍顯示已儲存名字
EVIDENCE
成果證據與檢核
30 秒說法可以直接照這個句型練習：
空白時 if ______ 顯示 ______；作品來自陣列 ______，由 ______ 逐筆渲染；名字存於 ______。
localStorage 只屬於目前瀏覽器與裝置；不要把它描述成帳號同步或雲端保存。
輸入名字後重新整理仍保留，刪除 storage 後回到未儲存狀態，並指出清單由哪個陣列產生。
交給下一章：保留「資料陣列 → render → DOM」責任；第 17 章只新增目前索引與切換規則，不重新拆散 render。