Execution Environment for Java Script Java Script Window

Execution Environment for Java. Script " " Java Script Window object represents the window in which the browser displays documents. The Window object provides largest enclosing referencing environment for scripts. � All java. Script variables are properties of some object � The Window properties are visible to all scripts in the document --they are the globals. � Variables created by client-side script become (new) property of Window

Window properties " " " Property document is a reference to the Java. Script Document object that the window displays Property frames is an array of references to the (may be multiple) frames of the document Property forms is an array of references to the forms in the document. � Each Form object has an elements array of references to form's elements.

DOM Document Object Model " Provides specifications for portability for users to write code in programming languages to create documents, work on their structures, change, add, or delete elements and their context " W 3 c development since early 90's " DOM 0 supported by Java. Script capableborwsers " DOM 1, Oct 98; focused on HTML and XML " DOM 2, Nov 00; support CSS, event, tree manipulation events NS 6 but not IE 6

DOM " " DOM documents have a treelike structure DOM is abstract model defines interface between HTML documents and application programs DOM is an OO model -document elements are objects with both data (properties) and operations (methods) Language supporting DOM must have binding to the constructs

DOM " In Java. Script binding, � HTML elements -->objects � HTML element attributes --> properties <input type = "text" name = " address> would be represented as one object with two properties, type and name, with the values "text" and "address" " For a description of tree traversal, adding and deleting nodes go to in http: //www. w 3 c. org

Element Access in Java. Script " DOM 0 uses forms and element arrays <form action =""> <input type = "button" name = "push. Me"> </form> � DOM 0 address: documents. forms[0]. element[0] � Element names -- element and all ancestors to have name attributes (but body) <form name ="my. Form" action= ""> <input type = "button" name = "push. Me"> </form> � Element name address: documents. my. Form. push. Me

Element Access in Java. Script " DOM 1 adrressing via Java. Script method: get. Element. Id <form action =""> <input type = "button" name = "push. Me"> </form> � DOM address: document. get. Element. Id("pushme")

Events/Event Handling " HTML 4. 0 provided standard --DOM 0 � Supported " by all browsers that include Java. Script DOM 2 comprehensive event model � Supported � Not by Mozilla and NS 6 browsers supported by IE 6!!

Events/Event Handling " " Event-driven: code executed resulting to user or browser action Event: a notification that soemthing specific occurred -- by browser or user Event handler: a script implicitly executed in response to event occurrence Registration: the process of connecting event handler to event

Events/Event Handling Java. Script " Events are Java. Script objects --> names are case sensitive, all use lowercase only. (Method write should never be used in event handler. May cause document to be written over. ) " " Java. Script events associated with HTML tag attributes which can be used to connect to eventhandlers Table 5. 1 (pg 182)

Events/Event Handling Java. Script " One attribute can appear in several different tags: � e. g. " on. Click can be in <a> and <input> HTML element get focus: � When user puts mouse cursor over it and presses the left button � When � By user tabs to the element executing the focus method � Element " get blurred when another element gets focus Table 5. 2 pg. 184 -184

Event Handling Java. Script " Event handlers can be specified two ways � Assigning the event handler script to an event tag attribute on. Click = "alert('Mouse click!'); " on. Click = "my. Handler(); � Assigning them to properties of Java. Script object associated with HTML elements

Event Handling Java. Script " " The load event: the completion of loading of a document by browser The onload attribute of <body> used to specify event handler: http: //www. ens. utulsa. edu/~class_diaz/cs 2043/load. html. T " he unload event: used to clean up things before a document is unloaded.

Radio Buttons <input type ="radio" name ="button_group" value = "blue" on. Click ="handler"> " " The checked property of radio button object is true if the button is pressed All button in the group have the same name, must use DOM address element var radio. Element = document. my. Form. elements;

Radio Buttons for ( var inder = 0 ; index < radio. Element. length; index++){ if (radio. Element[index]. checked) { element = radio. Element[index]. value; break; } } http: //www. ens. utulsa. edu/~class_diaz/radio_click. html

Radio Buttons " Event handlers can be specified by assigning them to properties of Java. Script object associated with HTML elements � Property names are lowercase versions of attribute names � For functions, assign its name to the property: document. my. Form. elemnts[0]. on. Click = my. Handler; " " Sets handler for first element of array For radio button group, each element of array must be assigned

Event Handling " Specifying handlers by assigning them to event properties: � Disadvantage --can not use parameters � Advantages: " " It is good to keep HTML and Java. Scripts separate Handler could be changed during use

Checking Form Input " Java. Script commonly used to check form input before it is sent to server for processing. � Check " for: Format and Completeness Approach: � Detect � Put error and produce alert messge elemnt in focus (focus function) � Select the element (select function)

Checking Form Input " The focus function puts the element in focus --the cursor in the element document. get. Element. By. Id("phone"). focus(); " " The select function highlights the text in the element After event handler is finished have it return false to keep the form active Neither slect nor focus are supported by NS 6. 2

Checking Form Input/Examples " Comparing passwords: � The user is asked to type it twice � Program to very they are the same � The form has two password input boxes to get the passwords, Reset, and Submit buttons � Event � No handler triggered by Submit passwd typed --> focus on box, return false � Two passwds typed-> not same focus and select first box, rerurn false, else return true http: //www. ens. utulsa. edu/~class_diaz/cs 2043/passwd_chk. html

Checking Form Input/Examples " Format check for name & tel. Num. � Event handler triggered by change event of text boxes for name and phone number � When error is found, an alert message is produced and both focus and select are called on the textbox element in error � Another event handler will produce a thank you alert when the input is ok. http: //www. ens. utulsa. edu/~class_diaz/cs 2043/validator. html

DOM 2 Model

DOM 2 Event Model " Does not include DOM 0 features, but they are still supported " Much more powerful than DOM 0 " Events propagates � Node of document tree where event is created is the target node � First phase is the capturing phase � Events begin at the root and move toward target node

DOM 2 Event Model " " In the capturing phase, if there any registered handlers at nodes along the way, if one is enabled, then it is run. The second phase is at the target node. � If there are registered event handlers there for the event, they are run " The third phase is bubbling phase � Event traverses back to the root. All encountered registered handlers are run

DOM 2 Event Model " " Not all events bubble Any handler can stop propagation by calling Event object method stop. Propagation To stop default operations call Event object method prevent. Default Event handler with add. Event. Listerner method � Name of event as literal string, handler function, and boolean value to specify if event is enabled during capturing

DOM 2 Event Model " " " A temporary handler can be created by registering it and then unregistering it with remove Event. Listener The current. Target property of Events always references the object on which the handler is being executed. The Mouse. Event object (subobject of Event) has two properties: client. X, client. Y, the (x, y) coordinates of mouse cursor relative to upper left corner validator 2. html

The navigator Object " Indicates which browser is being used. " Two useful properties: � The app. Name property has the bowser's name � The app. Version has the version number navigator. html