Dialog boxes in JavaScript Events in JavaScript What are they “Which events are there? ”

1. Topic 5_3: Interacting with the user • By the end of this lecture you should : • Dialog boxes in JavaScript • Events in JavaScript • What are they • “Which events are there?” • “How do I register event handlers to an HTML element?” • “Once I have successfully accessed the event, how do I read out its properties?”

2. Topic 5_3: Interacting with the user Dialog boxes in JavaScript Events in JavaScript What are they “Which events are there?” “How do I register event handlers to an HTML element?” “Once I have successfully accessed the event, how do I read out its properties? Dialog boxes: • Three methods used by the window object to interact with the user: • alert( ) example 1, example 2 • prompt( ) example 3 • Confirm( ) example 4

3. Topic 5_3: Interacting with the user Dialog boxes in JavaScript Events in JavaScript What are they “Which events are there?” “How do I register event handlers to an HTML element?” “Once I have successfully accessed the event, how do I read out its properties? Events – building blocks of interactivity: When the user does something an event takes place. An event handler waits until the event takes place and then executes the script you have defined – this is the core of interactivity. http://www.quirksmode.org/js/introevents.html - an excellent resource for understanding events in detail

4. Topic 5_3: Interacting with the user Dialog boxes in JavaScript Events in JavaScript What are they “Which events are there?” “How do I register event handlers to an HTML element?” “Once I have successfully accessed the event, how do I read out its properties? Events:“How should I write an event handling script?” “Which events are there?” http://www.w3schools.com/jsref/dom_obj_event.asp

5. Topic 5_3: Interacting with the user Dialog boxes in JavaScript Events in JavaScript What are they “Which events are there?” “How do I register event handlers to an HTML element?” “Once I have successfully accessed the event, how do I read out its properties? Events:“How should I write an event handling script?” “How do I register event handlers to an HTML element?” Traditionally, element.onclick = doSomething; Whenever the user clicks on the HTML element, the function doSomething() is executed. Note that in the registration of an event handler you do not use parentheses ()

6. Topic 5_3: Interacting with the user Dialog boxes in JavaScript Events in JavaScript What are they “Which events are there?” “How do I register event handlers to an HTML element?” “Once I have successfully accessed the event, how do I read out its properties? Events:“How should I write an event handling script?” this always refers to the “owner” of the function we're executing, or rather, to the object that a function is a method of. For example, for a click event can write something like this element.onclick = doSomething; another_element.onclick= doSomething; function doSomething() { this.style.backgroundColor= '#cc0000'; } If we were to execute function doSomething() { this.style.color = '#cc0000'; } without other preparation we would get an error. Why? What else do we need to do to correctly structure code and avoid the error?

7. Topic 5_3: Interacting with the user Dialog boxes in JavaScript Events in JavaScript What are they “Which events are there?” “How do I register event handlers to an HTML element?” “Once I have successfully accessed the event, how do I read out its properties? Events:“How should I write an event handling script?” • A brief note about w3C event handling: • Key method is the addEventListener() • Takes three arguments • Event type • Function to be executed • Boolean value (True or false) To register doSomething() function to the onclick of an element : element.addEventListener('click',doSomething,false) To remove element.removeEventListener('click',doSomething,false)

8. Topic 5_3: Interacting with the user Dialog boxes in JavaScript Events in JavaScript What are they “Which events are there?” “How do I register event handlers to an HTML element?” “Once I have successfully accessed the event, how do I read out its properties? Events:“How should I write an event handling script?” Using anonymous functions for event handling: For example: element.addEventListener('click',function () { this.style.backgroundColor = '#cc0000' },false) What is the boolean value about?

9. Topic 5_3: Interacting with the user Dialog boxes in JavaScript Events in JavaScript What are they “Which events are there?” “How do I register event handlers to an HTML element?” “Once I have successfully accessed the event, how do I read out its properties? Events:“How should I write an event handling script?” Event order The boolean value we see in the W3C event listener on the previous slide refers to order of events. W3C Netscape Microsoft

10. Topic 5_3: Interacting with the user Dialog boxes in JavaScript Events in JavaScript What are they “Which events are there?” “How do I register event handlers to an HTML element?” “Once I have successfully accessed the event, how do I read out its properties? Events:“How should I write an event handling script?” What is the type of the event? Which key is being pressed?