JavaScript初級(jí)教程(第四課)第2/2頁(yè)
更新時(shí)間:2007年04月05日 00:00:00 作者:
這是我定義的一個(gè)數(shù)組:
var monkeys = new Array("mattmarg","wendy","kristin","tim","aaron", "luke");
var kittyphile = new Array("wendy","ruby","roscoe","tim");
var discophile = new Array("mattmarg", "john travolta", "wendy");
var happy = new Array("tim", "wendy","stimpy", "aaron");
var cranky = new Array("ren", "mattmarg","luke");
隨著這些數(shù)組的定義,arrayIntersect函數(shù)給出,我們可輕而易舉的發(fā)現(xiàn)那些網(wǎng)猴酷愛(ài)迪斯科:愛(ài)跳舞的網(wǎng)猴
注意到盡管John Travolta喜愛(ài)迪斯科,但他不在monkeys請(qǐng)單中,則他就不是只愛(ài)跳舞的網(wǎng)猴為調(diào)用該函數(shù)值,可這么來(lái):
<a href="#" onClick="arrayIntersect('dancing monkeys',monkeys,discophile);">dancing monkeys</a>
這是個(gè)具有3個(gè)參數(shù)的函數(shù):一個(gè)代表交叉的姓名,第一個(gè)數(shù)組,及第二個(gè)數(shù)組。這也很容易發(fā)現(xiàn)愛(ài)貓的網(wǎng)猴名愛(ài)貓的網(wǎng)猴。
看一下源碼:
<a href="#" onClick="arrayIntersect('monkeys who love cats',monkeys,kittyphile);">cat-loving monkeys</a>
讓我們看看arrayIntersect函數(shù)本身:
function arrayIntersect(intersect_name, array_1, array_2)
{
var the_list = "";
for (loop_1=0; loop_1<array_1.length; loop_1++)
{
for (loop_2=0; loop_2<array_2.length; loop_2++)
{
if (array_1[loop_1] == array_2[loop_2])
{
the_list = the_list + array_1[loop_1] + " ";
}
}
}
alert("the " + intersect_name + " are: "+ the_list);
}
看看你是否已經(jīng)弄懂本例中的循環(huán)。關(guān)鍵是函數(shù)第一行:
function arrayIntersect(intersect_name, array_1, array_2)
這里定義了一個(gè)叫arrayIntersect的函數(shù),它有3個(gè)參數(shù)。就象上例,每個(gè)參數(shù)就象一個(gè)變量,當(dāng)函數(shù)調(diào)用時(shí)賦值。因此,當(dāng)函數(shù)被調(diào)用時(shí):
arrayIntersect('dancing monkeys',monkeys,discophile);
下列分配:
intersect_name = 'dancing monkeys'
array_1 = monkeys
array_2 = discophile
唯一需注意的是,你必須以正確的參數(shù)數(shù)目來(lái)調(diào)用函數(shù)。如果你一旦象這樣調(diào)用arrayIntersect:
arrayIntersect(monkeys,discophile);
將會(huì)出錯(cuò)。試一下看會(huì)發(fā)生什么錯(cuò)誤。
在任一標(biāo)準(zhǔn)的Javascript程序中,函數(shù)都是基本的部件。因此理解其工作原理極其重要。第四課就到此結(jié)束了。
對(duì)于JavaScript來(lái)說(shuō)有兩個(gè)主要部分:該語(yǔ)言本身及其對(duì)象。在第2課介紹的語(yǔ)法中,我們已經(jīng)研究了變量,語(yǔ)句和if
語(yǔ)句,這些是所有程序設(shè)計(jì)語(yǔ)言的組成部分?,F(xiàn)在來(lái)學(xué)習(xí)Java script語(yǔ)法的其余部分。
對(duì)于JavaScript語(yǔ)法來(lái)說(shuō),我們僅剩下三個(gè)問(wèn)題需要學(xué)習(xí):循環(huán)、數(shù)組和函數(shù)。
讓我們從循環(huán)開(kāi)始。
有時(shí)你想反復(fù)做同一件事。你想向某些人詢(xún)問(wèn)一個(gè)口令,你不斷地問(wèn),直到得到正確的口令。如果你只想給他們兩次嘗
試的機(jī)會(huì),你可以這么做:
var the_password = "pass the wrench";
var answer = prompt("What's the woyd?","");
if (answer != the_password) {
answer = prompt("What's the woyd?","");
if (password != the_password) {
document.write("You lose!<p>");
} else {
document.write("That's right!<p>");
}
} else {
document.write("That's right!<p>");
}
不幸的是如果你想不住地問(wèn)直到得到正確答案,上述做法是不起作用的。假使你是想詢(xún)問(wèn)四次而不是兩次,那這已經(jīng)是
很討厭的事了。你將使用四個(gè)層次的if語(yǔ)句,這決不是件好事。
反復(fù)做相似的事情的最好方法是使用一個(gè)循環(huán)(loop)。在這種情況下,你可以用一個(gè)循環(huán)來(lái)不斷的要求口令直到這個(gè)人
說(shuō)出為止。這里有一個(gè)while循環(huán)工作的例子,口令是:pass the wrench。
var password="pass the wrench";
var answer;
while (answer != password)
{
answer = prompt("What's the woyd?","");
}
在這個(gè)典型的Javascript中,我們從雙變量聲明開(kāi)始:
var password="pass the wrench";
var answer;
這里我們定義該密碼作為一個(gè)字符串,我們聲明一個(gè)稱(chēng)為answer的變量。你將理解為什么我們不得不立即聲明一個(gè)answer。下面幾行是非常重要的:
while (answer != password)
{
answer = prompt("What's the woyd?","");
}
這是一個(gè)while循環(huán)。while 循環(huán)的一般格式為:
while (some test is true)
{
do the stuff inside the curly braces
}
上述幾行表明:“當(dāng)answer不等于Password時(shí),執(zhí)行提示命令?!边@一循環(huán)將持續(xù)地執(zhí)行大括號(hào)內(nèi)的語(yǔ)句直至條件不成立。在使用者輸入的單詞與密碼一致(即Pass the wrench)的情況下,條件不成立。
由于在對(duì)一個(gè)未聲明的變量執(zhí)行一個(gè)如(answer!=password)的測(cè)試時(shí),在某些瀏覽器上會(huì)產(chǎn)生錯(cuò)誤,所以我們必須聲明answer。由于在while循環(huán)中將通過(guò)提示方案對(duì)answer賦值,在我們第一次進(jìn)行循環(huán)中,answer將沒(méi)有數(shù)值。提前定義它并設(shè)定其處始值為“”。
由于不定義循環(huán)經(jīng)常地使用,循環(huán)經(jīng)常用來(lái)執(zhí)行一組語(yǔ)句某一特定的次數(shù)。在接下來(lái)的教程中用另一個(gè)循環(huán)來(lái)演示如何作這項(xiàng)工作。
我們已見(jiàn)到了很多所請(qǐng)求的X`S(X`S是什么?說(shuō)不清,原文如此--jsfan注),現(xiàn)在復(fù)習(xí)一下:
第一步:請(qǐng)求X`S的數(shù)目
var width = prompt("How many x's would you like? (1-10 is good)","5");
下一步,聲明一些變量:
var a_line="";
var loop = 0;
現(xiàn)在,關(guān)鍵之處:
while (loop < width)
{
a_line = a_line + "x";
loop=loop+1;
}
即說(shuō):“當(dāng)變量循環(huán)小于所請(qǐng)求的X`S行寬時(shí),在該行加入另一X然后在循環(huán)值上加1。”該循環(huán)將繼續(xù)加一X到該行并在循環(huán)值
上加1直到循環(huán)不在小于請(qǐng)求的行寬。請(qǐng)看下列源碼分析:
第一次
a_line = "" (因?yàn)槌跏贾禐?")
loop=0 (因?yàn)槌跏贾禐?)
width=2 (用戶(hù)賦的值)
0 比2小,所以
a_line = a_line + "x", 所以 a_line = "x"
loop=loop+1, 所以 loop = 1
返回循環(huán):
第二次
loop=1
width=2
a_line = "x"
1比2小,所以
a_line = a_line + "x", so now a_line = "xx"
loop=loop+1, so now loop = 2
返回循環(huán):
第三次
loop=2
width=2
a_line = "xx"
2不小于2,所以退出循環(huán),繼續(xù)向下執(zhí)行:
隨后是:
alert(a_line);
啟動(dòng)一個(gè)警告對(duì)話(huà)框。
這種循環(huán)運(yùn)用的如此普遍以至于程序員們開(kāi)發(fā)了一些簡(jiǎn)便方式,條件循環(huán)可寫(xiě)成這樣:
while (loop < width)
{
a_line += "x"; //相當(dāng)于 a_line = a_line + "x";
loop++; //相當(dāng)于 loop=loop+1;
}
首行,“x”,表示“本身加x”。若已有a_number=5,那么可寫(xiě)成,a_number+=3,即是說(shuō):a_number=a_number+3。程序員就是這么偷懶的。
下行,loop++,意味著“自身加1”。于是loop++即為:loop=loop=1。它也可寫(xiě)成loop+=1。這樣偷懶行為非常有效。
就象不止一種方式在一個(gè)數(shù)上加1一樣,也有不止一種方法來(lái)寫(xiě)一個(gè)循環(huán)。While循環(huán)不是唯一的循環(huán)模式,另一流行的循環(huán)是for循環(huán)。
上例中while循環(huán)可以寫(xiě)成如下形式:
var a_line="";
var loop = 0;
while (loop < width)
{
a_line += "x";
loop++;
}
也可用For循環(huán)寫(xiě)成:
var a_line="";
for (loop=0; loop < width; loop++)
{
a_line += "x";
}
for循環(huán)的格式為:
for (initial value; test; increment)
{
do this stuff;
}
這樣,上述for loop設(shè)置loop=0并持續(xù)加1直到loop<width,這和上例中while loop相同,僅是少了數(shù)行而已。都表示“在a_line上加width次x”。
在我們使用循環(huán)之前應(yīng)明白一件事:循環(huán)可以嵌套。這里有一個(gè)關(guān)于嵌套循環(huán)的例子。
這是程序:
var height = prompt("How high do you want the grid? (1-10 is good)","10");
var width= prompt("How wide do you want the grid? (1-10 is good)","10");
var a_line;
var new_window = window.open("/webmonkey/98/04/files1a/grid.html","looper","width=400,height=400");
new_window.document.writeln("<h1>A Grid</h1>");
for (height_loop=0; height_loop< height; height_loop++)
{
a_line = "";
for(height_loop=0; height_loop<height; height_loop++)
{
a_line+="x";
}
new_window.document.writeln(a_line + "<br>");
}
在請(qǐng)求高及寬后,打開(kāi)一新窗口,并為它寫(xiě)一個(gè)頭,進(jìn)入for循環(huán)。第一個(gè)for循環(huán)設(shè)a_line=“”。試一下不用該行做一下本例,看看會(huì)發(fā)生什么。在初始化a_line后,程序進(jìn)入下一個(gè)for循環(huán),當(dāng)寬達(dá)到所需值后,建立X`S行并將它顯現(xiàn)在新窗口中。這些將發(fā)生height次。
相關(guān)文章
Javascript & DHTML 實(shí)例編程(教程)DOM基礎(chǔ)和基本API
Javascript & DHTML 實(shí)例編程(教程)DOM基礎(chǔ)和基本API...2007-06-06
De facto standard 世界上不可思議的事實(shí)標(biāo)準(zhǔn)
前些天IEBlog中提到實(shí)現(xiàn)互通并不是只靠標(biāo)準(zhǔn)就行,其中舉出了一些關(guān)于事實(shí)上的標(biāo)準(zhǔn)的考慮——所謂“事實(shí)上的標(biāo)準(zhǔn)”,也就是并非標(biāo)準(zhǔn),但大家都遵循著它去做事情的那么一種東西。2010-08-08
JavaScript中String.match()方法的使用詳解
這篇文章主要介紹了JavaScript中String.match()方法的使用詳解,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
js中對(duì)象的聲明方式以及數(shù)組的一些用法示例
本文為大家介紹下js中的對(duì)象聲明方式以及數(shù)組的一些用法,下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以參考下,希望對(duì)大家有所幫助2013-12-12
JavaScript初學(xué)者應(yīng)注意的七個(gè)細(xì)節(jié)詳細(xì)介紹
種種語(yǔ)言都有它特別的地方,對(duì)于JavaScript來(lái)說(shuō),使用var就可以聲明任意類(lèi)型的變量,這門(mén)腳本語(yǔ)言看起來(lái)很簡(jiǎn)單,然而想要寫(xiě)出優(yōu)雅的代碼卻是需要不斷積累經(jīng)驗(yàn)的,接下來(lái)介紹初學(xué)者應(yīng)注意2012-12-12
javascript學(xué)習(xí)筆記(五)原型和原型鏈詳解
許多人對(duì)JavaScript的原型及原型鏈仍感到困惑,網(wǎng)上的文章又大多長(zhǎng)篇大論,令讀者不明覺(jué)厲。我將用最簡(jiǎn)潔明了的文字介紹JavaScript的原型及原型鏈。2014-10-10
HTML5實(shí)現(xiàn)留言和回復(fù)頁(yè)面樣式
這篇文章主要介紹了用HTML5如何實(shí)現(xiàn)留言和回復(fù)樣式,需要的朋友可以參考下2015-07-07
<script defer> defer 是什么意思
好多朋友不知道 script后面加個(gè)defer是什么意思有什么作用。2009-05-05

