Handling Events II 27th April 2011
Introduction Event Model Events Event Handling Navigation Events On-the-Fly Web Pages Web-Page Context Nesting On-the-Fly Web Pages Disabling XHTML actions Last week’s lecture
Introduction What is an event? Give an example. What is an event handler? Give an example. Why are events needed in an XHTML web page? When do we use events most? What can event handlers be written as? Where are they written? What predefined functions have you come across in JavaScript?
Event Model Reminder Events can be classified into two broad groups: Navigation: clicking on links to browse through web pages Filling a form: entering data and checking form elements Event handler is included as an attribute of a XHMTL tag Event handlers can be written as: Inline script: JavaScript code is included inside XHTML tag Function call: event handlers are written as functions in tag and called from the XHTML tag
Event Model
Navigation Elements Navigation group of actions Click a hyperlink Open a new URL Quit the browser Clicking an hyperlink generates the following events: click -> when the link is clicked mouseOver -> when the mouse is moved over the link mouseOut -> when mouse is moved away from the link Loading and unloading web pages are also separate events Appropriate event handling grabs attention of the surfer because it makes the page dynamic
Navigation Elements click event of
Navigation Elements: Code click event of Divisible By Number //define event handler function sale() { str = "We have a 30% off sale today on these items" + "\n"; str += "All shirts and shorts in store" + "\n"; str += "Garden supplies" + "\n"; str += "Swimming pool supplies" + "\n"; str += "Outdoor camping equipment" + "\n"; str += "Beach supplies" + "\n"; alert (str); } //sale() Get 30% off any purchase today inline Function call
Web Pages On-the-Fly Web pages can be created in 2 ways: Using the server Using the client Using the server is not recommended as it increases server traffic Using the client utilises the concept of creating web pages on-the-fly This concept uses two web pages and the second web page is rendered based on the decision taken for event from the first web page Web pages on-the the-fly can be used as part of any event handler
Web Pages On-the-Fly Create a web page on- the-fly using JavaScript program
Web Pages On-the-Fly Create a web page on-the-fly using JavaScript program Two Web Pages in One //create a Web page on-the-fly function newCooking() { page = " "; page += " "; page += " Web page on-the-fly "; page += " "; page += " We hope you like our Pizza. We spent a year developing the recipe. "; page += " "; document.write (page); } //newCooking() Try our new Pizza This Web page uses a Web page on-the-fly. When you click the above link, the other page displays. Click the browser Back button to come back to this page Page 1 Page 2
Web Pages Context A web browser can have only one active web page at a time Any code or handlers that the browser needs must be included in the code of active web page The browsers use web page context to respond to interactions
Web Pages Context
<html><head> Webpage Context Webpage Context //create a Web page on-the-fly function newCooking() { page = " "; page += " "; page += " Web page on-the-fly "; page += " "; page += "function newChef(name){"; page += "alert('Our new Chef ' + name + ' invented the recipe')"; page += "} //newChef()"; //must escape "/" by using "\" page += " "; page += " We hope you like our Pizza. page += " We hope you like our Pizza. We spent a year developing the recipe. "; page += " "; document.write (page); } //newCooking() </script></head><body> Try our new Pizza Try our new Pizza </body></html>
Nested Web Pages on-the-fly We can embed a web page on-the-fly inside a parent web page for any number of levels to create nested web pages We usually do not require more than 2 levels of nesting
Nested Web Pages on-the-fly Two-level nesting of web pages
Nested Web Pages on-the-fly function firstPage(){ …… page += "function secondPage(){"; …… page += "} //secondPage()"; …… page += " "; page += " This is the first Web page on-the-fly "; page += " "; page += "Open the Second Web page on-the-fly "; page += " "; document.write(page); document.close(); } //firstPage() ….. Open the first Web page on-the-fly
Disabling Actions Some XHTML elements have actions associated with them Without JavaScript, these actions are executed upon clicking This execution can be made conditional by using event handler functions If the condition is true execution takes place or else it is stopped
Disabling Actions
function checkIt(balance){ function checkIt(balance){ if (balance >= 0){ alert("Thank you!\nProceed to register."); return true; } //if else { alert("Sorry! You owe money.\nYou cannot register."); return false; } //else } //checkIt() </script>…….<body> Check if you can register for courses Check if you can register for courses Positive balance Positive balance Negative balance Negative balance </body>
Reference Steven M. Schafer (2005), HTML, CSS, JavaScript, Perl, and PHP Programmer's Reference, Hungry Minds Inc,U.S. Dan Cederholm (2005), Bulletproof Web Design: Improving Flexibility and Protecting Against Worst-Case Scenarios with XHTML and CSS, New Riders. Ibrahim Zeid (2004), Mastering the Internet, XHTML, and Javascript