2-1 埻z

在條件敘述中,最常見的就是 if 敘述,其一般格式如下: If (condition) { … } 在上述格式中,若 condition 的值是 true 或非零,則執行大括號中的程式碼;反之,則不執行。若要在判斷條件不成立時,能夠執行另一段程式碼,則可用 if-else 敘述: If (condition) { statement 1 } else { statement 2 } 在上述格式中,若 condition 的值是 true 或非零,則執行 statement 1;反之,則執行 statement 2。如果在條件成立(或不成立)時,只需執行一個敘述,那就可以省略對應的大括號。例如:

Example(ifElse01.htm):

上述範例可根據使用者輸入的年齡,而回應兩種不同諂媚的話,完整原始檔案如下:

原始檔(ifElse01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>if-else 敘述</h2>
<hr>

<script>
function flatter() {
	var age = prompt("請輸入您的年齡:", 30);
	if (age<30)
		alert("您只有 " + age + " 歲,真是青年才俊啊!");
	else
		alert("您年過30,想必是事業有成了!");
}
</script>
<a href="javascript:flatter()">諂媚的話</>

<hr>
</body>
</html>

若要進行多種條件的比對,則可以反覆使用 if-else 敘述,但是這樣會造成程式碼的雜亂,另一個比較好的方法,則是使用 switch 敘述,例如若要判斷今天是星期幾,並印出相關的訊息,可見下列範例:

Example(switch01.htm):

上述範例的完整原始檔案如下:

原始檔(switch01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>switch 敘述</h2>
<hr>

<script>
today = new Date();	// 取得「今天」的物件
day = today.getDay();	// 取得今天是星期幾
switch (day) {
	case 0:
		document.write("<p>今天是星期天耶,可以睡到12點嘍!");
		break;
	case 1:
		document.write("<p>今天是星期一...GDIM...");
		break;
	case 2:
	case 3:
		document.write("<p>今天是星期二或三,離週末還很遠呢!繼續工作中...");
		break;
	case 4:
		document.write("<p>今天是星期四...星期五為什麼還沒到?");
		break;
	case 5:
		document.write("<p>今天是星期五喔,TGIF!");
		break;
	case 6:
		document.write("<p>今天星期六喔,誰要跟我去血拼?");
		break;
	default:
		document.write("<p>Error!");
}
</script>

<hr>
</body>
</html>

在上面的範例中,day 的值是從 0 到 6,分別代表星期日、星期一、星期二、...、星期六,因此我們可以使用 day 的值,來印出不同的訊息。需要注意的是,switch 會依序比對每一個 case 指令的條件,並在條件滿足後,執行相關的敘述。若需要在符合某個特定條件後就不再比對,此時就要在相關敘述最後面加上 break 敘述。此外,default 之後的敘述,只會在所有條件均不符合時,才會被執行。如果不加上 break,則系統會在符合某一個特定條件後,就執行符合下列其他條件的敘述,產生很奇怪的結果。下列範例和上一個範例完全相同,唯一差別是沒有 break,如下:

Example(switch02.htm):

上述範例的完整原始檔案如下:

原始檔(switch02.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>switch 敘述</h2>
<hr>

<script>
today = new Date();	// 取得「今天」的物件
day = today.getDay();	// 取得今天是星期幾
switch (day) {
	case 0:
		document.write("<p>今天是星期天耶,可以睡到12點嘍!");
		//break;
	case 1:
		document.write("<p>今天是星期一...GDIM (God damned it's Monday)...");
		//break;
	case 2:
	case 3:
		document.write("<p>今天是星期二或三,離週末還很遠呢!繼續工作中...");
		//break;
	case 4:
		document.write("<p>今天是星期四...星期五為什麼還沒到?");
		//break;
	case 5:
		document.write("<p>今天是星期五喔,TGIF (Thank God it's Friday) !");
		//break;
	case 6:
		document.write("<p>今天星期六喔,誰要跟我去血拼?");
		//break;
	default:
		document.write("<p>Error!");
}
</script>

<hr>
</body>
</html>

Hint
以上 switch 的行為,和 C/C++ 中的 switch 是完全相同的。

若是判斷條件較複雜,我們也可以使用「且」、「或」、「否定」等方式來產生複合條件,請見下表:

說明符號
&&
||
否定!

例如,若要判斷是否「a 大於零,或 b 和 c 均不小於零」,可用下列程式碼:

If ((a>0) || (!(b<0) && !(c<0))) { ... }

JScript 也支援隱含的條件形式,稱為條件運算子。首先我們必須將要測試的條件後面加上一個問號,同時也指定兩個選項,第一個用在條件成立時,另一個則用在條件不成立時,這兩個選項之間必須以一個冒號分隔開來,例如,下列範例可以印出現在時間是「上午」還是「下午」:

Example(implicitIf01.htm):

上述範例的完整原始檔案如下:

原始檔(implicitIf01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>條件運算子</h2>
<hr>

<script>
today = new Date();	// 取得「今天」的物件
hour = today.getHours();	// 取得時數
minute = today.getMinutes();	// 取得分數
second = today.getSeconds();	// 取得秒數
prepand = (hour>=12)? "下午":"上午";	// 利用條件運算子來決定是「上午」或「下午」
hour = (hour>=12)? hour-12:hour;	// 利用條件運算子來改成12小時制
document.write("現在時間是"+prepand+hour+"點"+minute+"分"+second+"秒");
</script>

<hr>
</body>
</html>

在條件敘述中,JavaScript 如何判斷一個運算式是 true (真)或 false (偽)呢?其根據的原則如下:

  1. 當運算結果是一個數值時,若此數值等於 0,則是 false,否則就是 true。
  2. 當運算結果是一個字串時,若此字串等於空字串(""),則是 false,否則就是 true。
以下這些範例讓讀者自行參考及推想:

條件敘述判定結果
0false
5true
-3true
""false
"0"true
"00"true
"0.0"true

下列範例印出上述判斷條件的結果:

Example(testIf.htm):

上述範例的完整原始檔案如下:

原始檔(testIf.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>判斷條件的真偽</h2>
<hr>

<script>
condition=0;
document.write("<br>Condition=0 ===> "+(condition?true:false));
condition=5;
document.write("<br>Condition=5 ===> "+(condition?true:false));
condition=-3;
document.write("<br>Condition=-3 ===> "+(condition?true:false));
condition="";
document.write("<br>Condition=\"\" ===> "+(condition?true:false));
condition="0";
document.write("<br>Condition=\"0\" ===> "+(condition?true:false));
condition="00";
document.write("<br>Condition=\"00\" ===> "+(condition?true:false));
condition="0.0";
document.write("<br>Condition=\"0.0\" ===> "+(condition?true:false));
</script>

<hr>
</body>
</html>


JavaScript 程式設計與應用:用於網頁用戶端