JavaScript Errors

1. 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 • Make sure Eclipse Project is configured as a JavaScript Project. Right-click on the project name: Configure -> Convert to JavaScript Project • 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 Typo Discussion: In addition, any predefined attribute or method must be spelled and capitalized properly. Common Errors: <script> // strings can not have a return in the middle vareinstein = "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 varpara = 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() varmyImage = document.getElementById( "up" ); console.log( myImage.getAttribute( "src" ) ); </script> <!-- image should be specified pior to --> <!-- script if not using window.load() --> <imgsrc="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 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 ); </script> paramMismatch.html