CHAPTER 28 · PRACTICE WORKSPACE

Netlify 部署、證據格式預檢與期末展示

以自己的 Production URL 與 commit 完成格式預檢,再由教師或同儕人工驗收與展示

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

TASK STATUS

三項任務目前狀態

TASK-01已完成

預檢 Production URL 格式

修改檔案:script.js

完成後看見:拒絕 example.com、localhost 與非 HTTPS 網址

TASK-02已完成

預檢 commit、問題描述與手機勾選

修改檔案:script.js

完成後看見:拒絕空白或過短 commit,並列出待修格式

TASK-03本階段處理

安全產生期末展示草稿

修改檔案:script.js

完成後看見:以 textContent 與 createElement 產生草稿,明列仍待人工驗收

WORKSPACE

本階段實作區

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

FOCUS TASK · TASK-03

現在只處理:安全產生期末展示草稿

修改:script.js

完成後:以 textContent 與 createElement 產生草稿,明列仍待人工驗收

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

textContent/createElement vs innerHTML|安全產生草稿

比較:使用者輸入要當文字處理,不能直接拼成 HTML;安全 DOM 也要保留展示結構。

現在做:在 Solution 填入有效 URL、abcdef1、含 <img src=x onerror=alert(1)> 的 20 字以上問題描述並勾選手機;送出後檢查 #showcase img 為 0、原始字串仍可見,且展示稿有成果連結與待人工驗收文案。

看預期與證據

預期:buildShowcase 以 textContentcreateElement 與安全連結產生展示草稿,外來輸入不會變成 HTML 或執行事件。

證據:留下原始問題文字、#showcase img 計數 0、成果連結的 rel=noopener noreferrer、待人工驗收文案與 window.__xss 未設定五項證據。

展示草稿 vs 人工驗收|格式通過不是上線

比較:程式只能產生草稿與列出待驗收項目,真正手機展示與 Production URL 仍需人工確認。

現在做:在 Solution 完成一次格式預檢後,檢查 #status 的「尚待教師或同儕人工驗收」、#showcase a 的外部連結與 rel,並記下工具沒有替你開站、比對 history 或驗證手機的限制。

看預期與證據

預期:展示草稿只是格式與內容摘要;Production URL 的可達性、commit history 與手機操作必須由人工完成並留下回饋。

證據:留下 status、外部連結屬性、人工驗收待辦三項 UI 證據,以及一份由驗收者填寫的 URL/commit/手機回饋紀錄。

需要排錯時查看:任務循環(觀察 → 預測 → 實作 → 故障 → 驗收)
  1. A|觀察:在 Checkpoint 2 填入通過格式的 URL、commit、問題描述並勾選手機,確認驗證資料已成立但展示區仍是空白。
  2. B|預測:產生展示草稿並用 DevTools Elements 確認以安全文字節點呈現;正式網址仍需部署後由教師或同儕人工開啟驗收。
  3. C|實作:在 script.js 的 buildShowcase() 完成「安全產生期末展示草稿」,一次只處理本任務責任。
  4. D|故障:若結果不一致,先依原操作重現,再檢查 buildShowcase() 與 script.js,最後重跑原操作。
  5. E|驗收:以 textContent 與 createElement 產生草稿,明列仍待人工驗收

完成條件:DONE-03:以 textContent 與 createElement 產生草稿,明列仍待人工驗收

只做格式預檢,仍需人工驗收

Production 證據格式預檢

尚未執行格式預檢

CONTINUE

繼續完成 TASK-03

前往 Solution,依要求完成「安全產生期末展示草稿」。

前往 Solution:完成 TASK-03

FINAL HANDOFF

第 27 章 → 第 28 章結業證據

接收:第 27 章只提供 mock queue、offline 保留與 retry/preflight 證據;本章不把 mock 結果當成 Production deploy,也不共用第 27 章的 runtime。

本章交付:自己的 HTTPS Production URL、實際存在於 repo history 的 commit、手機行動網路操作與教師/同儕人工驗收紀錄;格式預檢只負責先排除明顯錯誤。

結業邊界:展示草稿不能取代人工開站、版本比對與手機驗證;任何 token、密碼或私人資料都不可放入展示證據。

回到第 28 章成果證據