Chapter 1

Creating Simple JavaScript Programs

• What Is JavaScript?
  • History of JavaScript
• JavaScript Versus Java
• Combining JavaScript with HTML
  • Simplified Language Structure
  • Web Browser Integration
  • Supported on More Platforms
• Uses for JavaScript
  • Including Dynamic Information
  • Validating Forms
  • Making Pages Interactive
• Getting Started with JavaScript
  • Required Software and Hardware
  • Development Tools
• Testing a Simple JavaScript Program
  • Receiving the Web Page
  • Processing the Script
• Potential Problems with JavaScript
  • Security Considerations
  • Your Source Code Is Accessible
• Overcoming JavaScript's Limitations
  • Missing Features
  • Combining JavaScript with Other Languages
• Writing a Simple JavaScript Application
  • Creating the Script
  • Embedding the Script in an HTML Page
• Creating an Event Handler
  • Viewing Your Script's Output
• Hiding JavaScript from Older Browsers
• Workshop Wrap-Up
  • Next Steps
  • Q&A
    

You're about to begin a journey into the depths of JavaScript, one of the hottest new languages for Web page development. JavaScript enables Web pages to be interactive and intelligent, and can add excitement to an otherwise dreary page.

If you've worked with HTML-the language of the Web-and have a basic idea of the concepts of programming, you should have no trouble understanding JavaScript. It's a simple and flexible language. This chapter starts with an introduction to JavaScript: its history, its features, and its limitations.

What Is JavaScript?

An explanation of exactly what JavaScript is has to begin with Java. Java is a new kind of Web programming language developed by Sun Microsystems. A Java program, or applet, can be loaded by an HTML page and executed by the Java Interpreter, which is embedded into the browser.

Java is a complex language, similar to C++. Java is object-oriented and has a wide variety of capabilities; it's also a bit confusing and requires an extensive development cycle. That's where JavaScript comes in.

JavaScript is one of a new breed of Web languages called scripting languages. These are simple languages that can be used to add extra features to an otherwise dull and dreary Web page. While Java is intended for programmers, scripting languages make it easy for nonprogrammers to improve a Web page.

JavaScript was originally developed by Netscape Corporation for use in its browser, Netscape Navigator. It includes a convenient syntax, flexible variable types, and easy access to the browser's features. It can run on the browser without being compiled; the source code can be placed directly into a Web page.

You can program in JavaScript easily; no development tools or compilers are required. You can use the same editor you use to create HTML documents to create JavaScript, and it executes directly on the browser (currently, Netscape or Microsoft Internet Explorer).

JavaScript was originally called LiveScript, and was a proprietary feature of the Netscape browser. JavaScript has now been approved by Sun, the developer of Java, as a scripting language to complement Java. Support has also been announced by several other companies.

Although useful in working with Java, you'll find that JavaScript can be quite useful in its own right. It can work directly with HTML elements in a Web page, something Java can't handle. It is also simple to use, and you can do quite a bit with just a few JavaScript statements. You'll see examples of the power of JavaScript throughout this book.

History of JavaScript

As mentioned before, the history of JavaScript begins with Java. Java was originally developed by Sun Microsystems for use in "real-time embedded systems"-in other words, consumer electronics. Java has now become the de facto standard for advanced Internet programming, but you may still see it running your cellular phone someday.

Java was designed to operate on a virtual machine-a piece of software that interprets the Java code and acts on it as if it were a computer in itself. The virtual machine was designed to be simple so it could be implemented easily in a device. This is what makes it easy to implement in Web browsers.

Java was originally supported only by HotJava, an experimental Web browser developed by Sun for that purpose. Recognizing its potential, Netscape integrated it into its Web browser, Netscape Navigator. Because Navigator is the most popular browser, this greatly increased the publicity for Java.

In 1995, Java became the hottest new buzzword for the Internet, but few people actually knew how to program it. Netscape Communications recognized the need for a simple, clear language for Web pages and introduced LiveScript, the first of the Web scripting languages.

LiveScript had a syntax based on Java, but was more concise and easier to learn. It was also a directly interpreted language rather than a compiled language like Java. Netscape built LiveScript into the beta versions of Netscape Navigator. Support for LiveScript began with version 2.0b1, released in June 1995.

