2. WDMD 170 – UW Stevens Point 1 WDMD 170 Internet Languages eLesson: Variables, Functions and Events (NON-Audio version) © Dr. David C. Gibbs 2003-04 WDMD 170 – UW Stevens Point

3. 2 Tutorial 2 Variables, Functions, and Events Section B – Using Events

4. WDMD 170 – UW Stevens Point 3 Tutorial 2B Topics Section B – Using Events –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

5. WDMD 170 – UW Stevens Point 4 Events Understanding Events –Events are actions that occur usually as a result of something the user does. –Quick examples: clicking a button is an event changing a text field moving the mouse over a hyperlink. –Event handlers, such as onChange and onClick, to make your script react to events. specific JavaScript code in response to a given situation

6. WDMD 170 – UW Stevens Point 5 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 –e.g., unload event  when the document is unloaded from the browser

7. WDMD 170 – UW Stevens Point 6

8. 7 Input Events In a given web page, there are a LOT of events going on! Check out this example of input events.example of input events As a programmer, you need to learn how to handle the events associated with your task.

9. WDMD 170 – UW Stevens Point 8 HTML Tags and Events HTML elements allow user to trigger events – tag Creates input fields that interact with users Syntax: Type attribute determines the type of input field – creates a text field Name attribute assigns a unique name to the element that JavaScript can use to reference it

10. WDMD 170 – UW Stevens Point 9 tag Used to gather information on a web form. Must be embedded between … tags Here is a more complete example: <input type= " text " many types possible value= " default text " the initial value name= " txtInput " a unique name onBlur= " alert(this.value); " /> an event handler NOTE: this should all be on one line! (Separately displayed here for clarity.)

11. WDMD 170 – UW Stevens Point 10 eTask 1: Copy this code into the body section of an HTML document. Save this file as “inputTypeText.htm”. (NOTE: the input tag should all be on one line) Click inside the text box; type something in – like “JavaScript RULES!”. Click outside the text box. Anywhere will do – you are trying to trigger the Blur event.

12. WDMD 170 – UW Stevens Point 11

13. WDMD 170 – UW Stevens Point 12

14. WDMD 170 – UW Stevens Point 13 Event Handlers Code that executes in response to a specific event SYNTAX: – Event handler naming convention –Event name with a prefix of “on” –e.g., onClick –

15. WDMD 170 – UW Stevens Point 14 eTask 2: Copy this code into the body section of an HTML document. (NOTE: the input tag should all be on one line) Save this file as “inputTypeButton.htm”. View the page. Click the button. What is the event? What is the name of the “event handler?”

16. WDMD 170 – UW Stevens Point 15 List of Events and Event Handlers Events are things like click, focus, blur, change, mouseout, mouseover, load, unload… Event handlers are named “onEvent”, such as onClick, onFocus, onBlur, onChange, etc. The JavaScript Guide (jshtm.zip file) has a nice summary of events and their corresponding event handlers.jshtm.zip summary of events

17. WDMD 170 – UW Stevens Point 16 Wait a minute! Q: What’s this “alert” thing? A: a JavaScript method (function) that displays a dialog box with a message and an OK button. Let’s practice reading a “reference” guide. Here’s the JSHTM spiel on alert.JSHTM spiel on alert Read their description and use the back-button to return.

18. WDMD 170 – UW Stevens Point 17 Wait another minute! Q: What’s this “prompt” thing? A: This time let’s go straight to the guide for a description of prompt. description of prompt Once again, read their description and use the back- button to return.

19. WDMD 170 – UW Stevens Point 18 And… as long as we’re in the mode of looking up JS methods… Q: How about “confirm”?confirm Once again, read their description and use the back-button to return. Each of these methods will be used in future programming.

20. WDMD 170 – UW Stevens Point 19 Methods (or functions): alert, prompt, confirm REVIEW: There are two types of functions: those that do something; those that return something. Does alert() return anything? Does prompt() return anything? Does confirm() return anything? ANSWERS: No, yes, yes. Notice how that difference plays out in the next eTask.

21. WDMD 170 – UW Stevens Point 20 eTask 3 Refer to the instructions on pages 86-8 (Gosselin). Create the file GreetVisitor.htm and save it in your Tutorial02 folder. Preview the.htm file. In step 16, simply click on the browser’s Home Page icon to force the unload event to occur.

22. WDMD 170 – UW Stevens Point 21 Link tags Links –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 to process a URL

23. WDMD 170 – UW Stevens Point 22 Review of link tags Links –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

24. WDMD 170 – UW Stevens Point 23 Using Link 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 Can use built-in confirm() method to generate Boolean value

25. WDMD 170 – UW Stevens Point 24

26. WDMD 170 – UW Stevens Point 25 Other Events associated with Links 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

27. WDMD 170 – UW Stevens Point 26 onClick, onMouseOver, onMouseOut events <A HREF = "GreenPage.html" onClick = "return confirmPageChange();" onMouseOver = "status ='This link opens the green page'; return true;" onMouseOut = "status ='You did not open the green page!!'; return false;"> Click here to open the green page

28. WDMD 170 – UW Stevens Point 27 eTask 4 Refer to the instructions on pages 93-4 (Gosselin). Create the files RedPage.htm and GreenPage.htm as described. Open either one.

29. WDMD 170 – UW Stevens Point 28 Using Events in an Image Map Creating an Image Map –An image divided into regions Each region associated with URL via the tag Use,, and tags to create an image map Areas are divided using pixel coordinates of image –Picture elements

30. WDMD 170 – UW Stevens Point 29

31. WDMD 170 – UW Stevens Point 30 Type of Image Maps Two basic types –Client-side Part of an HTML document –Server-side Code resides on a web server

32. WDMD 170 – UW Stevens Point 31 Creating an Image Map in an HTML Document 1. Place image in document using tag –Use usemap attribute to reference image map by name 2. Define image map using tag –Use name attribute to give map a name

33. WDMD 170 – UW Stevens Point 32 Creating an Image Map in an HTML Document (2) 3. Define image map regions using tag –Use shape attribute to specify shape of region rect, circle, poly <area href=“baseball.html” shape=“rect” coords=“0,0,150,125” onMouseOver=“status=‘Baseball Web Page’;return true;” onMouseOut=“status=‘’;return true;”>

34. WDMD 170 – UW Stevens Point 33

35. WDMD 170 – UW Stevens Point 34

36. WDMD 170 – UW Stevens Point 35 eTask 5 Refer to the instructions on pages 99-102 (Gosselin). Create and save the image map file ShowCountry.htm This one is tough! You’ll probably develop a question to post in your eReview discussion group.

37. WDMD 170 – UW Stevens Point 36 Assignment Exercise #1 page 105 (Gosselin, Tutorial 02B) Complete the exercise and attach the file in a post to your eReview discussion group. Describe any difficulties you might have had in completing the problem. Please do not copy it to your web page until one week later.

38. WDMD 170 – UW Stevens Point 37 Assignment Exercise #5 page 106 (Gosselin, Tutorial 02B) Complete the exercise and attach the file in a post to your eReview discussion group. Describe any difficulties you might have had in completing the problem. Please do not copy it to your web page until one week later.

39. WDMD 170 – UW Stevens Point 38 End of eLesson Jump to the Beginning of this eLesson WDMD 170 Course Schedule D2L Courseware Site