ee Learning Objective: «Understand JavaScript Object hierarchy model - DOM Learn the concept of Event Driven Programming, Events, Event Working with Form elements - Button, Checkbox, Radio button, Select, + Implement Form level validation 3.1 Introduction Figure 1: JavaScript Document Object Model The hierarchy depicted in the figure dem ‘onstrates the principle of containership. the button and checkbox items are contained within the form ‘object, which contained a the Document object, which in turn is. ‘Contained within the top-level cei ie Containership relates to used oF referenced the principle that some obj relerring to the parent, or container object, mas iEto remember! tne Window object s the default object that contains many objects u noted to be referenced by name. ojeroncing & form element without referring to the form object and the d opjectis notallowed inder it and does jocument vents and their Event Handlers lopject has its associated properties, erties and methods. Events describe the web pages or other browser related or enters data in a form, an eventis generated. The «on occurrence of the event, performs the processing ‘nis type of programming s called event driven programming methods and events. We are now familiar with he actions that occur aS & result of user-interaction activities. For example, when a user clicks a mouse browser waits for the event to occur that has been programmed for the JavaScript <> | BROWSER |< EVENT HANDLERS For example: nen the user clicks the button on the form the execute when the button is pressed. event is mouse click initiated by the user, executed. JavaScript contains predetermined event browser executes the code whichis attached to ‘event handler is the function which gets handlers that deal with these events. |__ Event Description Generated when a user clicks on a form element or on a link. Generated when a user changes te value of frm field Generated when a user GE input to a form element. Generated when a ge is loaded into the browser. focus |‘a user moves the mouse pointer Generated when area object. Generated when a user moves: the mouse pointer mouseOut or area object. select Generated when a user selects from a list. | blur Generated when the input focus is removed from the a form. rami ‘The following table lists the objects and their associated event handlers. chead serif Control Object Event Handlers functi button onClick) t reset ‘onClick() docu ‘onClick() val onClick() } checkbox ‘onClick() “a =. onClick), onMouseOver(), OnMouseOut() function check (browser) { document.getElementByld(answer” ).value=browser }

What's your favorite browser:

Firefox
Netscape
Opera

Your favorite browser is: _————— g with Buttons 3.3.2 Workin Example: _— eTITUE> Working with Bult

How would you like your cotfee?

With cream
With sugar

[__ 3.3.4 Working with Textboxes Example: | litle» Form Fields

Change Background Color

Background Color: _

~ Select a location from the list AM> LECT NAME="Ist"SIZE=3 onchange="opent ("> PTION> Goto Yahoo It PTION > Go to Hotmail TION> Go to Rediff 1 SELECT> FORM> 10) ;*> *the JavaScript code to be embedded in the above HTML code to open the “resPonding website in a new window on the selection ‘of any list item,