CS346 Javascript-7A Events1 DOM Document Object Model and Events

CS346 Javascript-7A Events2 JavaScript Execution Environment  JavaScript Window object window in which the browser displays documents largest enclosing referencing environment for scripts All global variables are properties of Window   Implicitly defined Window properties: document - a reference to the Document object that the window displays frames - an array of references to the frames of the document 

CS346 Javascript-7A Events3 Each Document object contains  forms - an array of references to the forms of the document Each Form object has an elements array, which has references to the form’s elements  anchors  links  images

CS346 Javascript-7A Events4 Document Object Model (DOM)  DOM is an abstract model interface between HTML documents and application programs—an API  DOM 0 supported by all JavaScript-enabled browsers (no written specification)  DOM 1 released in 1998  DOM 2 the latest approved standard Nearly completely supported by NS7 IE6’s support is lacking some important things 

CS346 Javascript-7A Events5 Example HTML Document document to illustrate DOM Breakfast 0 1 Lunch 1 0

CS346 Javascript-7A Events6 DOM Structure

CS346 Javascript-7A Events7 Binding to DOM  To support DOM, a language must have a binding to the DOM constructs  JavaScript binding HTML elements -> objects element attributes -> properties  e.g.,  represented as an object with two properties, type with the values "text" name with the value "address"

CS346 Javascript-7A Events8 How does JS access elements?  3 ways: 1. DOM address 2. Element names 3. getElementById Method (defined in DOM 1)  Example (a document with just one form and one widget):

CS346 Javascript-7A Events9 Ways to access elements  1. DOM address  xhtml:  Javascript: document.forms[0].element[0]  Advantage: refers to multiple forms and multiple properties by index  Problem: What if the document changes?

CS346 Javascript-7A Events10 Ways to access elements  2. Element names – element and all of its ancestors (except body) must have name attributes  Example:  Javascript: document.myForm.pushMe Problem: XHTML 1.1 spec doesn’t allow the name attribute in the form element but name attribute is allowed in elements in a form

CS346 Javascript-7A Events11 Ways to access elements  3. getElementById Method (defined in DOM 1)  Example:   document.getElementById("pushMe") 

CS346 Javascript-7A Events12 Checkboxes and Radio buttons  - Checkboxes and radio button have an implicit array, which has their name <input type = "checkbox" name = "toppings" value = "olives" />... <input type = "checkbox" name = "toppings" value = "tomatoes" />... var numChecked = 0; var dom = document.getElementById("topGroup"); for index = 0; index < dom.toppings.length; index++) if (dom.toppings[index].checked] numChecked++;

CS346 Javascript-7A Events13 Events and Event Handling  An event is a notification that something specific has occurred due to the browser or an action of the browser user  An event handler is a script that is implicitly executed in response to the occurrence of an event  The process of connecting an event handler to an event is called registration   Don’t use document.write in an event handler, because the output may go on top of the display

CS346 Javascript-7A Events14 Specify events as Tag Attribute in xhtml Event Tag Attribute blur onblurloses focus change onchange click onclick focus onfocusclick or tab load onloadload document mousedownonmousedown mousemoveonmousemove mouseout onmouseout mouseover onmouseover mouseuponmouseup select onselecttext or textarea submit onsubmit unload onunload

CS346 Javascript-7A Events15 Some features  The same attribute can appear in several different tags   e.g., The onclick attribute can be in and

Event attributes and their tags CS346 Javascript-7A Events16

Event attributes and their tags CS346 Javascript-7A Events17

CS346 Javascript-7A Events18 Focus  A text element gets focus in three ways: 1. When the user puts the mouse cursor over it and presses the left button 2. When the user tabs to the element 3. By executing the focus method

CS346 Javascript-7A Events19 Attributes and Tags

CS346 Javascript-7A Events20 Attributes and Tags

DOM 2 Event Model CS346 Javascript-7A Events21

CS346 Javascript-7A Events22 First way to register event handlers  2 ways 1. By assigning the event handler script to an event tag attribute  onclick = "alert('Mouse click!');"  onclick = "myHandler();" // for more than one statement, use a function  See load.html

CS346 Javascript-7A Events23 Buttons: to register event handlers  Plain Buttons – use the onclick property – one to one <input type=“button” name=“freeButton” id = “freeButton” />  Handler: <input type=“button” name=“freeButton” id = “freeButton” onclick = “freeButtonHandler();” />

