← 首頁

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

進入症狀診斷樹 →