邂逅Javascript

Lesson 4 :  Flow Control 流程控制

什麼時候會用到流程控制?

1.條件判斷

情境:給你一個分數,判斷這個人是否及格

var score = prompt("請輸入分數");
if(score>=60){
    console.log("及格");
}else{
    console.log("你被當了");
}

情境2:除了判斷及格,還要判斷是不是滿分

var score = prompt("請輸入分數");
if(score>=100){
    console.log("你好棒");
}else if(score>=60){
    console.log("及格");
}else{
    console.log("你被當了");
}

情境3:依據輸入提供相對應的輸出

var department = prompt("請輸入系所");
if(department=="哲學"){
    console.log("你們系畢業以後都在幹嘛?");
}else if(department=="心理"){
    console.log("你知道我現在在想什麼嗎?");
}else if(department=="中文"){
    console.log("這個字怎麼寫");
}else if(department=="資工"){
    console.log("可以幫我修電腦嗎?");
}else{
    console.log("請輸入其他系");
}

情境3的另外一種寫法:switch

var department = prompt("請輸入系所");
switch(department){
  case "哲學":
    console.log("你們系畢業以後都在幹嘛?");
    break;
  case "心理":
    console.log("你知道我現在在想什麼嗎?");
    break;
  case "中文":
    console.log("這個字怎麼寫");
    break;
  case "資工":
    console.log("可以幫我修電腦嗎?");
    break;
  default:
    console.log("請輸入其他系");
}

巢狀判斷式(nested if…else statement)

var name = prompt("請輸入姓名");
var score = prompt("請輸入分數");

if(name=="小明"){
  console.log("小明安安");

  if(score>=80){

    //小明是資優生,要求比較高
    console.log("及格");
  }else{
    console.log("不及格");
  }
}else{
  console.log("你是誰");
  if(score>=60){
    console.log("及格");
  }else{
    console.log("不及格");
  }
}

2.重複執行

情境:輸出1~5

var i;
for(i=1;i<=5;i++){
    console.log(i);
}

for(var i=1;i<=5;i++){
    console.log(i);
}

for(初始值;條件;要做的事){
    //do something
}

跟著電腦的邏輯跑一遍

for(var i=0;i<=5;i++){
    console.log(i);
}

初始:i=0
第一圈:i=0, 檢查是否i<=5, 是, i++, 輸出0
第二圈:i=1, 檢查是否i<=5, 是, i++, 輸出1
第三圈:i=2, 檢查是否i<=5, 是, i++, 輸出2
第四圈:i=3, 檢查是否i<=5, 是, i++, 輸出3
第五圈:i=4, 檢查是否i<=5, 是, i++, 輸出4
第六圈:i=5, 檢查是否i<=5, 是, i++, 輸出5
第七圈:i=6, 檢查是否i<=5, 否, 跳出


情境:輸出1~100之間的偶數

for(var i=2;i<=100;i+=2){
    console.log(i);
}

初始:i=2
第一圈:i=2, 檢查是否i<=100, 是, i+=2, 輸出2
第二圈:i=4, 檢查是否i<=100, 是, i+=2, 輸出4
第三圈:i=6, 檢查是否i<=100, 是, i+=2, 輸出6
....


另外一種做法

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

換個方式,輸出10~1

for(var i=10;i>=1;i--){
    console.log(i);
}

第一圈:i=10, 檢查i>=1, 是, i--, 輸出10
第二圈:i=9,  檢查i>=1, 是, i--, 輸出9
....
第十圈:i=1,  檢查i>=1, 是, i--, 輸出1
第十一圈:i=0, 檢查i>=1, 否, 跳出

這種不斷重複執行的程式碼

稱作:迴圈

剛剛的那種for()...的迴圈稱作for loop

還有另外一種迴圈,叫做while loop

情境:輸出1~10

var i = 1;

while(i<=10){
    console.log(i);
    i++;
}

while(條件成立){
    //do something
}

什麼時候會用到?

情境:讓使用者輸入分數並且不斷加總,直到超過100分

var total = 0;
while(total<100){
    var score = prompt("請輸入分數");
    score = parseInt(score, 10);
    total+=score;
}

情境:讓使用者不斷輸入分數,輸出是否及格

當使用者輸入負數時結束程式

var input = 0;
while(input>=0){
    input = prompt("請輸入分數");
    if(input>=60){
        console.log("及格")
    }else{
        console.log("fail");
    }
}

先做事的while loop:do...while

var input = 0;
do{
    input = prompt("請輸入分數");
    if(input>=60){
        console.log("及格")
    }else{
        console.log("fail");
    }
}while(input>=0)

無窮迴圈

while(true){
    //可怕的事情發生了
}

var i = 0;
while(i>=100){
    console.log(i);
}

結論:

  • 知道固定圈數時用for loop
  • 不知道的時候用while loop
  • 有事想先做用do...while

整合練習

範例一

var people = [];
var len = 0;

var score = prompt("請輸入分數");
while(score>=0){
	people[len] = score;
	len++;
	score = prompt("請輸入分數");
};

console.log("一共有"+len+"個人");
for(var i=0;i<len;i++){
	console.log(i + "個人 , 分數是:" + people[i]);
}

範例二

var people = [];
var score = prompt("請輸入分數");
while(score>=0){
	people.push(score);
	score = prompt("請輸入分數");
};

console.log("一共有"+people.length+"個人");
for(var i=0;i<people.length;i++){
	console.log(i + "個人 , 分數是:" + people[i]);
}

範例三:找最大值

var people = [];
var score = prompt("請輸入分數");
while(score>=0){
	people.push(score);
	score = prompt("請輸入分數");
};

var max = -1;
for(var i=0;i<people.length;i++){
	if(people[i]>max){
		max = people[i];
	}
}

console.log("最大值是:"+max);

範例四:巢狀迴圈

for(var i=1;i<=5;i++){
	for(var j=1;j<=5;j++){
		console.log("i="+i+", j="+j);
	}
}

/*
i=1, j=1
i=1, j=2
i=1, j=3
i=1, j=4
i=1, j=5
i=2, j=1
i=2, j=2
...
i=5, j=5
*/

HW #3

1.請輸出九九乘法表

範例:1*1 = 1

           1*2 = 2

           .....

           9*9 = 81

 

HW #3

2.好多星星

讓使用者輸入數字,輸出相對應的圖形

  

//範例,使用者輸入1
*

//使用者輸入2
*
**

//使用者輸入3
*
**
***

//使用者輸入4
*
**
***
****

HW #3

3.找出最小值

讓使用者輸入數字,找出裡面的最小值

  

HW #3 挑戰題

1.好多星星進階版

讓使用者輸入數字,輸出相對應的圖形

  

//範例,使用者輸入1
*

//使用者輸入2
*
**
*

//使用者輸入3
*
**
***
**
*

//使用者輸入4
*
**
***
****
***
**
*

HW #3 超級挑戰題

1.排序,讓使用者輸入數字,輸出排序後的陣列  


//提示

//step 1:讓使用者輸入數字,存到陣列

//step 2:排序
//提示:跟找出最大值有關
//排序不就是不斷找出最大值嗎?

//step 3:輸出陣列

邂逅Javascript - Lesson 4 : Flow Control 流程控制

By huli

邂逅Javascript - Lesson 4 : Flow Control 流程控制

  • 1,333