• Save
jQuery For Developers Stack Overflow Dev Days Toronto
Upcoming SlideShare
Loading in...5
×
 

jQuery For Developers Stack Overflow Dev Days Toronto

on

  • 6,675 views

10/23/2009 - jQuery for Developers - Stack Overflow DevDays

10/23/2009 - jQuery for Developers - Stack Overflow DevDays

Statistics

Views

Total Views
6,675
Views on SlideShare
6,167
Embed Views
508

Actions

Likes
11
Downloads
1
Comments
0

6 Embeds 508

http://www.globalnerdy.com 264
http://ralphwhitbeck.com 164
http://blogs.msdn.com 34
http://www.onhuge.com 30
http://coderwall.com 11
http://www.slideshare.net 5

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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
  • There are 11 thousand + questions tagged at stackoverflow, jQuery 9 th highest used tag. (higher than iphone) jQuery is second only to javascript in client side scripting languages in questions tagged
  • It simplifies…
  • Wrapped Set , is an array like structure that contains each of the selected DOM elements. You can iterate over the wrapped set like an array or access individual elements via the indexer. More importantly though you can also apply jQuery functions against all the selected elements.
  • Any good JavaScript framework will do these top two points
  • It’s these last four that really set jQuery apart
  • It’s these last four that really set jQuery apart
  • Learn jQuery Effects Demo
  • Show AIR APP (Screen 4) The API is broken up to help you find what you need to do one of the core jquery functions select, create, do something then do something else. The API is categorized by functionality
  • Create a private scope for the jQuery Alias
  • So what do you need to do to be able to use jQuery on your page.
  • Ask if there are any questions if there is time.

