Extra Help on your first JavaScript program


How do I go about writing a JavaScript program from scratch?

This is similar to creating a web page. Indeed, all JavaScript programs sit inside web pages. There are several editing programs that let you create web pages simply, such as Front Page Extra and Dreamweaver, but here I am going to show you the simplest way.

Firstly, you should activate a simple text editor so that you can write the program. The one that I recommend is Notepad, which is available on all personal computers. You can find Notepad by clicking on the icon (probably in the bottom-left corner of your screen). Then choose the "Programs" menu and look for the "Accessories" menu. This will give you the Notepad program.
You should type the following into your Notepad file, exactly as you see it below:
```
<script language="JavaScript">

</script>
```
There is a blank line between those two tags, and in that blank space you write the JavaScript program itself. Use as many lines as you like - some of my JavaScript programs are hundreds of lines long. You can also put in other HTML instructions in the file, although not inside the JavaScript program. The example below shows a file which contains a lot of HTML tags and a small JavaScript program (between <script> and </script> below:
```
<html>
<h1><An example JavaScript program></h1>

<div align="center">
The program will now run:
</div>

<script language="JavaScript">
document.write("This should be written on a red background!");
document.bgColor = "RED";
</script>
</html>
```
Finally, and most importantly, save your file in an appropriate place on your computer disk. This can be on the floppy disk, but you will probably want to save the file somewhere on your hard disk.

When you save your file, be sure to put the extension .htm or .html on the end. This is how your computer will know that you have created a web page (with a JavaScript program in it), rather than a simple text file.


		All right, I've created my text file with the JavaScript program in it. Now, how do I view the result?

Use a program such as My Computer (which you should find on the desktop) to find the file that you have saved on the disk. It should appear as an icon similar to this one:

If you see it displayed using an icon like the one on the right, then you have forgotten to save the file with the correct extension (i.e. you have forgotten the .htm or .html extension on the end of the file name), and the computer thinks it is a simple text file rather than a web page. Use the computer's facilities to rename the file!

To run the program, simply double click on the icon. This activates your web browser and loads the web page into it. The program should run and you should see the results.


If an error occurs in a JavaScript program, the program should stop running and signal the error with a message in a grey box.

Suppose you write the following program and store it (with no blank lines before or after it) in a file:

<script language="JavaScript">
document.write("This line has an error in it.);
</script>

Did you spot the error in that program? I forgot to put in the quotation marks after the message in the document.write(). If you try to run the program, you should get a message like the following:

Notice that the browser has reported that the quotation marks were missing ("Unterminated string constant") and that it occurred 48 characters along in line 2. If you have a text editor which tells you which line the cursor is on then finding lines is easy. Notepad doesn't do this, so finding an error on line 2119 is tricky! (One simply has to count the lines!) Be careful if you have Word Wrap turned on - what looks like several lines may only be one, so you may lose count. You might like to turn Word Wrap off before starting to count the lines.

The error message only appears if your browser has been instructed to display error messages. If it has been instructed to ignore them, then no error message appears, and all that happens is that the program doesn't show the message - which is very confusing.

Here is the way to instruct Internet Explorer to display error messages. (I don't know the equivalent way of doing it in Netscape Navigator):

Error! Choose the "Internet Options" option on the "Tools" menu. This produces a dialog box with several tags at the top. Select the "Advanced" tab. Make sure that there is no tick by the option that says "Disable script debugging" and make sure there is a tick by the option that says "Display a notification for every error."


		The plus symbol, +, has a double meaning!

This often confuses people. The plus symbol is used normally for mathematical addition (in the sense that 2 + 3 = 5), but also for joining two strings together. If either of the two things surrounding the + sign is a string (variable or constant), then the + sign simply produces a longer string by glueing the two parts together. If both the two things are numbers (variables or constants), then the + signs add them together to produce a number. Perhaps a few examples will make this clear:

x = "XXX" + "123";

In this case, "XXX" and "123" are both strings. I know that "123" looks like a number, but it is within quotation marks, so it is really a string. In this case, + glues the two strings together and the variable x is set to "XXX123".

document.write(40.5 + "123");

Here we have another use of +, this time in an document.write() statement. One of the things being "added" is a number (the 40.5) and the other is a string (again, the famous "123"). Because they are not both numbers, + cannot add them in the same way as two numbers, so it glues them together and the message produced on the screen is

40.5123

document.write(40.5 + 123 + 5);

Here we have two uses of +. They are surrounded entirely by numbers (there are no quotation marks around 123 to turn it into a string), so it performs normal mathematical addition, and displays the answer 168.5.

So far we have used just constants, but the same thing applies to variables as well:

var x,y;
x = 20;
y = 100;
document.write(x + y);
x = "Hello";
document.write(x + y);

There are two document.write(x + y) statements, but they don't have the same result. In the first case, the instruction is equivalent to document.write(20 + 100) which produces the message

120

Then the variable x is changed into a string (which is perfectly legal in this language!) Now the instruction document.write(x + y) is working with one string and one number, and produces the message

Hello100

Happy now?