Previous Page
Next Page

Handling Errors

While you may have years of experience working with computers, it's a good bet that many of your site's visitors won't. Consequently, you'll want to give them meaningful error messages instead of the technobabble that most browsers return if they object to something the user does. Script 3.13 shows how to use JavaScript's try/throw/catch commands to produce a friendly, useful error message. We've built this into a simple square root calculator.

Script 3.13. Use this script to have JavaScript handle errors gracefully.

window.onload = initAll;

function initAll() {
     var ans = prompt("Enter a number","");
     try {
        if (!ans || isNaN(ans) || ans<0) {
            throw new Error("Not a valid number");
        }
        alert("The square root of " + ans + " is " + Math.sqrt(ans));
     }
     catch (errMsg) {
        alert(errMsg.message);
     }
}

To handle errors gracefully:

1. 
var ans = prompt("Enter a number", "");



Here's an ordinary, everyday prompt, which we're storing in the ans variable for later use. In this case, we want the user to enter a number. If they do that successfully, JavaScript displays the square root of whatever they entered.

2. 
try {



However, if they didn't enter a number, as in Figure 3.8, we want to be able to catch it gracefully and display something meaningful. Yes, we'll be polite about it, even though the user entered words when the alert asked for a number. We start off by using the try command. Inside its block of code, we'll check to see if the user's entry was valid.

Figure 3.8. We want a number, but the user could enter anything, like this non-numeric entry.


3. 
if (!ans || isNaN(ans) || ans<0) {
  throw new Error("Not a valid number");
}

There are three things we care about: no entry at all, or if the user entered something but it was non-numeric, or if the entry was numeric but was a negative number (because the square root of a negative number is an imaginary number, and that's beyond this example). If !ans is true, that means that the user didn't enter anything. The built-in isNaN() method checks to see if the parameter it's passed is "Not a Number." If isNaN() returns true, we know that something invalid was entered. And if ans is less than 0, it's a negative number. In any of these cases, we want to throw an error; in this case, it says "Not a valid number". Once an error is thrown, JavaScript jumps out of the TRy block and looks for a corresponding catch statement. Everything between here and there is skipped over.

4. 
alert("The square root of " + ans + " is " + Math.sqrt(ans));



If something valid was entered, the square root is displayed, as shown in Figure 3.9.

Figure 3.9. Here's the result of the script acting on a number.


5. 
}



This closing brace ends the try block.

6. 
catch (errMsg) {
  alert(errMsg.message);
}



Here's the promised and looked-for catch statement. The error is passed in as a parameter, and the message part of the error is displayed (Figure 3.10). If no error was thrown, the code inside the catch will never be executed.

Figure 3.10. If bad data was entered, let the user know.


Tip

  • There's another, optional part to this: the final {} block. That would go after the catch and would contain code that should be executed whether the try threw an error or not.



Previous Page
Next Page