JavaScript Errors

What Could Possibly Go Wrong WCPGW- A statement of unbridled optimism and also an immediate trigger for Murphy's Law. Generally uttered at meetings followed within seconds by a cascade of unexpected and horrid consequences.

Example:What are you doing today? Cleaning windows on the World Trade Centre, "What could possibly go wrong?"

2

Common Errors

Discussion:It is not a matter of “if” you make an error in JavaScript but “when”, so it is savvy to be prepared.

All JavaScript errors will be unique to your code, however, there are a number of common issues that most JavaScript programmers will encounter. It is helpful to be aware of these problem categories.

3

JavaScript Code Quality Tools

JSHint:Helps detect errors and potential problems in code:

http://www.jshint.com

JSLint:Code checker that finds common mistakes in scripts:

http://www.jslint.com

4

Using Eclipse to Catch Errors

1. Make sure Eclipse Project is configured as a JavaScript Project. Right-click on the project name:

Configure -> Convert to JavaScript Project

2. Validate the JavaScript File. Right-click on the file name:

Validate

5

Syntax Errors

Discussion:Syntax errors often involve something that is missing like a parenthesis, curly brace, or a semi-colon.

Errors:

<script>function myFunction( { // missing ")" // missing double quote on string console.log("You called myFunction);}

window.onload = function() { myFunction();} // missing semi-colon on statement</script> syntaxErrors.html

6

Calling Non-existing Function

Discussion:It is easy to make a mistake in capitalization or spelling of variables and function names. These errors will not show up in Eclipse or the console until run-time.

Errors:<script>function myFunction() { console.log("You called myFunction");}

window.onload = function() { myfunction(); // incorrect capitalization};</script> callNonExistingFunct.html

7

Attribute or Method TypoDiscussion:

In addition, any predefined attribute or method must be spelled and capitalized properly.

Common Errors:<script>// strings can not have a return in the middlevar einstein = "Great ideas often receiveviolent opposition from mediocre minds."; // error

// attribute misspelled. should be "einstein.length"var size = einstein.len; // error

// attribute "einstein.length" is not methodvar chars = einstein.length(); // error

// should be "getElementById()" with "Id" not "ID"var title = document.getElementByID("mainTitle"); // error

// should be "getElementsByTagName()" with "Elements" pluralvar para = document.getElementByTagName("p"); // error</script>

methodTypo.html

8

Use Element Before Loaded

Discussion:Accessing DOM elements before they are loaded can be prevented by calling script from window.load() method.

Errors:<script>// using element before it is loaded// make sure DOM is loaded using window.load()var myImage = document.getElementById( "up" );console.log( myImage.getAttribute( "src" ) );</script>

<!-- image should be specified pior to --><!-- script if not using window.load() --><img src="ellieAndCarl.jpg" id="up" />useBeforeLoaded.html

9

Assignment vs Equality

Discussion:Specifying an assignment inside a conditional statement is a common error and one that may be difficult to track down..

Errors:<script>var enrolled = 7;

// should be "==" instead of "="if ( enrolled = 0 ) { // false console.log( "Session cancelled." );} else { console.log( "Session scheduled." );}</script> assignVsEquality.html

10

Call Argument and Parameter Mismatch

Discussion:A parameter that does not have an associated argument in the call statement will have a value of “undefined”. The arithmetic of an “undefined” value will result in a “NaN”.

Errors:<script>// argument mismatch between call and definition// three parameters in function definitionfunction calculateSum( a, b, c ) { console.log( "c = " + c ); return( a + b + c );}

// two arguments in function callvar result = calculateSum( 500, 1000 );console.log( result );</script> paramMismatch.html