JAVASCRIPT BASICS
- Introduction to JavaScript
- Javascript Features
- JavaScript in HTML
- JavaScript Syntax
- Output in JavaScript
- JavaScript Variables
- Javascript let Keyword
- JS Literals and Keywords
- JavaScript Data Types
- JavaScript Operators
- JavaScript Events
- Javascript const Keyword
JAVASCRIPT FLOW CONTROL AND LOOPS
- JS if, else and else if
- JavaScript for Loop
- JS while and do-while loop
- JS Switch case
- JS break and continue
JAVASCRIPT ADVANCED
- JavaScript Strings
- JavaScript String Methods
- JavaScript Array
- JavaScript Regular Expression
- JavaScript Popup Boxes
- JavaScript Functions
- JavaScript Default Parameters
- JavaScript Rest Parameters
- JavaScript Arrow Function
- JavaScript Errors
- JavaScript Error Handling
- JavaScript Cookies
JAVASCRIPT OBJECT
- JavaScript Objects
- JavaScript User-defined Object
- JavaScript Boolean Object
- JavaScript Number Object
- JavaScript Math Object
- JavaScript Date Object
- JavaScript RegExp Object
JAVASCRIPT WEB API AND INTERFACES
An Exception is an error that occurs at the time of execution(runtime) due to an illegal operation when a program is syntactically correct. For example, whenever you try to reference an undefined variable or call a non-existent method; an exception will occur.
We have already covered JavaScript Error and in this tutorial we will cover how we can handle error and runtime excption in our JavaScript code to avoid abrupt end of code execution.
So Exception or Error handling begins by identifying the code which we think may give some error/exception when we run it. Such code blocks can be enclosed within a special try
block which is a special code block in which if any runtime exception occurs, then we can handle that exception in the catch
block.
The statements that you want to monitor for an exception are contained within a try
block. If an exception occurs within the try
block then it is thrown.
You can catch this thrown exception by using the catch
block that handles the exception.
Ways to Handle Errors/Exceptions in JavaScript:
There are mainly two ways to handle exceptions in JavaScript:
1. Using try
, catch
and finally
statement
2. Using the onerror
event
Let us discuss the above given ways to handle exception one by one.
JavaScript try
and catch
Statement
In JavaScript, you must the code, which can generate an error/exception at runtime, inside the try
block. Immediately, after the try
block, there should be a catch
block that specifies the exception type you want to catch.
In simple words, the code statements which we want to execute, are kept inside the try block, followed by a catch block. This informs JavaScript to try and execute the given code statements and if any exception occurs, throw it, and the catch block will catch the exception, and then the code inside the catch block is executed.
JavaScript try
and catch
Syntax:
Let’s see the syntax for the try and catch blocks:
try
{
// code that can cause an error
}
catch(err)
{
// what to do when an error occurs
}
In the above syntax, there are two blocks try
and catch
. Where the try
block contains the suspected code that can generate errors. If an error occurs then try
block throws the exception that is caught by the catch
block, in which we can handle it as we want. We can either show a user readable message or we can show the error message in an alert box.
JavaScript try
and catch
Example:
Let’s take an example to see JavaScript try
and catch
block in action:
<html>
<head>
<title>
Using try-catch statement
</title>
<script type="text/javascript">
try
{
/* n is undefined, so below
code will throw an exception
*/
document.write(n);
// the line below will not be executed
document.write("Hello World!");
}
catch(err)
{
document.write(err.message);
}
</script>
</head>
<body>
<!-- HTML body -->
</body>
</html>
In the above code, we have created a Web page that shows how to handle an exception using try-catch statement. It contains two code blocks – try
and catch
.
In the try
block, we are trying to print the value of undefined variable n
, Therefore, the try
block throws an exception that is caught by the catch
block. Then the catch
block displays the message stored in the Error object using the err
reference.
Note that in the try
block, there is one more document.write()
function call containing the Hello World! string , which is never executed because once an exception is thrown, the program transfer the control from try
block to the catch
block.
JavaScript finally
Statement
We also have an optional statement called as the finally
statement that is associated with the try
and catch
statement. It is used to execute some code after the try and catch code blocks are executed. JavaScript finally
statement makes sure that the code statements inside the finally
block are executed, no matter what.
JavaScript finally
Statement: Syntax
The finally
statement is used after the try
and catch
statements,
try
{
// code that can cause an error
}
catch(err)
{
// what to do when an error occurs
}
finally
{
//code that execute in all the cases
}
The optional finally
block of try-catch statement always runs its code whether or not an exception is thrown. There may be two cases:
- If the code in the
try
block runs successfully without any exception, thencatch
block will not get executed but thefinally
block will be executed. - If there is an error in the
try
block, then thecatch
block executes, after thatfinally
block executes
Anytime a control is about to return to the caller method from inside a try
or catch
block through an explicit return
statement, the finally
block is executed just before the control returns.
In short, no matter what happens, if you have defined a finally
block, it will be executed.
JavaScript try
, catch
and finally
Example:
Here we have another example of handling runtime exception in JavaScript code and using the finally
statement.
<html>
<head>
<title>
Using Finally block
</title>
<script type="text/javascript">
try
{
// this will cause exception
document.write(n);
}
catch(err)
{
// catch exception and handle it
document.write(err.message);
}
finally
{
// the finally block
document.write("<br/> I am FINALLY!");
}
</script>
</head>
<body>
<!-- HTML body -->
</body>
</html>
In the above code, we have created a web page that shows how the finally block works. The above code contains three blocks: try, catch and finally. The try block generates an undefined variable exception that is caught by the catch block. Then the finally
block executes and displays the Hello world string, even when the exception has occurred.
JavaScript onerror
Event to Handle Exception
Any error that is not handled by try-catch statement causes the onerror
event to fire on the Window object. The onerror
event does not create an event object, it is called by the window that has errors.
It accepts three arguments:
- The error message
- The Uniform Resource Locator(URL) of the page on which error has occurred
- The line number that contains the error.
When the onerror
event triggers, it displays the error message. The URL of the web page, the line number at which error occurs.
JavaScript onerror
Event Syntax:
Following is the syntax for using the onerror
event:
window.onerror = function(errmessage, url, line)
{
alert(errmessage);
}
In the above code, we used the window object to call the onerror
event and we can specify an event handler function for it.
JavaScript onerror
Event Example:
In this example, we are handling error using onerror
event:
<html>
<head>
<title>
Using onerror Event
</title>
<script type="text/javascript">
// using onerror event to handle error
window.onerror = function(ermessage, url, line)
{
document.write(ermessage+"<br/>");
document.write(url+"<br/>");
document.write(line+"<br/>");
}
// the below line will cause error
document.write(n);
</script>
</head>
<body>
<!-- HTML body -->
</body>
</html>
Well, with this we have reached the end of JavaScript Exception handling tutorial. In this tutorial we learned about the try
, catch
and finally
statements which are used for handling runtime exception in JavaScript code and we covered one more way of handling exception which is using the onerror
event.
3 thoughts on “JavaScript Error Handling – try, catch, finally and onerror Event”