JavaScript by Example: JavaScript Core Objects. Pt. 1

<html><head><title>The Array Object</title><body>

<body>

<h2>An Array of Numbers</h2>

1 var years = new Array(10);

2 for(var i=0; i < years.length; i++ ){

3 years[i]=i + 2000;

4 document.write("years[" + i + "] = "+ years[i]

+ "<br>");

}

</script>

</body>

</html>

The Array() constructor is called to create a 10-element array called years.

The for loop starts with an initial value of i set to 0, which will be the value of the first index in the array. As long as the value of i is less than the length of the array, the body of the loop will be executed. Each time through the loop, i is incremented by 1.
The array is populated here. Each time through the loop, years[i] is assigned the value of i + 2000.
The value of the new array element is displayed for each iteration of the loop. (See Figure 9.3.)


<html><head><title>The Array Object</title></head> <body> <h2>An Array of Colored Strings</h2> <script language="JavaScript"> 1 var colors = new Array("red", "green", "blue", "purple"); 2 for(var i in colors){ 3 document.write("<font color='"+colors[i]+"'>"); 4 document.write("colors[" + i + "] = "+ colors[i] + "<br>"); } </script> </body> </html>

<html><head><title>The Array Object</title></head>

<body>

<h2>An Array of Colored Strings</h2>

1 var colors = new Array("red", "green", "blue", "purple");

2 for(var i in colors){

3 document.write("<font color='"+colors[i]+"'>");

4 document.write("colors[" + i + "] = "+ colors[i]

+ "<br>");

}

</script>

</body>

</html>


A new array called colors is created and assigned five colors.
The special for loop iterates through each element of the colors array, using i as the index into the array. The color of the font is assigned the value of the array element. The value of each element of the colors array is displayed. The color of the font matches the value. (See Figure 9.4.)

A new array called colors is created and assigned five colors.

The special for loop iterates through each element of the colors array, using i as the index into the array.
The color of the font is assigned the value of the array element.
The value of each element of the colors array is displayed. The color of the font matches the value. (See Figure 9.4.)


<html><head><title>Associative Arrays</title></head> <body> <h2>An Array Indexed by Strings</h2> 1 <script language="JavaScript"> 2 var states = new Array(); 3 states["CA"] = "California"; states["ME"] = "Maine"; states["MT"] = "Montana"; 4 for( var i in states ){ document.write("The index is:<em> "+ i ); document.write(".</em> The value is: <em>" + states[i] + ".</em><br>"); } </script> </body> </html>

<html><head><title>Associative Arrays</title></head>

<body>

<h2>An Array Indexed by Strings</h2>

1 <script language="JavaScript">

2 var states = new Array();

3 states["CA"] = "California";

states["ME"] = "Maine";

states["MT"] = "Montana";

4 for( var i in states ){

document.write("The index is:<em> "+ i );

document.write(".</em> The value is: <em>" + states[i]

+ ".</em><br>");

}

</script>

</body>

</html>


The JavaScript program starts here.
The Array() constructor is called and returns a new Array object called states. The index into the array element is a string of text, "CA". The value assigned is "California". Now there is an association between the index and the value. The special for loop is used to iterate through the Array object. The variable, i, represents the index value of the array, and states[i] represents the value found there. It reads: For each index value in the array called states, get the value associated with it. (See Figure 9.5.)

The JavaScript program starts here.

The Array() constructor is called and returns a new Array object called states.
The index into the array element is a string of text, "CA". The value assigned is "California". Now there is an association between the index and the value.
The special for loop is used to iterate through the Array object. The variable, i, represents the index value of the array, and states[i] represents the value found there. It reads: For each index value in the array called states, get the value associated with it. (See Figure 9.5.)