“The Write Less Do More” Javascript Library
Arwid Bancewicz //arwid.ca
March 2nd 2010




                                ...
Introduction
Learning jQuery
      Demo
  Alternatives
  Resources
Motivation   Introduction   Learning jQuery   Demo   Alternatives   Resources




     JAVASCRIPT ISN’T EASY...
“Most of t...
Motivation    Introduction   Learning jQuery   Demo   Alternatives     Resources




...SO, MANY USE JQUERY
              ...
Motivation   Introduction   Learning jQuery   Demo      Alternatives   Resources




          WELL THEN, WHAT            ...
Motivation    Introduction   Learning jQuery   Demo   Alternatives   Resources




 TO USE OR NOT TO USE...
              ...
Learning jQuery
       $
Motivation   Introduction   Learning jQuery   Demo   Alternatives     Resources




                            THE BASICS...
Motivation   Introduction   Learning jQuery     Demo   Alternatives   Resources




           SELECTING ELEMENTS
What can...
Motivation    Introduction   Learning jQuery   Demo   Alternatives   Resources




              DOING SOMETHING
Hide/show...
Motivation   Introduction   Learning jQuery   Demo   Alternatives   Resources




    PLAYING WITH CONTENT
               ...
“Show Me the $”...
    The Demo
Motivation   Introduction   Learning jQuery   Demo   Alternatives   Resources




WAIT A SEC...          DO WE EVEN NEED A...
Alternatives/
 Resources
Motivation    Introduction   Learning jQuery   Demo      Alternatives   Resources




    IT’S NOT ALONE...
             h...
Motivation   Introduction    Learning jQuery   Demo   Alternatives   Resources




...YET, IT STANDS ALONE
              *...
Motivation   Introduction   Learning jQuery       Demo   Alternatives   Resources




                   WANT TO GET      ...
Thank You.
Any Questions?
Upcoming SlideShare
Loading in...5
×

jQuery Introduction

1,896

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,896
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "jQuery Introduction"

  1. 1. “The Write Less Do More” Javascript Library Arwid Bancewicz //arwid.ca March 2nd 2010 for ECE450H1S, University of Toronto
  2. 2. Introduction Learning jQuery Demo Alternatives Resources
  3. 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. 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. 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. 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. 7. Learning jQuery $
  8. 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. 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. 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. 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. 12. “Show Me the $”... The Demo
  13. 13. Motivation Introduction Learning jQuery Demo Alternatives Resources WAIT A SEC... DO WE EVEN NEED A DEMO? Dilbert doesn’t think so.
  14. 14. Alternatives/ Resources
  15. 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. 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. 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. 18. Thank You. Any Questions?

×