Syntax errors:
Syntax errors, also called parsing errors, occur at compile time
for traditional programming languages and at interpret time for JavaScript.
For example, the following line causes a syntax error because it
is missing a closing parenthesis:
|
<script
type="text/javascript">
<!--
window.print(;
//-->
</script>
|
When a syntax error occurs in JavaScript, only the code contained
within the same thread as the syntax error is affected and code in other
threads gets executed assuming nothing in them depends on the code containing
the error.
Runtime errors:
Runtime errors, also called exceptions, occur during execution
(after compilation/interpretation).
For example, the following line causes a run time error because
here syntax is correct but at run time it is trying to call a non existed
method:
|
<script
type="text/javascript">
<!--
window.printme();
//-->
</script>
|
Exceptions also affect the thread in which they occur, allowing
other JavaScript threads to continue normal execution.
Logical errors:
Logic errors can be the most difficult type of errors to track
down. These errors are not the result of a syntax or runtime error. Instead,
they occur when you make a mistake in the logic that drives your script and you
do not get the result you expected.
You can not catch those errors, because it depends on your
business requirement what type of logic you want to put in your program.
The try...catch...finally Statement:
The latest versions of JavaScript added exception handling
capabilities. JavaScript implements the try...catch...finally construct as well as the throw operator to handle exceptions.
You can catch programmer-generated and runtime exceptions, but you cannot catch JavaScript syntax errors.
Here is the try...catch...finally block syntax:
|
<script
type="text/javascript">
<!--
try {
//
Code to run
[break;]
} catch ( e ) {
//
Code to run if an exception occurs
[break;]
}[ finally {
//
Code that is always executed regardless of
//
an exception occurring
}]
//-->
</script>
|
The try block must be followed by either exactly one catch block or
one finally block (or one of both). When an exception occurs in the try block,
the exception is placed in e and the catchblock is
executed. The optional finally block executes unconditionally after try/catch.
Examples:
Here is one example where we are trying to call a non existing
function this is causing an exception raise. Let us see how it behaves without
with try...catch:
|
<html>
<head>
<script
type="text/javascript">
<!--
function myFunc()
{
var a
= 100;
alert("Value of variable a is : " + a );
}
//-->
</script>
</head>
<body>
<p>Click the following to see the
result:</p>
<form>
<input type="button"
value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>
|
Now let us try to catch this exception using try...catch and
display a user friendly message. You can also suppress this message, if you
want to hide this error from a user.
|
<html>
<head>
<script
type="text/javascript">
<!--
function myFunc()
{
var a = 100;
try {
alert("Value of variable a is : " + a );
}
catch ( e ) {
alert("Error: " + e.description );
}
}
//-->
</script>
</head>
<body>
<p>Click the following to see the
result:</p>
<form>
<input type="button" value="Click
Me" onclick="myFunc();" />
</form>
</body>
</html>
|
You can use finally block which will always execute unconditionally after try/catch.
Here is an example:
|
<html>
<head>
<script
type="text/javascript">
<!--
function myFunc()
{
var a
= 100;
try {
alert("Value of variable a is : " + a );
}catch ( e ) {
alert("Error: " + e.description );
}finally {
alert("Finally block will always execute!" );
}
}
//-->
</script>
</head>
<body>
<p>Click the following to see the
result:</p>
<form>
<input type="button"
value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>
|
The throw Statement:
You can use throw statement to raise your built-in exceptions or your customized
exceptions. Later these exceptions can be captured and you can take an
appropriate action.
Syntax
throw exception
The exception can be a JavaScript String, a
Number, a Boolean or an Object.
Following is the example showing usage of throw statement.
Ex1:
<!DOCTYPE html>
<html>
<body>
<script>
function myFunction()
{
var y=document.getElementById("mess");
y.innerHTML="";
try
{
var x=document.getElementById("demo").value;
if(x=="") throw
"empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw
"too high";
if(x<5) throw
"too low";
}
catch(err)
{
y.innerHTML="Error: " + err + ".";
}
}
</script>
<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button"
onclick="myFunction()">Test Input</button>
<p id="mess"></p>
</body>
</html>
|
<html>
<head>
<script
type="text/javascript">
<!--
function myFunc()
{
var a
= 100;
var b
= 0;
try{
if
( b == 0 ){
throw( "Divide by zero error." );
}else{
var c = a / b;
}
}catch ( e ) {
alert("Error: " + e );
}
}
//-->
</script>
</head>
<body>
<p>Click the following to see the
result:</p>
<form>
<input type="button" value="Click
Me" onclick="myFunc();" />
</form>
</body>
</html>
|
You can raise an exception in one function using a string,
integer, Boolean or an object and then you can capture that exception either in
the same function as we did above, or in other function using try...catch block.
The onerror() Method
The onerror event handler was the first feature to facilitate error handling
for JavaScript. Theerror event is
fired on the window object whenever an exception occurs on the page. Example:
|
<html>
<head>
<script
type="text/javascript">
<!--
window.onerror = function () {
alert("An error occurred.");
}
//-->
</script>
</head>
<body>
<p>Click the following to see the
result:</p>
<form>
<input type="button"
value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>
|
The onerror event handler provides three pieces of information to identify the
exact nature of the error:
- Error message . The same
message that the browser would display for the given error
- URL . The file in
which the error occurred
- Line number . The line
number in the given URL that caused the error
Here is the example to show how to extract this information
|
<html>
<head>
<script
type="text/javascript">
<!--
window.onerror = function (msg, url, line) {
alert("Message : " + msg );
alert("url : " + url );
alert("Line number : " + line );
}
//-->
</script>
</head>
<body>
<p>Click the following to see the
result:</p>
<form>
<input type="button"
value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>
|
You can display extracted information in whatever way you think it
is better.
You can use onerror method to show an error message in case there is any problem in
loading an image as follows:
|
<img src="myimage.gif"
onerror="alert('An error occurred loading the image.')"
/>
|
You can use onerror with many HTML tags to display appropriate messages in case of
errors.
No comments:
Post a Comment