News & Views - Jazz Up Your Website with JavaScript!

News & Views Jazz Up Your Website with JavaScript!
News & Views Feature Article

By Charles O. Beck

Chuck Beck works at Lucent Technologies, Inc., in Columbus, Ohio, creating both online and hard copy documentation for business communications systems software. He is active in the Central Ohio Chapter of STC. He has presented at several STC conferences, including the 44th Annual Conference of the STC in Toronto and the 45th Annual Conference in Anaheim. He repeated his Anaheim presentation at last September's chapter meeting. He can be reached at chuckbeck@lucent.com.

Originally published in News & Views July 1999 issue.

Copyright 1999 STC-Philadelphia Metro Chapter. For permission to reprint this article, contact the Managing Editor.

Java™ and JavaScript™* are two of the newest "kids on the block" when it comes to the latest developments for the computing and Internet world. Already, many are predicting that within a very few years Java will be the programming language of choice. Already, JavaScripts are nearly ubiquitous on the World Wide Web, largely because of their cross-platform nature and ease of use. And many technical communicators are beginning to consider what impact these new tools will have on their careers. While relatively few technical communicators will deal directly with JavaScripts and even fewer with Java programming, those involved in Web page development and online (HTML) documentation will find them valuable to learn and use.

So you wanna spice up your Web site, huh? You wanna add some sparkle? You wanna add a touch of class, by adding slick features and automating some things?

Well, you may find a good JavaScript or Java applet will do the trick for you.

A good Web site designer has a whole "toolbox" filled with various Web tools to help in designing more engaging and effective Web pages. If you don’t have these two tools in your Web toolbox, don’t you think it’s about time you added them?

That’s what this article is designed to help you do. By the time you finish this article you should have enough of the basics to allow you to begin incorporating JavaScripts and Java applets on your Web pages. This is basically a "how-to" article, designed to help you get going.

Before we get started, I must warn you that what we won’t do here is offer a discussion of what Java and JavaScript are and what kinds of things they can be used for. If you want to learn that, I’m afraid you will have to do some reading elsewhere. (Might I humbly suggest getting hold of a copy of my article "Jivin’ with (Java and) JavaScript!" in the Proceedings of the 45th Annual Conference of the STC in Anaheim as a start?)

We are also not going to get into actual Java coding; that is a complex subject requiring a good deal more time and space than we have here. I will, however, tell you where you can go to learn more on your own.

Then too, I must tell you that I am assuming you have some experience with HTML and creating Web pages. I am also assuming that you understand basic HTML tags and Web page architecture concepts, and that you feel comfortable tinkering around "under the hood" of a Web page, as it were.

One final word of warning before we go on: You should be aware—and will be painfully so, if you use many JavaScripts—that Microsoft and Netscape have each implemented their own versions of Java and JavaScript in their respective browsers. What works in one does not always work well, if at all, in the other. For this reason, you should always carefully test any JavaScripts or Java applets that you consider crucial to the success of your Web page, using both browser environments to test them.

Having said all that, let’s jump in! We’ll start with simple JavaScripts.

Using a JavaScript

Like most other "markup" signals in HTML, the key to using JavaScripts is to know the tags used. These tags, for the most part, are very similar to other common HTML tags, and I am confident you will see the parallels. Let’s take a look at them.

The <SCRIPT> Tag

The <SCRIPT> tag signals the browser that some type of script is to follow. (For an example that illustrates the following discussion, see Examples below.)

While JavaScript is probably the most popular and well-known scripting language around, there are others, notably VB Script. Now, while most browsers these days are smart enough to look at the script and figure out what scripting language is being used, it is still a good idea to tell it which language you’re using, just to be on the safe side. Thus, it is a very good idea to modify your starting script tag like so:

<SCRIPT LANGUAGE="JavaScript">

This tag is followed by the script itself, and when it is finished, the </SCRIPT> tag. Similar to many other common HTML tag sets, the <SCRIPT> and </SCRIPT> tags form the framework within which the JavaScript resides and works.

The  Tags

There’s only one little problem here: What if the user’s Web browser is "Java-challenged" and doesn’t recognize scripting languages? What that user will see in such a case is not your JavaScript working as it should, but rather the text of the JavaScript (minus the <SCRIPT> and </SCRIPT> tags). Granted, this is becoming increasingly rare, but it does still happen. So what should you do?

