JavaScript初級(jí)教程(第四課)
更新時(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)猴酷愛迪斯科:愛跳舞的網(wǎng)猴
注意到盡管John Travolta喜愛迪斯科,但他不在monkeys請(qǐng)單中,則他就不是只愛跳舞的網(wǎng)猴為調(diào)用該函數(shù)值,可這么來:
<a href="#" onClick="arrayIntersect('dancing monkeys',monkeys,discophile);">dancing monkeys</a>
這是個(gè)具有3個(gè)參數(shù)的函數(shù):一個(gè)代表交叉的姓名,第一個(gè)數(shù)組,及第二個(gè)數(shù)組。這也很容易發(fā)現(xiàn)愛貓的網(wǎng)猴名愛貓的網(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ù)目來調(diào)用函數(shù)。如果你一旦象這樣調(diào)用arrayIntersect:
arrayIntersect(monkeys,discophile);
將會(huì)出錯(cuò)。試一下看會(huì)發(fā)生什么錯(cuò)誤。
在任一標(biāo)準(zhǔn)的Javascript程序中,函數(shù)都是基本的部件。因此理解其工作原理極其重要。第四課就到此結(jié)束了。
對(duì)于JavaScript來說有兩個(gè)主要部分:該語言本身及其對(duì)象。在第2課介紹的語法中,我們已經(jīng)研究了變量,語句和if
語句,這些是所有程序設(shè)計(jì)語言的組成部分?,F(xiàn)在來學(xué)習(xí)Java script語法的其余部分。
對(duì)于JavaScript語法來說,我們僅剩下三個(gè)問題需要學(xué)習(xí):循環(huán)、數(shù)組和函數(shù)。
讓我們從循環(huán)開始。
有時(shí)你想反復(fù)做同一件事。你想向某些人詢問一個(gè)口令,你不斷地問,直到得到正確的口令。如果你只想給他們兩次嘗
試的機(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>");
}
不幸的是如果你想不住地問直到得到正確答案,上述做法是不起作用的。假使你是想詢問四次而不是兩次,那這已經(jīng)是
很討厭的事了。你將使用四個(gè)層次的if語句,這決不是件好事。
反復(fù)做相似的事情的最好方法是使用一個(gè)循環(huán)(loop)。在這種情況下,你可以用一個(gè)循環(huán)來不斷的要求口令直到這個(gè)人
說出為止。這里有一個(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中,我們從雙變量聲明開始:
var password="pass the wrench";
var answer;
這里我們定義該密碼作為一個(gè)字符串,我們聲明一個(gè)稱為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)的語句直至條件不成立。在使用者輸入的單詞與密碼一致(即Pass the wrench)的情況下,條件不成立。
由于在對(duì)一個(gè)未聲明的變量執(zhí)行一個(gè)如(answer!=password)的測(cè)試時(shí),在某些瀏覽器上會(huì)產(chǎn)生錯(cuò)誤,所以我們必須聲明answer。由于在while循環(huán)中將通過提示方案對(duì)answer賦值,在我們第一次進(jìn)行循環(huán)中,answer將沒有數(shù)值。提前定義它并設(shè)定其處始值為“”。
由于不定義循環(huán)經(jīng)常地使用,循環(huán)經(jīng)常用來執(zhí)行一組語句某一特定的次數(shù)。在接下來的教程中用另一個(gè)循環(huán)來演示如何作這項(xiàng)工作。
我們已見到了很多所請(qǐng)求的X`S(X`S是什么?說不清,原文如此--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;
}
即說:“當(dāng)變量循環(huán)小于所請(qǐng)求的X`S行寬時(shí),在該行加入另一X然后在循環(huán)值上加1?!痹撗h(huán)將繼續(xù)加一X到該行并在循環(huán)值
上加1直到循環(huán)不在小于請(qǐng)求的行寬。請(qǐng)看下列源碼分析:
第一次
a_line = "" (因?yàn)槌跏贾禐?")
loop=0 (因?yàn)槌跏贾禐?)
width=2 (用戶賦的值)
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án)運(yùn)用的如此普遍以至于程序員們開發(fā)了一些簡(jiǎn)便方式,條件循環(huán)可寫成這樣:
while (loop < width)
{
a_line += "x"; //相當(dāng)于 a_line = a_line + "x";
loop++; //相當(dāng)于 loop=loop+1;
}
首行,“x”,表示“本身加x”。若已有a_number=5,那么可寫成,a_number+=3,即是說:a_number=a_number+3。程序員就是這么偷懶的。
下行,loop++,意味著“自身加1”。于是loop++即為:loop=loop=1。它也可寫成loop+=1。這樣偷懶行為非常有效。
就象不止一種方式在一個(gè)數(shù)上加1一樣,也有不止一種方法來寫一個(gè)循環(huán)。While循環(huán)不是唯一的循環(huán)模式,另一流行的循環(huán)是for循環(huán)。
上例中while循環(huán)可以寫成如下形式:
var a_line="";
var loop = 0;
while (loop < width)
{
a_line += "x";
loop++;
}
也可用For循環(huán)寫成:
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)求高及寬后,打開一新窗口,并為它寫一個(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入門學(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ì)介紹
種種語言都有它特別的地方,對(duì)于JavaScript來說,使用var就可以聲明任意類型的變量,這門腳本語言看起來很簡(jiǎn)單,然而想要寫出優(yōu)雅的代碼卻是需要不斷積累經(jīng)驗(yàn)的,接下來介紹初學(xué)者應(yīng)注意2012-12-12
javascript學(xué)習(xí)筆記(五)原型和原型鏈詳解
許多人對(duì)JavaScript的原型及原型鏈仍感到困惑,網(wǎng)上的文章又大多長(zhǎng)篇大論,令讀者不明覺厲。我將用最簡(jiǎn)潔明了的文字介紹JavaScript的原型及原型鏈。2014-10-10
HTML5實(shí)現(xiàn)留言和回復(fù)頁面樣式
這篇文章主要介紹了用HTML5如何實(shí)現(xiàn)留言和回復(fù)樣式,需要的朋友可以參考下2015-07-07
<script defer> defer 是什么意思
好多朋友不知道 script后面加個(gè)defer是什么意思有什么作用。2009-05-05

