CHAPTER 19 · PRACTICE WORKSPACE

舊站維護：jQuery 與 FAQ 對照

能讀懂既有 jQuery FAQ，再將同一段行為遷移成原生 JavaScript，並維持單開、收合與 aria-expanded

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

TASK STATUS

三項任務目前狀態

TASK-01已完成

讀懂既有 jQuery 並建立原生事件入口

修改檔案：script.js

完成後看見：querySelectorAll 與 addEventListener 只切換被點擊的 FAQ

TASK-02本階段處理

在原生事件中同步 aria-expanded

修改檔案：script.js

完成後看見：原生版的視覺開關與 aria-expanded 永遠一致

TASK-03稍後處理

以原生 forEach 完成單開與再點收合

修改檔案：script.js

完成後看見：開新題會關閉舊題，再點目前題可收合，aria 不殘留

WORKSPACE

本階段實作區

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

FOCUS TASK · TASK-02

現在只處理：在原生事件中同步 aria-expanded

修改：script.js

完成後：原生版的視覺開關與 aria-expanded 永遠一致

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

class 狀態 vs aria-expanded｜視覺與語意同步

比較：class 控制外觀，aria-expanded 告訴輔助技術狀態；兩者要同時更新。

現在做：在 checkpoint-2/script.js 暫時註解 button.setAttribute("aria-expanded", String(willOpen))，重新整理後點同一題，觀察 class 已改變但 aria-expanded 仍是 false；恢復這行後再次展開與收合。

看預期與證據

預期：移除 setAttribute 時，視覺開關與 aria-expanded 會分離；恢復後兩者每次都同步，能說出 class 是外觀狀態、aria-expanded 是可及性狀態。

證據：截圖或口述缺少 setAttribute 時的 class／aria 差異，以及恢復後 true／false 轉換；明確指出兩份證據如何互相對照。

true／false 字串｜屬性值要明確

比較：aria-expanded 需要可讀的 true／false 狀態，不能只靠 class 名稱猜測。

現在做：在 checkpoint-2/script.js 暫時把 String(willOpen) 改成 String(!willOpen)，重新整理後展開與收合同一題，觀察 aria-expanded 顯示與 class 相反；恢復原值後再重跑同一操作。

看預期與證據

預期：錯誤字串會讓輔助技術收到相反狀態；恢復 String(willOpen) 後，展開是 true、收合是 false，不能只靠 class 名稱猜測。

證據：留下展開與收合各一次的 class／aria 對照，證明錯誤字串造成相反狀態，恢復後 true／false 與畫面一致。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：先重新整理 Checkpoint 2，並在 DevTools Elements 選取一個 FAQ 按鈕。
  2. B｜預測：重複展開與收合同一題，每次對照 is-open 與 aria-expanded。
  3. C｜實作：在 script.js 的 目前 button 的 setAttribute() 完成「在原生事件中同步 aria-expanded」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 目前 button 的 setAttribute() 與 script.js，最後重跑原操作。
  5. E｜驗收：原生版的視覺開關與 aria-expanded 永遠一致

完成條件：DONE-02：原生版的視覺開關與 aria-expanded 永遠一致

LEGACY MAINTENANCE

jQuery FAQ 修復

本課使用 jQuery 3.7.1 維護分支示範。

不是，它是包裝常見 JavaScript 操作的函式庫。

不一定，本課定位是讀懂與維護既有網站。

不會，下一課使用原生 fetch。

CONTINUE

繼續完成 TASK-02

前往 Checkpoint 2，依要求完成「在原生事件中同步 aria-expanded」。

前往 Checkpoint 2：完成 TASK-02

CHAPTER HANDOFF

從 Timer 生命週期走到舊站維護

接收第 18 章：保留事件 → state → render 的讀碼方法；本頁是獨立 FAQ 練習，不共用第 18 章 Timer HTML。

交給第 20 章：完成後要能指出 querySelectorAll、addEventListener、closest、classList、aria-expanded 與單開規則；第 20 章會在獨立 API 頁接上 fetch 與四種非同步狀態，不重做本頁事件／DOM 基礎。