選修單元 B · 客戶端程式入門：JavaScript 基礎（EBCH5）

1 JavaScript 是甚麼？為何網頁需要它？

重點

HTML 負責結構、CSS 負責外觀、JavaScript 負責行為與互動。
JavaScript 在瀏覽器中執行，可回應使用者操作、進行計算、以及即時更新頁面內容。
程式即使沒有畫面變化也可能已正常執行；要靠輸出與除錯工具判斷結果。
學習 JavaScript 時，建議先把解題步驟寫成流程清單（逐步寫出「先做甚麼、再做甚麼」），再把它轉成語法。

JavaScript 是一種常用的程式語言，主要在瀏覽器中執行，用來為網頁加入互動與行為，例如：按鈕點擊反應、表單檢查、動態更新文字／圖片、即時計算與顯示結果。

HTML（結構）：內容是甚麼、元素之間如何排列（例如標題、段落、按鈕、輸入框）。
CSS（外觀）：長甚麼樣（例如顏色、大小、版面、動畫效果）。
JavaScript（行為）：做甚麼（例如按下按鈕就計算、就顯示、就改變內容）。

當瀏覽器載入網頁時，大致流程是：讀取 HTML → 建立 DOM → 套用 CSS → 執行 JavaScript。 JavaScript 常見以事件驅動程式方式運作：先設定事件處理器（例如「按鈕被點擊」），然後等待使用者操作，事件發生時才執行對應程式。

重要觀念：執行 ≠ 一定有畫面變化。如果程式只是計算、更新變量、或只寫到控制台，畫面可以完全不變。

例子：同一個按鈕，有無 JavaScript 的分別

只有 HTML：按鈕只是「一個元素」，除非連結到其他頁，否則通常不會「自己做事」。
加入 JavaScript：按鈕點擊後可即時改文字、做計算、顯示提示、甚至改變整個頁面內容。

下面練習會示範「無 JavaScript」與「有 JavaScript」的差異。

HTML vs JavaScript：HTML 描述內容；JavaScript 改變內容。
CSS vs JavaScript：CSS 主要處理外觀；JavaScript 主要處理邏輯與互動（但也可以改 style）。
客戶端 vs 伺服器端：JavaScript（本章）主要在瀏覽器執行；伺服器端語言（例如 PHP）在伺服器執行並回傳結果。

把 JavaScript 當成「改顏色工具」：其實 CSS 才是主力；JS 應用於互動與邏輯更合適。
以為「畫面沒有改變」就等於「程式沒有執行」：可能只是沒有輸出，或輸出去了控制台。
未理解分工就混寫：HTML/CSS/JS 全部塞在同一段，導致難讀、難改、易出錯。

如果把網頁比喻成一間店舖：HTML 像「店內擺設與指示牌」、CSS 像「裝修與設計風格」； JavaScript 則像「店員的行為」——顧客按鈴、店員就回應；顧客輸入資料、店員就計算並顯示結果。

因此，學 JavaScript 的第一步，不是死背語法，而是理解：我想讓網頁在甚麼情況下做甚麼事？ 先用流程清單把步驟寫清楚，再把它翻譯成 JavaScript，就會容易得多。

練習 1：同一個按鈕，有無 JavaScript 的分別

先執行下面程式，再嘗試按按鈕，觀察畫面有沒有改變。

HTML（無 JavaScript）
提示：你可以嘗試為按鈕加入 id，但如果仍然沒有程式處理事件，按鈕也不會「自動做事」。

<h2>無 JavaScript：按鈕只是元素</h2>
<p id="msg">請按下按鈕。</p>
<button>按我（不會有反應）</button>

執行後按按鈕，看看文字如何即時改變。然後嘗試把訊息改成你自己的句子。

HTML + JavaScript（按鈕互動）
提示：btn.onclick = ... 是最常見的入門寫法之一。

<h2>有 JavaScript：按鈕會改變內容</h2>
<p id="msg">請按下按鈕。</p>
<button id="btn">按我（會有反應）</button>