CS346 Javascript-7A Events24 Many sources-to-one handler  To enable the event handler to recognize the clicked Radio button to the handler, send a parameter to the handler – many to one   e.g., if planeChoice is the name of the handler and the value of a button is 172, use  onclick = ″planeChoice(172)″  See radio_click.html

CS346 Javascript-7A Events25 Second way to register event handler  Assigning the name of the handler to the event properties of an object  first method: assigning the call to event handler to an attribute  Caution: The event properties of the object must be assigned (instantiated) when accessed.

CS346 Javascript-7A Events26 Can we make radio_click.html smarter? <input type = "radio" name = "planeButton“ value = "152“ onclick = "planeChoice(152)" /> Model 152 Note: “152” appears 3 times. Can the event handler pick up the user’s choice? Can we omit onclick = "planeChoice(152)" ?

CS346 Javascript-7A Events27 Challenge  Can the event handler determine which button was clicked?  See radio_click2.html

CS346 Javascript-7A Events28 Accessibility Principle  Option: Variables and Functions can be placed in and Examples 4-xFunction.html  Accessibility Principle: A variable, function, or object must be defined when accessed Example: 4-3FunctionAfter.html getAvg() accessed in head but defined in body

CS346 Javascript-7A Events29 Caution: If the handler is registered by assigning it to a property of the JavaScript objects var dom = document.getElementById(″myForm″); dom.elements[0].onclick = planeChoice; object.property.property handler_name This registration must happen AFTER both the handler function and the XHTML form are defined  If this is done for a radio button group, each element of the array must be assigned

CS346 Javascript-7A Events30 Event handler determining which button was clicked The checked property of a radio button object is used to determine whether a button is clicked - If the name of the buttons is planeButton var dom = document.getElementById(″myForm″); for (var index = 0; index < dom.planeButton.length; index++) { if (dom.planeButton[index].checked) { plane = dom.planeButton[index].value; break; }

CS346 Javascript-7A Events31 Caution See the positioning of the following in the example radio_click2.html: at the very end of body <!-- var dom = document.getElementById("myForm"); dom.elements[0].onclick = planeChoice; // etc -->

CS346 Javascript-7A Events32 Pros and Con: 2nd way of registering event handler (specifying handlers by assigning them to event properties )  Disadvantage: no way to use parameters  Advantages: 1. Keep HTML and JavaScript separate 2. Handler could be changed during use

CS346 Javascript-7A Events33 Handling Events from Textbox and Password Elements  The Focus Event  One use: To prevent illicit changes to a text box by blurring the element every time the element acquires focus  Example: nochange.html

CS346 Javascript-7A Events34 Handling Events from Textbox and Password Elements (cont’d)  Checking Form Input  Good and frequent use of JavaScript finds errors in form input being sent to the server for processing, saving 1. Server time 2. Internet time

CS346 Javascript-7A Events35 How to Check Form Input? 1. Detect the error and produce an alert message 2. Put the element in focus (the focus function) 3. Select the element (the select function) The focus function puts the element in focus, which puts the cursor in the element document.getElementById("phone").focus(); The select function highlights the text in the element

CS346 Javascript-7A Events36 Caution:  To keep the form active after the event handler is finished, the handler must return false - Problems: 1. With IE6, focus and select only work if the handler is registered by assigning it to the element event property 2. With NS7, select works, but focus does not  - Example – password_check.html

More examples in 7A  Radio_click.html  Validator.html CS346 Javascript-7A Events37

Dynamic Documents with Javascript – 7B  Positioning elements Absolute - absPos.html Relative – relPos.html  Moving elements – mover.html  Element visibility – showHide.html CS346 Javascript-7A Events38

Dynamic Documents with Javascript  Changing color and fonts – dynColor.html  Dynamic content dynValue.html  Stacking elements – stacking.html CS346 Javascript-7A Events39

Dynamic Documents with Javascript  Locating the Mouse Cursor – where.html  Reacting to a Mouse Click – anywhere.html  Slow Movement of Elements Recursive call – moveTtxt.html  Dragging and Dropping ElementsdragNDrop.html CS346 Javascript-7A Events40

CS346 Javascript-7A Events41