沒有 JavaScript 的世界

為什麼網頁需要 JavaScript？想像你走進一間餐廳。菜單印在牆上，你看得到所有菜色（這就是 HTML）。裝潢很漂亮，燈光柔和，桌巾整齊（這就是 CSS）。但是，沒有服務生。

🗣️

你喊「我要點餐！」
沒人理你

🔔

你按桌上的服務鈴
沒有聲音

📖

你想看甜點菜單
翻不了頁

這就是沒有 JavaScript 的網頁：看得到，但動不了。

體驗「沒有 JS 的網頁」

切換下面的開關，然後試著操作待辦清單。感受有 JavaScript 和沒有 JavaScript 的差別。

JavaScript 開啟✅ 互動正常
todo-app.html

我的待辦清單

學會 HTML
學會 CSS
學會 JavaScript

✅ JS 開啟

  • 點「新增」→ 清單多一筆
  • 勾 checkbox → 文字劃掉
  • 按「刪除」→ 項目消失
  • 按 Enter → 新增項目

❌ JS 關閉

  • 按「新增」→ 什麼都沒發生
  • checkbox 可勾，但文字不會變
  • 「刪除」點了沒用
  • 按 Enter → 頁面整個重新載入

真實網站的 JS 行為

試試看：切換 JavaScript 開關，然後操作下面四個迷你網站。

JavaScript 開啟

🛒 蝦皮：加入購物車

Shopee🛒 0
🎧

藍牙耳機

$399

✅ 有 JS按「加入購物車」→ 數字即時 +1
❌ 沒 JS按鈕點了沒反應，數字永遠是 0

🔍 Google：搜尋建議

Google
✅ 有 JS打字時即時顯示搜尋建議
❌ 沒 JS可以打字，但不會出現建議

💬 Line：傳送訊息

Line
嗨！你好嗎？
✅ 有 JS按送出，訊息即時出現
❌ 沒 JS按送出什麼都不會發生

▶️ YouTube：播放控制

▶ YouTube
🎬12:34
播放中...
✅ 有 JS按暫停，影片立刻停止
❌ 沒 JS按鈕點了沒反應

事件：JavaScript 怎麼知道你做了什麼？

上面的例子裡，不管是「點擊按鈕」「輸入文字」還是「按 Enter」，JavaScript 都需要「知道」你做了什麼。這個機制就叫做事件（Event）。

想像你家門口有個門鈴。
有人按門鈴 → 門鈴響了 → 你去開門。

事件的邏輯一模一樣：
使用者做了某個動作 → JavaScript 偵測到 → 執行對應的程式碼

試試看這四種事件

🖱️click（點擊）
button.onclick = function() {
  count = count + 1;
}
👆mouseover（滑過）
把滑鼠移到我身上
box.onmouseover = function() {
  box.style.background = "blue";
}
⌨️input（輸入）
input.oninput = function() {
  display.textContent = input.value;
}
📤submit（送出）
form.onsubmit = function() {
  sendData(input.value);
}

一句話記住：事件就是「當 _____ 的時候，就 _____」。
當使用者點擊按鈕時，就新增一筆待辦。
當使用者輸入文字時，就即時更新預覽。
當使用者送出表單時，就把資料傳到伺服器。

下一課