用索引與 render 顯示目前作品
條件：重新整理後對照 slides[0]，確認標題、描述與張數都由 renderSlide() 寫入；前後切換留到下一步。 驗收：標題、描述與張數來自 slides[index]
CHAPTER 17 · 180 MINUTES
索引、render、亂數與輪播
作品資料已在陣列中，但需要一個索引記住目前項目，並在前後切換時把正確資料重新顯示。
3個明確任務
2個接回點
1份可見成果
LEARNING GOALS
本章結束時，你能做出什麼
讓上一張與下一張首尾相接
條件：連續切到最後一張再按下一張，並從第一張按上一張，確認首尾循環。 驗收：最後一張可回第一張，第一張可回最後一張
從提示陣列抽出有效亂數項目
條件：連按隨機提示數次，確認每次結果都來自有效提示清單。 驗收：每次點擊顯示一項有效提示
進場檢核與作品接力
- 具備第 16 章成果：判斷、陣列 render 與 localStorage 已驗收：不看答案，展示空白與有名字兩個訊息分支、三項作品清單、重新整理後讀回名字，再說明清空並儲存後舊名字不會復活。 需要補強時從這裡接回
- 能從 Starter、Checkpoint 與 Solution 中辨識目前工作階段：開啟本章主講義，指出 TASK-01 的修改檔案、可見結果與第一個 Checkpoint。 需要補強時從這裡接回
- 能用「操作後看見什麼」描述驗收證據：閱讀三個任務後，選一題說出操作條件與預期可見結果。 需要補強時從這裡接回
輸入：第 16 章產物：判斷處理空白、works 陣列由迴圈 render 清單、portfolio-visitor 可用 localStorage 保存並在重整後讀回
本章輸出：可前後切換並抽取練習提示的原生 JavaScript 輪播
產物類型：mainline；後續用途：第 18 章
PROBLEM & ANALOGY
先理解責任，再寫語法
索引像書籤，renderSlide() 像把書籤所在頁攤開；亂數像從籤筒抽出一個有效編號，不能超過籤的數量。
本章要解決：作品資料已在陣列中，但需要一個索引記住目前項目，並在前後切換時把正確資料重新顯示。
接住上一章：第 16 章已驗收判斷、works 陣列迴圈 render 與 localStorage 清除邊界；本章在獨立輪播頁重用「資料陣列 → render → DOM」責任模式。
合回共同作品：本章成果必須回到同一份作品集檢查，不另開一個無關小作品。
把名詞對回畫面與程式
- slides
- 保存每張作品標題、描述與畫面資料的陣列。
- currentIndex
- 目前要顯示哪一張的狀態。
- renderSlide()
- 把目前資料同步成畫面的唯一出口。
- 循環索引
- 讓第一張與最後一張相接，不得到無效索引。
- random
- 從有效陣列範圍抽出一項提示。
SCOPE
今天的學習邊界
能自己完成
用索引與 render 顯示目前作品；讓上一張與下一張首尾相接；從提示陣列抽出有效亂數項目。
看得懂即可
能辨識事件只改資料、render 統一改畫面的分工。
刻意延後
不教自動播放、觸控滑動或第三方輪播套件。
本章術語：index、render、length、modulo、Math.random、Math.floor。遇到英文先回到畫面責任，不要求背拼字。
CORE IDEAS
三個核心觀念
- 索引有效範圍永遠是 0 到 length - 1。
- 按鈕事件先更新 index，再呼叫同一個 render。
- 亂數先乘陣列長度再 floor，才會得到可用整數索引。
DEBUG
錯誤觀察與排查順序
課堂刻意錯誤：下一張直接 index = index + 1，切到最後後畫面出現 undefined；用陣列長度與 modulo 修正首尾循環。
- 標題不變：確認 render 是否在 index 改變後呼叫。
- 最後一張後空白：檢查 modulo 使用的 length。
- 抽籤偶爾 undefined：確認 Math.floor 與乘法順序。
固定順序：先重現 → 讀 Console／Styles → 確認檔案與元素 → 一次只修一處 → 重跑原操作。
按了按鈕但內容沒變
先查：檢查 currentIndex 有改，再確認事件後呼叫 render。
第一張或最後一張卡住
先查：代入邊界數字，確認不會得到 -1 或陣列長度。
隨機提示偶爾空白
先查：檢查亂數範圍、Math.floor 與提示陣列資料。
PRACTICE CONTRACT
Starter 到 Solution 是同一份骨架，任務一路加厚
開始前先確認這四件事
- 我已找到 slides、currentIndex 與 render。
- 所有欄位都從目前索引產生。
- 我會測試前後按鈕的兩個邊界。
- 我會連點隨機提示，確認都是有效內容。
用目前索引渲染作品內容
檔案：script.js
位置：renderSlide()
結果：標題、描述與張數來自 slides[index]
完成可首尾循環的前後切換
檔案：script.js
位置：上一張與下一張按鈕事件
結果：最後一張可回第一張，第一張可回最後一張
抽出陣列內的隨機提示
檔案：script.js
位置：pickTip click handler
結果：每次點擊顯示一項有效提示
EVIDENCE
成果證據與檢核
30 秒說法可以直接照這個句型練習：
目前畫面由 slides[______] 經過 ______ 渲染；邊界用 ______ 循環，提示從 ______ 抽出。
不要只展示中間幾張成功；首張上一張與末張下一張是最重要的證據。
連按下一張走過首尾、再按上一張回捲，最後抽三次提示並解釋索引有效範圍。
下一章：第 18 章會加入時間狀態，讓畫面能按固定間隔更新。