JavaScript tutorial

JavaScript Errors

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.

Example

<!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.

try and catch

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.

Syntax

try {
    //code block to be tested for errors
} 
catch(e) {
    //code block to be execute if error occur
}

JavaScript errors

JavaScript stops execution and generate error message when an error occurs.

The throw statement

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

Input Field validation Example

<!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>

Download the code Run the code

HTML5 validation

Above example uses JavaScript for validation. Modern browsers supports HTML5 attributes which has predefined validation rules.

The finally statement

The finally statement is used to execute code after try catch block, irrespective of result.

Syntax

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.
}

Example

<!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>

Download the code Run the code

<<< JavaScript Regular ExpressionsJavaScript Debugging >>>

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .