iT邦幫忙

2025 iThome 鐵人賽

DAY 29
0
Modern Web

從骨架到靈魂:網頁構成三部曲系列 第 29

Day - 29 迴圈控制(for & while)

  • 分享至 

  • xImage
  •  

迴圈控制:在滿足特定條件的情況下,重複執行指定的程式區塊。常見的指令有 for, while 等。

1.for 迴圈

for迴圈是最常用的迴圈,特別適合用在「重複次數非常明確」的場合

語法格式:

for (let 變數 = 初始值; 變數 <= 結束值; 變數 = 變數 + 1) {
  // 要執行的程式
}

範例:

<script>
  for (let i = 1; i <= 3; i++) {
    document.write("第 " + i + " 次:Hello, JavaScript!<br>");
  }
</script>

最後結果:
第 1 次:Hello, JavaScript!
第 2 次:Hello, JavaScript!
第 3 次:Hello, JavaScript!

程式碼說明:
1.初始設定 → i = 1
2.條件判斷 → 檢查 i <= 3 是否成立
在每一次迴圈開始前,會檢查這個條件是否成立
如果 i 的值小於或等於 3(條件為 true),就會執行迴圈內的程式碼
如果 i 的值大於 3(條件為 false),迴圈就會結束
3.執行程式 → 輸出文字
4.更新變數 → i++
5.重複直到條件為 false 為止

2.while 迴圈

while 迴圈則更適合「重複次數不確定」的情況,只要條件為真 (true),就會不斷執行

重點提醒:
在 while 迴圈內部,必須要有能讓判斷條件最終變為 false 的程式碼 (例如 i++),否則會導致無限迴圈

語法格式:

while (條件判斷) {
  // 要重複執行的程式碼...
}

範例:

<script>
  let total = 0; // 投入金額
  while (total < 30) {
    document.write("目前投入:" + total + " 元,請繼續投幣。<br>");
    total += 10; // 每次投入 10 元
  }
  document.write("金額已達 30 元,可以購買飲料了!<br>");
</script>

最後結果:
目前投入:0 元,請繼續投幣。
目前投入:10 元,請繼續投幣。
目前投入:20 元,請繼續投幣。
金額已達 30 元,可以購買飲料了!

程式碼說明:
1.宣告變數 total = 0,表示目前投入金額為 0 元
2.檢查條件 total < 30,如果成立,就執行大括號 {} 內的程式。
3.顯示目前投入的金額,例如「目前投入:0 元」。
4.讓 total 增加 10(也就是每次多投 10 元)。
5.回到第 2 步,再次檢查條件。
6.當 total 變成 30 時,條件不成立,跳出迴圈。
7.最後輸出「金額已達 30 元,可以購買飲料了!」


上一篇
Day - 28 條件控制if
系列文
從骨架到靈魂:網頁構成三部曲29
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言