嘗試這個例子并閱讀下面的注釋：

    My favorite animal is ...

    注釋一個比較復雜的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>

    該表單有兩個元素：一個下拉選單和一個列表選單。下列選單的處理器調用函數swapOptions()。該函數在首部已經
作了定義，其參數為- 被選的動物種類。

    首部中我首先定義的幾個數組：

    var dogs = new Array("poodle","puli","greyhound");

    var fish = new Array("trout", "mackerel", "bass");

    var birds = new Array("robin", "hummingbird", "crow");

    注意這些數組的命名和下拉選單中的命名一致。很快你就會明白為什么?，F在我們看看當下拉選單被改變時被調用的函數：

    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);
    }

    該函數的定義包括一個參數：the_array_name。如果打開下拉選單并選擇"Fish" ，則the_array_name就等同于字符串"Fish"。

    函數主體中第1行包括一個變量用于引用第2個表單元素：列表選單。

    第2行引入一個新概念：eval()。eval()比較奇特，我們留在以后的課程中講解。第2行命令的這些結果是變量the_array將等同于前面所定義的數組之一。如果the_array_name是"Fish"，the_array則等同于Fish數組。如果你想了解這是怎么作的，請學習eval。

    第3行定義另一個函數setOptionText()。setOptionText()用于將the_array賦值給列表選單。以下為該函數內容：

    function setOptionText(the_select, the_array)
    {
        for (loop=0; loop < the_select.options.length; loop++)
        {
            the_select.options[loop].text = the_array[loop];
        }
    }

    該函數有兩個參數：對選單元素的引用和一個數組。第1行設立一個for循環(huán)，由于循環(huán)所有的選單元素。注意選單元素的選項屬性是該選單所有選項組成的數組。因為它是一個數組，你可以用長度（length）屬性發(fā)現數組的元素數目。第1次循環(huán)時，循環(huán)變量值是0。循環(huán)的主體值為：

the_select.options[0].text = the_array[0];

    如果你在下拉選單中選擇了"Fish"，則the_array[0]就是"trout"，所以該行命令將列表選單中的第1個選項改成"trout" 。下一次循環(huán)時，循環(huán)等于1，并且列表選單中第2個選項則是 "mackerel" 。

    如果你理解了該例子，你對JavaScript的了解就比較深了。 

    初級教程到此結束，隨后要發(fā)布進階教程，敬請關注。

最新評論