Lesson Three

A way of making HTML more dynamic is to use events, which are actions that take place when the user makes a movement. For example, if a user clicks their mouse on a button, an event processes the request. Below is a list of the JavaScript event we will be using:

abort	The loading of an image is interrupted.
blur	An element, such as a radio button, becomes active.
click	An element is clicked once.
change	The value of an element changes.
error	There is an error when loading a document or image.
focus	An element becomes active.
load	A document or image loads.
mouseOut	The mouse moves off an element.
mouseOver	The mouse moves over an element.
reset	A form resets.
select	A user selects a field in a form.
submit	A user submits a form.
unload	A document unloads.

Events are most commonly used in processing forms. The image to the right shows two tags that allows users to generate an event, the <FORM> tags and the <INPUT> tags. The two INPUT types shown are "text", which creates a text box for the user to put their name or address, and "radio", which creates round buttons for the user to make multiple choices. You can assign a name to your <FORM> and <INPUT> tags by typing NAME="..." inside each tag. This way, you can reference your the tags that you have created with your JavaScript programs. To reference an HTML in a function or from another tag, you append it to all of it's ancestor objects as shown below:

document.myForm.textButton.value = "my new value";

The programming that takes care of the form is called an event handler. An event handler takes a mouse click and processes the request with the proper programming. One form of event handler is the alert() method. A way of using an alert() method is onClick="alert('You clicked the button!')". You can also use a variable, such as onClick="var message='You clicked the button!'; alert(message)". One thing to remember, after the onClick=, if you use double-quotes, you must use single-quotes within the doubles, otherwise the doubles will cancel each other out. Putting this all together, you can insert event handlers in HTML tags like this: <INPUT TYPE="button" onClick="alert('You clicked a button!')">. Another way of doing this is to include multiple JavaScript statements like this: <INPUT TYPE="button" onClick="var message='You clicked a button!'; alert(message)">. This method will produce a text box with an "OK" button at the bottom. To see how this works, click here.

Another method is the prompt() method. To use prompt(), you would type, variable_name = prompt(message, default_text);. This displays a dialog box with a message, a text box, an OK button, and a Cancel button. To see how this works, click here. To the left is the codes for another demonstration using both prompt() and alert() methods. The page opens, asks you for your name, says "Hello", allows you to type a number in the text field, repeats the number you entered, tells you that the value has changed, then, when you leave, says "Goodbye". To see how this works, click here. As you may have noticed, if you leave your name blank, your name becomes "null". This is because the user never provided any input for the prompt() method. You will learn how to override this in later chapters. It may seem like all we know how to do is display things by creating links. You can have the user give you one of their favorite links by prompting them. Click here to see how it's done. Many of the lessons will show templates to encourage you to try these codes yourself rather than to copy what we do. Which brings us to our next topic, links. Remember, many HTML documents contain what are called "hyperlinks". Hyperlinks, once clicked, lead you to another page or Web pages. You can create an image to act like a hyperlink. Don't get this confused with a button. This is called an "image map", which we will be discussing soon. Buttons are <FORM> properties. Image maps are an extention of links. Links are anchors for a location of a page or Web page. Normally distinguished as blue, underlined text, a link has it's own destination. You create a link by inserting the <A HREF="...">, which acts as an anchor, followed by text and an </A> tag.

An anchor uses either an absolute Universal Resource Locator(URL), such as "http://www.MyWebSite.com/index.html", or it uses a relative URL, such as "MyWebSite.html". Another relative URL would be one that you could access subfolders that are tied to your Web page, such as "/AboutMe/History.html". If you decide to use <BASE> tags in your Web page, then the relative URLs are relative only to that <BASE> tag. You can add JavaScript to links also. To do this, you would type: <A HREF="http://www.matchmakerdating.com" onClick="return validateAge();">Matchmaker Dating</A>. This will call the function validateAge() to run the program that verifies whether the user is 18 or over in order to access the site.

Links have their own events. If you click a link, it takes you to another page or site. There are other events you can add to links. One of such is called the confirm() method. This method displays a dialog box that contains an "OK" button and a "Cancel" button. This will return the value true if the user presses the OK button or false if the user presses the cancel button. To see how this works, click here.

Two other events are the MouseOver and the MouseOut events. A simple and popular property of these is the status=' '; property. This link shows how the MouseOver event works, and this link shows how both events work (NOTE: These may not work well or at all on newer versions of Internet Explorer or Netscape.). To see how this works, we would type: <A HREF="http://www.matchmakerdating.com" onMouseOver="status = 'The best way to meet singles on the Internet.'; return true;" onMouseOut="status = 'Done';">Matchmaker Dating</A>

Now that we've learned so much, we can create an image map. An image map is an image that is divided into regions called hot zones. The image to the left shows the code for creating an image map. First, you need two or more images that will be used in the map. Next, we created the functions in the <HEAD> of the document that will take care of changing of the image during MouseOver and resetting the image on MouseOut. Then, in the <BODY>, we added the <IMG SRC> tag that will insert the first picture we want the user to see. Included in this tag is the property usemap that tells the program what map we will be using. Next, we created the map that will be the base of what we are trying to create. In the next tag, the <AREA> tag, is where it all comes together. We chose the rectangle shape by typing SHAPE=RECT to cover the image we are using. You can also use SHAPE=CIRCLE and SHAPE=POLY to cover circles and polygons. Then, we gave the x, or horizontal axis and the y, or vertical axis coordinates of the rectangle to show the active area by typing COORDS="upper-left x, upper-left y, lower-right x, lower-right y". The coordinates were given in pixels, or picture elements. Here's the way you'd type the coordinates for a circle and a polygon:

SHAPE=CIRCLE COORDS="center-x, center-y, radius"
SHAPE=POLY COORDS="x1,y1, x2,y2, x3,y3,..."

We included the <HREF> so that browsers that aren't fully JavaScript compatible will be able to run the map. Then, we added the MouseOver and MouseOut events so that when the user moves their cursor over the image, the image will change and then change back. Finally, we inserted an onClick event to take care of any mouse clicks so the link wouldn't try to go anywhere.

To see how this map works, click here.

Putting it all together!

This is a new feature we are adding to our tutorials so that you can see how what you've learned ties together. Some of the examples are ours, some are from other sites. Below is a program from Don Gosselin's JavaScript: Introductory from Course Technology, ISBN 0-619-00048-1. It is a program that contains a list of links to your favorite Web sites. Then, each link calls a function to display a confirm box that confirms with the user that they are going to the right site. Try creating this yourself. If you run into problems, click your "View" menu and click "Source" to see how it was done. You may have to scroll down to the bottom to see the script.

Question: Cool! This seems like it will be fun to learn. But how do I make JavaScript work like Java?

Answer: Fortunately, JavaScript has some of the same data type and operators. In the next lesson, we'll take a look at how these work.