商用網站架設實務

LESSON-14 · solution

JavaScript 基礎語法

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

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

開始前確認

這一頁的結果：所有相關檔案可開啟或閱讀；沒有 TODO、CHECKPOINT 或 placeholder；能說明每個檔案為何改動

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

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

本堂焦點：用值、型別、變數與函式把服務資訊整理成可顯示的結果

照這個順序做

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

差異 1

先分辨值、變數與型別，再進入函式。

目的

先分辨值、變數與型別，再進入函式。

修改檔案

main.js

程式碼位置

lesson-behavior-slot

現在要做：先對照差異，再檢查 在 main.js 的「lesson-behavior-slot」對照這項變更：const businessName = "安心維護"; const servicePrice = 1200; console.log(businessName, typeof businessName); console.log(servicePrice, typeof servicePrice);

貼上位置：main.js 的 lesson-behavior-slot 區塊

const businessName = "安心維護";
const servicePrice = 1200;
console.log(businessName, typeof businessName);
console.log(servicePrice, typeof servicePrice);

預期結果：Console 顯示文字與數字的型別。

驗收證據：Console 的 typeof 結果與原始值。

卡住時先看這裡

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

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

差異 2

先分辨函式宣告、呼叫、parameter、argument 與 undefined，再修正回傳值。

目的

先分辨函式宣告、呼叫、parameter、argument 與 undefined，再修正回傳值。

修改檔案

main.js

程式碼位置

formatService

現在要做：先對照差異，再檢查 在 main.js 的「formatService」對照這項變更：function formatService(name, price) { // 先保留空函式，下一階段再加入 return。 } console.log(formatService("安心維護", 1200));

貼上位置：main.js 的 formatService 區塊

function formatService(name, price) {
  // 先保留空函式，下一階段再加入 return。
}
console.log(formatService("安心維護", 1200));

預期結果：Console 能看到函式被呼叫，但因為尚未 return 而得到 undefined。

驗收證據：函式定義、呼叫結果與 Console 的 undefined。

卡住時先看這裡

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

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

差異 3

把函式回傳值接回畫面，理解 DOM 查找、事件與 textContent 的最小用法。

目的

把函式回傳值接回畫面，理解 DOM 查找、事件與 textContent 的最小用法。

修改檔案

main.js

程式碼位置

showResult

現在要做：先對照差異，再檢查 在 main.js 的「showResult」對照這項變更：function showResult() { const message = formatService(businessName, servicePrice); status.textContent = 可聯絡服務：${message}; console.log(message); } action.addEventListener("click", showResult);

貼上位置：main.js 的 showResult 區塊

function showResult() {
  const message = formatService(businessName, servicePrice);
  status.textContent = `可聯絡服務：${message}`;
  console.log(message);
}
action.addEventListener("click", showResult);

預期結果：點擊按鈕後，畫面顯示格式化服務資訊；在 return 尚未加入前可觀察到 undefined。

驗收證據：#action 的 click 事件、#status 的文字與 Console 結果。

卡住時先看這裡

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

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

差異 4

理解函式如果沒有 return，呼叫端會得到 undefined。

目的

理解函式如果沒有 return，呼叫端會得到 undefined。

修改檔案

main.js

程式碼位置

return

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

貼上位置：main.js 的 return 區塊

return `${name}｜${price} 元`;

預期結果：畫面或 Console 顯示完整服務文字而非 undefined。

驗收證據：呼叫結果與函式內 return 行。

卡住時先看這裡

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

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

階段檔案

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

開啟 solution 的可執行入口

index.htmlJavaScript 基礎語法入口：固定提供按鈕與狀態文字，讓學生專注觀察 JavaScript。

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

​
<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JavaScript 基礎語法｜solution</title>
  <link rel="icon" href="../../../assets/favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header"><a class="brand" href="index.html">安心維護</a><span>LESSON-14 · solution</span></header>
  <main class="page-shell">
    <p class="eyebrow">LESSON-14 · 值 → 函式 → return → 畫面</p>
    <h1>JavaScript 基礎語法</h1>
    <p class="page-description">這份檔案示範完整的值、函式、return、事件與畫面輸出流程。</p>
    <section class="result-card" aria-labelledby="result-title">
      <h2 id="result-title">本堂可觀察結果</h2>
      <button id="action" type="button">顯示服務資訊</button>
      <p id="status" class="status" role="status" aria-live="polite">尚未執行</p>
    </section>
  </main>
  <script src="main.js" defer></script>
</body>
</html>
style.css本堂最小呈現層：提供可讀、可 focus、可窄版驗證的結果區。

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

​
: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; }
.site-header { width: min(100% - 2rem, 760px); margin: 1rem auto 0; padding: .75rem 0; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.site-header a { color: #155e75; }
.page-shell { width: min(100% - 2rem, 760px); margin: 2rem auto; padding: 2rem; border: 1px solid #cbd8e4; border-radius: 20px; background: #fff; }
.eyebrow { color: #176b87; font-weight: 800; }
.page-description { color: #52657d; }
.result-card { padding: 1rem; border: 1px solid #d8e0ea; border-radius: 14px; background: #fbfdff; }
button { padding: .65rem .9rem; border: 0; border-radius: 9px; background: #176b87; color: #fff; font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }
.status { min-height: 2rem; color: #17643d; }
@media (max-width: 560px) { .site-header { align-items: flex-start; flex-direction: column; } .page-shell { margin: 1rem auto; padding: 1rem; } h1 { font-size: 1.6rem; } }
main.js本堂行為層：練習值、型別、函式、return、事件與畫面輸出。

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

​
const status = document.querySelector("#status");
const action = document.querySelector("#action");
const businessName = "安心維護";
const servicePrice = 1200;

console.log(businessName, typeof businessName);
console.log(servicePrice, typeof servicePrice);

function formatService(name, price) {
  return `${name}｜${price} 元`;
}

console.log("formatService 結果：", formatService(businessName, servicePrice));

function showResult() {
  const message = formatService(businessName, servicePrice);
  status.textContent = `可聯絡服務：${message}`;
  console.log("畫面結果：", message);
}

if (action) action.addEventListener("click", showResult);

完成驗收

下一步

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

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