Web Modern 從 0 開始：讓你第一次懂瀏覽器到底在幹嘛

17th鐵人賽

w0920970270

2025-10-31 21:31:40

96 瀏覽

分享至

Web Modern 從 0 開始：讓你第一次懂瀏覽器到底在幹嘛

TL;DR
Web Modern 不是新的框架，而是「理解現代網頁的思維方式」。
從 HTML → JS → API → 上線，每一層都要「快、穩、安全」。

🧠 什麼是 Web Modern？

用一句話說：
Web Modern = 把舊的網頁思維升級成能跑應用的架構。

過去的網站只有靜態頁面；
現在的網站要能：

跑資料（fetch API）
動畫不卡（async / await）
不當掉（錯誤處理）
上線後可更新（PWA）

🌍 瀏覽器到底怎麼跑你的網頁？

1️⃣ 你打開網址 → 會先連線（DNS、HTTPS）
2️⃣ 瀏覽器拿到 HTML → 開始「邊讀邊畫」畫面
3️⃣ 看到 <script> → 開始跑 JavaScript
4️⃣ JS 去抓資料（fetch API） → 把結果塞進畫面

你可以想像：

HTML 是「骨架」、
CSS 是「衣服」、
JS 是「大腦」。

🧩 第一個 Web Modern 小例子

檔案 1：`index.html`

<!doctype html>
<html lang="zh-Hant">
  <head>
    <meta charset="utf-8">
    <title>Web Modern 初學示範</title>
  </head>
  <body>
    <h1 id="title">Hello 網頁！</h1>
    <button id="btn">按我換句話</button>

    <script type="module" src="main.js"></script>
  </body>
</html>

檔案 2：main.js

const btn = document.getElementById("btn");
const title = document.getElementById("title");

btn.addEventListener("click", () => {
  title.textContent = "這就是 Web Modern！";
});


---

🧱 為什麼這就叫 Web Modern？

1️⃣ 用了 type="module"
→ 代表這是「模組化」的 JS，可以用 import/export 拆檔案。

2️⃣ 不再用 onclick="..." 這種舊式寫法
→ 事件用 addEventListener 維護性更好。

3️⃣ 資料、畫面、邏輯分開
→ HTML 管結構、JS 管行為。


---

⚡ 再加一點資料交換：抓 API

檔案 2：main.js

async function getData() {
  const res = await fetch("https://dummyjson.com/products/1");
  const data = await res.json();
  document.body.innerHTML += `<p>商品：${data.title}</p>`;
}

getData();

📘 解釋：

fetch() 就像去超商取貨。

await 是「等資料回來再繼續」。

.json() 是把資料轉成 JS 能用的格式。



---

🚀 Web Modern 的三大精神

精神	白話定義	小例子

模組化 (Modular)	一個功能一個檔案	api.js 專門負責 fetch
非同步 (Async)	不要讓整個網頁卡住	用 await 處理等待
快取 (Cache)	下次開更快	瀏覽器自動記錄資源



---

🔐 安全與穩定也要懂一點點

CORS：伺服器要允許你抓資料，不然會「跨域錯誤」。

HTTPS：保證傳輸過程不被偷看。

XSS 防護：不要直接用 innerHTML，改用 textContent。


// ❌ 錯誤方式（容易被插入惡意程式）
title.innerHTML = userInput;

// ✅ 正確方式
title.textContent = userInput;


---

🧭 學習方向地圖

週數	主題	重點

Week 1	HTML + JS 基礎	DOM 操作、事件、模組
Week 2	fetch + API	抓資料、顯示結果、錯誤處理
Week 3	上線與安全	Cache、CSP、防 XSS、PWA

---

💡 一句話帶走

> Web Modern 的核心不是框架，而是理解「瀏覽器如何思考」。
當你懂它的思路，Vue、React、Svelte 都只是語法糖。

---

🔑 延伸學習關鍵字

HTML5 / ESM / fetch / async await / DOM / CSP / CORS / PWA / Lighthouse