Introducing JavaScript

JavaScript was initially introduced with Netscape Navigator 2.0. Before its introduction, there was no way to add interactive content to web pages. If you wanted to create an interactive application, you had to do everything on the server using CGI scripts or other server-side techniques. Netscape embedded a JavaScript interpreter within its browser so that web designers could add programs to their pages to provide interactive content.

JavaScript is useful because it's deeply integrated with the browser. This integration allows it to manipulate various aspects of the browser behavior, as well as objects included on an HMTL page. JavaScript uses what's referred to as an event-driven model of execution. When you embed JavaScript code in a web page, it isn't run until the event it's associated with is triggered.

The types of events that can call JavaScript include loading the page, leaving the page, interacting with a form element in some way, or clicking a link. Plenty of other events are available as well. Many of these events are taken advantage of in what most users would consider to be annoying ways. For example, many sites open an additional window containing an advertisement when you navigate to one of their pages. This is accomplished using JavaScript and the page load event. Other sites open additional windows when you leave them; this is also accomplished using JavaScript triggered on an event. Less annoying applications include displaying a custom message in the status bar when a user holds the mouse over a link, and swapping out images when the user moves the mouse over them.

Why Would You Want to Use JavaScript?

JavaScript enables you to manipulate web pages without sending a request back to the server. Using this capability, you can alter elements on a page, validate user input before a user submits a form, and modify the behavior of the browserall by using scripts embedded within your web pages. Let's look at some of the advantages of using JavaScript to enhance your web pages.

Ease of Use

Unlike Java, JavaScript is designed for nonprogrammers. As such, it's relatively easy to use and is far less pedantic about details such as the declaration of variable types. In addition, you don't need to compile JavaScript code before it can be used, unlike most other languages, including Java. Still, JavaScript is a scripting language, which gives it a steeper learning curve than HTML (although JavaScript's curve isn't as steep as Java's). Without any programming background, however, you can use JavaScript for very simple tasks such as the ones presented later in this lesson. More complex jobs require learning key programming concepts and techniques.

Increasing Server Efficiency

Some JavaScript applications can save round trips to the server, and prevent the user from waiting for a form submission to be processed. In other cases, you can use advanced JavaScript applications along with programs on the server to update parts of a page rather than reloading the entire thing. I'll discuss that in Lesson 15, "Creating Applications with Dynamic HTML and AJAX." Traffic on the Internet is only going up, and you never know when a website is going to be the next hot thing. Reducing server traffic through the use of JavaScript can help ensure that your website remains responsive even as traffic goes up. Let's say that you've created a form that people use to enter their billing details into your online ordering system. When this form is submitted, your CGI script first needs to validate the information provided and make sure that all the appropriate fields have been filled out correctly. It needs to check that a name and address have been entered, that a billing method has been selected, that credit card details have been completedand the list goes on.

But what happens if your CGI script discovers that some information is missing? You need to alert the visitor that there are problems with the submission and then ask the user to edit the details and resubmit the completed form. This process involves sending the form back to the browser, having the visitor resubmit it with the right information, revalidating it, and repeating the process until everything is current. This process is very resource-intensive, both on the server side (each CGI program takes up CPU and memory time) and in the repeated network connections back and forth between the browser and the server.

By adding validation and checking procedures to the web browser with JavaScript, you can reduce the number of transactions because many errors will be caught before forms are ever submitted to the server. And, because the web server doesn't need to perform as many validations of its own, fewer server hardware and processor resources are required to process form submissions. The side benefit is that users will find your application more responsive because the trip back to the server isn't required for validation.

Integration with the Browser

You can add interactive features to your pages using Java applets or plug-ins such as Macromedia Flash and Macromedia Shockwave. However, these technologies are separate from the pages that they're embedded within. JavaScript, on the other hand, enables you to manipulate objects on the page such as links, images, and form elements. You can also use JavaScript to control the browser itself by changing the size of the browser window, moving the browser window around the screen, and activating or deactivating elements of the interface. None of these options is available with Java or plug-ins.