<script>
const btn = document.getElementById('btn');
const msg = document.getElementById('msg');

btn.onclick = function () {
  msg.textContent = '你已按下按鈕！';
};
</script>

本頁學習重點（讀完本章你應該做到）

說明 JavaScript 的角色，並清楚分辨 HTML/CSS/JavaScript 的分工。
懂得使用 <script>，並理解放置位置與執行時機。
使用 alert()、console.log()、以及把結果顯示在頁面上作輸出與除錯。
宣告與更新變量（let / const），並處理基本資料類型與字串（含跳出字元）。
用 document.getElementById() 取得元素，並更新 textContent / innerHTML / 屬性。
讀取輸入框 .value，用事件處理器把「操作」連到程式。
寫 if 與循環（for / while），並用 while 生成表格。
理解陣列與物件的用途，並用簡單例子存取與處理資料。

2 <script> 標籤與放置位置

重點

<script> 用來放置 JavaScript 程式；也可用 src 引用外部 .js 檔案。
腳本的放置位置會影響執行時機：太早執行可能找不到元素（得到 null）。
常見做法：把 <script> 放在 </body> 前，或對外部腳本加上 defer。
外部 .js 檔案可重用、易維護，亦有助保持 HTML 結構清晰。

初學時最常遇到的問題之一，就是「明明寫了 JavaScript，為何按鈕沒有反應？」其中一個常見原因是：程式在元素建立之前已執行，取得元素時得到 null，後續自然無法設定事件處理器。

為了令程式更穩定，你可以先養成一個習慣：先寫好 HTML 元素（例如按鈕、輸入框），再寫 JavaScript 去取得與操作它。 如果把 JavaScript 放在頁面底部（靠近 </body>），通常就能避免「太早執行」的問題。

練習 2：腳本太早執行會發生甚麼？（請你修正）

下面程式會顯示「找不到按鈕」，因為腳本在按鈕出現前已執行。請你嘗試用其中一種方法修正：
（1）把 <script> 移到按鈕之後；或（2）用 DOMContentLoaded 包住主要程式。

任務：令狀態變成「已找到按鈕」，並令按鈕可正常彈出提示。
提示：document.addEventListener('DOMContentLoaded', ...) 會在 DOM 建好後才執行。

<h2>腳本位置測試</h2>
<p id="status">（尚未檢查）</p>

<script>
const status = document.getElementById('status');
const btn = document.getElementById('btn'); // ⛔ 目前按鈕未出現，所以這裡會得到 null

if (btn === null) {
  status.textContent = '找不到 #btn（程式太早執行）';
} else {
  status.textContent = '已找到 #btn';
  btn.onclick = function () {
    alert('你好！我已成功綁定事件處理器。');
  };
}
</script>

<button id="btn">按我</button>

Check Point 1：JavaScript 的角色與 <script> 基礎

（載入中…）

3 輸出與除錯：alert()、console.log() 與「無輸出也可正常」

重點

alert() 可彈出提示視窗，適合快速示範，但不適合大量除錯。
console.log() 會輸出到瀏覽器控制台，是最常用的除錯方法之一。
程式可以「只計算、不顯示」，畫面完全不變仍屬正常；要靠輸出或控制台確認變量值。
程式錯誤與沒有視覺效果是兩回事：錯誤會阻止後續語句執行。

在寫程式時，「看不到畫面變化」很常見：例如你只是在計算、或只是在準備資料。這時最有效的方法，是主動加入輸出，或打開瀏覽器開發者工具的控制台查看 console.log() 的訊息。

另一方面，如果程式真的出錯，控制台通常會顯示錯誤位置與原因（例如「某變量未定義」）。學會分辨「沒有視覺效果」與「程式錯誤」，能大幅提升你寫 JavaScript 的速度與信心。

空運行練習 1：無輸出仍正常（請你自行加入輸出）

