1. 1 Goals and Objectives Goals Goals Understand how JavaScript makes it possible to interact with web pages, minimizes client/server traffic, enables verification of user input, and process events generated by the and tags Objectives Objectives Importance of events in web page control Importance of events in web page control Event model Event model Events Events Event handling Event handling and events handling and events handling Web page on-the-fly Web page on-the-fly Disabling XHTML actions Disabling XHTML actions Practice: handle events generated by and tags Practice: handle events generated by and tags

2. 2 Chapter Headlines 1 Introduction 1 Introduction Without JavaScript, your options are limited Without JavaScript, your options are limited 2 Event Model 2 Event Model Full control over web page behavior begins here Full control over web page behavior begins here 3 Events 3 Events Why bother knowing these events? Why bother knowing these events? 4 Event Handling 4 Event Handling We are sure you can handle it We are sure you can handle it 5 Navigation Events 5 Navigation Events Navigate with style Navigate with style

3. 3 Chapter Headlines 6 Web page on-the-fly 6 Web page on-the-fly Web pages can fly too Web pages can fly too 7 Web page Context 7 Web page Context Browsers take it one step at a time Browsers take it one step at a time 8 Nesting Web page on-the-fly 8 Nesting Web page on-the-fly Watch out all these flying zones Watch out all these flying zones 9 Disabling XHTML Actions 9 Disabling XHTML Actions Control what web surfers can do with your web pages Control what web surfers can do with your web pages

4. 4Introduction Events impart ability to interact with web surfers Events impart ability to interact with web surfers Event is an action that occurs as a result of an interaction Event is an action that occurs as a result of an interaction JavaScript due to events and event handling ability minimizes client/server traffic considerably JavaScript due to events and event handling ability minimizes client/server traffic considerably An event handler is the processing of an event to make decisions An event handler is the processing of an event to make decisions Example of interactions that generate events and need event handlers are: Example of interactions that generate events and need event handlers are: Clicking a hyperlink Clicking a hyperlink Clicking a hot spot on an image map Clicking a hot spot on an image map Filling a form Filling a form

5. 5 Event Model Event model is based on interaction between a web surfer and a web page Event model is based on interaction between a web surfer and a web page Events can be classified into two broad groups: Events can be classified into two broad groups: Navigation : clicking on links to browse through web pages Navigation : clicking on links to browse through web pages Filling a form : Entering data and checking form elements Filling a form : Entering data and checking form elements JavaScript event model is based on event object JavaScript event model is based on event object event object connects event source to event handler event object connects event source to event handler When an event occurs, JavaScript sends event object to event handler When an event occurs, JavaScript sends event object to event handler The properties of event object may be: type, target, width, height, layerX, layerY, pageX, pageY,screenX, screenY, data, modifiers, which The properties of event object may be: type, target, width, height, layerX, layerY, pageX, pageY,screenX, screenY, data, modifiers, which

6. 6 Event Model

7. 7 http://www.cs.csubak.edu/~jmoloney/cmps211/JavaScript/Examples/link.html

8. 8Events JavaScript has a unique event for each event source JavaScript has a unique event for each event source Event nameEvent SourceEvent handler abortimageonAbort clicktext field/area, listonChange dragDropwindowonDragDrop errorimage, windowonError keyDowndoc, image, linkonKeyDown keyPressdoc, image, linkonKeyPress mouseMovenothingonMouseMove mouseOutlink, image maponMouseOut mouseOverlink, image maponMouseOver resetform reset buttononReset resizewindowonResize submitform submit buttononSubmit

9. 9 Event Handling Event handlers handle and process events Event handlers handle and process events Event handler is included as an attribute of a XHMTL tag Event handler is included as an attribute of a XHMTL tag www.neu.edu Event handlers must be enclosed in quotes Event handlers must be enclosed in quotes Handlers are executed first, then XHTML content is rendered Handlers are executed first, then XHTML content is rendered Event handlers can be written as: Event handlers can be written as: Inline script  JavaScript code is included inside XHTML tag Inline script  JavaScript code is included inside XHTML tag Function call  event handlers are written as functions in tag and called from the XHTML tag Function call  event handlers are written as functions in tag and called from the XHTML tag Function call style is better than inline style Function call style is better than inline style

10. 10 Navigation Events Navigation events include: Navigation events include: Clicking a hyperlink Clicking a hyperlink Opening a new URL Opening a new URL Quitting a browser window Quitting a browser window Clicking an hyperlink generates the following events Clicking an hyperlink generates the following events click  when the link is clicked click  when the link is clicked mouseOver  when the mouse is moved over the link mouseOver  when the mouse is moved over the link mouseOut  when the mouse is moved away from the link mouseOut  when the mouse is moved away from the link Loading and unloading web pages are also separate events Loading and unloading web pages are also separate events Appropriate event handling grabs attention of the surfer because it makes the page dynamic Appropriate event handling grabs attention of the surfer because it makes the page dynamic

11. 11 http://www.cs.csubak.edu/~jmoloney/cmps211/JavaScript/sale.html http://www.cs.csubak.edu/~jmoloney/cmps211/JavaScript/Examples/sale.html

12. 12 Web pages on-the-fly Web pages can be created in two ways Web pages can be created in two ways Using the server Using the server Using the client Using the client Using the server is not recommended as in increases the server traffic Using the server is not recommended as in increases the server traffic Using the client utilizes the concept of creating web page on-the-fly Using the client utilizes the concept of creating web page 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 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-fly can be used as part of any event handler Web pages on-the-fly can be used as part of any event handler

13. 13 http://www.cs.csubak.edu/~jmoloney/cmps211/JavaScript/Examples/pizza1.html

14. 14 Web page 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 uses web page context to respond to interactions This concept is important when dealing with web pages on-the-fly

15. 15 http://www.cs.csubak.edu/~jmoloney/cmps211/JavaScript/Examples/pizza2.html

16. 16 http://www.cs.csubak.edu/~jmoloney/cmps211/JavaScript//Examples/nestingOTF.html

17. 17 http://www.cs.csubak.edu/~jmoloney/cmps211/JavaScript/nestingOTF.html

18. 18 Disabling XHTML Actions Some XHTML elements have actions associated with them Some XHTML elements have actions associated with them For example: hyperlinks, image maps, and forms For example: hyperlinks, image maps, and forms Without JavaScript, these actions are executed upon clicking Without JavaScript, these actions are executed upon clicking This execution can be made conditional by using event handler functions This execution can be made conditional by using event handler functions If the condition is true execution takes place or else it is stopped If the condition is true execution takes place or else it is stopped

19. 19 http://www.cs.csubak.edu/~jmoloney/cmps211/JavaScript/Examples/courses.html

20. 20Summary JavaScript interacts with surfers through events and event handlers JavaScript interacts with surfers through events and event handlers Event model is based on event object that connects event source with event handler Event model is based on event object that connects event source with event handler JavaScript has an event for each event source JavaScript has an event for each event source Event handlers are functions that process and handle events Event handlers are functions that process and handle events JavaScript also provides navigation events JavaScript also provides navigation events Web pages can be created on-the-fly on client-side itself Web pages can be created on-the-fly on client-side itself Improper web page context may result in errors Improper web page context may result in errors Web pages on-the-fly can be nested Web pages on-the-fly can be nested XHTML actions can be disabled conditionally XHTML actions can be disabled conditionally