CS101 Introduction to Computing

Lecture 32
Event Handling
(Web Development Lecture 11)

1
During the last lecture we discussed
Functions & Variable Scope
We looked at functions and their use for
solving simple problems

We became familiar with a couple of

JavaScripts built-in functions

We became familiar with the concept of local

and global variables
2
 Function

A group of statements that is put together

(or defined) once and then can be used
(by reference) repeatedly on a Web page

Also known as subprogram, procedure,

subroutine

3
 Advantages of Functions
Number of lines of code is reduced

Code becomes easier to read & understand

Code becomes easier to maintain as changes

need to be made only at a single location
instead multiple locations

4
 Pair of
Keyword
parenthesis
Function
Function Function arguments definition
identifier separated by commas enclosed
in a pair
of curly
function writeList( heading, words ) { braces

document.write( heading + "<BR>" ) ;

for ( k = 0 ; k < words.length ; k = k + 1 ) {

document.write( words[ k ] + "<BR>" ) ;
}
}
5
 Arguments of a Function
A comma-separated list of data

Arguments define the interface between the

function and the rest of the Web page

Arguments values are passed to the

function by value (some popular languages
pass arguments by reference as well)

6
To ensure that a function is defined
before it is called up, define all
functions in the HEAD portion of Web
pages

7
 Two Ways of Calling Functions
function popUp( message ) { A function call
appearing as a
window.alert( message ) ;
complete
} statement
popUp( Warning! ) ;
A function call
function add( a, b ) { appearing as part
of a statement.
c=a+b; Definitions of
return c ; such functions
} include a return
sum = add( 2, 4 ) ; statement
document.write( sum ) ; 8
What Would this Statement Do?

factorial( factorial ( 3 ) ) ;

This is termed as the

recursive
use of a function
9
 Methods

Methods are functions

They are unusual in the sense that they

are stored as properties of objects

10
 Object: A named collection of properties

A collection
All objects have the
of properties
name property: it
holds the name of
the object (collection)

name prop 8
prop 1
prop 3 prop 5
prop 2
prop 6 prop 4 prop 7
11
Predefined, Top-Level or Built-In Functions

Event handlers are not the only functions that

come predefined with JavaScript. There are
many others.

Practically, there is no difference between

predefined functions and those that are defined
by the programmer (termed as user-defined or
custom functions)

There are many of them, but here we discuss

only two: parseInt( ), parseFloat( )12
 Local Variables
Declaring variables (using the var
keyword) within a function, makes them
local

They are available only within the

function and hold no meaning outside of
it

13
 Local vs- Global
Global variables can make the logic of a Web
page difficult to understand

Global variables also make the reuse and

maintenance of your code much more difficult

HEURISTIC:
If its possible to
define a variable
as local, do it! 14
 Event Handlers
Special-purpose functions that come
predefined with JavaScript

They are unusual in the sense that they are

mostly called from the HTML part of a Web
page and not the <SCRIPT> </SCRIPT> part

15
 Todays Goal:
Event Handlers

To become able to appreciate the concept of

event handlers:
What are they?
What do they do?
How do we benefit from them?

To learn to write simple programs that use

event handlers
16
 What is Event Handling?
Capturing events and responding to them

The system sends events to the program and

the program responds to them as they arrive

Events can include things a user does - like

clicking the mouse - or things that the system
itself does - like updating the clock. Today we
will exclusively focus on user-events
17
 Event Driven Programs
Programs that can capture and respond to
events are called event-driven programs

JavaScript was specifically designed for writing

such programs

Almost all programs written in JavaScript are

event-driven

18
 JavaScript Handling of Events
Events handlers are placed in the BODY part of
a Web page as attributes in HTML tags

Events can be captured and responded to

directly with JavaScript one-liners embedded in
HTML tags in the BODY portion

Alternatively, events can be captured in the

HTML code, and then directed to a JavaScript
function for an appropriate response
19
Lets now revisit lecture 15 where we
introduced event handlers for the first
time

20
21
<INPUT
type=submit
name=sendEmail
value=Send eMail
onMouseOver=
if (document.sendEmail.sender.value.length < 1)
window.alert(Empty From field! Please correct)
>

Additional JavaScript code for the smart Send

eMail button that does not allow itself to be
22 blank
clicked if the From text field is left
That was event handling through
what we may call in-line JavaScript

That is, the event was captured and

handled with a JavaScript one-liner
that was embedded in the HTML tag

23
In-Line JavaScript Event Handling (1)
Event handlers are placed in the BODY portion
of a Web page as attributes of HTML tags

The event handler attribute consists of 3 parts:

1. The identifier of the event handler
2. The equal sign
3. A string consisting of JavaScript statements
enclosed in double or single quotes

24
In-Line JavaScript Event Handling (2)
Multiple JavaScript statements (separated by
semicolons) can be placed in that string, but all
have to fit in a single line; no newline
characters are allowed in that string

Due to this limitation, sophisticated event

handling is not possible with in-line event
handling

25
Another - more sophisticated - way of
accomplishing the same task

26
JavaScript that goes between the <SCRIPT>, </SCRIPT> tags:

function checkForm() {
if ( document.sendEmail.sender.value.length < 1) {
window.alert( Empty From field! Please correct );
}
}