下面程式已經把 x 計算完成，但未有輸出。請你取消註解 console.log 那一行，或把結果寫到頁面上。

任務：顯示 x 的最終值，並說明「畫面沒有改變」不一定代表程式沒有執行。

<h2>程式可以無輸出</h2>
<p>下面程式把 <code>x</code> 加 10，但未顯示任何結果。</p>

<pre id="log"></pre>

<script>
// 這個小工具把 console.log 顯示在頁面，方便你觀察
const logEl = document.getElementById('log');
console.log = (...args) => { logEl.textContent += args.join(' ') + '\n'; };

let x = 5;
x = x + 10;

// 1) 先測試「無輸出」：畫面不會改變
// 2) 然後取消註解下面一行，觀察輸出
// console.log('x =', x);
</script>

練習 4：程式錯誤 vs 沒有視覺效果

下面例子會故意出錯。請你觀察錯誤訊息，再修正程式令它可以繼續執行。

任務：找出為何會出錯，並修正（提示：某變量未定義）。修正後，你應該能看到「第 3 行已執行」。

<h2>錯誤示範</h2>
<p id="msg">準備執行…</p>
<pre id="err"></pre>

<script>
const msg = document.getElementById('msg');
const err = document.getElementById('err');

// 把主要程式放入函式，方便在出錯時「停止後續語句」
function main() {
  msg.textContent = '第 1 行已執行';

  try {
    // ⛔ 下一行會出錯：y 未定義（請你修正）
    msg.textContent = y + 1;
  } catch (e) {
    // 用 try/catch 把錯誤顯示在頁面上，同時避免出現「Uncaught」訊息
    err.textContent = '錯誤：' + e.message;
    return; // 停止後續語句（模擬「出錯會令後面不再執行」）
  }

  msg.textContent = '第 3 行已執行（修正後你會見到）';
}

main();
</script>

Check Point 2：輸出與除錯

（載入中…）

4 變量、資料與字串：let / const、資料類型、跳出字元

重點

let 用來宣告可改變的變量；const 用來宣告常數（不可重新賦值）。
常見資料類型：數字（number）、字串（string）、布爾值（boolean）。
把變量放入輸出：可用 + 串接字串，或用模板字串 `...${x}...`。
跳出字元（escape character）用來表示特殊符號，例如 \n 換行、\" 引號、\\ 反斜線。

變量（variable）：用名稱代表一個值，值可在程式執行期間改變。
常數（constant）：名稱所指向的值不應被重新賦值（用 const）。
資料類型：值的種類，例如數字、字串、布爾值。
字串（string）：一段文字，例如 "Hello"；可用單引號或雙引號。
跳出字元（escape character）：用反斜線 \ 表示「把下一個符號當成特殊意思」，例如 \n 表示換行。

let x = 5; 表示建立一個名為 x 的變量，並把值 5 放進去；之後可以再寫 x = x + 1; 更新它。 const 則用來避免「不小心改了不應改的值」。

字串可以串接："總分：" + score；也可以用模板字串： `總分：${score}`。模板字串通常更清晰，亦較少括號與引號錯誤。

跳出字元的核心原因：當你需要在字串內表示「引號」「反斜線」或「換行」這些特殊符號時，必須告訴電腦不要把它們當成字串結束或普通字符。

let name = "Amy";
console.log("Hello " + name);
console.log(`Hello ${name}`);
"她說：\"你好\""（在字串中放入雙引號）
"第一行\n第二行"（在字串中換行）

let vs const：let 可重新賦值；const 不可重新賦值（較安全）。
+ 串接 vs 模板字串：模板字串可讀性高，特別適合「一句話包含多個變量」。
'...' vs "..."：功能相同；選一種風格並保持一致即可。若字串內含雙引號，可用單引號包住，或使用跳出字元。

