JavaScript Errors

There will be errors in the code. It is good practice to handle exceptions/errors.

Exceptions are a type of error that occurs during the execution of an application. Errors should be logged. Sometimes it is possible to recover a bug and proceed.
Other cases the user should get information that an error occured and possible solutions.


Throw, Try, Catch and Finally

The try statement encapsulates a block of code and test it for errors.

The catch statement handles any exception in the try block.

The throw statement creates an exception that will be handled by the catch block.

The finally statement will execute code after try and catch. The finally block will execute regardless if an exception is thrown or not.

 

JS JavaScript - Throw, Try, Catch and Finally

try {
    tryCode - Block of code to try (required)
}
catch(err) {
    catchCode - Block of code to handle errors (optional)
    err - Object that contain information about the exception (required in a catchCode)
} 
finally {
    finallyCode - Block of code to be executed regardless of the try / catch result (optional)
}


Example - JavaScript throws an Exception

The code contains an error. JavaScript will throw an exception that will be catched.

JS JavaScript - Example - JavaScript throws an Exception

<div id="status"></div>
 
<script>
try {
    aleeert("This gives me a bug in the code!");
}
catch(err) {
   var errMsg = "Error occured running the code, errormessage: " + err.message;
   document.getElementById("status").innerHTML = errMsg;
}
</script>

The Throw Statement

The developer may throw an Exception in the code if there is a situation that can not be resolved.

The throw statement can contain a custom error object.

It is possible to throw the exception using different datatypes. The exception may be a String, a Number, a Boolean or an Object.

JS JavaScript - The Throw Statement

// throw an exception as a text
throw "You entered an invalid input";
// throw an exception as a number
throw 88;

JS JavaScript - Try, Catch and Finally

<script>
function validateInput(input) {
   var status = document.getElementById("appStatus");
 
   try { 
      if(input == "") throw "empty";
      if(isNaN(input)) throw "not a number";
 
      x = Number(input);
      if(input < 18) throw "too low";
      if(input > 100) throw "too high";
   }
   catch(err) {
      status.innerHTML = "The value you added is " + err;
   }
   finally {
      document.getElementById("demo").value = "";
   }
}
</script>
 

The Finally Statement

The finally statement is executed after try and catch, regardless if there was a bug in the code or not.

JS JavaScript - The Finally Statement

try {
    Block of code to try
}
catch(err) {
    Block of code to handle errors
} 
finally {
    Block of code to be executed regardless of the try / catch result
}

Example - The Finally Statement

The developer may throw an Exception in the code if there is a situation that can not be resolved.

The throw statement can contain a custom error object.

The error can be a String, a Number, a Boolean or an Object.

JS JavaScript - Example - The Finally Statement

<script>
function validateInput(input) {
   var status = document.getElementById("appStatus");
 
   try { 
      if(input == "") throw "empty";
      if(isNaN(input)) throw "not a number";
 
      x = Number(input);
      if(input < 18) throw "too low";
      if(input > 100) throw "too high";
   }
   catch(err) {
      status.innerHTML = "The value you added is " + err;
   }
   finally {
      document.getElementById("description").value = "This is text from the finally statement";
   }
}
</script>
 

The Error Object

JavaScript has an error object that provides information when an exception occurs.

The error object have two properties: name and message.

Error Object Properties

Name:      Sets or returns an error name
Message:  Sets or returns an error message (a string)


Error Object Name Values

The name property have six possible values

JS JavaScript - Error Object Name Values

Error Name Description Example
SyntaxError A syntax error has occurred aleeert('alert is spelled wrong');
RangeError A number "out of range" has occurred num.toPrecision(500);
ReferenceError An illegal reference has occurred var x; // y is not defined
x = y + 1;
TypeError A type error has occurred var x = 10;
// Cannot have uppercase of a number
x.toUpperCase();
URIError An error in encodeURI() has occurred decodeURI("%%%");
EvalError An error has occurred in the eval() function
Not supported by new versions of JavaScript, use SyntaxError

Example - Syntax Exception

JS JavaScript - Example - Syntax Exception

try {
    aleeert("alert is spelled wrong");
}
catch(err) {
    document.getElementById("status").innerHTML = err.name;
}

Example - Range Exception

JS JavaScript - Example - Range Exception

var num = 1;
try {
    num.toPrecision(500);   // A number cannot have 500 significant digits
}
catch(err) {
    document.getElementById("status").innerHTML = err.name;
}

Example - Reference Exception

JS JavaScript - Example - Reference Exception

var x;
try {
    x = y + 1;   // y is not defined and cannot be referenced
}
catch(err) {
    document.getElementById("status").innerHTML = err.name;
}

Example - Type Exception

JS JavaScript - Example - Type Exception

var num = 1;
try {
    num.toUpperCase();   // Cannot have upper case of a number
}
catch(err) {
    document.getElementById("status").innerHTML = err.name;
}

