Introduction to JavaScript

Introduction to JavaScript
Part 5

One important programming technique is the use of arrays. Most programming language support them in a certain manner. Maybe you have already come to a point where arrays would help you further. But if you looked through the documentation provided by Netscape you realized that nothing is said about arrays. The problem is that arrays do not exist in JavaScript! But I can show you a work around of course!
First, what are arrays? You could say that arrays are many variables bound together. Let's say that you want 10 variables. You could begin with the variables a, b, c ... But this is really complicated. Especially if you want to store 100 or more variables. If you have an array which is called 'MyArray' and it has got 10 elements, you could address the different elements with MyArray[1], MyArray[2], MyArray[3]... (many programming languages start with the 0 as the first element- but we want to have the 1 as first element because this is the way we use it later in JavaScript). So if you want to keep the number 17 in the first element you have to write MyArray[1]=17. You see that you can work with arrays the same way as with normal variables. But there are some more features. If you want to store the number 17 in every element you can write it this way:
for (var i=1;i<11;i++) MyArray[i]=17
The for- command tells the computer how often the next command is going to be executed. The for- loop starts with i= 1. First the computer gets the command MyArray[1]= 17. After this i is incremented by 1 and then the command is MyArray[2]= 17. i is incremented until it has the value 10. (The expression i<11 in the for loop has to be true- if i is 11 this expression isn't 'true' anymore).
Now I will show you a function to initialize arrays. This function was discussed in the JavaScript Mailing list.

function initArray() {
      this.length = initArray.arguments.length
      for (var i = 0; i < this.length; i++)
      this[i+1] = initArray.arguments[i]
   }

You don't need to understand this function. You only have to know how to use this function. If you want to create an array with three elements you just write: var MyArray= new initArray(17,18,19). 17,18,19 are assigned to the elements 1,2,3. You could as well write strings to your array. So you don't have to matter which type is used! var heyho= new initArray("This","is","cool"). Mixing different types is no problem at all: var Mixedup= new initArray(17,"yo",103).

I will now initialize the array 'Mixedup' and then show the output:

This is the script for the output:

<script language="JavaScript">
<!-- Hide
  var Mixedup= new initArray(17,"yo",103);
  document.write("Element No. 1: "+Mixedup[1]+"<br>");
  document.write("Element No. 2: "+Mixedup[2]+"<br>");
  document.write("Element No. 3: "+Mixedup[3]+"<br>");
// -->  
</script>

I have written a small game yesterday. I have encountered a problem you might have got as well. If you want to clear a window or frame you look into the documentation by Netscape and see that JavaScript knows the function 'document.clear()'. But if you implement this function nothing happens! The function document.clear() seems to be broken on every platform. Gordon McComb gave me the following script which clears the window as I wanted it.

     document.close();
     document.open();
     document.write("<P>");

You don't have to write document.write("<P>");. It is only important that you send anything to the window. This works fine with frames as well.

Now we're looking at a script which lets you navigate through different documents. What I'm talking about is the back() and forward()- function. If you have a back- link on your page this isn't the same as the back- button in the Netscape- Navigator. For example I have got some back- links which work like normal links but I know that the user probably comes from that certain page I'm linking to. The back- button provided by the Netscape Navigator goes one step back in your history list. You can do this with JavaScript as well. Just take this link in order to get back again! The script I used here is shown below:

<html>
<body>
<FORM NAME="buttonbar">
     <INPUT TYPE="button" VALUE="Back" onClick="history.back()">
     <INPUT TYPE="button" VALUE="JS- Home" onClick="location='script.htm'">
     <INPUT TYPE="button" VALUE="Next" onCLick="history.forward()">
</FORM>
</body>
</html>

You could also write history.go(-1) and history.go(1).

Index - Part 1 - Part 2 - Part 3 - Part 4 - Part 6 - Part 7