JavaScripting for Interactive Educational Webs

[Intro] [Overview] [Basics] [More] [Forms] [If] [Queries] [Time] [Random] [Loops] [Misc.] [References] [HTML]


Arrays and Loops

Abstract: An introduction to JavaScript's implementation of the array data structure (a method of storing a group of objects) and the loop control structure (a method of repeating code).


Introduction to arrays

Often, when we are working with a set of data, it is easier to refer to the individual elements by number, rather than by name. Arrays provide a mechanism for grouping objects in such a way that you can refer to them by the array name and a position within the array. We usually refer to the position as the index of an object.

In JavaScript, you create a new array with
var arrayame = new Array(size) The size is optional, as JavaScript will grow arrays to fit more data.

In JavaScript, you refer to the nth element of array A with A[n]. JavaScript arrays are zero-based, which means that the initial element of an array is the element with index 0.

JavaScript lets you determine the length of an array by looking at the length property, as in A.length.


Converting between arrays and strings

Arrays and strings are somewhat similar structure. Arrays are ordered collections of objects, strings are ordered collections of characters. However, each structure has its own advantages and disadvantages, particularly

JavaScript provides two basic functions for converting between arrays and strings. string.split(separator) converts a string into an array by splitting it at every instance of the separator. array.join(separator) makes a string by joining the elements of an array together, separating them with the separator.


Introduction to Loops

When we have arrays or other sets of elements, it is often useful to be able to step through the elements, doing some operation with each element. Control structures that permit such repetition are called loops.

JavaScript provides a number of loop structures. We'll concentrate on two of them, the for loop and the while loop.


The for loop

The for loop traditionally executes a set of instructions a fixed number of times, using a counter variable that is incremented each time. In JavaScript, this is written

for (initialization; continuation-test; increment) {
  body
} // for

This says to begin by executing the initialiation expression. The body and increment are repeatedly executed until the continuation test fails.

Most of the time, we do the intialization with an assignment statement, the continuation test with a comparision, and the increment with the special ++ operation, as in

for (i=0; i<A.length; ++i) {
  document.write("<P>A[" + i + "] = " + A[i] + "</P>")
} // for


The while loop

The for loop is traditionally used to execute a piece of code a fixed number of times. When we don't know how many times we'll execute the code, we often use a while loop, which has the form

while (test) {
  body
} // while

This says to repeatedly execute the body until the test fails.

While loops often rely on a sentinel variable which is initially set to true and then gets set to false when the loop should exit.


Exercise: Class statistics.


[Intro] [Overview] [Basics] [More] [Forms] [If] [Queries] [Time] [Random] [Loops] [Misc.] [References] [HTML]

This page written by Samuel A. Rebelsky.

This page generated on 42 by SamR's Site Suite.