JSP 入門系列（二）：JavaScript 核心觀念與常見誤區

JavaScript ≠ Java：一段被誤解的歷史

許多初學者以為 JavaScript 是 Java 的子集或腳本版。**完全錯誤。** 1995 年，Netscape 將 LiveScript 更名為 JavaScript，純粹蹭 Java 當時的熱度（「大樹底下好乘涼」）。兩者在語言設計、執行模型、型別系統上毫無關係。

JavaScript 是什麼？

• 基於物件：內建物件（window、document、Array 等）直接使用，無需自行定義類別（這是 Java 的「面向物件」）。
• 事件驅動：透過事件監聽器回應使用者互動（click、load、submit…）。
• 腳本語言：嵌入 HTML，由瀏覽器解釋執行，無需編譯。
• 安全沙箱：無法直接存取本地檔案、任意網路請求受同源策略限制。

第一支 JavaScript 程式

<html>
<head>
<title>New Document</title>
<script language="javascript">
alert("Hello world!!");
alert("Hello binzhouxueyuan!");
</script>
</head>
<body></body>
</html>

<script> 置於 <head>，頁面載入時彈出兩個警告框。單一 HTML 可包含多個 <script> 區塊，亦可置於 <body>。

核心語法速覽

變數宣告：var（ES5） / let、const（ES6+）

var num = 30;
var info = "www.baidu.com";
alert("數字：" + num + "，字串：" + info);

動態型別：變數型別由賦值決定，無需像 Java 宣告 int/String。

流程控制：與 Java/C 幾乎一致

var str = "zhaoyuqiang";
if (str == "zhaoyuqiang") {  // JS 中 == 可直接比較字串值（Java 需用 equals()）
    alert("內容符合判斷");
} else {
    alert("內容不符合判斷");
}

函式定義

function fun() {
    var arr = new Array(3);
    for (var i = 0; i < arr.length; i++) arr[i] = i;
    var str = "陣列內容";
    for (var i = 0; i < arr.length; i++) str += arr[i] + "、";
    return str;
}
alert(fun());

無需宣告回傳型別，return 直接回傳任意型別值。

現代化補充（ES6+ 必知）

• 箭頭函式：const add = (a, b) => a + b;
• 解構賦值：const [a, b] = [1, 2];
• Promise / async-await：優雅處理非同步，告別回調地獄。
• 模組化：export/import 取代全域污染。
• 嚴格模式："use strict"; 捕獲隱性錯誤。

給 JSP 開發者的建議

JSP 負責伺服器端渲染初始 HTML，JavaScript 負責瀏覽器端互動增強。**職責清晰分離**，避免在 JSP 中大量內嵌 JS 邏輯；改用前端建構工具，靜態資源獨立部署，透過 API 與後端溝通。