• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
jQuery Introduction
 

jQuery Introduction

on

  • 2,168 views

 

Statistics

Views

Total Views
2,168
Views on SlideShare
2,159
Embed Views
9

Actions

Likes
1
Downloads
0
Comments
0

2 Embeds 9

http://www.linkedin.com 5
http://www.slideshare.net 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    jQuery Introduction jQuery Introduction Presentation Transcript

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