Hide your script! (And it’s a good idea to put an alternate message in, telling the user what he or she is missing. You might also want to take the opportunity to encourage the user to go get a new browser, one that can handle JavaScripts.)

How do you hide your scripts? With the  tags. Now, the more HTML-savvy among you will recognize these as "comment" tags, used to hide comment text that you don’t want the average Web visitor to see on your Web page.

That is essentially what they do here, for Java-challenged browsers. The Java-challenged browser, not recognizing the <SCRIPT> tag as a valid tag, will simply skip over it. The comment tags allow it to skip over the rest of your JavaScript as well.

The <APPLET> and <PARAM> Tags

Finally, if you plan to use Java applets in your Web pages, you will need at least the <APPLET> tag, and possibly one or more <PARAM> tags as well. Since they go with Java applets, however, we will discuss them in detail later.

Examples

The following example is about as simple as a JavaScript can get and still be worth anything. What it does is automatically update a "Last updated on…" notice on your Web page, by taking the time/date stamp of the last save and displaying it to the user. It has all the elements just discussed and will work almost anywhere you want to put it within a Web page—except within a table. (I don’t know why it doesn’t work in a table, it just doesn’t—if you figure it out, please let me know!)

<SCRIPT LANGUAGE="JAVASCRIPT">  </SCRIPT>

Notice that, even once you know the right tags to use and the right places to use them, you must still learn some scripting language commands when using JavaScripts. The exception to this is when you incorporate a Java applet on a Web page, in which case you need not necessarily know any JavaScript commands.

The "document.write" and "document.lastModified" commands in the foregoing example are both JavaScript commands. The first "document.write" statement says to the browser, in effect, "Write the following text to the screen." The text, which is shown here in italics, can be changed to anything you want it to say. Just make sure you enclose it in both parentheses and quotation marks.

Note that the displayed text will follow whatever font definition was set before the script began. Thus, if you want it have a different alignment or typeface, you should define that just before beginning the JavaScript.

The second "document.write" statement says to the browser, "Go find the date/time stamp for the last time this file was saved and write that information to the screen." Since no "new line" command is given within the script, this information is appended to the end of the previous document.write statement, and the entire statement appears on one line in the final display.

For a more refined version of this JavaScript (for instance, one that displays only the date, and not the time), as well as some other simple JavaScripts that you are welcome to borrow and use, take a look at the following URL:

http://www.geocities.com/~cobi1/JS_examples

For a complete list of JavaScript commands, I recommend that you visit the following URL and then check out the "How To" link:

http://www.gamelan.com/directories/pages/dir.javascript.html

Using Java Applets

Incorporating a Java applet on your Web page is a little different than writing and using a simple (or not so simple) JavaScript. A JavaScript is pretty much self-contained, the entire script residing within a single HTML file. Incorporating a Java applet requires at least two files: one containing the compiled applet itself, and the other containing a JavaScript to call and run the applet.

The .class File

The applet itself is contained within one or more files consisting of compiled Java code. This file must have a .class extension to be used as an applet on a Web page. Normally, it will also reside in the same folder in which the HTML file that is calling it resides (it doesn’t have to, but it does make life a lot easier if it does).

Unless you want to learn the ins and outs of Java programming yourself, you will probably obtain this compiled .class file from another source. You may know a programmer who can create it for you, or you may want to download any of the literally hundreds of free Java applets available on the Internet. Hopefully, whoever provides you with the compiled Java applet will also provide you with adequate documentation to use it effectively. That is, perhaps, one of the things you want to keep an especial eye out for when looking for Java applets on the Internet.

In any case, once you have obtained the .class file, you must then create the HTML file to call and run it. To do this, you will need to use the <APPLET> tag and possibly one or more <PARAM> tags.

The <APPLET> Tag

The <APPLET> tag actually consists of three parts according to the following pattern:

<APPLET CODE="name.class" WIDTH=pixels HEIGHT=pixels>

The CODE part names the Java .class file we discussed in the previous section. This part of the tag assumes a relative path to the .class file, which is why you should normally ensure that the .class file is in the same directory as the HTML file calling it. It is possible to let the .class file reside elsewhere and use an absolute path to call it, but it is more challenging, and most Java and JavaScript experts I have consulted do not recommend going that route.

