從後端腳本跨越到前端事件驅動：暴露底層變數，打破 DOM 黑箱。
將已知變數（PHP/Python）映射至未知變數（JS），建立底層語法對抗模型。
| 機制維度 | PHP (後端直譯) | Python (通用直譯) | JavaScript (前端事件驅動) | 核心差異與邊界漏洞 |
|---|---|---|---|---|
| 變數宣告 | $var = 10; |
var = 10 |
let var = 10;const pi = 3.14; |
JS 引入區塊作用域 let/const，防禦早期 var 污染全域記憶體的漏洞。 |
| 字串連接 | "A" . "B" |
"A" + "B" |
"A" + "B"`A ${var}` |
JS 的 + 兼具數學加法與連接，極易引發隱式轉型漏洞。推薦使用模板字面值 `...`。 |
| 陣列追加 | array_push($arr, 1); |
arr.append(1) |
arr.push(1); |
JS 陣列長度是動態的，可透過 arr.length 提取長度。 |
| 相等比對 | == (鬆散) / === (嚴格) |
== (值) / is (記憶體位址) |
== (鬆散) / === (嚴格) |
危險邊界：JS 的 == 會強制轉型(如 0 == false 為真)。永遠使用 === 斷言。 |
| 畫面輸出 | echo "<h1>"; |
print("<h1>") |
el.innerText = "..." |
PHP 從伺服器噴出字串；JS 在用戶瀏覽器內，透過 DOM 橋樑動態竄改現有畫面。 |
教科書 P.5：宣告陣列、產生隨機索引、透過 getElementById 覆蓋 DOM 節點。
let quoteArray = [ "一寸光陰一寸金，寸金難買寸光陰。", "勇敢踏出舒適圈，才能迎來人生的起點。", "與其跟他人比較，不如跟昨日的自己比較。" ]; function showRandomQuote() { // 產生 0 到 陣列長度-1 的隨機整數 let quoteIndex = Math.floor(Math.random() * quoteArray.length); // DOM 橋接與突變 document.getElementById("quote").innerText = quoteArray[quoteIndex]; }
點擊下方按鈕，觸發 onclick 事件，觀察上方代碼如何改變下方黑箱內容。
(等待觸發事件...)
全域變數遞增、邏輯閘 if...else 防禦、升級花費倍增模型。
// 宣告全域狀態變數 let x = 0; // 當前點數 let i = 1; // 每次點擊獲得的點數 (Click Power) function increment() { x = x + i; document.getElementById("counter").innerText = x; } function upgradeIncrement() { let price = i * 10; // 動態計算升級成本 // 斷言：判斷是否有足夠點數 if (x >= price) { x = x - price; // 扣除成本 i = i * 2; // 點擊力倍增 // 更新 DOM 顯示 document.getElementById("counter").innerText = x; document.getElementById("price").innerText = i * 10; document.getElementById("msg").innerText = "升級成功！"; } else { // 條件不符的分支處理 document.getElementById("msg").innerText = "您的點數不足。"; } }
測試變數的突變。觀察 x (總分) 與 i (點擊力) 是如何交互作用的。
xi = 1price: 10