CS101 Introduction To Computing: (Web Development Lecture 11)
CS101 Introduction To Computing: (Web Development Lecture 11)
CS101 Introduction To Computing: (Web Development Lecture 11)
Lecture 32
Event Handling (Web Development Lecture 11)
1
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
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
Pair of parenthesis Function arguments separated by commas Function definition enclosed in a pair of curly braces
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
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
prop 3
prop 4
prop 5
prop 7
11
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
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
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 clicked if the From text field is left blank
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
24
25
26
function checkForm() { if ( document.sendEmail.sender.value.length < 1) { window.alert( Empty From field! Please correct ); } }
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
29
30
onClick=vuWindow()
31
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
onBlur executes the specified JavaScript code when a window loses focus or a form element loses focus
34
35
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:
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> 37 </TABLE></FORM></BODY></HTML>
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 40 </BODY></HTML>
<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 41 </BODY></HTML>
43
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
onmouseclick
ONMOUSECLICK
47