商用網站架設實務

LESSON-16 · solution

JavaScript 基礎：DOM 與動態渲染

這一頁不是直接複製答案；先逐檔看差異、修改原因與驗收證據，再把需要的改動帶回自己的資料夾。 這頁用 可觀察證據 和 anchor 指出下一個動作。

Starter4 個小成果
Checkpoint一個核心缺口
Solution5 個差異

開始前確認

這一頁的結果：清單項目數與 services.length 一致；沒有 TODO、CHECKPOINT 或未宣告的 services；特殊字串、status、Console 與 FAQ 變體都能驗收

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

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

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

照這個順序做

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

差異 1

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

目的

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

修改檔案

index.html

程式碼位置

#service-list

現在要做：先對照差異，再檢查 在 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>

貼上位置：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 只出現一次。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

差異 2

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

目的

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

修改檔案

main.js

程式碼位置

services 與 querySelector

現在要做：先對照差異，再檢查 在 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");

貼上位置：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 一致。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

差異 3

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

目的

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

修改檔案

main.js

程式碼位置

renderServices

現在要做：先對照差異，再檢查 在 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); }); }

貼上位置：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> 標記是文字，不是巢狀元素。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

差異 4

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

目的

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

修改檔案

main.js

程式碼位置

renderServices(services)

現在要做：先對照差異，再檢查 在 main.js 的「renderServices(services)」對照這項變更：renderServices(services); status.textContent = 已渲染 ${services.length} 筆服務; console.log(LESSON-16：已渲染 ${services.length} 筆服務);

貼上位置：main.js 的 renderServices(services) 區塊

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

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

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

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

差異 5

理解文字內容和 HTML 解析的差別，避免把資料當成可執行標記。

目的

理解文字內容和 HTML 解析的差別，避免把資料當成可執行標記。

修改檔案

main.js

程式碼位置

card.textContent／card.innerHTML

現在要做：先對照差異，再檢查 在 main.js 的「card.textContent／card.innerHTML」對照這項變更：card.textContent = ${item.name}｜${item.price} 元;

貼上位置：main.js 的 card.textContent／card.innerHTML 區塊

card.textContent = `${item.name}｜${item.price} 元`;

預期結果：第一筆服務的 <strong> 標記會以文字顯示，Elements 不會多出 strong 子元素。

驗收證據：修改前後比較第一個 li 的 innerHTML、childElementCount 與畫面文字。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

階段檔案

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

開啟 solution 的可執行入口

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 渲染服務清單｜solution</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 清單，並用 status 與 Console 留下證據。</p>
    <section aria-labelledby="services-title">
      <h2 id="services-title">服務方案</h2>
      <ul id="service-list" class="service-list" aria-label="服務方案清單"></ul>
      <p id="status" class="status" role="status" aria-live="polite">尚未渲染</p>
    </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 節點、寫入文字並留下渲染筆數證據。

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

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

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

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

renderServices(services);
status.textContent = "已渲染 " + services.length + " 筆服務";
console.log("LESSON-16：已渲染 " + services.length + " 筆服務");

完成驗收

下一步

Solution 對照完成後，回到 README 整理證據，並準備下一堂課的先備知識。

回到 README，整理本堂證據並銜接下一堂