jQuery - A Crash Course for Beginners (Part 1 - An Introduction to jQuery)

I arrived to the interview 20 minutes early like I typically do to show my dedication to not only being on-time, but being prepared and "ahead of the game". As I sat in the reception area grasping my messenger bag filled with a notebook, pen and extra resumes, I began to prepare myself for the imminent barrage of technical questions that were certainly headed my way. My interviewer greeted me and brought me back to his office where he proceeded to grill me on my technical background. Then the question came up. "Tell me about your experience with JavaScript." I hated this question. I've been asked this question probably 2 dozen times in various technical interviews or discussions. "Well, I am comfortable using JavaScript. I have never had a problem accomplishing what I want with it. I mean, just about everything has been written for it, so there's no point in reinventing the wheel, right?"

The fact of the matter is that while I had been building websites since 1995, the extent of my Javascript experience was limited to form validation and triggering/controlling pop-up windows. Pretty sad, huh? Any other task that didn't fall into those 2 categories, I could do some searching and most certainly "find a script" to accomplish what I wanted. Sure, I would never just "cut and paste" something I didn't understand -- that's a rule I've always held myself to, since more often than not every script I would use I would have to customize in one way or another.

jQuery and Me – How We Met

My first experience with jQuery was sometime in the year 2008 when I was looking to implement a modal window in an application I was building. I stumbled across a nice JavaScript solution called Thickbox. I remember downloading the files and noticing it required something called "jQuery". I had no idea what it was or why I needed it -- I just plugged it in and configured Thickbox to my likings.

It wasn't until the following spring in 2009 when I began work on an enterprise-level application that I really discovered jQuery and it's full potential. I was always under the assumption that jQuery just provided some AJAX capabilities and more importantly allowed you to do some slick animations (like on Facebook). My misconception of jQuery was made completely obvious. While sure, it does allow you to perform AJAX functionality and slick animations, it is so much more than that. Ever since discovering jQuery, I have never worked on a project that did not include it. It is most definitely a tool that will always remain in my toolbox.

What is jQuery?!

jQuery.com sums it up best: "jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript." I couldn't write a better definition for jQuery if I tried. Being a ColdFusion developer of over 10 years, jQuery instantly clicked with me. The term rapid web development is just so appealing to me. I've dabbled with other languages -- specifically (VBScript) ASP, and couldn't stand that I would have to write 15 lines of code to query a database (oh and don't forget to close out your recordset!), when I could do the same task in 2-3 lines in ColdFusion! jQuery offered the same level of rapid development that I fell in love with with ColdFusion.

• So does jQuery replace JavaScript? No. jQuery is a JavaScript library, so it sits on top of JavaScript and allows you to write JavaScript much more "simplified".
• Can I still use standard JavaScript syntax or do I have to use jQuery? jQuery does not break existing JavaScript. If you use jQuery on a project, you can code in any variety of jQuery or JavaScript syntax without worrying about your code not working.
• What about browser compatibility? jQuery is remarkably compatible with browsers. Even though most software is shying away from supporting IE6, jQuery has held their ground and fully supports most browsers (IE 6+, FF 2+, Safari 3+, Opera 9+, Chrome).
• How hard is it to "install"? jQuery is one 24KB file that you include on your HTML pages like any other JavaScript file. That's it!
• What if jQuery doesn't have a feature I want? Can I extend it? Absolutely! jQuery is 100% extendible and hundreds of plugins already exist.

Where do I start?

1. Download jQuery. Point your browser to http://www.jquery.com, and click the "download" button on the homepage. I highly suggest you download the production copy. It is minified and gzipped so it's file size is extremely small. The development copy is provided if you want to tinker with the inner-workings of jQuery. For at least now, I'm going to suggest against this.
2. Installation. To install jQuery on your site, you will have to include it on all HTML pages that will be utilizing it. I highly suggest including all JavaScript files before the closing body tag in your HTML page. I will elaborate on that later. <html>
   <head>
      <title>My Website</title>
   </head>
   <body>
   
   <script src="jquery.min.js" type="text/javascript"></script>
   </body>