Later in 1995, Netscape reached an agreement with Sun. Sun also recognized that a simple scripting language was a good idea, so they officially endorsed LiveScript. Thus, the connection with Java became official, and the name changed to the one you're familiar with: JavaScript.

At this writing, JavaScript is still being developed and continues to improve. Netscape's support for JavaScript is expected to be finalized by the end of 1996, and other companies-most notably, Microsoft-are rushing to release competing products. Microsoft Internet Explorer (MSIE) 3.0, currently in beta, supports basic JavaScript, along with Microsoft's answer to JavaScript, VBScript.

JavaScript Versus Java

The process of writing a Java applet can be complicated-writing the source code, compiling, and making the applet available on the server. JavaScript provides a much simpler alternative for small projects. The JavaScript source code is interpreted directly by the browser. The source can either be included directly within an HTML page or referenced in a separate file.

Although JavaScript doesn't really have any features that eclipse Java, it adds some conveniences, simplifies programming, and provides better integration with the browser. The key differences include the following (explained in the following sections):

• JavaScript can be combined directly with HTML.
• The JavaScript language structure is simpler than that of Java.
• The JavaScript interpreter is built into a Web browser.
• JavaScript is supported on more platforms than Java.

Combining JavaScript with HTML

Java applets are compiled and stored on the server as byte codes, but JavaScript programs are simple ASCII text files. You can keep them as separate files or include the JavaScript functions within an HTML page.

The <SCRIPT> tag, an extension of HTML supported by Netscape, enables you to include one or more JavaScript functions in the page. Listing 1.1 is a very small JavaScript script embedded directly within HTML. You take a more detailed look at the syntax of these tags later in this chapter.

Listing 1.1. (SIMPLE.htm) A simple JavaScript program within an HTML document.

<HTML><HEAD>
<TITLE>Simple JavaScript Example </TITLE>
</HEAD>
<BODY>
HTML Text goes here.
<SCRIPT LANGUAGE="JavaScript">
document.write("Here is my output.")
</SCRIPT>
</BODY></HTML>

An alternate option called an event handler enables you to specify a JavaScript action that will be performed when an event occurs. For example, a button on the page might have an action performed when it is pressed. This provides a more dynamic method of accessing JavaScript.

Instead of the <SCRIPT> tag, an event handler is added as an attribute to an HTML tag. As an example, the following HTML code defines a link with an event handler:

<A HREF="www.netscape.com" onClick="alert('This will take you to Netscape's home page.');">

In this case, the name of the event is onClick. This particular event happens when the user clicks on the link. The JavaScript code to perform when the link is clicked is enclosed within double quotation marks.

Simplified Language Structure

The limitations of JavaScript also make it much easier for the programmer. The syntax of the JavaScript language is more relaxed than that of Java, and variables (names used to store values) are easier to use. Here are the specifics:

• The JavaScript language is interpreted rather than compiled. Changing a script is as simple as changing an HTML page.
• Rather than creating objects and classes, you can do quite a bit by simply accessing existing objects in JavaScript.
• Variables are loosely typed: You do not need to declare variables before their use, and most conversions (such as numeric to string) are handled automatically.
• Event handlers enable a JavaScript function to execute whenever an action is performed on part of the HTML document. For example, a form's input field can be checked for certain values whenever it is modified.

Web Browser Integration

JavaScript is an object-oriented language. This simply means that it can use objects. An object is a more complicated version of a variable. It can store multiple values and can also include actual JavaScript code. You can create your own objects to represent just about anything.

JavaScript also includes objects that enable you to access features of the browser directly. These objects represent actual elements of the browser and the Web page, such as windows, documents, frames, forms, links, and anchors.

You can access information about the links, anchors, and form elements in the current page. You can also control the browser with JavaScript. For example, it's possible to include a "back" button on your page that will send the user back to the previous page-just like the browser's back-arrow button.

Of course, when I say "browser" here, I'm talking about browsers that support JavaScript. Netscape Navigator began supporting it in version 2.0b1, and at this writing, version 3.0b6 is the latest version. It will also be supported by Microsoft Internet Explorer.

Supported on More Platforms

