Advanced HTML Programming

JavaScript Notes: Part 2

 

 

Objectives:

This document continues our discussion of Dr. Joe Burns' lessons in JavaScript usage. Reference will be made to Dr. Joe Burns' web lessons on Earthweb.com. Links to some of those lessons are provided below:

Joe Burns' JavaScript Primer #1
Joe Burns' JavaScript Primer #2: Error Messages
Joe Burns' JavaScript Primer #3: Dates and Times
Joe Burns' JavaScript Primer #4: onMouseover
Joe Burns' JavaScript Primer #6: Prompts and Variables


Concepts:

Some problems were encountered in class with Dr. Burns' Lesson 4 (see link above). In this lesson, Dr. Burns introduced two problematic concepts:

  • JavaScript commands that do not appear in scripts
  • complex JavaScript commands that tell the browser to do more than one thing

You must understand the first concept before trying to use the second one. It may be easier to understand if you consider that this is still a frontier, under constant development. Not everything has hard and fast rules. So, take a deep breath and join me in pondering some ideas that break rules you have learned.

JavaScript is a language that tells browsers to do something. It usually uses <script> tags to set off its commands from the rest of an HTML page. However, browsers have evolved since JavaScript was invented, HTML has evolved, and a result is that some HTML tags can include JavaScript commands to event handlers that watch for events that the browser watches for. Remember, an event is something that happens, often with user interaction, like a Click event. An event handler is a daemon, a program that runs in the background, watching for the event to take place. You can write a JavaScript command that is obeyed by an event handler when its event takes place. (Your command is not the only thing the event handler will do. You are merely adding to the list of things it will do.)

The next example, from Dr. Burns' Lesson 4, passes JavaScript commands to several event handlers inside a tag. The event handlers are asked to do more than one thing, so the example illustrates both concepts for this lesson.

I will simplfy Dr. Burns' code a bit. My code for this example looks like this:

<a href="http://www.htmlgoodies.com"
onMouseOver="document.bgColor='blue',
window.status='Go to the Goodies Home Page';
return true"
onMouseOut="document.bgColor='white',

window.status='';">Hover Here</a>

I have used line returns at the end of each line above, and the code seems to work well. You may place your mouse over the link below to see the script work. (There is no need to click the link.)

Hover Here

The process involved here needs discussion. Let's start with the familiar. I am showing the HTML code in blue below. I will number the lines, in black, for reference.

Line 1 <a href="http://www.htmlgoodies.com"
Line 2 onMouseOver="document.bgColor='blue',
Line 3 window.status='Go to the Goodies Home Page';
Line 4 return true"
Line 5 onMouseOut="document.bgColor='white',
Line 6 window.status='';">Hover Here</a>

On Line 1, I have opened an anchor tag. (This opening anchor tag does not close until the middle of Line 6.) I have defined the site to link to by using the href property of the tag, as should be familiar to you.

On Line 2, I have begun to define what I want the browser to do when a MouseOver event is detected for this anchor point. I used the name of an event handler as a property of the tag: onMouseOver. Capitalization sometimes matters, depending on the browser, so please stay with the same capitalization used here. The name of the event handler is followed by an equal sign, which is followed by an opening double quotation mark. A closing double quotation mark will not be used until I have stated everything I want to pass to the event handler.

Line 2 onMouseOver="document.bgColor='blue',

Still on Line 2, the first command I pass to the event handler says to change the background color of the current document object. I state document.bgColor='blue'. (In testing this command, I found that it did not work if I did not make the C in Color a capital letter.Oh, well...) Single quotation marks are used arond the value because 1) XML compliance requires the use of some kind of quotes around values of properties, and 2) I am already inside a set of double quotation marks, so I had to change to a single quote set. Had I used a double quotation mark anywhere in here, I would have closed the command string being sent to the event handler. Line 2 ends with a comma, which tells the event handler that another command is coming, which is to be obeyed as well, at the same time.

Line 3 window.status='Go to the Goodies Home Page';

Line 3 begins the second command being sent to this0 event handler. Dr. Burns actually used a second call to the event handler here. I have not done so. I have merely continued the string that I am passing to the event handler, telling it to change the value of the status property of the current window object. In other words, I want the words on the status bar of the window to say something in particular. The line ends with a semicolon, which means that this phrase ends the description of the action to take.

Line 4 return true"

Line 4 is the actual end of the string being send to the first event handler. You can tell this by the closing double quotation mark. This is a new command, separated from the last one by the semicolon that ended Line 3. Line 4 tells the browser to actually obey the two instructions on Lines 2 and 3. (Without it, the instruction on Line 3 would not be obeyed, although the one on Line 2 would be.) Let's accept Dr. Burns' explanation that it is necessary in order to write to the status line of the window object. I think of it this way:

  • If we were not writing code, an onMouseOver event handler would write some information to the status line by default: the location we can link to.
  • The code we are writing tells it to do something different.
  • We have to use the "return true" statement to force the new action to take place.

Line 5 onMouseOut="document.bgColor='white',

Line 5 is similar to Line 2. Line 5 begins a call to another event handler. I am telling the browser that when the MouseOut event for this anchor is detected by its event handler, I want the background color of the current document object set to white. A comma is used at the end of this line to tell the onMouseOut event handler that another instruction is coming. Note the use of the opening double quotation mark, and the set of single quotation marks. The opening double quotation mark shows the beginning of the set of instructions being passed to the event handler. The set of single quoation marks only encloses a value passed to a property.

Line 6 window.status='';">Hover Here</a>

Line 6 does a lot. First, it tells the browser to take the second action fo the MouseOut event. That action is to erase what is on the window's status bar. Look carefully: I am telling the event handler that I want the status property of the window object changed. I am sending an empty string to that property with the code window.status=''; which actually sends a pair of single quotes with nothing between them to the status property of the window object. That is a pair of single quotes to the left of the semicolon, not a double quote. The command ends with a semicolon, and the entire string being sent to the event handler ends with an actual double quotation mark. Prove this to yourself by moving your cursor across the code with you arrow keys. Actually do this, I will wait right here...

After the closing double quotation mark, Line 6 closes the opening anchor tag with a greater-than character. (I promised you it would do this, back in the discussion of Line 1.) Then, the text to display as the anchor point, Hover Here, is shown, followed by a closing anchor tag. What may seem odd to you at this point is that I did not have to use a "return true" statement to empty the status bar. Well, think of it as a simpler event. If the onMouseOut event handler does not wish to write to the status line, it does not have be forced to let us do so.