1. “The Write Less Do More” Javascript Library
Arwid Bancewicz //arwid.ca
March 2nd 2010
for ECE450H1S, University of Toronto

2. Introduction
Learning jQuery
Demo
Alternatives
Resources

3. Motivation Introduction Learning jQuery Demo Alternatives Resources
JAVASCRIPT ISN’T EASY...
“Most of the people writing in
Javascript are not
programmers” - Douglas
Crockford
“Programmers who attempt to
use JavaScript for non-trivial
tasks often find the process
frustrating if they do not
have a solid understanding of
the language.” - David Flanagan

4. Motivation Introduction Learning jQuery Demo Alternatives Resources
...SO, MANY USE JQUERY
20% of all sites on the Internet use it *
* from Sept 2009 jQuery Conference

5. Motivation Introduction Learning jQuery Demo Alternatives Resources
WELL THEN, WHAT IS IT?
A compact, easy to use Javascript library that simplifies...
• HTML document traversing
• Event handling
to create Dynamic Content
• Animating But, what Special Effects
can
Tabs all
Calendars
we DO withAuto-complete
Drop Down
Form Validation
Menus this ???
• Ajax interactions Sorting Tables
Dialogs
It works on your browser...
IE6+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome

6. Motivation Introduction Learning jQuery Demo Alternatives Resources
TO USE OR NOT TO USE...
...the tell tail signs that we should
Licensing
• MIT Licensed
Resources
• Numerous books / publications, conferences, well documented
Lifespan
• Corporate Adoption
• Large Community (forums, plugins)

7. Learning jQuery
$

8. Motivation Introduction Learning jQuery Demo Alternatives Resources
THE BASICS
Add jQuery to your code *
Wait for HTML “document” to finish loading
without jQuery with jQuery
now
or
* see http://docs.jquery.com/Downloading_jQuery

9. Motivation Introduction Learning jQuery Demo Alternatives Resources
SELECTING ELEMENTS
What can you select?
without jQuery with jQuery
now
“The DOM is a Mess”
* CS3 compliant
* Different across browsers
What can you do?
➡ Hide/Show, Change html, Change attributes, Animate

10. Motivation Introduction Learning jQuery Demo Alternatives Resources
DOING SOMETHING
Hide/show/animate elements
with jQuery
* similarly for slideDown, fadeIn, fadeOut, fadeTo
Add/Remove an HTML class
CSS with jQuery
* CS3 compliant
more at http://api.jquery.com

11. Motivation Introduction Learning jQuery Demo Alternatives Resources
PLAYING WITH CONTENT
AJAX
Load html from a remote url and inject it into DOM
eg
other ways...
* type can be one of xml, html, script, json, jsonp or text
eg

12. “Show Me the $”...
The Demo

13. Motivation Introduction Learning jQuery Demo Alternatives Resources
WAIT A SEC... DO WE EVEN NEED A
DEMO?
Dilbert doesn’t think so.

14. Alternatives/
Resources

15. Motivation Introduction Learning jQuery Demo Alternatives Resources
IT’S NOT ALONE...
hundreds of Javascript frameworks available *
* see http://en.wikipedia.org/wiki/List_of_Ajax_frameworks

16. Motivation Introduction Learning jQuery Demo Alternatives Resources
...YET, IT STANDS ALONE
*based on google search results
jQuery
14,200,000
Dojo
7,200,000
Mootools
2,100,000
GWT EXT-JS
3,860,000 1,210,000

17. Motivation Introduction Learning jQuery Demo Alternatives Resources
WANT TO GET STARTED?
Start at jQuery.com
• Docs http://docs.jquery.com • Widgets http://jqueryui.com
• Tutorials http://docs.jquery.com/Tutorials
Other Notables
• Javascript Playgrounds
• http://jsbin.com
• http://code.google.com/apis/ajax/playground (Refer to http://code.google.com/apis/ajaxlibs/)
• Plugins
• Star Ratings http://plugins.learningjquery.com/half-star-rating
• Photo Gallery http://www.twospy.com/galleriffic/index.html
• More @ http://plugins.jquery.com
• Tutorials
• Blog http://www.learningjquery.com
• Form Validation http://yensdesign.com/2009/01/how-validate-forms-both-sides-using-php-jquery/

18. Thank You.
Any Questions?