JavaScript on EricChung的程式勇者村

新手第十三步：Async / Await 與 API 串接　讓網頁讀取真實世界的資料！

Fri, 17 Apr 2026 00:00:00 +0000

到目前為止，你網頁上的所有資料都是自己寫死的。標題、卡片內容、圖片——全都是你親手打進去的。

但真實的網站不是這樣運作的。你打開天氣 App，資料是從氣象局的伺服器來的；你滑 Instagram，圖片是從 Meta 的資料庫來的；你用 Google 搜尋，結果是從爬過全世界網頁的資料庫來的。

這一切都靠一個東西：API 串接。

1. 什麼是 API？

API（Application Programming Interface，應用程式介面） 是一個讓不同系統之間互相溝通的「窗口」。

用餐廳來比喻：

你是前端（客人）
廚房是後端（資料庫 / 伺服器）
服務生就是 API

你不需要進廚房，只要告訴服務生你要什麼（送出 Request），服務生就會把廚房做好的食物端給你（回傳 Response）。

常見的 API 使用場景：

天氣資訊（OpenWeatherMap API）
地圖（Google Maps API）
金流（綠界、藍新 API）
社群登入（Google / Facebook OAuth API）
AI 功能（OpenAI API）

2. 同步 vs 非同步：一個讓新手頭痛的概念

同步（Synchronous）

程式碼一行一行按順序執行，下一行必須等上一行執行完才能開始。

1
2
3
4
5


console.log("第一步");
console.log("第二步");
console.log("第三步");

// 輸出順序：第一步 → 第二步 → 第三步

非同步（Asynchronous）

某些操作很耗時（例如向伺服器請求資料，可能需要 1~3 秒），如果用同步的方式執行，整個頁面會卡住等待，什麼事都不能做。

非同步讓 JavaScript 可以：「你去向伺服器拿資料，我先繼續做其他事，等你拿回來再處理。」

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


console.log("開始請求資料");

// 向 API 請求資料（非同步，需要時間）
fetch("https://api.example.com/data")
 .then(response => response.json())
 .then(data => console.log("資料回來了：", data));

console.log("這行不等資料，先執行");

// 輸出順序：
// 開始請求資料
// 這行不等資料，先執行
// 資料回來了：{ ... } ← 等 API 回應後才執行

3. Promise：非同步操作的承諾

Promise 是 JavaScript 表示「未來會完成的操作」的物件。

想像你去餐廳點餐，服務生給你一個號碼牌（Promise）：

等一下食物做好，你拿號碼牌去領（.then()）
如果廚房失火做不了，你也會被通知（.catch()）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


fetch("https://jsonplaceholder.typicode.com/posts/1")
 .then(response => {
 return response.json(); // 把回應轉成 JSON 格式
 })
 .then(data => {
 console.log(data); // 使用資料
 })
 .catch(error => {
 console.error("出錯了：", error); // 處理錯誤
 });

.then() 可以串聯多個，每個 .then() 接收上一個 .then() 的 return 值。

4. Async / Await：讓非同步程式碼看起來像同步

Promise 的 .then() 鏈寫多了會很難閱讀。async / await 是更現代、更好讀的寫法，本質上還是 Promise，只是語法更直覺。

基本語法

1
2
3
4
5
6
7
8
9


// 在函式前加 async，代表這個函式裡面有非同步操作
async function getData() {
 // await 代表「等這行執行完再繼續」
 const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
 const data = await response.json();
 console.log(data);
}

getData();

加上錯誤處理

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


async function getData() {
 try {
 const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");

 if (!response.ok) {
 throw new Error(`HTTP 錯誤：${response.status}`);
 }

 const data = await response.json();
 console.log(data);
 } catch (error) {
 console.error("請求失敗：", error.message);
 }
}

try...catch 是處理非同步錯誤的標準做法：try 裡面放正常流程，catch 裡面處理例外狀況。

async / await vs .then() 對比

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


// .then() 寫法（舊式）
function getUser() {
 fetch("/api/user")
 .then(res => res.json())
 .then(user => {
 fetch(`/api/posts/${user.id}`)
 .then(res => res.json())
 .then(posts => console.log(posts));
 });
}

// async/await 寫法（現代，推薦）
async function getUser() {
 const userRes = await fetch("/api/user");
 const user = await userRes.json();

 const postsRes = await fetch(`/api/posts/${user.id}`);
 const posts = await postsRes.json();

 console.log(posts);
}

同樣的功能，async/await 版本閱讀起來就像普通的同步程式碼，清楚多了。

5. fetch API：瀏覽器內建的 HTTP 請求工具

fetch 是現代瀏覽器內建的 API，讓你不需要安裝任何套件就能發送 HTTP 請求。

GET 請求（取得資料）

1
2
3
4
5


async function getPosts() {
 const response = await fetch("https://jsonplaceholder.typicode.com/posts");
 const posts = await response.json();
 return posts;
}

POST 請求（送出資料）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


async function createPost(title, body) {
 const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
 method: "POST",
 headers: {
 "Content-Type": "application/json", // 告訴伺服器你送的是 JSON
 },
 body: JSON.stringify({ // 把物件轉成 JSON 字串
 title: title,
 body: body,
 userId: 1,
 }),
 });

 const newPost = await response.json();
 console.log("建立成功：", newPost);
}

