Mastering JavaScript Events for Interactive Web Pages

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: • <a href="#" onClick = "alert('This is what it does!');">Click this link!</a>

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: • <form><input type="button" value="Click Me" onClick="alert('You clicked a button');"></form>

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: • <a href=”#” onMouseOver = “alert(‘You are over this link’);”>Mouse Over Link</a>

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: • <a href=”#” onMouseOut = “alert(‘You are now off this link’);”>Mouse Out Event</a>

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: • <a href="#" onMouseOver="window.status='over first'; return true;">First</a>

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: <a href="#" onMouseOver="document.arrow.src='blueArrow.gif';"onMouseOut="document.arrow.src='redArrow.gif';">  <img src="blueArrow.gif" width="300" height="82" border="0" name="arrow"></a>

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