Events Comp 205 Fall 2017.

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

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

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

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

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

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

Event Handlers (Cont.) 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">  </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">  </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

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

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

Using Events Links: review Two types of URL Absolute Refers to the specific location of the document 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

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

Using Events Examples: warnuser.html confirmLinks.html redPage.html 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

Using Events Links Events MouseOver event to change the status bar: onMouseOver = “window.status = ‘testing, testing, testing….’” 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

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

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

Using Events Examples: testStatusBar.html CorrectStatus.html BodyParts.html 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

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

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

Image Maps next slide: use image map with mouseOver event Change status bar when mouseOver 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

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

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

Events Comp 205 Fall 2017.

Similar presentations

Presentation on theme: "Events Comp 205 Fall 2017."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Events Comp 205 Fall 2017.

Similar presentations

Presentation on theme: "Events Comp 205 Fall 2017."— Presentation transcript:

Similar presentations

About project

Feedback