JavaScript进阶教程(第二课)第3/3页

数组可以使你存储各种元素的列表，而且使你能够访问图象、表单以及表单元素．在上次的Javascript教程中我讲解了如何生成和控制按照索引号编排的数组例如：

    var an_array = new Array("hickory","dickory");
    var element_one = an_array[0];
    var element_two = an_array[1];

    an_array[2] = "doc";

    这里生成一个新数组，并用两个字符串进行了初始化．第１个元素可以用其索引号０进行访问，而第２个元素则可以用其索引号１进行访问an_array[1]．你可以通过添加数组索引号加长数组的长度．在本例中我加入了第３个元素，使其值等于 "doc"．现在该数组中包含"hickory,dickory, doc"３个元素．

    相关数组和上面的数组相同，但它不使用数字做索引，而是用单词来做索引．

    var phone_book = new Array();

    phone_book["sleepy"] = "(203) 555-1234";
    phone_book["happy"] = "(203) 555-2345";

    这段代码生成一个电话号码簿，你输入"happy"就可以访问相应的电话号码：

    var happy_number = phone_book["happy"];

    执行相关数组的例子看看它如何工作，同时再温习一下javascript中表单的使用方法．

     Name:  Happy Sleepy Sneezy Sleazy Sneery Bleary Tweaked

     Number: 

    这个例子比较复杂，我们来慢慢研究它．首先我们看一看电话号码簿本身．它定义为phone_book，有７条输入项：

    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行中，

    你可以看到相关数组是将一个字符串连接到另一个字符串的好办法．你可以利用相关数组将名字连接到电话号码，密码，生日以及其他各种资料．在之后的课程中我将向你们介绍利用相关数组可以做的各种有用的技巧．

最新评论