商用網站架設實務

LESSON-15 · checkpoint

JavaScript 基礎:陣列、物件與資料整理

主要結構已經完成,只留下本堂一個核心缺口。先預測,再從指定檔案找出它。 這頁用 可觀察證據anchor 指出下一個動作。

Starter3 個小成果
Checkpoint一個核心缺口
Solution4 個差異

開始前確認

這一頁的結果:入口頁可以開啟

工作方式:先把這一階段複製到自己的工作資料夾,開啟 files/index.html,記下修改前的畫面、Elements、Console、資料結果與 Network狀態。

會用到的檔案:index.htmlstyle.cssmain.js

本堂焦點:陣列物件整理服務資料並產生可用結果

照這個順序做

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

CHECKPOINT-1

讓推薦清單只包含真正被標記的服務,並練習明確的布林條件;原始 services 與 names 都不被改寫。

目的

讓推薦清單只包含真正被標記的服務,並練習明確的布林條件;原始 services 與 names 都不被改寫。

修改檔案

main.js

程式碼位置

filter predicate

現在要做:請在 main.js 的「filter predicate」位置完成:用 filter 與 service.featured === true 產生 featuredServices

貼上位置:main.jsfilter predicate 區塊,先保留同一檔案的其他內容。

const featuredServices = services.filter((service) => service.featured === true);
console.log(featuredServices);

預期結果:featuredServices 只包含到府諮詢與安心檢查兩筆;按整理按鈕後 #featured-list 顯示兩筆,#status 顯示推薦 2 項,services.length 仍為 3。

驗收證據:Console 展開 featuredServices,確認長度為 2、每筆 featured 都是 true;再按整理觀察兩個清單與 status。

卡住時先看這裡

常見錯誤:把結果命名成 featured、把整個物件當成布林值、寫成 service.featured = true,或把 filter 結果存回 services 破壞原始資料

第一個檢查:只讀 filter callback 的回傳條件,確認使用 service.featured === true,並確認 renderResult 仍讀取 featuredServices。

階段檔案

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

開啟 checkpoint 的可執行入口

index.html入口 HTML:提供狀態文字、整理/重設按鈕與兩個資料結果清單。

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

<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>LESSON-15|陣列與物件|checkpoint</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="page-shell">
    <p class="eyebrow">LESSON-15 · JavaScript 陣列與物件</p>
    <h1>服務資料整理</h1>
    <p class="page-description">這份頁面保留空的 featuredServices;先按整理觀察推薦數量,再補上 filter 條件。</p>
    <section class="result-card" aria-labelledby="result-title">
      <h2 id="result-title">可觀察結果</h2>
      <p id="status" role="status">尚未整理</p>
      <button id="render" type="button">整理服務資料</button>
      <button id="reset" class="secondary" type="button">重設</button>
    </section>
    <div class="output-grid">
      <section class="result-card" aria-labelledby="all-title"><h2 id="all-title">全部服務</h2><ul id="service-list"><li>按按鈕開始</li></ul></section>
      <section class="result-card" aria-labelledby="featured-title"><h2 id="featured-title">推薦服務</h2><ul id="featured-list"><li>Checkpoint 會補上 filter</li></ul></section>
    </div>
  </main>
  <script src="main.js" defer></script>
</body>
</html>
style.css最小呈現層:讓資料結果、按鈕與窄版清單可讀;不把資料邏輯放進 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; }
.eyebrow { color: #176b87; font-weight: 800; letter-spacing: .05em; }
.page-description { color: #52657d; }
.result-card { padding: 1rem; border: 1px solid #cbd8e4; border-radius: 14px; background: #fff; }
.output-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
button { margin: .5rem .5rem 0 0; padding: .65rem .9rem; border: 0; border-radius: 9px; background: #176b87; color: #fff; font: inherit; cursor: pointer; }
button.secondary { background: #64748b; }
button:focus-visible { outline: 3px solid #f1ab2c; outline-offset: 3px; }
#status { min-height: 1.7rem; color: #17643d; font-weight: 700; }
li + li { margin-top: .35rem; }
@media (max-width: 620px) { .page-shell { padding: 1rem 0; } .output-grid { grid-template-columns: 1fr; } }
main.js資料與行為:建立 services、用 mapfilter 整理,再把結果接到可觀察出口。

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

const services = [
  { name: "到府諮詢", price: 1200, featured: true },
  { name: "定期維護", price: 800, featured: false },
  { name: "安心檢查", price: 600, featured: true },
];
const names = services.map((service) => service.name);
const featuredServices = []; // CHECKPOINT-1:用 filter 與 featured === true 產生推薦清單。
const originalServices = JSON.stringify(services);
const status = document.querySelector("#status");
const renderButton = document.querySelector("#render");
const resetButton = document.querySelector("#reset");
const serviceList = document.querySelector("#service-list");
const featuredList = document.querySelector("#featured-list");
function renderList(list, items) {
  list.replaceChildren();
  items.forEach((service) => {
    const item = document.createElement("li");
    item.textContent = service.name + "|NT$ " + service.price;
    list.append(item);
  });
}
function renderResult() {
  renderList(serviceList, services);
  renderList(featuredList, featuredServices);
  status.textContent = "共 " + services.length + " 項服務,推薦 " + featuredServices.length + " 項";
  const unchanged = JSON.stringify(services) === originalServices;
  console.log({ services, names, featuredServices, unchanged });
}
function resetResult() {
  serviceList.replaceChildren();
  featuredList.replaceChildren();
  status.textContent = "尚未整理";
}
renderButton.addEventListener("click", renderResult);
resetButton.addEventListener("click", resetResult);

完成驗收

下一步

Checkpoint 完成後,先說出你修正的原因,再前往 Solution 對照每個檔案差異。

前往 Solution,逐檔對照差異