jQuery Introduction

2,304 views

Published on

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

No Downloads
Views
Total views
2,304
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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?

×