Chapters 15 and 16 of Absolute Beginner's Guide to Creating Web Pages, Second Edition, showed you how to use HTML forms and CGI scripts to interact with the user. CGI requires access to the server computer (at least the cgi-bin folder), and the level of interaction can be limited. JavaScript, on the other hand, works completely within the browser (assuming the browser is compatible with it). That means you can use it for small scripting tasks—quick math or a simple date or time function—or for very complex tasks that don't involve the server at all.

It's also a somewhat complicated topic—not a difficult one, but a bit involved. So, we'll cover the basics in this chapter, and then "JavaScript and User Input" (also available online), will take a close look at some of the tasks you can perform with JavaScript that have to do specifically with user interaction. Then, in "Adding Dynamic HTML" (also available online), you'll see that quite a bit of what is called "dynamic HTML" requires knowledge and use of JavaScript.

This chapter discusses the following:

• The basics of JavaScript—what it is, why you might want to learn it, and what your options are

• Creating your first JavaScript, including how to embed the scripting within your Web page or link to it from your HTML document

• Creating and using JavaScript functions

• Inside the lingo: variables, comparisons, conditionals, and loops

• How objects and methods work, and a few objects you can use in your scripts

What Is JavaScript?

JavaScript is a scripting language that's similar to AppleScript, Visual Basic Scripting (VBScript), and languages such as Unix's shell scripting languages. Although JavaScript is similar in on the surface in some ways to full-fledged programming languages, such as C, C++, and Java, it doesn't require you to worry as much about the program's underlying structure. It's a bit limited in that way, but still very useful.

JavaScript was specifically designed by Netscape to work together with HTML (and XHTML) to create more dynamic Web pages. Netscape and Internet Explorer browsers tend to support JavaScript from the 3.0 level on up, while other browsers have spotty support for JavaScript—some are better than others. In most cases, you can't rely on your user to have JavaScript capabilities, so it's important to design your pages to support all possible users. We'll discuss that throughout this section.

JavaScript is designed to work with the different elements on your page, reacting to user input, feeding form values to equations and formulas, and otherwise making it possible to turn a Web document from a static page into something that more closely resembles a computer program's interface. If you get hooked on JavaScript, you'll find it handy in many different situations, including such things as automated HTML frame interfaces and form data checking (see Figure 1).

Figure 1 JavaScript can be used to check an HTML form before it's ever submitted to a CGI script, making sure it has all the requisite data filled in and accounted for.

JavaScript isn't part of the HTML or XHTML standards, although it's used almost exclusively within HTML documents, and both standards have a special <script> element that's used in tandem with JavaScript. Plus, JavaScript (or a similar scripting language) is at the heart of what's called Dynamic HTML, which uses JavaScript, style sheets, and other technology to create interesting and interactive pages.

The JavaScript/Java Relationship

Java and JavaScript are not the same and aren't really even related in any significant way, despite their names. Java is a full-fledged programming language, invented by Sun Microsystems, in the spirit of C++. Designed for the more advanced programmer, Java has a number of strengths:

• It's a very modern programming language that's still familiar to the legions of C and C++ programmers who are interested in using a newer language.

• It has been designed to be more than a computer language. It's also a virtual machine technology, which means that Java applications can run on a variety of computer platforms.

• Web browsers often support Java much as they do multimedia plug-ins. A Java application can take over part of the Web browser window and interact with the user almost as if the user had launched the Java application from his or her hard disk.

The virtual machine concept is the reason that at one time, many thought that the computing world would eventually be overtaken by Java. The idea behind the virtual machine is that every computer in the world can pretend to be a less sophisticated "Java-standard" computer.

Usually a computer is defined by the sort of hardware it's composed of and the operating system it uses. For instance, you can't run Macintosh applications on a typical Microsoft Windows-based computer. Part of that is because Macintosh applications are designed for a different operating system, the MacOs, which in turn is designed for different processors and hardware from Microsoft Windows.

But Java creates a standard computer—a virtual machine—completely in the software. Instead of programming specifically for Windows or the MacOs, programmers simply write the program for the virtual machine, which is nearly the same on all computer platforms. Because Web browsers can create this machine, it's possible to run Java programs (which are called Java applets in this context) from within the Web browser, making sites more interactive and entertaining.

The truth is that, so far, Java's virtual machine hasn't really taken over desktop computers, and Windows, Macintosh, Unix, Linux, and other operating systems still require applications written (or at least compiled) directly for them. That said, there are some Java applications available for use on the desktop, and Java is popular in Web browsers. Beyond that, Java is also popular simply as a computer language, and many applications—both on the desktop and for the Web—are now written in Java.

So, why do Java and JavaScript have similar names? Aside from confusing novice computer users, there is a reason for the similar names—JavaScript was designed to use a fairly Java-like syntax. That's it. Even though JavaScript isn't nearly as powerful or complex, and it's only designed to work within Web browsers, it uses some commands and syntax that are similar to Java. Of course, that's not really saying much, because Java is similar to C++, and C++ is based on C. In essence, JavaScript is easy to learn for anyone who's ever programmed in one of these modern object-oriented programming languages.

JavaScript Versus VBScript

JavaScript is certainly the most popular scripting language for Web documents, but it isn't the only one. VBScript runs a distant, but occasionally significant, second place in the Web scripting world, despite the fact that it's a Microsoft-only technology that's only supported in Internet Explorer for Windows.

VBScript has two things going for it: It's the scripting language recommended for ActiveX controls (which are sort of Microsoft's proprietary version of Java applets), and it's very much like Visual Basic, the popular Windows programming language. Whereas both Java and JavaScript are platform-neutral, VBScript and ActiveX have made a very Windows-centric play for control of the Internet.

This chapter focuses on JavaScript because it's the more widely accepted of the two, it's already cross-platform, and it uses a slightly more approachable syntax. Still, if you plan to implement Web sites that are Microsoft-only (such as intranets), if you're working with ActiveX controls, and/or if you're already a proficient Visual Basic programmer, you may want to look further into VBScript for scripting within your Web documents.

How Web Scripts Work

With the preliminaries out of the way, now we can move on to two basic concepts in Web scripting with JavaScript: functions and event handling.

In most of the scripts you create using JavaScript, you'll have two distinct sections—code within the <head> of your document, and code within the <body> of your document. The stuff in the <head> will usually be functions, while the code in the <body> will often comprise function calls.

Function calls don't do a lot of actual processing. Instead, they're in the <body> of the document to either respond to user input or follow a set path of statements. The function calls usually take a particular value and send it up to the functions that are stored in the <head> of the document. Those functions then process the data, do some math (or some other sort of computation), and then return the value to the function call in the body of the script.

Of course, this whole process would be silly if the function calls simply happened in order—at that point, you might as well put the whole script in one part of the document. But the value of functions is that they can be reused at different points in a script, in different orders. That's where event handling comes into play. In essence, the script is able to wait for certain events to happen—such as the user clicking a particular link or button, or entering data in an HTML form. When that happens, the script can respond to the event, send data to a function, and get a returned value.

Instead of a procedural program that guides the user from step A to step B to step C, the function/event approach means that the script waits for the user to do something, and then reacts to it. When a particular piece of information needs to be retrieved from the user, or if a certain calculation needs to be performed, a function is called to solve that problem. But functions are only invoked when the user does something that the script needs to react to. That's why it's called handling events.