We now come to a very interesting topic, Arrays. In Javascript there is a special object to create and work with groups of values. Some very interesting methods are included in this object. I will show you a few but you should play with the others found here.
But let's first look at the basics. As I said an array is a variable that can hold a group of variables. The names of a group of people for instance could be stored in an array called names. To find the fourth name in the list you might look at the value of names(4). But actually it would be names(3) because array elements begin with the 0th value. So let's look at how to define an array.

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
function pickPerson()
  {
  var names=new Array("Jim","Brenda","Michael","Emily","Sarah");
  var myChoice=parseInt(Math.random()*5);
  alert(names[myChoice] + " should take out the trash!");
  }
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="button" ONCLICK="pickPerson()" VALUE="Who should take out the trash?">
</BODY>
</HTML>

Code

Here are two methods of the Array object that should be quite useful. One is sort and it sorts the elements in an array, but see the above reference to see how to sort numerical data. The other is pop which pulls elements off the end of an array. I have used pop in the following program to load names onto buttons when you click on the heading. But then if you click a button, there will be a little error. That is because as pop pulls elements off, it also deletes them. The one property of arrays that I used here is length which reports how many elements are in an array. But remember length counts the actual number so will always be 1 greater than the highest index because the indices start with 0.

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
var names=new Array("Jim","Brenda","Michael","Emily","Sarah");
function pickPerson(index)
  {
  alert(names[index] + " should take out the trash!");
  }
function loadButtons()
  {
  var buttons=document.getElementsByTagName("input");
  names.sort();
  while (names.length > -1)
    {
    buttons[names.length-1].value=names.pop()
    }
  }
</SCRIPT>
</HEAD>
<BODY ONLOAD="loadButtons()">
<H1>Who should take out the trash?</H1>
<INPUT TYPE="button" ONCLICK="pickPerson(0)" VALUE="">
<INPUT TYPE="button" ONCLICK="pickPerson(1)" VALUE="">
<INPUT TYPE="button" ONCLICK="pickPerson(2)" VALUE="">
<INPUT TYPE="button" ONCLICK="pickPerson(3)" VALUE="">
<INPUT TYPE="button" ONCLICK="pickPerson(4)" VALUE="">
</BODY>
</HTML>

Code

Oh, I forgot to mention that nice new document method I used: getElementsByTagName. It creates an array of all the elements on your page that are of whatever type (tag) you specify. (Tags are all the commands in brackets : <INPUT>, <H1>, <A>, <P>, etc.) So it loaded all the INPUT buttons. And just for fun, I used the ONLOAD method of the BODY to print the name of each person on a button.
Objects that you place in the body of your page are already in a kind of array called a collection. You can specify a particular one in the same manner as in the above Array examples and as shown here:

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
function changeText(state)
  {
  if (state=="OVER")
    {
    document.images[3].src="joke.jpg"
    }
  else
    {
    document.images[3].src="test.jpg"
    }
  }
</SCRIPT>
</HEAD>
<BODY>
<IMG SRC="This.jpg"><IMG SRC="is.jpg"><IMG SRC="a.jpg"><IMG ONMOUSEOVER="changeText('OVER')" ONMOUSEOUT="changeText('OUT')"SRC="test.jpg">
</BODY>
</HTML>

Code

The ONMOUSEOVER and ONMOUSEOUT methods provide effortless user input. The effect is magic.
I think you are now ready for project 3. Create a simple hangman game. Use images for the different stages of the hanged man. Load the words into an array and randomly select one. Use all four letter words so you don't have to change the display. Here is my solution (as always don't try to look at the script before your attempt is complete.):
(For some reason this page doesn't work in Geocities so right-click and download it along with this.

Code 1