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

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.

Overview of Modeling and Web-Related Technologies

Building Web Applications

Building Web Applications With UML
Building Web Applications with UML (2nd Edition)
ISBN: 0201730383
EAN: 2147483647
Year: 2002
Pages: 141
Authors: Jim Conallen © 2008-2020.
If you may any questions please contact us: