JavaScript簡介及使用
一、簡介
二、JavaScript 使用
HTML 中的腳本必須位於 <script> 與 </script> 標簽之間。
腳本可被放置在 HTML 頁面的 <body> 和 <head> 部分中。
<script> 標簽
如需在 HTML 頁面中插入 JavaScript，請使用 <script> 標簽。
<script> 和 </script> 會告訴 JavaScript 在何處開始和結束。
<script> 和 </script> 之間的代碼行包含了 JavaScript：
1 <script> 2 alert("My First JavaScript"); 3 </script>
瀏覽器會解釋並執行位於 <script> 和 </script> 之間的 JavaScript。
那些老舊的實例可能會在 <script> 標簽中使用 type="text/javascript"。現在已經不必這樣做了。JavaScript 是所有現代瀏覽器以及 HTML5 中的默認腳本語言。
<body> 中的 JavaScript
在本例中，JavaScript 會在頁面加載時向 HTML 的 <body> 寫文本：
實例：
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <p> 6 JavaScript 能夠直接寫入 HTML 輸出流中： 7 </p> 8 9 <script> 10 document.write("<h1>This is a heading</h1>"); 11 document.write("<p>This is a paragraph.</p>"); 12 </script> 13 14 <p> 15 您只能在 HTML 輸出流中使用 <strong>document.write</strong>。 16 如果您在文檔已加載后使用它（比如在函數中），會覆蓋整個文檔。 17 </p> 18 19 </body> 20 </html>
JavaScript 函數和事件：
上面例子中的 JavaScript 語句，會在頁面加載時執行。
通常，我們需要在某個事件發生時執行代碼，比如當用戶點擊按鈕時。
如果我們把 JavaScript 代碼放入函數中，就可以在事件發生時調用該函數。
<head> 或 <body> 中的 JavaScript
您可以在 HTML 文檔中放入不限數量的腳本。
腳本可位於 HTML 的 <body> 或 <head> 部分中，或者同時存在於兩個部分中。
通常的做法是把函數放入 <head> 部分中，或者放在頁面底部。這樣就可以把它們安置到同一處位置，不會干擾頁面的內容。
<head> 中的 JavaScript 函數
在本例中，我們把一個 JavaScript 函數放置到 HTML 頁面的 <head> 部分。
該函數會在點擊按鈕時被調用：
實例：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <script> 6 function myFunction() 7 { 8 document.getElementById("demo").innerHTML="My First JavaScript Function"; 9 } 10 </script> 11 </head> 12 13 <body> 14 15 <h1>My Web Page</h1> 16 17 <p id="demo">A Paragraph</p> 18 19 <button type="button" onclick="myFunction()">Try it</button> 20 21 </body> 22 </html>
提示：我們把 JavaScript 放到了頁面代碼的底部，這樣就可以確保在 <p> 元素創建之后再執行腳本。
外部的 JavaScript
也可以把腳本保存到外部文件中。外部文件通常包含被多個網頁使用的代碼。
外部 JavaScript 文件的文件擴展名是 .js。
如需使用外部文件，請在 <script> 標簽的 "src" 屬性中設置該 .js 文件：
實例：
1 <!DOCTYPE html> 2 <html> 3 <body> 4 <script src="myScript.js"></script> 5 </body> 6 </html>
在 <head> 或 <body> 中引用腳本文件都是可以的。實際運行效果與您在 <script> 標簽中編寫腳本完全一致。
提示：外部腳本不能包含 <script> 標簽。
三、JavaScript 輸出
操作 HTML 元素
如需從 JavaScript 訪問某個 HTML 元素，您可以使用 document.getElementById(id) 方法。
請使用 "id" 屬性來標識 HTML 元素：
例子
通過指定的 id 來訪問 HTML 元素，並改變其內容：
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <h1>My First Web Page</h1> 6 7 <p id="demo">My First Paragraph</p> 8 9 <script> 10 document.getElementById("demo").innerHTML="My First JavaScript"; 11 </script> 12 13 </body> 14 </html>
JavaScript 由 web 瀏覽器來執行。在這種情況下，瀏覽器將訪問 id="demo" 的 HTML 元素，並把它的內容（innerHTML）替換為 "My First JavaScript"。
寫到文檔輸出
下面的例子直接把 <p> 元素寫到 HTML 文檔輸出中：
實例：
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <h1>My First Web Page</h1> 6 7 <script> 8 document.write("<p>My First JavaScript</p>"); 9 </script> 10 11 </body> 12 </html>
警告
請使用 document.write() 僅僅向文檔輸出寫內容。
如果在文檔已完成加載后執行 document.write，整個 HTML 頁面將被覆蓋：
實例：
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <h1>My First Web Page</h1> 6 7 <p>My First Paragraph.</p> 8 9 <button onclick="myFunction()">點擊這里</button> 10 11 <script> 12 function myFunction() 13 { 14 document.write("糟糕！文檔消失了。"); 15 } 16 </script> 17 18 </body> 19 </html>
四、JavaScript 語句
JavaScript 語句
JavaScript 語句向瀏覽器發出的命令。語句的作用是告訴瀏覽器該做什么。
下面的 JavaScript 語句向 id="demo" 的 HTML 元素輸出文本 "Hello World"：
document.getElementById("demo").innerHTML="Hello World";
分號 ;
分號用於分隔 JavaScript 語句。
通常我們在每條可執行的語句結尾添加分號。
使用分號的另一用處是在一行中編寫多條語句。
提示：您也可能看到不帶有分號的案例。
在 JavaScript 中，用分號來結束語句是可選的。
JavaScript 代碼
JavaScript 代碼（或者只有 JavaScript）是 JavaScript 語句的序列。
瀏覽器會按照編寫順序來執行每條語句。
本例將操作兩個 HTML 元素：
實例：
document.getElementById("demo").innerHTML="Hello World";
document.getElementById("myDIV").innerHTML="How are you?";
JavaScript 代碼塊
JavaScript 語句通過代碼塊的形式進行組合。
塊由左花括號開始，由右花括號結束。
塊的作用是使語句序列一起執行。
JavaScript 函數是將語句組合在塊中的典型例子。
下面的例子將運行可操作兩個 HTML 元素的函數：
實例：
1 function myFunction() 2 { 3 document.getElementById("demo").innerHTML="Hello World"; 4 document.getElementById("myDIV").innerHTML="How are you?"; 5 }
JavaScript 對大小寫敏感。
JavaScript 對大小寫是敏感的。
當編寫 JavaScript 語句時，請留意是否關閉大小寫切換鍵。
函數 getElementById 與 getElementbyID 是不同的。
同樣，變量 myVariable 與 MyVariable 也是不同的。
空格
JavaScript 會忽略多余的空格。您可以向腳本添加空格，來提高其可讀性。下面的兩行代碼是等效的：
var name="Hello"; var name = "Hello";
對代碼行進行折行
您可以在文本字符串中使用反斜杠對代碼行進行換行。下面的例子會正確地顯示：
document.write("Hello \
World!");
不過，不能像這樣折行：
document.write \
("Hello World!");
提示：JavaScript 是腳本語言。瀏覽器會在讀取代碼時，逐行地執行腳本代碼。而對於傳統編程來說，會在執行前對所有代碼進行編譯。
五、JavaScript 注釋
JavaScript 注釋
JavaScript 不會執行注釋。
我們可以添加注釋來對 JavaScript 進行解釋，或者提高代碼的可讀性。
單行注釋以 // 開頭。
例子
下面的例子使用單行注釋來解釋代碼：
1 // 輸出標題： 2 document.getElementById("myH1").innerHTML="Welcome to my Homepage"; 3 // 輸出段落： 4 document.getElementById("myP").innerHTML="This is my first paragraph.";
JavaScript 多行注釋
多行注釋以 /* 開始，以 */ 結尾。
下面的例子使用多行注釋來解釋代碼：
例子：
1 /* 2 下面的這些代碼會輸出 3 一個標題和一個段落 4 並將代表主頁的開始 5 */ 6 document.getElementById("myH1").innerHTML="Welcome to my Homepage"; 7 document.getElementById("myP").innerHTML="This is my first paragraph.";
在行末使用注釋
在下面的例子中，我們把注釋放到代碼行的結尾處：
例子：
var x=5; // 聲明 x 並把 5 賦值給它 var y=x+2; // 聲明 y 並把 x+2 賦值給它
六、JavaScript 變量
JavaScript 變量
與代數一樣，JavaScript 變量可用於存放值（比如 x=2）和表達式（比如 z=x+y）。
變量可以使用短名稱（比如 x 和 y），也可以使用描述性更好的名稱（比如 age, sum, totalvolume）。
- 變量必須以字母開頭
- 變量也能以 $ 和 _ 符號開頭（不過我們不推薦這么做）
- 變量名稱對大小寫敏感（y 和 Y 是不同的變量）
提示：JavaScript 語句和 JavaScript 變量都對大小寫敏感。
實例：
var x=2; var y=3; var z=x+y; a=123
注：var表示局部變量，沒有則表示全局變量
JavaScript 數據類型
JavaScript 變量還能保存其他數據類型，比如文本值 (name="Bill Gates")。
在 JavaScript 中，類似 "Bill Gates" 這樣一條文本被稱為字符串。
JavaScript 變量有很多種類型，但是現在，我們只關注數字和字符串。
當您向變量分配文本值時，應該用雙引號或單引號包圍這個值。
當您向變量賦的值是數值時，不要使用引號。如果您用引號包圍數值，該值會被作為文本來處理。
例子：
1 var pi=3.14; 2 var name="Bill Gates"; 3 var answer='Yes I am!';
一條語句，多個變量
您可以在一條語句中聲明很多變量。該語句以 var 開頭，並使用逗號分隔變量即可：
var name="Gates", age=56, job="CEO";
Value = undefined
在計算機程序中，經常會聲明無值的變量。未使用值來聲明的變量，其值實際上是 undefined。
在執行過以下語句后，變量 carname 的值將是 undefined：
var carname;
重新聲明 JavaScript 變量
如果重新聲明 JavaScript 變量，該變量的值不會丟失：
在以下兩條語句執行后，變量 carname 的值依然是 "Volvo"：
var carname="Volvo"; var carname;
七、JavaScript 數據類型
字符串、數字、布爾、數組、對象、Null、Undefined
JavaScript 擁有動態類型
JavaScript 擁有動態類型。這意味着相同的變量可用作不同的類型：
實例：
var x // x 為 undefined var x = 6; // x 為數字 var x = "Bill"; // x 為字符串
JavaScript 字符串
字符串是存儲字符（比如 "Bill Gates"）的變量。
字符串可以是引號中的任意文本。您可以使用單引號或雙引號：
實例：
var carname="Bill Gates"; var carname='Bill Gates';
您可以在字符串中使用引號，只要不匹配包圍字符串的引號即可：
實例:
var answer="Nice to meet you!"; var answer="He is called 'Bill'"; var answer='He is called "Bill"';
JavaScript 數字
JavaScript 只有一種數字類型。數字可以帶小數點，也可以不帶：
實例；
var x1=34.00; //使用小數點來寫 var x2=34; //不使用小數點來寫
極大或極小的數字可以通過科學（指數）計數法來書寫：
實例:
var y=123e5; // 12300000 var z=123e-5; // 0.00123
JavaScript 布爾
布爾（邏輯）只能有兩個值：true 或 false。
var x=true var y=false
JavaScript 數組
下面的代碼創建名為 cars 的數組：
var cars=new Array(); cars[0]="Audi"; cars[1]="BMW"; cars[2]="Volvo";
或者 (condensed array):
var cars=new Array("Audi","BMW","Volvo");
或者 (literal array):
var cars=["Audi","BMW","Volvo"];
數組下標是基於零的，所以第一個項目是 [0]，第二個是 [1]，以此類推。
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <script> 6 var i; 7 var cars = new Array(); 8 cars[0] = "Audi"; 9 cars[1] = "BMW"; 10 cars[2] = "Volvo"; 11 12 for (i=0;i<cars.length;i++) 13 { 14 document.write(cars[i] + "<br>"); 15 } 16 </script> 17 18 </body> 19 </html>
JavaScript 對象
對象由花括號分隔。在括號內部，對象的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗號分隔：
var person={firstname:"Bill", lastname:"Gates", id:5566};
上面例子中的對象 (person) 有三個屬性：firstname、lastname 以及 id。
空格和折行無關緊要。聲明可橫跨多行：
1 var person={ 2 firstname : "Bill", 3 lastname : "Gates", 4 id : 5566 5 };
對象屬性有兩種尋址方式：
實例:
name=person.lastname;
name=person["lastname"];
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <script> 6 var person={ 7 firstname : "Bill", 8 lastname : "Gates", 9 id : 5566 10 }; 11 document.write(person.lastname + "<br />"); 12 document.write(person["id"] + "<br />"); 13 </script> 14 15 </body> 16 </html>
Undefined 和 Null
Undefined 這個值表示變量不含有值。
可以通過將變量的值設置為 null 來清空變量。
實例:
cars=null; person=null;
聲明變量類型
當您聲明新變量時，可以使用關鍵詞 "new" 來聲明其類型：
1 var carname=new String; 2 var x= new Number; 3 var y= new Boolean; 4 var cars= new Array; 5 var person= new Object;
JavaScript 變量均為對象。當您聲明一個變量時，就創建了一個新的對象。
八、JavaScript 對象
JavaScript 中的所有事物都是對象：字符串、數字、數組、日期，等等。
在 JavaScript 中，對象是擁有屬性和方法的數據。
屬性和方法
屬性是與對象相關的值。
方法是能夠在對象上執行的動作。
舉例：汽車就是現實生活中的對象。
汽車的屬性：
1 car.name=Fiat 2 3 car.model=500 4 5 car.weight=850kg 6 7 car.color=white
汽車的方法：
1 car.start() 2 3 car.drive() 4 5 car.brake()
汽車的屬性包括名稱、型號、重量、顏色等。
所有汽車都有這些屬性，但是每款車的屬性都不盡相同。
汽車的方法可以是啟動、駕駛、剎車等。
所有汽車都擁有這些方法，但是它們被執行的時間都不盡相同。
JavaScript 中的對象
在 JavaScript 中，對象是數據（變量），擁有屬性和方法。
當您像這樣聲明一個 JavaScript 變量時：
var txt = "Hello";
您實際上已經創建了一個 JavaScript 字符串對象。字符串對象擁有內建的屬性 length。對於上面的字符串來說，length 的值是 5。字符串對象同時擁有若干個內建的方法。
屬性：
txt.length=5
方法：
txt.indexOf()
txt.replace()
txt.search()
提示：在面向對象的語言中，屬性和方法常被稱為對象的成員。
創建 JavaScript 對象
JavaScript 中的幾乎所有事務都是對象：字符串、數字、數組、日期、函數，等等。
你也可以創建自己的對象。
本例創建名為 "person" 的對象，並為其添加了四個屬性：
實例：
person=new Object(); person.firstname="Bill"; person.lastname="Gates"; person.age=56; person.eyecolor="blue";
創建新 JavaScript 對象有很多不同的方法，還可以向已存在的對象添加屬性和方法。
訪問對象的屬性
訪問對象屬性的語法是：
1 objectName.propertyName
本例使用 String 對象的 length 屬性來查找字符串的長度：
var message="Hello World!"; var x=message.length;
在以上代碼執行后，x 的值是：
12
訪問對象的方法
您可以通過下面的語法調用方法：
1 objectName.methodName()
這個例子使用 String 對象的 toUpperCase() 方法來把文本轉換為大寫：
var message="Hello world!"; var x=message.toUpperCase();
在以上代碼執行后，x 的值是：
HELLO WORLD!
提示：在面向對象的語言中，使用 camel-case 標記法的函數是很常見的。您會經常看到 someMethod() 這樣的函數名，而不是 some_method()。
九、JavaScript 函數
函數是由事件驅動的或者當它被調用時執行的可重復使用的代碼塊。
實例
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script> 5 function myFunction() 6 { 7 alert("Hello World!"); 8 } 9 </script> 10 </head> 11 12 <body> 13 <button onclick="myFunction()">點擊這里</button> 14 </body> 15 </html>
JavaScript 函數語法
函數就是包裹在花括號中的代碼塊，前面使用了關鍵詞 function：
function functionname() { 這里是要執行的代碼 }
當調用該函數時，會執行函數內的代碼。
可以在某事件發生時直接調用函數（比如當用戶點擊按鈕時），並且可由 JavaScript 在任何位置進行調用。
提示：JavaScript 對大小寫敏感。關鍵詞 function 必須是小寫的，並且必須以與函數名稱相同的大小寫來調用函數。
調用帶參數的函數
在調用函數時，您可以向其傳遞值，這些值被稱為參數。
這些參數可以在函數中使用。
您可以發送任意多的參數，由逗號 (,) 分隔：
myFunction(argument1,argument2)
當您聲明函數時，請把參數作為變量來聲明：
function myFunction(var1,var2) { 這里是要執行的代碼 }
變量和參數必須以一致的順序出現。第一個變量就是第一個被傳遞的參數的給定的值，以此類推。
實例：
1 <button onclick="myFunction('Bill Gates','CEO')">點擊這里</button> 2 3 <script> 4 function myFunction(name,job) 5 { 6 alert("Welcome " + name + ", the " + job); 7 } 8 </script>
上面的函數會當按鈕被點擊時提示 "Welcome Bill Gates, the CEO"。
函數很靈活，可以使用不同的參數來調用該函數，這樣就會給出不同的消息：
實例：
<button onclick="myFunction('Harry Potter','Wizard')">點擊這里</button>
<button onclick="myFunction('Bob','Builder')">點擊這里</button>
根據點擊的不同的按鈕，上面的例子會提示 "Welcome Harry Potter, the Wizard" 或 "Welcome Bob, the Builder"。
帶有返回值的函數
有時，我們會希望函數將值返回調用它的地方。
通過使用 return 語句就可以實現。
在使用 return 語句時，函數會停止執行，並返回指定的值。
語法：
1 function myFunction() 2 { 3 var x=5; 4 return x; 5 }
上面的函數會返回值 5。
注釋：整個 JavaScript 並不會停止執行，僅僅是函數。JavaScript 將繼續執行代碼，從調用函數的地方。
函數調用將被返回值取代：
var myVar=myFunction();
myVar 變量的值是 5，也就是函數 "myFunction()" 所返回的值。
即使不把它保存為變量，您也可以使用返回值：
document.getElementById("demo").innerHTML=myFunction();
"demo" 元素的 innerHTML 將成為 5，也就是函數 "myFunction()" 所返回的值。
您可以使返回值基於傳遞到函數中的參數：
實例
計算兩個數字的乘積，並返回結果：
1 function myFunction(a,b) 2 { 3 return a*b; 4 } 5 6 document.getElementById("demo").innerHTML=myFunction(4,3);
"demo" 元素的 innerHTML 將是：
12
在僅僅希望退出函數時 ，也可使用 return 語句。返回值是可選的：
function myFunction(a,b) { if (a>b) { return; } x=a+b }
如果 a 大於 b，則上面的代碼將退出函數，並不會計算 a 和 b 的總和。
局部 JavaScript 變量
在 JavaScript 函數內部聲明的變量（使用 var）是局部變量，所以只能在函數內部訪問它。（該變量的作用域是局部的）。
您可以在不同的函數中使用名稱相同的局部變量，因為只有聲明過該變量的函數才能識別出該變量。
只要函數運行完畢，本地變量就會被刪除。
全局 JavaScript 變量
在函數外聲明的變量是全局變量，網頁上的所有腳本和函數都能訪問它。
JavaScript 變量的生存期
JavaScript 變量的生命期從它們被聲明的時間開始。
局部變量會在函數運行以后被刪除。
全局變量會在頁面關閉后被刪除。
向未聲明的 JavaScript 變量來分配值
如果您把值賦給尚未聲明的變量，該變量將被自動作為全局變量聲明。
這條語句：
carname="Volvo";
將聲明一個全局變量 carname，即使它在函數內執行。
十、JavaScript 運算符
運算符 = 用於賦值。
運算符 + 用於加值。
運算符 = 用於給 JavaScript 變量賦值。
算術運算符 + 用於把值加起來。
y=5; z=2; x=y+z;
JavaScript 算術運算符
算術運算符用於執行變量與/或值之間的算術運算。
給定 y=5，下面的表格解釋了這些算術運算符：
| 運算符 | 描述 | 例子 | 結果 |
|---|---|---|---|
| + | 加 | x=y+2 | x=7 |
| - | 減 | x=y-2 | x=3 |
| * | 乘 | x=y*2 | x=10 |
| / | 除 | x=y/2 | x=2.5 |
| % | 求余數 (保留整數) | x=y%2 | x=1 |
| ++ | 累加 | x=++y | x=6 |
| -- | 遞減 | x=--y | x=4 |
JavaScript 賦值運算符
賦值運算符用於給 JavaScript 變量賦值。
給定 x=10 和 y=5，下面的表格解釋了賦值運算符：
| 運算符 | 例子 | 等價於 | 結果 |
|---|---|---|---|
| = | x=y | x=5 | |
| += | x+=y | x=x+y | x=15 |
| -= | x-=y | x=x-y | x=5 |
| *= | x*=y | x=x*y | x=50 |
| /= | x/=y | x=x/y | x=2 |
| %= | x%=y | x=x%y | x=0 |
用於字符串的 + 運算符
+ 運算符用於把文本值或字符串變量加起來（連接起來）。
如需把兩個或多個字符串變量連接起來，請使用 + 運算符。
txt1="What a very"; txt2="nice day"; txt3=txt1+txt2;
在以上語句執行后，變量 txt3 包含的值是 "What a verynice day"。
要想在兩個字符串之間增加空格，需要把空格插入一個字符串之中：
txt1="What a very "; txt2="nice day"; txt3=txt1+txt2;
或者把空格插入表達式中：
txt1="What a very"; txt2="nice day"; txt3=txt1+" "+txt2;
在以上語句執行后，變量 txt3 包含的值是：
"What a very nice day"
對字符串和數字進行加法運算
請看這些例子：
x=5+5; document.write(x); x="5"+"5"; document.write(x); x=5+"5"; document.write(x); x="5"+5; document.write(x);
實例：
1 <html> 2 <body> 3 4 <script type="text/javascript"> 5 x=5+5; 6 document.write(x); 7 document.write("<br />"); 8 x="5"+"5"; 9 document.write(x); 10 document.write("<br />"); 11 x=5+"5"; 12 document.write(x); 13 document.write("<br />"); 14 x="5"+5; 15 document.write(x); 16 document.write("<br />"); 17 </script> 18 19 <h3>規則是：</h3> 20 21 <p><strong>如果把數字與字符串相加，結果將成為字符串。</strong></p> 22 23 </body> 24 </html>
規則是：
如果把數字與字符串相加，結果將成為字符串。
十一、JavaScript 比較和邏輯運算符
比較和邏輯運算符用於測試 true 或 false。
比較運算符
比較運算符在邏輯語句中使用，以測定變量或值是否相等。
給定 x=5，下面的表格解釋了比較運算符：
| 運算符 | 描述 | 例子 |
|---|---|---|
| == | 等於 | x==8 為 false |
| === | 全等（值和類型） | x===5 為 true；x==="5" 為 false |
| != | 不等於 | x!=8 為 true |
| > | 大於 | x>8 為 false |
| < | 小於 | x<8 為 true |
| >= | 大於或等於 | x>=8 為 false |
| <= | 小於或等於 | x<=8 為 true |
如何使用
可以在條件語句中使用比較運算符對值進行比較，然后根據結果來采取行動：
if (age<18) document.write("Too young");
您將在本教程的下一節中學習更多有關條件語句的知識。
邏輯運算符
邏輯運算符用於測定變量或值之間的邏輯。
給定 x=6 以及 y=3，下表解釋了邏輯運算符：
| 運算符 | 描述 | 例子 |
|---|---|---|
| && | and | (x < 10 && y > 1) 為 true |
| || | or | (x==5 || y==5) 為 false |
| ! | not | !(x==y) 為 true |
條件運算符
JavaScript 還包含了基於某些條件對變量進行賦值的條件運算符。
語法：
variablename=(condition)?value1:value2
例子：
greeting=(visitor=="PRES")?"Dear President ":"Dear ";
如果變量 visitor 中的值是 "PRES"，則向變量 greeting 賦值 "Dear President "，否則賦值 "Dear"。
十二、JavaScript 條件語句
條件語句
通常在寫代碼時，您總是需要為不同的決定來執行不同的動作。您可以在代碼中使用條件語句來完成該任務。
在 JavaScript 中，我們可使用以下條件語句：
- if 語句 - 只有當指定條件為 true 時，使用該語句來執行代碼
- if...else 語句 - 當條件為 true 時執行代碼，當條件為 false 時執行其他代碼
- if...else if....else 語句 - 使用該語句來選擇多個代碼塊之一來執行
- switch 語句 - 使用該語句來選擇多個代碼塊之一來執行
If 語句
只有當指定條件為 true 時，該語句才會執行代碼。
語法：
if (條件) { 只有當條件為 true 時執行的代碼 }
注意：請使用小寫的 if。使用大寫字母（IF）會生成 JavaScript 錯誤！
實例
當時間小於 20:00 時，生成一個“Good day”問候：
if (time<20) { x="Good day"; }
x 的結果是：
Good day
請注意，在這個語法中，沒有 ..else..。您已經告訴瀏覽器只有在指定條件為 true 時才執行代碼。
If...else 語句
請使用 if....else 語句在條件為 true 時執行代碼，在條件為 false 時執行其他代碼。
語法：
if (條件) { 當條件為 true 時執行的代碼 } else { 當條件不為 true 時執行的代碼 }
實例
當時間小於 20:00 時，將得到問候 "Good day"，否則將得到問候 "Good evening"。
if (time<20) { x="Good day"; } else { x="Good evening"; }
x 的結果是：
Good day
If...else if...else 語句
使用 if....else if...else 語句來選擇多個代碼塊之一來執行。
語法：
if (條件 1) { 當條件 1 為 true 時執行的代碼 } else if (條件 2) { 當條件 2 為 true 時執行的代碼 } else { 當條件 1 和 條件 2 都不為 true 時執行的代碼 }
實例
如果時間小於 10:00，則將發送問候 "Good morning"，否則如果時間小於 20:00，則發送問候 "Good day"，否則發送問候 "Good evening"：
if (time<10) { x="Good morning"; } else if (time<20) { x="Good day"; } else { x="Good evening"; }
x 的結果是：
Good day
Switch 語句
switch 語句用於基於不同的條件來執行不同的動作。
JavaScript Switch 語句
請使用 switch 語句來選擇要執行的多個代碼塊之一。
語法：
switch(n) { case 1: 執行代碼塊 1 break; case 2: 執行代碼塊 2 break; default: n 與 case 1 和 case 2 不同時執行的代碼 }
工作原理：首先設置表達式 n（通常是一個變量）。隨后表達式的值會與結構中的每個 case 的值做比較。如果存在匹配，則與該 case 關聯的代碼塊會被執行。請使用 break 來阻止代碼自動地向下一個 case 運行。
實例
顯示今日的周名稱。請注意 Sunday=0, Monday=1, Tuesday=2, 等等：
var day=new Date().getDay(); switch (day) { case 0: x="Today it's Sunday"; break; case 1: x="Today it's Monday"; break; case 2: x="Today it's Tuesday"; break; case 3: x="Today it's Wednesday"; break; case 4: x="Today it's Thursday"; break; case 5: x="Today it's Friday"; break; case 6: x="Today it's Saturday"; break; }
x 的結果：
Today it's Saturday
default 關鍵詞
請使用 default 關鍵詞來規定匹配不存在時做的事情：
實例
如果今天不是周六或周日，則會輸出默認的消息：
var day=new Date().getDay(); switch (day) { case 6: x="Today it's Saturday"; break; case 0: x="Today it's Sunday"; break; default: x="Looking forward to the Weekend"; }
x 的結果：
Today it's Saturday
For 循環
循環可以將代碼塊執行指定的次數。
JavaScript 循環
如果您希望一遍又一遍地運行相同的代碼，並且每次的值都不同，那么使用循環是很方便的。
我們可以這樣輸出數組的值：
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>"); }
不同類型的循環
JavaScript 支持不同類型的循環：
- for - 循環代碼塊一定的次數
- for/in - 循環遍歷對象的屬性
- while - 當指定的條件為 true 時循環指定的代碼塊
- do/while - 同樣當指定的條件為 true 時循環指定的代碼塊
For 循環
for 循環是您在希望創建循環時常會用到的工具。
下面是 for 循環的語法：
for (語句 1; 語句 2; 語句 3) { 被執行的代碼塊 }
語句 1 在循環（代碼塊）開始前執行
語句 2 定義運行循環（代碼塊）的條件
語句 3 在循環（代碼塊）已被執行之后執行
實例
for (var i=0; i<5; i++) { x=x + "The number is " + i + "<br>"; }
從上面的例子中，您可以看到：
Statement 1 在循環開始之前設置變量 (var i=0)。
Statement 2 定義循環運行的條件（i 必須小於 5）。
Statement 3 在每次代碼塊已被執行后增加一個值 (i++)。
語句 1
通常我們會使用語句 1 初始化循環中所用的變量 (var i=0)。
語句 1 是可選的，也就是說不使用語句 1 也可以。
您可以在語句 1 中初始化任意（或者多個）值：
實例:
for (var i=0,len=cars.length; i<len; i++) { document.write(cars[i] + "<br>"); }
同時您還可以省略語句 1（比如在循環開始前已經設置了值時）：
實例:
var i=2,len=cars.length; for (; i<len; i++) { document.write(cars[i] + "<br>"); }
語句 2
通常語句 2 用於評估初始變量的條件。
語句 2 同樣是可選的。
如果語句 2 返回 true，則循環再次開始，如果返回 false，則循環將結束。
提示：如果您省略了語句 2，那么必須在循環內提供 break。否則循環就無法停下來。這樣有可能令瀏覽器崩潰。請在本教程稍后的章節閱讀有關 break 的內容。
語句 3
通常語句 3 會增加初始變量的值。
語句 3 也是可選的。
語句 3 有多種用法。增量可以是負數 (i--)，或者更大 (i=i+15)。
語句 3 也可以省略（比如當循環內部有相應的代碼時）：
實例:
var i=0,len=cars.length; for (; i<len; ) { document.write(cars[i] + "<br>"); i++; }
For/In 循環
JavaScript for/in 語句循環遍歷對象的屬性：
實例：
var person={fname:"John",lname:"Doe",age:25}; for (x in person) { txt=txt + person[x]; }
While 循環
只要指定條件為 true，循環就可以一直執行代碼。
while 循環
While 循環會在指定條件為真時循環執行代碼塊。
語法：
while (條件) { 需要執行的代碼 }
實例
本例中的循環將繼續運行，只要變量 i 小於 5：
while (i<5) { x=x + "The number is " + i + "<br>"; i++; }
提示：如果您忘記增加條件中所用變量的值，該循環永遠不會結束。該可能導致瀏覽器崩潰。
do/while 循環
do/while 循環是 while 循環的變體。該循環會執行一次代碼塊，在檢查條件是否為真之前，然后如果條件為真的話，就會重復這個循環。
語法：
do { 需要執行的代碼 } while (條件);
實例
下面的例子使用 do/while 循環。該循環至少會執行一次，即使條件是 false，隱藏代碼塊會在條件被測試前執行：
do { x=x + "The number is " + i + "<br>"; i++; } while (i<5);
別忘記增加條件中所用變量的值，否則循環永遠不會結束！
比較 for 和 while
如果您已經閱讀了前面那一章關於 for 循環的內容，您會發現 while 循環與 for 循環很像。
for 語句實例
本例中的循環使用 for 循環來顯示 cars 數組中的所有值：
cars=["BMW","Volvo","Saab","Ford"]; var i=0; for (;cars[i];) { document.write(cars[i] + "<br>"); i++; }
while 語句實例
本例中的循環使用使用 while 循環來顯示 cars 數組中的所有值：
cars=["BMW","Volvo","Saab","Ford"]; var i=0; while (cars[i]) { document.write(cars[i] + "<br>"); i++; }
Break 和 Continue 語句
break 語句用於跳出循環。
continue 用於跳過循環中的一個迭代。
Break 語句
我們已經在本教程稍早的章節中見到過 break 語句。它用於跳出 switch() 語句。
break 語句可用於跳出循環。
break 語句跳出循環后，會繼續執行該循環之后的代碼（如果有的話）：
實例
1 for (i=0;i<10;i++) 2 { 3 if (i==3) 4 { 5 break; 6 } 7 x=x + "The number is " + i + "<br>"; 8 }
Continue 語句
continue 語句中斷循環中的迭代，如果出現了指定的條件，然后繼續循環中的下一個迭代。
該例子跳過了值 3：
實例：
1 for (i=0;i<=10;i++) 2 { 3 if (i==3) continue; 4 x=x + "The number is " + i + "<br>"; 5 }
JavaScript 標簽
正如您在 switch 語句那一章中看到的，可以對 JavaScript 語句進行標記。
如需標記 JavaScript 語句，請在語句之前加上冒號：
label:
語句
break 和 continue 語句僅僅是能夠跳出代碼塊的語句。
語法：
break labelname; continue labelname;
continue 語句（帶有或不帶標簽引用）只能用在循環中。
break 語句（不帶標簽引用），只能用在循環或 switch 中。
通過標簽引用，break 語句可用於跳出任何 JavaScript 代碼塊：
實例：
1 cars=["BMW","Volvo","Saab","Ford"]; 2 list: 3 { 4 document.write(cars[0] + "<br>"); 5 document.write(cars[1] + "<br>"); 6 document.write(cars[2] + "<br>"); 7 break list; 8 document.write(cars[3] + "<br>"); 9 document.write(cars[4] + "<br>"); 10 document.write(cars[5] + "<br>"); 11 }
十四、JavaScript 異常處理
try 語句測試代碼塊的錯誤。
catch 語句處理錯誤。
throw 語句創建自定義錯誤。
錯誤一定會發生
當 JavaScript 引擎執行 JavaScript 代碼時，會發生各種錯誤：
可能是語法錯誤，通常是程序員造成的編碼錯誤或錯別字。
可能是拼寫錯誤或語言中缺少的功能（可能由於瀏覽器差異）。
可能是由於來自服務器或用戶的錯誤輸出而導致的錯誤。
當然，也可能是由於許多其他不可預知的因素。
JavaScript 拋出錯誤
當錯誤發生時，當事情出問題時，JavaScript 引擎通常會停止，並生成一個錯誤消息。
描述這種情況的技術術語是：JavaScript 將拋出一個錯誤。
JavaScript 測試和捕捉
try 語句允許我們定義在執行時進行錯誤測試的代碼塊。
catch 語句允許我們定義當 try 代碼塊發生錯誤時，所執行的代碼塊。
JavaScript 語句 try 和 catch 是成對出現的。
語法：
try { //在這里運行代碼 } catch(err) { //在這里處理錯誤 }
實例
在下面的例子中，我們故意在 try 塊的代碼中寫了一個錯字。
catch 塊會捕捉到 try 塊中的錯誤，並執行代碼來處理它。
<!DOCTYPE html> <html> <head> <script> var txt=""; function message() { try { adddlert("Welcome guest!"); } catch(err) { txt="There was an error on this page.\n\n"; txt+="Error description: " + err.message + "\n\n"; txt+="Click OK to continue.\n\n"; alert(txt); } } </script> </head> <body> <input type="button" value="View message" onclick="message()"> </body> </html>
Throw 語句
throw 語句允許我們創建自定義錯誤。
正確的技術術語是：創建或拋出異常（exception）。
如果把 throw 與 try 和 catch 一起使用，那么您能夠控制程序流，並生成自定義的錯誤消息。
語法：
throw exception
異常可以是 JavaScript 字符串、數字、邏輯值或對象。
實例
本例檢測輸入變量的值。如果值是錯誤的，會拋出一個異常（錯誤）。catch 會捕捉到這個錯誤，並顯示一段自定義的錯誤消息：
1 <script> 2 function myFunction() 3 { 4 try 5 { 6 var x=document.getElementById("demo").value; 7 if(x=="") throw "empty"; 8 if(isNaN(x)) throw "not a number"; 9 if(x>10) throw "too high"; 10 if(x<5) throw "too low"; 11 } 12 catch(err) 13 { 14 var y=document.getElementById("mess"); 15 y.innerHTML="Error: " + err + "."; 16 } 17 } 18 </script> 19 20 <h1>My First JavaScript</h1> 21 <p>Please input a number between 5 and 10:</p> 22 <input id="demo" type="text"> 23 <button type="button" onclick="myFunction()">Test Input</button> 24 <p id="mess"></p>
請注意，如果 getElementById 函數出錯，上面的例子也會拋出一個錯誤。
十五、JavaScript 表單驗證
JavaScript 可用來在數據被送往服務器前對 HTML 表單中的這些輸入數據進行驗證。
JavaScript 表單驗證
JavaScript 可用來在數據被送往服務器前對 HTML 表單中的這些輸入數據進行驗證。
被 JavaScript 驗證的這些典型的表單數據有：
- 用戶是否已填寫表單中的必填項目？
- 用戶輸入的郵件地址是否合法？
- 用戶是否已輸入合法的日期？
- 用戶是否在數據域 (numeric field) 中輸入了文本？
必填（或必選）項目
下面的函數用來檢查用戶是否已填寫表單中的必填（或必選）項目。假如必填或必選項為空，那么警告框會彈出，並且函數的返回值為 false，否則函數的返回值則為 true（意味着數據沒有問題）：
1 function validate_required(field,alerttxt) 2 { 3 with (field) 4 { 5 if (value==null||value=="") 6 {alert(alerttxt);return false} 7 else {return true} 8 } 9 }
下面是連同 HTML 表單的代碼：
1 <html> 2 <head> 3 <script type="text/javascript"> 4 5 function validate_required(field,alerttxt) 6 { 7 with (field) 8 { 9 if (value==null||value=="") 10 {alert(alerttxt);return false} 11 else {return true} 12 } 13 } 14 15 function validate_form(thisform) 16 { 17 with (thisform) 18 { 19 if (validate_required(email,"Email must be filled out!")==false) 20 {email.focus();return false} 21 } 22 } 23 </script> 24 </head> 25 26 <body> 27 <form action="submitpage.htm" onsubmit="return validate_form(this)" method="post"> 28 Email: <input type="text" name="email" size="30"> 29 <input type="submit" value="Submit"> 30 </form> 31 </body> 32 33 </html>
E-mail 驗證
下面的函數檢查輸入的數據是否符合電子郵件地址的基本語法。
意思就是說，輸入的數據必須包含 @ 符號和點號(.)。同時，@ 不可以是郵件地址的首字符，並且 @ 之后需有至少一個點號：
1 function validate_email(field,alerttxt) 2 { 3 with (field) 4 { 5 apos=value.indexOf("@") 6 dotpos=value.lastIndexOf(".") 7 if (apos<1||dotpos-apos<2) 8 {alert(alerttxt);return false} 9 else {return true} 10 } 11 }
下面是連同 HTML 表單的完整代碼：
1 <html> 2 <head> 3 <script type="text/javascript"> 4 function validate_email(field,alerttxt) 5 { 6 with (field) 7 { 8 apos=value.indexOf("@") 9 dotpos=value.lastIndexOf(".") 10 if (apos<1||dotpos-apos<2) 11 {alert(alerttxt);return false} 12 else {return true} 13 } 14 } 15 16 function validate_form(thisform) 17 { 18 with (thisform) 19 { 20 if (validate_email(email,"Not a valid e-mail address!")==false) 21 {email.focus();return false} 22 } 23 } 24 </script> 25 </head> 26 27 <body> 28 <form action="submitpage.htm"onsubmit="return validate_form(this);" method="post"> 29 Email: <input type="text" name="email" size="30"> 30 <input type="submit" value="Submit"> 31 </form> 32 </body> 33 34 </html>