• Save
jQuery - A Walk On The Client Side
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

jQuery - A Walk On The Client Side

  • 3,623 views
Uploaded 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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,623
On Slideshare
3,526
From Embeds
97
Number of Embeds
17

Actions

Shares
Downloads
0
Comments
0
Likes
2

Embeds 97

http://udevi-community.blogspot.com 62
http://www.slideshare.net 6
http://udevi-community.blogspot.in 5
http://udevi-community.blogspot.fr 4
http://udevi-community.blogspot.com.br 3
http://udevi-community.blogspot.it 3
http://udevi-community.blogspot.co.uk 3
http://udevi-community.blogspot.com.es 2
http://udevi-community.blogspot.ch 1
http://udevi-community.blogspot.ro 1
http://udevi-community.blogspot.sg 1
http://udevi-community.blogspot.hu 1
http://udevi-community.blogspot.cz 1
http://udevi-community.blogspot.co.il 1
http://udevi-community.blogspot.de 1
http://udevi-community.blogspot.ca 1
http://udevi-community.blogspot.kr 1

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