Back to 12/96 Features: Web Winners
Up to Table of Contents
Ahead to 12/96 12/96 Features: On the Road with JavaScript...Script and More Script

12/96 Features: On the Road with JavaScript

No matter what your platform, JavaScript
can add portable pizzazz to your pages.

By Pratik R. Patel

You've heard the Java jive-how it can jazz up an otherwise ho-hum HTML page. And you know all about Java's independent nature-how it will run on a variety of platforms. You know, too, that Java is a programming language. Most cagey coders can crank out Java apps in short order, but if your idea of programming is setting your VCR's clock, your jump to Java may be a quantum leap.

You can learn Java, but as with any language, the road to fluency can be bumpy. If you have the spare change and a little faith, you can hire someone to do it for you. Better yet, you can turn to Java's less intimidating sibling, JavaScript.

No Compiler Necessary

JavaScript was developed by Netscape and Sun Microsystems as a basic scripting language coded directly into HTML pages. An embedded script runs as soon as a page is loaded. You don't need a compiler or advanced coding skills to produce JavaScript-enabled Web pages: All you need is a text editor.

JavaScript's platform-independence and lack of complexity account for its appeal. It's simple enough so nonprogrammers can pick up the syntax quickly, yet flexible and powerful enough to be truly useful.

Despite their commom name, JavaScript and the full Java programming language are really quite different. JavaScript's syntax looks much like Java's, and both are object-based. However, Java is a complete object-oriented programming language, while JavaScript is closer to (though not the same as) a markup language. Like HTML, JavaScript is not case sensitive.

Scripting a Page

JavaScript lets you add enormous functionality to a Web page, from simple operations like automatically reloading a page to more complex procedures such as data verification on a form. Your JavaScript toolkit is a modest affair, too: You only need a text editor and a browser that supports JavaScript. JavaScript is embedded in your HTML code.

The HTML tag for JavaScript is <SCRIPT LANGUAGE="JavaScript"> </SCRIPT>. Older Web browsers that don't support JavaScript will ignore unsupported tags. To stay on the safe side, you can make sure the information between the SCRIPT tags doesn't get picked up by old browsers by surrounding the JavaScript text with HTML comment tags, <!- - and // - ->.


<!- - Put JavaScript inside a HTML comment tag

document.write("Hello world")

// end comment clause - -></SCRIPT>

The above illustrates one of two ways to call a JavaScript (the script generates a new HTML page that says "Hello world"). The second way is to access it directly in your HTML code like this:


javascript/" onMouseOver="window

.status='Go to the JavaScript

Index'; return true">

JavaScript resources</A>

This code will cause the message "Go to the JavaScript Index" to display in the Web browser's status bar when you move the cursor over the hyperlink. Place the script directly into the HTML using JavaScript's onMouseOver event handler, followed by the code, surrounded by quotes.

These very simple JavaScript examples illustrate how easily it can be integrated into a Web page. Keep in mind that whenever you come across a page with JavaScript, you can see the actual code by viewing the page's source.

Real-World Scripts

One of the most useful applications for JavaScript is form verification. You can create a JavaScript that will automatically check data entered on a Web form before sending it back to the server for processing. This allows more efficient data gathering by ensuring that required fields are completed properly before the server processes and stores the information.

The following script will check the data you entered in a form to make sure it is a valid e-mail address before sending that data to the server.


