JavaScript入門之語言基礎(chǔ)第2/2頁
清單10. 使用比較運(yùn)算符
document.write(10 == 1);
邏輯運(yùn)算符
邏輯運(yùn)算符通常是用來組合條件語句中的比較運(yùn)算符。表5列出并描述了JavaScript語言中的所有可用的邏輯運(yùn)算符。
表5. 邏輯運(yùn)算符
運(yùn)算符描述
&&與
||或
! 非
現(xiàn)在在變量和運(yùn)算符方面你已經(jīng)有些經(jīng)驗(yàn)了,是時(shí)候了解如何創(chuàng)建一種比簡單的變量有著更多存儲(chǔ)內(nèi)容的機(jī)制了。
數(shù)組
數(shù)組類似于變量,但不同之處在于它們可以把多個(gè)值和表達(dá)式放在一個(gè)名稱之下。把多個(gè)值存放在一個(gè)變量中,這種做法造就了數(shù)組的強(qiáng)大。你可存放在 JavaScript數(shù)組中的數(shù)據(jù)的類型和數(shù)量都沒有限制,在腳本中聲明數(shù)組之后,你就可以隨時(shí)訪問數(shù)組中的任何項(xiàng)的任何數(shù)據(jù)。雖然數(shù)組可以保存 JavaScript語言的任何數(shù)據(jù)類型,包括其他數(shù)組,但最常見的做法是,把相類似的數(shù)據(jù)存儲(chǔ)在同一個(gè)數(shù)組中,并給它指定一個(gè)與數(shù)組項(xiàng)有關(guān)聯(lián)意思的名稱。清單11提供的例子使用了兩個(gè)獨(dú)立的數(shù)組來各自存放相類似的數(shù)據(jù)。
清單11. 把相類似的值存放在數(shù)組中
var colors = new Array("orange", "blue", "red", "brown");
var shapes = new Array("circle", "square", "triangle", "pentagon");
正如你見到的那樣,是可以把所有的這些數(shù)據(jù)項(xiàng)都保存在一個(gè)數(shù)組中,但這是不符合邏輯的,且有可能會(huì)在以后給腳本帶來問題,比如說在識(shí)別數(shù)組中存放的是什么數(shù)據(jù)時(shí)。
訪問數(shù)組中的值很容易,但這里有一個(gè)陷阱存在。數(shù)組的ID總是從0而不是從1開始的,在第一次使用的時(shí)候你可能會(huì)有些困惑。ID從0開始遞增,例如0、1、2、3等。要訪問數(shù)組項(xiàng)的話你就必須要使用它的ID,其指向子項(xiàng)在數(shù)組中的位置(清單12)。
清單12. 把相類似的值保存在一個(gè)數(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ù)組中的某個(gè)位置賦值,或是更新數(shù)組中的某項(xiàng)的值,就像前面訪問數(shù)組中的項(xiàng)的做法一樣(清單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)很好地了解了變量、運(yùn)算符和數(shù)組,接下來把你所學(xué)的東西運(yùn)用到實(shí)踐中,開始創(chuàng)建一些邏輯。
條件語句
條件語句是創(chuàng)建腳本語言或是編程語言中各種類型的邏輯的骨架,JavaScript語言也不例外。條件語句基于你所寫的條件來確定要采取的行為,JavaScript語言有四種編寫條件語句的方式,表6對(duì)此做了描述。
表6. 條件語句
語句描述
if如果某個(gè)特定條件為true的話就執(zhí)行腳本
if...else 如果某個(gè)特定條件為true的話就執(zhí)行某個(gè)腳本,
如果條件為false的話則執(zhí)行令一個(gè)腳本
if...else if...else 如果不限個(gè)數(shù)的多個(gè)條件中之一為true的話就執(zhí)行某個(gè)腳本,
如果所有的條件都為false的話 就執(zhí)行其他的腳本
switch 執(zhí)行許多腳本中的一個(gè)
如果你只想在某個(gè)條件為true時(shí)執(zhí)行某個(gè)腳本的話,就使用if語句。清單14展示了如何使用帶有比較運(yùn)算符的if語句來在條件為true時(shí)執(zhí)行腳本。
清單14. 使用if語句
var num = 10;
if(num == 5)
{
document.write("num is equal to 5");
}
如果你打算在某個(gè)條件為true時(shí)執(zhí)行一個(gè)腳本,而在條件為false時(shí)執(zhí)行另一個(gè)腳本話,那么使用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語句,它們不能用來確定變量值是否大于或是小于另一個(gè)值。清單17給出的例子說明了使用switch語句來確定要執(zhí)行的腳本的適當(dāng)時(shí)機(jī)。
清單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子句。這些子句和語句對(duì)switch語句來說都是很重要的部分。case子句確定了switch的值是否與子句中用到的數(shù)據(jù)值相等;break語句中斷——或是停止——switch語句執(zhí)行語句的余下部分;而default子句則標(biāo)明了在沒有case語句執(zhí)行的情況下或是已執(zhí)行的case語句沒有break語句的情況下,缺省要運(yùn)行的腳本。例如,清單18說明了在已執(zhí)行的case語句中如果沒有break語句的話,多個(gè)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);
}
這一腳本的結(jié)果先是一句“num is equal to 10”,后面再跟著一句“num is: 10”。這種情況有時(shí)被稱為switch直落。
正如本節(jié)開頭提到的那樣,條件語句是任何腳本語言或是編程語言中的所有邏輯的骨架,不過如果不用函數(shù)的話,你得到的代碼就會(huì)像糾纏不清的一團(tuán)亂麻。
函數(shù)
有許多理由可用來證明函數(shù)是很有用的。函數(shù)是那些只能由事件或是函數(shù)調(diào)用來執(zhí)行的腳本的容器,因此,在瀏覽器最初加載和執(zhí)行包含在網(wǎng)頁中的腳本的時(shí)候,函數(shù)并沒有被執(zhí)行。函數(shù)的目的是包含那些要完成某個(gè)任務(wù)的腳本,這樣你就隨時(shí)都能夠執(zhí)行該腳本和運(yùn)行該任務(wù)。
構(gòu)建一個(gè)函數(shù)很容易,其以function這一關(guān)鍵字作為開始,接著是一個(gè)空格,然后是函數(shù)的名稱。你可以選擇任何的字串來作為函數(shù)的名稱,不過讓函數(shù)的名稱和其要執(zhí)行任務(wù)之間有某種關(guān)聯(lián)意思是很重要的。清單19給出了一個(gè)函數(shù)例子,該函數(shù)修改一個(gè)現(xiàn)有變量的值。
清單19. 構(gòu)建一個(gè)簡單的函數(shù)
var num = 10;
function changeVariableValue()
{
num = 11;
}
changeVariableValue();
document.write("num is: "+ num);
清單19中的例子不僅說明了如何構(gòu)建一個(gè)函數(shù),還說明了如何調(diào)用函數(shù)來修改變量的值。在這一例子中你能夠修改變量的值是因?yàn)椋兞渴窃谥髂_本范圍里做聲明的,函數(shù)也是一樣,因此函數(shù)知道變量的存在。然而,如果變量是在函數(shù)的內(nèi)部做聲明的話,那么在函數(shù)的外部你是不能訪問該變量的。
函數(shù)還能夠通過函數(shù)的參數(shù)來接受數(shù)據(jù),函數(shù)可以有一個(gè)或多個(gè)形式參數(shù),函數(shù)調(diào)用基于函數(shù)的形式參數(shù)個(gè)數(shù)可以有一個(gè)或多個(gè)實(shí)際參數(shù)。形式參數(shù)(形參,parameter)和實(shí)際參數(shù)(實(shí)參,argument)常會(huì)被弄混;形參是函數(shù)定義的組成部分,而實(shí)參則是在調(diào)用函數(shù)時(shí)用到的表達(dá)式。清單20給出了一個(gè)函數(shù)例子,該函數(shù)帶有形參,函數(shù)調(diào)用則用到了實(shí)參。
清單20. 使用函數(shù)參數(shù)
var num = 10;
function increase(_num)
{
_num++;
}
increase(num);
document.write("num is: "+ num);
這一例子中的函數(shù)遞增了任何傳遞給它的實(shí)際參數(shù)的值,該例中的實(shí)際參數(shù)是一個(gè)你已預(yù)先聲明了的變量。通過把它作為一個(gè)實(shí)際參數(shù)傳遞給函數(shù),你把它的值遞增成了11。
return語句在函數(shù)中也是常被用到的,它們?cè)趫?zhí)行完函數(shù)中的腳本后返回一個(gè)值。例如,你可以把函數(shù)返回的值賦給一個(gè)變量。清單21中的例子說明了在執(zhí)行腳本之后,如何從函數(shù)中返回一個(gè)值。
清單21. 在函數(shù)中使用return語句
function add(_num1, _num2)
{
return _num1+_num2;
}
var num = add(10, 10);
document.write("num is: "+ num);
這一腳本的結(jié)果是“num is: 20”。這一函數(shù)的好處是,它可以把你傳遞給它的任意兩個(gè)數(shù)字相加并返回相加后的值,你可以把該值賦給任何變量,而不是像清單20那樣總是改變同一個(gè)變量的值。
循環(huán)
正如你已經(jīng)見到的那樣,數(shù)組是存儲(chǔ)大量可重用數(shù)據(jù)的一種很棒的方式。但這不過是一個(gè)開始;for和while循環(huán)提供了遍歷這些數(shù)組、訪問它們的值和使用它們來執(zhí)行腳本的功能。
JavaScript語言中最常用到的循環(huán)類型是for循環(huán)。for循環(huán)通常是這樣構(gòu)成的,先是一個(gè)賦了數(shù)值的變量,然后該變量使用一個(gè)比較運(yùn)算符來和另一個(gè)值做比較,最后該數(shù)字值被遞增或是遞減。for循環(huán)中的比較通常是確定初始變量的數(shù)值是否小于或是大于另一個(gè)數(shù)值,接著在條件為true的這段時(shí)間內(nèi),循環(huán)運(yùn)行,變量遞增或是遞減直到條件的計(jì)算結(jié)果為false。清單22給出的例子說明了如何編寫一個(gè)for循環(huán),當(dāng)數(shù)值小于數(shù)組的長度時(shí)循環(huán)運(yùn)行。
清單22. 構(gòu)建一個(gè)for循環(huán)并遍歷一個(gè)數(shù)組
var colors = new Array("orange", "blue", "red", "brown");
for(var i=0; i
{
document.write("The color is: "+ colors[i] +"
");
}
數(shù)組的length屬性提供了一個(gè)與數(shù)組中的子項(xiàng)個(gè)數(shù)相等的數(shù)值,再一次說明,這里容易讓你出錯(cuò)的一點(diǎn)是,數(shù)組的ID是從0開始的,因此,如果數(shù)組中有4個(gè)子項(xiàng)的話,長度就是4,但數(shù)組中的索引則是0、1、2和3——沒有4。
另一種循環(huán)類型是while循環(huán),它們的執(zhí)行速度比for循環(huán)快,但適用在一些不是遍歷數(shù)組的情況中,比如說當(dāng)某個(gè)條件為true時(shí)執(zhí)行某個(gè)腳本。清單23展示了如何編寫這樣的一個(gè)while循環(huán),即當(dāng)數(shù)值變量小于10時(shí)執(zhí)行某個(gè)腳本。
清單23. 構(gòu)建while循環(huán)
var i = 0;
while(i<10)
{
document.write(i +" ");
i++;
}
可以注意到,while循環(huán)中的腳本包含了一行代碼,該行代碼疊加數(shù)值變量直到while循環(huán)中的條件為false為止。沒有這行代碼的話,你得到的就是一個(gè)無限循環(huán)。
結(jié)論
JavaScript語言可以說是最受歡迎的語言之一,現(xiàn)在你明白這是為什么了。這一簡單而又豐富的腳本語言帶來了如此之多的可能性,它提供的工具允許網(wǎng)站訪問者和下載后的網(wǎng)頁進(jìn)行交互,這一功能非常的強(qiáng)大。本文為理解JavaScript語言的基本原理奠定了基礎(chǔ),現(xiàn)在對(duì)你來說,要了解JavaScript庫函數(shù)的作用方式,以及如何使用它們來簡化網(wǎng)頁客戶端邏輯的編寫過程都應(yīng)該是更容易的事了。接下來要做到事情就是把這些概念付諸實(shí)踐,并開始探索JavaScript對(duì)象。
相關(guān)文章
Javascript實(shí)例教程(19) 使用HoTMetal(6)
Javascript實(shí)例教程(19) 使用HoTMetal(6)...2006-12-12javascript操作html控件實(shí)例(javascript添加html)
幾乎HTML所有標(biāo)記都可以說是HTML的控件,如select, input, div, table等。html標(biāo)簽便捷的操作,深受大家的喜歡。如何使用javascript來操作HTML控件,下面我介紹下比較麻煩的幾個(gè)控件2013-12-12基于JavaScript 數(shù)據(jù)類型之Boolean類型分析介紹
本篇文章小編為大家介紹,基于JavaScript 數(shù)據(jù)類型之Boolean類型分析介紹。需要的朋友參考下2013-04-04javascript學(xué)習(xí)筆記(二) js一些基本概念
javascript學(xué)習(xí)筆記之js一些基本概念,學(xué)習(xí)js的朋友可以參考下2012-06-06jQuery中文入門指南,翻譯加實(shí)例,jQuery的起點(diǎn)教程
jQuery中文入門指南,翻譯加實(shí)例,jQuery的起點(diǎn)教程...2007-02-02深入理解JavaScript系列(19):求值策略(Evaluation strategy)詳解
這篇文章主要介紹了深入理解JavaScript系列(19):求值策略(Evaluation strategy)詳解,本文講解了一般理論、按值傳遞、按引用傳遞、按共享傳遞(Call by sharing)、按共享傳遞是按值傳遞的特例等內(nèi)容,需要的朋友可以參考下2015-03-03JavaScript中判斷對(duì)象類型的幾種方法總結(jié)
本篇文章是對(duì)JavaScript中判斷對(duì)象類型的幾種方法進(jìn)行了詳細(xì)的總結(jié)介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-11-11ECMAScript6的新特性箭頭函數(shù)(Arrow Function)詳細(xì)介紹
這篇文章主要介紹了ECMAScript6的新特性箭頭函數(shù)(Arrow Function)詳細(xì)介紹,ECMAScript6其實(shí)就是JavaScript,它的新特性就是JS的新特性,引入只是時(shí)間問題,需要的朋友可以參考下2014-06-06