handling events ii 27th april 2011. introduction event model events event handling navigation events...
Post on 21-Dec-2015
218 views
TRANSCRIPT
Handling Events IIHandling Events II
27th April 2011
IntroductionIntroduction
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 lectureLast week’s lecture
IntroductionIntroduction
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 ReminderEvent 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 <a href =“www.neu.edu” onClick =“alert(‘Hello’)”>
Event handlers can be written as: Inline script: JavaScript code is included inside XHTML tag Function call: event handlers are written as functions in <script>
tag and called from the XHTML tag
Event ModelEvent Model
Navigation ElementsNavigation 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 ElementsNavigation Elements click event of <a>
Navigation Elements: Navigation Elements: CodeCode click event of <a>
<html><head>
<title>Divisible By Number</title><script language="javascript">
//define event handlerfunction 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()</script>
</head><body>
<a href="http://www.amazon.com" onClick="alert('Welcome!'), sale()">Get 30% off any purchase today</a></body>
</html> inlineinline Function callFunction call
Web Pages On-the-FlyWeb 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-FlyWeb Pages On-the-Fly
Create a web page on-the-fly using JavaScript program
Web Pages On-the-FlyWeb Pages On-the-Fly Create a web page on-the-fly using JavaScript program<html>
<head><title>Two Web Pages in One</title><script language="javascript">
//create a Web page on-the-flyfunction newCooking() {
page = "<html>";page += "<head>";page += "<title>Web page on-the-fly</title>";page += "</head>";page += "<body>";page += "<h2 align='center'><div>We hope you like our
Pizza.</div><div>We spent a year developing the recipe.</div><h2>";page += "</body>";page += "</html>";document.write (page);
} //newCooking()</script>
</head><body>
<a href="#" onClick="newCooking()">Try our new Pizza</a><div>This Web page uses a Web page on-the-fly.</div><div>When you click the above link, the other page displays.</div><div>Click the browser Back button to come back to this page</div>
</body></html> Page 1Page 1
Page 2Page 2
Web Pages ContextWeb 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 ContextWeb Pages Context
Web Pages ContextWeb Pages Context<html><html>
<head><head><title>Webpage Context</title><title>Webpage Context</title><script language="javascript"><script language="javascript">
//create a Web page on-the-fly//create a Web page on-the-flyfunction newCooking() {function newCooking() {
page = "<html>";page = "<html>";page += "<head>";page += "<head>";page += "<title>Web page on-the-fly</title>";page += "<title>Web page on-the-fly</title>";page += "<script language='javascript'>";page += "<script language='javascript'>";page += "function newChef(name){";page += "function newChef(name){";page += "alert('Our new Chef ' + name + ' invented the recipe')";page += "alert('Our new Chef ' + name + ' invented the recipe')";page += "} //newChef()";page += "} //newChef()";//must escape "/" by using "\"//must escape "/" by using "\"page += "<\/script>";page += "<\/script>";page += "</head>";page += "</head>";page += "<body>";page += "<body>";page += "<h2 align='center'><div>We hope you like our Pizza.</div><div>page += "<h2 align='center'><div>We hope you like our Pizza.</div><div>We spent a year developing the recipe.</div><h2>";We spent a year developing the recipe.</div><h2>";page += "</body>";page += "</body>";page += "</html>";page += "</html>";document.write (page);document.write (page);
} //newCooking()} //newCooking()</script></script></head></head><body><body><a href="#" onClick="newCooking(), newChef('Abe')">Try our new Pizza</a><a href="#" onClick="newCooking(), newChef('Abe')">Try our new Pizza</a></body></body>
</html></html>
Nested Web Pages on-the-Nested Web Pages on-the-flyfly 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-Nested Web Pages on-the-flyfly Two-level nesting of web pages
Nested Web Pages on-the-Nested Web Pages on-the-flyflyfunction firstPage(){
……page += "function secondPage(){";……page += "} //secondPage()";……page += "<body>";page += "<h1>This is the first Web page on-the-fly</h1>";page += "</body>";page += "<a href='#' onClick='secondPage()'>";page += "Open the Second Web page on-the-fly</a>";page += "</html>";document.write(page);document.close();
} //firstPage()…..<a href="#" onClick="firstPage()">Open the first Web page on-the-fly</a>
Disabling ActionsDisabling 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 ActionsDisabling Actions
Disabling ActionsDisabling Actions<script language="javascript"><script language="javascript"> function function checkIt(balance){checkIt(balance){
if (balance >= 0){if (balance >= 0){alert("Thank you!\nProceed to register.");alert("Thank you!\nProceed to register.");return true;return true;
} //if} //ifelse {else {
alert("Sorry! You owe money.\nYou cannot register.");alert("Sorry! You owe money.\nYou cannot register.");return false;return false;} //else} //else
} //checkIt()} //checkIt()
</script></script>…………..<body><body><h1>Check if you can register for courses</h1><h1>Check if you can register for courses</h1><div><a href="http://www.neu.edu" onClick="<div><a href="http://www.neu.edu" onClick="return(checkIt(200))return(checkIt(200))">">Positive Positive
balance</a></div>balance</a></div><div><a href="http://www.neu.edu" onClick="<div><a href="http://www.neu.edu" onClick="return(checkIt(-return(checkIt(-
200))200))">Negative balance</a></div>">Negative balance</a></div></body></body>
Reference 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