JavaScript 入門教學（三）：非同步程式設計（Promise、async/await 與 fetch）

前兩篇我們學會了 JavaScript 的基礎語法，以及如何用 DOM 與事件讓網頁互動。但在實際開發中，網頁常常需要「等待」某些事情完成，例如向伺服器要資料、讀取檔案、等待計時器。這一篇要介紹的就是處理等待的方法：非同步程式設計，包括 Promise、async/await 與 fetch。

一、同步與非同步

JavaScript 一次只能做一件事（單執行緒）。如果每個動作都要等前一個做完，遇到需要等待的工作，整個網頁就會卡住。因此，耗時的工作會被丟到一旁等待，其他程式碼先繼續執行，這就是非同步。

先看一個經典的例子，請猜猜輸出順序：

console.log("1. 開始");

setTimeout(function () {
  console.log("2. 兩秒後執行");
}, 2000);

console.log("3. 結束");

實際輸出順序是：1 → 3 → 2。setTimeout 把工作交給瀏覽器計時，JavaScript 不會停下來等它，而是先執行後面的程式碼，時間到了再回頭執行回呼函式（callback）。

二、回呼地獄（Callback Hell）

早期處理非同步只能靠回呼函式。當多個非同步動作需要依序執行時，程式碼會一層包一層，難以閱讀與維護：

setTimeout(function () {
  console.log("步驟 1 完成");
  setTimeout(function () {
    console.log("步驟 2 完成");
    setTimeout(function () {
      console.log("步驟 3 完成");
    }, 1000);
  }, 1000);
}, 1000);

為了解決這個問題，ES6 引進了 Promise。

三、Promise

Promise 代表「一個未來才會完成的結果」，就像餐廳給你的取餐號碼牌：現在還沒有餐點，但保證之後會通知你成功或失敗。它有三種狀態：

狀態	說明
pending	等待中，尚未有結果
fulfilled	成功完成
rejected	失敗

JavaScript 入門教學（二）：DOM 操作與事件處理

上一篇我們學會了變數、函式與流程控制，但程式只在 Console 裡執行，網頁本身並不會有任何變化。這一篇要學的是 JavaScript 與網頁互動的關鍵：DOM 操作與事件處理。學會之後，你就能做出按鈕點擊、表單驗證、動態新增內容等功能。

一、什麼是 DOM？

DOM（Document Object Model，文件物件模型）是瀏覽器把 HTML 轉換成的「樹狀結構」。每一個標籤都是樹上的一個節點，JavaScript 可以透過 DOM 讀取或修改網頁的內容、樣式與結構。

document
 └─ html
     ├─ head
     │   └─ title
     └─ body
         ├─ h1
         └─ p

在 JavaScript 中，document 物件就是進入這棵樹的入口。

二、選取元素

要操作元素，必須先「找到」它。現代寫法建議使用 querySelector 與 querySelectorAll，語法與 CSS 選擇器相同：

// 選取第一個符合的元素
const title = document.querySelector("h1");
const box   = document.querySelector("#box");        // 以 id 選取
const item  = document.querySelector(".item");       // 以 class 選取

// 選取所有符合的元素（回傳 NodeList，可用 for...of 或 forEach 走訪）
const items = document.querySelectorAll(".item");
items.forEach(el => console.log(el.textContent));

方法	回傳結果
querySelector(選擇器)	第一個符合的元素，找不到為 null
querySelectorAll(選擇器)	所有符合的元素（NodeList）
getElementById(id)	指定 id 的元素

JavaScript 入門教學（一）：變數、資料型態、函式與流程控制

JavaScript 是網頁世界最重要的程式語言之一，從按鈕互動、表單驗證到前後端應用都離不開它。這篇文章帶你從零開始，認識 JavaScript 的四個核心基礎：變數、資料型態、函式、流程控制。每個範例都能直接複製到瀏覽器執行。

一、如何執行 JavaScript？

最快的方式是使用瀏覽器的開發者工具：按下 F12，切換到「Console（主控台）」，輸入程式碼後按 Enter 即可。也可以寫在 HTML 檔案中：

<!DOCTYPE html>
<html lang="zh-Hant">
<body>
  <h1>Hello JavaScript</h1>
  <script>
    console.log("Hello, JavaScript!");
    alert("歡迎來到 JavaScript 的世界");
  </script>
</body>
</html>

console.log() 會把內容輸出到 Console，是除錯時最常用的工具。

二、變數：let、const 與 var

變數就像貼了標籤的盒子，用來存放資料。現代 JavaScript 建議使用 let 與 const：

let score = 80;        // 可以重新指定的變數
score = 90;            // OK

const name = "小明";   // 常數，不可重新指定
// name = "小華";      // 會出現錯誤！

console.log(name, score);

關鍵字	可重新指定	作用範圍	建議
const	否	區塊（block）	預設使用
let	是	區塊（block）	需要改值時使用
var	是	函式（function）	舊寫法，盡量避免