Learn Advanced JavaScript Programming

Table of Contents

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--

// assign user-defined function to intercept errors
window.onerror = myOnError

// create array to hold error messages
messageArray = new Array(0)

// create array to hold URLs of errors
urlArray = new Array(0)

// create array to hold line numbers of errors
lineNumberArray = new Array(0)

// error-intercepting function
function myOnError(msg, url, lno) {
// assign message of current error to the array
// element following the last element
messageArray[messageArray.length] = msg

// assign URL of current error to the array element
// following the last element
urlArray[urlArray.length] = url

// assign line number of current error to the array element
 following the last element
lineNumberArray[lineNumberArray.length] = lno

// return true to intercept JavaScript errors
return true
}

function displayErrors() {
// open new browser window to report errors
errorWindow = window.open('','errors','scrollbars=yes')

// write header to window
errorWindow.document.write('<B>Error Report</B><P>')

// loop to print all error data
for (var i = 0; i < messageArray.length; ++i) {
errorWindow.document.write('<B>Error in file:</B> ' +
 urlArray[i] + '<BR>')
errorWindow.document.write('<B>Line number:</B> ' +
 lineNumberArray[i] + '<BR>')
errorWindow.document.write('<B>Message:</B> ' +
 messageArray[i] + '<P>')
}
// close data stream
errorWindow.document.close()
}

// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" onClick="displayErrors()"
VALUE="display errors">
</FORM>
</BODY>

Example 11-3 (ex11-3.htm). A set of functions to intercept and display a list of errors.

At first, the function reference is assigned to window.onerror. Three arrays are then created; each holds a different piece of data associated with errors that might occur. The length of each array is set to 0, because no errors have occurred thus far. The function that intercepts the JavaScript errors is myOnError(). Its arguments are the error message, URL, and line number, respectively.

You do not need to understand the functions at this stage because they use concepts that have not been discussed yet, such as arrays and windows. The only point you should be aware of is that the function returns true to instruct JavaScript that it is intended to intercept the standard JavaScript errors. In general, a list of the JavaScript errors generated by the script is printed in another window when the user clicks the button. See the section “Calling Event Handlers Explicitly” for more details on the event handler implementation demonstrated in Example 11-3 (window.onerror).

Figure 11-6. An error generated by a script that attempts to access a non-existent object.

Emulating Events via Methods

We mentioned earlier that each event belongs to a specific object. Some events are associated with more than one object, especially since the release of Netscape Navigator 3.0, which expanded certain events to additional objects. Another characteristic of objects is methods. They are functions that usually work on the data related to that object, the properties. Some methods of objects that include event handlers actually emulate those events. You can use such a method to cause an event to occur. These methods are usually called event methods. Although we will discuss these methods in depth later, here are some:

blur()
click()
focus()
select()
submit()

Events generated with these methods are like any other method. Most importantly, they do not invoke their corresponding event handlers.

When you emulate an event, it is important that you do so only after the browser has finished laying out the page, or at least the object (usually a form element) with which the method is associated. The following page generates an error:

<HTML>
<HEAD>
<TITLE>Emulating an event of a non-existent (thus far) form</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

document.form1.field1.focus()

// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1" METHOD=POST>
<INPUT TYPE="text" NAME="field1">
</FORM>
</BODY>
</HTML>

The error message is:

This error is not guaranteed to be exactly the same on all platforms. Emulating an object’s event that has not yet been laid out is just one example that creates such an error. Generally speaking, you cannot refer to any element of a page that has not yet been laid out. A deferred script is allowed to refer to an object laid out after the script, provided that you do not execute that script before the object has been laid out. We will discuss this issue in depth throughout the book.

Calling Event Handlers Explicitly

In Netscape Navigator 3.0x and above you can set an event handler from within a JavaScript script. Here is a short example:

<HTML>
<HEAD>
<TITLE>Emulating an event of a non-existent (thus far) form</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

function alert1() {
alert("This is the first function.")
}

function alert2() {
alert("This is the second function.")
}

// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1" METHOD=POST>
<INPUT TYPE="button" NAME="button1"
VALUE="button1" onClick="alert1()">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--

document.form1.button1.onclick = alert2

// -->
</SCRIPT>
</BODY>
</HTML>

Example 11-4 (ex11-4.htm). You can call a JavaScript script via an event handler.

Table of Contents