JavaScript入門之語言基礎

更新時間：2011年10月21日 20:11:01 作者：

本文通過全面列舉基礎的JavaScript概念這一方式來闡述該語言的基本原理，以此來為初學者提供一個對語言的基本了解，隨處可見的代碼例子則是用來說明所有的這些概念是如何在語言中體現(xiàn)出來的

清單10. 使用比較運算符

document.write(10 == 1);
邏輯運算符

邏輯運算符通常是用來組合條件語句中的比較運算符。表5列出并描述了JavaScript語言中的所有可用的邏輯運算符。

表5. 邏輯運算符

運算符描述

&&與

||或

! 非

現(xiàn)在在變量和運算符方面你已經(jīng)有些經(jīng)驗了，是時候了解如何創(chuàng)建一種比簡單的變量有著更多存儲內容的機制了。

數(shù)組

數(shù)組類似于變量，但不同之處在于它們可以把多個值和表達式放在一個名稱之下。把多個值存放在一個變量中，這種做法造就了數(shù)組的強大。你可存放在 JavaScript數(shù)組中的數(shù)據(jù)的類型和數(shù)量都沒有限制，在腳本中聲明數(shù)組之后，你就可以隨時訪問數(shù)組中的任何項的任何數(shù)據(jù)。雖然數(shù)組可以保存 JavaScript語言的任何數(shù)據(jù)類型，包括其他數(shù)組，但最常見的做法是，把相類似的數(shù)據(jù)存儲在同一個數(shù)組中，并給它指定一個與數(shù)組項有關聯(lián)意思的名稱。清單11提供的例子使用了兩個獨立的數(shù)組來各自存放相類似的數(shù)據(jù)。

清單11. 把相類似的值存放在數(shù)組中

復制代碼代碼如下:

 
var colors = new Array("orange", "blue", "red", "brown"); 
var shapes = new Array("circle", "square", "triangle", "pentagon"); 

正如你見到的那樣，是可以把所有的這些數(shù)據(jù)項都保存在一個數(shù)組中，但這是不符合邏輯的，且有可能會在以后給腳本帶來問題，比如說在識別數(shù)組中存放的是什么數(shù)據(jù)時。

訪問數(shù)組中的值很容易，但這里有一個陷阱存在。數(shù)組的ID總是從0而不是從1開始的，在第一次使用的時候你可能會有些困惑。ID從0開始遞增，例如0、1、2、3等。要訪問數(shù)組項的話你就必須要使用它的ID，其指向子項在數(shù)組中的位置(清單12)。

清單12. 把相類似的值保存在一個數(shù)組中

復制代碼代碼如下:

 
var colors = new Array("orange", "blue", "red", "brown"); 
document.write("Orange: "+ colors[0]); 
document.write("Blue: "+ colors[1]); 
document.write("Red: "+ colors[2]); 
document.write("Brown: "+ colors[3]); 

也可以給數(shù)組中的某個位置賦值，或是更新數(shù)組中的某項的值，就像前面訪問數(shù)組中的項的做法一樣(清單13)。

清單13. 給數(shù)組中的特定位置賦值

復制代碼代碼如下:

 
var colors = new Array(); 
colors[0] = "orange"; 
colors[1] = "blue"; 
colors[2] = "red"; 
colors[3] = "brown"; 
document.write("Blue: "+ colors[1]); 

// 把blue更新成purple 
colors[1] = "purple"; 
document.write("Purple: "+ colors[1]); 

現(xiàn)在你已經(jīng)很好地了解了變量、運算符和數(shù)組，接下來把你所學的東西運用到實踐中，開始創(chuàng)建一些邏輯。

條件語句

條件語句是創(chuàng)建腳本語言或是編程語言中各種類型的邏輯的骨架，JavaScript語言也不例外。條件語句基于你所寫的條件來確定要采取的行為，JavaScript語言有四種編寫條件語句的方式，表6對此做了描述。

表6. 條件語句

語句描述

if如果某個特定條件為true的話就執(zhí)行腳本

if...else　如果某個特定條件為true的話就執(zhí)行某個腳本，

如果條件為false的話則執(zhí)行令一個腳本

if...else if...else　如果不限個數(shù)的多個條件中之一為true的話就執(zhí)行某個腳本，

如果所有的條件都為false的話就執(zhí)行其他的腳本

switch　執(zhí)行許多腳本中的一個

如果你只想在某個條件為true時執(zhí)行某個腳本的話，就使用if語句。清單14展示了如何使用帶有比較運算符的if語句來在條件為true時執(zhí)行腳本。

