用目前索引渲染作品內容
修改檔案:script.js
完成後看見:標題、描述與張數來自 slides[index]
CHAPTER 17 · PRACTICE WORKSPACE
可前後切換並抽取練習提示的原生 JavaScript 輪播
TASK STATUS
修改檔案:script.js
完成後看見:標題、描述與張數來自 slides[index]
修改檔案:script.js
完成後看見:最後一張可回第一張,第一張可回最後一張
修改檔案:script.js
完成後看見:每次點擊顯示一項有效提示
WORKSPACE
先確認作品目前能做什麼、還缺什麼,再從 TASK-01 開始修改。
FOCUS TASK · TASK-01
比較:index 是目前狀態,render 依 slides[index] 產生畫面;不要把內容散落在按鈕事件中。
現在做:在 Checkpoint 1 暫時把 currentIndex 從 0 改成 1 再重新整理,確認 renderSlide() 顯示第二筆;復原後說明 index 是狀態、render 是畫面出口。
預期:完成後能觀察到「標題、描述與張數來自 slides[index]」,並說出index 是目前狀態,render 依 slides[index] 產生畫面;不要把內容散落在按鈕事件中。
證據:用前後截圖或口述比較「標題、描述與張數來自 slides[index]」,指出這個小型實驗如何證明index 是目前狀態,render 依 slides[index] 產生畫面;不要把內容散落在按鈕事件中。
比較:標題、描述與張數都應來自目前資料,修改資料時畫面才能同步。
現在做:在 Checkpoint 1 只修改 slides[0].title 的文字後重新整理,確認畫面同步變更;復原資料後再驗證一次,說明資料集中比重複寫死更容易維護。
預期:完成後能觀察到「標題、描述與張數來自 slides[index]」,並說出標題、描述與張數都應來自目前資料,修改資料時畫面才能同步。
證據:用前後截圖或口述比較「標題、描述與張數來自 slides[index]」,指出這個小型實驗如何證明標題、描述與張數都應來自目前資料,修改資料時畫面才能同步。
完成條件:DONE-01:標題、描述與張數來自 slides[index]
CAROUSEL LAB
內容由 render 更新。
提示會出現在這裡。
CHAPTER HANDOFF
接收:第 16 章已驗收判斷、works 陣列迴圈 render 與 localStorage 清除邊界;本章改在獨立輪播頁練習同一個「資料陣列 → render → DOM」責任模式。
本章交棒:slides、currentIndex、renderSlide()、首尾 modulo 與提示陣列的有效索引;第 18 章會在獨立 timer 頁加入時間生命週期,不共用本頁 HTML。
CONTINUE
前往 Checkpoint 1,依要求完成「用目前索引渲染作品內容」。