Pinterest Stumbleupon Whatsapp
Ads by Google

introduction to jqueryjQuery is arguably an essential skill for the modern web developer Which Programming Language to Learn - Web Programming Which Programming Language to Learn - Web Programming Today we're going to take a look at the various web programming languages that power the Internet. This is the fourth part in a beginners programming series. In part 1, we learnt the basic of... Read More , and in this short mini-series I hope to give you the knowledge to start making use of it in your own web projects. In the first part of our jQuery tutorial jQuery Tutorial - Getting Started: Basics & Selectors jQuery Tutorial - Getting Started: Basics & Selectors Last week, I talked about how important jQuery is to any modern web developer and why it's awesome. This week, I think it's time we got our hands dirty with some code and learnt how... Read More , we looked at some language fundamentals, and how to use selectors; in part 2, we moved on to methods of manipulating the DOM Introduction To jQuery (Part 2): Methods & Functions Introduction To jQuery (Part 2): Methods & Functions This is part of an on-going beginners introduction to jQuery web programming series. Part 1 covered the jQuery basics of how to include it in your project, and selectors. In part 2, we'll continue with... Read More .

In part 3, we’ll tackle the problem of how to delay jQuery until the page has loaded, then I’ll try to explain what anonymous functions are and why you need to know about them.

Delayed Loading: How & Why?

If you’ve been trying out some of the code from part 1 and 2, you may have come across some errors, odd behaviour, or things just plain not working. The most common error I experienced when learning jQuery was that of DOM elements not being found – even though I could plainly see them in the source of the page, jQuery kept telling me it just couldn’t find them! Why is that?

Well, it’s all to do with the order in which things are loaded by the browser. At it’s simplest, if you have a jQuery script running in the browser before the DOM element it’s looking for has actually been created, the script will load first, but not do anything because it can’t find the element, then the DOM element will load later. This is less of a problem if you place all your scripts near the footer, but it can still happen.

The solution is to wrap your scripts in whats called a document ready event. This makes the enclosed code wait until the DOM has been fully loaded (until it’s ready). Using it is simple:

$(document).ready(function(){
//your code to delay goes here
});

There’s an even shorter way of doing this outlined in the jQuery documentation, but I’d strongly suggest you use this way for code readability.

Ads by Google

This document ready event is another good example of an anonymous function, so let’s try to understand what this means.

Anonymous Functions

If like me you’ve got some beginner level programming experience under your belt, the idea of anonymous functions – which is core to jQuery and Javascript – might be a little disconcerting. For one, it makes errors due to mismatched braces quite common, which is why I’m going to explain it now. If you’d like a thorough explanation as to why anonymous functions are better than regular named functions on a more technical level, I’d suggest reading this fairly complex blog post.

Until now, you’ve probably only come across named functions. These are functions that have been declared with a name and can therefore be called anywhere else, as many times as you like. Consider this trivial example, which will log a message to the console when the page is loaded.

function doStuffOnPageLoad(){
console.log("doing stuff!");
}
$(document).ready(doStuffOnPageLoad);

This is useful if your function is designed to be re-used, but in this case it’s kind of convoluted since we only really want it to fire once when the page is loaded. Instead, we don’t bother defining a separate function, and just declare it inline as a parameter as and when needed. The previous example would therefore be better re-written as:

$(document).ready(function(){
console.log("doing stuff");
});

You may not see many advantages of this at the moment – it’s only marginally less code in this case – but as your scripts progress in complexity you’ll appreciate not having to jump around trying to find function definitions. Unfortunately, it does make things a little more difficult for beginners – just look at all those braces – so be sure to check the following points if you’re getting errors:

  • Correct number of corresponding braces – indenting your code helps.
  • Curly vs round braces.
  • Statement closing with a semicolon – but not needed after a closing curly brace.

introduction to jquery

Using a code editor like Sublime Text 2 Try Out Sublime Text 2 For Your Cross-Platform Code Editing Needs Try Out Sublime Text 2 For Your Cross-Platform Code Editing Needs Sublime Text 2 is a cross-platform code editor I only recently heard about, and I have to say I'm really impressed despite the beta label. You can download the full app without paying a penny... Read More can really help as it highlights corresponding braces and automatically indents code for you. A dedicated code editor is essential, really.

That’s it for this lesson, but  you should get into the habit of enclosing some basic DOM manipulations in document ready event before moving on, and start editing files in a code editor if you aren’t already. Next time, we’ll take a look at events and how they are used to add interactivity to a page – such as make jQuery do something when a button is clicked. Questions or comments always welcome below.

  1. Rigoberto Garcia
    March 4, 2013 at 2:48 am

    Excellent three Posts James. Shared with my co-workers. Thank you very much ...

  2. Doc
    March 3, 2013 at 8:40 pm

    One thing I've found that helps is to move the open brace to the next line, and indent all code between paired braces by 2 spaces. This really helps with readability, and my code editor (Notepad++) shows a red line between paired braces/parentheses. The only downside is that code takes up more vertical space.

    • Muo TechGuy
      March 4, 2013 at 12:42 pm

      Excellent advice, its a shame the code plugin we use doesnt show my indentation too. If you use Sublime Text 2 , it will automatically indent anything between curly braces, which I find incredibly useful.

Leave a Reply

Your email address will not be published. Required fields are marked *