Arrays allow you to store a list of various elements, and allow you to access images, forms, and form elements. In the last Javascript tutorial, I explained how to generate and control arrays arranged according to index numbers, for example:
var an_array = new Array("hickory","dickory");
var element_one = an_array[0];
var element_two = an_array[1];
an_array[2] = "doc";
Here a new array is generated and initialized with two strings. The first element can be accessed with its index number 0, while the second element can be accessed with its index number 1 an_array[1]. You can lengthen the length of the array by adding the array index number. In this example I added the third element so that its value is equal to "doc". Now the array contains three elements: "hickory, dickory, doc".
The correlation array is the same as the above array, but it does not use numbers as indexing, but uses words as indexing.
var phone_book = new Array();
phone_book["sleepy"] = "(203) 555-1234";
phone_book["happy"] = "(203) 555-2345";
This code generates a telephone directory, and you can access the corresponding telephone number by entering "happy":
var happy_number = phone_book["happy"];
Execute the example of related arrays to see how it works, and then review how to use forms in javascript.
Name: Happy Sleepy Sneezy Sleazy Sneery Bleary Tweaked
Number:
This example is quite complicated, let’s study it slowly. First, let’s take a look at the phone number directory itself. It is defined as phone_book and has 7 input items:
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";
The keyword of each record is the name of the dwarf, and the value of each record is the phone number of the dwarf. Suppose we need to find the phone number of a dwarf, such as Sneezy's phone number, and we write it like this:
var the_number = phone_book["sneezy"];
Now let's take a look at this form:
<form name="the_form">
<b>Name:</b>
<select onChange = "displayNumber(phone_book,[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>
Note that both the form and the elements in the form have names, so that we can read and write form elements so that we can easily.
Note the usage of the onChange processor in the select tag: when the selected option changes, it calls the function displayNumber, which has been defined. If I select sneezy in the drop-down menu, the expression [selectedIndex].value returns "sneezy". If you are not familiar with the content of this part, please read the content of the last JavaScript beginner tutorial - Lesson 5.
After determining the option selected by the user, we enter the function displayNumber:
function displayNumber(phone_book, entry)
{
var the_number = phone_book[entry];
.the_form.number_box.value = the_number;
}
It uses two parameters - a telephone directory and a name, in line 1 of the function,
var the_number = phone_book[entry];
Observe the name on the phone directory and go to the next line.
.the_form.number_box.value = the_number;
The number filled in the form element is named number_box.
You can see that related arrays are a good way to concatenate one string to another. You can use relevant arrays to connect names to phone numbers, passwords, birthdays, and various other information. In the subsequent courses, I will introduce you to various useful techniques that can be done using related arrays.