I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

The Six Most Common Mistakes Made In Writing JavaScript

javascript / introduction

Estimated reading time: 2 minutes, 52 seconds

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 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 delaying the execution of scripts

If you place the code above in the <head> section of your HTML document, the script will potentially start before aby content appears in the <body>. This is a frequent problem with neophyte JavaScript programmers: JavaScript written without a delay means that it has nothing to work on, leading to errors.

There are two possible methods of delaying the execution of JavaScript. The first solution is the simplest, but also the one most prone to error: you simply place any scripts at the very end of your document, just before the closing </body tag. This guarentees that it will come in after any body content, exceptions being large files, such as images. that may still be loading. Because of that, the technique is usually combined with a delay directly written into the JavaScript code itself. In traditional JavaScript, that’s written 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 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:

<script src=//>
<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).

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.