JavaScript 101

tacitmarigoldInternet και Εφαρμογές Web

25 Ιαν 2014 (πριν από 4 χρόνια και 5 μήνες)

261 εμφανίσεις

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

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

Events and Event Handlers

Users actions are events and they could

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

An event handler is a predefined JavaScript

An event handler is a special attribute
associated with hyperlinks, buttons and other
elements of a web page

Events handlers always begin with

Examples are:




The onClick Event Handler for

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

<a href="#" onClick = "alert('This is what it
does!');">Click this link!</a>

The onClick Event Handler for

Buttons are elements of HTML forms

You declare a button by including an an input
tag with type set to button within the forms

Buttons also have onClick event handlers with
the same syntax as links:


<input type="button" value="Click Me"
onClick="alert('You clicked a button');">


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)”


<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)”


<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
return true;">First</a>

In the lab

You will use JavaScript to write event

Open Notepad and create a new HTML
document named lesson0501.html

Enter the code on p. 5
11 exactly as you see

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

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="#"

<img src="blueArrow.gif" width="300" height="82"
border="0" name="arrow"></a>

Lesson Summary

driven Web pages respond to user

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