CSCI CINF 4230 Java Script Part 3 Instructor Charles

Java. Script (Koch) Event Handler Registration Method 1: Inline event handlers Add an attribute to an HTML element • Works in all browsers • Deprecated because behaviour is not separated from structure •

Java. Script (Koch) Register Event Handlers in the Script Event-handling attributes are properties of elements in Java. Script Assign the event handler function to the element’s property for a particular event myscripts. js function init. Form() { var the. Form = document. get. Element. By. Id("sandwichform"); the. Form. onsubmit=add. Sandwich; } The property for the submit event The event handler (do not use the parentheses)

Java. Script (Koch) The load Event Fires when the page is completely loaded in the browser Script initialization can be triggered by the load event myscripts. js function init. Form() { var the. Form = document. get. Element. By. Id("sandwichform"); the. Form. onsubmit=add. Sandwich; } window. onload = init. Form; The event handler (do not use the parentheses) This assignment is executed immediately, because it is not in a function. Whenever the load event fires, the init. Form function will execute 9

Java. Script (Koch) this When used inside a function body, “this” refers to the object that the function belongs to If we assign a function as an object’s event handler, then it belongs to that object Since the “add. Sandwich” function belongs to the form, we can use “this” to refer to the form itself In the original function, we had to pass the form as an argument function add. Sandwich() { var my. Sandwich = ""; for (var i=0; i return false; } } function init. Form() { var the. Form = document. get. Element. By. Id("sandwichform"); the. Form. onsubmit=add. Sandwich; } window. onload = init. Form; When we assigned the function as an event handler of “the. Form, ” the function became a method of the form object and 10 “belongs” to it.

Java. Script (Koch) Advanced Event Handler Registration The script-based event handler registration, as described so far, is considered the “traditional” approach because it is part of the Netscape 3 standard PROBLEM: • With the traditional approach, only one function can be registered for any one particular event Advanced event handler registration allows many event handlers for the same event on the same element • W 3 C event handler registration • Microsoft event handler registration 11

Java. Script (Koch) W 3 C Event Handler Registration Supported by Mozilla and Safari, but not by Microsoft IE myscripts. js function init. Form() { var the. Form = document. get. Element. By. Id("sandwichform"); the. Form. onsubmit=add. Sandwich; } window. add. Event. Listener("load", init. Form, false); Use the “add. Event. Listener” method of the object that gets the event handler Three arguments: 1. The event name as a string 2. The event handler function 3. A boolean false = the event bubbles up (the usual choice) true = the event is captured 12

Java. Script (Koch) Microsoft Event Handler Registration Supported by Microsoft IE, but not Mozilla and Safari myscripts. js function init. Form() { var the. Form = document. get. Element. By. Id("sandwichform"); the. Form. onsubmit=add. Sandwich; } window. attach. Event("onload", init. Form); Use the “attach. Event” method of the object that gets the event handler Two arguments: 1. The event name as a string, with “on” in front of the name 2. The event handler function 13

Java. Script (Koch) Cross Browser Support Browser detection (deprecated) • Check the value of navigator. user. Agent, and then branch to handle each browser differently • Early technique that is unreliable now, because the user. Agent value is unpredictable Browser detection scripts attempt to search the value of this property for the name of the browser. Object detection • If your script uses an object or method, first check whether it exists in the browser • You don’t need to know the browser identity 14

Java. Script (Koch) Object Detection If your script uses an object or method, first check whether it exists in the browser; if it doesn’t exist, then return Works with any browser, any object, any method myscripts. js function init. Form() { var the. Form = document. get. Element. By. Id("sandwichform"); the. Form. onsubmit=add. Sandwich; } Testing whether this method exists if (window. add. Event. Listener) { window. add. Event. Listener("load", init. Form, false); } else if (window. attach. Event) { window. attach. Event("onload", init. Form); } 15

DHTML

Java. Script (Koch, Wikipedia) DHTML Dynamic HTML A buzzword, not a standard • Adding visual effects to Web pages by using Java. Script and the DOM to change the CSS styles of HTML elements Some common uses today • Rollover buttons • Dropdown menus • Animations 17

Java. Script (Koch, Wikipedia, Yue) Background About DHTML First introduced in the Netscape and IE version 4 browsers • • The ability to add visual effects to the dynamically was exciting, because Web pages had always been static documents The problem: Most users still had version 3 browsers Also, Netscape and IE tried to be as incompatible as possible • • Browser sniffing was recommended for dealing with incompatibilities Hooks to elements were treated differently In Netscape

function move. Right(){ var" src="https://present5.com/presentation/17086e17b1c0d7e66cdfa90a1641baef/image-19.jpg" alt="Java. Script (Koch, Wikipedia, Yue) A Simple Example 19

Java. Script (W 3 schools) More Examples http: //www. w 3 schools. com/dhtml_examples. asp 20

Java. Script (Keith, Yue) inner. HTML A property of an element • All of the HTML in the element Not part of the DOM Introduced by Microsoft in IE 4, and supported by most browsers today 21

Java. Script (Keith, Yue) Using inner. HTML

Test inner. HTML

References Ding, Wei, “Java. Script” UHCL lecture slides, 2008. Keith, Jeremy. DOM Scripting: Web Design with Java. Script and the Document Object Model. friends of ED, 2005. Koch, Peter-Paul, PPK on Java. Script. New Riders, 2007. Schultz, David and Craig Cook, Beginning HTML with CSS and XHTML: Modern Guide and Reference. Apress, 2007. Shannon, Ross. “DHTML Explained”. (2008) [Online]. Available: http: //www. yourhtmlsource. com/javascript/dhtmlexplained. html W 3 Schools Online Web Tutorials. “Java. Script Tutorial”. [Online]. Available: http: //www. w 3 schools. com/js/default. asp Wikipedia. “DHTML”. [Online]. Available: http: //en. wikipedia. org/wiki/Dynamic_HTML Yue, Kwok-Bun, “An Introduction to Java. Script” UHCL lecture notes, 2000. Yue, Kwok-Bun, “An Introduction to Dynamic HTML” UHCL lecture notes, 2000. 23