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.
|
Event |
Description |
|
abort |
Occurs when the user aborts loading an image. |
blur |
Occurs when focus is removed from a form element (when the user clicks outside the
form element). It also occurs when the user removes focus from a browser window. |
click |
Occurs when the user clicks on a link, an image map area, or a form element. |
change |
Occurs when the user changes the value of a form field. |
error |
Occurs if there is an error loading an image. |
focus |
Occurs when the user gives input focus to a form element or a window. |
load |
Occurs when a page or image has finished loading into the browser window. |
mouseOut |
Occurs when the user moves the mouse pointer from inside a link or image map area’s
bounding box to its outside. |
mouseOver |
Occurs when the user moves the pointer over a hypertext link or an image map area. |
select |
Occurs when the user selects a form field. |
submit |
Occurs when the user submits a form via the “submit” button. |
unload |
Occurs when the user exits a page. |
|
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.