Presenting jQuery
I had a great honor of presenting both an intro and advanced jQuery class at successive JavaScript Users’ Groups. We had quite a lot of fun discussing both what makes jQuery cool and how one can leverage it for really powerful uses. Here’s the slides for the intro, and here’s the project for the advanced one. In the intro class, the primary topics included:
- including in the page and browser compatibility
- jQuery selectors (CSS queries)
- basic jQuery functions (
.css()
is a great example) - script loading paradigms and the $(document).ready() function
- node traversal: .parent(), .children(), .find(), etc
- a brief look at AJAX calls, though we didn’t execute any of them
- a brief walk through animation (.fadeTo() and .show() / .hide())
Interspersed in this we discussed advanced topics (mostly answers to questions):
- put CSS in the head, put scripts at the end for best performance
- avoid redundant trips to the dom by caching selections or chaining
- catch and handle HTTP errors when making AJAX calls
- avoid global JavaScript variables
In the advanced class, we talked about:
- a quick review of the intro class
- AJAX with $.get(), $.post(), $.getJSON, and $.ajax()
- AJAX error handling in jQuery
- built-in jQuery animation, and how to layer effects
- a lap through our favorite plugins
- building a plugin: both a
$(...).dosomethingwitheach()
and a$.dosomethingwhencalled()
plugin - passing dom ids from server-side frameworks into client-side code
- using jQuery and jQuery UI from Google’s CDN
We also had fun discussing random off-topic ideas:
- building markup using arrays vs. dom snippits
- mechanisms for passing page data into library files
- a quick lap around compression
- jQuery UI theming
- tools to use when developing – to that end, the resources list inside the advanced download is quite helpful
All in all, both days were a barrel of fun, and I was quite honored to be a part of it.