LESSON-16 · starter

JavaScript 基礎：DOM 與動態渲染

你會依序完成4個本堂專屬微步驟；每一步只修改一個責任，看到結果後才進下一步。這頁用可觀察證據和 anchor 指出下一個動作。

Starter4 個小成果

Checkpoint一個核心缺口

Solution5 個差異

開始前確認

這一頁的結果：入口頁可以開啟且 Console 沒有初始錯誤

工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、Elements、Console 與檔案行號狀態。

會用到的檔案：index.html、style.css、main.js

本堂焦點：用 DOM API 將服務資料安全地渲染到頁面

照這個順序做

一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。

目的

先讓 HTML 提供 JavaScript 可以找到的明確目標。

修改檔案

index.html

程式碼位置

#service-list

現在要做：請在 index.html 的「#service-list」位置完成：建立 ul 服務清單與 role=status 狀態位置

貼上位置：index.html：#service-list 區塊，先保留同一檔案的其他內容。

<section aria-labelledby="services-title">
  <h2 id="services-title">服務方案</h2>
  <ul id="service-list" aria-label="服務方案清單"></ul>
  <p id="status" role="status" aria-live="polite">尚未渲染</p>
</section>

預期結果：Elements 有 ul#service-list 與 p#status，且清單一開始是空的。

驗收證據：在 Elements 搜尋 #service-list、#status，確認 id 只出現一次。

卡住時先看這裡

常見錯誤：把 id 寫成 service-list、serviceList 或 status-message，造成 JavaScript 找不到元素。

第一個檢查：先只看 HTML 的 id 是否和程式碼逐字一致。

目的

把資料來源、DOM 目標和後續函式的輸入先準備好。

修改檔案

main.js

程式碼位置

services 與 querySelector

現在要做：請在 main.js 的「services 與 querySelector」位置完成：宣告 services 陣列並取得清單與狀態元素

貼上位置：main.js：services 與 querySelector 區塊，先保留同一檔案的其他內容。

const services = [
  { name: "到府整理 <strong>優惠</strong>", price: 1200 },
  { name: "定期維護", price: 800 },
  { name: "到府檢查", price: 600 },
];

const list = document.querySelector("#service-list");
const status = document.querySelector("#status");

預期結果：Console 可觀察 services.length；程式知道要更新哪個清單與狀態。

驗收證據：檔案中有 services、list、status 三個清楚責任的變數，且 selector 與 HTML id 一致。

卡住時先看這裡

常見錯誤：只宣告函式卻漏掉 services，或把 selector 寫成不存在的 id。

第一個檢查：先搜尋 const services、#service-list、#status 三個位置。

目的

把每筆資料轉成真正的 DOM 節點，並把資料當純文字寫入。

修改檔案

main.js

程式碼位置

renderServices

現在要做：請在 main.js 的「renderServices」位置完成：用 createElement、replaceChildren、forEach 與 textContent 產生清單項目

貼上位置：main.js：renderServices 區塊，先保留同一檔案的其他內容。

function renderServices(items) {
  list.replaceChildren();
  items.forEach((item) => {
    const card = document.createElement("li");
    card.textContent = `${item.name}｜${item.price} 元`;
    list.append(card);
  });
}

預期結果：畫面項目數量和 services 筆數一致，特殊字串會以文字顯示而不是變成 HTML。

驗收證據：Elements 看到 li 節點；第一筆的 <strong> 標記是文字，不是巢狀元素。

卡住時先看這裡

常見錯誤：選到 null，或把 item.name 放進 innerHTML 讓字串被解析成標籤。

第一個檢查：先確認 list 存在，再只看 card 的寫入方法。

目的

把函式定義接到真正的執行流程，讓結果能在畫面與 Console 被驗收。

修改檔案

main.js

程式碼位置

renderServices(services)

現在要做：請在 main.js 的「renderServices(services)」位置完成：呼叫 renderServices 並把實際筆數寫入 status

貼上位置：main.js：renderServices(services) 區塊，先保留同一檔案的其他內容。

renderServices(services);
status.textContent = `已渲染 ${services.length} 筆服務`;
console.log(`LESSON-16：已渲染 ${services.length} 筆服務`);

預期結果：重新整理後看到三筆服務，status 顯示已渲染 3 筆，Console 沒有錯誤。

驗收證據：畫面 li 數量、#status 文字與 Console 筆數一致。

卡住時先看這裡

常見錯誤：只寫 renderServices 函式，忘記呼叫，或把 services 寫成未宣告的名稱。

第一個檢查：搜尋 renderServices(services) 是否位於函式宣告之後。

階段檔案

完整檔案收在可展開的卡片中；先完成上方微步驟，再用這裡查閱與複製。檔案位置要和目前的相對路徑一致。

開啟 starter 的可執行入口

開啟index.html入口 HTML：提供服務清單目標與 status，讓 DOM API 有明確的渲染位置。
開啟style.css呈現層：只負責清單、狀態與窄版可讀性，不承擔資料或渲染邏輯。
開啟main.js行為層：保存 services、建立 DOM 節點、寫入文字並留下渲染筆數證據。

index.html入口 HTML：提供服務清單目標與 status，讓 DOM API 有明確的渲染位置。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='4' fill='%230f4c5c'/%3E%3C/svg%3E" type="image/svg+xml">
  <title>LESSON-16｜DOM 渲染服務清單｜starter</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="page-shell">
    <p class="eyebrow">LESSON-16 · DOM API</p>
    <h1>用 DOM API 渲染服務清單</h1>
    <p class="page-description">先建立清單容器，再把資料、DOM API 與渲染函式逐步接起來。</p>
    <section aria-labelledby="services-title">
      <h2 id="services-title">服務方案</h2>
      <!-- TODO-1：請加入 ul#service-list 與 p#status，讓 JavaScript 有明確的 DOM 目標。 -->
    </section>
  </main>
  <script src="main.js" defer></script>
</body>
</html>

style.css呈現層：只負責清單、狀態與窄版可讀性，不承擔資料或渲染邏輯。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

:root { font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", sans-serif; color: #17324d; background: #f5f8fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; line-height: 1.7; }
.page-shell { width: min(100% - 2rem, 760px); margin: 0 auto; padding: 2rem 0 4rem; }
.eyebrow { color: #176b87; font-weight: 800; letter-spacing: .06em; }
.page-description { color: #52657d; }
.service-list { display: grid; gap: .75rem; margin: 1rem 0 0; padding-left: 2.5rem; }
.service-list li { padding: .75rem; border: 1px solid #cbd8e4; border-radius: .6rem; background: #fff; }
.status { min-height: 1.8rem; color: #17643d; font-weight: 700; }
@media (max-width: 560px) { .page-shell { padding: 1rem 0 3rem; } }

main.js行為層：保存 services、建立 DOM 節點、寫入文字並留下渲染筆數證據。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

// TODO-2：請宣告 services、list 與 status，先把資料和 DOM 目標接起來。
// TODO-3：請建立 renderServices(items)，將每筆資料轉成 li。
// TODO-4：請呼叫 renderServices(services)，並更新 status 與 Console。

完成驗收

入口頁可以開啟且 Console 沒有初始錯誤
四個 TODO 都依序完成
Elements 能看到清單目標與 status
留下入口網址、修改檔案、操作步驟、預期結果與實際觀察。

下一步

Starter 完成後，不要直接看 Solution；先前往 Checkpoint，自己找出最後一個核心缺口。

前往 Checkpoint，自己補最後一個核心缺口