[ Go to October 1997 Table of Contents ]

Power Windows /
Karen Kenworthy

Write with JavaScript

If you haven't kept up with the current computing craze, it's time to wake up and smell the coffee. I'm talking about Java of course, just in case you haven't noticed all those coffee-related puns in the headlines recently.

Java is a fairly new programming language, originally developed by Sun Microsystems. Java programs can run under Windows, OS/2, UNIX and the Mac, and special CPU chips will allow future platforms to run programs written in a dialect of Java. No one knows for certain what the future holds, but several companies and individuals are betting heavily that Java will someday replace C and C++ as the application development language of choice.

That's all well and good. After all, programmers need to learn a new language every few years just to make their lives interesting. But what about the rest of us? Why should we care about the predicted Java revolution? The reason is JavaScript, Java's little brother. JavaScript is competing with languages like Perl, REXX and VBScript (a descendant of Visual Basic) for the job of scripting language of the future.

Scripting languages allow ordinary folks to automate routine tasks and add features to their applications. They're usually slimmed-down versions of professional programming languages, tailored for mortals like you and me.

JavaScript will soon appear in Windows 98 and Windows NT 5.0 as an alternative to DOS's ancient batch language. And JavaScript should soon make its debut as the built-in macro language in some popular applications. But JavaScript is already starring in its most important role: making Web pages come to life.

Today JavaScript support is a standard feature in Netscape Navigator and Microsoft Internet Explorer. It allows Web pages to interact with the people who view them. While browsing pages with JavaScript, you can click on buttons, checkboxes, radio buttons and more. What happens next is up to the page's JavaScript program.

To see JavaScript in action, let's create a simple Web page. It will display a little text and a standard Windows pushbutton. All you'll need is a JavaScript-enabled Web browser and a text editor such as Windows' Notepad.

HTML

Despite its glamorous appearance, a Web page is actually a text file. The file's name usually ends with the special extension .htm or .html, indicating it contains HyperText Markup Language (HTML) statements. These statements tell a browser what text and images to display, where and how to display them, and what to do if a user clicks on a portion of the page.

To create your Web page, start by creating a text file like the one shown in the sidebar, "Start with a Skeleton ... ." I've named it PWJava.htm, but you can name it anything you like. Just be sure to add either the .htm or .html extension to the file's name.

Start With a Skeleton ...
The first step to writing with JavaScript is creating a simple HTML file template.
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>

This skeleton, or template, HTML file doesn't contain any text or images. If you ask your Web browser to display it (by selecting Open from the browser's File menu), you'll just see a blank page. You'll add to the file later, making it a bit more interesting. But even now this page tells us something. It reveals the basic structure of all HTML files.

As you can see, the template contains just six lines. Each line contains a tag, a small bit of text between acute brackets (< and > signifiying "less than" and "greater than"). The text inside a tag can be upper or lower-case, whichever you prefer.

Two of your template's tags, <HTML> and </HTML>, mark the beginning and ending of the file itself. The browser will process everything between these two tags. It ignores text and tags before the <HTML> tag or after the </HTML> tag.

Your template also contains two other pairs of tags. The first, <HEAD> and </HEAD>, mark the beginning and end of the file's header. Later you'll add a tag in this section that specifies the page's title (what the browser displays in its title bar while you're viewing the page). Other optional tags in this section reveal the file's author, the type of software used to create the file, and even keywords used by Web-search programs to index the page's data.

After the heading comes the file's body, denoted by the <BODY> and </BODY> tags. This section of the file contains all the text you see on the page through your browser. It may contain several different types of tags. Some tags control the formatting of the page's text, while others tell the browser where to find the images displayed on the page. And, as you'll see in a moment, other tags cause the browser to display standard Windows controls such as pushbuttons, checkboxes and radio buttons, or to execute JavaScript or VBScript programs.

Inside the body

Your template is a good start, but you need to spruce up the page. Start by adding the line <TITLE> Power Windows JavaScript Demo </TITLE> between the HEAD and </HEAD> tags. The Web browser displays the text between the new <TITLE> and </TITLE> tags in its title bar.

The browser's title bar now looks nice, but your page remains blank. To fix that, you need to add something to the body section of the file. Let's start with a bit of text. Immediately after the line containing the <BODY> tag, add a line that reads "Click this button and see what happens!" This text will be displayed at the top of your page.

Now you need a button. Start by creating a form, a place on the Web page where user input controls (such as pushbuttons) are displayed. That involves two tags, <FORM> to mark the beginning of the form, and </FORM> to mark its end. The sidebar "Add Some Flesh ...," shows how it's done.

