In JavaScript, arrays are a kind of collection. You can work with arrays to integrate JavaScript with HTML. Each array contains zero or more like items that you can manipulate as a group.
How to create an array in JavaScript
JavaScript provides three methods for creating arrays: regular, condensed, and literal. In general, one way is as good as another. Of the three, the regular method shown in the following listing is the easiest to understand, but the literal method is the most compact.
<body>
<h1>Creating Arrays</h1>
<h2 id="tab2" >Regular:</h2>
<script language="JavaScript">
// Create the array.
var Colors = new Array();
// Fill the array with data.
Colors[0] = "Blue";
Colors[1] = "Green";
Colors[2] = "Purple";
// Display the content onscreen.
document.write(Colors);
</script>
<h2 id="tab3" >Condensed:</h2>
<script language="JavaScript">
// Create the array and fill it with data.
var Colors = new Array("Blue", "Green", "Purple");
// Display the content onscreen.
document.write(Colors);
</script>
<h2 id="tab4" >Literal:</h2>
<script language="JavaScript">
// Create the array and fill it with data.
var Colors = ["Blue", "Green", "Purple"];
// Display the content onscreen.
document.write(Colors);
</script>
</body>
All three methods produce precisely the same array. The regular method creates the array first and then assigns strings to each array element by number. The square brackets behind Colors indicate the element number, which begins at 0 and increments by 1 for each element you add.
Notice that when using the condensed method you enclose the array elements in parentheses as part of the constructor. However, when using the literal method, you enclose the array elements in square brackets.
How to access array members
Each array member has a unique number — an address of sorts. You access array members by providing the array name and then the element number within square brackets. Normally, you use a loop to access array members. Loops are a means of automating array access.
The following code shows an example of how you might access an array, one element at a time, and display its content.
<body>
<h1>Access Array Elements</h1>
<script language="JavaScript">
// Create the array and fill it with data.
var Colors = ["Blue", "Green", "Purple"];
// Define a loop to access each array element
// and display it onscreen.
for (i = 0; i < Colors.length; i++)
{
document.write(
"Colors " + i + " = " +
Colors[i] + "<br />");
}
</script>
</body>
This example uses a for loop. The for loop creates a counter variable (a number) named i that begins at 0 (the first element of the array) and continues to increment (i++) until it has accessed all the array elements (i < Colors.length). The document.write() function outputs the Colors element number, the content (as Colors[i] where i is the element number), and an end-of-line tag.
