Javascript Tutorial #1
To follow this tutorial, you will need access to a Windows PC running Internet Explorer 5.0 or Netscape 4.08 or above. I have tried wherever possible to make this tutorial work in both browsers and I will highlight differences as they occur. If you have followed the VBScript tutorials then these follow the same basic pattern.
It will be necessary to construct a basic template file to make creating new files so much easier. This file will look something like this:-
<html>
<SCRIPT Language="JavaScript">
<!--
// -->
</SCRIPT>
<body>
</body>
</html>
It is here that the first incompatibility rears it's ugly
head. Note the // before the ->>.
If you are using a version of Netscape
higher than 4.08 then it may work
without the // but on mine it wouldn't.
The IE version looks like this but won't
work with Netscape.
<html>
<SCRIPT Language="JavaScript">
<!--
-->
</SCRIPT>
<body>
</body>
</html>
I will continue this tutorial with the former version. You could leave the <!-- and --> out completely but it means that older browsers will throw up an error.
You will notice that it is an HTML file but embedded within it is a program written in script (in this case JavaScript). Now a word of warning. JavaScript has got nothing whatsoever to do with Java. I'm not entirely sure why it was chosen and was originally called LiveScript. Still, JavaScript it is and we're stuck with it. I'll go through the file a line at a time.
<html>
It's an ordinary web page which always starts with this tag to tell the browser to treat it as command rather than just plain text.
<SCRIPT Language="Javascript">
Another important tag. Without this, the browser will interpret all the code as simple text rather than as a program.
<!--
Not strictly necessary but older browsers will throw an error. Everything after this and before the next tag will be interpreted as program source code and will produce an error if it isn't. More on that later.
-->
End of the script.
</SCRIPT>
Close the script section.
<body>
Now the HTML proper can be specified. More later.
</body>
</html>
Close the main body of the HTML and close the file itself. Here's that file in full again.
<html>
<SCRIPT Language="JavaScript">
<!--
// -->
</SCRIPT>
<body>
</body>
</html>
Cut and paste this into a file and name it Template.HTM.
Double click on it in Windows Explorer and wait for IE (and/or
Netscape) to load and check there are no errors and that
the browser window is blank. If there is writing of some
kind then you have made an error somewhere. Now make a
copy of template.htm and rename it to alert.HTM.
Between the two code tags add:-
alert('Hello');
This displays a windows style dialog box also called a messagebox. Now there are some important concepts iluustrated by this one line of code. If you use Alert or ALERT then it won' work as Javascript is very strict about the case of keywords (which is one of the reasons why I like VBScript). The alert keyword is a function and therefore has to have brackets (like the C programing language does). The text is enclosed in single quotes and is terminated by a semi-colon (again like C).
This will make the file look as follows:-
<html>
<SCRIPT Language="Javascript">
<!--
alert('Hello');
// -->
</SCRIPT>
<body>
</body>
</html>
Save it and run it as before. You should see a standard
Windows message box containing a greeting. Click OK.
Note that the browser window remains. Pressing F5
will refresh it and run the program again. Click
OK and close the browser in the normal
way. Congratulations. You have written your first script.
One thing needs to be added for completeness and that is some comments about the program, who wrote it, the date and perhaps a description of what it does. Probably not required on such a small program as this but it is a good habit to get into. Take a look at this:-
<SCRIPT
Language="Javascript">
<!--
// Author:- Nick
// Date:- Now
// Description:- Hello program
// Comments:- Pretty simple eh?
// This is a comment
alert('This is code');
// This is also a comment
// -->
</SCRIPT>
I have ommitted all the HTML stuff for clarity but it will need to be included when the file is created. Unlike VB, there is only one way of showing comments one of which is the // double forward slash (nicked from Pascal). Comments are part of the code and so must be inside the script tags. They can also be added between lines of code to explain what is happening although excessive use of comments can slow the code down a bit - not a problem on new machines but could give one of your users a problem if they are using older kit. The program is now complete.
If you want to know more
then view the next tutorial from the main menu.
Please eMail me at: nickjc@nickjc.co.uk if you require help