Transcript JavaScriptLesson05

JavaScript 101
Lesson 5: Introduction to Events
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
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
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
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
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>
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>
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>
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>
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>
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
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
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.gi
f';"onMouseOut="document.arrow.src='redArrow.
gif';">
<img src="blueArrow.gif" width="300" height="82"
border="0" name="arrow"></a>
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