Part 9: Intro to jQuery
Like HTML and CSS, Javascript is a “web standard,” meaning its functions and implementation are defined by a standards body. But historically browser implementation of Javascript has been inconsistent and buggy. Add in a legacy of bad coding practices (“hijacking the browser” with pop-ups, manipulated scroll bars, etc.), and its reputation is less than stellar. But browser support has improved in recent years, and today Javascript libraries can help smooth out the remaining differences.
Note that Javascript, a client-side scripting language, has no relationship to Java, a full-fledged programming language used on everything from servers to mobile phones.
Javascript should always be implemented in such a way that its absence doesn’t affect the core functionality of your site. This is sometimes called the principle of “graceful degradation” or “progressive enhancement.” Many screenreaders, mobile browsers (especially on non-smartphones), and older desktop browsers have limited or no support for Javascript — we still want our sites to be as accessible as possible for users (and search engines) using such software. You can think of Javascript as the third conceptual layer in the construction of a web page:
| Content Layer | Presentation/Style Layer | Behavior Layer |
|---|---|---|
| HTML | CSS | Javascript |
Libraries and Embedding
We’ll skip the basics of Javascript and jump into jQuery, a Javascript library that enables a huge variety of animations, page manipulations, and other tricks and enhancements. You can think of a library as a middleman that protects you from writing actual Javascript (which can be ugly and tedious) and instead lets you write clearer, simpler code in a syntax that builds on your knowledge of CSS. (Other popular libraries include Prototype, Mootools, and Yahoo’s YUI.)
With jQuery, you always add a <script> tag in the <head> of your page (usually after the CSS link) that embeds the library file itself (a chunk of illegible code). You then write your custom code after it to accomplish something specific with that page. Your custom code might well be written inline (between <script> and </script> tags) or linked to an external file. I usually put all my Javascripts in one folder and link to the files:
<script type="text/Javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/Javascript" src="js/mycustomscript.js"></script>
In addition, jQuery supports a variety of plugins, which are themselves chunks of code or mini-libraries that extend the functionality of jQuery. If you want to use my all-time favorite slideshow plugin Cycle, you would include jQuery itself, then the Cycle plugin, and finally your custom code:
<script type="text/Javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/Javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/Javascript" src="js/mycustomscript.js"></script>
Javascripts work by manipulating your page, or specifically, the “Document Object Model,” which simply means the structure of nested tags that comprise your page. This manipulation generally only affects the page’s contents as they exist in the memory of the browser. No files are changed, and unless you are using advanced techniques, reloading the page will reset any manipulations Javascript has performed.
An Example
Take a look at this Expand/Collapse Demo from Soh Tanaka. If you view source and scroll past the inline CSS, you’ll see two lines of Javascript. First, the jQuery library is included — here it is being pulled straight from the jQuery serves (compared to embedding a local copy, this has the downsides of being slower and reliant on jQuery.com’s servers). Notice how the script tags open and close without any text inside them:
<script type="text/Javascript" src="http://code.jquery.com/jquery-latest.js"></script>
Then comes a chunk of custom jQuery code, written inline between a <script> and a </script> tag:
<script type="text/Javascript">
$(document).ready(function(){
$(".toggle_container").hide();
$("h2.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
});
});
</script>
You don’t need to understand all the syntax here to use and adapt this script to your site. The key points are as follows:
jQuery targets HTML elements using the CSS selectors that you already know and love. In the above example, any <div class="toggle_container"> is hidden as soon as the page is “ready” (i.e. enough of it has loaded for the script to safely start working). Then a function is attached to each <h2 class="trigger">: when clicking the h2, the function adds a class to that h2 named active; it then looks for the HTML element that follows the h2 in the HTML and slides it open slowly.
Finally, even though your HTML is not “really” being altered, you can still style the altered state of the page. In the above example, you can write a CSS rule that changes the h2 only when it has a class of active.
In the above example, the “+” icon is a background image attached to every h2.trigger via CSS:
h2.trigger {
padding: 0 0 0 50px;
margin: 0 0 5px 0;
background: url(h2_trigger_a.gif) no-repeat;
height: 46px;
}
Since we know the h2 will receive an additional class of active when it is clicked, we can write a rule for that situation (even though it doesn’t occur in the page as we have written it). In this case the designer has embedded the “-” symbol in the same background image, so it can be revealed simply by shifting its position:
h2.active {background-position: left bottom;}
As stated before, jQuery is not literally rewriting your HTML file — it is editing a virtual copy that sits in the browser’s memory. To see what it is doing, make use of the browser tools available for Safari, Firefox, and Chrome: they will show you the altered “state” created by the Javascript.