|[ LiB ]|
The one exception to this was the use of functions placed in the head section of the page or at the top of the body section and executed by functions calls later in the script. In some cases, the addition of an if...then statement or a switch statement might have made the execution of a statement or function optional. But even in these cases where multiple logical paths of script execution exist, the script statements execute logically in a serial fashion.
To make your Web pages really interactive, you must add another tool to your scripting skill set: event handlers. An event handler is a trap that recognizes the occurrence of a particular type of event. You can add code to your scripts that alters the browser's default response to events. For example, instead of automatically loading the URL specified by a link, you could display a confirmation dialog box that asks the user to agree to certain terms before proceeding.
The names of event handlers are based on the events that trigger them. Placing the word on in front of the event name creates the event handler's name . For example the event handler for the click event is onClick .
Each event is associated with a specific object. When an event occurs for a given object, its event handler executes ( assuming that you have written one). For example, the click event occurs whenever a user clicks on a button, document, check box, link, radio option, reset button, or submit button.
Event handlers are surprisingly easy to define considering their power. You place them within HTML tags that define the object. For example, you can define an event to occur whenever a Web page is loaded by placing an onLoad event handler inside the first HTML <BODY> tag as shown here:
<BODY onLoad="window.alert('Web page loading: Complete.')">
You will see plenty of examples of how and where to place event handlers in various types of HTML tags throughout the rest of this session.
The event object is populated on every occurrence of an event. The information in its properties can be referenced by event handlers, giving your script access to detailed information about the event.
For example, the event.modifiers property specifies any modifier keys that were associated with a mouse or keyboard event. If the user pressed the Alt key while clicking the mouse button, the event.modifiers property contains the value Alt . The event.type modifier contains a string representing the type of event that occurred, and the event.which modifier contains a number that specifies the mouse button that was pressed or the ASCII value of the keyboard key that was pressed.
Window and frame events
A number of these events and their associated event handlers are demonstrated in the scripts that follow. For a complete list of events and event handlers, see Appendix B.
<HTML> <HEAD> <TITLE>Script 3.13 - onLoad, onResize, onUnload & onMove Example</TITLE> </HEAD> <BODY onLoad="window.alert('Web page loading: Complete.')" onResize="window.alert('What is the matter with my current size?')" onUnload="window.alert('Oh no, I am melting......')" </BODY> </HTML>
The first thing you will see when you run this script is a prompt notifying you that the Web page has finished loading (see Figure 3.17). This message is triggered when the onLoad event handler executes in response to the load event.
If you resize the window, the reload event will cause the onReload event handler to execute and display an alert message. Likewise, resizing the window results in a similar alert message. The unLoad event handler does not execute until you close the window or load it with another URL.
Mouse events execute whenever you do something with the mouse. This includes any of the following:
The MouseOver event occurs when the pointer is moved over an object.
The MouseOut event occurs when the pointer is moved off an object.
The MouseDown event occurs when a mouse button is pressed.
The MouseUp event occurs when a mouse button is released.
The MouseMove event occurs whenever the mouse is moved.
The Click event occurs whenever you single-click on an object.
The DblClick event occurs whenever you double-click on an object.
The following script demonstrates the use of the onMouseOver/onMouseOut and onMouseDown/onMouseUp events. This script defines two links. Clicking on either link instructs the browser to load the Web page at www.microsoft.com. By adding the onMouseOver and onMouseOut event handlers to the first HTML link tag, I instructed the browser to change the document's background to red when the pointer passes over the link. The onMouseOut event handler then changes the background to white when the pointer moves off the link.
The onMouseDown and onMouseUp event handlers associated with the second link instruct the browser to change the document's background to red when the user clicks on the link (that is, when the user presses down on the mouse button) and to change the background color to white when the user releases the mouse button. Neither the onMouseDown nor the onMouseUp event handler alters the default action of the link. Therefore, if you click on the second link, the Web page at www.microsoft.com is still loaded.
<HTML> <HEAD> <TITLE>Script 3.14 Mouse Event Handler Example</TITLE> </HEAD> <BODY> <A HREF="http://www.microsoft.com" onMouseOver='document.bgColor="red"'; onMouseOut='document.bgColor="white"';> onMouseOver and onMouseOut example</A><P> <A HREF="http://www.microsoft.com" onMouseDown='document.bgColor="red"'; onMouseUp='document.bgColor="white"';> onMouseDown and onMouseUp example</A><P> </BODY> </HTML>
Figure 3.18 shows the appearance of the browser window when the pointer is not positioned over the first link or the second link.
One use of the onMouseOver and onMouseOut event handlers is to create a rollover effect ,in which a button changes its appearance when the mouse pointer passes over it. You have doubtless seen this effect on many Web sites. I will show you how to create your own button rollover script later this afternoon.
The following script demonstrates the use of the onClick and onDblClick event handlers. This script creates a form with two buttons . The onClick event is assigned to the <INPUT> tag of the first button; the onDblClick event handler is assigned to the <INPUT> tag of the second button.
<HTML> <HEAD> <TITLE>Script 3.15 - onClick & onDblClick Example</TITLE> </HEAD> <BODY> <FORM> <INPUT TYPE="button" VALUE="Click on me!" onClick="window.alert('You single-clicked.')"> <INPUT TYPE="button" VALUE="Double-Click on ME" onDblClick="window.alert('You double-clicked!')"> </FORM> </BODY> </HTML>
When you load this page and click on one of the buttons, a prompt appears, informing you which button you clicked (see Figure 3.19).
Keyboard events are like mouse events in that they occur whenever the user presses or releases a keyboard key. There are three keyboard events: KeyDown, KeyUp , and KeyPress . The following example demonstrates how you can use the onKeyDown event handler to trap keyboard information from Netscape Navigator.
The script defines a simple form that consists of two elements: a TEXTAREA field and a button. The onKeyDown event handler is used to keep track of the total number of keystrokes typed by the user in the TEXTAREA field. The onKeyDown event is set to trigger each time the user types a new keystroke. It calls the CountKeyStrokes() function, which adds 1 to a variable called totalKeyStrokes . This variable stores a running total of the current number of keystrokes made by the user. When the user clicks on the form's button, a pop-up dialog is displayed that shows the total number of keystrokes entered so far by the user.
The event object's event.which property specifies the ASCII value of the key pressed or the ASCII value of the mouse button that was clicked.
Figure 3.20 demonstrates what happens when you run the script, enter a few words in the TEXTAREA field, and then click on the form's button.
Unlike other event handlers, the onerror event handler is spelled in all lowercase.
The onerror event handler automatically receives three arguments when it is triggered: the error message itself, the URL of the Web page, and the line number in the script where the error occurred. You can use the onerror event handler to respond to the error. For example, you can display an alert prompt, redirect the user to another Web page, call a function, advise the user to upgrade the browser or get a specific plug-in, and so on.
The onerror event handler works a little differently than other event handlers and has the following syntax.
However, the matching pair of parentheses are left off of the end of the function call. When used, the onerror event handler is set up in the head section of the HTML page, along with its associated function.
The following script demonstrates how to use the onerror event handler to display error information using a function called ErrorTrap() . This function accepts three arguments that map to the three arguments passed to the onerror event handler. The function uses these arguments to format three lines of text that present the error information. To produce an error on the page, I deliberately added an s to the end of the word window in the HTML page's body tag. windows is a not a valid browser object.
Note the return true ; statement at the end of the ErrorTrap function in the previous example. This statement tells the browser to suppress the error.
Figure 3.21 shows the results of loading this script using Internet Explorer. As you can see, the message written to the window tells you what the error was, where in the Web page the error occurred, and where the page is located.
<HTML> <HEAD> <TITLE>Script 3.18 - Another onError Example</TITLE> </HEAD> <BODY> <IMG NAME="xxxx" SRC="xxxx.jpg" onError="window.alert('Unable to load image!')"> </BODY> </HTML>
Figure 3.22 shows the results of loading the previous script. An alert prompt is immediately displayed when the browser fails to locate the specified xxxx.jpg image file.
Before wrapping up the first half of this afternoon, I want to show you a neat little trick using links and the onClick event handler. In the example that follows , I defined a link to a Web site to which I added the onClick event. Inside the event handler, I used the window.confirm() method to ask the user for confirmation before enabling the browser to load the link. The window.confirm() prompt gives the user two options. Clicking on OK returns a value of true , which enables the browser to load the Web page; clicking on Cancel returns a value of false , which prevents the browser from loading the specified URL.
<HTML> <HEAD> <TITLE>Script 3.19 - Age Verification Example</TITLE> </HEAD> <BODY> <A HREF="http://www.ptpmagazine.com" onClick="return(window.confirm('You must be older than 30 to visit ' + 'this site. Are you?'))";> ptpmagazine.com</A> </BODY> </HTML>
You can use a variation of this example to ask users whether they are sure they want to leave your Web site when they click on links.
Figure 3.23 shows what happens if you load the preceding page.
|[ LiB ]|