1. JavaScript, Part 3 Instructor: Charles Moen CSCI/CINF 4230

2. 2 Events  Events are fired by actions that happen in a document, e.g. a user clicks a button or submits a form  JavaScript programs are event-driven The program waits for some user action –Clicking a link or a check box –Submitting a form –Loading a page An action triggers an event – e.g. click, submit, or load events Then a function is executed as a result of the event firing JavaScript (Koch‏)

3. 3 Event Handlers  Event handlers are the functions that are executed when a particular event fires  We add GUI controls and event handlers to a Web page to make it interactive The user interacts with a control – e.g., by changing the value in a form field or clicking on a submit button The event handler function is notified of this event Then the function executes JavaScript (Koch, Ding)‏

4. 4 Some Events  Mouse events are available on all HTML elements  Interface events are fired after certain mouse or key actions, e.g., the submit event fires after a user clicks on a submit button Mouse eventsInterface eventsKeyboard events clickblurkeydown dblclickfocuskeypress mousedownchangekeyup mousemoveload mouseoutunload mouseoversubmit mouseupresize scroll JavaScript (Koch, Ding)‏

5. 5 Some Commonly Used Events click An element is clicked once mouseover The mouse moves over an element change The value of an element changes load A page has been completely loaded in the browser submit A user submits a form JavaScript (Koch, Ding)‏

6. 6 A Simple Example Event Handling Example JavaScript Add “on” in front of the event name

7. 7 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 Method 2: Register event handlers in the script Best practice JavaScript (Koch)‏ An inline event handlerAdd “on” in front of the event name

8. 8 Register Event Handlers in the Script  Event-handling attributes are properties of elements in JavaScript  Assign the event handler function to the element’s property for a particular event function initForm() { var theForm = document.getElementById("sandwichform"); theForm.onsubmit=addSandwich; } JavaScript (Koch)‏ myscripts.js The property for the submit eventThe event handler (do not use the parentheses)‏

9. 9 The load Event  Fires when the page is completely loaded in the browser  Script initialization can be triggered by the load event JavaScript (Koch)‏ function initForm() { var theForm = document.getElementById("sandwichform"); theForm.onsubmit=addSandwich; } window.onload = initForm; myscripts.js This assignment is executed immediately, because it is not in a function. Whenever the load event fires, the initForm function will execute The event handler (do not use the parentheses)‏

10. 10 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 JavaScript (Koch)‏ function addSandwich() { var mySandwich = ""; for (var i=0; i<this.length; i++) { var element = this.elements[i]; return false; } function initForm() { var theForm = document.getElementById("sandwichform"); theForm.onsubmit=addSandwich; } window.onload = initForm; Since the “addSandwich” function belongs to the form, we can use “this” to refer to the form itself When we assigned the function as an event handler of “theForm,” the function became a method of the form object and “belongs” to it. function addSandwich(mySandwichForm) { var mySandwich = ""; for (var i=0; i<mySandwichForm.length; i++) { var element = mySandwichForm.elements[i]; } In the original function, we had to pass the form as an argument

11. 11 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 W3C event handler registration Microsoft event handler registration JavaScript (Koch)‏

12. 12 W3C Event Handler Registration  Supported by Mozilla and Safari, but not by Microsoft IE function initForm() { var theForm = document.getElementById("sandwichform"); theForm.onsubmit=addSandwich; } window.addEventListener("load",initForm,false); JavaScript (Koch)‏ myscripts.js Use the “addEventListener” 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

13. 13 Microsoft Event Handler Registration  Supported by Microsoft IE, but not Mozilla and Safari function initForm() { var theForm = document.getElementById("sandwichform"); theForm.onsubmit=addSandwich; } window.attachEvent("onload",initForm); JavaScript (Koch)‏ myscripts.js Use the “attachEvent” 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

14. 14 Cross Browser Support  Browser detection (deprecated)‏ Check the value of navigator.userAgent, and then branch to handle each browser differently Early technique that is unreliable now, because the userAgent value is unpredictable JavaScript (Koch‏)  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 Event Handling Example document.write(navigator.userAgent); Browser detection scripts attempt to search the value of this property for the name of the browser.

15. function initForm() { var theForm = document.getElementById("sandwichform"); theForm.onsubmit=addSandwich; } if (window.addEventListener) { window.addEventListener("load",initForm,false); } else if (window.attachEvent) { window.attachEvent("onload",initForm); } myscripts.js 15 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 JavaScript (Koch)‏ Testing whether this method exists

16. DHTML

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

18. 18 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 JavaScript (Koch‏, Wikipedia, Yue)‏ Hello var greetingDiv = document.layers["greeting"]; In Netscape Hello var greetingDiv = document.all["greeting"]; In IE

19. 19 A Simple Example JavaScript (Koch‏, Wikipedia, Yue)‏ function moveRight(){ var greetingDiv = document.getElementById('greeting'); greetingDiv.style.left='100px'; } function makeRed(){ var greetingDiv = document.getElementById('greeting'); greetingDiv.style.color='red'; } function makeBold(){ var greetingDiv = document.getElementById('greeting'); greetingDiv.style.fontWeight='bold'; } function makeInvisible(){ var greetingDiv = document.getElementById('greeting'); greetingDiv.style.visibility='hidden'; } function reset(){ var greetingDiv = document.getElementById('greeting'); greetingDiv.style.left=0; greetingDiv.style.color='black'; greetingDiv.style.fontWeight='normal'; greetingDiv.style.visibility='visible'; }

20. 20 More Examples http://www.w3schools.com/dhtml/dhtml_examples.asp JavaScript (W3schools)‏

21. 21 innerHTML  A property of an element All of the HTML in the element  Not part of the DOM  Introduced by Microsoft in IE4, and supported by most browsers today JavaScript (Keith, Yue)‏

22. function testInnerHtml() { var emptyDiv = document.getElementById("empty"); emptyDiv.innerHTML = " Some new text. "; } Test innerHTML 22 Using innerHTML JavaScript (Keith, Yue)‏

23. 23 References Ding, Wei, “JavaScript” UHCL lecture slides, 2008. Keith, Jeremy. DOM Scripting: Web Design with JavaScript and the Document Object Model. friends of ED, 2005. Koch, Peter-Paul, PPK on JavaScript. 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 W3Schools Online Web Tutorials. “JavaScript Tutorial”. [Online]. Available: http://www.w3schools.com/js/default.asp Wikipedia. “DHTML”. [Online]. Available:http://en.wikipedia.org/wiki/Dynamic_HTML Yue, Kwok-Bun, “An Introduction to JavaScript” UHCL lecture notes, 2000. Yue, Kwok-Bun, “An Introduction to Dynamic HTML” UHCL lecture notes, 2000.