While there are many possible errors made in , 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, or used for testing purposes, rather than production.

Not delaying the execution of scripts

If you place JavaScript in the <head> section of your HTML document, the script will potentially start before any <body> content appears. This problem is frequently encountered by neophyte developers, who write JavaScript code before DOM content, creating conditions in which the script has nothing to work on, which leads to errors.

There are several possible ways to solve this problem. The first solution is the simplest, but also the one most prone to error: simply place any scripts at the very end of the document, just before the closing </body tag. This guarentees that it will come after any body content, with the exception of large files, such as images, which may take longer to load. Because of that, the technique is usually combined with a delay or check. In traditional JavaScript, that often appears as:

	// JavaScript code written here

In JQuery:

$(document).ready(function() {
	// JavaScript code written here

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:

alert(10 + 12);
	// result is 22
	// result is “102” – note that this is a string, not a numeral
alert("There is no " + "cake");
token = 2;
alert(10 + token)
	// result is 12
token = "Two";
alert (10 + token);
	// 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.

	// result is Two
	// result is Two's
alert ('Two's');
	// result is an error

Not providing a fallback for an externally sourced 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:

<script src=//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js>
<script>window.jQuery || 
document.write('<script src=/assets/scripts/jquery.min.js><\/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).

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.