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.
| 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.