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?"

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

JavaScript Code Quality Tools JSHint: Helps detect errors and potential problems in code: JSLint: Code checker that finds common mistakes in scripts: 3

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 4

Syntax Errors Discussion: Syntax errors often involve something that is missing like a parenthesis, curly brace, or a semi-colon. Errors: function myFunction( { // missing ")" // missing double quote on string console.log("You called myFunction); } window.onload = function() { myFunction(); } // missing semi-colon on statement 5 syntaxErrors.html

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: function myFunction() { console.log("You called myFunction"); } window.onload = function() { myfunction(); // incorrect capitalization }; 6 callNonExistingFunct.html

Attribute or Method Typo Discussion: In addition, any predefined attribute or method must be spelled and capitalized properly. Common Errors: // strings can not have a return in the middle var einstein = "Great ideas often receive violent opposition from mediocre minds."; // error // attribute misspelled. should be "einstein.length" var size = einstein.len; // error // attribute "einstein.length" is not method var chars = einstein.length(); // error // should be "getElementById()" with "Id" not "ID" var title = document.getElementByID("mainTitle"); // error // should be "getElementsByTagName()" with "Elements" plural var para = document.getElementByTagName("p"); // error 7 methodTypo.html

Use Element Before Loaded Discussion: Accessing DOM elements before they are loaded can be prevented by calling script from window.load() method. Errors: // using element before it is loaded // make sure DOM is loaded using window.load() var myImage = document.getElementById( "up" ); console.log( myImage.getAttribute( "src" ) ); 8 useBeforeLoaded.html

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: var enrolled = 7; // should be "==" instead of "=" if ( enrolled = 0 ) { // false console.log( "Session cancelled." ); } else { console.log( "Session scheduled." ); } 9 assignVsEquality.html

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: // argument mismatch between call and definition // three parameters in function definition function calculateSum( a, b, c ) { console.log( "c = " + c ); return( a + b + c ); } // two arguments in function call var result = calculateSum( 500, 1000 ); console.log( result ); 10 paramMismatch.html