1 / 36

JavaScript Events and Handlers

Learn about JavaScript events and how to use event handlers to respond to user actions. Understand the different types of events and their associated functions.

lamere
Download Presentation

JavaScript Events and Handlers

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Events Comp 205 Fall 2017

  2. Objectives • About events • About HTML tags and events • How to use event handlers • About links • How to use link events • How to create an image map JavaScript, Third Edition

  3. Understanding Events • Event: • Specific circumstance monitored by JavaScript and that your script can respond to in some way, or • A trigger that fires specific JavaScript code in response to a given situation • e.g., an action that a user takes JavaScript, Third Edition

  4. Understanding Events • Events • Two basic types • User-generated events • e.g., mouse-click • System-generated events • e.g., load event  triggered by web browser when HTML document finishes loading JavaScript, Third Edition

  5. Understanding Events (Cont.) JavaScript, Third Edition

  6. Elements and Events • Events: • Associated with XHTML elements • Events available to an element vary: • Click event available for the <a> element and from controls created with the <input> element • In comparison, the <body> element does not have a click event, but does have a load event JavaScript, Third Edition

  7. Event Handlers • Event handler: • Code that executes in response to a specific event • Code is included as an attribute of the element that initiates the event • Syntax of an event handler within an element is: • <element event_handler ="JavaScript code"> • Event handler names are case sensitive: • Must be written using all lowercase letters in order for a document to be well formed • However, most JS interpreters will ignore capitalization. JavaScript, Third Edition

  8. Event Handlers • Event handler naming convention • Event name with a prefix of “on” • E.g., onClick <input type=“button” onClick=“alert(‘You clicked the button!’)”> JavaScript, Third Edition

  9. Event Handlers (Cont.) JavaScript, Third Edition

  10. Using Events • Event Handlers and functions • Can use an event handler to call a function • Allows one set of code to be used in many event handlers. JavaScript, Third Edition

  11. When the click event is triggered, the function putWelcome() is called Example: prompt.html <html> <head> <title>Prompt Box</title> <script type = "text/javascript"> <!-- document.writeln( "<h1>Welcome to JavaScript Programming!</h1>" ); function putWelcome() { var myName=prompt("What's your name?"); confirm("Is your name really " + myName + "?"); } // --> </script> </head> <body> <button name="tryMe" type="button" onClick="putWelcome(); "> Click Me!</button> </body> </html> JavaScript, Third Edition

  12. The same function can be used for multiple buttons Example: prompt.html <html> <head> <title>Prompt Box</title> <script type = "text/javascript"> <!-- document.writeln( "<h1>Welcome to JavaScript Programming!</h1>" ); function putWelcome() { var myName=prompt("What's your name?"); confirm("Is your name really " + myName + "?"); } // --> </script> </head> <body> <button name="tryMe" type="button" onClick="putWelcome(); ">Click Me!</button> <button name="tryMe2" type="button" onClick="putWelcome(); ">Click Me too!</button> <button name="tryMe3" type="button" onClick="putWelcome(); ">Also click Me!</button> </body> </html> JavaScript, Third Edition

  13. Using Events • Event Handlers and functions • May have multiple javaScript statements in a single event handler. • May also return information from a function to an event handler. JavaScript, Third Edition

  14. Note that html commands can be used in the writeln function putWelcome returns a string which is stored in the variable theName When the button is clicked, putWelcome is called the variable theName is used in another statement in the event handler. Example: prompt2.html <html> <head> <title>Prompt Box</title> <script type = "text/javascript"> document.writeln("<h1>Welcome to JavaScript Programming!</h1>" ); function putWelcome() { var myName=prompt("What's your name?", "John"); confirm("Is your name really " + myName + "?"); // document.writeln("hello " + myName); return myName; } </script> </head> <body> <button name="tryMe" type="button" onClick="var theName = putWelcome(); document.writeln('<h1>Hello ' + theName + '</h1>');"> Click Me!</button> </body> </html> JavaScript, Third Edition

  15. Using Events • Links: review • Used to open files or navigate to other documents on the web • Text or image used to represent a link in an HTML document is called an anchor • Use anchor tag <a> to process a URL JavaScript, Third Edition

  16. Using Events • Links: review • Two types of URL • Absolute • Refers to the specific location of the document • http://www.site.com/index.html • C:\webpages\homepage.html • Relative • Refers to location of document according to the location of currently loaded document • /subdirectory/otherpage.html • Increases portability of web site JavaScript, Third Edition

  17. Using Events • Links Events • Primary event is the click event • For default operation, no event handler is required • Overriding the default click event • Add onClick event handler that executes custom code • Event handler must return true or false • true means to continue to follow the link • false means to cancel the link • Can use built-in confirm() method to generate Boolean value JavaScript, Third Edition

  18. warnUser puts up a prompt box. If the user clicks “ok”, the prompt returns true, otherwise returns false To browser the value that the prompt returned (true or false) is then returned to the event handler. First warnUser is called Finally, the event handler returns the value that it received from warnUser to the browser and this determines whether the link is followed or not. This statement is executed when the click event is triggered. JavaScript, Third Edition

  19. JavaScript, Third Edition

  20. Using Events • Examples: • warnuser.html • confirmLinks.html • redPage.html JavaScript, Third Edition

  21. Using Events • Links Events • Other events: • MouseOver event • Occurs when the mouse moves over a link • MouseOut event • Occurs when the mouse moves off a link • Can be used to change the text that appears in the browser’s status bar • Use JavaScript status property for the window object JavaScript, Third Edition

  22. Using Events • Links Events • MouseOver event to change the status bar: onMouseOver = “window.status = ‘testing, testing, testing….’” JavaScript, Third Edition

  23. Using Events • Links Events • MouseOver event to change the status bar: • Note that some browsers don’t handle onMouseOver changes to the status bar from inside image maps! JavaScript, Third Edition

  24. Using Events • onMouseOver • default behavior: display link in status bar • if onMouseOver returns true tells the web browser not to perform default behavior • if onMouseOver returns false, tells the web browser that it should perform default behavior. • backwards from the onClick values! JavaScript, Third Edition

  25. Using Events • default status bar message • the defaultStatus property records the message that will always be displayed in the status bar unless another message is explicitly placed there. <body onLoad=“defaultStatus=‘The Dafoe Family’;”> JavaScript, Third Edition

  26. Using Events • Examples: • testStatusBar.html • CorrectStatus.html • BodyParts.html JavaScript, Third Edition

  27. Using Events • Creating an Image Map: review • An image divided into regions • Each region associated with URL via the <a> tag • Use <img>, <map>, and <area> tags to create an image map • Areas are divided using pixel coordinates of image • Picture elements JavaScript, Third Edition

  28. JavaScript, Third Edition

  29. Using Events • Creating an Image Map • Two basic types • Client-side • Part of an HTML document • Server-side • Code resides on a web server JavaScript, Third Edition

  30. Using Events • Creating an Image Map • Process • Place image in document using <img> tag • Use usemap attribute to reference image map by name • Define image map using <map> tag • Use name attribute to give map a name • Define image map regions using <area> tag • Use shape attribute to specify shape of region • rect, circle, poly JavaScript, Third Edition

  31. JavaScript, Third Edition

  32. Image Maps • next slide: use image map with mouseOver event • Change status bar when mouseOver JavaScript, Third Edition

  33. JavaScript, Third Edition

  34. The image is given the name northAmerica This event is triggered when the mouse is placed over the image. The function change_image is called and the value alaska.gif is passed to the function. Image Maps • Example: changing images with events. <img src=“north_america.gif”usemap=“#northAmerica_map” name=“northAmerica”> <map name=“northAmerica_map”> <area shape=“circle” coords=“44,46,20” nohref onMouseOver=“change_image(‘alaska.gif’);return false” onMouseOut=“reset_image(); return false”> <area shape=“poly” …… rest of html code here ……. </map> JavaScript, Third Edition

  35. We change the src of the image named northAmerica to be the value that was passed into the function The src property or attribute of an image is the file name where the image lives. Every image is an object in the document. You can refer to the image by using the name given to it in the img tag Image Maps • Example: changing images with events. <html> <head> <title>North America</title> <script language=“JavaScript”> <!-- hide from incompatible browsers function change_image(image_name){ document.northAmerica.src = image_name; } function reset_image(){ document.northAmerica.src = “north_america.gif” } </script> </head> The function reset_image changes the image src back to “northamerica.gif”. We could have eliminated this function by calling change_image(“northamerica.gif”) from the onMouseOut event handler in the area tag. JavaScript, Third Edition

  36. Using Events • Examples: • ShowCountry.html • ShowAnimal.html • ShowAnimal2.html (uses functions) • FamilyImageMap.html JavaScript, Third Edition

More Related