ava script tutorial - a new approach by Ken J Ward

Java Script Tutorial - Simple Arrays

In this lesson we learn about simple arrays and about using the keyword this.


 

You can think of an array as a set of boxes containing information. So we can say:

MyNumbers=new Array
("1","2","3","4","5","6","7","8","9","0",".");

On this page:

  1. Defining the Array
  2. Length of the Array
  3. Find Element at Position
  4. Different Ways of Making an Array

Defining the Array

In the HEAD of the document I define my array:

<script type="text/javascript">

<!---

MyNumbers=new Array

("1","2","3","4","5","6","7","8","9","0",".");

//-->

</script>

Length of the Array

With this array we can do some things.

When I click this button, it tells me that the length of my array is 11. (Which seems correct!). It says, more precisely that:

MyNumbers.length=11

Here I have put some code into the button (bad style!):


onclick="alert

('The length of my array, MyNumbers.length is '+ MyNumbers.length)"

exclam.gif (342 bytes)Be aware that the above code could be wrapped in your browser giving an 'unterminated string' error on copying. The break between the alert and the rest is not important. It is the broken string that is important!


That is we can get the length of an Array by using the above code.

We can also find the item in an array at a given position. Using the array:

MyWords=new Array("ant","boar","cat","dog",

"elephant","fish","goat","hover bird!!!",

"insect","jabberwocky","kernel")

Find Element at Position

Put a number in the box below and press the button to get the element at that position:

  If I enter a number from 0 to 10 I get a message telling me the item at that position in the array. If I enter another character, then I get the answer 'undefined'. The elements in an array are defined for the positions 0 to 10, but outside these numbers there are no elements defined. The elements in an array are identified by their position number, beginning at 0, and, in this case, ending at 10.

The code in this button is:

onclick="alert('The element in position '
+this.form.T1.value+
' is the element \''+ MyWords[this.form.T1.value]+'\'');
return false
"


new.gif (1818 bytes)The keyword, this, refers to the element that contains it. (My form, etc) It can have a meaning like 'my'. So in this case, the message from the  button. this.form defines the button's form in the document, and we do not need to name the form! T1 is the name of the text box.


If we put 3 in the text box, JavaScript will compute the value of:

MyWords[3]

which is the 4th element (starting from 0), or the word,  'dog'.

Different Ways of Making an Array

Here are three ways of defining an array:

The first is an old way of declaring an array:

myArray=["ant","bat","cat"]

alert("Literal array element zero is "+myArray[0]);

Here we define an array step-by-step:

myArray=new Array(3)

myArray[0]="ant";

myArray[1]="bat"

myArray[2]="cat"

alert("The third element is "+myArray[2])

And here we define the array more economically:

//Dense array

myArray= new Array("ant","bat","cat")

alert("Dense array element one is "+myArray[1]);

Why not copy the above code and try it in the browser?


We can do lots of fun things with arrays, but before we do, let's make sure we understand about select boxes in forms ...

 

 


[If you need to learn more about HTML visit the HTML Tutorial]

I am always pleased to hear from you.
Send your comments to