清單14. 使用if語句

復制代碼代碼如下:

 
var num = 10; 
if(num == 5) 
{ 
document.write("num is equal to 5"); 
} 

如果你打算在某個條件為true時執(zhí)行一個腳本，而在條件為false時執(zhí)行另一個腳本話，那么使用if...else語句，如清單15所示。

清單15. 使用if...else語句

復制代碼代碼如下:

 
var num = 10; 
if(num == 5) 
{ 
document.write("num is equal to 5"); 
} 
else 
{ 
document.write("num is NOT equal to 5, num is: "+ num); 
} 

如果要基于不同的條件來執(zhí)行不同的腳本的話，則使用if...else if...else語句，如清單16所示。

清單16. 使用if...else if...else語句

復制代碼代碼如下:

 
var num = 10; 
if(num == 5) 
{ 
document.write("num is equal to 5"); 
} 
else if(num == 10) 
{ 
document.write("num is equal to 10"); 
} 
else 
{ 
document.write("num is: "+ num); 
} 

Swith語句不同于if語句，它們不能用來確定變量值是否大于或是小于另一個值。清單17給出的例子說明了使用switch語句來確定要執(zhí)行的腳本的適當時機。

清單17. 使用switch語句

復制代碼代碼如下:

 
var num = 10; 
switch(num) 
{ 
case 5: 
document.write("num is equal to 5"); 
break; 
case 10: 
document.write("num is equal to 10"); 
break; 
default: 
document.write("num is: "+ num); 
} 

你可能已經(jīng)注意到清單17用到了case子句、break語句和default子句。這些子句和語句對switch語句來說都是很重要的部分。case子句確定了switch的值是否與子句中用到的數(shù)據(jù)值相等;break語句中斷——或是停止——switch語句執(zhí)行語句的余下部分;而default子句則標明了在沒有case語句執(zhí)行的情況下或是已執(zhí)行的case語句沒有break語句的情況下，缺省要運行的腳本。例如，清單18說明了在已執(zhí)行的case語句中如果沒有break語句的話，多個case語句和default語句是如何執(zhí)行的。

清單18. 通過不包含break的方式來執(zhí)行多行代碼

復制代碼代碼如下:

 
var num = 10; 
switch(num) 
{ 
case 5: 
document.write("num is equal to 5"); 
break; 
case 10: 
document.write("num is equal to 10"); 
default: 
document.write("num is: "+ num); 
} 

這一腳本的結果先是一句“num is equal to 10”，后面再跟著一句“num is: 10”。這種情況有時被稱為switch直落。

正如本節(jié)開頭提到的那樣，條件語句是任何腳本語言或是編程語言中的所有邏輯的骨架，不過如果不用函數(shù)的話，你得到的代碼就會像糾纏不清的一團亂麻。

函數(shù)

有許多理由可用來證明函數(shù)是很有用的。函數(shù)是那些只能由事件或是函數(shù)調用來執(zhí)行的腳本的容器，因此，在瀏覽器最初加載和執(zhí)行包含在網(wǎng)頁中的腳本的時候，函數(shù)并沒有被執(zhí)行。函數(shù)的目的是包含那些要完成某個任務的腳本，這樣你就隨時都能夠執(zhí)行該腳本和運行該任務。

構建一個函數(shù)很容易，其以function這一關鍵字作為開始，接著是一個空格，然后是函數(shù)的名稱。你可以選擇任何的字串來作為函數(shù)的名稱，不過讓函數(shù)的名稱和其要執(zhí)行任務之間有某種關聯(lián)意思是很重要的。清單19給出了一個函數(shù)例子，該函數(shù)修改一個現(xiàn)有變量的值。

清單19. 構建一個簡單的函數(shù)

復制代碼代碼如下:

 
var num = 10; 
function changeVariableValue() 
{ 
num = 11; 
} 
changeVariableValue(); 
document.write("num is: "+ num); 

清單19中的例子不僅說明了如何構建一個函數(shù)，還說明了如何調用函數(shù)來修改變量的值。在這一例子中你能夠修改變量的值是因為，變量是在主腳本范圍里做聲明的，函數(shù)也是一樣，因此函數(shù)知道變量的存在。然而，如果變量是在函數(shù)的內部做聲明的話，那么在函數(shù)的外部你是不能訪問該變量的。

