90
JavaScript語言編程
JavaScript
--2013年10月30日23:10:20
1 變量的定義
雖然JavaScript支持變量未經定義直接使用，但推薦進行變量定義，否則變量的生命周期難以確定。
在定義變量時，因為JavaScript為弱類型語言，所以不需要指定變量類型，隻需要指定變量名稱即可，也可以為變量賦初始值。定義變量時可以使用var關鍵字。
注意：因為JavaScript代碼總是在同一網頁內有效，並不能跨網頁運行，所以也不需要定義類似於Java語言中的訪問修飾符（public、private等）。
JavaScript變量的命名規則與Java相似，隻能包含數字、字母、下畫線和$符號，大小寫敏感，不可以使用JavaScript的關鍵字和保留字。
例07_2.html
1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4. <script type="text/javascript">
5. var a; //定義變量
6. var b = 3; //定義變量並賦初始值
7. var c = 'String', d = "String"; //定義多個變量
8. </script>
9. </head>
10. <body>
11. </body>
12. </html>
7.3.2 變量的類型
雖然不能在定義變量時指定變量類型，但是JavaScript會根據變量的值自動決定類型，JavaScript中常見的內置變量類型如下。
數字型：可以存儲小數或整數。
布爾型：可以存儲true或false。
字符串：屬於引用類型，可以存儲字符串。
數組：屬於引用類型，存儲多項數據。
如果要將字符串轉換為數字類型，可以使用parseInt或parseFloat方法，如果無法轉換為數字，則JavaScript會返回特殊值"NaN（Not a Number）"，如下所示：
例07_3.html
1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4. <script type="text/javascript">
5. var a = 3;
6. var b = "3";
7. var c = a + b; //結果是33
8. var d = a + parseInt(b); //結果是6
9. var e = a + (b - 0); //結果是6
10. var f = parseInt('a'); //結果是NaN
11. </script>
12. </head>
13. <body>
14. </body>
15. </html>
注釋與特殊符號
JavaScript語言中的注釋與Java語言中的注釋規則相同，支持單行注釋（//）與多行注釋（/*…*/），注意不能在JavaScript內部使用HTML語言中的"<!- -->"注釋。在JavaScript中字符串可以使用雙引號或單引號引起來，在不引起衝突的情況下可以混用，也可以使用反斜杠進行轉義，如下例所示：
例07_4.html
1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4. <script type="text/javascript">
5. //a的值為It's mine.
6. var a = "It's mine.";
7. //b的值為he say : "good".
8. var b = 'he say : "good".';
9. //c的值he say : "It's good".
10. var c = 'he say : "It\'s good".';
11. </script>
12. </head>
13. <body>
14. </body>
15. </html>
運算符
運算符與表達式基本與Java相同，常用的運算符如表7-1所示（優先級自上而下）。
表7-1 常用的運算符
|
運算符 |
使用格式 |
描 述 |
|
括號 |
(x)、[x] |
中括號表示數組的下標 |
|
邏輯反 |
!x |
返回與x（布爾值）相反的布爾值 |
|
自加/自減 |
x++、x-- |
x自加、自減1，與Java相同，運算後++或-- |
|
++x、--x |
x自加、自減1，與Java相同，運算前++或-- |
|
|
算術運算符 |
x*y、x/y、x%y |
乘、除、取模 |
|
x+y、x-y |
加、減 |
|
|
比較運算符 |
x<y、x<=y、 x>y、x>=y、 x==y、x!=y x===y |
x與y進行對比，並返回true或false3 其中3個等號（===）表示同時比較值和類型 |
|
邏輯運算符 |
x&&y |
x和y同為true，則返回true，否則返回false |
|
x||y |
x和y任一為true，則返回true，否則返回false |
|
|
條件運算符 |
z?x:y |
表達式z為true，返回x，否則返回y |
|
賦值運算符 |
x=y |
把y賦值給x |
|
符合運算符 |
x+=y x-=y x*=y x/=y x%=y |
x加、減、乘、除、模y，結果賦值給x |
7.4 JavaScript中的流程控製語句（1）
JavaScript語言中的流程控製語句與Java語言中幾乎完全一致，分支流程可以使用if else結構或switch結構，循環流程可以使用for或while循環，具體語法如下。
1．if語句的語法結構
if語句的語法結構如下：
1. if (條件表達式A) {
2. //條件表達式A為true，所執行的代碼塊
3. } else if(條件表達式)B {
4. //條件表達式B為true，所執行的代碼塊
5. } else {
6. // 條件表達式A和條件表達式B都為false，所執行的代碼塊
7. }
2．switch語句的語法結構
switch語句的語法結構如下：
1. switch (表達式) {
2. case 值1 :
3. //表達式與值1匹配時，所執行的代碼塊
4. break;
5. case 值2 :
6. //表達式與值2匹配時，所執行的代碼塊
7. break;
8. default :
9. //所有case值都與表達式不匹配時，所執行的代碼塊
10. }
3．for語句的語法結構
for語句的語法結構如下：
1. for (初始化語句; 循環判斷條件; 循環執行語句) {
2. //循環體
3. }
4．while語句的語法結構
while語句的語法結構如下：
1. while (循環判斷條件) {
2. //循環體
3. }
5．do…while語句的語法結構
do…while語句的語法結構如下：
1. do {
2. //循環體
3. } while (循環判斷條件);
6．綜合演示
下例綜合使用各種流程結構通過JavaScript動態在頁麵中生成一個隔行換色的HTML表格，其中用到了document.write()方法，該方法用於向HTML頁麵中輸出內容。
例07_5.html
1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4. <script type="text/javascript">
5. //rows為表格的行數，cols為表格的列數
6. var rows = 6;
7. var cols = 8;
8. document.write('<table width="100%" border="1">');
9. document.write('<caption>動態生成表格</caption>');
10. document.write('<tbody>');
11. for (var row = 0; row < rows; row++) {
12. if (row % 2 == 0) {
13. document.write('<tr bgcolor="#cccccc">');
14. } else {
15. document.write('<tr>');
16. }
17. for (var col = 0; col < cols; col++) {
18. document.write('<td>' + col + '</td>');
19. }
20. document.write('</tr>');
21. }
22. document.write('</tbody>');
23. document.write('</table>');
24. </script>
25. </head>
26. <body>
27. </body>
28. </html>
執行代碼，結果如圖7-2所示。
|
圖7-2 代碼在IE瀏覽器中的顯示結果 |
JavaScript中的常用方法
JavaScript中提供了很多常用的方法，如上例中用到的document.write方法，現介紹3個用於與用戶交互的方法，如表7-2所示。
表7-2 3個用於與用戶交互的方法
|
方法名 |
作 用 |
參數與返回值 |
|
alert |
顯示消息對話框 |
接收二個字符串參數，用於顯示消息，無返回值 |
|
confirm |
顯示確認對話框 |
接收二個字符串參數，用於顯示提示 消息，返回boolean類型的值，代表用戶的選擇 |
|
prompt |
顯示輸入對話框 |
接收兩個字符串參數，第一個用於顯示 提示消息，第二個用於設置默認值（可省略）， 返回用戶的輸入（如用戶取消輸入返回null） |
請注意這3個方法顯示的對話框都是模態對話框，即會停止當前腳本的運行直到用戶關閉對話框為止，下麵的例子綜合使用了這3個方法
例07_6.html：
1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4. <script type="text/javascript">
5. alert("現在演示alert、confirm與prompt方法");
6. var name = prompt("請輸入您的姓名", "匿名");
7. var flag = confirm("請確認您的姓名：" + name);
8. if (flag) {
9. alert('確認無誤！');
10. } else {
11. alert('確認失敗');
12. }
13. </script>
14. </head>
15. <body>
16. </body>
17. </html>
執行代碼，結果如圖7-4所示。
|
圖7-4 代碼在IE瀏覽器中的顯示結果 |
2．自定義方法
JavaScript語言中的自定義方法與Java語言有較大的不同，第一JavaScript中沒有方法修飾符，所有方法都是本頁麵內可以訪問；第二由於JavaScript是弱類型語言，所以不需要聲明方法的返回值類型；第三JavaScript中的方法不支持重載，但是支持類似於Java中變長參數的特性。定義一個方法的語法如下：
1. function 方法名 ( 參數1, 參數2, … ) {
2. //函數體
3. return 返回值;
4. }
JavaScript中的方法（2）
下例演示了通過定義方法計算兩個數的和：
例07_7.html
1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4. <script type="text/javascript">
5. function add(a, b) {
6. //如果不通過parseInt方法轉換為數字，會進行字符串的連接
7. var c = parseInt(a) + parseInt(b);
8. return c;
9. }
10.
11. var a = prompt("請輸入第一個數", 0);
12. var b = prompt("請輸入第二個數", 0);
13. //請注意變量的作用範圍
14. var c = add(a, b);
15. alert("計算結果是：" + c);
16. </script>
17. </head>
18. <body>
19. </body>
20. </html>
如果想計算不確定數目的若幹個數字的和，就可以使用JavaScript中的一個特殊數組，名為arguments，這個數組用來保存調用方法時傳遞的所有參數，如下例所示：
例07_8.html
1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4. <script type="text/javascript">
5. function add() {
6. //獲取arguments數組的長度
7. var length = arguments.length;
8. var c = 0;
9. for (var i = 0; i < length; i++) {
10. c += parseInt(arguments[i]);
11. }
12. return c;
13. }
14.
15. document.write("<p>無參數 = " + add());
16. document.write("<p>1 = " + add(1));
17. document.write("<p>1,3 = " + add(1,3));
18. document.write("<p>1,3,5 = " + add(1,3,5));
19. document.write("<p>1,3,5,7,9 = " + add(1,3,5,7,9));
20. </script>
21. </head>
22. <body>
23. </body>
24. </html>
執行代碼，結果如圖7-5所示。
|
圖7-5 代碼在IE瀏覽器中的顯示結果 |
JavaScript中的方法（3）
JavaScript中函數的參數還有更靈活的運用方式，如下例所示：
例07_9.html
1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4. <script type="text/javascript">
5. function output(times, char, end) {
6. var s = '';
7. for (var i = 0; i < times; i++) {
8. if (char) {
9. s+=char;
10. } else {
11. s+='*';
12. }
13. }
14. document.write(s);
15. if (end) {
16. document.write(end);
17. } else {
18. document.write("<br/>");
19. }
20. }
21.
22. output(20);
23. output(20, "O");
24. output(20);
25. output(20, "H", "<hr/>");
26. output(20, '<img src="07_8.png"/>', "<hr/>");
27. </script>
28. </head>
29. <body>
30. </body>
31. </html>
執行代碼，結果如圖7-6所示。
|
圖7-6 代碼在IE瀏覽器中的顯示結果 |
注意：因為JavaScript中方法的參數長度是可變的，所以JavaScript並不支持類似於Java語言的方法重載特性。
最後更新：2017-04-03 14:54:00