我們已了解變量可是數字、字符串及對象參數。還有一個Javascript的重要部分：數組。
數組是一種列表。各種列表比如名單、URL以顏色列表都可以存儲在數組中。
這裡我們生成顏色的數組：
var colors = new Array("red","blue","green");
現在你就有了一個數組，你能對它做什麼呢？數組的優點在於數組中的各個元素可以通過數字調用。第一個元素的數字是0，可以用以下方式調用：
var the_element = colors[0];
執行這一行JavaScript指令時，變量the_element所被賦予的值是字符串"red" 。通過寫出數組的名稱並將數組中元素的順序號放在方括號內就可調用數組中的該元素。數組中第2個元素的順序號是1。
一旦生成數組後，你可以添加和修改數組值。如果你打算將顏色數組的第1個元素有紅色該為紫色，你可以這樣做：
colors[0] = "purple";
數組經常用於循環。下面將講數組和循環的應用。
數組是一項非常有用的東西，因為你可以循環調用數組中的各個元素執行某項功能。以下是循環顯示一個URL數組中的各個元素的例子。
首先，要使該例子發揮作用，我們需要聲明一些變量：
var url_names = new Array("hits.org","awaken.org","bianca.com");
var a_url;
接下來，我們循環調用數組中的各個元素，打開每個URL並對待用戶點擊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");
}
首先，你會注意到循環從0一直到url_names.length這個變量。將.length放在數組名的後面由於告訴你數組中有多少個元素。但是，注意數組元素的數目同數組最後一個元素的索引號（順序號）不同。如果數組中有3個元素，則數組的長度為3，但是數組中最後一個元素的索引號卻是array[2].。這是因為數組中第1個元素的索引號是array[0].。如果你執行數組調用時得到諸如"object not found" 的錯誤信息，而你的代碼中有一個數組，則有可能是因為你將數組元素的索引號同數組中元素的數目混淆了。
不也許還會注意到將.length放在數組的結尾處很有點想給一個對象附加一些屬性。這是因為數組本身就是對象，而length就是數組的一項屬性。
數組術語對象的另一個表現是：你需要用新指令才能生成新的數組。在上例中，url_names = new Array(......) 實際可以解釋為：生成一個新數組，用url_names對其做一個引用。你可以注意到單詞"new" 以這種方式被應用時，就生成了一個新的對象。
循環中的第1行生成一個變量。其賦值為一個字符串。
a_url = "http://www." + url_names[loop] + "/";
循環開始時，變量循環的初始值為0。url_names數組的第1個元素是字符串"hits.org".，所以在第一次循環中，變量a_url等值於字符串"http://www.hits.org/".。
循環的下一行用該URL打開一個窗口
var new_window=open(a_url,"new_window","width=300,height=300");
由於每次打開窗口時我們給窗口起的名稱都一樣，所以在轉到新的URL時，不會打開許多窗口。如果我們在上例中去掉窗口名稱"new_window"，則每次循環時就會打開一個新窗口。
循環的第3行只是打開一個alert框，並對待用戶點擊OK 按鈕。
數組還可以由於其它元素，而不只是字符串。數組可以應用於JavaScript文檔對象模型（Document Object Model）的各個方面。下一講將要講述這方面的知識。
下面是onClick=""鏈接中的代碼：
var change=prompt('Change which image (0 or 1)?','');
window.document.images[change].src='three.jpg';
本例打算用圖片交換來演示數組如何介入DOM的。試一下本例，看一下源碼。
document.image_name.src = 'some_image.gif';
為了做這事，每個圖片都需命名到。若你不知要交換的圖片名，但卻知道其在HTML頁中的順序。可以用它的DOM數來指定該圖片。
一個HTML文件中的第一個圖片是document.images[0]，第二個是document.images[1]，如此類推。若你想知道一個文件中有多少個圖片，你可檢查圖片數組長度知道：document.images.length。例如，你想改變你的網頁中所有圖形為一個Spacer GLF圖片，你可以這樣做：
for(loop=0; loop<document.images.length; loop++)
{
document.images[loop].src = 'spacer.gif';
}
清楚了吧？
好。下一講我們准備學習函數。
函數是編程需學的最後一個基本組成。所有的程序語言都是函數。函數是一些角次可調用的、無須重寫的東西。
如果你想教會自己快速閱讀並且用一個一旦點擊可告訴你當前時間的長文本鏈接。
例如…時間!
看源碼：
<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);">時間!</a>
在這裡這段JavaScript的工作細節並不重要；一會我們再回來復習一下。
重要的是它太長了。若這些時間鏈接再有10個，你須每次剪貼這段程序。這使你的HTML既長且難看。另外，若你想改變這段程序，就必須在10個不同地方改變。
你可以寫一個函數來執行而不用作10次拷貝程序。這裡的函數使用變的即容易編輯又容易閱讀。
請看如何寫一段計時函數。
該HTML頁含有一個叫做announceTime的函數。從一個鏈接調用annoumnceTime：
<a href="#" onClick="announceTime();">時間!</a>
就象這樣：
下行看起來就象第二課：
<a href="#" onClick="alert('Hello!');">Hello!</a>
這稱為從一個鏈接調用警告對話框。函數就象一種方法，唯一不同的是，方法依附於一個對象。在這個警告的例子中，這個對象是一個窗口對象。
讓我們回到函數本身。如果你看看源碼，你將看到函數位於HTML文件的頭部中。
<html>
<head>
<title>無參數函數</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>
好，讓我們逐行復習這個函數。首先，所有函數來自於該種格式：
function functionName(parameter list)
{
statements ...
}
函數的命名規則於變量差不多。第一個字符必須是字母或一標准符號。其余字符可為數字或一橫線。但必須保證函數不於已定義的變量同名。否則將出現很糟糕的結果。我是用內部大寫的方式命名函數以保證它們不與字符碰巧重名。
函數名後是一組參數。本例是無參數的函數，下一例中我們再舉例描述。
參數後是函數的主體。這是一組當函數調用後是想運行的語句。在下面幾個例子中，我打算利用這個報時器，所以讓我描述一下它是怎樣工作的。
第一行：
var the_date = new Date();
取得一個新的日期對象。就象你在用數組時取得一個新的數組一樣，在你要找出即時是什麼時間時你需要先取得一個日期對象。當找到了一個新的日期對象，它自動重置到當前的日期和時間。為了在對象以外得到這個信息，你必須使用這種對象方法：
這些方法從日期對象上取得了合適的數字。
var the_hour = the_date.getHours();
var the_minute = the_date.getMinutes();
var the_second = the_date.getSeconds();
你可能疑惑：我怎樣能假定日期對象知道何種方式？甚或我如何知道有這樣一件事可作為日期對象？這些緣由應從Javascript庫中獲取，我將盡我所能解釋內置Javascript對象，但不一定能徹底的使你清楚。
函數的其他部分就很清楚了。它以這種方式調用返回數字，把它們變成字符串，並且調用警告方式以彈出一個字符串對話框。注意你可以在函數內部調用一個方式和函數。我們將詳盡討論。
現在如果你也玩透了時間鏈接，你可能注意到了有些什麼不對的事。你每次可能會得到這樣的反饋：“12:12:04”，這是getSecond()將返回值為“4”。那麼當你合成為時間時，你看到的就是the_minute+“:”+the_second得到14:4而非是我們想要的。解決它是個容易的事，需要個新的函數來修補分、秒合成值。
請看參數及返回值。
盡管無參數的函數在減少寫源碼工作量，HTML源碼可讀性上很有用，但有參數的函數會更為有用。
上一例中，當返回的分、秒值小於10時會有問題發生。我們想要看到的秒值是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;
}
它會非常有效。但是注意，同樣的源碼你寫了兩次：若某件東西小於10，則前面加“0”。所以要考慮當用同一代碼要多次重寫時，用函數來做。本例中我寫了一個叫fixNumber的函數：
function fixNumber(the_number)
{
if (the_number < 10)
{
the_number = "0" + the_number;
}
return the_number;
}
fixNumber的參數是the_number。一個參數也是一個變量，當該函數被調用時，其參數值也被設置。在本例中，我們這樣調用函數：
var fixed_variable = fixNumber(4);
參數the_number在函數中設置為4。到現在你應該對fixNumber的主體有了一定的了解。它的意思是：如果變量the_number小於10，則在它的前面加一個0。這裡面新的內容是return指令：返回the_number的值。在下面的情況中就會用到return指令：
var some_variable = someFunction();
變量some_variable的值是函數someFunction() 的返回值。在fixNumber中，我加入: return the_number，則退出函數並將返回the_number的值返回給任何一個等待被設置的變量。
所以，我這樣書寫代碼：
var fixed_variable = fixNumber(4);
the_number的初始值將通過函數調用被設置為4，然後由於4小於10，所以the_number將被改為"04"。然後the_number值被返回，而且變量fixed_variable將被設置為"04" 。
為了將fixNumber包括在原始函數announceTime()中，我添加了如下內容：
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);
}
假定時間鏈接被點擊時，時間為12:04:05。用new Date()獲得日期，用getHours()獲得小時，用前面所屬方法獲得分鐘，分鐘在本例中應該是4, 然後調用fixNumber，其參數為the_minute:
var fixed_minute = fixNumber(the_minute);
當fixNumber()被調用時，參數the_number被設置為the_minute。在本例中由於the_minute是4，所以the_number將被設置為4。
設置完參數後，我們進入函數主體。由於4小於10，the_number被改變為"04"，然後the_number值用return指令返回。當"04"被fixNumber返回後，本例fixed_minute就等於"04"。
我們一步一步來研究該過程。假定時間為12:04:05。
我們從函數announceTime()開始
1.the_minute = the_date.getMinutes();則the_minute = 4
2.fixed_minute = fixNumber(the_minute);等於函數fixNumber()並將其值返回給fixed_minute
現在進入函數fixNumber()
3.函數fixNumber(the_number)fixNumber()用the_minute的值調用，the_minute值是4，所以現在the_number = 4
4.如果(the_number < 10) {the_number = "0" + the_number;}由於4小於10，所以the_number現在等於"04"
5.返回the_number值，退出該函數並返回值"04"
現在已經退出函數fixTime()，所以現在我們回到announceTime()
6.該函數返回值為"04"，所以fixed_minute 現在等於"04"
該例用了一個只有一個參數的函數。實際上你可以為函數設置多個參數。下一講我們將要講多於一個參數的函數。
當前1/2頁
12下一頁閱讀全文