Your SlideShare is downloading. ×
0
jQuery - A Walk On The Client Side
jQuery - A Walk On The Client Side
jQuery - A Walk On The Client Side
jQuery - A Walk On The Client Side
jQuery - A Walk On The Client Side
jQuery - A Walk On The Client Side
jQuery - A Walk On The Client Side
jQuery - A Walk On The Client Side
jQuery - A Walk On The Client Side
jQuery - A Walk On The Client Side
jQuery - A Walk On The Client Side
jQuery - A Walk On The Client Side
jQuery - A Walk On The Client Side
jQuery - A Walk On The Client Side
jQuery - A Walk On The Client Side
jQuery - A Walk On The Client Side
jQuery - A Walk On The Client Side
jQuery - A Walk On The Client Side
jQuery - A Walk On The Client Side
jQuery - A Walk On The Client Side
jQuery - A Walk On The Client Side
jQuery - A Walk On The Client Side
jQuery - A Walk On The Client Side
jQuery - A Walk On The Client Side
jQuery - A Walk On The Client Side
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 - A Walk On The Client Side

2,779

Published on

Slides from my jQuery presentation at Refresh Miami on 3/25/2010. Special thanks to Karl Swedberg for sharing his slide content with me.

Slides from my jQuery presentation at Refresh Miami on 3/25/2010. Special thanks to Karl Swedberg for sharing his slide content with me.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,779
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
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. A Walk on the Client Sidewith jQueryPart 1<br />
  • 2. Rey Bango<br />jQuery Project Team Member<br />Community PM for Scripting & Web Client Technologies – Microsoft<br />Ajaxian.com Writer<br />Email: rey@reybango.com<br />Blog: http://blog.reybango.com<br />Twitter: @reybango<br />
  • 3. Old School JavaScript<br />Browser Targeting<br />“Best Viewed in ….”<br />Inline JavaScript<br /><a href="#whatisit" onMouseOut="MM_swapImgRestore()"   onMouseOver="MM_swapImage('Whatis','',   'whatis-active.png',1)">   <img name="Whatis" src="buttons/whatis-unactive.png"></a> <br />
  • 4.
  • 5. Web Standards<br /><ul><li>Unobtrusive JavaScript</li></ul>Content, Presentation & Behavior are seperated<br />Content<br />Presentation<br />Behavior<br />Tests features, not browsers<br />
  • 6.
  • 7. Benefits<br />Quick, terse syntax<br />Simplifies interaction between HTML & JavaScript<br />Excellent documentation & thriving community<br />Open Source<br />Unobtrusive from the ground up<br />Wildly Popular<br />
  • 8. Users<br /><ul><li>IBM, Intel, Dell
  • 9. NBC, CBS, Newseek, Major League Baseball
  • 10. Slashdot, Sourceforge
  • 11. Github, Newsgator, Feedburner
  • 12. Bank of America, Intuit</li></li></ul><li>jQuery Is Wildly Popular<br />Ref: trends.builtwith.com<br />
  • 13. 1 in 5 Sites that Use JavaScript <br />use jQuery<br />
  • 14. jQuery Is Wildly Popular<br />Ref: Indeed.com<br />
  • 15. Why?<br />Community<br />23 Team Members<br />Continuously growing community of developers<br />Support Resources<br />Tutorials: http://docs.jquery.com/Tutorials<br />Forums: http://forums.jquery.com<br />IRC: freenode #jquery<br />Microsoft Phone Support<br />Local Groups: http://meetups.jquery.com/<br />
  • 16. Why?<br />Documentation<br />Official Documentation api.jquery.com (jQuery 1.4 Reference Guide)<br />Books<br />Learning jQuery 1.3<br />jQuery Cookbook<br />jQuery in Action (2nd edition)<br />jQuery: Novice to Ninja<br />jQuery Enlightenment<br />
  • 17. Why?<br />Many, many online tutorials<br />Learningjquery.com<br />Jqueryfordesigners.com<br />Nettuts.com<br />Many more…<br />Conferences<br />Online<br />San Francisco – April, 2010<br />Boston<br />London<br />500 Attendees with waiting list of 300+<br />
  • 18. Why?<br />Communication<br />Twitter<br />@jquery<br />@jqueryui<br />@jquerysites<br />@jquerypodcast<br />jQueryTeam List (http://twitter.com/jquery/team)<br />jQuery Podcast (iTunes & jQuery Blog)<br />YayQueryVideocast (http://yayquery.com/)<br />
  • 19. Why?<br />Availability<br />Source: http://github.com/jquery<br />Microsoft: http://www.asp.net/ajax/cdn/<br />Google: http://code.google.com/apis/ajaxlibs<br />Download from jQuery.com<br />
  • 20. Why?<br />jQuery is Open Source<br />Dual-licensed: MIT and GPL<br />Copyright (c) 2009 John Resig, http://jquery.com/<br />Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:<br />The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.<br />THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND …<br />
  • 21. Syntax<br />jQuery Has Quick, Terse Syntax<br />var x = $(window).width(); var y = $(window).height();<br />jQuery Simplifies Interaction<br />Find Something<br />Do Something<br />
  • 22. $( 'div' )<br />
  • 23. Selectors<br />CSS Selectors<br />#id {} .class {}<br />ancestor descendant {}<br />With jQuery<br />$('#id')<br />$('.class')<br />$('ancestor descendant')<br />Full CSS Selector 1-3 Support<br />Better CSS Selector support than most browsers<br />
  • 24.
  • 25. Features<br />Interaction plugins<br />Draggable, droppable, resizable, sortable, selectable<br />UI controls<br />Accordion, autocomplete, button, date picker, slider, more…<br />Visual effects<br />Basic effects, transitions, animation, easing…<br />Focus on web standards<br />Accessible<br />Skinnable<br />Tested for compatibility in IE 6.0+, FF 2+, Safari 3.1+, Opera 9.0+, and Google Chrome<br />Same license as jQuery<br />Completely open source<br />
  • 26. Users<br /><ul><li>Oracle, RIM, Capcom
  • 27. BusinessWeek, iVillage
  • 28. Slashdot, Sourceforge
  • 29. Tivo, Univision
  • 30. bit.ly, Northwest Airlines</li></li></ul><li>Availability<br />CDN support, just like jQuery<br />Source: http://github.com/jquery/jquery-ui<br />Google: http://code.google.com/apis/ajaxlibs<br />Roll Your Own jQuery UI<br />Download Builder<br />Choose the modules<br />Choose the theme<br />Bam! Download it<br />
  • 31. Demo<br />

×