jQuery For Developers Stack Overflow Dev Days Toronto jQuery For Developers Stack Overflow Dev Days Toronto Presentation Transcript

  • for Developers
  • Introduction
    • Ralph Whitbeck
    • jQuery Team Member, on the Evangelism team
    • Co-authored O’Rielly’s “jQuery Cookbook” due out end of year
    • Senior Web Application Engineer 
    • BrandLogic Corporation ( http://brandlogic.com)
    • Blog: http://ralphwhitbeck.com
    • Twitter: @RedWolves
  • We’re not in Kansas anymore!
  • Overview
      • Who, what, where and why of jQuery
      • Review Core jQuery Concepts
      • jQuery API Overview
      • jQuery plugins
      • jQuery UI
      • jQuery News
      • Announcement
  • Who uses jQuery
      • 35.36% of all sites that use JavaScript, use jQuery
      • A little more then 1 out 5 sites (23.07%), use jQuery
    http://trends.builtwith.com/javascript/JQuery
  • Who uses jQuery
      • 35% of all site that use JavaScript, use jQuery
      • 1 out 5 sites, use jQuery
    http://trends.builtwith.com/javascript/JQuery
  • Who uses jQuery
      • 35% of all site that use JavaScript, use jQuery
      • 1 out 5 sites, use jQuery
    http://trends.builtwith.com/javascript/JQuery
  • What is jQuery?
      • jQuery is a JavaScript Library!
      • Dealing with the DOM
        • (e.g. selecting, creating, traversing, changing, etc.)
      • JavaScript Events
      • Animations
      • Ajax interactions
  • What does that mean?
    • if (browserType == "ie") document.poppedLayer =
    • eval('document.getElementById("HiddenDIV")');
    • else
    • document.poppedLayer =
    • eval('document.layers["HiddenDIV"]');
    • document.poppedLayer.style.visibility = "visible";
    It means no more of this…
  • Using jQuery we can do this
    •  
    • jQuery(“#HiddenDiv”).show();
  • Using jQuery we can do this
    •  
    • jQuery (“#HiddenDIV”).show();
    var $ = jQuery; $(“#HiddenDiv”).show(); jQuery function
  • Using jQuery we can do this
    •  
    • jQuery(“ #HiddenDIV ”).show();
    jQuery Function jQuery Selector (CSS expression)
  • Using jQuery we can do this
    •  
    • jQuery(“#HiddenDIV”) .show();
    jQuery Wrapped Set jQuery Function jQuery Selector (CSS expression)
  • Using jQuery we can do this
    •  
    • jQuery(“#HiddenDIV”). show() ;
    jQuery Wrapped Set jQuery Function jQuery Selector (CSS expression) jQuery Method
  • jQuery really is the “write less, do more” JavaScript Library!
  • Why use jQuery?
      • Helps us to simplify and speed up web development
      • Allows us to avoid common headaches associated with cross-browser development
      • Provides a large pool of plugins
      • Large and active community
      • Tested on 50 browsers, 11 platforms
      • It’s for both developers and designers
  • Why use jQuery?
      • Helps us to simplify and speed up web development
      • Allows us to avoid common headaches associated with cross-browser development
      • Provides a large pool of plugins
      • Large and active community
      • Tested on 50 browsers, 11 platforms
      • It’s for both developers and designers
  • Why use jQuery?
      • Helps us to simplify and speed up web development
      • Allows us to avoid common headaches associated with cross-browser development
      • Provides a large pool of plugins
      • Large and active community
      • Tested on 50 browsers, 11 platforms
      • It’s for both developers and designers
  • Where to get jQuery
      • Download the source from Github (moved last night)
      • Or use a CDN
        • Google
        • Microsoft
  • Core jQuery Concepts
      • Select Something, do something
      • Create something, do something
      • Chaining and Operating
      • Demo’d
      • http://ejohn.org/apps/learn-jquery/
      • and
      • http://ralphwhitbeck.com/talks/stackoverflowdevdays/createdosomething.html
  • jQuery API Overview
    • Core
    • Selectors
    • Attributes
    • Traversing
    • Manipulation
    • CSS
    • Events
    • Effects
    • Ajax
    • Utilities
    You can review Core Methods at: http://docs.jquery.com or http://api.jquery.com
  • jQuery Plugins
    •   There are over 2200 plugins
    • Plugins extend jQuery’s functionality
    • If you can’t find the functionality in a plugin, make your own!
    • You can make a jQuery Plugin in six steps
    • Step 1. create a private scope for $ alias
    <!DOCTYPE html><html><body> <script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;></script> <script> (function($){ })(jQuery); </script></body></html> A jQuery plugin in 6 steps
    • Step 2. attach plugin to fn alias
    • <!DOCTYPE html><html><body>
    • <script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;></script>
    • <script>
    • (function($){
      • $.fn.loveNotHate = function(){
      • $(this).text($(this).text().replace(/hate/g,'love'));
      • };
    • })(jQuery);
    • </script></body></html>
    A jQuery plugin in 6 steps
    • Step 2. attach plugin to fn alias
    • <!DOCTYPE html><html><body>
    • <p>I hate jQuery!</p>
    • <script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;></script>
    • <script>
    • (function($){
      • $.fn.loveNotHate = function(){
      • $(this).text($(this).text().replace(/hate/g,'love'));
      • };
    • })(jQuery);
    • jQuery('p').loveNotHate();
    • </script></body></html>
    A jQuery plugin in 6 steps
    • Step 3. add implicit iteration
    • <!DOCTYPE html><html><body>
    • <p>I hate jQuery!</p>
    • <script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;></script>
    • <script>
    • (function($){
      • $.fn.loveNotHate = function(){
        • this.each(function(){
          • $(this).text($(this).text().replace(/hate/g,'love'));
        • });
      • };
    • })(jQuery);
    • jQuery('p').loveNotHate();
    • </script></body></html>
    A jQuery plugin in 6 steps
    • Step 3. add implicit iteration
    • <!DOCTYPE html><html><body>
    • <p>I hate jQuery!</p>
    • <p>I mean really hate jQuery!</p>
    • <script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;></script>
    • <script>
    • (function($){
      • $.fn.loveNotHate = function(){
        • this.each(function(){
          • $(this).text($(this).text().replace(/hate/g,'love'));
        • });
      • };
    • })(jQuery);
    • jQuery('p').loveNotHate();
    • </script></body></html>
    A jQuery plugin in 6 steps
    • Step 4. enable chaining
    • <!DOCTYPE html><html><body>
    • <p>I hate jQuery!</p>
    • <p>I mean really hate jQuery!</p>
    • <script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;></script>
    • <script>
    • (function($){
      • $.fn.loveNotHate = function(){
        • return this.each(function(){
          • $(this).text($(this).text().replace(/hate/g,'love'));
        • });
      • };
    • })(jQuery);
    • jQuery('p').loveNotHate();
    • </script></body></html>
    A jQuery plugin in 6 steps
    • Step 4. enable chaining
    • <!DOCTYPE html><html><body>
    • <p>I hate jQuery!</p>
    • <p>I mean really hate jQuery!</p>
    • <script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;></script>
    • <script>
    • (function($){
      • $.fn.loveNotHate = function(){
        • return this.each(function(){
          • $(this).text($(this).text().replace(/hate/g,'love'));
        • });
      • };
    • })(jQuery);
    • jQuery('p').loveNotHate() .hide() ;
    • </script></body></html>
    A jQuery plugin in 6 steps
    • Step 5. add default options
    • <!DOCTYPE html><html><body>
    • <p>I hate jQuery!</p>
    • <p>I mean really hate jQuery!</p>
    • <script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;></script>
    • <script>
    • (function($){
      • $.fn.loveNotHate = function(){
        • return this.each(function(){
          • $(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text ));
        • });
      • };
      • $.fn.loveNotHate.defaultOptions = {text:'love'};
    • })(jQuery);
    • jQuery('p').loveNotHate();
    • </script></body></html>
    A jQuery plugin in 6 steps
    • Step 6. add custom options
    • <!DOCTYPE html><html><body>
    • <p>I hate jQuery!</p>
    • <p>I mean really hate jQuery!</p>
    • <script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;></script>
    • <script>
    • (function($){
      • $.fn.loveNotHate = function(){
        • return this.each(function(){
          • $(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text));
        • });
      • };
      • $.fn.loveNotHate.defaultOptions = {text:'love'};
    • })(jQuery);
    • jQuery('p').loveNotHate( {text:'love-love-love'} );
    • </script></body></html>
    A jQuery plugin in 6 steps
    • Step 6. add custom options
    • <!DOCTYPE html><html><body>
    • <p>I hate jQuery!</p>
    • <p>I mean really hate jQuery!</p>
    • <script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;></script>
    • <script>
    • (function($){
      • $.fn.loveNotHate = function( customOptions ){
        • return this.each(function(){
          • $(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text));
        • });
      • };
      • $.fn.loveNotHate.defaultOptions = {text:'love'};
    • })(jQuery);
    • jQuery('p').loveNotHate( {text:'love-love-love'} );
    • </script></body></html>
    A jQuery plugin in 6 steps
    • Step 6. add custom options
    • <!DOCTYPE html><html><body>
    • <p>I hate jQuery!</p>
    • <p>I mean really hate jQuery!</p>
    • <script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;></script>
    • <script>
    • (function($){
      • $.fn.loveNotHate = function( customOptions ){
        • var options = $.extend({},$.fn.loveNotHate.defaultOptions, customOptions);
        • return this.each(function(){
          • $(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text));
        • });
      • };
      • $.fn.loveNotHate.defaultOptions = {text:'love'};
    • })(jQuery);
    • jQuery('p').loveNotHate( {text:'love-love-love'} );
    • </script></body></html>
    A jQuery plugin in 6 steps
    • Step 6. add custom options
    • <!DOCTYPE html><html><body>
    • <p>I hate jQuery!</p>
    • <p>I mean really hate jQuery!</p>
    • <script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;></script>
    • <script>
    • (function($){
      • $.fn.loveNotHate = function( customOptions ){
        • var options = $.extend({},$.fn.loveNotHate.defaultOptions, customOptions);
        • return this.each(function(){
          • $(this).text($(this).text().replace(/hate/g, options.text ));
        • });
      • };
      • $.fn.loveNotHate.defaultOptions = {text:'love'};
    • })(jQuery);
    • jQuery('p').loveNotHate( {text:'love-love-love'} );
    • </script></body></html>
    A jQuery plugin in 6 steps
  • Plugins are simple, just follow the steps!
  • jQuery UI
    •   Official jQuery Project
    • Provides plugins that make user interface elements easy
    • Contains:
      • Interactions (Draggable, Droppable, Resizable, Selectable & Sortable)
      • Widgets (Accordian, Datepicker, Dialog, Progressbar, Slider, Tabs)
      • Effects (AddClass, RemoveClass, Animate, Effects, etc.)
      • Theming
  • What can jQuery & jQuery UI Produce?
      • High school students from Spotswood High School
      • Jamie Gilar
      • John Cicolella
      • Demo’d http://www.jamie.strunex.net/homework/channel/ Also Demo’d http://ralphwhitbeck.com/talks/stackoverflowdevdays/ui-createdosomething.html
  • jQuery News
    • Four Conferences next year (online, San Francisco, London, and Boston)
    • Revamped Plugin site (by EOY)
    • jQuery Ownership transferred from John Resig to the Software Freedom Conservancy.
    • jQuery 1.4 coming soon
    • Much More, including…
  • Announcement
  • The Official jQuery Podcast
    • jQuery Podcast
    • Co-hosting with Elijah Manor
    • Scheduled to release 1 st Episode mid-November
    • Similar in format to This Week in Tech
    • Live streaming via http://tinychat.com/jquerypodcast
    • Twitter Account: @jQueryPodcast
  • The Official jQuery Podcast
    • Interview key people in the jQuery Community
    • First scheduled guest is John Resig
    • Second scheduled guest is Richard D. Worth
    • Hopefully Jeff and Joel in the future
  • Thank You
    • Questions?