Transcript 9.2
Handling Events II
27th April 2011
Introduction
Event Model
Last week’s lecture
Events
Event Handling
Navigation Events
On-the-Fly Web Pages
Web-Page Context
Nesting On-the-Fly Web Pages
Disabling XHTML actions
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:
Event handler is included as an attribute of a XHMTL tag
Navigation: clicking on links to browse through web pages
Filling a form: entering data and checking form elements
<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 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 <a>
Navigation Elements: Code
click event of <a>
<html>
<head>
<title>Divisible By Number</title>
<script language="javascript">
//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()
</script>
</head>
<body>
<a href="http://www.amazon.com" onClick="alert('Welcome!'), sale()">Get 30% off any
purchase today</a>
</body>
Function call
</html>
inline
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 onthe-fly using JavaScript
program
Web Pages On-the-Fly
Create a web page on-the-fly using JavaScript program
<html>
<head>
<title>Two Web Pages in One</title>
Page 2
<script language="javascript">
//create a Web page on-the-fly
function 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>
Page 1
</html>
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
Web Pages Context
<html>
<head>
<title>Webpage Context</title>
<script language="javascript">
//create a Web page on-the-fly
function newCooking() {
page = "<html>";
page += "<head>";
page += "<title>Web page on-the-fly</title>";
page += "<script language='javascript'>";
page += "function newChef(name){";
page += "alert('Our new Chef ' + name + ' invented the recipe')";
page += "} //newChef()";
//must escape "/" by using "\"
page += "<\/script>";
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(), newChef('Abe')">Try our new Pizza</a>
</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 += "<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 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
Disabling Actions
<script language="javascript">
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>
<h1>Check if you can register for courses</h1>
<div><a href="http://www.neu.edu" onClick="return(checkIt(200))">Positive
balance</a></div>
<div><a href="http://www.neu.edu" onClick="return(checkIt(200))">Negative balance</a></div>
</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