|
|
數(shù)組是一種列表。各種列表比如名單、URL以顏色列表都可以存儲(chǔ)在數(shù)組中。
這里我們生成顏色的數(shù)組：
var colors = new Array("red","blue","green");
現(xiàn)在你就有了一個(gè)數(shù)組，你能對(duì)它做什么呢？數(shù)組的優(yōu)點(diǎn)在于數(shù)組中的各個(gè)元素可以通過(guò)數(shù)字調(diào)用。第一個(gè)元素的數(shù)字是0，可以用以下方式調(diào)用：
var the_element = colors[0];
執(zhí)行這一行JavaScript指令時(shí)，變量the_element所被賦予的值是字符串"red" 。通過(guò)寫(xiě)出數(shù)組的名稱(chēng)并將數(shù)組中元素的順序號(hào)放在方括號(hào)內(nèi)就可調(diào)用數(shù)組中的該元素。數(shù)組中第2個(gè)元素的順序號(hào)是1。
一旦生成數(shù)組后，你可以添加和修改數(shù)組值。如果你打算將顏色數(shù)組的第1個(gè)元素有紅色該為紫色，你可以這樣做：
colors[0] = "purple";
數(shù)組經(jīng)常用于循環(huán)。下面將講數(shù)組和循環(huán)的應(yīng)用。
數(shù)組是一項(xiàng)非常有用的東西，因?yàn)槟憧梢匝h(huán)調(diào)用數(shù)組中的各個(gè)元素執(zhí)行某項(xiàng)功能。以下是循環(huán)顯示一個(gè)URL數(shù)組中的各個(gè)元素的例子。
首先，要使該例子發(fā)揮作用，我們需要聲明一些變量：
var url_names = new Array("hits.org","awaken.org","bianca.com");
var a_url;
接下來(lái)，我們循環(huán)調(diào)用數(shù)組中的各個(gè)元素，打開(kāi)每個(gè)URL并對(duì)待用戶點(diǎn)擊alert框的OK按鈕：
for(loop=0; loop<url_names.length;loop++)
{
// make the name of a url, for example http://www.hits.org/
a_url = "http://www." + url_names[loop] + "/";
// open a window
var new_window=open(a_url,"new_window","width=300,height=300");
// wait for the click
alert("hit ok for the next site");
}
首先，你會(huì)注意到循環(huán)從0一直到url_names.length這個(gè)變量。將.length放在數(shù)組名的后面由于告訴你數(shù)組中有多少個(gè)元素。但是，注意數(shù)組元素的數(shù)目同數(shù)組最后一個(gè)元素的索引號(hào)（順序號(hào)）不同。如果數(shù)組中有3個(gè)元素，則數(shù)組的長(zhǎng)度為3，但是數(shù)組中最后一個(gè)元素的索引號(hào)卻是array[2].。這是因?yàn)閿?shù)組中第1個(gè)元素的索引號(hào)是array[0].。如果你執(zhí)行數(shù)組調(diào)用時(shí)得到諸如"object not found" 的錯(cuò)誤信息，而你的代碼中有一個(gè)數(shù)組，則有可能是因?yàn)槟銓?shù)組元素的索引號(hào)同數(shù)組中元素的數(shù)目混淆了。
不也許還會(huì)注意到將.length放在數(shù)組的結(jié)尾處很有點(diǎn)想給一個(gè)對(duì)象附加一些屬性。這是因?yàn)閿?shù)組本身就是對(duì)象，而length就是數(shù)組的一項(xiàng)屬性。
數(shù)組術(shù)語(yǔ)對(duì)象的另一個(gè)表現(xiàn)是：你需要用新指令才能生成新的數(shù)組。在上例中，url_names = new Array(......) 實(shí)際可以解釋為：生成一個(gè)新數(shù)組，用url_names對(duì)其做一個(gè)引用。你可以注意到單詞"new" 以這種方式被應(yīng)用時(shí)，就生成了一個(gè)新的對(duì)象。
循環(huán)中的第1行生成一個(gè)變量。其賦值為一個(gè)字符串。
a_url = "http://www." + url_names[loop] + "/";
循環(huán)開(kāi)始時(shí)，變量循環(huán)的初始值為0。url_names數(shù)組的第1個(gè)元素是字符串"hits.org".，所以在第一次循環(huán)中，變量a_url等值于字符串"http://www.hits.org/".。
循環(huán)的下一行用該URL打開(kāi)一個(gè)窗口
var new_window=open(a_url,"new_window","width=300,height=300");
由于每次打開(kāi)窗口時(shí)我們給窗口起的名稱(chēng)都一樣，所以在轉(zhuǎn)到新的URL時(shí)，不會(huì)打開(kāi)許多窗口。如果我們?cè)谏侠腥サ舸翱诿Q(chēng)"new_window"，則每次循環(huán)時(shí)就會(huì)打開(kāi)一個(gè)新窗口。
循環(huán)的第3行只是打開(kāi)一個(gè)alert框，并對(duì)待用戶點(diǎn)擊OK 按鈕。
數(shù)組還可以由于其它元素，而不只是字符串。數(shù)組可以應(yīng)用于JavaScript文檔對(duì)象模型（Document Object Model）的各個(gè)方面。下一講將要講述這方面的知識(shí)。
下面是onClick=""鏈接中的代碼：
var change=prompt('Change which image (0 or 1)?','');
window.document.images[change].src='three.jpg';
本例打算用圖片交換來(lái)演示數(shù)組如何介入DOM的。試一下本例，看一下源碼。
document.image_name.src = 'some_image.gif';
為了做這事，每個(gè)圖片都需命名到。若你不知要交換的圖片名，但卻知道其在HTML頁(yè)中的順序。可以用它的DOM數(shù)來(lái)指定該圖片。
一個(gè)HTML文件中的第一個(gè)圖片是document.images[0]，第二個(gè)是document.images[1]，如此類(lèi)推。若你想知道一個(gè)文件中有多少個(gè)圖片，你可檢查圖片數(shù)組長(zhǎng)度知道：document.images.length。例如，你想改變你的網(wǎng)頁(yè)中所有圖形為一個(gè)Spacer GLF圖片，你可以這樣做：
for(loop=0; loop<document.images.length; loop++)
{
document.images[loop].src = 'spacer.gif';
}
清楚了吧？
好。下一講我們準(zhǔn)備學(xué)習(xí)函數(shù)。
函數(shù)是編程需學(xué)的最后一個(gè)基本組成。所有的程序語(yǔ)言都是函數(shù)。函數(shù)是一些角次可調(diào)用的、無(wú)須重寫(xiě)的東西。
如果你想教會(huì)自己快速閱讀并且用一個(gè)一旦點(diǎn)擊可告訴你當(dāng)前時(shí)間的長(zhǎng)文本鏈接。
例如…時(shí)間!
看源碼：
<a href="#" onClick="
var the_date = new Date();
var the_hour = the_date.getHours();
var the_minute = the_date.getMinutes();
var the_second = the_date.getSeconds();
var the_time = the_hour + ':' + the_minute + ':' + the_second;
alert('The time is now: ' + the_time);">時(shí)間!</a>
在這里這段JavaScript的工作細(xì)節(jié)并不重要；一會(huì)我們?cè)倩貋?lái)復(fù)習(xí)一下。
重要的是它太長(zhǎng)了。若這些時(shí)間鏈接再有10個(gè)，你須每次剪貼這段程序。這使你的HTML既長(zhǎng)且難看。另外，若你想改變這段程序，就必須在10個(gè)不同地方改變。
你可以寫(xiě)一個(gè)函數(shù)來(lái)執(zhí)行而不用作10次拷貝程序。這里的函數(shù)使用變的即容易編輯又容易閱讀。
請(qǐng)看如何寫(xiě)一段計(jì)時(shí)函數(shù)。
該HTML頁(yè)含有一個(gè)叫做announceTime的函數(shù)。從一個(gè)鏈接調(diào)用annoumnceTime：
<a href="#" onClick="announceTime();">時(shí)間!</a>
就象這樣：
下行看起來(lái)就象第二課：
<a href="#" onClick="alert('Hello!');">Hello!</a>
這稱(chēng)為從一個(gè)鏈接調(diào)用警告對(duì)話框。函數(shù)就象一種方法，唯一不同的是，方法依附于一個(gè)對(duì)象。在這個(gè)警告的例子中，這個(gè)對(duì)象是一個(gè)窗口對(duì)象。
讓我們回到函數(shù)本身。如果你看看源碼，你將看到函數(shù)位于HTML文件的頭部中。
<html>
<head>
<title>無(wú)參數(shù)函數(shù)</title>
<script langauge="JavaScript">
<!-- hide me
function announceTime()
{
//get the date, the hour, minutes, and seconds
var the_date = new Date();
var the_hour = the_date.getHours();
var the_minute = the_date.getMinutes();
var the_second = the_date.getSeconds();
//put together the string and alert with it
var the_time = the_hour + ":" + the_minute + ":" + the_second;
alert("The time is now: " + the_time);
}
// show me -->
</script>
</head>
<body>
...
</body>
</html>
好，讓我們逐行復(fù)習(xí)這個(gè)函數(shù)。首先，所有函數(shù)來(lái)自于該種格式：
function functionName(parameter list)
{
statements ...
}
函數(shù)的命名規(guī)則于變量差不多。第一個(gè)字符必須是字母或一標(biāo)準(zhǔn)符號(hào)。其余字符可為數(shù)字或一橫線。但必須保證函數(shù)不于已定義的變量同名。否則將出現(xiàn)很糟糕的結(jié)果。我是用內(nèi)部大寫(xiě)的方式命名函數(shù)以保證它們不與字符碰巧重名。
函數(shù)名后是一組參數(shù)。本例是無(wú)參數(shù)的函數(shù)，下一例中我們?cè)倥e例描述。
參數(shù)后是函數(shù)的主體。這是一組當(dāng)函數(shù)調(diào)用后是想運(yùn)行的語(yǔ)句。在下面幾個(gè)例子中，我打算利用這個(gè)報(bào)時(shí)器，所以讓我描述一下它是怎樣工作的。
第一行：
var the_date = new Date();
取得一個(gè)新的日期對(duì)象。就象你在用數(shù)組時(shí)取得一個(gè)新的數(shù)組一樣，在你要找出即時(shí)是什么時(shí)間時(shí)你需要先取得一個(gè)日期對(duì)象。當(dāng)找到了一個(gè)新的日期對(duì)象，它自動(dòng)重置到當(dāng)前的日期和時(shí)間。為了在對(duì)象以外得到這個(gè)信息，你必須使用這種對(duì)象方法：
這些方法從日期對(duì)象上取得了合適的數(shù)字。
var the_hour = the_date.getHours();
var the_minute = the_date.getMinutes();
var the_second = the_date.getSeconds();
你可能疑惑：我怎樣能假定日期對(duì)象知道何種方式？甚或我如何知道有這樣一件事可作為日期對(duì)象？這些緣由應(yīng)從Javascript庫(kù)中獲取，我將盡我所能解釋內(nèi)置Javascript對(duì)象，但不一定能徹底的使你清楚。
函數(shù)的其他部分就很清楚了。它以這種方式調(diào)用返回?cái)?shù)字，把它們變成字符串，并且調(diào)用警告方式以彈出一個(gè)字符串對(duì)話框。注意你可以在函數(shù)內(nèi)部調(diào)用一個(gè)方式和函數(shù)。我們將詳盡討論。
現(xiàn)在如果你也玩透了時(shí)間鏈接，你可能注意到了有些什么不對(duì)的事。你每次可能會(huì)得到這樣的反饋：“12:12:04”，這是getSecond()將返回值為“4”。那么當(dāng)你合成為時(shí)間時(shí)，你看到的就是the_minute+“:”+the_second得到14:4而非是我們想要的。解決它是個(gè)容易的事，需要個(gè)新的函數(shù)來(lái)修補(bǔ)分、秒合成值。
請(qǐng)看參數(shù)及返回值。
盡管無(wú)參數(shù)的函數(shù)在減少寫(xiě)源碼工作量，HTML源碼可讀性上很有用，但有參數(shù)的函數(shù)會(huì)更為有用。
上一例中，當(dāng)返回的分、秒值小于10時(shí)會(huì)有問(wèn)題發(fā)生。我們想要看到的秒值是04而非4。我們可以這樣做：
var the_minute = the_date.getMinutes();
if (the_minute < 10)
{
the_minute = "0" + the_minute;
}
var the_second = the_date.getSeconds();
if (the_second < 10)
{
the_second = "0" + the_second;
}
它會(huì)非常有效。但是注意，同樣的源碼你寫(xiě)了兩次：若某件東西小于10，則前面加“0”。所以要考慮當(dāng)用同一代碼要多次重寫(xiě)時(shí)，用函數(shù)來(lái)做。本例中我寫(xiě)了一個(gè)叫fixNumber的函數(shù)：
function fixNumber(the_number)
{
if (the_number < 10)
{
the_number = "0" + the_number;
}
return the_number;
}
fixNumber的參數(shù)是the_number。一個(gè)參數(shù)也是一個(gè)變量，當(dāng)該函數(shù)被調(diào)用時(shí)，其參數(shù)值也被設(shè)置。在本例中，我們這樣調(diào)用函數(shù)：
var fixed_variable = fixNumber(4);
參數(shù)the_number在函數(shù)中設(shè)置為4。到現(xiàn)在你應(yīng)該對(duì)fixNumber的主體有了一定的了解。它的意思是：如果變量the_number小于10，則在它的前面加一個(gè)0。這里面新的內(nèi)容是return指令：返回the_number的值。在下面的情況中就會(huì)用到return指令：
var some_variable = someFunction();
變量some_variable的值是函數(shù)someFunction() 的返回值。在fixNumber中，我加入: return the_number，則退出函數(shù)并將返回the_number的值返回給任何一個(gè)等待被設(shè)置的變量。
所以，我這樣書(shū)寫(xiě)代碼：
var fixed_variable = fixNumber(4);
the_number的初始值將通過(guò)函數(shù)調(diào)用被設(shè)置為4，然后由于4小于10，所以the_number將被改為"04"。然后the_number值被返回，而且變量fixed_variable將被設(shè)置為"04" 。
為了將fixNumber包括在原始函數(shù)announceTime()中，我添加了如下內(nèi)容：
function announceTime()
{
//get the date, the hour, minutes, and seconds
var the_date = new Date();
var the_hour = the_date.getHours();
var the_minute = the_date.getMinutes();
var fixed_minute = fixNumber(the_minute);
var the_second = the_date.getSeconds();
var fixed_second = fixNumber(the_second);
//put together the string and alert with it
var the_time = the_hour + ":" + fixed_minute + ":" + fixed_second;
alert("The time is now: " +the_time);
}
假定時(shí)間鏈接被點(diǎn)擊時(shí)，時(shí)間為12:04:05。用new Date()獲得日期，用getHours()獲得小時(shí)，用前面所屬方法獲得分鐘，分鐘在本例中應(yīng)該是4, 然后調(diào)用fixNumber，其參數(shù)為the_minute:
var fixed_minute = fixNumber(the_minute);
當(dāng)fixNumber()被調(diào)用時(shí)，參數(shù)the_number被設(shè)置為the_minute。在本例中由于the_minute是4，所以the_number將被設(shè)置為4。
設(shè)置完參數(shù)后，我們進(jìn)入函數(shù)主體。由于4小于10，the_number被改變?yōu)?04"，然后the_number值用return指令返回。當(dāng)"04"被fixNumber返回后，本例fixed_minute就等于"04"。
我們一步一步來(lái)研究該過(guò)程。假定時(shí)間為12:04:05。
我們從函數(shù)announceTime()開(kāi)始
1.the_minute = the_date.getMinutes();則the_minute = 4
2.fixed_minute = fixNumber(the_minute);等于函數(shù)fixNumber()并將其值返回給fixed_minute
現(xiàn)在進(jìn)入函數(shù)fixNumber()
3.函數(shù)fixNumber(the_number)fixNumber()用the_minute的值調(diào)用，the_minute值是4，所以現(xiàn)在the_number = 4
4.如果(the_number < 10) {the_number = "0" + the_number;}由于4小于10，所以the_number現(xiàn)在等于"04"
5.返回the_number值，退出該函數(shù)并返回值"04"
現(xiàn)在已經(jīng)退出函數(shù)fixTime()，所以現(xiàn)在我們回到announceTime()
6.該函數(shù)返回值為"04"，所以fixed_minute 現(xiàn)在等于"04"
該例用了一個(gè)只有一個(gè)參數(shù)的函數(shù)。實(shí)際上你可以為函數(shù)設(shè)置多個(gè)參數(shù)。下一講我們將要講多于一個(gè)參數(shù)的函數(shù)。
JavaScript技術(shù)：JavaScript初級(jí)教程(第四課)第1/2頁(yè)，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
