CIS 89C Client-Side Programming with JavaScript

CIS 89C Client-Side Programming with JavaScript

Unit 12 - Event handlers (week 6)

References:

McDuffie - Chapter 5 Events and Event Handlers - again

Topics:

Opening statement

Review - notes from unit 10

Event and event handlers defined - McDuffie page 132

Writing event handlers - McDuffie page 132

Intrinsic event attributes, also known as event handlers - McDuffie p 133

Load and unload - McDuffie page 134

Mouse over and mouse out - McDuffie page 136

Click - McDuffie page 140

Submit - McDuffie page 145

Reset - McDuffie page 146

Focus and blur - McDuffie page 147

Change - McDuffie page 149

Select - McDuffie page 150

Abort - McDuffie page 151

Error- McDuffie page 153

Cross-browser event handlers -- the safe list - McDuffie page 154

Other events -- the danger list - McDuffie page 156

Return values from event handlers - McDuffie page 138

Other return values - McDuffie page 143

Status bar problems -

Changes from McDuffie to match our current

McDuffie is wrong on page 137

See Scripting the Status Line on page 286 in

JavaScript, the definitive guide by David Flanagan

Image rollover - McDuffie page 138

Summary - McDuffie page 157

***********************************************************

Opening statement

We looked at events and event handlers.

Then we looked at an introduction to the Document Object Model (DOM)

Now we will come back to processing the events.

***********************************************************

Event and event handlers defined

Review

An event is some detectable action in the window,

such as when the user clicks on a button.

Many events that happen in a window can be detected.

When one of these events occurs, our event handler code is automatically called, and our JavaScript code can produce a responding action.

***********************************************************

Writing event handlers

Review

The name of the event is an attribute of an xhtml element.

For example, we can set up an event handler for a button element:

<button type="button" onclick="alert("hello")">Say hello</button>

When the user clicks the Say Hello button, the JavaScript in the value of the onclick attribute is executed.

Notes:

- The type attribute is given the value "button"

This type of button will not do anything, except execute the onclick JavaScript code.

- The attribute onclick is spelled in lower case, as required by XHTML.

The book shows it in mixed upper and lower case, as permitted by HTML, but not XHTML.

Often, the JavaScript code in the onclick attribute value is a function call.

IMPORTANT:

The code in the onclick attribute must be written within one line.

So, always use a function if the code does not fit on one line.

Example:

<button type="button" onclick="hello()">Say hello</button>

This calls the hello function, which can do the desired hello activity.

***********************************************************

Intrinsic event attributes

Review

There is a whole list of "intrinsic event attributes".

These attributes can be used in most XHTML elements.

These attributes have a value that is JavaScript.

When the event occurs to the XHTML element, the JavaScript executes.

The book lists these as well supported:

on load onload

on unload onunload

on click onclick

on mouse over onmouseover

on mouse out onmouseout

on focus onfocus

on blue onblur

on submit onsubmit

on reset onreset

on select onselect

on change onchange

Others are listed as not as well supported.

Because every user agent has its own JavaScript engine,

there may be differences between user agents.

We are historically accustomed to thinking of only browsers as the user agents that interpret JavaScript. More and more today, we encounter user agents on cell phones, personal digital assistants, and other hand held devices.

A whole new class of user agents, that is just starting to be introduced, are webos environments. Webos environments run on a personal computer to provide applications that use the web, as well as local data.

Personal devices and webos environments look like areas of prime JavaScript development for the next few years.

Now, we will look at these event handlers.

Most of them could be used to trigger an alert box;

that is what we might do in a simple demonstration.

More often they will be used to change the web page.

We will learn a few of the techniques for changing a web page in this introductory course, but have not done this yet. So I will mention some of these in the lecture, without giving the complete code. Later, we will build the code.

***********************************************************

Load and unload

Skip review

***********************************************************

Mouse over and mouse out

Skip review

***********************************************************

Click

Skip review

***********************************************************

Submit

Skip review

***********************************************************

Reset

Skip review

***********************************************************

Focus and blur

Skip review

***********************************************************

Change

Skip review

***********************************************************

Select

Skip review

***********************************************************

Abort

Skip review

***********************************************************

Error

Skip review

***********************************************************

Cross-browser event handlers -- the safe list

Skip review

***********************************************************

Other events -- the danger list

Skip review

***********************************************************

Return values from event handlers

Event handlers usually return a Boolean value of true or false.

A value of true means OK, do it, whatever it needs to be done.

