Notes for Dr. Joe Burns'
JavaScript Goodies

Chapter 2 - Popping Up Text with Mouse Events

Lesson 5's Objective: Learn about Event Handlers

Using the onMouseOver Event Handler (and onMouseOut Event Handler)

• Learn how to change the status bar's message when the user places the mouse pointer over a link.
• Learn how to change the background color of an object when the user places the mouse pointer over that particular object.
• In chapter 4, learn how to use onMouseOver to create Rollovers.
• Yes, bells and whistles!

What Is an Event Handler?

An event handler is an HTML attribute that "acts" as a command to invoke (call) JavaScript instructions (statements). Event handlers usually arise as a result of some action taken by the user, and an event handler itself is NOT JavaScript. Instead the event handler is acting as a middleman (interface) between your JavaScript code and the visitor to your page. Lastly, you use these event handlers to embed (place) your JavaScript code into your HTML tags.

Sample Codes

---

First, "permanently" changing the status bar's message:

---

<A HREF="https://www.angelfire.com/pa2/patterson" onMouseOver="window.status='Visit Professor Patterson\'s Home Page'; return true;">Visit Patterson's Angelfire Site</A>

---

Visit Patterson's Angelfire Site    (Look at the status bar!)

---

Second, "temporarily" changing the status bar's message:

---

<A HREF="https://www.angelfire.com/pa2/patterson" onMouseOver="window.status='Visit Professor Patterson\'s Home Page'; return true;" onMouseOut="window.status=' '; return true;">Visit Patterson's Angelfire Site</A>

---

Visit Patterson's Angelfire Site     (Look at the status bar!)

---

Dr. Joe's Page

Note: Notice that now the JavaScript is inside an HTML tag! Dr. Joe also points out that you could switch the order - you could list the onMouseOver before the HREF. Like so:

<A onMouseOver="window.status='Visit Professor Patterson\'s Home Page'; return true;" HREF="https://www.angelfire.com/pa2/patterson">Visit Patterson's Angelfire Site</A>

Don't forget: If you need to specify a string within some other string, use single quotes inside the set of double quotes. Otherwise, it just won't work!

Semicolons, p. 32

Semicolons are used in JavaScript, Java, C, C++, and ActionScript to terminate a statement. The semicolon is usually optional for the last statement. Generally, Professor Patterson terminates all statements with a semicolon. It usually pays to be consistent!

return true, pp. 32-33

Dr. Burns tells us that the return true statement helps obtain permission to overwrite whatever's in the status bar. Dr. Joe has a page demonstrating what happens when the "return true" is omitted.

---

Here's my rendition omitting return true:

<A HREF="https://www.angelfire.com/pa2/patterson" onMouseOver="window.status='Visit Professor Patterson\'s Home Page';">Visit Patterson's Angelfire Site</A>

---

Visit Patterson's Angelfire Site    (Look at the status bar!) Instead of occurring when the mouse is placed over the link, the status bar changes AFTER the mouse is no longer over the link. Strange, huh?

---

Another Sample Code

<A HREF="https://www.angelfire.com/pa2/patterson" onMouseOver="document.bgColor='pink'; return true;">Link for Changing the Background Color<A>

---

Link for Changing the Background Color

(Right-click the page & click "Refresh" to get the white background back)

---

Dr. Joe's Page

---

---

---

Another Sample Code - Double Whammy - Status Bar Change Plus bgColor Change!

<A HREF="https://www.angelfire.com/pa2/patterson" onMouseOver="document.bgColor='pink', onMouseOver=window.status='Pink Panther strikes again!'; return true;">Link for Changing the Background Color and Creating a Status Bar Message<A>      (This code will not work with a semicolon before the comma.)

---

Link for Changing the Background Color and Creating a Status Bar Message

(Right-click the page & click "Refresh" to get the white background back)

---

Dr. Joe's Page

---

---

Professor Patterson's Preferred Alternative for - Double Whammy - Status Bar Change Plus bgColor Change!

<A HREF="https://www.angelfire.com/pa2/patterson" onMouseOver="document.bgColor='pink'; window.status='Pink Panther strikes again!'; return true;">Link for Changing the Background Color and Status Bar Message ala Patterson<A>

---

---

Link for Changing the Background Color and Status Bar Message ala Patterson

