CHAPTER 17 · PRACTICE WORKSPACE

索引、render、亂數與輪播

可前後切換並抽取練習提示的原生 JavaScript 輪播

02 Checkpoint 1 1/3
  1. 01Starter讀懂作品骨架
  2. 02Checkpoint 1加入第一項能力
  3. 03Checkpoint 2累積第二項能力
  4. 04Solution核對完整結果

TASK STATUS

三項任務目前狀態

TASK-01已完成

用目前索引渲染作品內容

修改檔案:script.js

完成後看見:標題、描述與張數來自 slides[index]

TASK-02本階段處理

完成可首尾循環的前後切換

修改檔案:script.js

完成後看見:最後一張可回第一張,第一張可回最後一張

TASK-03稍後處理

抽出陣列內的隨機提示

修改檔案:script.js

完成後看見:每次點擊顯示一項有效提示

WORKSPACE

本階段實作區

已完成 TASK-01;先核對可見結果,再前往 TASK-02。

FOCUS TASK · TASK-02

現在只處理:完成可首尾循環的前後切換

修改:script.js

完成後:最後一張可回第一張,第一張可回最後一張

講解時展開:2 個小型比較

首尾循環 vs 邊界停住|兩種導覽策略

比較:循環會把最後一張接回第一張,clamp 則停在邊界;需求不同,不能混用。

現在做:在 Checkpoint 2 先記錄目前的 modulo 寫法,再暫時以 Math.min(currentIndex + 1, slides.length - 1) 取代下一張規則,觀察末張停住;復原 modulo 後重跑首尾操作。

看預期與證據

預期:完成後能觀察到「最後一張可回第一張,第一張可回最後一張」,並說出循環會把最後一張接回第一張,clamp 則停在邊界;需求不同,不能混用。

證據:用前後截圖或口述比較「最後一張可回第一張,第一張可回最後一張」,指出這個小型實驗如何證明循環會把最後一張接回第一張,clamp 則停在邊界;需求不同,不能混用。

前一步 vs 後一步|同一套 index 規則

比較:上一張與下一張都要更新同一個 index,再交給 render 顯示。

現在做:在 Checkpoint 2 依序按下一張兩次、上一張一次,記錄 slide-count 的變化,再回看兩個事件是否都更新同一個 currentIndex 並呼叫 renderSlide()

看預期與證據

預期:完成後能觀察到「最後一張可回第一張,第一張可回最後一張」,並說出上一張與下一張都要更新同一個 index,再交給 render 顯示。

證據:用前後截圖或口述比較「最後一張可回第一張,第一張可回最後一張」,指出這個小型實驗如何證明上一張與下一張都要更新同一個 index,再交給 render 顯示。

需要排錯時查看:任務循環(觀察 → 預測 → 實作 → 故障 → 驗收)
  1. A|觀察:在 Checkpoint 1 確認第一張作品內容與 1 / 總數已正確顯示,再按前後鍵,觀察 index 尚未改變。
  2. B|預測:連續切到最後一張再按下一張,並從第一張按上一張,確認首尾循環。
  3. C|實作:在 script.js 的 兩個輪播按鈕事件 完成「完成可首尾循環的前後切換」,一次只處理本任務責任。
  4. D|故障:若結果不一致,先依原操作重現,再檢查 兩個輪播按鈕事件 與 script.js,最後重跑原操作。
  5. E|驗收:最後一張可回第一張,第一張可回最後一張

完成條件:DONE-02:最後一張可回第一張,第一張可回最後一張

CAROUSEL LAB

作品輪播

第 1 / 3 張

準備顯示作品

內容由 render 更新。

提示會出現在這裡。

CHAPTER HANDOFF

把資料陣列接上目前索引

接收:第 16 章已驗收判斷、works 陣列迴圈 render 與 localStorage 清除邊界;本章改在獨立輪播頁練習同一個「資料陣列 → render → DOM」責任模式。

本章交棒:slidescurrentIndexrenderSlide()、首尾 modulo 與提示陣列的有效索引;第 18 章會在獨立 timer 頁加入時間生命週期,不共用本頁 HTML。

CONTINUE

繼續完成 TASK-02

前往 Checkpoint 2,依要求完成「完成可首尾循環的前後切換」。

前往 Checkpoint 2:完成 TASK-02