</html>
3. Testing your installation. To test jQuery's installation, we'll write a very basic piece of code that will utilize jQuery's document traversing and manipulation engines. Like any other language, it is best to start with a "Hello World" example. So, what we're going to do is use jQuery to find the <body> tag, and insert a paragraph into it displaying the phrase "Hello World". If you look at the following code example, you will notice that our <body> tag will initially be empty (with the exception of the JavaScript includes at the bottom), and upon accessing this page in a browser, you will see the phrase "Hello World" displayed. Try the following code: <html>
   <head>
      <title>My Website</title>
   </head>
   <body>
   
   <script src="jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript">
      $(document).ready(function() {
         $("body").append("<p>Hello World.</p>")
      });
   </script>
   </body>
</html>

Ok, it worked! So now what?

Before we can really begin writing some jQuery code, there are a few key fundamentals we need to discuss. A proper understanding of the following items will make learning jQuery much easier and help you write code easier and keep it more organized.

• The dollar sign. You probably noticed in the example above that we used a dollar sign ($) a few times. No we're not charging credit cards here, this is how you reference jQuery. The dollar sign references the jQuery object itself. Instead of writing $(), you can also write jQuery(), but I suggest picking one format and sticking with it. So, anytime you see the dollar sign, just remember -- that's jQuery!
• Wait for your document to load. Since jQuery interacts with the DOM (document object model) -- or in laymen's terms the structure of your HTML page -- we have to make sure the DOM has loaded completely before performing any traversing or modification on it. After all, if your page has only loaded 25%, and you ask jQuery to modify an element at the bottom of your page, you're going to have some trouble. This is also why we include our JavaScript files at the bottom of the page instead of in the <head> of the page like we've all typically done in the past. As a good rule of thumb, I still wrap my jQuery code in $(document).ready(function() {...}); to ensure nothing happens until that document has completely loaded. It's overkill, but I prefer it.
• Anonymous functions. You may have noticed that we nested a function with no name inside the ready() function. This is what is referred to as an anonymous function. It is a function with no name and is used for data encapsulation. Any var scoped variables (var myVariable = "hello world.";) created within this function will remain exclusive to the confines of this function.
• Callback functions. Callback functions are exactly what they sound like, they are executed after the initial code has executed ($(document).ready()). In our example code above, the anonymous function is acting as a callback function which is firing after the document loads.
• Chaining. Chaining is an extremely powerful and rapid way to code. Chaining allows you to attach multiple commands together with one line of code.

So now that we've learned some basic fundamentals of jQuery, let's dissect the code we wrote above to truly understand what's going on and (more importantly) why. First, we're going to create a new jQuery object with a reference to the document, and chain a .ready() function onto that reference to wait for it to load. Once loaded, jQuery will fire the callback method which in this case is our anonymous function containing further code. This code will then create another new jQuery object with a reference to the <body> tag. jQuery will then chain an .append() function which will literally insert the contents of the append() function into the reference we created earlier to the body tag. More simply put, we will insert <p>Hello World.</p> into the <body> tag. Pretty easy when you think about it, right?

Conclusion

jQuery is an extremely easy and powerful JavaScript library to learn and use. It allows you to write better JavaScript code -- faster! This entry was meant to provide a basic understanding of what jQuery is and how to get up and running with it. We stepped through a few core fundamentals that everyone should learn before proceeding to any further jQuery knowledge. These fundamentals will most definitely help you write better jQuery code, and understand exactly what is going on. This blog entry is part 1 of 5 of a series entitled jQuery - A Crash Course for Beginners. The following topics will be elaborated on in subsequent blog entries.

• Part 2 - Traversing and Modifying the Document using jQuery
• Part 3 - Handling Events using jQuery
• Part 4 - Animating using jQuery
• Part 5 - Creating AJAX interactions using jQuery

Please stay tuned for these topics! Cheers!

1 response to “jQuery - A Crash Course for Beginners (Part 1 - An Introduction to jQuery)”

• 
  Don Blaire
  May 10, 2010 at 3:11 PM
  Thanks for your posting. I was looking to learn jQuery and you have provided a starting point.

Leave a Reply

• Twitter - @ryanjeffords
• LinkedIn - rjeffords
• Facebook - rjeffords
• RSS