Wednesday, April 1, 2009

jQuery - Simplified interaction with JavaScript

I hate JavaScript. Let there be no confusion about that. Every line of JavaScript adds another point of failure to my project. Even if it works in all browsers today, one can never be sure about tomorrow. I use it very sparingly. Today, one of my coworkers did a presentation on jQuery. He did a great job of presenting it. What really impressed me was the simplicity and of course the cross-browser support. The supported browsers as of today are: IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome. While we still have some IE 5.0 customers out there, this is a confidence inspiring list. The basic usage is simple enough:
  1. Select one or more elements
  2. Perform some action on said elements.
Selecting elements is done with CSS selectors wrapped in a $() like $('input[type=text]') which will find all text fields. Of course, there can be $('#id') and $('.class') as well as more complex $('div div') which gives nested divs. Actions can be things like toggle, load and hover. Toggle changes from hidden to shown and back again. Load does an AJAX call and hover is an event handler for a mouse hover. There are lots of actions that can be performed and they are documented as well. His demo mostly focused on creating a JavaScript drop down list using jQuery. He did a good job of showing the benefits without going overboard. One of the great points was that by moving the javascript out of the tags, the web page would work quite well with JavaScript disabled. Of course there are other issues but this is a great one to overcome as it is important for customers to have a positive experience even in a non-JavaScript browser. Looking at the site it looks like there are also some interesting form validation options as well. Also of note, it is supported natively by Liferay. Definitely worth a look.

No comments: