JSP 入門系列（三）：JavaScript 進階應用與 DOM 互動

變數與型別系統深度解析

JavaScript 採用**動態弱型別**：

• var（函式作用域、可重複宣告）、let/const（區塊作用域、暫時性死區）是現代標準。
• 型別由值決定：typeof 30 // "number"、typeof "str" // "string"。
• 隱性轉型陷阱：[] + {} // "[object Object]"、[] == ![] // true。嚴格相等 === 避免轉型，建議**永久使用 ===/!==**。

流程控制與邏輯運算子

// 短路求值技巧
var user = getUser() || { name: "Guest" };  // 預設值
var isAdmin = user.role === "admin" && user.active;  // 守衛條件

函式進階：閉包與高階函式

function createCounter() {
    var count = 0;  // 被閉包捕獲
    return function() { return ++count; };
}
var counterA = createCounter();
counterA(); // 1
counterA(); // 2

閉包讓內部函式「記住」外部詞法環境，是模組模式、柯里化、中介軟體的基石。

陣列與物件操作（ES5/ES6 對照）

DOM 互動：從選取到事件委派

// 現代選取 API
const btn = document.querySelector("#submit");
const items = document.querySelectorAll(".item");

// 事件委派（效能優於逐個綁定）
document.body.addEventListener("click", e => {
    if (e.target.matches(".delete-btn")) {
        e.target.closest("li").remove();
    }
});

AJAX 進化史

1. XMLHttpRequest（原生、繁瑣）
2. jQuery $.ajax（簡化、Promise 化）
3. fetch API（原生 Promise、串流支援）
4. axios/ky（攔截器、自動 JSON、TypeScript 支援）

// fetch 範例
async function loadData() {
    const res = await fetch("/api/data");
    if (!res.ok) throw new Error(res.statusText);
    return res.json();
}

前端工程化清單

• 建構工具：Vite（開發極速、生產 Rollup）
• 型別檢查：TypeScript（強型別、IDE 智感）
• 代碼規範：ESLint + Prettier
• 測試：Vitest（單元）、Playwright（E2E）
• 部署：靜態資源上 CDN，HTML 走 SSR/SSG（Next.js、Astro）

給 JSP 團隊的遷移路徑

1. 抽離靜態資源（JS/CSS/圖片）至獨立前端專案。
2. JSP 改為僅輸出初始狀態 JSON 或 SSR HTML，API 化業務邏輯。
3. 引入前端框架或輕量庫，逐頁遷移互動邏輯。
4. 建立共享型別定義，前後端契約先行。