忘記用 let/const 宣告就直接使用變量，導致錯誤或變成隱式全域變量。
把 const 當成「永遠不能改內容」：實際上是「不能重新賦值」（初學階段先記住這句即可）。
用 + 串接時把數字變成字串：例如 "10" + 5 會得到 "105"。
引號配對錯、或忘記跳出字元，導致字串提早結束。

JavaScript 的變量與資料類型，是之後寫判斷與循環的基礎。當你能清楚分辨「數字」與「字串」，就不容易在加減乘除與文字顯示之間混淆。

另外，字串是網頁開發最常見的資料之一：你需要顯示提示訊息、把使用者輸入放入句子、或動態生成 HTML。因此，理解跳出字元（例如 \n、\"、\\）能避免大量「引號錯誤」。

練習 5：宣告與更新變量，並把變量放入輸出

修改 qty 與輸出句子，並嘗試同時使用「串接」與「模板字串」。

任務：把 qty 改成 5，並用模板字串顯示「總額：$...」。

<h2>變量練習：購物總額</h2>
<pre id="out"></pre>

<script>
const out = document.getElementById('out');
function println(s){ out.textContent += s + '\n'; }

let price = 12.5;
let qty = 3;
let total = price * qty;

println('price = ' + price);
println('qty = ' + qty);
println('total = ' + total);

// 挑戰：
// 1) 把 qty 改成 5
// 2) 用模板字串顯示：`總額：$${total}`
</script>

練習 6：字串與跳出字元（escape character）

嘗試自行加入更多例子：例如在句子中同時包含雙引號與換行；或用 \\ 顯示路徑。

任務：理解為何需要跳出字元，並能正確寫出包含引號、反斜線與換行的字串。

<h2>字串與跳出字元</h2>
<pre id="out"></pre>

<script>
const out = document.getElementById('out');
function show(s){ out.textContent += s + '\n'; }

// 1) 在字串中放入雙引號
show("她說：\"我喜歡 JavaScript\"");

// 2) 在字串中放入反斜線（常見於路徑）
show("路徑例子：C:\\Users\\Student\\Desktop");

// 3) 在字串中加入換行
show("第一行\n第二行\n第三行");

// 4) 用模板字串同時放入變量與換行
let name = "Andy";
show(`你好，${name}！\n今天學：escape character`);
</script>

Check Point 3：變量、資料類型與字串

（載入中…）

5 存取與修改 HTML：getElementById()、textContent、innerHTML、屬性

重點

用 document.getElementById('id') 取得指定元素，再修改它。
textContent 只會當成文字；innerHTML 會把內容當作 HTML 解析（要小心）。
可修改元素屬性（例如 src、href、value）令頁面即時更新。
如果取得元素得到 null，通常是 id 寫錯、元素不存在、或腳本執行太早。

一旦你能熟練 getElementById()、textContent 與 innerHTML，你就可以做到大部分入門級的「互動網頁」：例如按鈕改文字、顯示計算結果、或動態產生表格。

最重要的是：每次操作之前先問自己——我要改的是「文字」還是「HTML 結構」？如果只是改文字，優先選用 textContent；需要生成標籤時才考慮 innerHTML。

空運行練習 3：事件處理器入門（按按鈕先有反應）

嘗試把顯示文字改為你自己的版本，並加入第三種狀態（例如「暫停」）。

任務：按一下切換狀態；留意 started 變量如何控制畫面輸出。

<h2>DOM 改內容：按鈕切換提示</h2>
<p id="msg">狀態：未開始</p>
<button id="btn">開始</button>

<script>
const msg = document.getElementById('msg');
const btn = document.getElementById('btn');

let started = false;

btn.addEventListener('click', () => {
  started = !started;

  msg.textContent = started ? '狀態：進行中' : '狀態：未開始';
  btn.textContent = started ? '停止' : '開始';
});
</script>

6 使用者輸入與事件處理：.value、onclick、addEventListener

重點

