While there are many possible errors made in JavaScript, these are the most common mistakes made in day-to-day use:

Writing embedded or inline JavaScript, rather than linked

We link JavaScript files for much the same reasons we write the majority of our CSS in an external style sheet: doing so separates behaviour from presentation, makes the code earlier to maintain, and allows the same script to be used on multiple pages without replication or redundancy. There are reasons and causes for embedding your JavaScript code directly on a page, but they should be rare.

Not wrapping HTML comments around your embedded code

If you cannot avoid writing embedded JavaScript, you should write it within an HTML comment:

1. <script type=”text/javascript”>
2. <!—
3. alert(“Active JavaScript”);
4. -->
5. </script>

This achieves two things:

1. It shields the embedded JavaScript from the W3C Validator, which ignores anything contained within comments; otherwise, there is the possibility that the validator will confuse JavaScript for HTML, and throw errors.

2. It protects the JavaScript from confusion in older browsers that do not understand JavaScript at all (now a rarity, but still present).

Not delaying the execution of scripts

When you run the code above on a page, the alert window appears before any body content: you must click the “OK” button to get past the alert window. This is a frequent problem with neophyte JavaScript programmers: JavaScript written without a delay means that it has nothing to work on, as no body content has appeared when it executes. In traditional JavaScript, this delay is written as the following:

1. window.onload=function(){
2. // JavaScript code written here
3. }

In JQuery:

1. $(document).ready(function() {
2. // JavaScript code written here
3. })

Changing case in JavaScript

JavaScript is case sensitive. This is not only true of JavaScript code, but also of any variables or constants you create within it. tokenOne is a different variable from TokenOne. Scripts often break because you are trying to test or set the value of a variable that does not exist.

Confusing Concatenation & Addition

Concatenation is the joining of two or more strings. Addition is what you learned in school. In JavaScript both operators use the same + symbol to achieve their ends. It’s important to remember what you are joining together, how and why, and anticipate the result, in order to avoid errors:

In JavaScript:

1. alert(10 + 12);
2. // result is 22
3. alert(10+”2”);
4. // result is “102” – note that this is a string, not a numeral
5. alert(“There is no “ + “cake”);
6. token = 2;
7. alert(10 + token)
8. // result is 12
9. token = “Two”;
10. alert (10 + token);
11. // result is “10Two”

Confusing single and double quotes

Single or double quotes can be used in JavaScript operations with strings. This works out well until you get them confused, use one to start a string and the other form to end it, or use a single quote in place of an apostrophe character.

1. alert('Two’);
2. // result is Two
3. alert("Two's");
4. // result is Two’s
5. alert ('Two's');
6. // result is an error

Not providing a fallback for an externally sourced script, especially a framework

While Google’s servers are unlikely to fail, it is still possible. Sourcing your JQuery from Google has many advantages, but you should always provide a fallback. My preferred solution is the one popularized by Paul Irish’s HTML5 Boilerpate:

1. <script src=//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js>
2. </script>
3. <script>window.jQuery ||
4. document.write('<script src=/assets/scripts/jquery-1.6.2.min.js><\/script>')
5. </script>

This provides a fallback option if Google’s servers are unresponsive; obviously, you must have a copy of the script in the assigned location (a copy of JQuery in /assets/scripts, in the case shown above).