Events Comp 205 Fall 2017
JavaScript, Third Edition 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
JavaScript, Third Edition 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
JavaScript, Third Edition 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
Understanding Events (Cont.) JavaScript, Third Edition
JavaScript, Third Edition 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
JavaScript, Third Edition 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
JavaScript, Third Edition 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
JavaScript, Third Edition Event Handlers (Cont.) JavaScript, Third Edition
JavaScript, Third Edition 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
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> When the click event is triggered, the function putWelcome() is called JavaScript, Third Edition
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> The same function can be used for multiple buttons JavaScript, Third Edition
JavaScript, Third Edition 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
Example: prompt2.html Note that html commands can be used in the writeln function <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> When the button is clicked, putWelcome is called putWelcome returns a string which is stored in the variable theName the variable theName is used in another statement in the event handler. JavaScript, Third Edition
JavaScript, Third Edition 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
JavaScript, Third Edition 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
JavaScript, Third Edition 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
First warnUser is called warnUser puts up a prompt box. If the user clicks “ok”, the prompt returns true, otherwise returns false 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. To browser the value that the prompt returned (true or false) is then returned to the event handler. This statement is executed when the click event is triggered. JavaScript, Third Edition
JavaScript, Third Edition
JavaScript, Third Edition Using Events Examples: warnuser.html confirmLinks.html redPage.html JavaScript, Third Edition
JavaScript, Third Edition 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
JavaScript, Third Edition Using Events Links Events MouseOver event to change the status bar: onMouseOver = “window.status = ‘testing, testing, testing….’” JavaScript, Third Edition
JavaScript, Third Edition 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
JavaScript, Third Edition 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
JavaScript, Third Edition 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
JavaScript, Third Edition Using Events Examples: testStatusBar.html CorrectStatus.html BodyParts.html JavaScript, Third Edition
JavaScript, Third Edition 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
JavaScript, Third Edition
JavaScript, Third Edition 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
JavaScript, Third Edition 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
JavaScript, Third Edition
JavaScript, Third Edition Image Maps next slide: use image map with mouseOver event Change status bar when mouseOver JavaScript, Third Edition
JavaScript, Third Edition
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> The image is given the name northAmerica The function change_image is called and the value alaska.gif is passed to the function. This event is triggered when the mouse is placed over the image. JavaScript, Third Edition
JavaScript, Third Edition 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> 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. 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. 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 JavaScript, Third Edition
JavaScript, Third Edition Using Events Examples: ShowCountry.html ShowAnimal.html ShowAnimal2.html (uses functions) FamilyImageMap.html JavaScript, Third Edition