操作 DOM
改文字、切換 class、建立節點，讓畫面在不重整整頁的情況下更新。
從瀏覽器腳本到全端開發：把 JavaScript 的整體架構一次看懂
如果第 05 章教你 JavaScript 怎麼操作 DOM，第 06 章教你 Web server 怎麼回應請求，第 07 章教你框架為什麼存在， 那這一章就是把這三件事重新串起來：JavaScript 為什麼會一路從前端走到後端？各種 library、toolkit、framework 到底差在哪裡？
Why：為什麼需要一章專門整理 JavaScript 全貌？
很多學生會分段學到 HTML / CSS、DOM、HTTP、Node.js、React 或 Express，但腦中卻沒有一張完整地圖。 結果常常會知道工具名稱，卻不知道它們在同一套 Web 架構中的位置。 這一章的目標，就是把「歷史演進」與「技術分工」一起講清楚。
一句話先記住：
JavaScript 不只是一種語法，它已經發展成一個跨越瀏覽器、伺服器、套件管理、前端框架與全端整合的完整生態系。
發展歷史：JavaScript 為什麼會一路擴張？
flowchart LR
A[1995 瀏覽器腳本
處理表單與簡單互動] --> B[2005 AJAX / Web 2.0
jQuery 簡化 DOM 與跨瀏覽器問題]
B --> C[2009 Node.js
JavaScript 進入伺服器端]
C --> D[2015 ES6+ / npm
模組化與語法現代化]
D --> E[SPA / 元件化
React Vue Angular]
E --> F[現代全端整合
Next.js Nuxt NestJS]
| 時代 | 主要痛點 | 代表演進 |
|---|---|---|
| 早期瀏覽器腳本 | 只能做簡單互動，功能較零散 | 表單驗證、alert、簡單事件處理 |
| AJAX / jQuery 時代 | DOM 操作繁瑣、跨瀏覽器差異大 | jQuery 讓選取節點、事件、AJAX 更簡單 |
| Node.js 興起 | 前後端語言分離，工具鏈分散 | JavaScript 能在伺服器端執行，形成全端可能 |
| ES6+ 與 npm 生態 | 大型專案需要更好的模組化與重用 | import / export、套件管理、建構工具普及 |
| 框架 / 全端整合 | 大型應用的狀態、路由、部署更複雜 | React / Vue / Next.js / NestJS 等生態成熟 |
JavaScript 在瀏覽器中扮演什麼角色？
回應事件
接住 click、input、submit 等事件，決定使用者操作後要做什麼。
呼叫 API
透過 fetch()、Axios 等工具向伺服器拿資料，再把結果渲染到頁面上。
先用階層順序看：Web server、Runtime、Framework、Toolkit、Library
這裡先不用急著背工具名稱，而是先用教學上最容易理解的「由外到內」順序來看： Web server → Runtime → Framework → Toolkit → Library。 這樣比較容易把不同名詞放回同一張架構圖裡。
| 層次 | 類型 | 核心概念 | 誰主導流程？ | 例子 |
|---|---|---|---|---|
| 入口層 | Web server | 負責接 HTTP request、回應資源或轉送請求 | 入口流程為主，不負責你的應用邏輯結構 | Nginx、Apache、Node 內建 http server |
| 執行層 | Runtime | 讓程式碼真的跑起來的執行環境 | 不負責你的商業邏輯結構 | Node.js、Python、JVM |
| 應用結構層 | Framework | 提供整體結構、生命週期與慣例 | 框架主導較多流程 | Angular、Next.js、NestJS、Django |
| 介面工具層 | Toolkit / UI framework | 提供現成元件、樣式與輕量互動模式 | 多半仍由你控制畫面流程 | Bootstrap、Alpine.js |
| 功能輔助層 | Library | 預先寫好的功能集合 | 通常由你的程式主動呼叫 | jQuery、Axios、Lodash、D3.js |
教學上常見誤區：
這裡的順序是「方便理解整體架構」的教學順序，不代表所有工具都會形成單一、固定的技術依賴鏈。
Node.js 是 Runtime，不是 Framework；Bootstrap 比較接近 UI toolkit / CSS framework；React 常被叫做 UI library，但實務上又常和框架生態一起討論，所以教學時要特別說明它所處的層次。
Node.js 是 Runtime，不是 Framework；Bootstrap 比較接近 UI toolkit / CSS framework；React 常被叫做 UI library，但實務上又常和框架生態一起討論，所以教學時要特別說明它所處的層次。
熱門 JavaScript 工具與應用領域
| 分類 | 代表工具 | 常見用途 |
|---|---|---|
| DOM 操作 / 經典入門 | jQuery | 簡化 DOM 選取、事件與 AJAX |
| HTTP / AJAX | Axios | 呼叫 API、設定攔截器、統一錯誤處理 |
| 資料處理工具庫 | Lodash | 陣列、物件、節流、防抖與資料轉換 |
| 動畫效果 | Anime.js、GSAP | 互動動畫、時間軸、進階動態效果 |
| 資料視覺化 | D3.js、Chart.js | 圖表、儀表板、互動資料展示 |
| 3D / WebGL | Three.js | 3D 場景、模型展示、互動視覺 |
| 輕量互動 | Alpine.js | 在 HTML 中快速加入簡單狀態與互動 |
| UI toolkit / CSS framework | Bootstrap | 快速建立版型、元件與響應式介面 |
延伸閱讀：如果想更深入理解 jQuery
為什麼還要專門學 jQuery？
因為它不只是「一個舊 library」，更代表一整個 AJAX / Web 2.0 時代的開發思維。
如果你想看 jQuery 如何用更短的語法做 DOM 選取、事件綁定與 AJAX，並理解它為什麼在舊專案裡仍然常見，請接著看
第 09 章：jQuery 詳解；若想從通用原理理解 AJAX 的功能、流程與底層運作，可再讀 第 10 章：AJAX 原理；若想看這些術語如何一起出現在真實網站描述中，可再讀 第 11 章：實務技術堆疊解讀。
模組化與套件管理：為什麼 npm 會變重要？
CDN 載入
適合快速示範、教材實驗與簡單頁面，把套件直接用 <script> 載入。
npm 安裝
適合正式專案，能管理版本、依賴與建構流程，例如 npm install axios。
ES Modules
讓程式碼可分檔、重用與維護，是現代 JavaScript 專案的重要基礎。
重點：
當 JavaScript 不再只是幾行嵌在 HTML 裡的小腳本，而是成長為多頁面、多模組、多人協作的專案時，模組化與套件管理就變成必要條件。
Example：前端 JavaScript 如何呼叫後端 API？
Browser fetch + Express API
這個例子把瀏覽器端與伺服器端 JavaScript 串在一起，是最典型的前後端互動模型。
// Browser
async function loadStatus() {
const response = await fetch("/api/status");
const data = await response.json();
document.querySelector("#status").textContent = data.message;
}
loadStatus();
// Express
const express = require("express");
const app = express();
app.get("/api/status", (req, res) => {
res.json({ message: "JavaScript 已串起前端與後端" });
});
app.listen(3000);
頁面看到的結果
JavaScript 已串起前端與後端
- 瀏覽器端 JavaScript 負責發送請求並更新 DOM，這正是 AJAX 互動的核心模式。
- Node.js Runtime 裡執行的 Express 負責接收請求與回傳 JSON。
- 同樣都是 JavaScript，但一端跑在瀏覽器，一端跑在伺服器。
JavaScript 在後端中的角色
flowchart LR
A[Browser UI] --> B[fetch / Axios]
B --> C[HTTP API]
C --> D[Node.js Runtime]
D --> E[Express / NestJS]
E --> F[(Database)]
E --> G[JSON / HTML Response]
G --> A
| 層次 | 主要責任 | 代表工具 |
|---|---|---|
| Browser | 顯示畫面、接事件、更新 DOM | 原生 JS、React、Vue、Alpine.js |
| HTTP / API | 交換資料格式與狀態碼 | fetch、Axios、HTTP |
| Runtime | 執行伺服器端 JavaScript | Node.js |
| Backend Framework | 管理路由、驗證、模組、商業邏輯 | Express、NestJS |
從前端到後端的完整請求流程
sequenceDiagram
participant User as 使用者
participant Browser as Browser JavaScript
participant Server as Node.js / Framework
participant DB as Database
User->>Browser: 點擊按鈕 / 輸入資料
Browser->>Server: fetch / Axios 發送 HTTP Request
Server->>DB: 查詢或寫入資料
DB-->>Server: 回傳資料結果
Server-->>Browser: JSON / HTML Response
Browser->>Browser: 更新 DOM / 狀態 / 畫面
Browser-->>User: 顯示新內容
這就是全端視角：
使用者看到的是一個畫面，但背後其實是瀏覽器端 JavaScript、HTTP、伺服器端 JavaScript 與資料層協同運作的結果。
學習路徑建議：應該先學什麼？
第 1 步：先學原生
先會 HTML、CSS、DOM、事件與 fetch()，才能知道套件幫你省了什麼。
第 2 步：再學工具
根據需求選擇 jQuery、Axios、Chart.js、Bootstrap 等工具，不要一次全背。
第 3 步：最後學框架
當畫面、路由、模組與團隊協作需求變大，再進入 React / Next.js / NestJS 等生態。
Summary：本章結論
- JavaScript 的發展歷史，解釋了為什麼會先有 jQuery，再有 Node.js、現代框架與全端工具鏈。
- Library 是預先寫好的功能集合；Toolkit 強調現成元件與樣式；Framework 則提供整體結構；Runtime 負責讓程式跑起來。
- JavaScript 不只存在瀏覽器，也能在 Node.js 中負責伺服器端邏輯，因此能形成前後端共享語言的開發模式。
- 如果你能把 DOM、API、Runtime、Framework 與資料流串在一起，就比較不會把工具名稱背成一堆零散名詞。