JavaScript, a close relative to Java, has quite a reputation on the Internet. It allows programming to be included on the actual web page, and makes it easy to add special effects not available under HTML alone. The opportunity to add a little pizzazz to your web page makes taking the time to learn JavaScript worthwhile.
An easy example is a very small web page, with just the necessary HTML and a little JavaScript to write out the date:
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <SCRIPT> document.write(Date()+".") </SCRIPT> </BODY> </HTML>
One unusual aspect of it (besides not doing very much) is that the code is embedded in the <BODY> section – normally, most of the JavaScript is in the
section – the reason why is tied up with how JavaScript is executed.JavaScript information in the HTML head section is not processed, but simply stored. Displaying the date (like our example) would make no sense if it was in the head. For that, the body is perfect. However, JavaScript has two different ways of viewing program snippets. In the body, commands can be executed immediately – ‘document.write’ immediately displays the date. But sometimes you need to do more, and need a more complex program. The result is a layout like this:
<HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function runClock() { theTime = window.setTimeout("runClock()", 1000); var today = new Date(); var display= today.toLocaleString(); status=display; } // End --> </SCRIPT> </HEAD> <BODY> <body onLoad="runClock()"> </SCRIPT> </BODY> </HTML>
In the above, the code in the head creates a function called runClock (but doesn’t run it) – in the body, this function is called and runs, producing a clock on your browser’s status bar.
The difference between the function creation and function execution (as shown in the head and body sections) is similar to the difference between compiling and executing. The code in the head is designed to tell the browser that it will be used later – right now, just store it and keep it ready.
In the body, the command onLoad=”runClock” tells the browser that the function it stored earlier (‘compiled’) is now to be run (‘executed’). Usually, the majority of code will go in the head section – and it will often have the word ‘function’ near the front. There will always be a command referring to it in the body.
Another point to remember: older browsers won’t recognize JavaScript – they will see the comment tags (the lines ‘<!-Begin’ and ‘// End –>’) And will ignore everything between. For that reason, you always need to add these comment tags. Otherwise, older browsers will display what looks like garbage.
When implementing JavaScript, try your script on as many browsers as you can. JavaScript has progressed over the years, and there is the possibility that a new code feature won’t work on an older browser. So try as many as possible, especially older ones, and both Netscape and Microsoft versions.
Although there isn’t room here to discuss programming in JavaScript, this does give you an idea of how it is set out. From here, grab a book (or look at the source of favorite web pages), and you can likely figure out where the JavaScript is, and what it is doing.
Remember that the head section often stores the code, while the body runs it (often only needing a line or two), and you’ll do fine. And with this information, you should have no problem splicing in your own (or other’s) JavaScript code – and jazzing up your pages!
