javascript學習(一)——基本語法

JavaScript 語言正越來越受歡迎,可以說是是互聯網上最突出的語言之一。你可以跨平臺和瀏覽器使用它,其並不排斥後端語言。現在有許多不同的開發庫——有些非常棒—— 這些庫對開發很有幫助,比如說加快瞭開發的時間等等。問題是,有時候這些庫與原始語言之間很是有一些距離,這使得剛入門的開發者缺乏一種對語言的基礎瞭解。

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

瞭解JavaScript語言

JavaScript語言是一種免費的客戶端腳本語言,其能夠讓你往超文本標記語言(Hypertext Markup Language,HTML)頁面中加入交互行為。客戶端(client-side)意味著JavaScript運行在瀏覽器中,而不是用在服務器端。在網頁被服務器送達並被瀏覽器加載後,客戶端腳本就允許用戶與網頁進行交互。例如,Google Maps就是使用JavaScript語言來支持用戶與地圖之間的交互的,交互的方式有移動地圖、放大和縮小等。沒有JavaScript語言的話,網頁需要為每次和每個用戶的交互行為進行刷新,當然,除非頁面用到瞭諸如Adobe Flash或是Microsoft® Silverlight一類的插件。JavaScript語言不需要插件。

因為JavaScript語言為加載後的網頁提供用戶交互行為,因此開發者通常會用它來實現下面的一些功能:

1. 動態添加、編輯和刪除HTML元素及它們的值。

2. 在提交之前校驗表單。

3. 在用戶的計算機上創建cookies以用於在將來的訪問中保存和檢索數據。

在開始之前,隻要知道語言的幾個基本原則就行瞭:

1. 要在HTML文件中把JavaScript代碼包含進來的話,你必須要把代碼放在腳本標簽(script)的內部,並加入text/javascript這一類型(type)屬性(清單1)。

2. 所有的JavaScript語句以分號結束。

3. 語言是大小寫敏感的。

4. 所有的變量名都必須以字母或是下劃線作為開始。

