Waterloo Region Meetup: Painless JavaScript with jQuery

Tonight I gave the Waterloo Region User Group a presentation introducing jQuery and it's use within Drupal websites. Topics covered included:

• What JavaScript is and isn't
• How JavaScript empowers developers to transform web pages into web applications
• Why many developers have avoided JavaScript in the past, and how jQuery addresses those issues
• JavaScript developer tools
• Introduction and live demos using jQuery
• Common use cases of jQuery and JavaScript for Drupal developers and themers

Much of the presentation consisted of demonstrations using the FireBug console, so if you're interested in learning jQuery FireBug is a great place to start. I've also included the demo module I used to demonstrate some small jQuery snippets. It's only been tested on Drupal 6 with the Garland theme. The jQuery Updatee module is required, and jQuery UI is needed for some of the demos. To enable each demo, simply flip FALSE to TRUE for each demo in jquery_demo_init(). The code for each demo does not always follow best practices; the demos were aimed at showing what you could do with only JavaScript.

The IE6 code mentioned in the slides is in use on this site; to see how it changes the site, try viewing this site in IE6 with JavaScript enabled and disabled. This is a prime example of how jQuery can be used to fix CSS and layout issues caused by IE6's buggy engine. By using jQuery, your standards-compliant code doesn't need to be modified or "broken" for IE6, reducing development time.

Feel free to post any questions about the demos or the slides in the comments!