HTTP 方法速查

方法	用途
`GET`	取得資料
`POST`	建立新資料
`PUT`	完整更新資料
`PATCH`	部分更新資料
`DELETE`	刪除資料

6. 認識 JSON：API 的通用語言

API 傳回來的資料通常是 JSON（JavaScript Object Notation） 格式。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


{
 "id": 1,
 "name": "小明",
 "email": "ming@example.com",
 "age": 18,
 "hobbies": ["前端開發", "打籃球", "看動漫"],
 "address": {
 "city": "台北市",
 "district": "信義區"
 }
}

JSON 的規則：

所有 key 要用雙引號包起來
字串值也要用雙引號
支援 String、Number、Boolean、Array、Object、null

在 JavaScript 中操作 JSON：

1
2
3
4
5
6
7


// JSON 字串 → JavaScript 物件
const obj = JSON.parse('{"name": "小明", "age": 18}');
console.log(obj.name); // "小明"

// JavaScript 物件 → JSON 字串
const json = JSON.stringify({ name: "小明", age: 18 });
console.log(json); // '{"name":"小明","age":18}'

7. 實戰練習一：串接公開 API 顯示文章列表

我們用 JSONPlaceholder（一個免費的假 API）來練習。

HTML：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50


<!DOCTYPE html>
<html lang="zh-TW">
<head>
 <meta charset="UTF-8">
 <title>文章列表</title>
 <style>
 body { font-family: Arial, sans-serif; max-width: 700px; margin: 40px auto; padding: 0 20px; background: #f5f5f5; }
 h1 { color: #2c3e50; }
 .post-card { background: white; border-radius: 8px; padding: 20px; margin-bottom: 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
 .post-card h3 { margin: 0 0 8px; color: #34495e; text-transform: capitalize; }
 .post-card p { margin: 0; color: #666; line-height: 1.6; }
 #loading { text-align: center; color: #888; padding: 40px; }
 </style>
</head>
<body>
 <h1>最新文章</h1>
 <div id="loading">載入中...</div>
 <div id="post-list"></div>

 <script>
 async function loadPosts() {
 try {
 const response = await fetch("https://jsonplaceholder.typicode.com/posts?_limit=10");
 const posts = await response.json();

 const loading = document.getElementById("loading");
 const postList = document.getElementById("post-list");

 loading.style.display = "none"; // 隱藏載入提示

 posts.forEach(post => {
 const card = document.createElement("div");
 card.className = "post-card";
 card.innerHTML = `
 <h3>${post.title}</h3>
 <p>${post.body}</p>
 `;
 postList.appendChild(card);
 });

 } catch (error) {
 document.getElementById("loading").textContent = "載入失敗，請稍後再試。";
 console.error(error);
 }
 }

 loadPosts();
 </script>
</body>
</html>

打開瀏覽器，你會看到 10 篇從 API 取得的文章自動渲染到頁面上！

8. 實戰練習二：在 Vue 3 + Vite 中串接 API

在 Vue 專案中，搭配 ref 和 onMounted 來串接 API 是最標準的做法：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67


<template>
 <div class="container">
 <h1>使用者列表</h1>

 <!-- 載入中狀態 -->
 <p v-if="loading" class="loading">載入中...</p>

 <!-- 錯誤狀態 -->
 <p v-else-if="error" class="error">{{ error }}</p>

 <!-- 成功顯示資料 -->
 <div v-else class="user-grid">
 <div v-for="user in users" :key="user.id" class="user-card">
 <h3>{{ user.name }}</h3>
 <p>📧 {{ user.email }}</p>
 <p>🌐 {{ user.website }}</p>
 <p>🏙️ {{ user.address.city }}</p>
 </div>
 </div>
 </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const users = ref([]);
const loading = ref(true);
const error = ref(null);

async function fetchUsers() {
 try {
 const response = await fetch("https://jsonplaceholder.typicode.com/users");

 if (!response.ok) throw new Error("無法取得資料");

 users.value = await response.json();
 } catch (err) {
 error.value = err.message;
 } finally {
 loading.value = false; // 不管成功或失敗，都結束載入狀態
 }
}

// onMounted：元件掛載到頁面後自動執行
onMounted(() => {
 fetchUsers();
});
</script>

<style scoped>
.container { max-width: 900px; margin: 40px auto; padding: 0 20px; }
.loading { text-align: center; color: #888; }
.error { color: red; text-align: center; }
.user-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 gap: 20px;
}
.user-card {
 background: white;
 border-radius: 12px;
 padding: 20px;
 box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.user-card h3 { margin: 0 0 12px; color: #2c3e50; }
.user-card p { margin: 4px 0; color: #555; font-size: 14px; }
</style>

這段程式碼示範了 API 串接最重要的三個狀態管理：

loading：資料還在載入時顯示等待畫面
error：請求失敗時顯示錯誤訊息
data：成功後顯示資料

9. 使用需要 API Key 的服務

很多真實 API 需要申請 API Key 才能使用（用來識別是誰在呼叫 API）。

以 OpenWeatherMap 天氣 API 為例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


const API_KEY = "你的API金鑰";
const city = "Taipei";

async function getWeather() {
 const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric&lang=zh_tw`;

 const response = await fetch(url);
 const data = await response.json();

 console.log(`${data.name} 目前氣溫：${data.main.temp}°C`);
 console.log(`天氣狀況：${data.weather[0].description}`);
}

getWeather();

重要安全提醒： API Key 絕對不能放在前端程式碼裡 commit 到 GitHub（任何人都看得到！）。正確的做法是放在 .env 檔案裡，並在 .gitignore 排除它。

1
2


# .env 檔案
VITE_WEATHER_API_KEY=你的API金鑰

1
2


// 在 Vue 裡使用
const API_KEY = import.meta.env.VITE_WEATHER_API_KEY;

10. 常見錯誤與解法

CORS 錯誤

1

Access to fetch at 'https://...' has been blocked by CORS policy

這是最常見的 API 錯誤。CORS 是瀏覽器的安全機制，防止網頁隨意存取其他網域的資源。

解法：

確認 API 有開放 CORS（公開 API 通常都有）
若是自己的後端，在伺服器端設定允許的來源
開發階段可在 vite.config.js 設定代理（proxy）繞過

response.json() 失敗

1

SyntaxError: Unexpected token < in JSON at position 0

表示 API 回傳的不是 JSON，可能是 HTML 錯誤頁面。先用 console.log(response.status) 確認狀態碼。

404 / 401 / 500 錯誤

1
2
3
4


if (!response.ok) {
 // response.status 會是 404、401、500 等
 throw new Error(`錯誤代碼：${response.status}`);
}

401：未授權，需要 API Key 或登入
403：禁止存取，權限不足
404：找不到資源，確認 URL 是否正確
500：伺服器錯誤，對方的問題

結語：你的網頁現在連接到真實世界了

學完這篇，你已經能夠：

理解同步 vs 非同步的差異
用 fetch + async/await 串接任何 REST API
正確處理載入、成功、失敗三種狀態
在 Vue 3 中整合 API 資料
避免把 API Key 洩漏到 GitHub

接下來你可以做什麼？ 有了 API 串接能力，下一篇我們要學 Vue Router——讓你的 Vue 應用程式擁有多個頁面，實現真正的「單頁應用程式（SPA）」，做出有導覽列、有路由切換的完整網站架構！

準備好蓋出多頁面的網站了嗎？下一篇見！

新手第十五步：React 入門　前端最熱門的框架，到底在紅什麼？

Fri, 17 Apr 2026 00:00:00 +0000

你學完 HTML、CSS、JavaScript 之後，應該已經可以做出會動的網頁了。

但只要功能一變多，很快就會開始出現這些問題：

一個資料改了，很多地方都要手動更新
按鈕事件越綁越多，程式碼開始打結
頁面狀態一多，很難知道現在到底是哪裡出了問題
同樣的 UI 要重複寫很多次

這就是前端框架存在的原因。
而在所有前端框架裡，React 幾乎是目前最熱門、也最常出現在職缺上的名字。

1. React 是什麼？

React 是由 Meta（Facebook） 開發的前端函式庫，用來建立使用者介面（UI）。

你可以把它理解成一套更有組織的方式，讓你去寫：

畫面怎麼長
資料怎麼變
當資料改變時，畫面怎麼自動更新

React 最有名的地方，不是它「能做動畫」或「能發 API」，而是它把前端畫面拆得更清楚、更容易維護。

簡單說：

React 幫你把「資料」和「畫面」的關係整理好。

2. 為什麼前端要用 React？

先想像一個購物車頁面。

當你把商品數量從 1 改成 2 的時候，頁面上很多地方都要一起改：

商品小計要更新
總金額要更新
導覽列上的購物車數量要更新
如果超過免運門檻，提示訊息也要更新

如果你用原生 JavaScript 手動處理，通常會變成：

先抓商品數量的 DOM
再抓總金額的 DOM
再抓購物車 icon 的 DOM
每改一次資料，就手動一個一個改畫面

這樣在小專案還可以，但功能一多就會變得很痛苦。

React 的想法不一樣：

你不用一直想「我要改哪個 DOM」，你只要想：

現在資料是什麼
這份資料應該長出什麼畫面

當資料改變時，React 會幫你把該更新的地方更新掉。

這種寫法叫做 宣告式（Declarative）。

3. React 在解決什麼問題？

React 主要在解決 3 件事：

1. 畫面重複利用

一個按鈕、一張商品卡片、一個導覽列，常常會在網站很多地方重複出現。
React 可以把它們拆成元件（Component），寫一次、重複使用很多次。

2. 資料和畫面同步

當資料變了，畫面要跟著變。
React 幫你把這件事變得很自然，不需要你一直自己手動操作 DOM。

3. 大型專案的可維護性

當頁面越來越多、互動越來越複雜時，React 的元件化寫法會比一大包原生 JS 更容易整理。

4. React 的 3 個核心觀念

如果你剛接觸 React，先搞懂這三個觀念就夠了。

元件（Component）

React 把 UI 當成一塊一塊的小積木。

例如一個網站可以拆成：

Header
Sidebar
ProductCard
Button
Footer

每一塊都可以是一個 React 元件。

1
2
3


function Welcome() {
 return <h1>歡迎來到我的網站</h1>;
}

這就是最基本的 React 元件。它本質上就是一個函式，回傳一段 UI。

Props

元件之間要傳資料時，會用到 props。

1
2
3


function Welcome(props) {
 return <h1>你好，{props.name}</h1>;
}

1

<Welcome name="Eric" />

這樣畫面就會顯示：你好，Eric

你可以把 props 想成「父元件傳給子元件的參數」。

State

如果 props 是外面傳進來的資料，那 state 就是元件自己管理的資料。

最常見的例子就是計數器：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


import { useState } from "react";

function Counter() {
 const [count, setCount] = useState(0);

 return (
 <button onClick={() => setCount(count + 1)}>
 目前次數：{count}
 </button>
 );
}

當 count 改變時，React 會自動重新 render，畫面上的數字也會跟著更新。

5. 一個最小 React 範例

來看一個最簡單、最能感受到 React 特色的例子。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


import { useState } from "react";

function App() {
 const [message, setMessage] = useState("你好，React！");

 function changeMessage() {
 setMessage("訊息被改掉了！");
 }

 return (
 <div>
 <h1>{message}</h1>
 <button onClick={changeMessage}>點我換訊息</button>
 </div>
 );
}

export default App;

這段做了什麼？

用 useState 建立一個狀態 message
畫面先顯示 你好，React！
點按鈕後呼叫 setMessage
React 發現 state 變了，就重新更新畫面

這裡最重要的地方是：

你完全沒有手動去抓 DOM，也沒有自己寫 document.getElementById()。
你只是在改資料，React 幫你把畫面同步更新。

這就是 React 最核心的爽感。

6. JSX 是什麼？為什麼看起來像 HTML？

React 程式碼裡最讓新手困惑的地方，通常就是這個：

1

return <h1>Hello React</h1>;

這看起來像 HTML，但它其實不是純 HTML，而是 JSX。

JSX 是一種讓你可以在 JavaScript 裡面寫類似 HTML 語法的寫法。
它的目的是讓 UI 結構更直覺、更容易閱讀。

例如：

1
2
3


const name = "Eric";

return <h1>你好，{name}</h1>;

這裡的 {name} 代表「把 JavaScript 變數插進畫面裡」。

你可以把 JSX 想成：

用比較好讀的方式去描述 UI 長什麼樣子。

7. React vs 原生 JavaScript：差在哪？

這個問題很多新手都會問，而且問得很好。

原生 JavaScript 的做法

你通常會：

先抓 DOM
幫按鈕綁事件
在事件裡手動更新文字
有更多區塊時，再一個一個更新

這樣的好處是：

沒有額外框架
很直接
很適合做小功能

但缺點是：

畫面邏輯和 DOM 操作很容易混在一起
當功能變多，維護成本會快速上升

React 的做法

React 比較像是：

先定義資料
再定義資料對應的畫面
當資料改變時，React 幫你更新 UI

它的優點是：

更適合大型專案
元件可以重複使用
狀態管理比較清楚

所以結論不是「React 取代原生 JS」，而是：

原生 JS 是基礎，React 是讓大型 UI 開發更有效率的工具。

8. React vs Vue：新手該怎麼看？

你前面已經看過 Vue 文章了，那 React 和 Vue 差在哪？

先講結論：

Vue 對新手通常比較友善
React 在職場上更常見，生態系也非常大

Vue 的感覺

Vue 的模板語法比較接近 HTML，很多新手第一次看會覺得比較自然。

例如 Vue 會寫：

1

<button @click="count++">點我</button>

對剛接觸前端框架的人來說，這種寫法通常比較好懂。

React 的感覺

React 會把 UI 和邏輯更緊密地寫在一起，用 JSX 來組合。

1

<button onClick={() => setCount(count + 1)}>點我</button>

一開始你可能會覺得 React 比較「像在寫 JavaScript」，門檻稍微高一點。
但也因為這樣，它在組合彈性和工程化上非常強。

那到底學哪個？

如果你是完全新手：

Vue 通常比較快上手

如果你考慮求職市場：

React 通常更值得優先投入

不過你不用把它想成二選一。
框架只是工具，重點還是你對 HTML、CSS、JavaScript 基礎有沒有真的懂。

9. 給新手的學習順序建議

如果你準備開始學 React，我建議順序是這樣：

先把 JavaScript 基礎打穩
學 React 元件、props、state
再學事件處理和列表渲染
接著學 useEffect
最後再碰 API 串接、路由、狀態管理

很多人卡住不是因為 React 太難，而是因為 JavaScript 基礎不夠穩，就直接跳進框架。

React 確實有學習曲線，但只要你知道它在解決什麼問題，很多概念會突然變清楚。

結語：React 紅不是沒有原因

React 之所以紅，不是因為它比較潮，而是因為它真的很適合拿來開發大型、互動複雜的前端介面。

它的核心思想其實不花俏：

把 UI 拆成元件
把資料和畫面關係整理清楚
讓資料改變時，畫面自動同步

只要你把這三件事理解了，React 就不會再只是「那個很紅的框架」，而是你手上很有用的工具。

接下來你可以做什麼？
下一篇我們可以直接接著寫 React useState 入門，因為 state 是 React 最核心、也最早一定會碰到的觀念。等你把 useState 和 useEffect 都打通之後，React 就會開始真正連起來。

準備好正式進入 React 的世界了嗎？下一篇見！

新手第十六步：CodePen 入門　不用建專案，也能立刻開始寫前端！

Fri, 17 Apr 2026 00:00:00 +0000

你有沒有遇過這種情況：

只是想測一個按鈕 hover 效果，結果卻要先：

建資料夾
開 VS Code
建 index.html
建 style.css
建 script.js
再開 Live Server

明明只是想試 10 行程式，卻先花了 5 分鐘準備環境。

這時候，CodePen 就非常好用。

1. CodePen 是什麼？

CodePen 是一個線上前端編輯器，你可以直接在瀏覽器裡寫：

HTML
CSS
JavaScript

而且它會立刻幫你把結果顯示出來。

你可以把它想成：

前端版的線上遊樂場。

不用安裝、不用建專案、不用設定環境，只要打開網站就能開始寫。

2. CodePen 能做什麼？

很多新手以為 CodePen 只是「拿來玩玩看」的網站，其實它很好用。

你可以拿它來：

練習 HTML / CSS / JavaScript
測試一小段 UI 效果
做按鈕、卡片、導覽列等小元件
分享作品給別人看
收藏別人的範例，學習寫法

尤其是學前端初期，你常常不是要做整個網站，而是想先試一個小功能。
這時候 CodePen 比開一個完整專案快非常多。

3. CodePen 的畫面怎麼看？

CodePen 最常見的畫面分成四塊：

HTML 區：放結構
CSS 區：放樣式
JavaScript 區：放互動邏輯
Preview 區：即時預覽結果

這個設計很適合新手，因為你可以很清楚地看到：

HTML 負責骨架
CSS 負責外觀
JavaScript 負責互動

三者的角色分工會非常直觀。

4. 為什麼新手很適合先用 CodePen？

因為它把「環境成本」降到幾乎沒有。

剛開始學前端的人，最容易被兩件事打亂節奏：

程式本身還沒學懂
開發環境又一堆設定

CodePen 的好處就是：你可以先把注意力放在程式本身。

例如你今天只是想練：

flex
hover
addEventListener
fetch
一個小型卡片 UI

那你直接開 CodePen 寫，速度通常最快。

5. 一個最簡單的 CodePen 範例

假設你想做一個按一下就改文字的按鈕，CodePen 會很好上手。

HTML

1
2
3
4


<div class="card">
 <h1 id="title">你好，CodePen！</h1>
 <button id="change-btn">點我換文字</button>
</div>

CSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


body {
 margin: 0;
 min-height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 background: #f4f7fb;
 font-family: Arial, sans-serif;
}

.card {
 background: white;
 padding: 32px;
 border-radius: 16px;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 text-align: center;
}

button {
 border: none;
 background: #2563eb;
 color: white;
 padding: 12px 20px;
 border-radius: 10px;
 cursor: pointer;
}

JavaScript

1
2
3
4
5
6


const title = document.getElementById("title");
const button = document.getElementById("change-btn");

button.addEventListener("click", function () {
 title.textContent = "文字被改掉了！";
});

你把這三段分別貼到 CodePen 的區塊裡，就能立刻看到結果。

6. CodePen 和本地開發有什麼差別？

這點很重要。

CodePen 的優點

打開就能寫
適合做小範例
分享超方便
適合學習和展示

CodePen 的限制

不適合大型專案
檔案結構比較簡化
不像真正專案那樣有完整資料夾管理
有些套件和工具鏈整合沒那麼自由

所以你可以這樣理解：

CodePen 很適合「練習」和「展示」，但不適合拿來做完整產品。

7. 什麼時候該用 CodePen？

以下這幾種情況，CodePen 都很適合：

你想快速試一段 CSS 動畫
你想做一個小互動元件
你想把作品丟給朋友或面試官看
你看到別人的範例，想拆開研究
你想整理自己的前端練習作品集

尤其對新手來說，CodePen 最大的價值不是「很酷」，而是：

它讓你更容易開始動手寫。

8. 給新手的使用建議

如果你剛開始學前端，我會建議你這樣用：

小效果、小練習，用 CodePen
完整網站、小專案，用本地開發
做完一個好作品，再把它整理成可分享的 Pen

這樣你既能享受 CodePen 的快速，也不會忽略真正專案的開發流程。

結語：先把「開始寫」這件事變簡單

很多新手不是不會寫，而是每次開始前就先被環境搞得很累。

CodePen 的價值，就在於它把「開始動手」這件事變得非常輕。

你不用先想專案架構、不用先管 build tool，也不用先開很多檔案。
你只要專心回答一個問題：

「我現在想試什麼效果？」

這對前端學習初期非常有幫助。

接下來你可以做什麼？
下一篇我們可以接著介紹 Figma，因為當你開始會切版、做元件之後，你就會發現前端工程師幾乎一定會碰到設計稿，而 Figma 幾乎就是現在的業界標配。

準備好從寫畫面，進一步看懂設計稿了嗎？下一篇見！

新手第五步：JavaScript 入門　給你的網頁加上靈魂！

Fri, 17 Apr 2026 00:00:00 +0000

HTML 決定結構、CSS 決定外觀，但這兩樣東西做出來的網頁是死的——不管使用者怎麼點按鈕，頁面都不會有任何反應。

今天要學的 JavaScript（簡稱 JS），就是讓網頁「活起來」的關鍵！

1. JavaScript 能做什麼？

你每天用到的這些功能，全都是 JavaScript 在背後默默運作：

點按鈕後跳出提示訊息
表單輸入錯誤時出現紅色警告
圖片輪播自動切換
滾動頁面時出現動畫效果
即時搜尋、不刷頁更新內容

簡單說：所有「互動」都是 JavaScript 的工作。

2. JavaScript 寫在哪裡？

和 CSS 一樣，有三種方式，最推薦的是獨立 .js 檔案。

最推薦：獨立 JS 檔案

建立 script.js，然後在 HTML 的 </body> 結尾標籤前引入：

1
2
3
4
5


<body>
 <!-- 你的 HTML 內容 -->

 <script src="script.js"></script>
</body>

為什麼放在 </body> 前面？因為這樣瀏覽器會先把頁面畫出來，再執行 JS，使用者不會看到空白頁面等待。

臨時測試：直接寫在 HTML 裡

1
2
3


<script>
 alert("你好！");
</script>

3. 你的第一行 JavaScript

打開 VS Code，建立 script.js，輸入這一行：

1

console.log("哈囉，JavaScript！");

存檔後，打開瀏覽器，按下 F12 開啟開發者工具，點選 「Console（主控台）」 分頁，你就會看到這行文字出現。

console.log() 是 JS 工程師最常用的工具，就像是「印出來看看」，方便除錯。

4. 變數：存放資料的盒子

寫程式就是在處理「資料」。變數就是用來存放這些資料的盒子。

1
2
3


let name = "小明";
let age = 18;
let isStudent = true;

let：宣告一個可以改變的變數（現代 JS 最常用）
const：宣告一個不能改變的常數（例如 PI、固定設定值）
var：舊版寫法，現在不推薦使用

1
2
3
4


const PI = 3.14159; // 圓周率不會變，用 const

let score = 80; // 分數可能會變，用 let
score = 95; // 改變 score 的值，沒問題

5. 資料型別：變數裡能放什麼？

型別	說明	範例
`String`	文字（用引號包起來）	`"你好"` / `'Hello'`
`Number`	數字（整數或小數）	`42` / `3.14`
`Boolean`	布林值（真或假）	`true` / `false`
`Array`	陣列（一串資料）	`["蘋果", "香蕉", "橘子"]`
`Object`	物件（一組相關資料）	`{ name: "小明", age: 18 }`

6. 函式：可以重複使用的程式積木

當你有一段程式碼需要重複執行，就把它包成函式（Function）。

1
2
3
4
5
6


function greet(name) {
 console.log("你好，" + name + "！歡迎來到我的網站。");
}

greet("小明"); // 你好，小明！歡迎來到我的網站。
greet("阿花"); // 你好，阿花！歡迎來到我的網站。

function 關鍵字：宣告一個函式
name：括號裡的是「參數」，呼叫時帶入不同值
呼叫函式時不用再寫 function，直接寫函式名稱加括號

7. 操作網頁元素：DOM

這才是 JavaScript 最重要的能力！DOM（文件物件模型） 讓你用 JS 讀取或修改網頁上任何元素。

1
2
3
4
5
6
7
8


// 抓取元素
const title = document.getElementById("main-title");

// 修改內容
title.textContent = "標題被 JS 改掉了！";

// 修改樣式
title.style.color = "red";

HTML：

1

<h1 id="main-title">原本的標題</h1>

執行後，頁面上的標題會直接變成「標題被 JS 改掉了！」，變成紅色。

8. 事件監聽：讓網頁回應使用者

光是修改元素還不夠，我們要讓網頁在使用者做某件事時才觸發，這就是「事件監聽」。

1
2
3
4
5


const btn = document.getElementById("my-btn");

btn.addEventListener("click", function() {
 alert("你點了按鈕！");
});

HTML：

1

<button id="my-btn">點我看看</button>

addEventListener 的意思：「監聽 my-btn 這個元素的 click（點擊） 事件，一旦發生，就執行後面這個函式。」

常見的事件類型：

click：點擊
mouseover：滑鼠移入
keydown：按下鍵盤
submit：表單送出

9. 給新手的實戰練習：計數器

來做一個點一下數字就加一的計數器，這個小專案會用到今天學的所有概念！

HTML（index.html）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


<!DOCTYPE html>
<html>
<head>
 <title>計數器</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <div class="counter">
 <h1 id="count">0</h1>
 <button id="increase-btn">＋ 加一</button>
 <button id="reset-btn">重置</button>
 </div>
 <script src="script.js"></script>
</body>
</html>

CSS（style.css）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


body {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 background-color: #f0f4f8;
 font-family: Arial, sans-serif;
}

.counter {
 text-align: center;
}

#count {
 font-size: 80px;
 color: #2c3e50;
 margin: 0;
}

button {
 font-size: 18px;
 padding: 10px 30px;
 margin: 10px;
 cursor: pointer;
 border: none;
 border-radius: 8px;
 background-color: #3498db;
 color: white;
}

button:hover {
 background-color: #2980b9;
}

JavaScript（script.js）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


let count = 0;
const countDisplay = document.getElementById("count");

document.getElementById("increase-btn").addEventListener("click", function() {
 count = count + 1;
 countDisplay.textContent = count;
});

document.getElementById("reset-btn").addEventListener("click", function() {
 count = 0;
 countDisplay.textContent = count;
});

打開瀏覽器，你現在擁有一個有完整互動功能的計數器了！

結語：網頁有靈魂了！

恭喜你學完了前端三劍客的最後一塊拼圖：

HTML — 結構
CSS — 外觀
JavaScript — 互動

這三樣東西組合在一起，你已經具備了做出任何靜態網頁的能力。

接下來你可以做什麼？ 光有這三樣還不夠，現實世界的前端開發都是用框架在加速開發。下一篇我們來聊聊目前最熱門的前端框架 Vue.js，看看它如何讓你寫更少的程式碼、做出更強大的功能！

準備好進入框架的世界了嗎？下一篇見！

新手第六步：Vue.js 入門　前端框架到底在解決什麼問題？

Fri, 17 Apr 2026 00:00:00 +0000

上一篇我們用原生 JavaScript 做了計數器。雖然可以動，但你有沒有發現——當功能一多，程式碼就開始變得雜亂？

這正是前端框架要解決的問題。今天我們來聊聊目前最適合新手入門的框架：Vue.js。

1. 為什麼要用框架？

先想像一個場景：你要做一個購物車頁面，商品數量改了，頁面上的「小計」、「總計」、「結帳按鈕顯示金額」都要跟著更新。

用原生 JS 你要：

抓到「小計」元素，修改它
抓到「總計」元素，修改它
抓到「按鈕」元素，修改它
下次改需求還要重來一遍…

用 Vue.js 你只需要： 修改一個變數，頁面上所有相關顯示自動同步更新。

這個核心概念叫做**「響應式（Reactivity）」**——數據變了，畫面自動跟著變。

2. Vue.js 是什麼？

Vue.js 是一個用 JavaScript 寫的前端框架，由前 Google 工程師尤雨溪（Evan You）在 2014 年創建。

它有幾個讓新手特別喜歡的特點：

學習曲線平緩：和 React 相比，Vue 對新手更友善，語法更接近原生 HTML/JS
文件超完整：官方中文文件寫得非常好，遇到問題查文件通常就能解決
漸進式引入：可以只在部分頁面使用 Vue，不用整個專案重寫

3. 快速體驗 Vue：不需要安裝任何東西

最快的方式是直接用 CDN 引入 Vue，就像引入一個 JS 檔案一樣：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


<!DOCTYPE html>
<html>
<head>
 <title>我的 Vue 練習</title>
</head>
<body>
 <div id="app">
 <h1>{{ message }}</h1>
 <button @click="changeMessage">點我換訊息</button>
 </div>

 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
 <script>
 const { createApp, ref } = Vue;

 createApp({
 setup() {
 const message = ref("你好，Vue！");

 function changeMessage() {
 message.value = "訊息被改掉了！";
 }

 return { message, changeMessage };
 }
 }).mount("#app");
 </script>
</body>
</html>

存檔，打開瀏覽器，你會看到標題寫著「你好，Vue！」，點按鈕後自動變成「訊息被改掉了！」——不需要手動 getElementById，Vue 自動幫你搞定！

4. Vue 的核心概念

模板語法：`{{ }}`

雙大括號是 Vue 的「插值語法」，把變數的值直接顯示在 HTML 裡：

1

<p>你好，{{ name }}！你今年 {{ age }} 歲。</p>

只要 name 或 age 變數的值改變，頁面會自動更新，不需要任何額外操作。

響應式變數：`ref()`

在 Vue 3 裡，用 ref() 建立會「被追蹤」的響應式變數：

1
2
3


const count = ref(0); // 數字
const name = ref("小明"); // 文字
const show = ref(true); // 布林值

修改時要用 .value：

1

count.value = count.value + 1;

但在 HTML 模板裡用 {{ count }} 就好，Vue 自動處理 .value。

事件綁定：`@click`

Vue 用 @ 符號取代原本的 addEventListener，寫起來清爽很多：

1
2
3
4
5
6


<!-- 原生 JS -->
<button id="btn">點我</button>
<script> document.getElementById("btn").addEventListener("click", doSomething) </script>

<!-- Vue 的寫法 -->
<button @click="doSomething">點我</button>

屬性綁定：`v-bind` 或 `:`

想把 JS 變數的值套用到 HTML 屬性上，用 : 綁定：

1
2


<img :src="imageUrl" :alt="imageAlt">
<a :href="linkUrl">點我</a>

條件渲染：`v-if`

根據條件決定要不要顯示某個元素：

1
2


<p v-if="isLoggedIn">歡迎回來！</p>
<p v-else>請先登入。</p>

列表渲染：`v-for`

用來把陣列資料一筆一筆顯示出來：

1
2
3


<ul>
 <li v-for="item in fruits" :key="item">{{ item }}</li>
</ul>

1

const fruits = ref(["蘋果", "香蕉", "橘子"]);

5. 給新手的實戰練習：用 Vue 重做計數器

還記得上一篇用原生 JS 做的計數器嗎？現在用 Vue 來做同樣的功能，感受一下差異：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48


<!DOCTYPE html>
<html>
<head>
 <title>Vue 計數器</title>
 <style>
 body {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 background-color: #f0f4f8;
 font-family: Arial, sans-serif;
 }
 .counter { text-align: center; }
 #count-display { font-size: 80px; color: #2c3e50; margin: 0; }
 button {
 font-size: 18px;
 padding: 10px 30px;
 margin: 10px;
 cursor: pointer;
 border: none;
 border-radius: 8px;
 background-color: #3498db;
 color: white;
 }
 button:hover { background-color: #2980b9; }
 </style>
</head>
<body>
 <div id="app" class="counter">
 <p id="count-display">{{ count }}</p>
 <button @click="count++">＋ 加一</button>
 <button @click="count = 0">重置</button>
 </div>

 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
 <script>
 const { createApp, ref } = Vue;

 createApp({
 setup() {
 const count = ref(0);
 return { count };
 }
 }).mount("#app");
 </script>
</body>
</html>

注意到了嗎？JavaScript 的部分從 10 行縮短到 3 行。Vue 幫你處理了所有「抓元素、更新畫面」的瑣事，你只需要專注在「資料邏輯」本身。

6. Vue vs 原生 JS：什麼時候用哪個？

情境	建議
簡單的互動（一個按鈕、一個動畫）	原生 JS 就夠了
需要管理很多資料狀態的頁面	用 Vue
單頁應用程式（SPA）	強烈建議用 Vue
學習基礎概念	先學原生 JS，再學 Vue

結語：框架是工具，不是魔法

Vue.js 讓你寫更少的程式碼、更快做出功能，但它的底層還是 JavaScript。所以上一篇學的變數、函式、DOM 概念，在 Vue 裡全都用得到。

框架只是幫你把重複的工作自動化，你的 JS 基礎夠紮實，框架學起來就會快很多。

接下來你可以做什麼？ 有了 Vue 的基礎後，下一篇我們要學 Git 版本控制——這是所有工程師都必備的技能，讓你的程式碼永遠有「後悔藥」可以吃，也是團隊協作的核心工具。

準備好學工程師的必備神器了嗎？下一篇見！

JavaScript on EricChung的程式勇者村

新手第十三步：Async / Await 與 API 串接 讓網頁讀取真實世界的資料！

1. 什麼是 API？

2. 同步 vs 非同步：一個讓新手頭痛的概念

同步（Synchronous）

非同步（Asynchronous）

3. Promise：非同步操作的承諾

4. Async / Await：讓非同步程式碼看起來像同步

基本語法

加上錯誤處理

async / await vs .then() 對比

5. fetch API：瀏覽器內建的 HTTP 請求工具

GET 請求（取得資料）

POST 請求（送出資料）

HTTP 方法速查

6. 認識 JSON：API 的通用語言

7. 實戰練習一：串接公開 API 顯示文章列表

8. 實戰練習二：在 Vue 3 + Vite 中串接 API

9. 使用需要 API Key 的服務

10. 常見錯誤與解法

CORS 錯誤

response.json() 失敗

404 / 401 / 500 錯誤

結語：你的網頁現在連接到真實世界了

新手第十五步：React 入門 前端最熱門的框架，到底在紅什麼？

1. React 是什麼？

2. 為什麼前端要用 React？

3. React 在解決什麼問題？

1. 畫面重複利用

2. 資料和畫面同步

3. 大型專案的可維護性

4. React 的 3 個核心觀念

元件（Component）

Props

State

5. 一個最小 React 範例

6. JSX 是什麼？為什麼看起來像 HTML？

7. React vs 原生 JavaScript：差在哪？

原生 JavaScript 的做法

React 的做法

8. React vs Vue：新手該怎麼看？

Vue 的感覺

React 的感覺

那到底學哪個？

9. 給新手的學習順序建議

結語：React 紅不是沒有原因

新手第十六步：CodePen 入門 不用建專案，也能立刻開始寫前端！

1. CodePen 是什麼？

2. CodePen 能做什麼？

3. CodePen 的畫面怎麼看？

4. 為什麼新手很適合先用 CodePen？

5. 一個最簡單的 CodePen 範例

HTML

CSS

JavaScript

6. CodePen 和本地開發有什麼差別？

CodePen 的優點

CodePen 的限制

7. 什麼時候該用 CodePen？

8. 給新手的使用建議

結語：先把「開始寫」這件事變簡單

新手第五步：JavaScript 入門 給你的網頁加上靈魂！

1. JavaScript 能做什麼？

2. JavaScript 寫在哪裡？

最推薦：獨立 JS 檔案

臨時測試：直接寫在 HTML 裡

3. 你的第一行 JavaScript

4. 變數：存放資料的盒子

5. 資料型別：變數裡能放什麼？

6. 函式：可以重複使用的程式積木

7. 操作網頁元素：DOM

8. 事件監聽：讓網頁回應使用者

9. 給新手的實戰練習：計數器

結語：網頁有靈魂了！

新手第六步：Vue.js 入門 前端框架到底在解決什麼問題？

1. 為什麼要用框架？

2. Vue.js 是什麼？

3. 快速體驗 Vue：不需要安裝任何東西

4. Vue 的核心概念

模板語法：{{ }}

新手第十三步：Async / Await 與 API 串接　讓網頁讀取真實世界的資料！

新手第十五步：React 入門　前端最熱門的框架，到底在紅什麼？

新手第十六步：CodePen 入門　不用建專案，也能立刻開始寫前端！

新手第五步：JavaScript 入門　給你的網頁加上靈魂！

新手第六步：Vue.js 入門　前端框架到底在解決什麼問題？

模板語法：`{{ }}`

響應式變數：`ref()`

事件綁定：`@click`

屬性綁定：`v-bind` 或 `:`

條件渲染：`v-if`

列表渲染：`v-for`