iT邦幫忙

2024 iThome 鐵人賽

DAY 7
0
JavaScript

學習網頁的眉眉角角系列 第 7

Day 7 :JavaScript 「控制流程」條件判斷與循環

  • 分享至 

  • xImage
  •  

在前幾天的文章中,學習了如何使用變數和資料型別來儲存和操作資料。今天,將學習JavaScript 中的控制流程,這是讓程式根據不同情況執行不同邏輯的方式。透過控制流程,我們可以讓程式更加靈活,根據使用者的行為或條件來決定接下來的步驟。

  1. 條件判斷(If/Else)
    條件判斷是控制流程中最常見的部分。它可以根據特定條件來執行不同的程式碼片段。在 JavaScript 中,我們使用 if、else if 和 else 來進行條件判斷。

舉例:

let age = 20;

if (age >= 18) {
    console.log("你是成年人");
} else {
    console.log("你還未成年");
}

說明:
在這個範例中,程式會檢查 age 是否大於或等於 18,如果是,則顯示「你是成年人」;否則,顯示「你還未成年」。

你也可以使用 else if 來處理多個條件:

let score = 85;

if (score >= 90) {
    console.log("你得到了A");
} else if (score >= 80) {
    console.log("你得到了B");
} else {
    console.log("繼續加油!");
}
  1. 循環(Loops)
    有時,需要多次重複執行某些操作。這時就可以使用循環來讓程式自動重複執行某段程式碼。JavaScript 有兩種常見的循環:for 和 while。

-For 循環
當我們知道需要重複的次數時,可以使用 for 循環。

舉例:

for (let i = 0; i < 5; i++) {
    console.log("這是第 " + (i+1) + " 次執行");
}

說明:
這個 for 循環會執行 5 次,並在每次執行時輸出當前次數。i 是循環變數,從 0 開始,直到小於 5 結束。

-While 循環
當我們不知道確切的重複次數,但只要條件成立就繼續執行時,可以使用 while 循環。

舉例:

let count = 0;

while (count < 3) {
    console.log("這是第 " + (count+1) + " 次執行");
    count++;
}

說明:
這個 while 循環會在 count 小於 3 時持續執行,直到條件不再成立為止。

  1. 控制循環的進階操作
    有時,我們需要在循環中跳過某些特定的次數,或是提前結束循環。這時可以使用 break 和 continue 來控制循環的流程。

break:提前結束循環。
continue:跳過當前的迴圈,繼續執行下一次。

舉例:

for (let i = 0; i < 5; i++) {
    if (i === 3) {
        break; // 當 i 等於 3 時,提前結束循環
    }
    console.log(i);
}

for (let i = 0; i < 5; i++) {
    if (i === 3) {
        continue; // 跳過當 i 等於 3 的那次執行
    }
    console.log(i);
}

總結
今天,學習了 JavaScript 中的條件判斷和循環這兩個重要的控制流程。透過這些控制結構,程式可以根據不同的條件來做出不同的反應,或是自動重複某些動作。接下來,我將繼續探討更多關於 JavaScript 的進階功能,讓程式變得更加有趣和實用。


上一篇
JavaScript 基本語法:變數與資料型別
下一篇
Day 8 : JavaScript 「函式」重複使用程式碼的關鍵
系列文
學習網頁的眉眉角角17
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言