Home arrow JavaScript arrow Page 7 - JavaScript Exception Handling

Raising The Bar - JavaScript

Wondering why JavaScript doesn't include exception-handling constructs like its bigger cousins? Well, the newest version of JavaScript does - and this article tells you all about it, explaining how you can use the new Error object and the "try-catch" constructs to trap and resolve errors in script execution.

TABLE OF CONTENTS:
  1. JavaScript Exception Handling
  2. Anatomy Of An Exception
  3. Playing Catch
  4. Being Verbose
  5. All For One...
  6. The Final Solution
  7. Raising The Bar
  8. Endzone
By: icarus, (c) Melonfire
Rating: starstarstarstarstar / 239
August 14, 2003

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

Thus far, you've been working with JavaScript's built-in exceptions, which can handle most logical or syntactical errors. However, JavaScript also allows you to get creative with exceptions, by generating your own custom exceptions if the need arises.

This is accomplished via JavaScript's "throw" statement, which is used to raise errors which can be detected and resolved by the "try" family of exception handlers. The "throw" statement needs to be passed an error type. When the exception is raised, this exception name and description will be made available to the defined exception handler.

Let's go to a quick example. In the following piece of code, if the value entered into the form field is greater than 99, the code will manually generate a RangeError exception, which will be caught and displayed appropriately.


<html>
<head>
<script language="JavaScript">

function checkAge()
{
try {
// if incorrect value in form
// generate an error
if (document.forms[0].age.value > 99)
{
throw RangeError;
}
} catch (e) {
// catch all thrown errors and print error type
alert(e.name);
}
}

</script>
</head>

<body>

<form>
<input type="text" name="age" onBlur="checkAge()">
</form>

</body>
</html>

You can also create your own exceptions, via the JavaScript Error constructor. The following example demonstrates, by creating a custom error type called idiotUserError.



In this case, when you run the script, a new Error object will be created named idiotUserError, with the message specified in the Error object constructor. This error can now be thrown using the regular "throw" statement, as in the example above.

Let's try a more useful example:


<html>
<head>
<script language="JavaScript">

// create new Error objects
badNameError = new Error ("System user name does not match actual user name"); noNameError = new Error ("System user name cannot be blank");

// create generic exception handler
// to display error message
// you may want to filter down error types
// further inside this and handle each type
// differently
function mainExceptionHandler(e)
{
alert (e.message);
}

// general form validation functions
function validateForm()
{
checkName();
}

// check form values
// if errors, throw appropriate exception
function checkName()
{
try {
if (document.forms[0].username.value == "")
{
throw noNameError;
}

if (document.forms[0].username.value != "john")
{
throw badNameError;
}
} catch (e) {
// any and all errors will go to this handler
mainExceptionHandler(e);
}
}

</script>
</head>

<body>

<form onSubmit="validateForm()">
Enter your system username: <input type="text" name="username"> <br> <input type="submit" name="submit" value="Go"> </form>

</body>
</html>

In this case, if the value entered into the form is blank or not "john", a custom exception will be thrown by the code. This custom exception can be caught by a generic exception handler such as the one used above, and the exception can be routed and resolved appropriately



 
 
>>> More JavaScript Articles          >>> More By icarus, (c) Melonfire
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: