一、JavaScript條件語句
在通常的代碼中,我們有一些需要決定執行不同動作,這就可以在代碼中使用條件語句來完成。
下面是我們常使用的條件語句:
- if語句:只有當指定條件是true時,執行條件內代碼。
- if…else語句:當條件為true時執行代碼,當條件為false時執行其它代碼。
- if…else if…else:使用該語句來選擇多個代碼塊之一來執行。
- switch:使用該語句來選擇多個代碼塊之一來執行。
1、if語句
只有當指定條件是true時,執行條件內代碼。
語法:
if(condition){// 當條件為true時執行該區域代碼
}
注意:請使用小寫的if。如果使用了大寫的IF會生成JavaScript錯誤。
實例:
if(time < 20){
x = “Good Day”;
}
即:當time小于20時,才會運行“x = “Good Day”;”代碼。
2、if….else語句
當條件為true時執行代碼,當條件為false時執行其它代碼。
語法:
if(condition){// 當條件為true時執行該區域代碼
} else {//當條件不為true時執行該區域代碼
}
實例:
if (time<20) { x="Good day";
} else { x="Good evening";
}
????????即:當time小于20時,才會運行“x = “Good Day”;”代碼。當time不小于20時,會執行else中代碼“x="Good evening";
”。
3、if….else if….else語句
使用該語句來選擇多個代碼塊之一來執行
語法:
if (condition1) {當條件 1 為 true 時執行的代碼
} else if (condition2) {當條件 2 為 true 時執行的代碼
} else {當條件 1 和 條件 2 都不為 true 時執行的代碼
}
實例:
if (time<10) { document.write("<b>早上好</b>");
} else if (time>=10 && time<20) { document.write("<b>今天好</b>");
} else { document.write("<b>晚上好!</b>");
}
????????即:根據不同時間段,顯示生成不同的問候語,當time小于10點之前,問候語時“早上好”,當time大于等于10 且小于20點時,問候語是“今天好”,當time大于等于20點時,問候語是“晚上好”。
5、switch語句
switch 語句用于基于不同的條件來執行不同的動作。
語法:
switch(n) {case 1: // 執行代碼塊 1
break;
case 2: // 執行代碼塊 2
break;
default: // 非1和2時執行的代碼
}
注意:
設置表達式?n(通常是一個變量)。隨后表達式的值會與結構中的每個 case 的值做比較。如果存在匹配,則與該 case 關聯的代碼塊會被執行。請使用?break?來阻止代碼自動地向下一個 case 運行。
實例:
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body><p>點擊下面的按鈕,會顯示出基于今日日期的消息:</p>
<button onclick="myFunction()">點擊這里</button>
<p id="demo"></p>
<script>
function myFunction()
{var x;var d=new Date().getDay();switch (d){case 6:x="今天是星期六";break;case 0:x="今天是星期日";break;default:x="期待周末";}document.getElementById("demo").innerHTML=x;
}
</script></body>
</html>
二、JavaScript 循環
1、for循環
循環可以使某代碼塊指定循環的次數。
說明:
平時如果我們想打印出cars數組中6個數字,這樣可以寫:
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
但是,你沒發現這樣寫需要寫跟多冗余代碼,且不方便,那么我們可以用循環方式來寫:
for (var i=0;i<cars.length;i++)
{ document.write(cars[i] + "<br>");
}
從中可以看出,代碼簡潔了許多。
for循環的語法:
for (語句 1;?語句 2;?語句 3)
{
????被執行的代碼塊
}
說明:
語句 1?(代碼塊)開始前執行
語句 2?定義運行循環(代碼塊)的條件
語句 3?在循環(代碼塊)已被執行之后執行
實例:
for (var i=0; i<5; i++)
{x=x + "該數字為 " + i + "<br>";
}
執行結果:
該數字為 0
該數字為 1
該數字為 2
該數字為 3
該數字為 4
從上述:
Statement 1 在循環開始之前設置變量 (var i=0)。
Statement 2 定義循環運行的條件(i 必須小于 5)。
Statement 3 在每次代碼塊已被執行后增加一個值 (i++)。
2、for/in循環
?for/in 語句循環遍歷對象的屬性:
var person={fname:"Bill",lname:"Gates",age:56};
var txt = “”;
for (x in person) { // x 為屬性名txt = txt + person[x];
}
輸出結果:
BillGates56
說明:
循環遍歷對象 "person" 的屬性,根據x的屬性名稱,獲取該名稱對應的內容,并賦值。
3、while循環
只要指定條件為 true,循環就可以一直執行代碼塊。
while 循環會在指定條件為true時循環執行代碼塊。
語法:
while (條件)
{
????需要執行的代碼
}
實例:
while (i<5) {x=x + "The number is " + i + "<br>";i++;
}
執行結果:
該數字為 0
該數字為 1
該數字為 2
該數字為 3
該數字為 4
注意:如果您忘記增加條件中所用變量的值,該循環永遠不會結束。這可能導致瀏覽器崩潰。
4、do/while循環
do/while 循環是 while 循環的變體。
該循環會在檢查條件是否為true之前執行一次代碼塊,然后如果條件為true的話,就會重復這個循環。
語法:
do {
????需要執行的代碼
}
while (條件);
實例:
do {x=x + "The number is " + i + "<br>";i++;
}
while (i<5);
執行結果:
該數字為 0
該數字為 1
該數字為 2
該數字為 3
該數字為 4
三、break與continue語句
break 語句用于跳出循環。
continue 用于跳過循環中的一個迭代。
1、break語句
實例:
for (i=0;i<10;i++) {if (i==3) {break;}x=x + "The number is " + i + "<br>";
}
執行結果:
該數字為 0
該數字為 1
該數字為 2
說明:
如果上述實例中不加break語句,那么打印的結果就是0~9了,加上break之后,在i=3時觸發break語句,跳出for循環,所以只打印到2就結束了。
2、continue語句
實例:
for (i=0;i<=10;i++) {
if (i==3) {continue;
}x=x + "The number is " + i + "<br>";
}
輸出結果:
該數字為 0
該數字為 1
該數字為 2
該數字為 4
該數字為 5
該數字為 6
該數字為 7
該數字為 8
該數字為 9
說明:
從結果可以看出,只有i = 3時執行了continue語句,導致跳出了本次循環,但是又不影響下次繼續循環。