Because JavaScript is supported by Netscape on all the available platforms, it is supported more widely than Java. Until Java becomes more widely supported, using JavaScript for simple applications enables you to reach a wider audience on a wide variety of platforms. Currently, the only browser that fully supports JavaScript is Netscape Navigator. This functionality is provided on the following platforms:

• Windows 3.1, using the 16-bit version of Navigator
• Windows 95 or Windows NT, using the 32-bit version of Navigator
• Macintosh System 7 or higher, using the Macintosh version
• Most versions of UNIX, using the X Window version of Navigator

Although this is a wide range of support and should enable about 90 percent of the Web's audience to use your script, but don't forget the other 10 percent. Whenever possible, be sure to provide an alternative for non-JavaScript browsers.

Uses for JavaScript

You've learned some technical details as to why JavaScript is important, but what's it really good for? What will it do for your Web pages? The following sections present some of the most important uses for JavaScript.

Including Dynamic Information

JavaScript can be used to add a bit of life to a Web page by making some of the text dynamic. As a simple example, you could display an appropriate greeting-"good morning" or "good evening", depending on the time. Because you can use and control the HTML itself, you can extend this by dynamically choosing graphics or links using JavaScript. Thus, depending on the user, the time, or any factor, you can present the appropriate page.

Validating Forms

You've seen forms at many Web pages, and probably used them yourself. The user enters data into the form, then presses the Submit button, and the server, using a CGI program, responds to the information. This is useful, but it isn't very interactive-before you can receive a response, you have to wait for the data to travel to the server and back.

JavaScript can add instant gratification to a Web form. You still can't send the data to the server until the Submit button is pressed, but JavaScript can act on the data in the meantime. For example, you could fill out a loan application online and, as you fill it out, instantly get feedback about the kind of payments the loan will require. After you're satisfied with the application, you can then submit it to the server.

Making Pages Interactive

Finally, JavaScript can be used to remove some of the drudgery from a normal Web page by giving the user some control of the page. For example, you could have a background on/off button to control the display of the background, or a button to toggle the display of a table of contents.

Getting Started with JavaScript

The process of developing a JavaScript application is simple. The following sections introduce the tools you need to create and execute JavaScript scripts and describe the process of combining a script with an HTML page. Finally, you'll learn about the hardware and software platforms that currently support JavaScript.

Required Software and Hardware

Currently, the only requirement in this area (and the only option) is Netscape Navigator, version 2.0b or higher. The available hardware platforms are discussed later in this section. Several other browser manufacturers plan to support JavaScript in the near future, however.

Development Tools

Provided you have a version of Netscape to view your creations on, there are no tools that are specifically required in order to develop a JavaScript script. All you need to create the scripts is a text or HTML editor-probably the same one that you use to develop HTML pages.

Testing a Simple JavaScript Program

A JavaScript program can be simple-even as small as a single statement-or much more complicated. Take a look at the simple example in Listing 1.2.

Listing 1.2. (ALERT.htm) A script that displays a message in the text and in an alert box.

<HTML><HEAD>
<TITLE>Another JavaScript Test </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("Hello!");
window.alert("Hello again!");
</SCRIPT>
</BODY>
</HTML>

This example displays the "Hello!" message as part of the HTML document. In addition, it uses the alert() statement to display a message to the user in a dialog box.

What happens when you load this Web page in Netscape? Let's take a quick look at the inner workings of JavaScript. Once you understand what happens and in what order, you'll find it easy to learn the specifics-such as the JavaScript language itself.

Receiving the Web Page

Let's start with a review of the basics: What happens when you request a Web page from a server? This is an important process to understand. Here are the steps involved:

1. You enter a URL into your browser, or select a bookmark.
2. The browser sends an HTTP request for the URL to the appropriate server (known).
3. The server sends back the contents of the Web page at the URL.
4. The browser sends additional requests for each of the graphics page.
5. After receiving enough information about the graphics to devote the correct amount of space to them, the browser displays the page.
6. The remaining graphics are displayed as they are received.

Processing the Script

When JavaScript is involved, the process is slightly different. After the full HTML document is received, as in step 3 in the last section, it is examined for the <SCRIPT> tag. If a script is included, it is processed; however, the processing depends on the type of script:

• If the script is included in the header, it is ignored unless a script later calls it.
• If the script is included directly in the body, its output will be included in the Web page-thus, it can affect the display of the page.
• If the script is an event handler for a specific part of the page, it will be processed only when the event happens.