JavaScript included as an attribute of the Send eMail button:

onMouseOver=checkForm( )

27
 Usage Guideline
For very short scripts, all code in the tag
works well

The code in the HEAD portion is the right

choice for developing larger JavaScript scripts
It makes the code easier to read
It allows the reuse of a function for multiple event
handlers

28
Another event-handling example; this
time from lecture 18

29
30
JavaScript that goes between the <SCRIPT>, </SCRIPT> tags:

function vuWindow() {
window.open(http://www.vu.edu.pk/) ;
}

JavaScript included as an attribute of the New Window button:

onClick=vuWindow()

31
A Few of My Favorite Event Handlers

onClick
onDblClick
onMouseOver
onMouseDown
onFocus onBlur
onReset
onSubmit
onLoad
onUnload
32
There are many more: there is an
expanded, but still incomplete list in
your book

Now lets look at some of these error

handlers in a bit more detail

33
 onFocus & onBlur
onFocus executes the specified JavaScript
code when a window receives focus or when a
form element receives input focus

onBlur executes the specified JavaScript code

when a window loses focus or a form element
loses focus

34
35
JavaScript that goes between the <SCRIPT>, </SCRIPT> tags:

function checkAge( ) {
if( parseInt( document.form1.age.value ) < 12 ) {
window.alert( "Stop! You are younger than 12" ) ;
}
}

JavaScript included as an attribute of the INPUT tag:

<INPUT type="text" name="age"

onBlur="checkAge( ) "
> 36
<HTML><HEAD>
<TITLE>onBlur( ) Demo</TITLE>
<SCRIPT>
function checkAge() {
if( parseInt(document.form1.age.value) < 12) {
window.alert("Stop! You are younger than 12" ) ;
}
}
</SCRIPT></HEAD>
<BODY bgcolor="#66FFCC">
<FORM name="form1" method="post" action="">
<TABLE border="1">
<TR> <TD>Age</TD>
<TD><INPUT type="text" name="age" onBlur="checkAge()">
</TD></TR><TR> <TD>Phone Number</TD>
<TD><INPUT type="text" name="phNo"></TD>
</TR><TR> <TD><INPUT type="reset" value="Reset"></TD>
<TD><INPUT type="submit" value="Submit"></TD></TR>
</TABLE></FORM></BODY></HTML> 37
 onLoad & onUnload
onLoad executes the specified JavaScript code
when a new document is loaded into a window

onUnload executes the specified JavaScript

code when a user exits a document

What is the key difference between these 2 and

the 4 event handlers (onMouseOver, onClick,
onFocus, onBlur) that we have used so far?
38
http://www.vu.edu.pk/
onUnloadDemo.htm

39
<HTML>
<HEAD>
<TITLE>onUnload Demo</TITLE>
<SCRIPT>
function annoyUser( ) {
currentUrl = window.location ;
window.alert( "You can't leave this page" ) ;
window.location = currentUrl ;
}
</SCRIPT></HEAD>
<BODY onUnload="annoyUser( )">
This page uses the onUnload event handler
</BODY></HTML> 40
<HTML>
<HEAD>
<TITLE>onUnload Demo</TITLE>
<SCRIPT>
function annoyUser( ) {
currentUrl = window.location ;
window.alert( "You can't leave this page" ) ;
window.location = currentUrl ;
}
</SCRIPT></HEAD>
<BODY onUnload="annoyUser( )">
This page uses the onUnload event handler
</BODY></HTML> 41
 More Uses for onLoad/onUnload?
onLoad can be used to open multiple Windows
when a particular document is opened

onUnload can be used to say Thank you for

the visit when a user is leaving a Web page

At times, a user opens multiple inter-dependent

windows of a Web site (e.g. VULMS).
onUnload can be used to warn that all child
Windows will become inoperable if the user
closes the parent Window 42
 A Note on Syntax (1)
Mixed-case capitalization of event handlers
(e.g. onClick) is a convention (but not a
requirement) for JavaScript event handlers
defined in HTML code. Using ONCLICK or
onclick as part of a an HTML tag is perfectly
legal as well

43
 A Note on Syntax (2)
At times, you may wish to use event handlers in
JavaScript code enclosed in <SCRIPT>,
</SCRIPT> tags

In those cases you have to strictly follow the

JavaScript rule for all event handler identifiers:
they must all be typed in small case, e.g.
onclick or onmouseover

44
A misleading statement from Lecture 18
I stated:
JavaScript is case sensitive. Only the first of the
following will result in the desired function the rest
will generate errors or other undesirable events:
onMouseClick OnMouseClick
onmouseclick ONMOUSECLICK

That statement is incorrect in two ways:

1. All four will work fine as part of HTML tags
2. Only the all small case version will be interpreted
as intended in JavaScript code 45
 During Todays Lecture
We looked at the concept of event-driven
programs and event handlers
What are they?
What do they do?
How do we benefit from them?

We wrote simple programs to demonstrate the

capabilities of a few event handlers

46
 Next (the 12 ) Web Dev Lecture:
th

Mathematical Methods
Well look at JavaScripts Math object

We will produce solutions for simple problems

using various methods of the Math object

47