讀取文字輸入框內容用 .value（注意：讀到的是字串）。
常見流程：輸入 → 處理 → 輸出（讀取 → 計算/判斷 → 顯示結果）。
onclick 容易上手；addEventListener 更靈活，適合建立較完整的事件驅動程式。
輸入通常需要做有效性檢驗：例如是否空白、是否數字、是否在合理範圍。

使用者輸入與事件處理，是把「程式」真正變成「互動網頁」的關鍵。只要你能做到「按一下按鈕就讀輸入、處理、再輸出」，你就可以寫出大量常見的小工具：計算器、分數統計、格式轉換、簡單問答遊戲等。

同時，請養成做有效性檢驗的習慣。即使只是檢查「是否空白」或「是否數字」，也能令程式更可靠，更接近真實應用。

練習 8：輸入 → 處理 → 輸出（兩數相加）

試試輸入非數字、留空、或小數，觀察有效性檢驗如何影響輸出。

任務：加入第三個輸入框 c，計算 a + b + c，並保持有效性檢驗。

<h2>輸入 → 處理 → 輸出</h2>

<label>A：<input id="a" type="text" placeholder="輸入 A"></label><br><br>
<label>B：<input id="b" type="text" placeholder="輸入 B"></label><br><br>

<button id="calc">計算 A + B</button>
<p id="out"></p>

<script>
document.getElementById('calc').onclick = function () {
  const a = parseFloat(document.getElementById('a').value);
  const b = parseFloat(document.getElementById('b').value);
  const out = document.getElementById('out');

  if (Number.isNaN(a) || Number.isNaN(b)) {
    out.textContent = '請輸入兩個數字。';
    return;
  }

  out.textContent = `結果：${a + b}`;
};
</script>

Check Point 4：DOM、輸入與事件處理

（載入中…）

7 條件判斷與重複執行：if / else、for / while、用 while 生成表格

重點

if / else 用來控制流程；比較運算子包括 >、<、>=、<=、===、!==。
=== 會同時比較「值」與「資料類型」，比 == 更安全。
for 適合次數已知的循環；while 適合以條件控制的循環（直到條件不成立）。
寫循環要避免無限循環；每次迭代都要更新控制變量。
用 while 生成表格時，常用「先組合 HTML 字串 → 一次過寫入 innerHTML」。

if 與循環是所有程式語言的骨架：if 讓你根據不同情況做不同反應；循環讓你不需要重覆寫相同語句。在網頁中，它們常用來做表單檢查、資料統計、動態產生列表或表格。

本章最後會以「用 while 生成表格」作綜合練習：你會同時用到輸入、有效性檢驗、雙重循環與 DOM 更新。這也是 DSE ICT 常見的整合型題目方向。

空運行練習 2：追蹤 if / else（先預測，再驗證）

此練習用來訓練空運行：先不要急於按「執行」；請先用紙筆追蹤每一步如何改變 score 與 level。推理完成後，再解除註解，把結果輸出作核對。

任務：先估算最後 score 與 level 的值，再解除註解驗證。

<!doctype html>
<html lang="zh-Hant">
<head><meta charset="utf-8"><title>空運行練習 2</title></head>
<body>
  <h3>空運行練習：追蹤 if / else</h3>
  <p>提示：先用紙筆追蹤；完成後解除註解驗證。</p>

  <button id="run">執行</button>
  <pre id="out"></pre>

  <script>
    const out = document.getElementById('out');

    document.getElementById('run').onclick = function () {
      let score = 48;
      let level = '';

      if (score >= 80) {
        level = '優良';
      } else if (score >= 50) {
        level = '合格';
      } else {
        level = '不合格';
      }

      score = score + 15;
      if (score > 100) score = 100;

      // 解除註解去驗證：
      // out.textContent = 'score=' + score + ', level=' + level;
      // console.log('score=', score, 'level=', level);
    };
  </script>
</body>
</html>

答案（按我展開）

score 初值 48，所以 level 會被設定成「不合格」；之後 score = score + 15，所以最後 score = 63。注意：level 不會因為 score 改變而自動更新，因此仍然是「不合格」。

