jQuery and JavaScript Coding: Examplesand Best Practices

When used correctly, jQuerycan help you make yourwebsite more interactive, interesting and exciting. Thisarticle will share some best practices and examples forusing the popular Javascript framework to createunobtrusive, accessible DOM scripting effects. Thearticle will explore what constitutes

best practices withregard to Javascript

and, furthermore, why jQuery is agood choice of a framework to implement bestpractices.

1. Why jQuery?

jQueryis ideal because it can create impressive animations and interactions. jQuery is simple tounderstand and easy to use, which means the learning curve is small, while the possibilities are(almost) infinite.

Javascript and Best Practices

Javascript has long been the subject of many heated debates about whether it is possible to use itwhile still adhering to best practices regarding accessibility and standards compliance.The answer to this question is still unresolved, however, the emergence of Javascript frameworkslike jQuery has provided the necessary tools to create beautiful websites without having to worry(as much) about accessibility issues.Obviously there are cases where a Javascript solution is not the best option. The rule of thumbhere is:

use DOM scripting to

enhance

functionality, not create it.

Unobtrusive DOM Scripting

While the term “DOM scripting” really just refers to the use of scripts (in this case, Javascripts)to access the Document Object Model, it has widely become accepted as a way of describingwhat should really be called “unobtrusive DOM scripting”—basically, the art of addingJavascript to your page in such a way that if there were NO Javascript, the page would still work (or at least degrade gracefully). In the website world, our DOM scripting is done usingJavascript.

The Bottom Line: Accessible, Degradable Content

The aim of any web producer, designer or developer is to create content that is accessible to thewidest range of audience. However, this has to be carefully balanced with design, interactivityand beauty. Using the theories set out in this article, designers, developers and web producerswill have the knowledge and understanding to use jQuery for DOM scripting in an accessibleand degradable way; maintaining content that is beautiful, functional AND accessible.

2. Unobtrusive DOM Scripting?

In an ideal world, websites would have dynamic functionality AND effects that degrade well.What does this mean? It would mean finding a way to include, say, a snazzy Javascript Web 2.0animated sliding news ticker widget in a web page, while still ensuring that it fails gracefully if avisitor’s browser can’t (or won’t) run Javascripts.The theory behind this technique is quite simple: the ultimate aim is to use Javascript for non-invasive, “behavioural” elements of the page. Javascript is used to add or enhance interactivityand effects. The primary rules for DOM scripting follow.

Rule #1: Separate Javascript Functionality

Separate Javascript functionality into a “behavioural layer,” so that it is separate from andindependent of (X)HTML and CSS. (X)HTML is the markup, CSS the presentation andJavascript the behavioural layer. This means storing ALL Javascript code in external script filesand building pages that

do not rely on Javascript to be usable.

For a demonstration, check out the following code snippets:

Bad markup:

Never include Javascript events as inline attributes. This practice should be completely wipedfrom your mind.view plaincopy to clipboardprint? 1.

<a onclick="doSomething()" href="#">Click!</a>

Good markup:

All Javascript behaviours should be included in external script files and linked to the documentwith a <script> tag in the head of the page. So, the anchor tag would appear like this:

view plaincopy to clipboardprint? 1.

<a href="backuplink.html" class="doSomething">Click!</a>And the Javascript inside the myscript.js file would contain something like this:view plaincopy to clipboardprint? 1.

...2.

$('a.doSomething').click(function(){4.

// Do something here!5.

alert('You did something, woo hoo!');6.

});7.

...The.click() method in jQueryallows us to easily attach a click event to the result(s) of ourselector. So the code will select all of the <a> tags of class “doSomething” and attach a click event that will call the function. In practice, thisIn Rule #2 there is a further demonstration of how a similar end can be achieved without inlineJavascript code.

Rule #2: NEVER Depend on Javascript

To be truly unobtrusive, a developer should never rely on Javascript support to deliver content orinformation. It’s fine to use Javascript to enhance the information, make it prettier, or moreinteractive—but never assume the user’s browser will have Javascript enabled. This rule of thumb can in fact be applied to any third-party technology, such as Flash or Java. If it’s not builtinto every web browser (and always enabled), then be sure that the page is still completelyaccessible and usable without it.

Bad markup:

The following snippet shows Javascript that might be used to display a “Good morning” (or“afternoon”) message on a site, depending on the time of day. (Obviously this is a rudimentaryexample and would in fact probably be achieved in some server-side scripting language).