JavaScript: Array列陣

Arrays(列陣)是 JavaScript 裡面最有用來建造資料庫的方式。在使用 Arrays 之前, 你一定要先了解 Array的計算方式。因為所有 var 的質都是由 0 算起的, 所以 Array 上 var 的數量一定是比Array最大的 index value 還大一。以下的例子會解釋比較容易。

STEP1:【做一個Array】

Arrays 是設定在 var(Variables) 裡面的。所以, 你在做 Array 之前, 你要先寫 var BigCities = new Array(10)。在這裡, 我們把 var 叫做 BigCities, 然後等於 new Array(10)。意思就是說, 我們把 Something 設為 "新" 的 Array, 而 Array 裡面只有到 10 而已。
可是到這裡我們只有先設一個 Array 的開頭設定而已, 我們現在要加入更多的資料進去。首先, 要是第一行, 我們先把var的質寫在前面變成: BigCities。然後在加入 [0] 在後面。然後在加一個 array 的名字....我們叫他 Taipei 吧!
BigCities[0] = "Taipei"
這樣就是一個 array 啦! 不過你之前 Array 的 index value 不是說 "十" 嗎? 所以我們就要寫十一列啦!就像這樣: (還記得從零開始吧!) BigCities[0] = "Taipei"
BigCities[1] = "Tokyo"
BigCities[2] = "NewYork"
....
BigCities[10] = "LosAngeles"
嗯, Array作好了, 接下來就是要呼叫Array。我們通常都是用Eventhandler或是Method(方法)來呼叫 function 的, 在此, 我們用alert()來呼叫Array。語法如下:
alert("最大的城市是 " + BigCities[2] + ".")
注意到 + ? 它就是呼叫 Array 用的。大至上就是這樣啦!

STEP2:【程式範例】

看一下以下程式:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var BigCities = new Array(4)
BigCities[0] = "Taipei"
BigCities[1] = "Tokyo"
BigCities[2] = "New York"
BigCities[3] = "Los Angeles"
BigCities[4] = "Shanghai"

var Location = new Array(4)
Location [0] = "Taiwan"
Location [1] = "Japan"
Location [2] = "USA"
Location [3] = "USA"
Location [4] = "China"

function getLocation() {

var selectedCity = document.entryForm.entry.value
for ( var i = 0; i < BigCities.length; i++) {
   if (BigCities[i] == selectedCity) {
   break
   }
}
alert("這座城市位於 " + Location[i] + ".")
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="entryForm">
打入右邊五個城市中其中一個在以下框框裡: (Taipei, Tokyo, New York, Los Angeles, Shanghai)
<INPUT TYPE="text" NAME="entry">
<INPUT TYPE="button" VALUE="城市所在" onClick="getLocation()">
</BODY>
</HTML>
以上執行結果請按這!

STEP3:【程式說明】

以上程式是 "平行列陣" 的寫法。我們可以很清楚看到我列出兩排 Arrays, 一個是 BigCities, 一個是 Location。在第一個Array中, 我設的 index value 只有 4, 第二個我也是設 4。這就是為什麼我叫這種Array , 平行列陣。
首先, 我們先列一個 var 叫做 selectedCity。我們可以看到它是連到<body>以下的 <INPUT>'s 裡面。所以也就是說, 我們在 <INPUT> 裡面打的東西就等於 selectedCity 這個 var。
接下來我在列陣下面做一個Function, 用來呼叫Arrays用的。在這Function裡面, 我把 i 設定為 var 後面跟著的數字 (在此程式裡, var 為 BigCites 和 Location) 。我接著又設說只要 i 小於(<) BigCities 這 Array 的長度程式就可以執行。
我們接著又設 if (BigCites[i] == selectedCity) 意指要是我們在 <INPUT> 裡面打的要是等於 BigCities 裡面其中一個, 就會有更進一步的指令。
這個Function 新的東西大概就醬。
<body> 以下的大家應該都很熟悉吧! 我們在這用 onClick 這個 eventhandler 來呼叫上面的Function。
Array 大至上就是這樣。如果你還是有點不懂, 你可以在看此篇教學一遍, 或到討論區提出問題。
如果你懂的話, 請拿以下範例來做練習。用此單元的寫法來做:
以下是四個行星的基本資料, 做一個網頁, 讓訪客可以輸入行星名稱, 按下按鈕會出現以下的資料。你可以用 alert()來做。

行星名稱 離太陽距離 直徑

水星 36,000,000 英哩 7,700 英哩

金星 67,000,000 英哩 3,100 英哩

火星 141,000,000 英哩 4,200 英哩

地球 93,000,000 英哩 7,920 英哩

試試看吧! 要答案的可以寄信給我喔! joseph_1001@yahoo.com

最後更新日期: 7/14/2001 6:28:40 AM

行星名稱	離太陽距離	直徑
水星	36,000,000 英哩	7,700 英哩
金星	67,000,000 英哩	3,100 英哩
火星	141,000,000 英哩	4,200 英哩
地球	93,000,000 英哩	7,920 英哩