Chapter 11
Events in JavaScript

Events

It was not long ago when static HTML pages ruled the Web. As a matter of fact, such pages still constitute the majority. However, during the last year, many static pages have been replaced by dynamic, interactive, and altogether more exciting pages. HTML provides a limited set of features. When browsing an HTML-based Web page, you can read the text, look at the graphics, or possibly listen to the sound it plays. All of these actions are in the form of “do not touch.” You only admire the content of the page, but have no influence on it. Such pages remind us of art masterpieces seen in a museum. You can look at them, maybe take a picture, but you cannot interact with the paintings. For many people the Web experience consists of only visiting pages, without interacting with them. The only interaction experienced is when the user follows a link or clicks somewhere on an image map.

HTML forms are not new to the Web community, but they weren’t part of HTML’s vernacular in the not-so-distant past. The first browsers did not support forms. You could not use search engines to seek desired information or fill out a survey. Forms have gradually changed the existing model. They add much more interaction to Web pages. HTML forms consist of text fields, buttons, check boxes, and other input devices. They are similar to everyday paper forms you fill out regularly. You have probably filled out a survey in your Web surfing “career,” including multiple choice questions, yes-no questions, and open-ended questions. The basic problem with forms is that it takes time to receive a reply. The data entered in the forms is transmitted to the server across the network, processed, and then sent back to the client, your browser. You might find yourself waiting a full minute, maybe even more, just to receive a message such as, “This is not a valid e-mail address. Please enter your e-mail again.” You then have to resubmit the form, hoping it will accept the input and set you free. Many games also take advantage of forms. These games are mostly logical ones, because they do not require fast interaction or live processing. A tic-tac-toe CGI game would probably be very boring, because you would have to wait a long time after each move you made. Server-push animations are very slow and annoying, so they are rarely used.

JavaScript is primarily designed to localize all processing. That is, the processing script is loaded by your browser and processes the data entered without any network submission, i.e., all processing is done on the client side. Avoiding network transmission saves time and thus enables fast replies, animation, and other interactions. The script is located on the computer you are using. Therefore, a game written in JavaScript could probably work at the same speed as a game on your hard drive! However, some tasks are just not possible with JavaScript. You cannot search the Web with a client-side JavaScript script because this action requires the use of disk-consuming files, which cannot be transmitted over a slow connection such as a modem. Even a T3 connection would be much too slow for this purpose. The main idea of JavaScript is that you can combine client-side scripts with server-side scripts (usually written in CGI). You can create an e-mail address submission form that checks that the value in the form has an at-sign (@), and only if one is found is the input sent to the server for additional processing. The initial validation is done with JavaScript, and the further processing with server-side applications.

JavaScript enables the designer of an HTML page to take advantage of events for automated navigation, client-side processing, and more. Events are signals generated by the browser when various actions occur. You will see later that JavaScript is aware of these events and can react to them. The events supported by JavaScript are listed in Table 11-1.

Table 11-1. Events in JavaScript.

Not all actions that take place in your browser are events. Events are only actions that occur in the area of the HTML page, such as loading images and selecting form elements. If an action occurs directly in the boundary of the browser’s display zone it is an event as well. Take a look at the following page:

Figure 11-1.  Netscape’s homepage displayed in Netscape Navigator’s full window.

You know that this window consists of two parts: the HTML page and the browser. You already know that many actions can occur in the environment illustrated in Figure 11-1. Some are events while others are nonevent actions. The main part of the window is the HTML page, the content window without the surrounding menus and buttons:

Figure 11-2.  Netscape’s homepage without the surrounding browser’s window.

All actions that take place in the area shown in Figure 11-2 are events. The user loads, unloads, clicks links, and causes many other events in this zone. The second section consists of Netscape Navigator’s features, such as the menu bar, the scroll bar, and other elements seen in the following image:

Figure 11-3.  Netscape Navigator’s window with no content zone.