A value of false means don't do anything.

If you do not return a value, true is the default.

For example, if an onsubmit handler returns true, the form will be submitted.

If the onsubmit handler returns false, the form will not be submitted.

This lets you check the form in your onsubmit handler, and only choose to submit it if everything has been entered correctly in the form.

You often see this kind of form checking when you fill out information online, and some of the fields are required. If you leave one blank, it comes back to you with a message that you need to fill out the blank field. This is usually done by a JavaScript onsubmit event handler, which sends you the message and returns false, to prevent the form from being submitted.

A good example of return values from event handlers is to use a confirm box.

The confirm box pops up like an alert, but it has a question and allows the user to answer yes or no.

If the user answers yes, it returns true.

If the user answers no, it returns false.

Example:

  <a href="b.html"

     onclick="return confirm('Do you want to go to the B page?')"

    Go to page B

  </a>

The confirm box returns true or false from the confirm() function.

We pass on this return value from the onclick event handler.

We do this with the return in the onclick JavaScript statement.

***********************************************************

Other return values

The event handler attributes values return true or false.

There are other attribute values that have values, other than true or false.

For example, href does not expect JavaScript in the attribute value,

and does not expect true or false as a value from the attribute value.

We can use JavaScript, in some places where it is not expected, by using the javascript: pseudo-protocol.

This works in the href attribute value in <a> and <area> elements.

Example:

If the function returns a value, the value is used as the name of the file, which is loaded when the link is clicked.

If you do NOT want the link to go anywhere, the function needs to return void.

Why would you want to do that?

Perhaps you have an onclick handler, which will take some other action, rather than loading a new page.

Example:

<a href="javascript: void someFunction();"

onclick("return importantFunction()"

</a>

***********************************************************

Status bar problems -

Changes from McDuffie to match our current environment

Changes from Pollock to match our current environment

Pollock section 7.3 has similar problems to McDuffie.

The status bar changes should be changed to alerts in the examples.

Example different than Script 5-2 on page 137 in McDuffie:

<p onmouseover="alert('mouse over hello');"

onmouseout="alert('mouse out of hello');">

Hello.

</p>

There are two ways this example is different than Script 5-2 on page 137 in McDuffie.

1) Lower case attributes for XHTML

Because we use lower case attributes in XHTML, we use

onmouseover instead of onMouseOver

and similarly use lower case in all the event attributes.

2) Changing window.status may not work

window is the DOM object that represents the entire window, including the status bar at the bottom.

In the book JavaScript, the definitive guide by David Flanagan indicates that

the script 5-2 on page 137 in McDuffie may no longer works. Why?

It may not work because the good new browsers have changed.

The status bar is used to display the address of the destination of a link.

Rogue code could make the status bar display the address the user expects, but actually link to a phishing site, to steal information from the user.

window.status in the DOM represents the information in the status bar, at the bottom of the window. window.defaultStatus in the DOM represents information to be shown in the status bar, by default. You may no longer be able to change the values of these properties of the window object.

Actually, I tried the example, and it worked.

This is the problem you often have with using interpreters.

Some work, some of the time.

References:

- Return values from event handlers - McDuffie page 138

- See Scripting the Status Line on page 286 in

JavaScript, the definitive guide by David Flanagan

***********************************************************

Image rollover

When you have an anchor to link to a new page, such as:

The text Go to a new page is what the user sees on the page.

When the user clicks on this text, the new page is loaded.

You can use an image, instead of the text:

<img src="newPageLinkImage.gif"

id="link-image-id"

height="12px" width="20px"

alt="Go to a new page"

</a>

The image is what the user sees on the page.

When the user clicks on this image, the new page is loaded.

You can use onmouseover and onmouseout

to change the image, so the link looks different when the mouse is over the link image.

// Similar to the mouse() and mouseout() functions in the web page

// however this code has not been tested.

function overFunction( imageId, imageFileName )

{

imageReference = document.getElementById(imageId);

imageReference.src = imageFileName;

}

<a href="newPage.html"

onmouseover="overFunction("link-image-id",

"overNewPageLinkImage.gif")"

onmouseoout="overFunction("link-image-id",

"newPageLinkImage.gif")"

<img src="newPageLinkImage.gif"

id="link-image-id"

height="12px" width="20px"

alt="Go to a new page"

</a>

***********************************************************

Summary

We have looked at a little of the Document Object Model.

There is a lot more to the DOM that we will not see in this course.

We have seen how to write code using some features of the DOM.