function testEmail(form) {

field =;

if (field.value == "" || field

.value.indexOf ('@', 0) == -1) {

alert ("Enter a valid email address")

return (false); }


return (true);


function test4Something(form) {

field = form.something;

if (field.value == "") {

alert ("Please provide a value for this box")

return (false); }


return (true);


function checkForm (form) {

if (!testEmail(form)) return;

if (!test4Something(form)) return;

alert ("Thank you for filling out

the form correctly");


//un-comment the above line to

//send the form data to the CGI

//specified in the ACTION property

//in the FORM tag below.




You can embed an even easier, shorter JavaScript applet in your HTML to display a Web page's modification date. As simple as they are, these few lines of code can help facilitate the tracking of pages on your site. The JavaScript for this operation is:


document.write("<center>Last Modified:"

+ document.lastModified +



If you maintain a large number of Web pages, insert this code into your Web document. The code will retrieve the most recent update information each time the page is accessed. If your Web pages have time-sensitive content, you may want to display the modification date at the top of the page.

Harness the Browser's Power

Now that you've seen some of the things you can do with JavaScript, let's see how it operates with the more advanced elements of HTML. You can even control some of your Web browser's components with JavaScript-the script that scrolls text across your browser's status bar is a prime example.

You can also use JavaScript to handle more sophisticated pages. Web pages have become quite complex, with elements such as applets and inline files that are dependent on browser plug-ins. Getting all these parts talk to one another can become a daunting task. JavaScript can serve as a bridge between applets, plug-ins and other page components.

For example, if your pages include frames, you can manipulate them easily with JavaScript. With a few lines of code you can clear a frame or quickly change its background color. Without JavaScript, you'd need to reload an empty page or one with a different background color.

<INPUT TYPE="button" VALUE="Red

BackGround" onClick="document


Put the above JavaScript lines in a Web page, and when you click on the page, the background will turn red. Similarly, you can use "Blue," "Black" or any HTML-defined color names, or use the hexidecimal codes for those same colors. Red, for example, is COLOR="00FF00" in hex.

Each frame on a page is accessible as an object, as are many other page parts. You can reset predefined object properties with JavaScript code using either a SCRIPT section or an inline JavaScript tag embedded directly in the HTML code. You aren't limited to working with JavaScript's standard predefined objects; you can create your own objects that may, in turn, encapsulate other objects. You can also create variables to use in your code.

In the earlier form-checking example, three new objects were created: one called testEmail, another named test4Something and a third, checkForm. The form used in that script is an example of a predefined object. This particular object is used to process forms-it passed the object named this.form to the JavaScript from the HTML:

<INPUT TYPE="button" NAME="Submit"

VALUE="Submit" onClick="checkForm


Though not a full-fledged programming language, JavaScript still has many features. It contains basic programming flow and conditional statements that make it a good choice for short functions with a limited number of variables. User-defined objects in JavaScript are declared in function() statements that resemble Java and C. These functions can be just about anything you want: You can create functions that add two numbers or show a specified URL in a separate window. They can be called more than once in a Web page, without inserting the full JavaScript each time.

Although JavaScript doesn't approach CGI programming's power, it's far less complicated. For many types of forms, there's no need to send the data to a CGI form for computation when a JavaScript program embedded in the page can do the trick. This speeds up operations at both ends: You don't have to wait because the JavaScript runs right on the browser's machine, and the Web server doesn't have to deal with CGI computations.

JavaScript's most recent iteration, version 1.1, is supported by Netscape 3.0. Internet Explorer 3.0 supports some JavaScript functionality, but not as fully as Navigator. With version 1.1, you can use JavaScript to manipulate an applet's operation or use one of its classes.

A JavaScript form element embedded in the HTML document-a button, for example-can be used to trigger an action in a Java applet. Your browser's plug-ins are also accessible. You can use some JavaScript to check if a specific plug-in is installed.

You can code JavaScript to change an image's size dynamically to fit the user's browser window size. JavaScript can cache and replace inline images without disturbing the rest of the page, allowing the designer to set the page to "cycle" through multiple images on the same page.

JavaScript 1.1's complete feature list can be found at A wealth of ready-to-use JavaScript is available. See the sidebar "Script and More Script" for sites that offer free downloads. Study a few, try them out and then rev up your text editor-you can be on the road to JavaScript in a matter of minutes.

Pratik R. Patel, a freelance technology writer, is the author of Java Database Programming with JDBC (The Coriolis Group, 1996). Contact him care of the Features and Columns Editors.

Back to 12/96 Features: Web Winners
Up to Table of Contents
Ahead to 12/96 12/96 Features: On the Road with JavaScript...Script and More Script