---
tags: JavaScript,第二章
---
# JavaScript第二章-流程控制
順序結構、分支結構、循環結構
# if
## 定義

if(條件表達式) {
    //執行語句
}

if(3 > 5) {
    alert('沙漠駱駝');
}
if(3 < 5) {
    alert('沙漠駱駝');
}

### 案例一

var age = prompt('請輸入你的年齡: ');
if (age >= 18) {
    alert('我想帶你去網咖');
}

### if 雙分支語句

if(條件表達式) {
    //執行語句1
}    else {
    //執行語句2
}

var age = prompt('請輸入你的年齡: ');
if (age >= 18) {
    alert('我想帶你去網咖');
}    else {
    alert('回家寫作業');
}

### 案例二潤年

var year = prompt('請輸入年份: ');
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
    alert('你輸入的年份是閏年');
}    else {
    alert('你輸入的年份是平年');
}

### if else if 多分支語句

if(條件表達式1) {
    //執行語句1
}    else if (條件表達式2){
    //執行語句2
}    else if (條件表達式3){
    //執行語句3
}    else {
    //最後語句
}
//多選一，不管寫多少條件，最後只會執行其中一種後退出

### 案例三成績

var score = prompt('請輸入分數');
if (score >= 90) {
    alert('A');
}    else if (score >= 80) {
    alert('B');
}    else if (score >= 70) {
    alert('C');
}    else if (score >= 60) {
    alert('D');
}    else {
    alert('E');
}

### 三元表達式

var num = 10;
var result = num > 5 ? '是的' : '不是的';
console.log(result);

if (num > 5) {
    result = '是的';
}    else {
    result = '不是的';
}

### 案例四數字補0

var time = prompt('請輸入1~59的值');
var result = time < 10 ? '0' + time : time;
alert(result);

## switch
### 定義
1.實際開發中，表達式的地方會寫變量名
2.表達式和case必須是全等
3.break不寫會讓程式碼無法停止

switch(表達式) {
    case value1:
        執行語句1;
        break;
    case value2:
        執行語句2;
        break;
    default:
        執行最後的語句;
}

switch(2) {
    case 1:
        console.log('這是1');
        break;
    case 2:
        console.log('這是2');
        break;
    case 3:
        console.log('這是3');
        break;
    default:
        console.log('沒有匹配結果');
}

### 案例

var fruit = prompt('請輸入查詢的水果');
switch (fruit) {
    case '蘋果':
        alert('蘋果的價格是3.5一斤');
        break;
    case '榴槤':
        alert('榴槤的價格是35一斤');
        break;
    default:
        alert('沒有此水果');
}

## for
i就是index
初始循環
1.初始化變量
2.條件表達式
3.循環體
4.操作表達式
後續循環
1.條件表達式
2.循環體
3.操作表達式
最後循環
1.條件表達式false
2.退出

for (初始化變量;條件表達式;操作表達式) {
    //循環體
}

for (var i = 1; i <= 100; i++) {
    console.log('你好嗎');
}

### 斷點測試
按F12鍵
在sources頁籤
選好檔案
在程式碼的行號按一下即可設定斷點
右邊有上下按鈕或是按F11讓程式逐步執行
可在右邊watch欄輸入變量進行即時觀察
### 重複執行相同代碼

var num = prompt('請你輸入次數');
for (var i = 1; i <= num; i++) {
    console.log('天線寶寶說你好');
}

### 重複執行不同代碼

for (var i = 1; i <= 100; i++) {
    console.log('這個人今年' + i + '歲了')
}

for (var i = 1; i <= 100; i++) {
    if(i == 1) {
        console.log(這個人今年1歲，他出生了);
    } else if (i == 100) {
        console.log(這個人今年100歲，他死亡了);
    } else {
        console.log('這個人今年' + i + '歲了')
    }
    
}

### 1~100累加

var sum = 0;
for (var i = 1; i <= 100; i++) {
    sum = sum + 1;
}
console.log(sum);

var sum = 0;
for (var i = 1; i <= 100; i++) {
    sum += i; 
}
console.log(sum);

### 1~100平均值

var sum = 0;
for (var i = 1; i <= 100; i++) {
    sum = sum + 1;
}
console.log(sum);

### 偶數奇數

var even = 0;
var odd = 0;
for (var i = 1; i <= 100; i++) {
    if (i % 2 == 0) {
        even = even + i;
    }else {
        odd = odd + i;
    }
}
console.log(even);
console.log(odd);

