Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Exploring the Exception/Error Handling in JavaScript - HTML Page

In this article I will discuss the javascript error handling using try and catch blocks. The examples are also given for different scenarios.

Introduction:

In this section of JavaScript tutorial, I will cover the Exception Handling in JavaScript, Catching and Handling of JavaScript exception and displaying corresponding different error messages.

Description:

  • First of all you should know about exception: An Exception is error or problem that arises during the code execution. Reason may be following- If a communication link has been lost in middle of communication, user has entered invalid data, file are unavailable that need to be accessed by executing program.
  • Now we know that what exceptions are. Now we need to know that how to handle exceptions in JavaScript. In this tutorial we will be discussing the various techniques to handle exceptions in JavaScript. Basically JavaScript implements the try, catch, finally construct as well as the throw operator to handle the exceptions.

Catching Exceptions in JavaScript:

The Try-Catch block is used to catch the exceptions in JavaScript. Try Catch block in JavaScript is very much similar to try catch block of other programming languages Syntax will be like this:

try{ // Block of code where exception occurs } catch (exception) { // If error occur this block will handle the error. } finally{ // This code will always get executed without any problem. }
  • Suspected code or code which is to be tested for execution will be pack in try block and all exception which will be occur in try block will be caught in catch block. If an exception occurs within the try block, then control is immediately passed to the catch block.
  • The last one is finally block which is optional. Code under finally block will get executed after the try and catch statement, regardless of any exception. The finally clause is even executed if an exception occur that is not caught. One more interesting fact about finally is that it will get executed if try catch block executes a return statement.

Following program will clear the concept of catching and handling of exceptions.

Listing 1: Script of error handling program

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var excp="";
function errormessage()
{
try
  {
  aGlert("Welcome ! This is your Entry point!");
  }
catch(err)
  {
  excp="Woah ! I got Error message \n\n";
  excp+="Error Description " + err.errormessage + "\n";
  excp+="click ok to go ahead.\n\n";
  alert(excp);
  }
}
</script>
</head>
<body>
<input type="button" value="Display Content" onclick="errormessage()" />
</body>
</html>
Above Figure is output of error handling program using try catch statement

Figure 1: Above Figure is output of error handling program using try catch statement.

Explanation:

The given example is expecting an alert message saying “Welcome ! This is your Entry point!”. But when user clicks on the “Display content” button, it will through an exception. The Spelling of alert() is misspelled, at this point a JavaScript error occurs. The catch block catches the error and executes a custom code to handle it. The code displays a custom error message to user with description exactly what happened.

Finally Block:

In the beginning of tutorial I told introduce you to finally .Finally block will always execute without any condition after try and catch block .This is an example

Listing 2: Program of exception handling using finally block

<html>
<head>
<script type="text/javascript">
<!--
function exception_finally()
{
   var MSG = "900 USD";
   
   try {
      alert("Value of variable MSG is : " + MSG );
   }catch ( e ) {
      alert("Error: " + e.description );
   }finally {
      alert("Finally block will always execute without any condition!" );
   }
}
//-->
</script>
</head>
<body>
<p>Click the following to see exactly what happen:</p>
<form>
<input type="button" value="get value" onclick="exception_finally();" />
</form>
</body>
</html>
Before ok

After Ok

Above figure is output of code which describe the working of finally block

Figure 2: Above figure is output of code which describe the working of finally block.

Explanation

Here finally block is along with alert("Finally block will always execute without any condition!" ); Unconditionally Finally block will always execute . Finally block doesn’t matter whatever inside try and catch block and also it doesn’t matter if exception is caught.

Throw statement:

After try, catch, finally we can use throw statement for handling manual exception or customized exception. Later this exception can be handled out with appropriate action. Following example describe the manual exception and use of throw statement.

Listing 3: script of throw statement

<html>
<head>
<script type="text/javascript">
function excthrow()
{
   var i = 5;
   var j = 0;
   
   try{
      if ( j == 0 ){
         throw( "Divide by zero error" ); 
      }else{
         var k = i / j;
      }
   }catch ( e ) {
      alert("Error: " + e );
   }
}
</script>
</head>
<body>
<p>Click the following to see exactly what happed:</p>
<form>
<input type="button" value="Click Me" onclick="excthrow();" />
</formn
</body>
</html>
above figure is output of throw statement

Figure 3: above figure is output of throw statement.

Explanation:

Manually when we divide 5 by 0, we got unexpected error. The above program manually handles this case and through the “divide by zero” exception, later this exception is handled by try and catch block and display the message.

Conclusion:

This tutorial gathered the basic principles of exception handling .if you have any queries please comment here.



I am having total 7+ years of experience in developing applications using C#, VB.NET, ASP.NET, Silverlight, WCF, SQL Server and Oracle. I am holding a M.Tech degree in Intelligent systems. For more information, visit my Linkedin p...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login