函數(shù)還能夠通過函數(shù)的參數(shù)來接受數(shù)據(jù)，函數(shù)可以有一個或多個形式參數(shù)，函數(shù)調用基于函數(shù)的形式參數(shù)個數(shù)可以有一個或多個實際參數(shù)。形式參數(shù)(形參，parameter)和實際參數(shù)(實參，argument)常會被弄混;形參是函數(shù)定義的組成部分，而實參則是在調用函數(shù)時用到的表達式。清單20給出了一個函數(shù)例子，該函數(shù)帶有形參，函數(shù)調用則用到了實參。

清單20. 使用函數(shù)參數(shù)

復制代碼代碼如下:

 
var num = 10; 
function increase(_num) 
{ 
_num++; 
} 
increase(num); 
document.write("num is: "+ num); 

這一例子中的函數(shù)遞增了任何傳遞給它的實際參數(shù)的值，該例中的實際參數(shù)是一個你已預先聲明了的變量。通過把它作為一個實際參數(shù)傳遞給函數(shù)，你把它的值遞增成了11。

return語句在函數(shù)中也是常被用到的，它們在執(zhí)行完函數(shù)中的腳本后返回一個值。例如，你可以把函數(shù)返回的值賦給一個變量。清單21中的例子說明了在執(zhí)行腳本之后，如何從函數(shù)中返回一個值。

清單21. 在函數(shù)中使用return語句

復制代碼代碼如下:

 
function add(_num1, _num2) 
{ 
return _num1+_num2; 
} 
var num = add(10, 10); 
document.write("num is: "+ num); 

這一腳本的結果是“num is: 20”。這一函數(shù)的好處是，它可以把你傳遞給它的任意兩個數(shù)字相加并返回相加后的值，你可以把該值賦給任何變量，而不是像清單20那樣總是改變同一個變量的值。

循環(huán)

正如你已經(jīng)見到的那樣，數(shù)組是存儲大量可重用數(shù)據(jù)的一種很棒的方式。但這不過是一個開始;for和while循環(huán)提供了遍歷這些數(shù)組、訪問它們的值和使用它們來執(zhí)行腳本的功能。

JavaScript語言中最常用到的循環(huán)類型是for循環(huán)。for循環(huán)通常是這樣構成的，先是一個賦了數(shù)值的變量，然后該變量使用一個比較運算符來和另一個值做比較，最后該數(shù)字值被遞增或是遞減。for循環(huán)中的比較通常是確定初始變量的數(shù)值是否小于或是大于另一個數(shù)值，接著在條件為true的這段時間內，循環(huán)運行，變量遞增或是遞減直到條件的計算結果為false。清單22給出的例子說明了如何編寫一個for循環(huán)，當數(shù)值小于數(shù)組的長度時循環(huán)運行。

清單22. 構建一個for循環(huán)并遍歷一個數(shù)組

復制代碼代碼如下:

 
var colors = new Array("orange", "blue", "red", "brown"); 
for(var i=0; i 
{ 
document.write("The color is: "+ colors[i] +" 
"); 
} 

數(shù)組的length屬性提供了一個與數(shù)組中的子項個數(shù)相等的數(shù)值，再一次說明，這里容易讓你出錯的一點是，數(shù)組的ID是從0開始的，因此，如果數(shù)組中有4個子項的話，長度就是4，但數(shù)組中的索引則是0、1、2和3——沒有4。

另一種循環(huán)類型是while循環(huán)，它們的執(zhí)行速度比for循環(huán)快，但適用在一些不是遍歷數(shù)組的情況中，比如說當某個條件為true時執(zhí)行某個腳本。清單23展示了如何編寫這樣的一個while循環(huán)，即當數(shù)值變量小于10時執(zhí)行某個腳本。

清單23. 構建while循環(huán)

復制代碼代碼如下:

 
var i = 0; 
while(i<10) 
{ 
document.write(i +" "); 
i++; 
} 

可以注意到，while循環(huán)中的腳本包含了一行代碼，該行代碼疊加數(shù)值變量直到while循環(huán)中的條件為false為止。沒有這行代碼的話，你得到的就是一個無限循環(huán)。

結論

JavaScript語言可以說是最受歡迎的語言之一，現(xiàn)在你明白這是為什么了。這一簡單而又豐富的腳本語言帶來了如此之多的可能性，它提供的工具允許網(wǎng)站訪問者和下載后的網(wǎng)頁進行交互，這一功能非常的強大。本文為理解JavaScript語言的基本原理奠定了基礎，現(xiàn)在對你來說，要了解JavaScript庫函數(shù)的作用方式，以及如何使用它們來簡化網(wǎng)頁客戶端邏輯的編寫過程都應該是更容易的事了。接下來要做到事情就是把這些概念付諸實踐，并開始探索JavaScript對象。

您可能感興趣的文章: