CS 4, Summer 2006: Lecture 10: More JavaScript

Overview

• Continue examples from lecture 9
• Other input types: check boxes, selections, and radio buttons
• Arrays

Arrays

Sometimes you need a collection of things (e.g., telephone directory). As we saw in pseudocode, an array allows us to store such a collection. An array is an ordered sequence; each member of the sequence has an index. JavaScript supports such arrays. The elements of an array are variables, so you can use them in the same ways. In CS, we usually number things starting from zero, so if there are 4 things in the array, we number them 0-3.

To create an empty array:

  var v = new Array(); // Create a new empty array

Then we can put whatever we want in it:

  v[0] = "Hello";
  v[1] = 5;
  v[2] = 3.14;
  v[3] = document.helloForm;
  v[4] = v[1]+v[2];

To create an array with a pre-determined set of entries:

  var v = [ "Hello", 5, 3.14 ];

To find out how many things are in an array:

  v.length

To loop through an array:

  i = 0;
  while (i < v.length) {
    // do some stuff
    i = i + 1;  // also i += 1;
  }

This loops over everything in the array. We do this so often, that there is another way to write it:

  for (i = 0; i < v.length; i += 1) {
     // do some stuff
  }

The first part, i=0 initializes a variable that will hold the current position in the array (done just before the while loop). The second part, i < v.length is a test, just like in the while loop. The third part, i += 1 updates the position (done at the end of the while loop body). These are equivalent; I don't care which you use, as long as you know what is going on in your own code! But you will see the for loop, so I wanted you to understand it.

Other input types

Check boxes

Example

To get the value of a check box, cross-reference by its name within the form, the same way as with texts. Then, rather than asking for its value, ask for whether or not it is checked -- a Boolean value (true or false).

  if (document.form.checkbox.checked) {
    // do some stuff
  }

Selections

Examples

• Version 1
• Version 2 (using an array)
• Version 3 (using an onChange event)

The various options of a selection make up an array. To find which member was selected, cross-reference by name and get its selectedIndex

  index = document.form.option.selectedIndex;

Radio buttons

Examples

• Version 1
• Version 2 (with a separate "find" function)
• Version 3 (using a "for" loop)

Radio buttons act much like an array of check boxes. Loop over the array and see which index is checked.

  for (i=0; i < document.form.buttons.length; i += 1) {
    if (buttons[i].checked) {
      // do some stuff
    }
  }