迴圈 (for, while)
迴圈（loop）用來重複執行一段程式碼，直到條件不成立為止。常見有三種：
for：已知「執行次數」時最直覺
while：只要條件為真就一直跑
do…while：至少執行一次，再檢查條件

觀念核心：三要素 = 初始值（從哪開始）、條件（何時停）、遞增/遞減（每步怎麼變）

1. for 迴圈
2. while 迴圈
3. do…while：至少跑一次，不管條件是否成立，先執行一次，再檢查條件。
4. break 與 continue

• break：立刻結束整個迴圈
• continue：跳過本輪剩下的程式，直接進下一輪

5. for…of 與 for…in

• for…of：走訪「可迭代」資料（陣列、字串）。拿的是值
• for…in：走訪「物件的鍵」。拿的是鍵名
  實作在網頁上（不是只有 Console）

可以把結果「渲染到頁面上」看看效果：

<div id="app"></div>
<script>
  let html = "<h3>最新文章：</h3><ul>";
  const posts = ["Flexbox 入門", "Grid 佈局", "JavaScript 迴圈"];
  for (let i = 0; i < posts.length; i++) {
    html += `<li>${i+1}. ${posts[i]}</li>`;
  }
  html += "</ul>";
  document.getElementById("app").innerHTML = html;
</script>

：

🔹小練習

1. 動態產生清單

<div id="list"></div>

<script>
const fruits = ["蘋果", "香蕉", "葡萄"];
let html = "<ul>";

for (let i = 0; i < fruits.length; i++) {
  html += `<li>${fruits[i]}</li>`;
}

html += "</ul>";
document.getElementById("list").innerHTML = html;
</script>

2. 建立多個按鈕並加功能

<div id="btnArea"></div>

<script>
for (let i = 1; i <= 3; i++) {
  let btn = document.createElement("button");
  btn.innerText = "按鈕 " + i;

  btn.onclick = function() {
    alert("你點了按鈕 " + i);
  };

  document.getElementById("btnArea").appendChild(btn);
}
</script>