How to Create Cascading Style Sheets (CSS) Simply and Easily
How to Use IrfanView’s Built-In Effects for HTML5 and CSS3 Programming
How to Register a Domain Name for Your HTML5 and CSS3 Site

How to Use Arrays to Integrate JavaScript with HTML

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>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>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>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.

image0.jpg

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.

image1.jpg
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
How to Create a New JavaScript File in Komodo Edit
10 Stellar Web Resources for HTML5 and CSS3
How to Use CSS3 Three-Dimensional Transformations
How to Draw and Animate Graphics with HTML5 canvas
How to Use a Pattern as a Fill or Stroke with the HTML5 Canvas Tag
Advertisement

Inside Dummies.com