5. 你可以使用註釋來說明腳本中的某些行,註釋的編寫方式是,以一個雙斜線(//)為開始,後面跟著註釋。

6. 你還可以使用註釋來把腳本註釋掉。要註釋腳本的多行的話,一種好的做法是使用/* 你的腳本在這裡 */。任何位於星號之內的腳本在執行過程中都不會運行。

清單1.需要使用script標簽和type屬性來把JavaScript代碼包含到HTML文件中來

<script  type="text/javascript"></script>  
<script  type="text/javascript"></script> 
要隱藏瀏覽器不支持的JavaScript的代碼,或是用戶想把代碼關掉的話,隻要在JavaScrip語句的前後使用註釋標簽就可以瞭(清單2)。

清單2. 使用註釋來隱藏瀏覽器不支持的JavaScript代碼

<script type="text/javascript">    
<!–  Example statement here  //–>   
</script>  
<script type="text/javascript">  
<!–  Example statement here  //–>
</script> 

最常用的把JavaScript代碼包含到網頁中的方式是,使用腳本(script)標簽中的src屬性來把代碼從一個外部的JavaScript文件中加載進來(清單3)。

清單3. 在HTML文件中包含外部的JavaScript文件

<script type="text/javascript" src="path/to/javascript.js" kesrc="path/to/javascript.js"></script>  
<script type="text/javascript" src="path/to/javascript.js" kesrc="path/to/javascript.js"></script>
 
外部JavaScript文件是最常見的包含JavaScript代碼的方式,這是有一些很實在的原因的:

1. 如果你的HTML頁面中有著更少的代碼的話,搜索引擎就能夠以更快的速度來抓取和索引你的網站。

2. 保持JavaScript代碼和HTML的分離,這樣代碼顯得更清晰,且最終更易於管理。

3. 因為可以在HTML代碼中包含進多個JavaScript文件,因此你可以把JavaScript文件分開放在web服務器上不同的文件目錄結構中,這類似於圖像的存放方式,這是一種更容易管理代碼的做法。清晰、有條理的代碼始終是讓網站管理變得容易起來的關鍵。

變量

變量存儲數據,這些數據稍後要被檢索的或是要使用新的數據來更新。存儲在變量中的數據可以是一個值或表達式,JavaScript語言有三種類型的表達式,表1對此做瞭描述。

表1. JavaScript表達式

表達式描述

算術 計算的結果為一個數值

字符串計算的結果為一個字符串

邏輯 計算的結果為一個佈爾值(true或者false)

變量有兩種類型:局部的和全局的。局部變量使用var這一關鍵字來聲明,聲明全局變量則不需要使用var關鍵字。使用瞭var關鍵字的變量被看成是 局部的,因為除瞭你聲明它的地方所處的范圍之外,它不能在其他任何地方被訪問。例如,如果你在一個函數(在將近文章的結尾部分我會談論到)的內部聲明瞭一個局部變量的話,該變量就不能在該函數之外被訪問,這就使得它是這一函數局部的。如果你沒有使用var關鍵字聲明這同一變量的話,它在整個腳本中就都是可被訪問到的,而不僅限定於隻能在那個函數中被訪問。

清單4給出瞭一個局部變量的例子,其被命名為num,並被賦值為10。

清單4. 聲明一個局部變量

var num = 10;  
var num = 10; 
要在腳本中的另一個位置訪問num變量的值的話,你隻需要通過名稱來引用該變量就可以瞭,如清單5所示。

清單5. 訪問變量的值

document.write("The value of num is: "+ num);  
document.write("The value of num is: "+ num); 
這一語句的結果是“The value of num is: 10”。這一document.write函數把數據寫到網頁中,在本文餘下的部分中你都是使用這一函數來把例子寫到網頁中。

要把算術表達式存儲到變量中的話,你隻要把變量指配給計算的值就可以瞭,如清單6所示。計算的結果而非算式本身被存儲在變量中。因此,我們又一次得到這一結果“The value of num is: 10”。

清單6. 存儲算術表達式

var num = (5 + 5);   
document.write("The value of num is: "+ num);  
var num = (5 + 5); 
document.write("The value of num is: "+ num); 
要改變變量的值的話,通過你為變量所分配的名稱來引用變量,並使用等號來為其賦一個新的值(清單7)。這次的不同之處在於你不需要使用var關鍵字,因為變量已經聲明過瞭。

清單7. 改變現有變量的值

var num = 10;   
document.write("The value of num is: "+ num);   // 把num的值更新成15  num = 15;   
document.write("The new value of num is: "+ num);  
var num = 10; 
document.write("The value of num is: "+ num);   // 把num的值更新成15  num = 15;
document.write("The new value of num is: "+ num); 

這一腳本的結果先是一句“The value of num is: 10”,後面跟著“The new value of num is: 15”。除瞭講解變量之外,這一節內容還引入瞭下一個主題,也就是運算符。你用來把值賦給變量的等號(=)就是一個賦值運算符,以及你用在5+5中的加號(+)是一個算術運算符。下一節內容談論JavaScript語言中的所有變量運算符及其用法。

運算符

在執行JavaScript語言中的任何運算時,你都需要運算符。運算包括瞭加法、減法、比較等。JavaScript語言中有四種運算符。

1. 算術

2. 賦值

3. 比較

4. 邏輯

算術運算符

算術運算符執行基本的數學運算,比如說加減乘除等。表2列出並描述瞭JavaScript語言中的所有可用的算術運算。

表2. 算術運算符

運算符描述

+ 加法

– 減法

* 乘法

/ 除法

% 取模(找出餘數)

++  遞增

–遞減

賦值運算符

算術運算符執行基本的數學運算,而賦值運算符則是把值賦給JavaScript變量。當你在前面一節中把值賦給變量時,你已經見到瞭最常用的賦值運算符。表3列出並描述瞭JavaScript語言中所有可用的賦值運算符。

表3. 賦值運算符

運算符描述

=等於

+=把加法值(變量加上值的結果值)賦給變量

-=把減法值(變量減去值的結果值)賦給變量

*=把乘法值(變量乘上值的結果值)賦給變量

/=把除法值(變量除以值的結果值)賦給變量

%=把取模值(變量對值取模的結果)賦給變量

你已經看到瞭如何使用等號來把值或是表達式賦給變量,但現在我會給展示如何使用一個令人稍加困惑的賦值運算符。把一個加法值賦給一個變量可能是一個很奇怪的概念,但實際上很簡單(清單8)。

清單8. 把一個加法值賦給一個變量

var num = 10;   
document.write("The value of num is: "+ num);   // 把num的值更新為15  num += 5;    
document.write("The new value of num is: "+ num);  
var num = 10; 
document.write("The value of num is: "+ num);   // 把num的值更新為15  num += 5; 
document.write("The new value of num is: "+ num); 

這一腳本的結果是“The value of num is: 10”後面跟著“"The new value of num is: 15”。你可以看到,這一腳本中的運算符把加法值賦給瞭變量。這也可以當作是清單9中所編寫的腳本的一種簡短寫法。

清單9. 把加法值賦給變量的一種更長的寫法。

var num = 10;  
document.write("The value of num is: "+ num);   // 把num的值更新為15  num = (num + 5);    
document.write("The new value of num is: "+ num);  
var num = 10;
document.write("The value of num is: "+ num);   // 把num的值更新為15  num = (num + 5); 
document.write("The new value of num is: "+ num); 

比較運算符

比較運算符確定變量或是它們的值之間的關系。你在條件語句中使用比較運算符,通過比較變量或是它們的值來計算出語句為true還是為false,以此創建邏輯。表4列出並描述瞭JavaScrpit語言中所有可用的比較運算符。

表4. 比較運算符

運算符描述

==等於

=== 全等,用於值和對象類型

!=不等於

>大於

<小於

>= 大於或等於

<= 小於或等於

在編寫任何類型的邏輯時,變量和值的比較都是最基本的。清單10中的例子展示瞭如何使用等於這一比較運算符(==)來確定10是否等於1。

清單10. 使用比較運算符

document.write(10 == 1);  
document.write(10 == 1); 

邏輯運算符

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

表5. 邏輯運算符

運算符描述

&&與

||或

! 非

現在在變量和運算符方面你已經有些經驗瞭,是時候瞭解如何創建一種比簡單的變量有著更多存儲內容的機制瞭。

數組

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

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

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

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

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

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

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]);  
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]); 

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