練習 9：if / else（分數是否合格）

任務：把「合格線」改成 60，再加入「優良（≥ 80）」的情況。

<h2>if / else 練習：分數是否合格</h2>

<label>分數：<input id="score" type="text" value="55"></label>
<button id="check">檢查</button>
<p id="result"></p>

<script>
document.getElementById('check').addEventListener('click', () => {
  const score = parseInt(document.getElementById('score').value, 10);
  const result = document.getElementById('result');

  if (Number.isNaN(score)) {
    result.textContent = '請輸入整數分數。';
    return;
  }

  // 合格線：50
  if (score >= 50) {
    result.textContent = '結果：合格';
  } else {
    result.textContent = '結果：不合格';
  }
});
</script>

練習 10：for 與 while（輸出 1 到 N）

先用 for，再用 while。兩段程式應該產生相同輸出。

任務：把輸出改成「只輸出偶數」，並嘗試加入總和（1..N 的總和）。

<h2>for / while 練習：輸出 1 到 N</h2>

<label>N：<input id="n" type="text" value="10"></label>
<button id="run">執行</button>

<pre id="out"></pre>

<script>
const out = document.getElementById('out');

document.getElementById('run').addEventListener('click', () => {
  out.textContent = '';
  const n = parseInt(document.getElementById('n').value, 10);

  if (Number.isNaN(n) || n <= 0) {
    out.textContent = '請輸入正整數。';
    return;
  }

  out.textContent += '【for】\n';
  for (let i = 1; i <= n; i++) {
    out.textContent += i + ' ';
  }

  out.textContent += '\n\n【while】\n';
  let j = 1;
  while (j <= n) {
    out.textContent += j + ' ';
    j++;
  }
});
</script>

練習 11：用 while 循環生成表格（乘法表）

這是一題綜合練習：輸入 → 有效性檢驗 → 雙重 while → 動態生成 <table>。

任務：把表格改成「有表頭」（第一列/第一欄顯示 row/col），或把每格改為 row + col / row^2 等。

<h2>while 生成表格：1 到 N 的乘法表</h2>

<label>N（1–12）：<input id="n" value="5"></label>
<button id="gen">產生表格</button>

<div id="tableBox" style="margin-top:10px;"></div>

<script>
document.getElementById('gen').addEventListener('click', () => {
  const n = parseInt(document.getElementById('n').value, 10);
  const tableBox = document.getElementById('tableBox');

  if (Number.isNaN(n) || n <= 0 || n > 12) {
    tableBox.textContent = '請輸入 1–12 的整數。';
    return;
  }

  let html = '<table border="1" cellpadding="6" style="border-collapse:collapse;">';

  let r = 1;
  while (r <= n) {
    html += '<tr>';

    let c = 1;
    while (c <= n) {
      html += `<td>${r * c}</td>`;
      c++;
    }

    html += '</tr>';
    r++;
  }

  html += '</table>';
  tableBox.innerHTML = html;
});
</script>

8 陣列與物件：整理多筆資料

重點

陣列用來儲存一組有次序的資料，以索引存取（通常由 0 開始）。
常用：arr.length 取得長度、arr.push(x) 加入資料、配合循環逐項處理。
物件用「鍵 → 值」描述一筆資料，例如 {name: "Amy", score: 88}。
常見內建：parseInt() / parseFloat() 轉數字；Math 做基本運算。

當資料變多，你會很快發現：只用一堆變量會令程式難讀又難改。陣列與物件能把資料整理得更有系統，亦更容易配合循環與函式處理。

在入門階段，你不需要背太多陣列方法；只要掌握：索引、length、以及如何用循環逐項處理，就足以應付大部分基礎題目。

練習 12：用陣列計算平均值，並用物件整理結果

任務：把 scores 改成你自己的 6 個分數，並輸出最高分與最低分（提示：使用循環比較）。

<h2>陣列練習：計算平均分</h2>
<pre id="out"></pre>

