Java Events

Speaker Notes

Slide #1:

In this presentation, we will focus on events. The next presentation will cover more of the actual scripting.

Slide #2:

Please read some notes on JavaScript. For today, focus on some of the rules involved and on the use of events.

Be sure to read about the concepts of objects, methods, objects and events to help you understand the code.

Slide #3:

This is an example of mouse over using text and using an image box.

Slide #4:

This shows the actual code using the onMouseOver and onMouseOut.

Slide #5:

This shows some explanatory notes that are included in the code.

Slide #6:

This shows the results of the next page, CISaCISb1.html.

Slide #7:

This shows the code with the preload of the images done in JavaScript in the header.

Note that with things other than events, JavaScript is enclosed in the SCRIPT shown. It is better to include the clause language = "JavaScript" since ther are other scripting languages.

In the previous example instead of CISimage I used document.CISimage. I could also have used window.document.CISimage.

Slide #8:

This is the program called javamouse.html. Rolling the mouse over the picture causes it to appear up side down. This is because there are two images. In a graphics package I saved the image, then rotated it 180 degrees and saved it again under a different name.

Slide #9:

In the SCRIPT in <HEAD> I establish the two images and name them originalz and flips. Establishing the images in the <HEAD> means that they will be loaded initially and there will not be a delay in the mouse over and mouse out events.

Please read an explanation of this click event in one of the many tutorials and fact sheets available on the Web. The explanation here needs to be elaborated on.

Note that in this example, I used the name defined in the script for the image instead of the actual .jpg name. In previous examples I used the actual image name enclosed in quotes.

Slide #10:

This version is a little more "professionally done".

Slide #11:

This is try event one. It experiments with other uses of the mouse over and mouse off. The code is on the next page.

I got this code by opening source in Explorer 5.0 which shows the JavaScript.

Slide #12:

Again we are referring to document as the object and in this case bgColor is a property of the document object.

Note that in JavaScript the syntax is:

Event="document.property or method"

If you need quotes within the quotes, the inner quotes are done with single quotes.

In the case of alert we are talking about a different object - a popup alert window that comes up and in the case of window.status we are talking about the object window and the status of that window.

Slide #13:

This slide shows the alert which brings up the alert popup window which displays the message inside the parenthesis.

Slide #14:

Read about the use of quotes in JavaScript in one of the tutorials.

Slide #15:

Note the Testing roll over in the window status.

return true "locks" the message into the status line so it won't be replaced by the default URL.

Slide #16:

Compare this to the next set which does not have the return true.

Slide #17:

Without return true, the default URL appears.

Slide #18:

In this example, the BODY statement has an onLoad event which displays the alert window when the page is opened.

Slide #19:

The code for tryevent2.html.

Slide #20:

This causes Enter course code to show on the status line when the focus is on the first box after Course information.

Slide #21:

When the course name got the focus, the message appeared on the status line. When I left the course name (NAME="crsnmae") then the alert window appeared.

Slide #22:

When I left the instructor box (NAME="crsinst") the onBlur was activated and the alert popup message appeared.

Slide #23:

history.go(-1) moves back one screen

history.go(1) moves forward one screen

Different numbers can be used to control where you go.

Slide #24:

This shows a page with a variety of onClick options. You can change background color, default font color, or the image and you can get user input on the colors to use.

Slide #25:

This shows the onClick code. Note that the prompt asks for user input.

Note that bgColor is background color and fgColor is the default font color - I assume fg means foreground color.

Slide #26:

This shows the onClick code. Note that the prompt asks for user input.

Note that bgColor is background color and fgColor is the default font color - I assume fg means foreground color.

Slide #27:

As mentioned on the previous page. This prompt will ask for a choice of color and give the default of pink.

Slide #28:

This shows font1.html. Note that font2.html is cleaned up a little and it is missing the purposeful error on this slide. You should look at the code for both.