從一張靜止的網頁，到一張會回應的網頁
把一張網頁想像成一棟房子。HTML 是骨架——牆、門、房間，它們說「這裡是一個標題，這裡是一個按鈕」。CSS 是油漆和家具——顏色、字型、間距，讓待在裡面很舒服。光有這兩樣，你能得到一棟漂亮的房子，但它是一張靜止的照片：什麼都不動，你敲門它也不應。
JavaScript 就是讓這棟房子活過來的東西。它是一門執行在網頁內部的程式語言，能在頁面載入之後改變各種東西：打開選單、檢查表單、數你點了幾下、替換圖片、載入新資料。如果說 HTML 和 CSS 描述網頁長什麼樣，那麼 JavaScript 描述的就是網頁怎麼動。整個核心思想就這一句——它是行為層。
回應使用者：先監聽，再回應
幾乎所有的互動都遵循同一個簡單的套路：網頁監聽某件事發生，一旦發生，就執行一段程式碼來回應。這「某件事」叫做事件（event）——一次點擊、一次按鍵、一張頁面載入完成。你把 JavaScript 指向某個元素，相當於在說：「當這個被點擊時，就做這件事。」
這是最小的一個真實例子。我們在頁面上找到一個按鈕，然後掛上一個監聽器：有人點擊它時，彈出一句友善的提示。慢慢讀——就算標點看起來有點怪，它的意思幾乎就是大白話。
const button = document.querySelector("#hello");
button.addEventListener("click", function () {
alert("You clicked me!");
});我們交給 addEventListener 的那一小塊，是一個函式——一捆有名字或沒名字的步驟，它不會立刻執行。我們不希望提示框在頁面一載入就彈出來；我們希望把它存起來、等到點擊真的發生時再執行。函式就是 JavaScript 把一份活兒揣在口袋裡、等到合適時機才掏出來的方式。
這段程式碼跑在哪裡：訪客的瀏覽器裡
這裡有個讓很多新手犯迷糊的點，咱們說得特別清楚。這段 JavaScript 不是跑在某台遙遠的伺服器上。它就跑在訪客的瀏覽器裡——Chrome、Safari、Firefox——在他們自己的筆電或手機上。瀏覽器自帶一個內建引擎，它讀懂你的 JavaScript，然後當場執行裡面的指令。
正因為它跑在訪客的機器上、就緊挨著他們正在看的螢幕，這一部分被稱為前端——一個應用程式「前台」的部分，也就是使用者真正看得見、摸得著的那一面。（「後端」是伺服器那一側，遠在某個資料中心，我們在另一篇指南裡講。）前端的超能力是又快又近：一次點擊能立刻得到回應，不用大老遠跑去任何地方。
等待，但不卡住
有些活兒是瞬間的，比如彈出一個提示。另一些則很慢：向伺服器要新資料、等一個幾秒鐘的計時器、載入一張圖片。慢活兒的危險在於：如果頁面乾脆停下來死等，它就會卡住——按鈕沒反應、捲動鎖死，訪客會以為頁面壞了。
JavaScript 的答案是非同步程式碼（asynchronous 的簡稱）。與其堵在門口、把所有人都攔住直到慢活兒做完，你不如說：「先把這個啟動，等它完成時，執行這個函式。」這期間頁面就能騰出手來繼續處理點擊和捲動。這就像點咖啡——你不會僵在櫃台前，而是拿個取餐器、坐下，咖啡好了取餐器自然會響。
console.log("Asking the server...");
fetch("/api/weather")
.then(function (response) { return response.json(); })
.then(function (data) {
console.log("Weather arrived:", data);
});
console.log("Page keeps working meanwhile.");注意那兩條「這期間」的訊息會先於天氣資料印出來——這正好證明頁面從沒卡住。再注意非同步是用什麼搭起來的：又是函式。我們把資料就緒後要執行的函式交給 fetch，用的還是點擊例子裡那套「先揣口袋、回頭再掏」的招數。一旦你看清函式既是點擊、也是等待的共同積木，一大片 JavaScript 就會突然在腦子裡對上號。
小結
現在你已經掌握了 JavaScript 用來做什麼的整體輪廓。它是行為層，疊在 HTML 的結構和 CSS 的樣式之上，把一張靜止的網頁照片變成會聽、會回應的東西。下面是我們走過的四步路。
- JavaScript 是行為層——它在 HTML 結構和 CSS 樣式之上添加互動。
- 互動 = 監聽一個事件（比如點擊），然後執行一個函式來回應。
- 它跑在訪客的瀏覽器裡、在他們自己的裝置上——這就是前端。
- 對於慢活兒，非同步程式碼先啟動工作、稍後再執行一個函式，這樣頁面永遠不會卡住。