<script>
const out = document.getElementById('out');
function println(s){ out.textContent += s + '\n'; }

const scores = [70, 85, 92, 60, 88];

let sum = 0;
let i = 0;
while (i < scores.length) {
  sum += scores[i];
  i++;
}

const avg = sum / scores.length;

println('scores = ' + scores.join(', '));
println('average = ' + avg.toFixed(2));

const student = { name: 'Chris', score: avg };
println('student.name = ' + student.name);
println('student.score = ' + student.score);
</script>

9 總結小測：綜合概念檢查

重點

本小測會混合：<script>、輸出/除錯、變量/字串、DOM/事件、if、循環、陣列/物件。
作答時先想清楚「程式想做甚麼」，再對照語法與概念。
做錯題目時，請閱讀解釋並回到對應段落，用模擬器再試一次。

Check Point 5：總結（20 題小測的一部分）

（載入中…）

10 挑戰題：把概念串起來（20 題）

重點

每一題都以「輸入 → 處理 → 輸出」的思路設計：先讀取資料，再用 JavaScript 計算／判斷／循環，最後更新 HTML。
遇到「畫面沒有反應」，先分辨是沒有視覺效果，還是程式錯誤；善用 console.log() 與控制台訊息。
建議做題流程：先寫流程清單 → 再補齊 JavaScript → 最後才整理 HTML 顯示。
每題都提供一個獨立模擬器，你可以在同一段落內即時修改與測試。

挑戰題：以較完整的情境把多個概念串連（例如變量＋if＋循環＋DOM），要求你能獨立寫出可運作的程式。
除錯（debug）：找出程式「不按預期運作」的原因；常見方法包括：查看控制台錯誤、在關鍵位置輸出變量值、逐步縮小問題範圍。

大部分互動式網頁題目都可以拆成三段：取得資料（例如 .value、陣列資料、物件屬性）→ 處理（運算、條件判斷、循環）→ 顯示結果（textContent / innerHTML / 屬性修改）。你只要清楚每一段要做甚麼，就能把題目變成一小步一小步的語句。

另外，有些程式「一開始」看不到效果是正常的（例如只綁定事件處理器，等待使用者按按鈕才會執行）。

例子：製作「兩數相加」小工具

流程清單：讀取 a、讀取 b、把 a 和 b 轉成數字、計算 sum、顯示 sum。
JavaScript：const a = parseFloat(...);、const sum = a + b;、out.textContent = sum;
重點：如果直接做 a + b 但 a/b 是字串，就會變成串接。

只背語法：見到變形題（例如加入循環、加入驗證）就容易卡住。
先拆流程：把題目拆成多個小步驟，再逐步寫成語句，較容易一次做對。
只看畫面 vs 看控制台：控制台會告訴你錯誤位置與原因，能更快找到問題。

把 .value 當成數字使用，導致 "2" + "3" 變成 "23"。
在循環中不小心把結果重覆累積（忘記清空輸出區，或把 innerHTML += ... 用錯位置）。
用錯比較運算子（把 = 當成比較；或混淆 == / ===）。
事件處理器寫好了，但忘記在 HTML 綁定（或元素 id 名稱對不上）。

下面 20 題挑戰題會由淺入深，覆蓋本章的大部分基礎能力：輸出、變量、字串、DOM、輸入、事件、if、循環、陣列與物件。你不需要一次過做完；建議每完成一題，就回看自己的程式：哪一步是「取得資料」、哪一步是「處理」、哪一步是「顯示」。

做題時，請刻意練習「空運行」：在未執行前，先預測每一步會把變量改成甚麼，然後再用模擬器驗證。這能幫助你在筆試或遇到複雜程式時，仍然能夠清楚追蹤程式流程。

溫馨提示：請先嘗試自行完成，再打開「提示」或「參考答案」。參考答案的目的，是讓你對照自己漏了哪一步，而不是直接抄寫。

（正在載入挑戰題…）