JavaScript初級(jí)教程(第五課續(xù))第3/3頁(yè)
嘗試這個(gè)例子并閱讀下面的注釋?zhuān)?/P>
My favorite animal is ...
注釋一個(gè)比較復(fù)雜的JavaScript程序。首先,我們看看表單本身:
<form name="the_form">
<select name="choose_category" onChange="swapOptions(window.document.the_form.choose_category.options[selectedIndex].text);">
<option selected>Dogs</option>
<option>Fish</option>
<option>Birds</option>
</select>
<select name="the_examples" multiple>
<option>poodle</option>
<option>puli</option>
<option>greyhound</option>
</select>
</form>
該表單有兩個(gè)元素:一個(gè)下拉選單和一個(gè)列表選單。下列選單的處理器調(diào)用函數(shù)swapOptions()。該函數(shù)在首部已經(jīng)
作了定義,其參數(shù)為- 被選的動(dòng)物種類(lèi)。
首部中我首先定義的幾個(gè)數(shù)組:
var dogs = new Array("poodle","puli","greyhound");
var fish = new Array("trout", "mackerel", "bass");
var birds = new Array("robin", "hummingbird", "crow");
注意這些數(shù)組的命名和下拉選單中的命名一致。很快你就會(huì)明白為什么?,F(xiàn)在我們看看當(dāng)下拉選單被改變時(shí)被調(diào)用的函數(shù):
function swapOptions(the_array_name)
{
var numbers_select = window.document.the_form.the_examples;
var the_array = eval(the_array_name);
setOptionText(window.document.the_form.the_examples, the_array);
}
該函數(shù)的定義包括一個(gè)參數(shù):the_array_name。如果打開(kāi)下拉選單并選擇"Fish" ,則the_array_name就等同于字符串"Fish"。
函數(shù)主體中第1行包括一個(gè)變量用于引用第2個(gè)表單元素:列表選單。
第2行引入一個(gè)新概念:eval()。eval()比較奇特,我們留在以后的課程中講解。第2行命令的這些結(jié)果是變量the_array將等同于前面所定義的數(shù)組之一。如果the_array_name是"Fish",the_array則等同于Fish數(shù)組。如果你想了解這是怎么作的,請(qǐng)學(xué)習(xí)eval。
第3行定義另一個(gè)函數(shù)setOptionText()。setOptionText()用于將the_array賦值給列表選單。以下為該函數(shù)內(nèi)容:
function setOptionText(the_select, the_array)
{
for (loop=0; loop < the_select.options.length; loop++)
{
the_select.options[loop].text = the_array[loop];
}
}
該函數(shù)有兩個(gè)參數(shù):對(duì)選單元素的引用和一個(gè)數(shù)組。第1行設(shè)立一個(gè)for循環(huán),由于循環(huán)所有的選單元素。注意選單元素的選項(xiàng)屬性是該選單所有選項(xiàng)組成的數(shù)組。因?yàn)樗且粋€(gè)數(shù)組,你可以用長(zhǎng)度(length)屬性發(fā)現(xiàn)數(shù)組的元素?cái)?shù)目。第1次循環(huán)時(shí),循環(huán)變量值是0。循環(huán)的主體值為:
the_select.options[0].text = the_array[0];
如果你在下拉選單中選擇了"Fish",則the_array[0]就是"trout",所以該行命令將列表選單中的第1個(gè)選項(xiàng)改成"trout" 。下一次循環(huán)時(shí),循環(huán)等于1,并且列表選單中第2個(gè)選項(xiàng)則是 "mackerel" 。
如果你理解了該例子,你對(duì)JavaScript的了解就比較深了。
初級(jí)教程到此結(jié)束,隨后要發(fā)布進(jìn)階教程,敬請(qǐng)關(guān)注。
相關(guān)文章
Javascript中Array.prototype.map()詳解
map 方法會(huì)給原數(shù)組中的每個(gè)元素都按順序調(diào)用一次 callback 函數(shù)。callback 每次執(zhí)行后的返回值組合起來(lái)形成一個(gè)新數(shù)組。 callback 函數(shù)只會(huì)在有值的索引上被調(diào)用;那些從來(lái)沒(méi)被賦過(guò)值或者使用 delete 刪除的索引則不會(huì)被調(diào)用。2014-10-10
Javascript中indexOf()和lastIndexOf應(yīng)用方法實(shí)例
這篇文章主要介紹了JavaScript中的indexOf()和lastIndexOf()方法使用實(shí)例,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),有需要的朋友可以參考下。2016-08-08
JS?數(shù)組sort方法的升序?yàn)槭裁词莂-b你知道嗎
這篇文章主要為大家詳細(xì)介紹了JS?數(shù)組sort方法為什么升序是a-b,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2022-02-02
javascript input圖片上傳及預(yù)覽,FileReader預(yù)覽圖片
本文放置了html完成代碼案例,有需要大家可以直接復(fù)制測(cè)試功能,采用input文本框圖片上傳,使用FileReader預(yù)覽圖片效果2021-06-06
javascript開(kāi)發(fā)技術(shù)大全-第1章javascript概述
JavaScript 為 HTML 設(shè)計(jì)師提供了一種編程工具HTML 創(chuàng)作者往往都不是程序員,但是 JavaScript 卻是一種只擁有極其簡(jiǎn)單的語(yǔ)法的腳本語(yǔ)言!幾乎每個(gè)人都有能力將短小的代碼片斷放入他們的 HTML 頁(yè)面當(dāng)中。2011-07-07
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開(kāi)發(fā)技術(shù)大全 第4章 直接量與字符集
直接量就是在程序中顯示出來(lái)的數(shù)值。javascript直接量包括:字符串、數(shù)字、布爾、數(shù)組、函數(shù)、對(duì)象、和特殊直接2011-07-07

