Arrays and Loops

 

If you want to assign a value to a position in an array, you can just do this:

Array[9] = "Hello World"

To display the value, just access its index number again:

alert(Array[9])

The fact that you can access the index number of an array to assign values makes them very handy in loops. To start our lottery number generator (UK lottery), we're going to create an array of 49 numbers. Number 1 will be at position 1 in the array, number 2 at position 2, etc. We could do this for all 49 numbers:

Lottery = new Array(49)
Lottery[1] = 1
Lottery[2] = 2
Lottery[3] = 3
Lottery[4] = 4

But we'd have a laborious job typing all the array positions out, and all the values for them. Instead, we can use a loop to fill our array with the numbers 1 to 49. Here's the loop we can use:

for (i = 1; i < 50; i++) {
Lottery[i] = i
}

Isn't that easier? But how does it work? Well, first we set a start position for our for loop by assigning 1 to the variable called i (i = 1). The end position for our loop is when the variable i is not less than 50 (i < 50). Every time round the loop 1 gets added to i (i++).

Then we assign the value of i to a position in our array:

Lottery[i] = i

At first, the value in i is 1. Which gives us this in reality:

Lottery[1] = 1

The next time round the loop, 1 gets add to the variable i. So we'd then have this:

Lottery[2] = 2

By the time the loop ends, all 49 positions in our array would be filled with the numbers 1 to 49. And that's all there is to it - a couple of lines of code has saved us reams of typing!

To demonstrate that it does indeed work, create this form on a new web page:

<Form name = frmOne>

<textarea name = taAll rows = 10 cols = 15></textarea>

<INPUT Type = button Value = " Get Lottery Numbers" onClick = getNumbers()>

</form>

Make sure your form has the NAME frmOne, and that your TEXTAREA has the NAME taAll. For the button, you're adding a onClick event which calls the function getNumbers().

When you have your form in place, add this script to the HEAD section of your web page:

<SCRIPT Language = JavaScript>

function getNumbers() {
TA = document.frmOne.taAll
lottery = new Array(49)

for (i = 1; i < 50; i++) {
lottery[i] = i
TA.value = TA.value + lottery[i] + "\n"
}
}
</SCRIPT>

To see what your programme should do, click this link (opens in a new window):

Click here for the Script in action

We've started the script with a function:

function getNumbers() {

}

The first line inside the function is just assigning the text area on our form to a variable call TA. This will make things easier for us, and we won't have to keep typing it all out when we want to add things to the text area:

TA = document.frmOne.taAll

On the next line, we set up our array:

lottery = new Array(49)

Next comes our for loop:

for (i = 1; i < 50; i++) {
lottery[i] = i
TA.value = TA.value + lottery[i] + "\n"
}

Notice the line that has been added to the for loop:

TA.value = TA.value + lottery[i] + "\n"

All that line is doing is adding the values in our array to the text area. We want to keep whatever is inside the text area, so we have to say:

TA.value = TA.value +

Then we add the value from the array, with a new line character at the end:

lottery[i] + "\n"

When you've finished adding the code to the HEAD section, test it out. When you click the button, the numbers 1 to 49 will be added to your text area.

For a lottery, though, we need to shuffle all the numbers. Otherwise, everybody would win!

Move on to the Next Part -->

<--Back to the JavaScript Contents Page