Part 1 – Introduction

Introduction
Thousands of sites around the world use JavaScript but it is still not a particularly well known programming language (compared to HTML). If you have seen anything interactive on a website like a calculation, pop-up-window, some web counters and even some navigation systems then you have probably seen JavaScript.
Unfortunately, JavaScript has changed from being a language which improves web sites to a language which destroys them. This is because there are huge JavaScript sites which have thousands of scripts for download. These usually involve things which do not benefit a website at all, like status bar effects and scrolling text which do not add much to a website.
JavaScript must not be confused with Java. Java is a completely different programming language. It is usually used for text effects and games, although there are some JavaScript games around.
So why should you use JavaScript? Well, JavaScript can allow you to create new things on your website that are both dynamic and interactive, allowing you to do things like find out some information about a user (like monitor resolution and browser), check that forms have been filled in correctly, rotate images, make random text, do calculations and many other things.
In this tutorial I am assuming that you understand HTML.
What Do I Need?
You will not need any special hardware or software to write JavaScript, you can just use Notepad or any other text editor. You do not even need to have any special software on your webserver. JavaScript will run on any web server anywhere! All you will need to do is make sure that you have at least a version 3 browser, as versions of Internet Explorer and Netscape Navigator before this do not support JavaScript, so you will not be able to see your creations.
Declaring JavaScript
Adding JavaScript to a web page is actually surprisingly easy! To add a JavaScript all you need to add is the following (either between the <head></head> tags or between the <body></body> tags - I will explain more about this later):

<script language="JavaScript">

JavaScript

</script>

As you can see the JavaScript is just contained in a normal HTML tag set. The next thing you must do is make sure that the older browsers ignore it. If you don't do this the code for the JavaScript will be shown which will look awful.
There are two things you must do to hide the code from older browsers and show something instead:

<script language="JavaScript">

</script>
<noscript>

HTML Code

</noscript>

As you can see this makes the code look a lot more complex, but it is really quite simple. If you look closely you can see that all that has been done is that the JavaScript is now contained in an HTML comment tag. This is so that any old browsers which do not understand <script> will just think it is an HTML comment and ignore it.
Because of this the <noscript> tag was created. This will be ignored by browsers which understand <script> but will be read by the older browsers. All you need to do is put between <noscript> and </noscript> what you want to appear if the browser does not support JavaScript. This could be an alternative feature or just a message saying it is not available. You do not have to include the tag if you don't want anything shown instead.
Commenting
Something you might have noticed in the example above was that on the line:

// End Hide-->

There was a:

//

which does not usually appear in an HTML comment. This is because it is the sign for a JavaScript comment (it was included here to stop the browser from thinking the closing HTML tag was a piece of JavaScript).
It is very important in JavaScript, as with any other programming language to include comments, especially if you want others to learn from your code. It is also useful for including a copyright message.
What Now?
Now you have learnt all about the basics of JavaScript. You know how to declare a JavaScript and how to make it backwards compatible. In the next part I will show you how to write some code to actually do something.

Part 2 - Alerts, Prompts & Variables

Introduction
In part 1 I showed you how to declare a JavaScript and make sure that non-compatible browsers can see something. In this part I will show you how to actually do something with your JavaScript.
Alerts
The first JavaScript command I will show you is:

alert()

This command will make a popup box appear (click here to see it in action). This can be useful for warning users about things or (in some cases) giving them instructions. It is used in the following way:

alert('Text for alert box');

In the example above I have used single quotations ' but you could use double quotations if you want to ". They work exactly the same way. The reason I use single quotes is because, later on, when you are using HTML code and JavaScript together you will need to use them and it is good to be consistent.
Here is the full JavaScript for the earlier example:

<script>

</script>

This is placed between the <head> and </head> tags of the page. As you can see, I have used a comment tag as well as the alert box code. This makes your code more readable but is not essential.
Variables
Variables in JavaScript, as in other computer languages, can be used to store information. For example I could tell the computer that the variable called:

my_number

should have the value:

3456

Variables can also contain text for example the variable:

my_name

could have the value:

David Gowans

Variables can be very useful for text or numbers that you repeat several times in a program, for doing calculations or for getting input from a user. Variables are declared as follows:

Number:

var my_number = 3456;

Strings (text):

var my_name = 'David Gowans';