### 被3整除

var result = 0;
for (var i = 1; i <= 100; i++) {
    if (i % 3 == 0) {
        result = result +i;
    }
}
console.log(result);

### 案例學生成績

var num = prompt('請輸入班級的總人數');
var sum = 0;
var average = 0;
for (var i = 1; i <= num; i++) {
    var score = prompt('請輸入第' + i + '個學生成績');
    sum = sum + parseFloat(score);
}
average = sum / num;
alert(sum);
alert(average);

### 打印星星

var num = prompt('請輸入星星個數');
    var str = '';
    for(var i = 1; i <= num; i++) {
    str = str +'★';
    }
    console.log(str);

### 雙重for循環

for (var i = 1; i <= 3; i++) {
    console.log('這是外層第' + i + '次');
    for (var j = 1; j <= 3; j++) {
        console.log('這是內層第' + j + '次');
    }
}

### 打印五行五列星星

var str = '';
for (var i = 1; i <= 5; i++) {
    for (var j = 1; j <= 5; j++) {
        str = str + '★';
    }
    str = str + '\n';
}
console.log(str);

### 打印n行n列星星

var rows = prompt('請輸入行數');
var cols = prompt('請輸入列數');
var str = '';
for (var i = 1; i <= rows; i++) {
    for (var j = 1; j <= cols; j++) {
        str = str + '★';
    }
    str = str + '\n';
}
console.log(str);

### 打印倒三角形

var str = '';
for (var i = 1; i <= 10; i++) {
    for (var j = i; j <= 10; j++) {
        str = str + '★';
    }
    str = str + '\n';
}
console.log(str);

### 九九乘法表

var str = '';
for (var i = 1; i <= 9; i++) {
    for (var j = 1; j <= i; j++) {
        str += j + 'x' + i + '=' + j * i + '\t';
    }
    str = str + '\n';
}
console.log(str);

## while
### 定義
條件表達式為true執行循環體
false就跳過不執行

while(條件表達式){
    循環體
}

var num = 1;
while (num <= 100) {
    console.log(你好);
    num++;
}

### 案例一

var i = 1;
while (i <= 100) {
    console.log('這個人今年' + i + '歲了');
    i++;
}

### 案例二

var sum = 0;
var j = 1;
while (j <= 100) {
    sum += j;
    j++;
}
console.log(sum);

### 案例三

var message = prompt('你愛我嗎');
while (message !== '我愛你') {
    message = prompt('你愛我嗎'); 
}
alert('我也愛你');

## do while
### 定義
必定執行一次循環體
接下來才進行判斷

do {
    循環體
} while (條件表達式)

var i = 1;
do {
    console.log('你好嗎');
    i++;
} while (i <= 100)

### 案例一

var i = 1;
do {
    console.log('這個人今年' + i + '歲了');
    i++;
} while (i <= 100) 

### 案例二

var sum = 0;
var j = 1;
do {
    sum += j;
    j++;
} while (j <= 100)
console.log(sum);

### 案例三

do {
    var message = prompt('你愛我嗎');
} while (message !== '我愛你')
alert('我也愛你');

## continue
跳出本次循環，繼續下次循環
### 案例一
吃5個包子，第3個有蟲子，扔掉第3個，繼續吃第4第5個

for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        continue;
    }
    console.log('我正在吃第' + i + '個包子');
}

### 案例二
求1~100之間，除了能被7整除之外的整數和

var sum = 0;
for (var i = 1; i <= 100; i++) {
    if (i % 7 == 0) {
    continue;
    }
    sum += i;
}
console.log(sum);

## break
立刻跳出整個循環
### 案例
吃5個包子，第3個有蟲子，剩下都不吃了

for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        break;
    }
    console.log('我正在吃第' + i + '個包子');
    
}

## 綜合案例ATM

      var money = 0;
      do {
        var atm = prompt('請選擇操作\n1.存錢\n2.取錢\n3.顯示餘額\n4.退出');
        if (atm == 1) {
          var moneyIn = parseInt(prompt('請輸入存入金額'));
          money += moneyIn;
        } else if (atm == 2) {
          var moneyOut = parseInt(prompt('請輸入提取金額'));
          money -= moneyOut;
        } else if (atm == 3) {
          alert(money);
        } else if (atm != 4) {
          alert('沒有這個選項');
        } else {
          alert('謝謝惠顧');
        }
      } while (atm != 4);
      alert('最終金額為' + money);