在前幾天，我們學會了如何監聽使用者的點擊事件。但想像一下，如果你今天要做一個部落格首頁或是電商商品列表，裡面有 20 筆不同的文章或商品，難道我們要傻傻地在 HTML 裡寫 20 次 <div class="card"> 嗎？

如果有一天文章數量變成 500 篇，或者是後端資料更新了，手動複製貼上絕對會讓你崩潰。

今天我們就要來介紹 JavaScript 裡解放雙手的好幫手——迴圈（Loop）！

什麼是迴圈？讓電腦幫你重複做苦工

迴圈的概念非常簡單，就是告訴電腦：「請幫我重複執行這段程式碼，直到次數用完（或條件結束）為止。」

在 JavaScript 裡，最經典也最常用的就是 for 迴圈。它的長相看起來有點像咒語，但拆開來其實很有邏輯：

// 重複執行 5 次的迴圈
for (let i = 0; i < 5; i++) {
    console.log("這是第 " + i + " 次迴圈");
}

把括號裡的三個條件拆開來看：
1. let i = 0：設定一個計數器變數 i 從 0 開始數。
2. i < 5：設定停止條件——「只要 i 小於 5，就繼續跑」。
3. i++：每跑完一次，就把 i 加 1。

結合陣列：把資料庫的清單自動變成畫面

在真實開發中，迴圈最常跟我們前幾天學的陣列（Array）搭配使用。假設我們有一組文章標題的陣列，想把它們自動生成到畫面上：

// 1. 準備一堆文章標題的資料
const articles = [
    "Day 01：前言與心路歷程",
    "Day 02：VS Code 環境設定",
    "Day 03：網頁世界的角色分工",
    "Day 04：HTML 基本骨架"
];

// 2. 用迴圈把陣列裡的資料一筆一筆讀出來
for (let i = 0; i < articles.length; i++) {
    console.log("正在產生存放這篇文章的HTML：" + articles[i]);
}

這就跟在 Figma 裡設計好一個 Card 元件，然後套用資料庫批次帶入內容的概念很像！透過迴圈，我們可以用短短幾行程式碼，動態把成千上萬筆資料一口氣渲染到網頁畫面上。

今日小結束

今天我們學會了用 for 迴圈來處理重複的事情，並且了解如何跟陣列結合，自動生成畫面上的清單。

掌握了迴圈與 DOM 操作後，明天我們要來實際動手做一個小工具——製作一個陽春的 Todo List（待辦事項清單），把前面學到的東西全部串起來！