See slides here.

  • What's jQuery: javascript library, circumvents browser incompatibility
  • Known for things like opacity, AJAX requests that work across all browsers
  • Visual effects and "wow factor"
  • Reducing javascript code: getting elements by class name - 15 lines of javascript, 1-line snippet of jQuery $(".classname");

Selectors

  • jQuery selectors: CSS selectors by class (.), by ID (#), child elements/multiple elements ($('.sidebar a, .content a');), CSS3 select by attribute: $('input[type=text]'); also regular expressions on properties - see docs.jquery.com/Selectors

    • Effects

    • $('h1').hide(); - hides all h1's
    • can also do .hide('slow'); or .hide(3000) - milliseconds
    • .fadeOut('slow'), .slideUp('slow') - more at docs.jquery.com/Effects

    Events

    • Trigger an action in response to user (click, change, toggle, hover)
    • Toggle: two function names, the first time you click it does A, and the second time you click it does B
    • You can do it inline (not suggested)
    • return false is useful if you want the hand icon to show up to click, but not take the person anywhere (ie AJAX toggle; degrades gracefully if javascript is turned off)
    • Declared: gives a name to the function
    • Take all your PHP knowledge, apply it to Javascript really easily - but there's lots of things that Javascript can do that PHP can't

    Libraries and modules

    • Lots and lots of "wrapper" modules - so many nice jQuery plugins (equivalent of Drupal modules); make a module for every jQuery plugin (jCarousel, Lightbox, jqModal, Juitter, hoverIntent etc.) - there's a whole module for just one function
    • People want to have dependencies - jCarouselViews module relies on jCarousel, even though there's only one function there
    • You can end up with multiple copies of jQuery plugins all over the place
    • "We need an API to handle all these javascript libraries!" - so now we have wrapper-wrapper modules! (Plugins, JQP, jQ, jQuery UI the module)
    • Competing ways of adding multiple javascript libraries - different modules require different things
    • jQuery UI isn't as bad as the other ones - so many modules need it
    • In short, some modules have great implementation (jCarouselViews); a lot more modules do things in a totally unnecessary way - not worth having a module if it only does one thing and you only need it in one place

    Adding JS in a theme

    • "It's not hacking, it's theming!"
    • Open up info file, add some scripts (scripts[] = utilities.js)
    • Name is always relative to the root of your theme
    • After you do that, clear Drupal caches

    drupal_add_js()

    • What if you only need it in certain places?
    • Put this function in template.php; same thing that the .info file is doing for you
    • Don't just put it in page.tpl.php
    • Can aggregate and compress your CSS files - a lot less work for the web server
    • Javascript can be all aggregated together
    • Hosting your javascript elsewhere - well, it's only 15k, it'll slow down performance, it'll update to the latest version (but this might break your site
    • If you add any javascript using drupal_add_js(), it'll add jquery and drupal.js - provides some extra functionality, utility functions, global variables
    • drupal_add_js($data, $type); - $data is path to js, $type = 'module' (default) or 'theme'; theme stuff always goes last because it's assumed to be more important
    • Pass PHP variables to JavaScript: drupal_add_js($data, 'setting'), where $data is an array of strings
    • $(document).ready() - execute js when the page has finished loading
    • Prevents content hang-ups, degrade gracefully; replaces body(onload)

    References

    • visualjquery.com - whole library referenced on a single page
    • docs.jquery.com - official documentation
    • Drupal 6 uses 1.2.6 - there was an API change, and Drupal doesn't break APIs between major versions

    jGarland

    • Can create a base theme in your info file, uses the stuff from the base module when you haven't written something custom
    • Adding a bunch of javascript (jquery.countdown.js, cufon-yui.js - the new, hot thing in the world of fonts)
    • Cufon is awesome
    • Behaviors works on AJAX requests as well as page load