We have learned that variables can be numbers, strings and object parameters. There is another important part of Javascript: arrays.
An array is a list. Various lists such as lists, URLs, and color lists can be stored in arrays.
Here we generate an array of colors:
var colors = new Array("red","blue","green");
Now you have an array, what can you do with it? ? The advantage of arrays is that the individual elements in the array can be called numerically. The number of the first element is 0 and can be called in the following way:
var the_element = colors[0];
When this line of JavaScript instructions is executed, the value assigned to the variable the_element is the string "red". You can call an element in an array by writing its name and placing its sequence number in square brackets. The sequence number of the second element in the array is 1.
Once the array is generated, you can add and modify the array values. If you plan to change the first element of the color array from red to purple, you can do this:
colors[0] = "purple";
Arrays are often used in loops. The application of arrays and loops will be discussed below.
Arrays are a very useful thing because you can loop through each element in the array to perform a certain function. The following is an example of looping through the elements in a URL array.
First, to make this example work, we need to declare some variables:
var url_names = new Array("hits.org","awaken.org","bianca.com");
var a_url;
Next, we loop through each element in the array, open each URL and wait for the user to click the OK button of the alert box:
for(loop=0; loop
// make the name of a url, for example //m.sbmmt.com/
a_url = "http://www." url_names[loop] "/";
// open a window
var new_window=open(a_url,"new_window","width=300,height=300");
// wait for the click
alert("hit ok for the next site");
}
First, you will notice that the loop goes from 0 to the url_names.length variable. Putting .length after the array name tells you how many elements there are in the array. However, note that the number of array elements is different from the index number (sequence number) of the last element of the array. If there are 3 elements in the array, the length of the array is 3, but the index number of the last element in the array is array[2]. This is because the index number of the first element in the array is array[0]. If you get an error message such as "object not found" when performing an array call, and your code has an array, it is possible that you are confusing the index number of the array element with the number of elements in the array.
You may also notice that placing .length at the end of the array is a bit like attaching some properties to an object. This is because the array itself is an object, and length is an attribute of the array.
Another manifestation of the array term object is that you need to use new instructions to generate new arrays. In the above example, url_names = new Array(...) can actually be interpreted as: generate a new array and use url_names to make a reference to it. You can notice that when the word "new" is used in this way, a new object is created.
Line 1 in the loop generates a variable. Its assigned value is a string.
a_url = "http://www." url_names[loop] "/";
When the loop starts, the initial value of the variable loop is 0. The first element of the url_names array is the string "hits.org", so in the first loop, the variable a_url is equivalent to the string "http://www.hits.org/".
The next line of the loop opens a window with the URL
var new_window=open(a_url,"new_window","width=300,height=300");
Since we give the window the same name every time we open it, many windows will not open when going to a new URL. If we remove the window name "new_window" in the above example, a new window will be opened each time through the loop.
Line 3 of the loop just opens an alert box and waits for the user to click the OK button.
Arrays can also contain other elements, not just strings. Arrays can be applied to various aspects of the JavaScript Document Object Model. This knowledge will be covered in the next lecture.
The following is the code in the onClick="" link:
var change=prompt('Change which image (0 or 1)?','');
window.document.images[change]. src='three.jpg';
This example intends to use image exchange to demonstrate how arrays intervene in the DOM. Try this example and look at the source code.
document.image_name.src = 'some_image.gif';
In order to do this, each image needs to be named. If you don't know the names of the pictures you want to exchange, but you know their order in the HTML page. The image can be specified by its DOM number.
The first image in an HTML file is document.images[0], the second is document.images[1], and so on. If you want to know how many images there are in a document, you can check the image array length: document.images.length. For example, if you want to change all the graphics in your web page to a Spacer GLF image, you can do this:
for(loop=0; loop
document. images[loop].src = 'spacer.gif';
}
Is it clear?
Okay. In the next lesson we are going to learn about functions.
Function is the last basic component that needs to be learned in programming. All programming languages are functions. Functions are things that are callable every time and don't need to be rewritten.
If you want to teach yourself to read quickly and use a long text link that once clicked tells you the current time.
For example... time!
Look at the source code:
Time!
The details of how JavaScript works here are not important; we will come back to review it later.
The important thing is that it is too long. If there are 10 more of these time links, you will have to cut and paste this program each time. This makes your HTML both long and ugly. Also, if you want to change this program, you have to change it in 10 different places.
You can write a function to execute instead of copying the program 10 times. The function usage here makes it easy to edit and read.
Please see how to write a timing function.
This HTML page contains a function called announceTime. Calling annoumnceTime from a link:
Time!
Like this:
The downward line looks like Lesson 2:
Hello!
This is called calling the alert dialog from a link. A function is like a method, the only difference is that the method is attached to an object. In this warning example, the object is a window object.
Let’s go back to the function itself. If you look at the source code, you will see that the function is located in the header of the HTML file.
...
