Javascript errors
There are several ways to test for and find errors in Javascript.
This lesson focuses on:
- The Try.....Catch statement
- The throw keyword
- The onerror event handler
The Try.....Catch statement
The Try.....Catch statement contains two blocks of code.
-
The try block
The try block contains code to be executed.
-
The catch block
The catch block contains code to be executed if an error occurs in the code within the try block.
Syntax:
try{
code to be executed
}
catch (err){
code to be executed if an error
occurs in the code within the try block
}
Example:
<script type="text/javascript">
try{
//there is an error in this code
//document.write is misspelled as document.writee
//this code will not execute
//instead, the code in the catch block will execute
document.writee("Here is some text");
}
catch (err){
//this code will be executed
//since there is an error in the try block
document.write("An error occured");
}
</script>
Output:
The above example specifies some code to execute in a try block. There is an error in this code, so the code within the catch block will be executed.
The throw keyword
The throw keyword is used together with the Try.....Catch statement to create exceptions. With the throw keyword, you can generate relevant error messages when errors occur.
Example:
<html>
<head>
<title>The throw keyword</title>
</head>
<body>
<script type="text/javascript">
//declare a variable
var aNumber = 5;
try{
//check if the variable is an even number
//by dividing it by 2 and getting the remainder
//if the remainder is 0 then it is an even number
//otherwise it is not
if (aNumber % 2 != 0){
throw "Err1";
}
}
//catch an error
catch (err){
//if the error is "Err1"
//print a statement accordingly
if (err == "Err1"){
document.write("Not an odd number!");
}
}
</script>
</body>
</html>
Output:
In the above example, a try block specifies that if the variable aNumber is not an add number to throw the error "Err1". The catch block specifies that if a caught error is "Err1" to print the text "Not an odd number!"
The onerror event handler
The onerror event handler is used whenever there is an error in a script on a webpage.
You have to create a function to handle the error(s) to use the onerror event handler. Once you have the function, you can call it with the onerror event handler. The function used to handle the error(s) should contain three parameters - one to display an error message, the second to display the url of the page, and the third to display the line where the error occured.
Syntax:
onerror=handleErr
function functionToHandleError(message, url, line){
code to handle the error
}
Example:
<html> <head> <title>The onerror event handler</title> </head> <body> <script type="text/javascript"> //handle the handleError function //with the onerror event handler onerror=handleError //declare a variable //this variable will be used //to print the error message var message = ""; //print details about the error function handleError(message, url, line){ message = "An error occured on this page.\n\n"; message += "Error: " + message + "\n"; message += "URL: " + url + "\n"; message += "Line: " + line + "\n\n"; alert(message); } function greetUser(){ //the document.write() statement //is misspelled as document.wrte() //to generate an error document.wrte("Hello!"); } </script> </body> </html>
In the above example, the onerror event handler calls the handleError function which displays the details about any errors in the script in an alert box.
