Your SlideShare is downloading. ×
0
jQuery Introduction
jQuery Introduction
jQuery Introduction
jQuery Introduction
jQuery Introduction
jQuery Introduction
jQuery Introduction
jQuery Introduction
jQuery Introduction
jQuery Introduction
jQuery Introduction
jQuery Introduction
jQuery Introduction
jQuery Introduction
jQuery Introduction
jQuery Introduction
jQuery Introduction
jQuery Introduction
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQuery Introduction

1,874

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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?

×