1. JavaScript 101 Lesson 5: Introduction to Events

2. Lesson Topics Event driven programming Events and event handlers The onClick event handler for hyperlinks The onClick event handler for buttons (forms) The mouse event handlers onMouseOver and onMouseOut

3. Event Driven Programming Event driven programs use events as triggers for program execution JavaScript, through event driven programming, can be used to control event driven Web Pages In event driven Web pages, user actions determine the course of code execution

4. Events and Event Handlers Users actions are events and they could include: Clicking a button Moving the mouse pointer over a hyperlink Changing the contents of a text box Entering or leaving a text box Event handlers are the separate sections of code that responds to event

5. Events and Event Handlers (cont.) An event handler is a predefined JavaScript keyword An event handler is a special attribute associated with hyperlinks, buttons and other elements of a web page Events handlers always begin with on Examples are: onClick onMouseOver onMouseOut

6. The onClick Event Handler for Hyperlinks Using the JavaScript event handler onClick for an hyperlink, you can control what happens when a link is clicked As an example, you may chose to display an alert message when a link is clicked: Click this link!

7. The onClick Event Handler for Buttons(Forms) Buttons are elements of HTML forms You declare a button by including an an input tag with type set to button within the forms tag Buttons also have onClick event handlers with the same syntax as links:

8. The Mouse Event Handlers onMouseOver and onMouseOut Links can respond to other events such as when the user moves the mouse The onMouseOver event handler is triggered when the mouse is moved over a link Syntax for onMouseOver: onMouseOver = “JavaScript statement(s)” Example: Mouse Over Link

9. The Mouse Event Handlers onMouseOver and onMouseOut (cont.) The onMouseOut event handler is triggered when the mouse is moved off a link Syntax for onMouseOut: onMouseOut = “JavaScript statement(s)” Example: Mouse Out Event

10. Mouse Event and the Window Status Bar You can use onMouseOver event handler to write a message in the window status bar The window status bar is the thin grey bar at the bottom of the browser window An Example: First

11. In the lab You will use JavaScript to write event-driven programs Open Notepad and create a new HTML document named lesson0501.html Enter the code on p. 5-11 exactly as you see it Save the file and open it using either Internet Explorer or Netscape

12. Student Modifications Modify the code on p. 5-11 as follows: Refer to Appendix B and select three additional colors. Add three new links along with onClick event Handlers that change the bgColor property to the new colors Select a contrasting color for each color you selected above. Insert a second statement for each onClick event handler changing the fgColor property to a selected contrasting color

13. Swapping Images With Mouse Events A common use of mouse events is for swapping images As an example, you can swap a red arrow for a blue arrow as you move over a link:

14. Lesson Summary Event-driven Web pages respond to user actions What are events and event handlers How to use the onClick event handler for both hyperlinks and buttons How to use onMouseOver and onMouseOut event handlers About the windows status bar How to perform an image swap using mouse events