清單13. 給數組中的特定位置賦值

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]);  
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]); 

現在你已經很好地瞭解瞭變量、運算符和數組,接下來把你所學的東西運用到實踐中,開始創建一些邏輯。

條件語句

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

表6. 條件語句

語句描述

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

if…else 如果某個特定條件為true的話就執行某個腳本,

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

if…else if…else  如果不限個數的多個條件中之一為true的話就執行某個腳本,

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

switch 執行許多腳本中的一個

如果你隻想在某個條件為true時執行某個腳本的話,就使用if語句。清單14展示瞭如何使用帶有比較運算符的if語句來在條件為true時執行腳本。

清單14. 使用if語句

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

如果你打算在某個條件為true時執行一個腳本,而在條件為false時執行另一個腳本話,那麼使用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);   

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); 
}
 

如果要基於不同的條件來執行不同的腳本的話,則使用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);   
}  
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語句來確定要執行的腳本的適當時機。

清單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);   

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); 
}

 

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

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

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);   
}  
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直落。

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

函數

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

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

清單19. 構建一個簡單的函數

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

changeVariableValue(); 
document.write("num is: "+ num); 

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

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

清單20. 使用函數參數

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

increase(num);
  document.write("num is: "+ num); 

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

return語句在函數中也是常被用到的,它們在執行完函數中的腳本後返回一個值。例如,你可以把函數返回的值賦給一個變量。清單21中的例子說明瞭在執行腳本之後,如何從函數中返回一個值。

清單21. 在函數中使用return語句

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

var num = add(10, 10);
  document.write("num is: "+ num); 

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

循環

正如你已經見到的那樣,數組是存儲大量可重用數據的一種很棒的方式。但這不過是一個開始;for和while循環提供瞭遍歷這些數組、訪問它們的值和使用它們來執行腳本的功能。

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

清單22. 構建一個for循環並遍歷一個數組

 

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

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

 

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

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

清單23. 構建while循環

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

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

可以註意到,while循環中的腳本包含瞭一行代碼,該行代碼疊加數值變量直到while循環中的條件為false為止。沒有這行代碼的話,你得到的就是一個無限循環。

結論

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

 摘自 塗劍凱的專欄
 

發佈留言