As you can see, the <FORM> tag is a bit more complicated than other tags you've seen. That's because it includes a parameter, name. This parameter is important if a page contains more than one form, because the name gives JavaScript and VBScript programs a way to specify individual forms, and controls. But in your program you have only one form, so the form name is never used. I've named my form frmDemo, but you can name your form anything you like. Just place the name you choose immediately after the name= text in the <FORM> tag.

Now you're ready to create a button. To do that, place an <INPUT> tag between the <FORM>and </FORM> tags you added a moment ago. As its name implies, the <INPUT> tag is a general-purpose tag that creates user-input controls. For this project, the tag should read <INPUT type="button" name="btnDemo" value="Click Me" onClick="Clicked()">.

The <INPUT> tag is a bit more complicated than the <FORM> tag, but once you've studied it for a moment it makes sense. Our example uses four parameters: type, name, value and onClick. The type parameter specifies the type of control that will be displayed. I've chosen "button" to create a standard Windows pushbutton. But you can specify a value of "checkbox," "radio" or "text" instead. These other values produce standard Windows checkboxes, radio (or option) buttons and text boxes (a box that permits the user to enter a single line of text). The name parameter gives your new baby a name, one you'll use in your JavaScript program, while the value parameter specifies the text that appears on the button's face.

Be a scriptwriter

You're now ready to breathe life into your Web page. To do that, you must add a small JavaScript program called an event handler, a program that's called up automatically when your button is clicked.

You may not have realized it, but you've already named your program. Take a look at the <INPUT> tag you used to create your button. Notice the last parameter, onClick? The value of this parameter, Clicked(), is the name of the event handler that will be called whenever your button is clicked.

Now that you know its name, take a look at the full program. You'll find it in "Add Some Flesh ...," near the bottom immediately after the </BODY> tag. As you may have guessed, the program begins with one tag, <SCRIPT>, and ends with another, </SCRIPT>. The <SCRIPT> tag has only one parameter, language, which specifies the scripting language used.

If you're a veteran HTML author, you may spot other items at the beginning and end of the program. They're the HTML begin and end comment markers, <!- and ->. Ordinarily, a Web browser ignores text appearing between these two markers. And that's why the markers are there. Older browsers, which don't understand the <SCRIPT> and </SCRIPT> tags, might interpret the JavaScript program between them as text to be displayed on the page. To prevent this, the program is made to look like a non-displayable comment. Fortunately, the JavaScript interpreters built into the browsers know about this deceit and process the program anyway.

Unfortunately, the JavaScript interpreter built into current versions of Netscape Navigator carries this trick a bit too far. It not only processes the information between the comment markers, it tries to interpret the ending comment marker itself as if it were a JavaScript statement. Since - isn't a valid JavaScript statement, the line produces a syntax error message each time the page containing it loads. You solve this problem by preceding the ending HTML comment marker with JavaScript's own comment marker, //. That way, both the browser and the interpreter will ignore the line completely.

Whew! You're finally ready to write the program itself. Its complete text is shown in "Add Some Flesh ... ." Run it and you'll see that it displays the text "You clicked me!" in the browser's status bar and in a popup alert message box. Once you've clicked the alert box's OK button, the program navigates your browser to the WINDOWS Magazine home page, http://www.winmag.com.

Add Some Flesh ...
Make this simple HTML file display a standard Windows push button, and respond when a user clicks.
<HTML>
<HEAD>
<TITLE>Power Windows JavaScript Demo </TITLE>
</HEAD>
<BODY>
Click this button and see what happens!
<FORM name="frmDemo">
<INPUT type="button" name="btnDemo" value="Click Me" onClick="Clicked()
</FORM>
</BODY>
<SCRIPT language="JavaScript">
<!-
function Clicked()
{
window.status = "You clicked me!";
window.alert("You clicked me!")
location.href="http://www.winmag.com";
}
// ->
</SCRIPT>
</HTML>

How is it done? Unfortunately, I've run out of space for this month, so I'll have to save the details for another day. Until then, give your little JavaScript demo a try, and don't be afraid to experiment further on your own!

Contributing editor Karen Kenworthy is the author of Visual Basic for Applications, Revealed! (Prima Publishing), a nonprogrammer's introduction to VBA. Contact care of the editor or the addresses on page 20.


Windows Magazine, October 1997, page 273.

[ Go to October 1997 Table of Contents ]