Onto the second of the JavaScript Tutorials. In this one we'll learn about functions and events and how to make a basic script.

JavaScript is a case-sensitive language, so This is different to this. An important fact, as it means that you have to be very careful when using a naming standard.

I recently made a script and it took me three hours to debug. I found out that my error was that I wrote SetTimer instead of setTimer.

Pretty annoying.

What I mean by Naming Standard is that you have to pick a way of naming functions and variables and stick with it. Alot of people use every letter uncapitalized. I use, personally, the first letter of words capitalized (eg ThisFunction).

Lets look firstly and quickly at variables. Variables are simple, they can be pretty much anything you want. You HAVE to declare variables, and you do this simply with:

var VariableName;

You can manipulate variables throughout the script and change their values as you go along.

But what are functions? Functions are sections of the code that can be called on at will.
Lets say you wanted each link to flash when the user puts his/her mouse over it. You have one of two choises.

You could (a) write a piece of code for each link, making the size of the HTML huge and a long download (A.K.A the frontpage method).
OR you could (b) write the piece of code ONCE at the top of the page, and whenever the user activates a link the link name is passed onto the code and the code is executed for the link.

Functions make the code smaller and faster.

This is an example of a function:

function ShowText(var Text)
{
     document.write(Text);
}

This just writes the text to the screen so if you say ShowText("Hello") then it will write Hello on the screen. I know that that one is pretty useless but we'll get there

Now that you've got a basic understanding of functions (most probably you did anyway) we can go on to objects and events.

A browser window, to JavaScript anyway, is divided up into several objects. These objects are, themselves, divided up into further objects which are divided up again until you get to what you want. The most common objects are document, window and screen. They are pretty self explainatary, they go from small to large.

Each of these objects are divided down into smaller objects. The objects are seperated by a full stop.

Examples of these objects are:

document.write - writes to the screen.
screen.width - returns the width of the screen.
window.onload - sets what to do when the window fully loads.

There can be more than just two objects in here, like this one:

document.body.onmousedown - A pretty funny one that does something when the user clicks the mouse anywhere on the body of the document (not the actual window note)

So lets look at a slightly more complicated script.

<SCRIPT LANGUAGE=JavaScript>

function SwapColours()
{
     document.bgColor='#00FF00';
     setTimeout("document.bgColor='#FF0000'", 1000);
     setTimeout("SwapColours()", 2000);
}

window.onload = "SwapColours()";

</SCRIPT>

What does this do? When the window loads, it calls a function. Note the quotation marks - you have to use this else window.onload would equal the function SwapColours, but instead SwapColours is executed. You might not understand that, but you have to understand that it's necessary.

As soon as SwapColours is called, it changes the background colour to green. It then sets a timer for one second to change the colour to red, and sets another timer for two seconds to call itself again.

So this means that a second after the window loads, the background colour changes, and a second after that the function calls itself in an infinite loop. Note that you HAVE to set a timer when the function is calling itself, otherwise you'd get bad results.

So now you should know the basics of JavaScript. If you have any questions or suggestions, just e-mail me at strider@strategyplanet.com. JavaScript is hard, alot harder then normal HTML or ASP, and it may take a little while to get used to it.

Next tutorial we'll go into more events and more functions and more scripts as well as (Shock Horror) Maths