在程式中, statements (指述句子) 是一些可以決定程式進展的句子, 每個 statement 是用一些關鍵字 (keywords), 例如 while, for, if...else 等等, 再加上一個特定語法寫出來。
一個 statement 可以是一行文字, 也可以有多行, 若有多行就要用 { 及 } 來指定statement 的範圍。
這三個 statements:
function (設定一個
function)
return (傳回結果)
var (設定變數),
這三項在本書前面已說過, 另在第 1 章說過 comment 的功能, 這實際是一個 comment statement , 使用的是 // 或 /* 及 */ 的符號。
這一節說餘下的 statements:
break continue do...while for for...in
if...else label switch while with
在文稿格式上, 標準的語法是每個 statement 要用 ; 字符來表示終結, 例如:
a=2;
b=3;
c=4;
JavaScript 使用寬鬆語法, 所以也接受一行最後的 [Return] (回位鍵) 作為 statement 的終結, 所以我們可略去 ; 這符號, 但假若你將數個 statement 放在一行, 各 statement 就要用 ; 來表示終結, 例如:
<html> <body>
<script>
a=2; b=3 ;
c=4; //
← 這處有 3 個 statements
document.write("The total sum is " + (
a + b
+ c ) )
</script>
</body> </html>
if...else 是我們最常用的 statement, 有以下標準語法:
每個反應用 { 及 } 來括起屬該反應的一組 statement, 但若反應只有一句 statement, 可以略去這符號, 例如:
if (condition)
statement1 ← condition 是 TRUE 有這反應
else statement2 ← condition
是 FALSE 有這反應
我們略去一些不需要的符號, 特別是在複式 (nesting) 的 statements, 有時可減少錯誤的機會。
我們也可不設定 else 的反應, 若 condition 是 TRUE 就執行隨後的 statement, 若是 FALSE 就沒有反應, 程式繼續下個 statement, 例如:
if (condition)
statement1 ← condition 是 TRUE 有這反應
statement2
在這例子, 若 condition 是 TRUE 就執行 statement1, 然後執行 statement2, 若是FALSE, 就直接執行 statement2。
有關 if...else 的例子, 請看下一節。
有時我們可以使用 if(object/method) 來檢查是否有一個物件或 method 存在, 例如 練習-131 使用 if(document.cookie) 來檢查當時是否已有 cookie 存在, 若有就是 TRUE, 無就是 FALSE。
以下例子是檢查網頁中是否有圖片存在, 有關 document.images[0] 的意思, 請看後面 Array 的一章。
<html> <body>
<script>
if (document.images[0] )
{ alert("Present") }
else { alert("Absent") }
</script>
</body> <html>
以上網頁沒有圖片, 所以 alert 對話盒會顯示 Absent 這字, 假若使用以下的網頁:
<html> <body>
<img src=null.jpg>
<script>
if (document.images[0] )
{ alert("Present") }
else { alert("Absent") }
</script>
</body> <html>
這網頁有圖片存在, 所以 if (document.images[0] ) 是 TRUE, alert 對話盒會顯示 Present 這字。
這個檢查有時也可用來檢查瀏覽器是否有一個內設的 object 或 method, 例如以下的 script:
<script>
if (backward)
{ alert("Present") }
else { alert("Absent") }
</script>
Netscape 有 backward 這 method, 所以這 script 在 Netscape 會有 alert 對話盒顯示 Present 這字。IE 沒有 backward 這 method, 這 script 在 IE 會引致一個提示錯誤的對話盒, 告訴你 backward 是 undefined。
在編寫程式時, 我們很多時需要用文字或流程表來說明程式如何進展, 這說明就是 algorithm (演算法), 這 algorithm 寫得越詳細越好。
Algorithm 就如電影的劇本, 電影開拍前應該將劇本詳細編寫出來, 然後依照劇本來拍攝。編寫程式也是一樣, 在編寫前應該定下一個 algorithm, 然後依這 algorithm 來編寫, 當然我們也可以一路編寫, 一路修正 algorithm。有時一個軟件設計者並不是程式員, 例如一個會計師設計一個會計軟件, 但他不是程式員, 他就要用一個詳細的 algorithm 列出這軟件如何發展, 程式員不懂會計, 但可依這 algorithm 來編寫。
以下的練習是示範 if...else 的操作方式, 這是用對話盒列出兩個數字, 然後要觀看者計算兩個數字的總和, 筆者用以下的 algorithm 說明這程式的進展:
1. 程式開始時, 產生兩個由 0 至 100 的隨機數 (random number), 分別命名為 x 及 y。
2. 網頁開啟後, 自動出現一個 prompt 對話盒, 對話盒上有這指示文字: "What is the sum of x + y ?", x 及 y 分別是上述兩個隨機數。
3. 另網頁中會出現一個按鈕, 按鈕上的文字是 "再玩", 這按鈕有隨後第 (7) 項的用途。
4. 若觀看者在 prompt 對話盒按 [取消], 或不輸入文字就按 [確定], 就會出現一個 alert 對話盒顯示這文字: "You do no calculation!"。
5. 觀看者在對話盒的文字框輸入一個數字, 按 [確定], 若這是正確的答案, 就會出現一個 alert 對話盒, 顯示這文字: "Good, your answer is correct."。
6. 若答案錯誤, 就會出現一個 alert 對話盒, 顯示這文字: "Sorry, your answer is wrong."。
7. 觀看者按 [再玩] 的按鈕, 就會再產生兩個新的隨機數及出現第 (2) 項中說的 prompt 對話盒, 跟住的操作就如第 (4) 至第 (6) 項。
練習-45 if...else statement
在這練習, 你要依照上述的 algorithm來設定一個網頁, 然後看看 if...else 的操作。這練習要使用到 prompt 對話盒的傳回值, 請看 練習-33。
1. 請用瀏覽器開啟示範磁碟中的 ifelse.htm, 這檔案有以下內容:
<html>
<body>
<form>
<input type=button value="再 玩 "
onClick="play(
)" >
</form>
<script>
function play()
{ x=Math.round(Math.random()*100 )
y=Math.round(Math.random()*100 )
entry=prompt("What is the sum of " + x + " and " + y +" ?" ,"")
if(entry==null || entry=="" )
{ alert("You do no calculation! ") }
else { if ( entry == (x + y) )
{ alert("Good, your answer is correct." ) }
else { alert("Sorry, your answer is wrong.") }
}
}
play()
</script>
</body> </html>
2. 網頁開啟後, 你會見到一個 prompt 對話盒, 請輸入正確及錯誤的數字來試驗一下這程式的操作。
3. 請試試不輸入數字就按 [確定], 及試試按 [取消] 的按鈕, 看有什麼反應。
1. 在這例子, 以下兩句產生兩個隨機數:
x=Math.round(Math.random()*100
)
y=Math.round(Math.random()*100 )
這項操作會在 Math object 的一章說明。
2. 產生 prompt 對話盒是以下的一句:
entry=prompt("What is the sum of " + x + " and " + y +" ?" ,"")
當觀看者輸入資料或按 [確定] 及 [取消] 的按鈕, prompt 對話盒就會傳回一個值, 這個值用 entry 這變數來代表。
3. 今次例子有兩個 if...else statements:
4. 第一個 if...else 是檢查 prompt 對話盒是否沒有輸入資料, 請參看 練習-33, 若是 FALSE 就會進行第二個 if...else, 第二個 if...else 是檢查輸入的數值是否正確。
5. 這處你看到複式 if...else 的設定, 即是一個 if...else 內有另一個 if...else statement, 在第 12 章處的 圖 12-1 有更詳細的解說。
while statement 是用來列出一個條件, 這條件是 TRUE 時, 就會一路重複隨後的 statements, 是為 loop (迴圈), 直至條件變為 FALSE 這一個 loop 才停止。
在以下例子, 筆者要造一個如 圖 6-1 的攝氏 (Celsius) 及華氏 (Fahrenheit) 對照表, 由 Celsius 的 0° 開始, 直至 100° , 這程式使用的方式是檢查 Celsius 是否 <=100 (小於或等於 100), 若是 TRUE 就一路進行換算, 若是 FALSE 就停止。
練習-46 while loop
1. 請用瀏覽器開啟示範磁碟中的 while.htm , 這檔案有以下內容:
<html> <body>
<script>
cel=0
fah=0
document.write("<table><tr><td> 攝氏
</td><td> 華氏 </td></tr>")
while(cel
<= 100 )
{ fah = cel
* 9/5 + 32
document.write("<tr><td>", cel
, "</td> <td>", fah
, "</td></tr>")
cel = cel
+ 5
}
document.write("</table>")
</script>
</body> </html>
2. 網頁開啟後, 你應見到畫面有以下換算顯示:
圖 6-1 攝氏與華氏的對照表
1. 這程式用 cel 及 fah 來代表攝氏及華氏, 並先設為 0 ( cel = 0 及 fah = 0 )。
2. 今次例子的 while loop 有以下部份:
3. 今次例子設定的條件是 while(cel <=100), 這是 cel 是否少於或等於 100, 若答案是 TRUE, 瀏覽器會執行隨後的三句。
4. cel 原本是 0, 經第一次的 cel=cel + 5, cel 變為等於 5, 跟住返回 while(cel <=100) , 這是檢查 cel 是否少於或等於 100, 若是 TRUE 就執行隨後的三句, 這會使到 cel 變為 10。
5. 上述迴圈一路重複, 直至 cel 增大至 105, while(cel <=100) 檢查到 cel 大過 100, 就停止這迴圈, 繼續這 script 隨後的句子。
break 是與 while loop 或 for loop 一起使用, 有以下語法:
在一個 while 或 for loop 內, 我們可以放下一個 break 的條件, 就是上述的 condition2, 若這條件是 TRUE, 這 while loop 就會停止, 程式跳離這 while loop 及執行這個 loop 後的句子。
練習-47 使用 break 來中斷一個 while loop
在前個練習的 script, 你看過如何將攝氏轉為華氏, 這處的練習也是使用類似的 script, 但變為美元對換港元, 預設是由 US$1 換算至 US$100, 另在網頁開啟時出現一個 prompt 對話盒, 讓觀看者決定換算到哪處就停止。
1. 請用瀏覽器開啟示範磁碟中的 break.htm , 這檔案有以下內容:
<html> <body>
<script>
stopValue=prompt("預設是由
US$1 轉換到 US$100 \n "
+ "但你可選擇到哪一個幣值就停止。","100")
US =
0
HK = 0
document.write("<table><tr><td> US$
</td><td> HK$
</td></tr>")
while(US <= 100)
{ HK = US
* 7.8
document.write("<tr><td>" , US
, "</td> <td>" , HK
, "</td></tr>")
US = US
+ 1
if ( US > stopValue
) // ← 這是 break statement 設定的條件
break
}
document.write("</table>")
</script>
</body> </html>
2. 網頁開啟後, 你會見到一個 prompt 對話盒, 請你輸入一個小於 100 的數字, 按 [確定], 換算就會進行。
1. 你在對話盒輸入的數值, 會變為 stopValue , 例如輸入 38, stopValue 就是 38。
2. 今次的 break statement 有這設定:
if ( US >
stopValue )
break
這是設定 US 這變數大過 stopValue, 今次的迴圈就停止。
3. 這例子有這類數字出現: 101.39999999999999, 在 18.2-1 的一節會說到如何消除尾後不要的小數位。
break label 是與 if statement 一起使用, 在 if statement 位置之上放下一個 label, 在 if statement 內的一組句子中, 放下一個 break label, 若這 if statement 是 TRUE, 這組句子會執行到 break label 的位置就停下來, 不再繼續, 請看以下例子:
<html> <body> Demonstration <p>
<script> x = 10 y = 10
check1:
if( x==10 )
{ document.write("這是項目一 <br>" )
check2:
if ( y==10 )
{ document.write("這是項目二 <br>")
break check2
document.write("這是項目三 <br>") }
document.write("這是項目四 <br>")
break check1
document.write("這是項目五 ")
}
</script>
</body> </html>
1. label 是一個自訂名稱, 後有 : 的符號, 例如 check1:、check2: , 這名稱不能超過 8 個英文字母。
2. 以這處的 check1: 為例, 若 if(x==10) 是 TRUE, 下方的句子執行至 break check1 的一句就會中止 if(x==10) 的範圍內餘下的句子。(所以 "這是項目五" 這句不會出現。)
3. 這處有另一個 check2: , 留意 break check2 是中止 if(y==10) 的範圍內餘下的句子 (所以 "這是項目三" 這句不會出現), 每個 label 有自己的範圍。
4. 請你自行造出上述的 script, 更改 x 及 y 的數值, 看有什麼結果。
break label 用到的場合不多, 所以你不需太理會這項功能, 因為使用 if...else statement 或其他方法會較為精簡和能達到同樣目地。
do...while loop 與 while loop 不同的是 while loop 在迴圈前檢查一項條件是否 TRUE, 而 do...while loop 則在第一次迴圈後檢查, 若 while loop 第一次檢查就是 FALSE, 迴圈內的程序一次也不進行, do...while loop 的迴圈則最少會進行一次 (因進行了一次迴圈才檢查)。
do...while loop 有以下語法:
練習-48 do...while loop
在這練習, 你要使用 do...while loop 來顯示 x 這數字的變化, 這數字由 20 開始, 每次除 2, 直至數值減至 0.001 以下。
1. 請用瀏覽器開啟示範磁碟中的 dowhile.htm , 這檔案有以下內容:
<html> <body>
<script>
x=20
document.write("The following number falled exponentially: <br>")
do
{ document.write( x + "<br>" )
x = x/2
}
while( x > 0.001 )
</script>
</body> </html>
2. 網頁開啟後會出現一列數字, 請留意到哪一個數字就停止。
在這例子, 你可看到 do...while loop 與 while loop 十分相似, 請你試用 while loop 來寫出以上的例子及造出相同的效果。
for statement 通常是與 incremental operator ( i++ ) 一起使用來設定迴圈的次數, 有以下格式:
這先看以下一個簡單的例子來了解 for loop 的原理。
練習-49 for loop
這練習示範 for loop 的操作, 是在網頁中顯示 Hello 這字, 重複 10 次才停止。
1. 請用瀏覽器開啟示範磁碟中的 for.htm , 這檔案有以下內容:
<html> <body>
<script>
for ( i = 0;
i <= 9;
i = i
+1 )
document.write( "Hello <br>")
</script>
</body> </html>
2. 網頁開啟後, 留意 Hello 這字出現的字數。
1. 在 for(i =0; i <= 9; i = i+1 ) 這句中, i 是我們設定的變數, 可以用任何字母或文字, 例如 for(a=0; a<=9; a=a+1 ) 或 for(time=0; time<=9; time=time+1 ) , 不過一般習慣是用 i (i 代表index)。
2. i=0 是將 i 先設為 0, i<=9 是表示迴圈在 i 小於或等於 9 就會繼續, i=i+1 或 ( i++ ) 表示每迴圈一次, i 就增加 1 , 所以 for( i=0; i<=9; i=i+1 ) 就是迴圈 10 次。
3. 程式員計算次數習慣由 0 開始, 數到 9 就是 10次, 你也可以從 1 開始, 例如 for(i=1; i<=10; i=i+1 ) 。
4. 你可試試以下 script, 更改各數字, 看有什麼結果:
<script>
for( i = 1; i
<= 20; i = i+3
)
document.write( i +
" <br>")
</script>
for statement 實際是精簡了的 while statement, 練習-49 的例子, 我們可以用以下的 while loop 造出來。
<html> <body>
<script>
i = 0
while ( i <= 9
)
{ document.write( "Hello <br>")
i++
}
</script>
</body> </html>
在一般的 JavaScript, 我們很少有機會用到這項功能, 這是用來列出一個 object 內的 property, 然後再在隨後的 statement 中為每一個 property 進行一項工作, 有以下語法:
for ( i
in object )
{ statement }
i 是一個變數名稱, 我們可以任意取名, 例如 a , x , order 等等, 但一般習慣是用 i , 這 i 代表 object 內每一項 property, 隨後是指定要為每一個 property 進行的 statement, 請看以下例子:
<html> <body>
<script>
for ( i in window)
{ document.write( i +
"<br>" ) }
</script>
</body> </html>
for ( i in window) 是指 window 內每一個 property, 若用 Netcape-3, 這會有 closed, document, frames, history . . . . 等共 14 項, 在 Netcape-4 加多了 17 項, 即共有 31 項。
在這例子, i 首先代表 closed, 然後進行 document.write( ), 這會在瀏覽器顯示 closed, 完成這迴圈, 跟住 i 代表 document, 瀏覽器顯示 document, 跟住是 frames, 這操作一路重複, 直至全部項目顯示完畢才停止。
你做出上述網頁, 放在瀏覽器中, 就會看到一列名稱, 請你試試其他 object, 例如 for ( i in document)、for ( i in location) 等等, 看有什麼結果。
使用 object[i] 這個語法, 可以顯示一個 object 內全部 property 的數值, 請看以下例子:
<html> <body>
<script>
for ( i in navigator)
{ document.write( i +
" = " + navigator[i]
+ " <br> " ) }
</script>
</body> </html>
在 Netscape-4, 這網頁有以下顯示:
userAgent = Mozilla/4.03 [en] (Win95; I)
appCodeName = Mozilla
appVersion = 4.03 [en] (Win95; I)
appName = Netscape
language = en
platform = Win32
plugins = [object PluginArray]
mimeTypes = [object MimeTypeArray]
↑ ↑
這是 i
這是 navigator[i]
請你試用其他 object, 例如 for ( i in location) , for ( i in document) 等等, 看有什麼結果。
switch statement 也稱為 switch-case statement, 這是以 case label 的方式列出多個選擇, 每個選擇有預設的反應, 觀看者作哪一個選擇, 瀏覽器就會執行選擇下的反應, 這項功能有以下語法:
switch (choice)
{ case label_1 :
statement ← choice==label_1
有這反應
break
case label_2 :
statement ← choice==label_2
有這反應
break
: :
default :
statement ←
預設反應
}
switch statement 是較為複雜的寫法, 程式員一般較少用, 因使用 if statement 或其他方法會較為方便, 在以下的練習, 你試用其他方法寫出看是否更方便 (例如每個按鈕有一個 function, 或每個按鈕直接叫出 alert 對話盒)。
練習-50 switch-case statement
這練習列出三個選擇, 分別用三個 case 來代表, 觀看者選某一項, 就會有該項下的反應。
1. 請用瀏覽器開啟示範磁碟中的 switch.htm , 這檔案有以下內容:
<html> <body>
<h2> <font color=red> 本周星座運程
</font> </h2> <br>
<form>
請選擇你的星座:
<input type=button value="水瓶座
" onClick="option='水';
display( ) " >
<input type=button value="天蝎座 "
onClick="option='天'
; display( ) "
>
<input type=button value="山羊座
" onClick="option='山'
; display( ) "
>
<input type=button value="不作選擇
" onClick="option=' ' ; display( )
" >
</form>
<script>
function display( )
{
switch(option)
{ case "水" :
alert("這星期不利水瓶座, 事事要小心, \n 避免投資。")
break
case "山" :
alert("這星期你會一切順利, 但投資上不要太急進, "
+ " \n 宜穩守突擊。")
break
case "天" :
alert("這星期你的感情會有小挫折, 萬事宜忍, " + " \n 不要發脾氣。")
break
default:
alert("你信心不足, 要努力工作, 勤力學習, "
+ " \n 放眼世界, 建立自信。")
}
}
</script>
</body> </html>
2. 網頁開啟後, 你會見到四個按鈕, 請你試驗一下各按鈕的反應。
1. label 是一個自訂名稱, 後有 : 的符號, 例如 "水" :、"山" : 等等。label 是文字, 所以要放在 " " 內, 這名稱不能超過 8 個英文字母。
2. 這處使用 switch(option) 來檢查觀看者的選擇, option 是一個變數名稱, 不能超過 8 個英文字母, 觀看者按第一個按鈕, option 就會等於 "水" , 瀏覽器就會找 case "水" : 這一項, 然後執行隨後的 statement, 最後遇到 break 這一句就停止。
3. 我們一般會在 switch-case 最後一項加上 default : 這個預設選項, 若前面的 case 都不是, 就會執行這 default : 的 statement。
前面說過 for loop 及 while loop, 在迴圈時, 若要剔除其中一些迴圈, 可使用這處說的 continue statement, 例如 if(i==3) continue , 這句的意思是當 i 等於 3 就停止這迴圈, 然後繼續下個迴圈。
首先請看以下的 for loop:
<html> <body>
<script>
i = 0
while (i < 10 )
{ i++
document.write(i *2 + "/" )
}
</script>
</body> </html>
這 script 會在螢幕顯示: 2/ 4/ 6/ 8/ 10/ 12/ 14/ 16/ 18/ 20/ 。
假若要剔除其中一個數字, 我們可以刪除該迴圈, 例如以下的 script:
<html> <body>
<script>
i = 0
while (i < 10 )
{ i++
if ( i==3 ) continue // ← 這是不要 i 等於 3 的迴圈
if ( i==7 ) continue // ← 這是不要 i 等於 7 的迴圈
document.write(i *2 + "/" )
}
</script>
</body> </html>
這 script 會在螢幕顯示: 2/ 4/ 8/ 10/ 12/ 16/ 18/ 20/ 。
在 for loop 中使用 continue, 方式也是一樣, 請看以下的 script:
<html> <body>
<script>
for ( i =1; i <= 10; i ++ )
{ if ( i==3 ) continue //← 這是不要 i 等於 3 的迴圈
if ( i==7 ) continue //← 這是不要 i 等於 7 的迴圈
document.write(i *2 + "/ " )
}
</script>
</body> </html>
with 是用來指定一個物件作為預設物件 (default object), 在隨後的一組 statement 中, 若有 property 或 method 無指明是屬於哪一個物件, 就是屬於這預設物件, 語法是:
with(object)
{ statement }
請先看以下例子:
<html> <body>
<script>
document.write("這網頁的背景顏色是: "
+ bgColor + "<br>")
document.write("文字顏色是: " +
fgColor)
</script>
</body> </html>
你用瀏覽器載入這網頁時, 就會出現錯誤的訊息, 因為 bgColor 及 fgColor 這兩個 property 一定要指明屬於哪一個 object, 正確語法是 document.bgColor 及 document.fgColor, 我們也可以用 with(document) 來指定在隨後的 { } 範圍內, 沒有指定物件的 property 或 method, 都是屬於 document 的, 例如:
<html> <body>
<script>
with(document)
{ write("這網頁的背景顏色是: "
+ bgColor + "<br>")
write("文字顏色是: " + fgColor)
}
</script>
</body> </html>
在練習-45, 你看到如何產生隨意數 (random number), 這是使用 Math 這 object 的功能, 例如:
<script>
function play( )
{ x=Math.round(Math.random(
)*100 )
y=Math.round(Math.random(
)*100 )
}
</script>
若有很多 statement 都用到 Math 這 object, 可以使用 with(Math) 這方式來簡化各句子, 例如:
<script>
function play()
{ with(Math)
{ x=round(random()*100 )
y=round(random()*100 )
}
}
</script>