As you can see a string is included in quotes (either single or double) but a number does not. If you include a number in quotes it will not be treated as a number. You may also notice that each line ends with a semicolon. This is standard JavaScript code to show the end of a line. Always remember to put it in.
When naming your strings you can use any word or combination of words as long as it is not already in use by JavaScript (so don't use alert as a variable name etc.). Do not include spaces, replace them with _.
Calculations
You can do calculations if you have variables containing numbers. Here is an example of some code which does a calculation:

// Set Variables
var first_number = 15;
var second_number = 5;
var third_number = 10;
var fourth_number = 25;

//Do Calculations
var new_number = first_number + second number
var answer = new_number * third_number
var answer = answer / fourth_number

This code sets four number variables. It then adds the first and second numbers together and stores the answer as a variable called new_answer. Then it multiplies new_number by the third number and stores the answer as answer. Finally, it divides the answer by the fourth_number to get a new value for the answer.
Getting Information From The User
Once you have started using variables you will realize that it will be quite useful to get some information from the user. You can do this by using the:

prompt()

command. Take a look at this example. I will explain how this works.
First of all, the new prompt command is used. I set the variable your_name using it:

var your_name = prompt('Please enter your name', 'Your Name');

The text between the first set of quotes is what is written on the prompt box. The text between the second set of quotes is what is the default text for the input section of the box.
After this I have to create the output string. I do this by adding together the input with two strings I declared earlier (view the source on the example page for more information):

var output_text = welcome_text + your_name + closing_text;

As you can see this is much the same as adding 3 numbers together but, as these are strings they will be put one after the other (you could have also used quotes in here to add text and strings together). This added the text I had set as the welcome_text to the input I had received and then put the closing_text on the end.
Finally I displayed the output_text variable in an alert box with the following code:

alert(output_text);

which, instead of having text defined as the content for the alert box, places the string in the box.
What Now?
In part 3 I will show you how to display information in the page.

Part 3 - Displaying Information

Introduction
In the last part I showed you how to display alert boxes and how to get information from the user. I also explained how variables work.

document.writeln

This command is very useful as it will output information to a web page. I will start with a basic example of how to use it:

document.writeln('Hello there!');

This basically tells the JavaScript to write to the document (web page) on a new line the text Hello there!. The really useful bit of this is that you can tell the JavaScript to output text, HTML and variables. First of all I will show you how to output HTML:

document.writeln('<font face="Arial" size="5" color="red">Hello there!</font>');

This will display the following on the page:

Hello there!

As you can see, this allows you to just put standard HTML code into a web page using JavaScript. If you can't see a good reason for this it is not surprising at the moment but next I will introduce variables to the script.
Outputting Variables
If you look at the final example I did in the last part, where I took information from the user and added it to some other text before displaying the output in an alert box. This can also be displayed in the page. Before doing this, though, I will explain a little more about where you can put your JavaScript code.
Up until now all the JavaScrit code has been contained inside the <head> and </head> tags of the HTML document. The reason for this is that the JavaScript will be loaded and executed before the rest of the document. This works fine for most scripts but, as the scripts become more advanced, you may need to have them both in the document and the head. I will use this script to demonstrate.
To put JavaScript in the <body></body> section of the page is exactly the same as putting it in the <head></head> section of the page. I would suggest that you adopt the following way of creating scripts:
Put all your initialization code in the head of the page (like setting variables, prompts, alerts etc.) and then all display code (document.writeln etc.) in the body of the page. This is the code for the new improved version of the example which uses document.writeln:

<html>
<head>
<title>Variable Example</title>
<script>

</script>
</head>
<body>
<script>

</script>

<a href="index3.htm#variables"><font face="Arial">Back</font></a>
</body>
</html>

You can see this code in action here.
As you can see from the above code, variables are added into document.writeln by using the + signs. There are no quotes round the variable names.
Remote JavaScript
Now you have learnt how to use the document.writeln command you can now start using one of the most useful applications of JavaScript, remote scripting. This allows you to write a JavaScript in a file which can then be 'called' from any other page on the web.
This can be used for things on your own site which you may like to update site-wide (like a footer on the bottom of every page) or something used on remote sites (for example newsfeed or some counters).
To insert a remote JavaScript you do the following:

<script language="JavaScript" src="http://www.yourdomain.com/javascript.js">
</script>

Which will then run the JavaScript stored at http://www.yourdomain.com/javascript.js. The .js file is also very simple to make, all you have to do is write your JavaScript (omitting the <script>, </script>,  tags into a simple text file and save it as something.js.
If you want to include information for browsers which do not support JavaScript you will need to put the <noscript></noscript> tags in the HTML, not the JavaScript file.
There is one problem with using remote JavaScript which is that only the recent browsers support it. Some browsers which support JavaScript do not support Remote JavaScript. This makes it advisable not to use this for navigation bars and important parts of your site.
What Now?
In the next part I will show you how to open and manipulate browser windows.

Part 4 - Browser Windows

Introduction
In the last part I showed you how you can use JavaScript to prompt the user for information and how you can display HTML via JavaScript. In this part I will show you how you can create and manipulate browser windows using JavaScript.
Windows and HTML
Before learning how to create and manipulate windows in JavaScript, it is important to know how to create and manipulate them in HTML. The HTML manipulation is very basic but will also help you to understand how windows work in web browsers.

Firstly you must know the two ways of creating a link which opens in a separate window. The most common use is to have:

<a href="link.html" target="_blank">Click Here</a>

This is the standard HTML code for opening a new window with the page in it.
A less common way of opening a new window is to use:

<a href="link.html" target="mywindow">Click Here</a>

This will create a new window, just like the first set of code, but it will also name the window 'mywindow'. This means that you can then have:

<a href="page2.html" target="mywindow">Change the page</a>

which, when clicked, will change the page which appears in the window you opened.
Knowing about how a window name works is very important as you must understand it to use JavaScript windows effectively.
Opening A Window With JavaScript

The first thing you should learn to do with JavaScript is to do exactly the same thing with JavaScript as you could do with HTML. The JavaScript command used to open a window is:

window.open

For this to work, though, it requires two extra things. Firstly you will need to have some extra information so that the JavaScript knows how to open the window:

window.open('link.html','mywindow');

This means that a window called 'mywindow' will open with the page link.html in it, exactly like with the HTML code above.
This code can either used as part of your JavaScript code (for example if you included it in the JavaScript code in the <head> section of your page it would open when the page loaded) or can be used when a link is clicked. To do this you must use another JavaScript command called onclick.
I will give you more information about how this command works in a later part but for now all you really need to know is the following: In your standard HTML code include a link as follows:

<a href="#" onClick="window.open('link.html','mywindow');">Click Here</a>

As you can see this is just the same window.open command inside an HTML tag.
Manipulating The Window
The main reason of using JavaScript to manipulate windows, though, is because you can set many things on the window which you could never do with HTML. JavaScript allows you to use commands to decide which parts of the browser window appear. This is done using a third part of the window.open command. This is where you decide the window features:

window.open('link.html','mywindow','window features');

There are many things you can include here. For example if you wanted a window that only has a location bar and a status bar (the part at the bottom of the browser) then you would use the following code:

window.open('link.html','mywindow','location, status');

There are many different things you can include in your new window:

Feature	Function
menubar	The File, Edit etc. menus at the top of the browser will be shown
scrollbar	This will show scrollbars at the side of the window if they are needed
width	You can set the width of the window in pixels (see the next section)
height	You can set the height of the window in pixels (see the next section)
toolbar	This will display the browser toolbar with the Back, Stop, Refresh buttons etc.
location	The location bar (where you type in URLs) will be displayed in the browser
resizable	This will allow the window to be resized by the user
directories	This will show the directories in Netscape browsers like 'Whats new' and 'Whats cool'

Examples Of Manipulating Windows
You may be a little confused by all these options so I will show you a few examples of opening a window in JavaScript:

This window will open with a location bar, toolbar and will be resizable:

window.open('window1.htm','the_first_window','location, toolbar, resizable');

This will open another page in this window:

window.open('window2.htm','thefirstwindow');

This will open a window 200 pixels wide and 300 pixels high. It is not resizable and has a status bar and will scroll if necessary. This is a very commonly used combination:

window.open('window1.htm','thesecondwindow','height=300,width=200,status,scrollbars');
Part 5
In this part you found out how to create and manipulate windows using JavaScript. In the next part I will explain how to create mouseover images and more on how to execute JavaScripts.

Part 5 - Link Events, Image Swaps & The Taskbar

Introduction
In this part I will show you how to use link events, do image swaps and display things in the browser status bar.
Link Events
A link event is a different way of including JavaScript on your page. Instead of having <script> tags in your HTML you can set JavaScript that will only be executed when certain things happen.
There are three ways of executing some JavaScript code in a link. They are:

onClick
onMouseOver
onMouseOut

They can have many different uses but the most common is for image swaps (mouseover images).
onClick
onClick works in exactly the same way as a standard HTML link. It is executed when someone clicks on a link in a page. It is inserted as follows:

<a href="#" onClick="JavaScript Code">Click Here</a>

As you can see, one main difference is that the href of the link points to a #. This is nothing to do with the JavaScript, it just neabs that, instead of opening a new page, the link will not do anything. You could, of course, include a link in here and you would be able to open a new page AND execute some code at the same time. This can be useful if you want to change the content of more than one browser window or frame at the same time.
onMouseOver and onMouseOut
onMouseOver and onMouseOut work in exactly the same way as onClick except for one major difference with each.
onMouseOver, as the name suggests, will execute the code when the mouse passes over the link. The onMouseOver will execute a piece of code when the mouse moves away from the link. They are used in exactly the same way as onClick.
Rollover Images

This is one of the main ways of using link events. If you have not seen rollover images before, they are images (usually used on navigation bars like the one at the top of this page) and when the mouse moves over the link it changes the image, which is displayed.
This is done using a combination of the onMouseOver and onMouseOut events. To explain - when the mouse passes over the link you want the image to change to the new image, when it moves away from the link, the old picture should be displayed again.
The first thing you must do is edit the <img> tag you use to insert the image you want to change. Instead of just having something like this:

<img src="home.gif" alt="Home">

you would have the following:

<img src="home.gif" alt="Home" name="home_button">

The name for the image could be anything and, like the window names from the last part, is used to refer to the image later on.
Now you have given a name to the image you are using you will want to create the rollover. The first thing you must do is create the image for the rollover and save it. Then create a link round the image. If you don't want to have a link on the image you can still do a rollover by specifying the href as # which will make the link do nothing eg:

<a href="#"></a>

The following code will make a mouseover on your image (assuming you inserted the image as shown above and called your mouseover image homeon.gif):

<a href="index.htm" onMouseOver="home_button.src='homeon.gif';" onMouseOut="home_button.src='home.gif';"><img src="home.gif" alt="Home" name="home_button" border="0"></a>

I will now explain this code:
Firstly you are creating a standard link to index.htm. Then you are telling the browser that when the mouse moves over the link the image with the name home_button will change to homeon.gif. Then you are telling it that when the mouse moves away from the link to change the image called home_button to home.gif. Finally you are inserting an image called home_button with an alt tag of 'Home' and no border round it.
If you have read the last part of the tutorial you will see that onClick, onMouseOver and onMouseOut can be used with text links as well as images in exactly the same way as you did above. This, of course, means that you can create interesting effects by, when the mouse moves over an image, another image changes. This could be very useful for placing a description of a link on a page.
Status Bar
The status bar is the grey bar along the bottom of a web browser where information like, how much the page has loaded and the URL which a link is pointing to appears. You can make your own text apppear in the status bar using the JavaScript you already know using the following code:

window.status='Your Text In Here';

You can include this in standard code, onClick, onMouseOver or onMouseOut. This allows you to do things like display a description of a link when the mouse moves over it.
Part 6
In the next part I will show you how to use the If commmand and how to use loops.

Part 6 - If and Loops

Introduction
In previous parts I have shown you how to declare a JavaScript, open windows and display information. In this part I will show you how to use two of JavaScripts most important functions, If and Loops.
If
The if function allows you to check to see if something is true or false. For example you could check to see if text entered by a user matches a piece of text you already have (like a password). As you can see this could be very useful for many sites. The code is as follows:

var guess = prompt("Please guess a number between 1 and 10","");
if(guess == 5)
{
alert('Correct! I was thinking of 5');
}
else
{
alert('Wrong! I was thinking of 5');
}

This code is made up of three main parts. The first part which gets the guess from the user, you have used before. This is followed by:

if(guess ==5)

Which is quite self explanitary. It checks to see if the variable guess is equal to 5. The if statement is followed by:

{
alert('Correct! I was thinking of 5');
}

The important part of this is the curly brackets round the alert command. These contain the code which should be executed if the if statement returns 'true' (in this example if guess equals 5). The final part is the:

else
{
alert('Wrong! I was thinking of 5');
}

This tells the browser that if the if statement does not return 'true' (in this example if guess does not equal 5) to execute the code between the curly brackets.
Together this code makes up the if statement.
More If
There are other conditions you can test with the if statement. Firstly, as well as using numbers you can compare variables or text:

if(variable == variable)

if(variable == "some text")

As well as doing this you can check to see if one variable is greater than another, less than another or not the same as another:

if(variable < othervariable)
If variable is less than othervariable

if(variable > othervariable)
If variable is greater than othervariable

if(variable <= othervariable)
If variable is less than or equal to othervariable

if(variable >= othervariable)
If variable is greater than or equal to othervariable

if(variable != othervariable)
If variable is not equal to other variable

These can be very useful in your web pages. You can also check to see if two conditions are true before executing code using &&:

if(variable1 == variable2) && (variable1 < variable3)

This will only execute its code if variable1 is equal to variable2 and is less than variable3. You can also run the code if one of the conditions is true:

if(variable1 == variable2) || (variable1 < variable3)

This will only execute its code if variable 1 is equal to variable to or is less than variable3.
While Loops
While loops are pieces of code which will repeat until the condition is met. This is very useful for things like passwords when you want to keep asking the user until they get it correct. For example this code will repeat until the user enters the word 'hello':

var password = 'hello';
var input = prompt('Please enter the password', '');
while(input != password)
{
var input= prompt('Please enter the password''');
}

This will continuously loop the code inside the { } until the test input does not equal password is false (the password is correct).
For Loops
For loops are used to do something a set number of times. For example:

for(loop=0; loop < 11; loop++)
{
document.writeln(loop);
}

This will start by setting the variable loop to 0, it will then loop, adding one to the value each time (using the loop++ code) as long as loop is less than 11. They take the form:

for(starting value; test; increment)

These have many uses.
Part 7
In part 7 I will show you how to manipulate HTML forms using JavaScript.

Part 7 - Forms & Functions

Introduction
In part 6 I showed you how to use If and loops. In this part I will show you how you can manipulate HTML forms with JavaScript to improve your website.
Changing The Value Of A Text Box
Before you can manipulate text boxes you must first know how to create a form and how to create a text box in HTML. I will quickly explain this.
Forms for JavaScript are slightly different to standard ones as they do not require any information or script to handle them. You can do everything by just giving the form a name (although later you may want to add the other information so that you can also have the form submitted):

<form name="formname">
</form>

In this form you can place a text box using:

<input type="text" name="boxname">

Once you have this you can create your first JavaScript to refer to a form:

Top of Form

Bottom of Form

Move the mouse over here to add some text to the box

This is done very easily using the onMouseOver property of the link. It can refer to the text box as follows:

window.document.example1.first_text.value='Hi there';

This tells the browser to put 'Hi there!' into the value of the item called 'first_text' in the form called 'example1'.
You can also do this with multiline text boxes. You can use
/n
to start a new line.
In this section, you have learnt the most important part of this lesson, how to refer to an item in a form.
Events
Just like links, you can set events for items in a form. They are:

onBlur - Happens when the cursor is moved out of the field
onFocus - Happens when the cursor is moved into the field
onChange - Happens when the field is changed and the cursor moves out of it

These are placed into the code as part of the form's item for example:

<input type="text" onBlur="dothis">
JavaScript Functions
JavaScript functions are very useful, and this seems an appropriate place to introduce them. They are pieces of JavaScript which can be declared at the top of your page and can then be referred to again and again in your code. You can even pass parameters to them and make them do different things.
Functions take the following form:

function functionname(parameters)
{

}

For a very basic function you need no parameters and it would be constructed like this (in the <head> of the document):

function sayhi()
{
alert(Hi there!);
}

Then, anywhere in the text you could place this:

<a href="#" onMouseOver="sayhi();">Say Hi</a>

Which would display the alert whenever the mosuse passed over it. Unless you are repeating something many times, though, this will not seem particularly useful. This is where parameters become useful.
Parameters
Parameters are a very useful part of functions. They allow you to pass data to the function when it is called. Here is an example:

function say(what)
{
alert(what);
}

in the head, then:

<a href="#" onMouseOver="say(hi);">Say Hi</a>
<a href="#" onMouseOver="say(bye);">Say Bye</a>

What this is doing is the information in the brackets is passed to the function. In the brackets of the function is the word 'what'. This is telling the JavaScript to assign the information in the brackets to the variable what (the same as var what='something';). You can even do this with multiple pieces of information by separating them by commas.
As you can see functions and parameters are very useful.
Part 8
In the next part I will show you more of what you can do using forms and how you can use JavaScript to process them.

Part 8 - More Forms

Introduction
In the last part I explained a few of the things you can do using forms. In this, the final part, of the JavaScript tutorial I will explain how you can do some other things with your JavaScript forms.
Using The Submit Button
The most common use of forms is to submit data to a script so that it can be processed. This is fine if you are using CGI to do a mailto form or something like that, but if you just want to run a piece of JavaScript from a form you will need to do things a little differently. The first part you must learn about is the return false; attribute. It can be used as follows:

<form name="myform" onSubmit="return false;">
<input type="submit" value="Submit">
</form>

You can try it out below:

Top of Form

Bottom of Form

What this code does is tell the JavaScript that when the form is submitted it should do nothing. This stops Netscape from refreshing the page (as it would do if there was just a submit button and the form had no action). Now what you can do is to call a function using the submit button:

<form name="myform" onSubmit="MyFunction(); return false;">

Which will tell the browser to run the function 'MyFunction' when the Submit button is clicked. You can, of course, use this without the:

return false;

part. This would be useful if, for example, you want to validate a form before it is sent to a CGI script. You would include the form's action as normal. Then, in the onSubmit part you would call your function to check what had been entered.
Checkboxes
Checkboxes and radio buttons are two of the remaining form items. First I will cover checkboxes.
Checkboxes have two possible values:

Unchecked Box
Checked Box

As there are only two possible values, the JavaScript to refer to a checkbox is slightly different to that of a text box. In the example below the checkbox has been given the name my_checkbox and is in the form example1.

if(window.document.example1.my_checkbox.checked=true)
{
alert('The box is checked!')
}
else
{
window.document.example1.my_checkbox.checked=true;
alert('The box was not checked so I have checked it!');
}

I will now explain what this code does. It will check the value of the checkbox. If the value is ture (which means the checkbox is checked) then it will display an alert box which will tell you the box is checked. If it is not checked it will check the box (put a checkmark in it) and tell you what it has done.
If, of course, you want to check or refer to the unchecked value of a checkbox the code would be:

window.document.example1.my_checkbox.checked=false;

Remember that, when refering to check boxes you do not need to inclose true or false in quotations.
As with all other form objects you can use onBlur, onChange and onFocus.
Radio Buttons
Radio buttons are usually found in groups like this:

Blue
Red
Green

Only one button in the group can be checked at a time. Radio buttons work in exactly the same way as a checkbox, having a .checked property which can either be true or false.
Selects and Menus
The two remaining form elements are selects and menus. I will cover menus first. Menus are drop down boxes with several options in them (they are mainly used for things like selecting your country on a form). Selects are really just menus with multiple lines and scrollbars. To show how they work I will show you a quick example of a menu in action and the code for it. For a select box I would just change the height propery. To see the example click here. The code used is below:

<form name="go" onSubmit="return false;">
<select name="select" onChange="window.document.location=window.document.go.select.value;">
<option value="#" selected>Please Select</option>
<option value="http://www.microsoft.com">Microsoft</option>
<option value="http://www.yahoo.com">Yahoo!</option>
<option value="http://www.gowansnet.com">Gowansnet</option>
</select>
</form>

What this code is doing is, when the select is changed it is telling the page in the browser to change its location to the value of the select box. The location of the document is accessed using:

window.document.location

As you can see, this is could be very useful, both for getting feedback from visitors and for redirecting them (as in the example above).
Conclusion
In this tutorial I covered some of the most important parts of JavaScript and now you should be able to start writing some quite advanced scripts. There is still a lot of JavaScript left to learn with many more advanced commands. In the future I will do a tutorial on this. One way of improving your skills, though, is to look at the code of other people's pages that use JavaScript. Don't steal them but you can learn more about the language by doing this.