Learn more about JavaScript Debugging Learn more about JavaScript Developer Tools
BACK TO TOP






Check this out

JS JavaScript: Developer Tools

Developer Tools are tools that are a part of most modern web browsers.

Every Web Developer should know how to use the tools. The tools do a range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long they took to l....

JS JavaScript: Bitwise Operators

Bitwise operators will handle their operands as a sequence of 32 bits (zeroes and ones), and not like decimal, hexadecimal, or octal numbers. For example, the decimal number nine has a binary representation of 1001. Bitwise operators perform their operation....

JS JavaScript: Booleans

Boolean is a primitive data type in JavaScript. Boolean can have only two values, true or false. It is useful in controlling program flow using conditional statements like if..else, switch, while, do..while.

JS JavaScript: Scope

Scope determines if variables are accessible (visible).

A scope in JavaScript defines what variables you have access to. There are two kinds of scope – global scope and local scope.

Function scope and block scope are local scope - variables declared inside a function or a bl....


BACK TO TOP

JavaScript is one of the 3 core language technologies of the World Wide Web that all web developers must learn:

1.      HTML to define the content of web pages.

2.      CSS to specify the layout of web pages.

3.      JavaScript to program the behavior of web pages.

JavaScript is a scripting or programming language that allows you to implement complex things on web pages. Every time a web page does more than just sit there and display static information for you to look at, displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. − you can bet that JavaScript is probably involved.


The benefits of using JavaScript are:

1.      You can validate user input before sending the page off to the server. This saves server traffic, which means less load on your server.

2.      Immediate feedback to the visitors − They don't have to wait for a page reload to see if they have forgotten to enter something.

3.      Increased interactivity − You can create interfaces that react when the user hovers over them with a mouse or activates them via the keyboard.

4.      Richer interfaces − You can use JavaScript to include such items as drag-and-drop components and sliders to give a Rich Interface to your site visitors.


BACK TO TOP

Need more Honney

NDC Conferences

The NDC Conferences (Norwegian Developers Conference) are one of the world`s largest independent software conferences for .NET & Agile development. The conference covers everything you need to know within software development. The conferences are held each year in many places such as Oslo, Copenhagen, London, Sydney and Minnesota.

Update Conference Prague

Update Conference Prague is the biggest developer conference in the Czech Republic. The conference is offering sessions delivered by the top experts from all around the world. Their goal is to inspire the attendees and enrich their knowledge.

Troy Hunt

Learn about Web Security from Troy Hunt. He is a really engaged speaker that frequently give talks on conferences around the world. Troy is a Microsoft MVP and you can even learn from him on some great courses on Pluralsight.

W3Schools

W3Schools.com is a great education Web Site for learning web technologies. On W3Schools you may find well organized basic to advanced tutorials and references.

Scott Hanselman

Learn about Web Technologies and new trends from Scott Hanselman. Scott Hanselman is an author of developer books and he is an engaged speaker that usually talks about the Microsoft stack. You may meet Scott on conferences around the world.

Developer Week

DeveloperWeek is one of the world’s largest developer conferences. Developer Week focus on new dev technologies, the conference have talks and workshops for newbies and experienced audience. You can attend on a Developer Week conference different places in Nothern America.


BACK TO TOP

Honneybag blog



Learn JavaScript Debugging

Searching for bugs and fixing them is called code debugging. The bugs might be difficult to diagnose and therefore it is important to have a good approach to find and fix the bugs effectively. Bugs in the code might be syntax errors or logical errors. Sometimes nothing happens when the code contains bugs and there is few indications where to search. Modern web browser includes a powerful suite of developer tools. The tools do a range of things...

Explore JavaScript Arrays

Arrays are frequently used by developers. Programming languages can have slightly different implementation of arrays. An array is an object that can store a collection of items. You may say it`s a special variable that can have more than one value. The array holds many values under a single name, and you may access the values by referring to an index number. The easiest way to create....

Ultimate Guide to HTML Colors

It is essential to give the user a good user experience. There are many things you should focus on, one of them is how you use colors on your website. We don't have to struggle with black and white TVs anymore. Users expect more and more and we can apply colors to everything we want. Texts, borders, backgrounds, shadows – in HTML they all can have whatever color you decide....

Wanna be a sheep? Check out the most popular subjects
HONNEYBAG BLOG
HONNEYBAGBLOG INSPIRE-AND-BE-INSPIRED
HTML FORMATTING
HTML ESSENTIALS
HONNEYBAGBLOG HOW-TO-USE-BROWSER-DEVELOPER-TOOLS
Wanna be a little different? Check out the less popular subjects
HONNEYBAG BLOGER
HTML INTRODUCTION
HTML ESSENTIALS
HTML ESSENTIALSWE
JAVASCRIPT BREAKER
BACK TO TOP