JavaScript Error Trapping

Before explaining the subject of catching errors with JavaScript, it is necessary to understand how errors occur. If you are doing object oriented programming. One of the situations that may occur is if you are writing complex codes that consist of many lines. Errors may occur when reading data from forms, fetching data from the database with Ajax, or trying to create data in the desired format. With the throw command, we can catch these errors and continue the proper functioning of the page.

Before moving on to the examples, let's examine the meanings of some expressions.

try statement: Code blocks that may cause errors are placed.

catch statement: It is used to catch the error when it occurs.

throw statement: Used to create a special error.

finally statement: Used to execute code regardless of what happens after try catch blocks.

Example: Let's try to use a function called test that has never been defined.

test(); //Uncaught ReferenceError: test is not defined

We will encounter the Uncaught ReferenceError: test is not defined error.

By writing the function between the try catch blocks, let's ensure that if the function is not defined, it gives the correct warning to the user and the program continues where it left off.


try{
test();
}
catch(error)
{
alert(error);
}

Tried to run the test() function between try. Since the function was not defined, it threw an error. When it occurred, it kept the error in a variable named error with the catch statement and reported the error to the screen as an alert.

Example 2: Let's look at an example of the concept of try catch finally. Let's imagine that we are trying to get the tag with the id of a tag that does not exist on the page, and then we want to assign a value to this tag. Let's assume that we want the process to give a completed warning at the end of the process, regardless of whether the value assignment process is completed or not. The code you need to write for this explanation will be as follows.


try{
var object =document.getElementById("name");
object.value="Sami";
}
catch(e)
{
alert("No name object! " + e.message);
}
finally {
alert("transaction completed!");
}

Example 3: Let's examine the concept of creating a custom error with throw. We want to get the TR ID number from the user with a form element.

If the user enters more than 11 digits, a warning will be given that you have entered too many digits and the focus will be on the form object.

If the user enters less than 11 digits, a warning will be given that you have entered too few characters and the focus will be placed inside the form.

If the user enters a value other than numeric characters, a warning will be given that you have entered incorrect characters and the form will be focused.

For the above definitions, we write a script with the throw statement as follows.


var object =document.getElementById("tc");
var warning =document.getElementById("warning");
object.onkeypress=function(){
warning.textContent="";
}
object.onblur=function(){
try{
if(isNaN(object.value)) throw "You entered the wrong character.";
if(object.value.length<11) throw "You entered less than 11 characters.";
if(object.value.length>11) throw "You entered more than 11 characters.";
}
catch(e)
{
warning.textContent=e;
object.focus();
}
}