INTERACTIVE PRACTICE
互動實驗室
先預測,再執行;先分類,再修。所有 JavaScript 練習只在目前 Browser 頁面中執行,不會連你的 production 專案。
Lab A — JavaScript Runner
Console
Lab B — Execution Order
先猜輸出順序:
console.log("A");
setTimeout(() => console.log("B"), 0);
Promise.resolve().then(() => console.log("C"));
console.log("D"); Lab C — Error Classification
const user = undefined;
console.log(user.name);最適合的第一層分類?
Lab D — HTTP Diagnosis
Browser 已成功收到 502 Bad Gateway。第一輪最合理?
Lab F — Variable / Type
let value = "5";
value = Number(value);
value = value + 2;最後 value 的「值 + 型別」是?
Lab G — Loop Trace
let sum = 0;
for (let i = 1; i <= 4; i++) {
sum += i;
}最後 sum 是?
Lab H — Function / Return
function add(a, b) {
a + b;
}
const result = add(2, 3);result 是?
Lab I — DOM Failure
const el = document.querySelector("#does-not-exist");
el.textContent = "hello";最可能發生什麼?
Lab J — Array Pipeline
const result = [1,2,3,4,5]
.filter(n => n % 2 === 1)
.map(n => n * 10);result 是?
Lab K — JSON / localStorage
const user = { name: "Anson" };
localStorage.setItem("user", user);這樣之後 getItem("user") 最可能拿到什麼?
Lab L — Git Safety
你準備刪除/重置檔案,但不確定 working tree 現況。第一步?
Lab M — SQL Safety
UPDATE students
SET score = 0;這段最重要的風險?
Lab E — Debug Evidence Worksheet
| 問題 | 你應記錄什麼 |
|---|---|
| 誰報錯? | Browser / PowerShell / Nginx / Postgres / Android / Git... |
| 在哪裡? | local / CI / VM / production / device |
| 最後成功? | 最後一個已被 evidence 證明正常的節點 |
| 第一失敗? | 第一個有明確 failure evidence 的節點 |
| 如何重現? | 最短 deterministic steps |
| 如何驗證修好? | 同一重現測試 + regression |