When you, the user, clicks on the button below labeled "cars", you will see alert boxes that output the name of various cars. You'll notice that the cars are in alphabetical order.
Now, lets learn how to do this!
(You are free to "steal" the information in this tutorial if you'd like, and modify it to suit your needs. The generation of the necessary button to run the code will be explained at the end of this tutorial as well).
1. First, we create the block of javascript by enclosing the array and the function in a "script element". The script element is the part of the code that looks like this:
<script type="text/javascript">
</script>
2. Next, we define the array. There are many ways to do this, this example demonstrates just one.
var cars = new Array();
This begins the array. An array is technically
a variable so you start with the word "var".
3. Then we take all of our car names - Nissan Sentra through Honda Prius,
and assign them an index value.
javascript arrays start at zero. Each index value is enclosed in square brackets
([ ]). The cars
are javascript "text strings" so we need to put them in quotes.
Up to this point we have :
<script type="text/javascript">
var cars = new Array();
cars[0]="Nissan Sentra";
cars[1]="Ford Ranger";
cars[2]="Toyota Tercel";
cars[3]="Chevy Chevette";
cars[4]="Dodge Neon";
cars[5]="Chevy Cavalier";
cars[6]="Chevy Malibu";
cars[7]="Honda Prius";
</script>
4. Now that we have our array variable set up we can begin work on the function that creates the "alert" boxes you see when you click the button, as well as the button itself.
Functions, in javascript begin with the word "function" conveniently enough. This tells the browser that the following code is a function and should be executed only when "called".
Immediately following the word "function" will be the name of the function. In our case, we'll call the function "carShout". Remember, javascript functions can be called anything you want within certain guidelines. First, the name can't be a word reserved by the javascript language (a method, the word "array" etc.). Secondly, the name of the function can have only alphanumeric characters or the underscore character...AND the first character can NOT be a number. Other than that you're pretty safe.
Next come the openning and closing parenthesis. These sometimes contain "arguments" or "parameters" for the function to use, but in our case they will remain empty.
All of this being said, the function part of our code so far looks like this:
function carShout()
Now it is time to enclose our function in "curly brackets", a convention common to many programming languages. All lines of code within the curly brackets are the "meat and potatoes" of our function.
function carShout(){
}
To begin the actual code within our function we'll use the sort method of
an array. Recall that when you clicked the "car" button earlier that the cars that were alerted to your
screen were in alphabetical order. (If you didn't notice go back and check it out)
Also, looking at the actual array above you'll notice that the array itself is NOT in
alphabetical order...or any kind of order for that matter. This is where the sort
method comes in. In javascript "methods" are like built in mini-functions. They "do things" to
javascript "objects". In this case the sort method will alphabatize the
cars array object.
Now we are up to this point in the function:
function carShout(){
cars.sort();
}
Next we must have a way for our function to output the contents of the "cars" array. In our case we'll send out a javascript "alert box". We will use a counter variable called "i" and a program loop to accomplish our task. It looks like this:
for(i=0; i< cars.length; i++){
alert(cars[i]);
}
In a nutshell, this part of the function says:
a. Create a counter variable and set its initial value to "0".
b. While the value of the counter variable is less than the total number of
items in the cars array...
c. Send an alert box to the screen that tells the name of the car at the current
index value
d. Go back and see what index value we are currently on,if it is still less than
the number of cars in the cars array send the next alert box out until we are done.
That is the last part of the function! We are almost done.
Here is the entire block of javascript up to this point including the function:
<script type="text/javascript">
var cars = new Array();
cars[0]="Nissan Sentra";
cars[1]="Ford Ranger";
cars[2]="Toyota Tercel";
cars[3]="Chevy Chevette";
cars[4]="Dodge Neon";
cars[5]="Chevy Cavalier";
cars[6]="Chevy Malibu";
cars[7]="Honda Prius";
function carShout(){
cars.sort();
for(i=0; i< cars.length; i++){
alert(cars[i]);
}
}
</script>
The last thing we need to do is create the button that "calls" (makes happen) the
function.
That code looks like this (This part should be OUTSIDE the block
of javascript we just created and somewhere inside the the body of the xhtml document):
<input type="button" value="cars" onclick="carShout()"; />
Below is a very simple outline of an html page that you can copy and paste into a text editor to try for yourself! Just be sure to save the document with the .html or .htm extension and be certain to use a plain text editor such as textpad or notepad and NOT a program like "WORD" or "WORD PERFECT".
Note: In the case below all of the javascript code is in the head section. Javascript can also be located in the html body or in an entirely separate .js (external javascript document) which can be called in by the html document and used on multiple pages. Javascript functions are commonly located either in the head of the (x)html document or in the separate .js file.