JavaScript進階教程(第二課)
數組可以使你存儲各種元素的列表,而且使你能夠訪問圖象、表單以及表單元素.在上次的Javascript教程中我講解了如何生成和控制按照索引號編排的數組例如:
var an_array = new Array("hickory","dickory");
var element_one = an_array[0];
var element_two = an_array[1];
an_array[2] = "doc";
這里生成一個新數組,并用兩個字符串進行了初始化.第1個元素可以用其索引號0進行訪問,而第2個元素則可以用其索引號1進行訪問an_array[1].你可以通過添加數組索引號加長數組的長度.在本例中我加入了第3個元素,使其值等于 "doc".現在該數組中包含"hickory,dickory, doc"3個元素.
相關數組和上面的數組相同,但它不使用數字做索引,而是用單詞來做索引.
var phone_book = new Array();
phone_book["sleepy"] = "(203) 555-1234";
phone_book["happy"] = "(203) 555-2345";
這段代碼生成一個電話號碼簿,你輸入"happy"就可以訪問相應的電話號碼:
var happy_number = phone_book["happy"];
執(zhí)行相關數組的例子看看它如何工作,同時再溫習一下javascript中表單的使用方法.
Name: Happy Sleepy Sneezy Sleazy Sneery Bleary Tweaked
Number:
這個例子比較復雜,我們來慢慢研究它.首先我們看一看電話號碼簿本身.它定義為phone_book,有7條輸入項:
var phone_book = new Array();
phone_book["happy"] = "(203) 555-1234";
phone_book["sleepy"] = "(203) 555-2345";
phone_book["sneezy"] = "(203) 555-4321";
phone_book["sleazy"] = "(203) 555-3245";
phone_book["sneery"] = "(203) 555-3213";
phone_book["bleary"] = "(203) 555-2365";
phone_book["tweaked"] = "(203) 555-1664";
每條記錄的關鍵字是小矮人的名字,而每條記錄的值就是該小矮人的電話號碼.假設我們需要找到某個小矮人的電話號碼,例如Sneezy的電話號碼,我們這樣寫:
var the_number = phone_book["sneezy"];
現在我們看看這個表單:
<form name="the_form">
<b>Name:</b>
<select onChange = "displayNumber(phone_book,this.options[selectedIndex].value);">
<option value="happy">Happy</option>
<option value="sleepy">Sleepy</option>
<option value="sneezy">Sneezy</option>
<option value="sleazy">Sleazy</option>
<option value="sneary">Sneery</option>
<option value="bleary">Bleary</option>
<option value="tweaked">Tweaked</option>
</select>
<p>
<b>Number:</b>
<input type="text" name="number_box" value="">
</form>
注意表單和表單內的元素都有名稱,這樣以來便于我們讀取和寫入表單元素.
注意select標簽中的onChange處理器的用法:當所選擇的選項變化時,它就調用函數displayNumber,該函數已做了定義.如果我在下拉選單中選擇了sneezy,則表達式this.options [selectedIndex].value 返回"sneezy",如果你對該部分的內容不熟悉,請先閱讀上次的javascript初級教程-第五課的內容.
確定了用戶所選擇的選項之后,我們進入函數displayNumber:
function displayNumber(phone_book, entry)
{
var the_number = phone_book[entry];
window.document.the_form.number_box.value = the_number;
}
它使用了兩個參數-一個電話號碼簿和一個名稱,在函數第1行中,
var the_number = phone_book[entry];
觀察一下電話號碼簿上的名字,然后進入下一行,
window.document.the_form.number_box.value = the_number;
填入表單元素的數字命名為number_box.
你可以看到相關數組是將一個字符串連接到另一個字符串的好辦法.你可以利用相關數組將名字連接到電話號碼,密碼,生日以及其他各種資料.在之后的課程中我將向你們介紹利用相關數組可以做的各種有用的技巧.
相關文章
Javascript基礎_簡單比較undefined和null 值
下面小編就為大家?guī)硪黄狫avascript基礎_簡單比較undefined和null 值。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06Array.slice()與Array.splice()的返回值類型
Array.slice()與Array.splice()的返回值類型...2006-10-10