Frontend vs Backend
每個 app 的兩半
⏱ 預估 ~4 分鐘
01 · 讀一讀
大部分軟體都分成兩半：frontend(前端) 跟 backend(後端)。
Frontend 是你看得到、會互動的所有東西 — 按鈕、選單、動畫、文字、圖片。它跑在你的瀏覽器或手機上。
Backend 是所有在幕後發生的事 — 驗證密碼、處理付款、查資料庫、寄 email。它跑在某台 server 上。
想成一家餐廳：frontend 是用餐區（客人坐著、看菜單、吃飯），backend 是廚房（食物在這裡準備、訂單在這裡管、庫存在這裡盯）。客人從來不會看到廚房，但所有真正的工作都在那裡發生。
重點整理
- Frontend = 使用者看得到、能互動的東西（HTML、CSS、JavaScript）
- Backend = 使用者看不到的邏輯跟資料處理（server、資料庫、API）
- 兩邊一直在溝通 — frontend 發請求、backend 回回應
- 有些工程師專做一邊；「full-stack」工程師兩邊都做
02 · 分類拖拉
把每一項拖到 app 的正確半邊。它屬於 Frontend 還是 Backend?
(本節為互動練習，請啟用 JavaScript 體驗)
03 · 配對
把每個例子配對到 app 的哪個部分在處理。
(本節為互動練習，請啟用 JavaScript 體驗)
04 · 選擇題
當你打密碼然後按「登入」，你的密碼實際上是在哪裡被驗證的？
- 在你的瀏覽器（frontend）
- 在網址列
- 在 server(backend)
- 在你手機的作業系統
⚠ 完整互動體驗需要 JavaScript。請啟用 JavaScript 後重新整理。
※ 本站為獨立繁中教學專案，非 Anthropic 官方產品。Claude™ 為 Anthropic, PBC 商標。