JS Library Roundup

In Part III of the JavaScript Renaissance, we spent another long evening exploring Prototype, Script.aculo.us, and jQuery, and getting a feel for the scope and power of these popular DHTML/Ajax libraries. A good chunk of that time was spent hacking at the Firebug console and experimenting with live HTML documents for immediate feedback.

You can download the presentation here.

Thanks again to the Wheaton ex-Perl Mongers for coming out to learn a little more JavaScript. Come out and see the Perl Mongers reborn as the first arm of the new Polyglot Programmers group!

Addendum: Some of you at the presentation wanted to know to use Greasemonkey to import libraries into web pages after they've already been loaded. Here's the skinny:

• Go to https://addons.mozilla.org/en-US/firefox/addon/748 and add the Greasemonkey Firefox extension
• After you restart Firefox you should see the telltale monkey face icon down in the lower right corner of your browser window
• Right click on the monkey face and select "New User Script..."
• Give the new script an identifiable name like "load_prototype" or "load_jquery", a namespace (can be anything, I'm not entirely sure what it's even used for), and a list of URLs to include or exclude from running the script
• Configure a text editor to edit Greasemonkey scripts
• Finally, enter and save the script

Here's the script I used to load prototype and most of script.aculo.us. Obviously, you'll need to change the paths to point to the files where they're installed on your system. Paste this into your new Greasemonkey document below the comments:

window.addEventListener('load', function() {
    var head = document.getElementsByTagName('head')[0];
    var libs =
      [
       'file:///..../prototype.js',
       'file:///..../effects.js',
       'file:///..../dragdrop.js',
       'file:///..../builder.js'
       ];
    for (var i in libs) {
      var script = document.createElement('script');
      script.type = "text/javascript";
      script.src = libs[i];
      head.appendChild(script);
    }
  }, false);

That should be enough to get you started! Please hit me up if you have any questions.