A Few Strategies for Using JavaScript

The primary use for JavaScript in web pages is to enhance or add functionality not present in a static web page. If used correctly, this can be a great asset to a skilled developer. Used incorrectly, you (and your users) will be in for all sorts of nightmares.

Before we get to the good strategies, here are three things NOT to do.

Don’t Use JavaScript…

To add information that needs to be indexed by search engines.
This is a no brainer, but still easy to overlook. We try so hard to have lean and mean HTML that we can be tempted to move indexable information into javascript vs. keeping in the HTML. If the search engines need to see it, leave it in the HTML.

To fix things you are too lazy to fix in the source.
If you have the opportunity to apply a fix, move the elements around, or otherwise achieve your end result without using JavaScript, do it. There is a performance hit realized with editing the DOM with JavaScript. Only use it if it makes sense.

Primarily to make a site “cool”
I could reverse the statement to read “Only use JavaScript to enhance the user experience, provide appropriate indicators to the user, and improve the overall usability of the site.” Or, in more cliched terms, “JavaScript Responsibly”. There are tons of things you can do, but be sure only tackle the things you should do.

Good Strategies

Choosing a Good Framework (or Not)

Should Beginner JavaScript Programmers Use a Framework?
There are currently many strong Frameworks and Libraries for JavaScript. Prototype, MooTools, and jQuery are just a few. The question then is asked, “Should you learn straight JavaScript first, or start with one of these frameworks?” Though JavaScript syntax and best practices are super important, I would argue that you should start with a Framework if all you plan to do is enhance your web pages. This is often the simplest to learn, and you won’t have to waste time on browser differences in how they handle common functions (Think XMLHTTPRequest). If you plan on developing advanced AJAX/DHTML front-ends, then learning how to manipulate the DOM, make AJAX requests, etc using only JavaScript would be a good idea. If you want to build plugins for your Framework of choice, then it is also a good idea to understand what is happening behind the scenes.

A Framework May Make Maintenance Easier
Its pretty short-sighted to assume you will be the only one maintaining or editing your code down the road. Your business may grow, your clients may move to another developer, etc. Its due to the idea of group editing that I suggest the use of a solid Framework. If you use a framework, and use it correctly (Doing it the “right way”), other people picking up your code should have an easier time finding out what is going on.

Know When To Avoid Using a Framework
There are many situations where using a Framework becomes impractical. If all you need to do is show or hide a single element on a page, use straight JS. Its not worth the 50k+ overhead to load the Framework. If you are building a widget for inclusion on another site, don’t use a Framework. As an example, FoxyCart is a super easy to use cart system that uses JavaScript to power their cart. A problem you will run into when using FoxyCart, however, is that they include their own copy of jQuery. As a widget/library that is embedded on someone else’s site, they should have coded their library by hand to avoid conflicts with other libraries. (For you jQuery people out there, using $ .noConflict doesn’t fix problems with two copies of jQuery running on the same site).

Fixing Element Jumps

If there are a lot of elements on the page that apply specifically to a JavaScript context, you may see elements jump around, or appear then disappear when the JavaScript finally loads. There are many different situations where this could be a problem, but here are some strategies for avoiding it. This is often more of a problem if you put your JavaScript files at the bottom of the page (As you should).

Use Special CSS Classes
I like to add a no_js class to elements I intend to enhance with javascript. Style the elements in your javascript file using the .no_js class for how they should appear when either JavaScript is disabled, or it hasn’t loaded yet. Have the last step of your JavaScript setup be to remove that class from the elements.

Start Editing Earlier
If you use a JavaScript Framework (like MooTools or jQuery) be sure to utilize their DOM Ready functions instead of onLoad. The DOM will often be ready far before everything has fully loaded and may afford you the extra time you need.

Add JavaScript Specific Elements with JavaScript
If an HTML element’s only value is realized when JavaScript is in use, then add it dynamically with Javascript. For example, you don’t want an empty div#overlay just sitting at the end of your HTML. Just add it with JavaScript.


Use Firebug and console.log
In a tiny script, dropping in alert(’Here!’) might work OK. However, when doing anything larger, you will want to utilize the Firebug console for testing and debugging. Use it to output values and objects, and even DOM objects. It will often provide quick insight and let you solve problems faster.

Don’t forget to remove console.log Statements
If you use Firebug, be sure to remove console.log statements, or provide another way to avoid missing method errors. This one has caught me so many times: It works on my computer, but not on the client’s computer. We are both using Firefox. To add to the confusion, the site functions fine in Safari too. What is wrong !!? Ah! It’s the remaining console.log statements I used for debugging! Safari will often just skip the statements without complaining much, so BE SURE to search for “console.log” and remove the statements before deploying (or showing a comp to the client).


I have just touched on a few strategies and tips for using JavaScript on your pages. Feel free to share your own in the comments! As I come across other useful tips in the future, I will be sure to post them to the site as well.

Sponsored by

Advertise on Fuel Your Coding.
Fuel Your Coding 2009 cc (creative commons license)

Fuel Your Coding

Leave a Comment