All three of these are useful ways of implementing a JavaScript program; you choose one of these methods depending on your needs. In a complicated JavaScript application, you will probably use all three.

Potential Problems with JavaScript

In this section, you learn some of the problems you might encounter when using JavaScript in your Web pages. Because these concerns might affect the security of your source code and data, you should also carefully consider them while developing JavaScript applications.

Security Considerations

As JavaScript has been developed, there have been several concerns about security-most of them legitimate. The Computer Incident Advisory Committee (CIAC), an agency of the Department of Energy that monitors computer security problems, has reported several minor problems with JavaScript.

Because JavaScript is limited in its capabilities, there are no major problems-such as a method for a wayward script to erase your hard drive. All the potential problems involve the owner of the script or Web page being able to access information on your system. Here are the incidents the CIAC has reported:

• A JavaScript script can read your URL history and report it to the remote site.
• The browser's disk cache can be read and transmitted.
• Your e-mail address can be read-and used to send an e-mail without your knowledge.
• A list of files on your hard disk can be obtained.
• URLs you visit can be logged by a script and transmitted.

All these problems are specific to Netscape's implementation of JavaScript. The good news is that they have all been fixed by later versions of Netscape. The first two were fixed by version 2.0; the remaining ones are fixed by versions 2.01 and 2.02.

If you have the latest version of Netscape, you should be safe from these problems. However, considering that this many problems have been discovered, there is always a chance there will be more.

Your Source Code Is Accessible

Another problem with JavaScript is that, currently, there is no way to use a JavaScript on your Web page without making the script source available to anyone who wishes to copy it.

This means that you might spend hours working on a script, only to find that people have copied it onto their own Web pages. You may be programming in JavaScript for fun and not mind this, but it might be a serious consideration if you are making a JavaScript for pay or specifically for your own Web page.

Remember that even though your source code is accessible, that doesn't mean it's free to be copied. You legally have a copyright on any script you write.

If someone does copy your scripts, often the best solution is to send that person a friendly note pointing out your copyright and saying that you do not want anyone else using it. You should also clearly state this in the source code and on the Web page that contains it.

Overcoming JavaScript's Limitations

Although the JavaScript language has many features, it's far from perfect and has many limitations. Some of these may be fixed as the language matures, but others may never be-because JavaScript is meant to be an easily understood scripting language, some features just don't belong.

Luckily, there are ways around most of the limitations in JavaScript. These include programming a solution "the long way," and combining JavaScript with other powerful languages, such as Java, CGI, and SSI.

Missing Features

JavaScript is still being developed, so there are still a few missing features. These might be fixed by a future version, but some may never be fixed. The following sections describe some of the most important features that are missing from JavaScript.

Working with Entire HTML Pages

A convenient use for JavaScript is to make a Web page interactive-for example, displaying the current time or date or including information that depends on the user's input. Unfortunately, there is no way for a JavaScript program to replace part of the currently loaded HTML page. You can reload the page with different contents, but you can't change the text on a page in place.

There are some elements of the page you can change: the images, and anything in a form element. You can also display the information you need to change in a separate frame. You can also get around this by using Java, which has no such limitations.

Lack of Network Communication

JavaScript has no facilities for communicating between the Web browser and the HTTP server. This means that although you can use JavaScript to manipulate data the user enters in a form, you can't send the resulting data back to the server. You can combine JavaScript with another Web language to solve this problem; CGI is the easiest way to do this.

Limited Graphics and Multimedia Capabilities

JavaScript is a scripting language, so you should hardly expect it to be a multimedia powerhouse. You can include graphics in a Web page and use JavaScript to specify which ones, but you cannot create graphics-for example, draw a graph. Currently, Java is the best solution when you need to do this.

Limited Size of Scripts

The early implementations of JavaScript (in Netscape Navigator) required that the scripts you use for a Web page be included in the HTML for that page. This means that there was a practical limitation of about 32K for the page and all scripts, because the browser must download the entire page before executing the script.

The JavaScript specification includes an SRC attribute to the <SCRIPT> tag, and this is supported by Netscape's latest version. This will enable you to embed a JavaScript script in the page, similar to an image. This should make much larger scripts practical. To use it, follow these steps:

1. Place the JavaScript program in a file with a .js extension, such as program.js.
2. Include the <SCRIPT> tag to refer to it, such as <SCRIPT SRC="program.js">.
3. Be sure the script and the JavaScript file are in the same directory on the Web server.

Limited Speed

The current implementation of JavaScript is a bit slow. Any complex calculation or manipulation of HTML tends to run at a slow creep. I assume that Netscape is aware of this and will improve the speed in future versions. Unfortunately, complex Java applets also run quite slowly, so there is no clear solution at this time.

Don't let this scare you away from JavaScript-many of the most powerful things you can do with JavaScript are simple and execute incredibly fast. It's only complex applications that suffer from this limitation.

Combining JavaScript with Other Languages

There are some situations where JavaScript really shines-and as you've learned, there are some where it doesn't even come close. Although JavaScript may be improved in the future, the current solution is to use the right tool for the job. Several Web languages can be used in combination with JavaScript.

JavaScript and Java

Java, the "big brother" of JavaScript, is the most obvious choice to use if you need to fill in some of the holes in JavaScript. Java includes many features, including communication across the network and graphics capabilities.

Java is harder to learn than JavaScript, but you may not need to learn it. Many ready-to-use Java applets are available. You will find several of these on the CD that comes with this book.

Best of all, JavaScript includes features that enable it to be tightly integrated with Java. You can use a Java applet and use JavaScript to control its features. See Chapter 16 for an example of this technique.

JavaScript and CGI

Common Gateway Interface (CGI) has been a standard almost as long as the Web has, and it can be used to make Web pages interactive. You encounter CGI all over the Web-anywhere you fill in a form and press a Submit button, you've accessed a CGI script.

CGI is not actually a language, but rather a standard interface. You can write CGI programs in any language. The most commonly used languages for the task are Perl and C.

CGI is different from Java or JavaScript in that it executes entirely on the server. Your client sends information to it in the request and then receives the results in the form of a Web page. You cannot have instant results-such as a total that automatically updates as you change the numbers entered. Combining JavaScript with CGI gives you the best of both worlds.

JavaScript and SSI

An alternative to CGI is Server-Side Include, or SSI. This enables you to include dynamic data in a page, similar to JavaScript's capability, but it happens on the server side.

Like CGI, SSI is a standard, and you can use any language to program SSI. You can combine SSI and JavaScript to make a truly dynamic page. You can even use SSI to change the JavaScript code included in the page based on certain factors. You'll find examples of this in Chapters 17 and 19.

Unfortunately, although most Web servers support SSI, not all systems (or system administrators) allow their use. The main reason for this is that each Web page has to be parsed for SSI instructions, which slows down the server. There are also security concerns. Ask your system administrator whether you are allowed to use SSI.

Writing a Simple JavaScript Application

In this section, you explore the process of JavaScript development with a simple JavaScript application. This application doesn't do much, but it will help you understand the steps required to develop and test a script. You'll find much more sophisticated examples throughout this book.

Creating the Script

First, let's look at a very simple JavaScript application. The following script simply displays the location of the current page and a brief message. This script will be combined with an HTML page and its use demonstrated.

document.write("<B> location: </B>" + document.location + "<br>")
document.write("This is a test of JavaScript." + "<br>")

After you've created the script, you need to do two things:

1. Embed the script in the HTML page. You can use the <SCRIPT> tag to do this, or use an event handler.
2. Test the script by viewing the document with Netscape.

Embedding the Script in an HTML Page

There are two ways to embed a JavaScript script in your HTML page. Each has its advantages and disadvantages. In a complex JavaScript application, you'll end up using both of these methods several times.

Using the <SCRIPT> tag

The simplest method of including a JavaScript script in an HTML page is to use the <SCRIPT> tag, as described earlier in this chapter. This tag is usually used as a container, and the script is included directly after it. Listing 1.3 adds the necessary opening and closing <SCRIPT> tags to the script:

Listing 1.3. A simple example of the <SCRIPT> tag.

<!-- <SCRIPT language=JAVASCRIPT>
document.write("<B> location: </B>" + document.location + "<br>")
document.write("This is a test of JavaScript." + "<br>")
</SCRIPT> -->