(Right-click the page & click "Refresh" to get the white background back)

---

---

Assignment Example, p. 35

Use the onMouseOver event handler with a new method called alert([text here] ).

Solutions: Patterson's Solution (Example 1)    Dr. Joe's Page

---

Netscape 6.2+ Remedy

Unfortunately programmers are not gods; they make mistakes. The coding above basically adheres to the rules and syntax of JavaScript. But, unfortunately, the programmers who developed Netscape 6.2+ included quite a few bugs, and it just so happens that one of them involves the status bar. Now, as Danny Goodman, the author JavaScript Bible, would say, we have a squirrelly workaround to get this to work in Netscape these days:

onMouseOver="setTimeout('window.status=\'Get off of me!\'',0); return true;" onMouseOut="setTimeout('window.status=\'Thanks!\'',0); return true;"

Patterson's Example Page

---

Lesson 6's Objective: Learn to Use More Event Handlers: onClick, onFocus, onBlur, onChange, onSubmit, onLoad

onClick Example

<A HREF="https://www.angelfire.com/pa2/patterson" onClick="alert('Hasta La Vista, Baby!');">

Example 1

---

onFocus Example

<FORM>
<INPUT TYPE="text" SIZE="30" onFocus="window.status='Enter your name.';">
</FORM>

Example 2     Dr. Joe's Page

Try it:

Excellent Tip: Do not use onFocus with alert( ). You'll be in an "endless loop" when working with some browsers and operating systems.

---

onBlur Example

<FORM>
<INPUT TYPE="text" SIZE="30" onBlur="alert('This box just lost the focus.');">
</FORM>

Example 3     Dr. Joe's Page

Try it:

---

onChange Example

<FORM>
<INPUT TYPE="text" SIZE="30" onChange="alert('This box\'s content has changed.');">
</FORM>

Example 4     Example 4a     Dr. Joe's Page

Try it:

NOTE: I experienced no problems using the onChange event handler. I'm not sure that I understand Dr. Joe's concerns.

---

onSubmit Example

<FORM onSubmit="window.location.href='ExThanks.html';">
Enter school: <INPUT TYPE="TEXT" NAME="school">
<INPUT TYPE="SUBMIT" SIZE="30" VALUE="Try Me">
</FORM>

Example 5     Dr. Joe's Page

Enter age:

NOTE: The onSubmit event handler should only be placed in the HTML <FORM> tag. You submit a form, not a button. Also, in this example you are seeing how you can make a JavaScript statement using the href property.

I didn't have much sucess with Dr. Joe's script back in 2000, and I haven't had any success with it here in 2003. It needs an overhaul.

---

By now you should see a pattern regarding how you provide code for event handlers. When you insert an event handler into an HTML tag, you set the event handler to a set of JavaScript statement(s) that are enclosed in double quotes:

General syntax:       onEventName = " JavaScript statement(s) " <=== Insert in an HTML tag

---

onLoad Example

<BODY onLoad="alert('Howdy');">


Example 6     Dr. Joe's Page


NOTE: As your author points out, the onLoad event handler gets considerable use in the "real world".

---

You may want to review how to create forms using HTML. Dr. Joe provides some information regarding the use of HTML to create forms.

---

---

Assignment Example, p. 41

Create a form with a textbox, two checkboxes, and a submit button. When the user interacts with the text box, a message should appear in the status bar - "Put your name in here." When the user selects either check box, a message should appear in the status bar - "You have chosen...". When the user presses the Submit button, an alert box should be presented to thank the user for filling out the form."

Solutions: Patterson's Solution     Dr. Joe's Page

---

Lesson 7's Objective: Learn to Use onMouseOut and onUnload

The onMouseOut event is triggered when you take the mouse off of a link. The onUnload event is triggered when the Web page is left either by closing the Web page or going to a different Web page.

---

onMouseOut Example

<A HREF="ExThanks.html" onMouseOver="window.status='Hey! Get off of me!'; return true;" onMouseOut="window.status='Much better - Thanks'; return true;">Try me<A>


Try me    Dr. Joe's Page

---

onUnload Example

<BODY onUnload="alert('Come back soon!');">


Example 1     Review Dr. Joe's Page Above Again

---

