目錄
{tocify} $title={目錄}
JavaScript 是什麼？
JavaScript（以下簡稱 JS）是一種直譯式、動態型別的程式語言，最初為了讓網頁在瀏覽器上具有互動而誕生。與 HTML（結構）與 CSS（樣式）組成「前端三本柱」，JS 負責行為與邏輯：按鈕點擊、表單驗證、動畫效果、資料即時更新等，幾乎都靠它。
後來，透過 Node.js，JS 也能在伺服器端執行；再加上各式框架與工具，JS 已擴展到行動 App、桌面應用、遊戲、物聯網與自動化腳本等領域，成為「一語行天下」的通用技術。
為什麼需要 JavaScript？
打造互動體驗：從滑動選單、即時搜尋、聊天訊息、地圖拖曳，到電商的購物車更新，沒有 JS 很難達成流暢互動。
即時更新內容（AJAX/Fetch/WebSocket）：無需整頁重載，頁面可「即時」與伺服器交換資料。
跨平台開發：用一種語言做前端、後端與行動/桌面，降低團隊學習與溝通成本。
龐大生態系：NPM 套件數量龐大，需求幾乎都有現成模組可用，開發速度快。
就業面廣：前端工程師、全端工程師、Node.js 後端、前端架構師、測試工程師等，都離不開 JS。
JavaScript 在程式設計中扮演的角色
前端互動引擎：負責事件處理、頁面狀態、資料渲染、動畫、表單驗證。
後端邏輯與 API：用 Node.js 寫伺服器、API、排程任務、微服務。
跨平台膠水：透過框架把同一份商業邏輯分享到 Web、App、桌面端。
工具鏈腳本：開發、測試、部署的自動化腳本（如 ESLint、Prettier、Webpack、Vite）。
4核心觀念速讀：語法、執行環境與生態系
語法重點
變數：let（可變）、const（常數）；少用舊式 var。
函式：宣告式與箭頭函式 () => {}。
非同步：Promise、async/await 解決回呼地獄。
模組：ES Modules import/export 讓程式可拆分與重用。
物件與陣列：解構、展開運算子 ... 提升可讀性。
執行環境
瀏覽器：具備 DOM、window、fetch、localStorage 等 API。
Node.js：具備檔案系統、網路、行程等後端能力，沒有 DOM。
生態系關鍵字
前端框架：React、Vue、Svelte、Angular
後端框架：Express、Fastify、NestJS、Hono
工具：Vite、Webpack、ESLint、Prettier、Jest、Vitest、Playwright
型別：TypeScript（JS 的超集合，提供靜態型別）
使用場景總覽
1. 前端網頁
互動介面：動態表單、即時搜尋、拖放（drag-and-drop）。
單頁應用（SPA）：以 React/Vue 建構，透過 API 取得資料。
PWA：可安裝、離線、推播，像 App 一樣的網站。
2. 後端與 API（Node.js）
REST/GraphQL API、驗證、權限控管、檔案上傳。
任務排程：定時寄信、資料同步。
微服務：以 Node.js 服務化拆分模組。
3. 行動 App
React Native / Ionic / Capacitor：一套 JS 程式碼，輸出 iOS 與 Android。
適合內容/商務型 App、內部工具、活動宣傳 App。
4. 桌面應用
Electron / Tauri：用 Web 技術打造 Windows、macOS、Linux 應用（如 VS Code）。
5. 資料視覺化與儀表板
D3.js、ECharts、Chart.js：地圖、時間序列、互動圖表。
BI 儀表板：監控營運指標、即時告警。
6. 遊戲與互動多媒體
Phaser、Pixi.js、Three.js：2D/3D 網頁遊戲、產品 3D 展示。
7. IoT 與邊緣裝置
Johnny-Five 等：用 JS 控制感測器、馬達、LED。
邊緣運算：Node.js 在輕量裝置上處理事件與資料。
8. 自動化腳本與工作流程
腳本化重複工作：批量重命名、產報表、API 批次呼叫。
CI/CD：以 JS 腳本整合測試、建置、部署。
前端實戰範例
1. DOM 操作（動態插入清單）
<ul id="todo"></ul>
<input id="newItem" placeholder="要做什麼？" />
<button id="addBtn">新增</button>
<script>
const list = document.getElementById('todo');
const input = document.getElementById('newItem');
document.getElementById('addBtn').addEventListener('click', () => {
const text = input.value.trim();
if (!text) return;
const li = document.createElement('li');
li.textContent = text;
list.appendChild(li);
input.value = '';
});
</script>
要點：透過 DOM API 建立節點、監聽點擊事件、更新畫面。
2. 事件委派（效能更佳）
<ul id="todo"></ul>
<script>
const list = document.getElementById('todo');
list.addEventListener('click', (e) => {
if (e.target.tagName === 'LI') {
e.target.classList.toggle('done'); // 切換完成樣式
}
});
</script>
要點：只在父層綁一次事件，子項目再多也不怕。
非同步抓取資料（Fetch + async/await）
<div id="users"></div>
<script>
async function loadUsers() {
const res = await fetch('https://jsonplaceholder.typicode.com/users');
const data = await res.json();
const html = data.map(u => `<p>${u.name}（${u.email}）</p>`).join('');
document.getElementById('users').innerHTML = html;
}
loadUsers().catch(console.error);
</script>
要點：用 await 讓非同步程式碼可讀；注意錯誤處理與超時控管。
後端實戰：用 Node.js + Express 建立迷你 API
# 初始化專案
npm init -y
npm install express
// index.js
import express from 'express';
const app = express();
app.use(express.json());
const todos = [{ id: 1, text: '學 JS', done: false }];
app.get('/api/todos', (req, res) => {
res.json(todos);
});
app.post('/api/todos', (req, res) => {
const { text } = req.body;
if (!text || !text.trim()) return res.status(400).json({ error: 'text 必填' });
const todo = { id: Date.now(), text: text.trim(), done: false };
todos.push(todo);
res.status(201).json(todo);
});
app.patch('/api/todos/:id', (req, res) => {
const id = Number(req.params.id);
const item = todos.find(t => t.id === id);
if (!item) return res.status(404).json({ error: 'not found' });
Object.assign(item, req.body);
res.json(item);
});
app.listen(3000, () => console.log('API 伺服器已啟動：http://localhost:3000'));
要點：
GET /api/todos 取資料；POST 新增；PATCH 更新。
實務上會接資料庫（如 PostgreSQL、MongoDB），並加上驗證、權限、日誌、錯誤追蹤。
前後端協作與典型架構
RESTful：以資源（/users、/orders）為中心，使用 HTTP 動詞（GET/POST/PUT/PATCH/DELETE）。
GraphQL：由前端宣告需要的欄位，減少過度/不足抓取。
JWT/OAuth：授權與認證；前端持令牌請求 API。
CORS 與 CSRF：跨源資源分享與跨站請求偽造的安全處理。
CDN 與快取：靜態資源加速，API 設計 ETag/Cache-Control。
開發流程與最佳實務
1. 可維護性
模組化/分層：UI、服務、資料存取分離。
型別與規範：導入 TypeScript、ESLint、Prettier。
測試：單元測試（Jest/Vitest）、端對端（Playwright）。
2. 效能
前端：Code Splitting、Lazy Loading、圖片壓縮、避免不必要的 re-render。
後端：非同步 I/O、快取、連線池、適當的資料庫索引。
3. 安全
XSS：輸出時轉義、用框架安全 API、CSP。
SQL/NoSQL 注入：使用參數化查詢/ODM/ORM。
敏感資訊：環境變數與密鑰管控、HTTPS、日誌脫敏。
4. SEO 與可近用性（A11y）
SEO：SSR/SSG、語意化 HTML、正確 meta 資訊、站內連結。
A11y：替代文字、鍵盤操作、對比度、ARIA 標籤。
Core Web Vitals：LCP/FID/CLS 監控與優化。
問題集
Q1：JavaScript 與 Java 有關嗎？
名稱相似但定位不同，兩者是不同語言與生態。
Q2：需要先學哪一個？
建議先懂 HTML/CSS，再學 JS。若做後端，可從 Node.js 入門。
Q3：必學框架是哪個？
先打好原生 JS 基礎，再挑一個主流（React/Vue）深入。
Q4：純前端也要學後端嗎？
不用硬性規定，但懂 API、驗證與部署能大幅提升合作效率。
Q5：要不要學 TypeScript？
長期合作或中大型專案強烈建議，引入型別能減少錯誤。
學習路線圖
基礎：變數、條件、迴圈、函式、物件、陣列、ES6 語法。
瀏覽器 API：DOM、事件、Fetch、LocalStorage。
非同步：Promise、async/await、錯誤處理。
模組與打包：ES Modules、NPM、Vite。
框架：React 或 Vue（狀態管理、路由）。
後端：Node.js + Express/NestJS、資料庫、認證。
實戰專題：做一個可部署的全端小產品（例如待辦清單 + 儀表板）。
最佳實務：測試、型別、CI/CD、資安、效能。
範例補充：前後端串接小演練
前端（送出新待辦）
<form id="f">
<input name="text" placeholder="輸入待辦..." />
<button>送出</button>
</form>
<ul id="list"></ul>
<script>
const f = document.getElementById('f');
const list = document.getElementById('list');
async function refresh() {
const res = await fetch('/api/todos');
const data = await res.json();
list.innerHTML = data.map(t => `<li>${t.text} ${t.done ? '✅' : ''}</li>`).join('');
}
f.addEventListener('submit', async (e) => {
e.preventDefault();
const form = new FormData(f);
await fetch('/api/todos', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text: form.get('text') })
});
f.reset();
refresh();
});
refresh();
</script>
後端（承上 index.js 的 API）
// 新增 CORS 與靜態檔案（可視需要）
import cors from 'cors';
import express from 'express';
const app = express();
app.use(cors());
app.use(express.static('public'));
app.use(express.json());
// ...（同前例的 /api/todos 路由）
小結與延伸方向
JS 是前端互動的靈魂，也是跨平台開發的萬用工具。
借助 Node.js 與龐大生態，你可以用一套語言從畫面到伺服器一路打通。
從基礎語法、瀏覽器 API、非同步開始，逐步走到框架與後端，再導入測試、效能與安全。
下一步可嘗試：把上面的待辦 API 接上資料庫（如 SQLite/Postgres）、部署到雲端（如 Render、Railway、Vercel/Netlify），並加入登入機制與儀表板圖表，讓作品更完整。
延伸閱讀推薦：
javaScript : 從 ES5、ES6 到 2025 年的現在
javaScript : 變數、作用域、函數、分號與註釋javaScript : 資料型別整理、測型方法、轉型技巧
javaScript : 傳值、傳參考、型別轉換與強弱型別
javaScript : 運算式與運算子
javaScript : 陣列宣告、種類、操作方法
javaScript : 物件導向從原型到 class、從封裝到組合
javaScript : 條件分歧處理
javaScript : 迴圈處理
javaScript : 錯誤處理與例外處理
javaScript : 函數種類、宣告、參數 vs. 引數、返回值
javaScript : class從原型到 ES6， 搞懂 constructor / new / this / prototype / static