The WIDTH and HEIGHT parts of the APPLET tag define the space in which the Java applet will run and be displayed. Depending on the nature of the Java applet, these two parts may not, strictly speaking, be required; but in most cases, if you want anyone to see the Java applet running, you must use these two parts to define the space in which it will run. Otherwise, your applet will run, but nobody will see it.

(In fact, when you see a blank gray space that appears before a Web page is finished downloading, you can be fairly certain that the Web page contains a Java applet. What is happening is that the <APPLET> tag tells the browser how much screen real estate to reserve for the applet, and the browser reserves it, showing it as a blank—usually gray—rectangle until the applet is finished downloading and starts running.)

To use these parts of the tag, simply enter numbers representing the numbers of pixels to define the width and height for the applet’s display.

So, putting it together, if you had a Java applet named "Button3", for example, and you wanted the applet to display and run in a space that was 100 pixels wide by 75 pixels high, then you would define the <APPLET> tag as follows:

<APPLET CODE="Button3.class" WIDTH=100 HEIGHT=75>

Finally, don’t forget to put the </APPLET> tag at the end of the applet part of the script. Depending on whether you have used <PARAM> tags or not, this goes after the last <PARAM> tag, or immediately after the <APPLET> tag if no <PARAM> tags are used, as a rule.

The <PARAM> Tag

Some Java applets allow you to define certain parameters governing the appearance or function of the applet. You may, for instance, be able to:

Define a background color
Set the text color and size
Determine the text content
Play an audio file and/or change the text displayed when the cursor moves over the applet
Link to another URL
Display a different graphics file
And much more

The applet’s creator makes these parameters accessible to you using <PARAM> tags.

These <PARAM> tags work by passing predefined values (arguments, for those of you who are into computer lingo) to the Java applet from the JavaScript calling it. Typically, the <PARAM> tag adheres to the following pattern:

<PARAM NAME="name" VALUE="value">

In this tag, the NAME part refers to the name of the parameter (as defined by the applet’s creator), and the VALUE part refers to the value(s) passed to the applet by the <PARAM> tag. For example, if the parameter allows you to define the applet’s background color using an RGB color value, the <PARAM> tag might look something like the following:

<PARAM NAME="bg_color" VALUE="64,64,64">

To know what parameters an applet has that you can define, it is up to the applet’s creator to provide you with the documentation describing what the available parameters are and what values they will take. This is one reason you want to check out the documentation available for an applet before you try to use it.

Putting It All Together

When you go to incorporate the Java applet on your Web page, you must use a JavaScript to call it. The rules for writing this JavaScript are essentially the same as those presented earlier in this article. The primary thing to keep in mind is that the <APPLET> and <PARAM> tags must be nested within the <SCRIPT> and comment tags.

Of course, when you are dealing with both a full-blown programming language like Java and a full-bodied scripting language like JavaScript, you will encounter many variations, but the basic pattern for using a Java applet on a Web page looks something like the following:

<SCRIPT LANGUAGE="JavaScript">  </SCRIPT>

Remember to have the .class file within the same directory as the HTML file containing the JavaScript that calls it, and you should be good to go!

Where Can I Go to Learn More?

Perhaps the most effective way to get a better idea of the power and flexibility of Java and JavaScript is to look at some examples of how people are using them now. I encourage you to look at the source files of Web pages that use JavaScripts and Java applets that you like. In many cases, you will not be able to view the source code of an applet, but unless you are interested in writing applets yourself, this should not be a concern, assuming the applet’s creator has provided the appropriate documentation.

One of the best places to find good examples—not to mention dozens of JavaScripts and applets free for the taking and great references to other sources of information—is the Gamelan official Java resource site located at http://www.gamelan.com. Check it out for yourself!

In the end, though, the more you experiment with them yourself, the better you will understand and know how to use JavaScripts and Java applets effectively. In fact, that is the best way to learn how to use them. So, go ahead, get your feet wet, jump in. The water’s fine, and you should end up finding yourself having more fun than any technical communicator has a right to have!

* Java and JavaScript are trademarks of Sun Microsystems, Inc.

Return to . . .

[News & Views] [STC-PMC Home] [STC Home Page]
Last updated: July 26, 1999 (psw)