![5
function writeList( heading, words ) {
document.write( heading + "<BR>" ) ;
for ( k = 0 ; k < words.length ; k = k + 1 ) {
document.write( words[ k ] + "<BR>" ) ;
}
}
Keyword
Function
identifier
Pair of
parenthesis
Function ‘arguments’
separated by commas
Function
definition
enclosed
in a pair
of curly
braces](https://image.slidesharecdn.com/javascript-event-handling-240304030619-842096e4/85/javascript-Event-Handling-and-introduction-to-event-ppt-5-320.jpg)
javascript Event Handling and introduction to event.ppt
- 1. 1 CS101 Introduction to Computing Lecture 32 Event Handling (Web Development Lecture 11)
- 2. 2 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 JavaScript’s built-in functions • We became familiar with the concept of local and global variables
- 3. 3 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
- 4. 4 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
- 5. 5 function writeList( heading, words ) { document.write( heading + "<BR>" ) ; for ( k = 0 ; k < words.length ; k = k + 1 ) { document.write( words[ k ] + "<BR>" ) ; } } Keyword Function identifier Pair of parenthesis Function ‘arguments’ separated by commas Function definition enclosed in a pair of curly braces
- 6. 6 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)
- 7. 7 To ensure that a function is defined before it is called up, define all functions in the HEAD portion of Web pages
- 8. 8 Two Ways of Calling Functions function add( a, b ) { c = a + b ; return c ; } sum = add( 2, 4 ) ; document.write( sum ) ; function popUp( message ) { window.alert( message ) ; } popUp( “Warning!” ) ; A function call appearing as part of a statement. Definitions of such functions include a ‘return’ statement A function call appearing as a complete statement
- 9. 9 What Would this Statement Do? factorial( factorial ( 3 ) ) ; This is termed as the recursive use of a function
- 10. 10 Methods • Methods are functions • They are unusual in the sense that they are stored as properties of objects
- 11. 11 Object: A named collection of properties prop 1 prop 2 prop 5 name prop 3 prop 4 A collection of properties All objects have the “name” property: it holds the name of the object (collection) prop 7 prop 6 prop 8
- 12. 12 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( )
- 13. 13 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
- 14. 14 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 it’s possible to define a variable as local, do it!
- 15. 15 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
- 16. 16 Today’s 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
- 17. 17 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
- 18. 18 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
- 19. 19 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
- 20. 20 Let’s now revisit lecture 15 where we introduced event handlers for the first time
- 21. 21
- 22. 22 <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 clicked if the “From” text field is left blank
- 23. 23 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
- 24. 24 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
- 25. 25 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
- 26. 26 Another - more sophisticated - way of accomplishing the same task
- 27. 27 onMouseOver=“checkForm( )” JavaScript that goes between the <SCRIPT>, </SCRIPT> tags: JavaScript included as an attribute of the “Send eMail” button: function checkForm() { if ( document.sendEmail.sender.value.length < 1) { window.alert( “Empty From field! Please correct” ); } }
- 28. 28 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
- 29. 29 Another event-handling example; this time from lecture 18
- 30. 30
- 31. 31 onClick=“vuWindow()” JavaScript that goes between the <SCRIPT>, </SCRIPT> tags: JavaScript included as an attribute of the “New Window” button: function vuWindow() { window.open(“http://www.vu.edu.pk/”) ; }
- 32. 32 A Few of My Favorite Event Handlers onClick onDblClick onMouseOver onMouseDown onFocus onBlur onReset onSubmit onLoad onUnload
- 33. 33 There are many more: there is an expanded, but still incomplete list in your book Now let’s look at some of these error handlers in a bit more detail
- 34. 34 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
- 35. 35
- 36. 36 <INPUT type="text" name="age" onBlur="checkAge( ) " > JavaScript that goes between the <SCRIPT>, </SCRIPT> tags: JavaScript included as an attribute of the INPUT tag: function checkAge( ) { if( parseInt( document.form1.age.value ) < 12 ) { window.alert( "Stop! You are younger than 12" ) ; } }
- 37. 37 <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>
- 38. 38 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?
- 39. 39 onUnloadDemo.htm onUnloadDemo.htm http://www.vu.edu.pk/ onUnloadDemo.htm
- 40. 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. 41 <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>
- 42. 42 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
- 43. 43 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
- 44. 44 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’
- 45. 45 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
- 46. 46 During Today’s 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
- 47. 47 Next (the 12th) Web Dev Lecture: Mathematical Methods • We’ll look at JavaScript’s Math object • We will produce solutions for simple problems using various methods of the Math object