Notice the strange syntax. The extra brackets and exclamation marks indicate a comment; the entire script is marked as a comment so that older browsers will not attempt to display it. JavaScript-aware browsers will execute it correctly.

If you use this method within the body of a Web page, the script will be executed immediately when the page loads, and the output of the script will be included at that point in the page. You can also use the <SCRIPT> tag within the header of a page to prevent it from executing immediately. This can be useful for subroutines that you will call later.

Creating an Event Handler

An alternate approach is to use an event handler to perform a script when a certain event occurs. This is best used when you want to act on the press of a button or the entry of a field.

Rather than use the <SCRIPT> tag, an event handler is inserted as an attribute to an HTML tag. Tags that support event handlers include <LINK>, <IMG>, and the form element tags.

As a basic example of an event handler, here's a common use for JavaScript: creating a back button in a page that performs just like the browser's back button. You can easily accomplish this with an event handler, as in Listing 1.4.

Listing 1.4. A simple JavaScript event handler.

<INPUT TYPE="button" VALUE="Back!" onClick="history.go(-1); return true;">

This defines a button with an event handler. The event handler is defined as an attribute of the <INPUT> tag. The attribute name is the event name-in this case, onClick. This is an event that occurs when the user clicks the mouse on an object.

In this example, a button is used to send the user back to the previous page. You could also use this technique with an image, or a simple link to the word "back!".

Viewing Your Script's Output

The main tool you'll use to view the script's output is a Web browser. Currently, you should use Netscape to view the output, but other browsers may support JavaScript in the future. There's nothing special you need to do to view a script's output-just load the Web page that contains the script. You can even test JavaScript on your local computer, without uploading anything to the Web server.

Hiding JavaScript from Older Browsers

Of course, any JavaScript you write will be intended for JavaScript-compatible browsers; however, the last thing you want is for someone using an ancient version of Mosaic to load your page and see the actual JavaScript code all over their screen.

You can avoid this by enclosing JavaScript within HTML comments. This hides the code from older browsers; JavaScript-aware browsers, such as Netscape, will interpret it as JavaScript. Here's an example of a <SCRIPT> tag with HTML comments:

<!-- <SCRIPT language=JAVASCRIPT>
document.write("I lost a buttonhole. ");
</SCRIPT> -->

The key elements here are the comment begin and end tags: <!! and ->. These are standard HTML 2.0, and define the start and end of a comment.

Unfortunately, things aren't always that simple. Here are a few things to watch out for:

• Some browsers will treat any greater-than sign (>) as the end of the comment. The decrement operator (-) can also cause problems.
• Some browsers still won't recognize comments correctly, so your script may be displayed.

Because of problems like these, there is no ideal solution. The best way to avoid these problems is to use the <SCRIPT SRC> tag instead, although it isn't always the best solution. Another solution is the <NOSCRIPT> tag, which indicates content that will be ignored by JavaScript browsers. For example, this HTML will display only on non-JavaScript browsers:

<NOSCRIPT>
You're using a non-JavaScript browser. Please use the
<a href="nojs.html">Non-JavaScript version.</a> of this document.
</NOSCRIPT>

For clarity, I won't use HTML comments in the examples through this book. If you use these techniques on a Web page of your own, you may wish to add comments to support older browsers.

Workshop Wrap-Up

Although limited and still under development, JavaScript is a powerful tool to enhance a Web page. It offers features that are available to no other Web language. You've learned the following terms and concepts in this chapter:

• What JavaScript is, and where it came from
• The key differences between JavaScript and Java
• How to include a JavaScript program within an HTML document, and keep it from displaying on older browsers
• The key limitations and problems of JavaScript
• The basics of writing a JavaScript application

Next Steps

Your next task is to learn more of the specifics of the JavaScript language:

• To move on to larger JavaScript programs, see Chapter 2 "Working with Larger Programs and Variables."
• To learn more about JavaScript's object-oriented features, turn to Chapter 3 "Working with Objects and Events."
• To learn to manipulate and use parts of the Web page with JavaScript, see Chapter 5 "Accessing Window Elements as Objects."
• To see some real-life examples of JavaScript in action, see Chapter 7 "Real-Life Examples I."
• To learn more about Java, turn to Chapter 16, "Integrating JavaScript with Java".

Q&A