Events

As mentioned, JavaScript is not an object-oriented language; neither, in a strict sense, is an HTML page. The DOM puts an object interface on an HTML page, but inherently it is still a document. JavaScripts embedded in an HTML page inherently suffer from some of the same problems. Like the document itself, JavaScript is read and interpreted in the order it appears in the document. Any script blocks that contain executable JavaScript statements outside of a function definition are interpreted in the order they are read. Writing in-line scripts that initialize the page before the user starts to interact with it might be OK to write this way, although I still wouldn't encourage it.

A more structured way to organize JavaScripts in an HTML page is to define functions that encapsulate very discrete behaviors and then have them executed as needed. A function would respond to an event; if the code needed to be executed when the document was first loaded, the event would be the onLoad event of the

element in the HTML page.

The concept and use of events in client-side activity is critical for most applications. An HTML or browser event is something that triggers a script or a module into action. Typically, some user interaction with the browser or document triggers an event, although in some situations, the browser itself might be the source for the event. The event handler parameter defines the name of the function that will handle the event when it is fired. Not all elements in an HTML document receive all events. A summary of common events and handler function names, taken from the "Netscape Java Script Guide,"[6] is given in Table 3-1.

[6] Available at http://home.netscape.com/eng/mozilla/3.0/handbook/javascript/index.html.

Table 3-1. Summary of HTML Document Events

Event	Applies to	Occurs When	Event Handler
Abort	Images	User aborts the loading of an image, by, for example, clicking a link or the Stop button.	onAbort
Blur	Windows, frames, and all form elements	User removes input focus from window, frame, or form element.	onBlur
Click	Buttons, radio buttons, check boxes, Submit buttons, Reset buttons, links	User clicks form element or link.	onClick
Change	Text fields, text areas, select lists	User changes value of element.	onChange
Error	Images, windows	The loading of a document or image causes an error.	onError
Focus	Windows, frames, and all form elements	User gives input focus to window, frame, or form element.	onFocus
Load	Document body	User loads the page in the Navigator.	onLoad
Mouse out	Areas, links	User moves mouse pointer out of an areaclient-side image mapor link.	onMouseout
Mouse over	Links	User moves mouse pointer over a link.	onMouseOver
Reset	Forms	User resets a form: clicks a Reset button.	onReset
Select	Text fields, text areas	User selects form element's input field.	onSelect
Submit	Submit button	User submits a form.	onSubmit
Unload	Document body	User exits the page.	onUnload

Client-side programming is event driven. Except in the case of in-line JavaScriptsdiscouragedall JavaScript functions are executed in response to an event. The

tag of an HTML document defines the main textual content of the document and can generate the following events:

• Load
• Unload
• Blur
• Focus

Generally, these events are fired when the content is created and destroyed and when it receives and loses user focus. The main controller function would probably handle the Load event of the

tag. In the following HTML example, the onLoad event handler is assigned to the main() function. When the event is fired, the main() function is executed. This function overwrites the original content of the page. The result is a Web page that displays the text "I am in control now, ha ha ha!" instead of "This is the normal content."

test page

This is the normal content.

One popular way of using JavaScript over the Internet today is to animate menu items or buttons in a Web page. JavaScript functions handle the click or mouse-over events of Web page elements, and alter the display to show nested menus, or new images. This type of JavaScript use, although important to the overall application, is not necessarily considered architecturally significant. When modeling JavaScript in an application's analysis or design model, it is important to separate business logic and presentation. JavaScripting is very useful for both. When JavaScript is used to execute business logicenforce validation rules, perform calculations, and so onthey belong in the design and, possibly, analysis models. When the scripts are used to enhance the presentation, they belong in the user interface models and prototypes.