JavaScript has try, catch, throw and finally statements to handle errors.
The try statement test a code block for any errors.
The catch statement is use to handle errors.
The throw statement is use to create custom errors.
The finally statement is use to execute code irrespective of try…catch result.
While JavaScript is executing it might possible to occur different errors.
Errors can occur due to wrong syntax code written by coder or due to wrong output.
<!DOCTYPE html>
<html>
<body>
<p id="test"></p>
<script>
try {
write("Welcome to JavaScript tutorial!");
}
catch(err) {
document.getElementById("test").innerHTML = err.toString();
}
</script>
</body>
</html>
Download the code Run the code
In above example, we have used a function in try block which is not defined. Catch block catches error and display proper error message.
The try statement allows you to define a code block which will be tested for errors while its being executing.
The catch statement allows you to define a code block which will execute if there is an error in try block
The try and catch statements are always used in pairs. Only try statement or catch statement cannot be used alone.
try { //code block to be tested for errors } catch(e) { //code block to be execute if error occur }
JavaScript stops execution and generate error message when an error occurs.
The throw statement allows you to create custom error messages. The exception can be either a string, number an object or Boolean.
throw "Undefined function"; throw 500;
Normally throw statement is used with try…. catch statements to control program flow and generate custom error messages
<!DOCTYPE html>
<html>
<body>
<p>Please input a string:</p>
<input id="text" type="text">
<button type="button" onclick="checkIsString()">Validate Input</button>
<p id="message">Test</p>
<script>
function checkIsString() {
var message, str;
message = document.getElementById("message");
message.innerHTML = "";
str = document.getElementById("text").value;
try {
if(str == "") throw "String empty";
str = Number(str);
if(str < 1) throw "Number less than 1";
if(str > 100) throw "Number less greater 100";
else throw "Number bettwen 1 and 100";
}
catch(err) {
message.innerHTML = "Input is " + err;
}
}
</script>
</body>
</html>
Above example uses JavaScript for validation. Modern browsers supports HTML5 attributes which has predefined validation rules.
The finally statement is used to execute code after try catch block, irrespective of result.
try { //code block to be tested for errors } catch(e) { //code block to be execute if error occur } finally { //code block to be execute after try catch block executes irrespective of result. }
<!DOCTYPE html>
<html>
<body>
<p>Please input a string:</p>
<input id="text" type="text">
<button type="button" onclick="checkIsString()">Validate Input</button>
<p id="message">Test</p>
<script>
function checkIsString() {
var message, str;
message = document.getElementById("message");
message.innerHTML = "";
str = document.getElementById("text").value;
try {
if(str == "") throw "String empty";
str = Number(str);
if(str < 1) throw "Number less than 1";
if(str > 100) throw "Number less greater 100";
else throw "Number bettwen 1 and 100";
}
catch(err) {
message.innerHTML = "Input is " + err;
}
finally {
document.getElementById('text').value = '';
}
}
</script>
</body>
</html>