JavaScript 101

tacitmarigoldInternet and Web Development

Jan 25, 2014 (3 years and 6 months ago)

200 views

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