• Choose a category
• All
• Classic-Fiction

jQuery and Functional Programming

In jQuery, you find some basic principles of functional programming. In particular, the library is built around a fundamental type of data—the DOM element. And the library’s root object is essentially a wrapper around DOM elements. Furthermore, DOM elements can be passed into the jQuery object through the type constructor. Finally, the root object can pass its own wrapped values into other functions that return another instance of the same root object.

The net effect is that you build your jQuery code by pipelining function calls to create a super function that just gets some input and returns some output. In the super function, you express behavior by injecting anonymous JavaScript functions as if they were plain values.

Let’s start by playing with the jQuery library.

Working with jQuery

When writing JavaScript intensive applications, you’ll find it quite natural to put a piece of code at the top of each page and set up the DOM to serve the desired logic within the page. Typically, this code initializes global variables and prepares the ground for possible future actions. Ideally, you also want to use this initialization code to arrange event handlers, caching, and downloads of external data.

Because jQuery is designed to query the DOM and work with selected elements, any initialization code should reasonably run only when the DOM is ready. Detecting DOM readiness and writing initialization code with jQuery library is easier than ever.

Detecting DOM Readiness

In the beginning of client-side development, there was just one place where you could put the initialization code of a Web page—in the onload event on either the window object or the tag. The onload event fires as soon as the page has finished loading—that is, once the download of all linked images, CSS styles, and scripts has terminated. There’s no guarantee, however, that at this time the DOM has been fully initialized and is ready to accept instructions.

The DOM ReadyState Property

The document root object in the DOM exposes a read-only readyState property just to let you know the current state of the DOM and figure out when it is OK for your page to start scripting it. Any change to the property is signaled with a readyStateChange event. Web pages are notified of DOM readiness by registering a handler for this event and checking the value of the readyState property in the code.

Most browsers also support the DOMContentLoaded event, which just signals when the DOM is ready. Internet Explorer, however, doesn’t support it.

Using the readyState property is an approach that definitely works, but it is a bit cumbersome. For this reason, most JavaScript frameworks offer their own “ready” event that signals when you can start making calls into the framework safely. In this way, they shield you from the details of the DOM implementation and just let you know when you can do your own thing.

The jQuery library is no exception.

The jQuery’s Ready Function

In jQuery, you select the current DOM document and call the ready function on it. The ready function encapsulates the code to check the value of the readyState property on the DOM’s document object. The ready function takes an anonymous function as a parameter. The argument function is where you specify any initialization code required for the document. Here’s how you use it:

The jQuery’s ready function provides a cross-browser solution to detect the DOM readiness.

Note that the ready function works only if it’s invoked on the current document. You can’t call the ready function on, say, an image, a script, or a portion of the DOM. In light of this, you can even omit the document selector and resort to the equally acceptable syntax shown here:

The two syntaxes