Exercises · 2026

課後練習題

對應 Notes 各單元的課後練習，點擊「▶ Execute」查看執行結果

Unit 01 JavaScript 基礎
JS · 01變數、型別、函式
EX · 01typeof 型別偵測

用 typeof 偵測以下值的型別，思考 null 的結果為何特殊：

  1. 42、"Hello"、true、undefined
  2. null（為什麼結果是 "object"？）
  3. 一個函式 function f(){}
// 輸出結果會在這裡顯示
EX · 02函式 · 圓面積計算器

寫一個函式 circleArea(r) 計算圓面積，並用 template literal 格式化輸出：

  1. 定義 circleArea(r)，回傳 Math.PI * r * r
  2. 呼叫 r = 1, 5, 10 並印出結果
  3. 用 if-else 判斷面積是否大於 100
// 輸出結果會在這裡顯示
EX · 03Template Literal 字串組合

用反引號 template literal，不使用 +，完成以下輸出：

  1. 定義 name = "LYZ"，score = 95
  2. 印出「LYZ 的成績是 95 分」
  3. 用三元運算子判斷成績等級（≥90 → 優秀）
// 輸出結果會在這裡顯示
JS · 02陣列、物件、JSON
EX · 01map + filter 鏈式操作

給定 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]：

  1. 用 filter() 取出偶數
  2. 再用 map() 乘以 3
  3. 印出最終結果
提示：可鏈式寫 [...].filter(...).map(...)
// 輸出結果會在這裡顯示
EX · 02物件操作 · 學生成績單

建立並操作一個學生物件：

  1. 建立含 name、scores[]、grade 的物件
  2. 用 Array.push 新增一個成績
  3. 計算平均分數
  4. 用 JSON.stringify 印出整個物件
// 輸出結果會在這裡顯示
EX · 03JSON.stringify / JSON.parse

練習 JSON 序列化與反序列化，並思考邊界情況：

  1. stringify 一個物件 → 得到字串
  2. parse 還原 → 取出屬性
  3. JSON.stringify(undefined) 回傳什麼？
// 輸出結果會在這裡顯示
JS · 03DOM 操作與事件處理
EX · 01動態生成清單

用 JS 動態操作 DOM：

  1. 準備陣列 ["蘋果", "香蕉", "芒果"]
  2. 用 forEach 動態建立 <li>
  3. 點擊任一項目，用 addEventListener 印出名稱
// 輸出結果會在這裡顯示
EX · 02點擊切換背景顏色

用 querySelector 選取色塊，加上 click 事件，每次點擊切換顏色並印出次數：

點擊我切換顏色
// 點擊上方色塊查看結果
JS · 04計時器與動態效果
EX · 01數位時鐘 · setInterval

用 setInterval 每秒更新一次數位時鐘，格式 HH:MM:SS（記得 padStart 補零）：

--:--:--
EX · 02進度條 · setInterval + clearInterval

5 秒內進度從 0% 增加到 100%，完成後 clearInterval 停止：

0%
// 點擊啟動後查看結果
Unit 02 CSS Layout
CSS · 01FlexBox
EX · 01justify-content 各屬性效果

切換 justify-content 值，觀察主軸上子元素的排列變化：

A
BB
CCC
D
// 切換選單觀察變化
EX · 02align-items · flex-wrap

同時控制 align-items（交叉軸）與 flex-wrap（換行）：

A
BB
CCC
D
EE
CSS · 02Grid
EX · 01grid-template-columns · fr 單位

切換欄位設定，體驗 fr 彈性單位的效果：

1
2
3
4
5
6
// 切換欄位設定觀察變化
EX · 02gap 間距調整

拖曳滑桿調整 gap（0–32px），觀察格線間距變化：

gap: 8px
1
2
3
4
5
6
CSS · 03RWD 響應式設計
EX · 01模擬斷點切換

點按鈕模擬不同螢幕的 @media query 斷點效果：

Card 1
Card 2
Card 3
// 點擊按鈕模擬斷點
EX · 02clamp() 響應式字體

clamp(min, val, max) 讓字體在不同視窗寬度下自動縮放，不需要 @media：

font-size: clamp(1rem, 4vw, 3rem); /* 最小 16px，最大 48px，中間跟著視窗寬度縮放 */
// 輸出結果會在這裡顯示
CSS · 04CSS Animation
EX · 01@keyframes 動畫切換

點擊按鈕切換動畫類型，觀察 @keyframes 與 animation 搭配效果：

CSS
// 點擊按鈕切換動畫
EX · 02transition 速度比較

三個色塊各有不同的 transition 時長，滑鼠移上去觀察過渡速度差異：

0.1s
0.6s
1.5s ease
// 將滑鼠移到色塊上觀察
Unit 03 非同步操作與 API 串接
ASYNC · 01非同步基礎 · setTimeout
EX · 01預測輸出順序

先在腦中預測輸出順序，再點執行驗證：

console.log("🐱 貓") setTimeout(() => console.log("🐶 狗"), 1000) setTimeout(() => console.log("🐰 兔"), 0) console.log("🐟 魚")
// 輸出結果會在這裡顯示
EX · 02模擬非同步場景

模擬「送出訂單 → 滑手機 → 披薩做好」的非同步流程（3秒後）：

// 輸出結果會在這裡顯示
EX · 03思考題 — undefined 陷阱

以下程式有什麼問題？使用者會看到什麼？

let data = undefined setTimeout(() => { data = "從伺服器拿到的資料" }, 2000) console.log("資料是：" + data)
// 輸出結果會在這裡顯示
ASYNC · 02Promise
EX · 01建立你的第一個 Promise — 擲骰子

建立一個 Promise 模擬擲骰子：擲到 6 → resolve，否則 → reject，用 .then() 和 .catch() 處理結果。

// 等待 2 秒後顯示結果…
EX · 02Promise 鏈 — 早晨流程

用 Promise 鏈串起「起床 → 刷牙 → 吃早餐」，每步間隔 1 秒，每步印出收到的訊息。

// 輸出結果會在這裡顯示
ASYNC · 03async / await · fetch
EX · 01取得待辦事項

用 async/await 取得 todos/1，印出 title 和 completed，記得加 try/catch。

// 輸出結果會在這裡顯示
EX · 02顯示文章列表

取得 /posts，印出總篇數與前 5 篇標題，並在下方建立 <ul> 顯示。

// 輸出結果會在這裡顯示
EX · 03錯誤處理 — fetch 不會因 404 而 reject

故意呼叫不存在的網址，觀察 response.ok 與 response.status 的值。

// 輸出結果會在這裡顯示
ASYNC · 04綜合應用
EX · 01使用者 + 文章列表（串連請求）

先取得 User #1，再取得其所有文章，顯示名字與文章清單。

// 輸出結果會在這裡顯示
EX · 02Dashboard 並行載入 — Promise.all()

用 Promise.all() 同時取得 users、posts、todos，顯示統計 Dashboard。

// 輸出結果會在這裡顯示
EX · 03進階挑戰 — 改良倒數計時器

自訂秒數、暫停/繼續、進度條視覺化，倒數結束後用 Promise.all() 同時取得資料。

秒
--
0%
// 倒數結束後顯示結果