Lesson 8's Objective: Learn about the SPAN Tag and the Event Handlers onMouseDown, onMouseUp, onDblClick, onKeyDown, onKeyUp, onKeyPress, and onMouseMove

The <SPAN> tag is an HTML tag that doesn't do anything on its own. As Dr. Burns mentions on p. 45, the <SPAN> tag is a "delivery" device. The <SPAN> tag can be used to apply various event handlers to whatever it encloses in your HTML code.

In general...     <SPAN [Event Handler] >whatever</SPAN>

A specific example follows...
<SPAN onClick="location.href='../BurnsNotes.html';" >Back to Chapter Listing</SPAN>

       Click on this text ===>    Back to Chapter Listing         Dr. Joe's Page

---

onDblClick, onMouseDown, onMouseUp Example

<SPAN onMouseDown="window.status='Mouse Is Down' ;" onMouseUp="window.status='Mouse Is Up' ;" onDblClick="location.href='ExThanks.html' ;">Try Me!<SPAN>

Try Me! <=== Click on this text

More Event Handlers - Partially Supported by Browsers, p. 47

• onKeyDown
• onKeyUp
• onKeyPress
• onMouseMove

---

Assignment Example, p. 47

Use the <SPAN> tag with suitable event handlers so that when the user passes the mouse over the text "Green to Red" the background color will turn green; and when the mouse leaves the text, the background color will change to red. In addition, try to change the background color to purple when the user double-clicks the text "Green to Red".

Solutions: Patterson's Solution (Example 1)    Dr. Joe's Page

---

Lesson 9's Objective: Learn to Use the go() Method

You can use history.go() statements to send the user back or forward to previously visited Web pages. The history object, as you remember, is a list that's maintained by the browser to keep track of the Web pages that you've visited during your current session. Dr. Joe has provided you with the following practical example:

<FORM>
<INPUT TYPE="button" VALUE="Back" onClick="history.go(-1);">
<INPUT TYPE="button" VALUE="Forward" onClick="history.go(1);">
</FORM>

                Dr. Joe's Page

NOTE: The "Back" button will work if you visit one of my example pages. Unfortunately, you won't be able to really test the "Forward" button.

You use negative values as instances for the go() method, if you want to go back through the history record; you use positive values as instances for the go() method, if you want to go forward through the history record. This gives you the ability to create your own version of the browser's "Back" and "Forward" buttons that appear in the browser's toolbar. You should experiment with -2, -3, ... and 2, 3, ... (See p. 49)

---

Assignment Example, p. 50

Create a guestbook that will take the user back to the guestbook's "parent" Web page when the user submits the form.

Solutions: Patterson's Solution (Example 1)    Dr. Joe's Page

---

Lesson 10

Reviewing Chapter 2

Lesson 10's Objective: Reviewing Lessons 1-10

You have now learned that there are many event handlers that you can apply to a Web page:

• onBlur
• onChange
• onClick
• onDblClick
• onFocus
• onKeyDown
• onKeyPress
• onKeyUp
• onLoad
• onMouseDown
• onMouseMove
• onMouseOut
• onMouseOver
• onMouseUp
• onSubmit

You have also learned how to use the alert() method and how the <SPAN> tag can be used as a delivery device to apply JavaScript code to the content of a Web page.

You have learned about the objects, methods, and properties that appear in the table below:

Objects	Methods	Properties
document	write( )	alinkColor, bgColor, fgColor, linkColor, lastModified, location, referrer, title, vlinkColor
history	go( )	length
location		host, hostname, href
navigator		appCodeName, appName, appVersion, userAgent
window		status

Dr. Joe provides an example that asks the old question "Why did the chicken cross the road?". He enables you to click on the question to get JavaScript coding to execute to re-write the page with an answer and a button to go back to the question. Here's Dr. Joe's page. Notice that the Web page URL does NOT change. The page is re-written; a new page is not being loaded into the window. Amazing, huh?

Assignment Example, p. 54 (Reload Button)

Dr. Joe's Answer

Learn about Escape Characters, pp. 54 - 57

\'	Single quote
\"	Double quote
\r	Carriage return
\t	Horiazontal Tab
\v	Vertical Tab
\s	Single white space
\S	Single non white space

---

Copyright © 2000, 2003; RGPatterson, all rights reserved; last revised: 3/14/03