How to Create a Data Table for Your Website
How to Simulate Multiple Pages with Tabbed Panels
How to Create a Mobile-Ready Page in Dreamweaver

How to Build a Basic Array in JavaScript for HTML5 and CSS3 Programming

Arrays are groups of variables in JavaScript with a name. Arrays are similar to functions because they're used to manage complexity for HTML5 and CSS3 programming. An array is a special kind of variable. Use an array whenever you want to work with a list of similar data types.

The following code shows a basic demonstration of arrays:

 <script type = "text/javascript">
  //from genres.html
  
  //creating an empty array
  var genre = new Array(5);
  //storing data in the array
  genre[0] = "flight simulation";
  genre[1] = "first-person shooters";
  genre[2] = "driving";
  genre[3] = "action";
  genre[4] = "strategy";
  //returning data from the array
  alert ("I like " + genre[4] + " games.");
  //]]>
 </script>

The variable is a special variable because it contains many values. Essentially, it's a list of genres. The array(5) construct creates space in memory for five variables, all named genre.

Accessing array data

After you specify an array, you can work with the individual elements using square-bracket syntax. An integer identifies each element of the array. The index usually begins with.

  genre[0] = "flight simulation";

The preceding code assigns the text value “flight simulation” to the genre array variable at position 0.

Most languages require all array elements to be the same type. JavaScript is very forgiving. You can combine all kinds of stuff in a JavaScript array. This flexibility can sometimes be useful, but be aware that this trick doesn't work in all languages. Generally, try to keep all the members of an array the same type.

After you store the data in the array, you can use the same square-bracket syntax to read the information.

The line

 alert ("I like " + genre[4] + " games.");

finds element 4 of the genre array and includes it in an output message.

image0.jpg

Using arrays with for loops

The main reason to use arrays is convenience. When you have a lot of information in an array, you can write code to work with the data quickly. Whenever you have an array of data, you commonly want to do something with each element in the array. Take a look at to see how you can do so:

 <script type = "text/javascript">
  //from games.html
  //pre-loading an array
  var gameList = new Array("Flight Gear", "Sauerbraten", "Future Pinball",
   "Racer", "TORCS", "Orbiter", "Step Mania", "NetHack",
   "Marathon", "Crimson Fields");
  var text = "";
  for (i = 0; i < gameList.length; i++){
  text += "I love " + gameList[i] + "\n";
  } // end for loop
  alert(text);
 </script>

Notice several things in this code:

  • The array called gameList. This array contains the names of some great freeware games.

  • The array is preloaded with values. If you provide a list of values when creating an array, JavaScript simply preloads the array with the values you indicate. You don't need to specify the size of the array if you preload it.

  • A for loop steps through the array. Arrays and for loops are natural companions. The for loop steps through each element of the array.

  • The array's length is used in the for loop condition. Rather than specifying the value 10, the array's length property was used in the loop. This practice is good because the for loop automatically adjusts to the size of the array when you add or remove elements.

  • Do something with each element. Because goes from 0 to 9 (the array indices), you can easily print each value of the array. In this example, an output string was added to.

  • Note the newline characters. The \n combination is a special character that tells JavaScript to add a carriage return, such as you get by pressing the Enter key.

If you want to completely ruin your productivity, Google some of these game names. They're absolutely incredible, and every one of them is free. It's hard to beat that.

image1.jpg
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
How to Create Custom Events in JavaScript to Program with HTML
How to Access HTML Form Elements in JavaScript
Selected JavaScript Syntax
How to Build a Transformed Image on JavaScript's Canvas for HTML5 and CSS3 Programming
How to Retrieve Results from AJAX Calls with JavaScript
Advertisement

Inside Dummies.com