Content-Type: RST

I promised I'd write about this, so here I am. **jQuery!**

.. figure :: http://blog.opensourcenerd.com/upload/jquery-logo

`jQuery`_ is a Javascript library meant to help developers "write less,
do more." What does this mean? That you can write less and do more? It
means that the jQuery developers wrote stuff for you in a library you
can include so that you don't have to deal with the uglies
yourself, instead just using a simple jQuery "query". 

.. _`jQuery`: http://www.jquery.com

But let's back up. This entry will not be by any means a comprehensive
intro to jQuery, or an adequate demo of its truly huge list of
functionalities. It will, instead, evaluate the use of jQuery for
someone like me: a relatively small-time Javascript coder that needs
some JS to pretty up websites he makes. In other words: is it worth
it?

Let's take a look at the simplest example, finding an element on a
page based on its ID:

.. sourcecode :: js

   var theID = "someID";

   // regular JS
   document.getElementById(theID);

   // jQuery
   $("#"+theID);

Much of jQuery is performed via the magical ``$`` object. For
instance, simply passing it a string as I did above returns the
element(s) matched by the string. In this case, the string would be
``"#someID"``, which tells jQuery to return whatever matches the ID
(signified by ``#``). If the ``#`` is excluded, like so:

.. sourcecode :: js

   // regular JS
   document.getElementsByTagName("p");

   // jQuery
   $("p");

It just fetches every element of that tag name. Similarly, in a CSS
selector fashion, ``.`` selects those of a certain class. However,
there are noted differences between ``$`` and the regular document
``get`` functions. For instance, this is what we need to get the HTML
in the ``body`` tag:

.. sourcecode :: js

   // regular JS
   document.getElementsByTagName("body")[0].innerHTML;

   // jQuery
   $("body").html();

Note how the jQuery line lacks the ``[0]``. The call to ``$`` returns
a special jQuery iterator class, and methods that are called upon it
are called upon all member elements. By contrast, the regular
Javascript way gives an actual array, which has to then be
navigated. For example, if I had to turn all ``div`` elements blue:

.. sourcecode :: js

   // regular JS
   var divs = document.getElementsByTagName("div");
   for (var i in divs){
       divs[i].style.backgroundColor = "blue";
   }

   // jQuery
   $("div").css("background-color", "blue");

Already 1 vs 3 lines of code. What if I had to set all spans of the
class "foo" to have red text?

.. sourcecode :: js

   // regular JS
   var divs1 = document.getElementsByTagName("span");
   var divs2 = document.getElementsByClass("foo");
   for (var i in divs1){
       if (divs2.contains(divs1[i]))
           divs1[i].style.color = "red";
   }

   // jQuery
   $("span.foo").css("color", "red");

Once the effects break in, it gets much more fun: let's make a tooltip
appear, fading in, at the location of the mouse.

.. sourcecode :: js

   // regular JS
   // ?!???!?!?

   // jQuery
   // X is the object to mouse over
   
   $(X).mouseover(function(){
       my_tooltip.css({display:"none"}).fadeIn(TIME);
	 }).mousemove(function(kmouse){
	   my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
	     }).mouseout(function(){
	       my_tooltip.fadeOut(TIME);
	         });

Not exactly the prettiest piece of code, but it works, and if you
read it, it makes sense. More sense than garbled Javascript would to
code a similar animation. If you want to see the code above in action,
it's at my pet project site, `Linkwall`_.

.. _`Linkwall`: http://www.opensourcenerd.com/linkwall

So, okay, that's working with Javascript and CSS, but what about
another popular topic of using Javascript? AJAX! Now, how's about
these frustrating lines:

.. sourcecode :: js

   var ajax_transport = false;
   try {
     ajax_transport = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
      try {
        ajax_transport = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
        if (typeof XMLHttpRequest != 'undefined') {
          ajax_transport = new XMLHttpRequest();
        }
      }
    }

Anyone who has coded AJAX knows this too well: the initialization mess
that one needs to do to get an XMLHttpRequest object (mostly necessary
because of MS IE's compulsive avoidance of standards). Plus, the fact
that 3+ lines of code are needed just to send a request: 

.. sourcecode :: js

   ajax_transport.open("GET", "somefile.php", true);
   ajax_transport.onreadystatechange = response_func;
   ajax_transport.send(null);
   
Wouldn't it be nice to replace both of the two previous chunks of code
with just:

.. sourcecode :: js

   $.get("somefile.php", response_func);

Yes, it would be. AJAX functionality in jQuery is a breath of fresh
air. It comes complete with optional arguments for passed GET or POST
data, and the form the returned data should be in. It also comes with
a ``$.ajax()`` function for the pickiest of people, who like to
customize every single detail of the request. And, of course, for
usability, the call also returns the XMLHttpRequest object itself, for
possible later use.

.. figure :: http://blog.opensourcenerd.com/upload/cat-relaxed

   jQuery feels sort of like this.

And all the features require is a simple Javascript include in the
concerned HTML file:

.. sourcecode :: html

   <script type="text/javascript" src="jquery.js"> </script>

It feels right; The Way It Should Be Done™; Pythonic; Easy; Efficient.

So, what are you waiting for? `Get it and try it out! <http://www.jquery.com>`__