javascript libraries:  jQuery and Prototype
jQuery:  Introduction "jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, even...
jQuery:  A little less information "The Write Less,  Do More , Javascript Library" jquery.com    Lightweight Foo...
jQuery:  A business approach <ul><li>Open License   </li></ul><ul><li>  </li></ul><ul><li>jQuery is currently available fo...
jQuery:  Show me the  money $ <ul><li>The dollar sign   ($)   is  your first step in talking to jQuery </li></ul><ul><li> ...
jQuery:  Where the  action  is $ (). action () <ul><li>$(). action ()   is  how you perform your action on all of your ite...
jQuery:  Moving pictures $ (). animate () $(). animate () ;   the key aspect of this function is the object of style prope...
jQuery:  per- form -ing relationship $ ( &quot;:input&quot; ) <ul><li>Collect all your form input fields in one step:  $ (...
jQuery:  In the  event  of... events <ul><li>jQuery's event system normalizes the event object according to W3C standards....
jQuery:  Are you  ready ? events: ready <ul><li>One of the more important events listener / broadcasters that jQuery suppo...
jQuery:  extensions : your deadline needn't one $ . extend () Extend one object with one or more others, returning the ori...
jQuery:  express -ions: faster and simpler  $ . expr () We can use  $ . extend  also to extend other objects defined insid...
jQuery:  AJAX  - fast data  $ . ajax () <ul><li>jQuery's  $ . ajax  provides a rich and robust method for handling data tr...
libraries:  Rapid Development Cheaper, Better & Faster     The case used to be pick two of the above! You can't have all t...
libraries:  Proof of Concept POC not POS     Don't throw away those prototype builds!!!   javscript. library  >>   POC   >...
libraries:  Studio Approach Easy to interpret     Through exposure and usage, a common language  (code & spoken)  will typ...
libraries:  ROI Return on Investment   Othe than the $ being standard notation for both jQuery and Prototype there is it's...
libraries:  Out of the basement Real world libraries, Real world clients   Tech Google BIM Dell Intel AOL Oracle News BBC ...
Thanks:  So long and thanks for all the  $ $ . thanks () The obligatory (often overlooked) thank you page   *copy, paste, ...
Upcoming SlideShare
Loading in …5
×

Eugene Andruszczenko: jQuery

2,346 views

Published on

Eugene Andruszczenko (http://32teeth.org) talks about jQuery.

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

No Downloads
Views
Total views
2,346
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
76
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Welcome and introduction
  • Eugene Andruszczenko: jQuery

    1. javascript libraries: jQuery and Prototype
    2. jQuery: Introduction &quot;jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development .&quot; jquery.com  
    3. jQuery: A little less information &quot;The Write Less, Do More , Javascript Library&quot; jquery.com   Lightweight Footprint CSS3 Compliant Cross-Browser Compliant
    4. jQuery: A business approach <ul><li>Open License </li></ul><ul><li>  </li></ul><ul><li>jQuery is currently available for use in all personal or commercial projects under both MIT and GPL licenses. This means that you can choose the license that best suits your project, and use it accordingly. </li></ul><ul><li>  </li></ul><ul><li>Ongoing Refinement </li></ul><ul><li>  </li></ul><ul><li>jQuery has 5 core teams that  </li></ul><ul><ul><li>Development Team </li></ul></ul><ul><ul><li>Evangelist Team </li></ul></ul><ul><ul><li>jQuery UI Team </li></ul></ul><ul><ul><li>Plugins Team </li></ul></ul><ul><ul><li>Web and Design Team </li></ul></ul><ul><li>  </li></ul><ul><li>jQuery has an additional unofficial team </li></ul><ul><ul><li>The web community </li></ul></ul><ul><ul><ul><li>jQuery extension authors </li></ul></ul></ul><ul><ul><ul><li>3rd party contributors </li></ul></ul></ul><ul><ul><li>You! </li></ul></ul>
    5. jQuery: Show me the money $ <ul><li>The dollar sign ($) is your first step in talking to jQuery </li></ul><ul><li>  </li></ul><ul><li>The basics: </li></ul><ul><li>  </li></ul><ul><ul><li>CSS selectors           $ ( &quot;.className&quot; ); </li></ul></ul><ul><ul><li>DOM selectors          $ ( &quot;a&quot; ); </li></ul></ul><ul><ul><li>classes, methods      $ . fn (); </li></ul></ul>
    6. jQuery: Where the action is $ (). action () <ul><li>$(). action () is how you perform your action on all of your items </li></ul><ul><li>  *note: actions are stackable </li></ul><ul><li>  *note: actions accept arguments and callbacks </li></ul><ul><li>Example: </li></ul><ul><li>  </li></ul><ul><ul><li>simple fade in                                     $ ( &quot;a&quot; ). fadeIn (); </li></ul></ul><ul><ul><li>hide, then fade in all anchor tags       $ ( &quot;a&quot; ). hide (). fadeIn (); </li></ul></ul><ul><ul><li>fade in all anchor tags w/ callback     $ ( &quot;a&quot; ). fadeIn ( 'slow' , function (){}); </li></ul></ul>
    7. jQuery: Moving pictures $ (). animate () $(). animate () ;  the key aspect of this function is the object of style properties that will be animated, and to what end. Animation: Animated effects can be controlled further and customized using jQuery's $ (). animate (); method // fade in: same as  $ (). fadeIn ();         $ ( &quot;a&quot; ). animate (      {          &quot;opacity&quot; :1      },      {          &quot;duration&quot; :500      } );   // fade in, change dimensions, left position add a callback  $ ( &quot;a&quot; ). animate (      {            &quot;opacity&quot; :1,         &quot;height&quot; :500,         &quot;width&quot; :400,         &quot;left&quot; :250      },      {          &quot;duration&quot; :500,         &quot;complete&quot; : function (){}      } );
    8. jQuery: per- form -ing relationship $ ( &quot;:input&quot; ) <ul><li>Collect all your form input fields in one step: $ ( &quot;:input&quot; ) </li></ul><ul><li>  *more refined selects are available </li></ul><ul><li>Example: </li></ul><ul><li>  </li></ul><ul><ul><li>collect only checkboxes                       $ ( &quot;:checkbox&quot; ); </li></ul></ul><ul><ul><li>collect only hidden inputs                     $ ( &quot;:hidden&quot; ); </li></ul></ul><ul><ul><li>collect only text inputs + iterate            $ ( &quot;:text&quot; ); </li></ul></ul>
    9. jQuery: In the event of... events <ul><li>jQuery's event system normalizes the event object according to W3C standards. The event object is guaranteed to be passed to the event handler. </li></ul><ul><li>  </li></ul><ul><li>*2 approaches exist, direct event, and binding event listeners </li></ul><ul><li>Example: </li></ul><ul><li>  </li></ul><ul><ul><li>perform a click                    $ ( &quot;a&quot; ). click ( function (){ alert ( 'you clinked' )}); </li></ul></ul><ul><ul><li>bind a click                          $ ( &quot;a&quot; ). bind ( 'click' , function (){ alert ( 'you clinked' )}); </li></ul></ul><ul><ul><li>call that event                     $ ( &quot;a&quot; ). trigger ( 'click' ); // calls #2 </li></ul></ul><ul><ul><li>unbind that event                $ ( &quot;a&quot; ). unbind ( 'click' ); </li></ul></ul><ul><li>  </li></ul><ul><li>*jQuery currently has support for over 39 different events! and that's just the core  </li></ul>
    10. jQuery: Are you ready ? events: ready <ul><li>One of the more important events listener / broadcasters that jQuery support is the ready event. It truly is about being prepared, and ready will tell you when! </li></ul><ul><li>  </li></ul><ul><li>Example: </li></ul><ul><li>  </li></ul><ul><ul><li>document                    $ ( document ). ready ( function (){ // ready when you are }); </li></ul></ul><ul><ul><li>shorthand                    $ ( function (){ // ready when you are }); </li></ul></ul>
    11. jQuery: extensions : your deadline needn't one $ . extend () Extend one object with one or more others, returning the original, modified, object.   *hang on, this is how jQuery's core works, so...   Let's extend jQuery! // we need an extension that will bold all selected objects $ . extend (     {         bold : function (obj)          {             $ (obj).each(                 function ()                 {                      $ ( this ). css ({ &quot;font-weight&quot; : &quot;bold&quot; });                  }             )         }     } ) // usage $ . bold ( &quot;a&quot; );
    12. jQuery: express -ions: faster and simpler $ . expr () We can use $ . extend also to extend other objects defined inside of jQuery, eg. to add new selectors:   *hang on, this is how jQuery's core works, so... We've already seen, and used some of jQuery's extension expression method: $ ( &quot;:input&quot; )   Let's express with jQuery! // we need an expression (filter) that will find all selected objects that are bold $ . extend (   $ . expr [ ':' ],   {      bold: function (arg)      {        return ( $ (arg). css ( &quot;font-weight&quot; ) === &quot;bold&quot; )      }   } ) //usage $ ( &quot;:bold&quot; )
    13. jQuery:  AJAX - fast data $ . ajax () <ul><li>jQuery's $ . ajax provides a rich and robust method for handling data transport and manipulation. In addition to the low-level $ . ajax ( read: more control ) method, we also have available to use high-level ( read: quick and dirty ) methods as well, including: $ . load, $ . get and $ . post </li></ul><ul><li>Let's take a look! </li></ul><ul><li>// newsletter opt-in subscriber </li></ul><ul><li>$ . ajax ( </li></ul><ul><ul><li>{ </li></ul></ul><ul><ul><li>     url : &quot;http://someurl.com/newsletter.php&quot; , </li></ul></ul><ul><ul><li>    cache : false , </li></ul></ul><ul><ul><li>    data :{action: &quot;subscribe&quot; ,email: &quot;eugene.andruszczenko@gmail.com&quot; ,name: &quot;eugene&quot; }, </li></ul></ul><ul><ul><li>    dataType : &quot;json&quot; ,     // [xml, html, script, json, jsonp, text] </li></ul></ul><ul><ul><li>    type : &quot;POST&quot; ,        // [POST, GET, PUT, DELETE] </li></ul></ul><ul><ul><li>    success :function(response) </li></ul></ul><ul><ul><li>    { </li></ul></ul><ul><ul><li>        // response is the data returned: in this case it will be expecting json data </li></ul></ul><ul><ul><li>        // {success:true|false}          </li></ul></ul><ul><ul><li>    }, </li></ul></ul><ul><ul><li>    error :function() </li></ul></ul><ul><ul><li>    { </li></ul></ul><ul><ul><li>        // something went wrong!!! </li></ul></ul><ul><ul><li>    } </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>) </li></ul>
    14. libraries: Rapid Development Cheaper, Better & Faster   The case used to be pick two of the above! You can't have all three. Until now!!!   javscript. library = { cheaper : true , better : true , faster : true } This holds true for being able to develop through the use of javascript libraries on the front end. Most common example: Typically in project estimation, there is still a fundamental amount of custom code that needs to be written and allotted for. In addition to that, the time is typically shortened through the process of not deliberating if the project will make use of a javascript library to leverage for your project development, but rather which one!!! As with other development languages, libraries for those languages will create a unified base for developers at all tiers of the projects   backend. developer <=> middleware. developer <=> frontend. developer
    15. libraries: Proof of Concept POC not POS   Don't throw away those prototype builds!!!   javscript. library >> POC >> Production This holds true for being able to develop through the use of javascript libraries on the front end. Most common example: Typically in project estimation, there is still a fundamental amount of custom code that needs to be written and allotted for. In addition to that, the time is typically shortened through the process of not deliberating if the project will make use of a javascript library to leverage for your project development, but rather which one!!! As with other development languages, libraries for those languages will create a unified base for developers at all tiers of the projects   backend. developer <=> middleware. developer <=> frontend. developer
    16. libraries: Studio Approach Easy to interpret   Through exposure and usage, a common language (code & spoken) will typically evolve within any size of given studio where developers, designer and the like work together on projects   designer . idea = developer . code = client .satisfaction Communication barriers fall and ideas blossom as to the handling of effects, motion, manipulation. If you are a designer , how many times have you asked something similar to:  Can't you just make it slide up and fade at the same time?   If you are a designer , how many times have you been asked similarly:  Make it slide up and fade at the same time? With the most common functionality already handled by most javascript framework, the guess work, browser compliance, backwards compatibility...    ...big list of client requirements (are you still paying attention) ...   ...these now become and extension of your code without deteriorating the core intentions
    17. libraries: ROI Return on Investment   Othe than the $ being standard notation for both jQuery and Prototype there is it's literal interpretation...   ...$ the dollar sign!!!   javscript. library = { free : true , margin : true , profit : true } How it's done! Under both MIT and GPL licenses. This means that you can choose the license that best suits your project, and use it accordingly. Learning is easy! Both libraries leverage HTML and CSS (Cascading Style Sheets) knowledge as a stepping stone into javascript library usage. Getting your feet wet does not require expert knowledge of javascript. Additionally, these libraries provide a framework unification of CSS, DOM (document object model) and javascript , providing and enabling even non developers to create proof of concept work! Recently javascript library support has been introduced in Adobe's Dreamweaver CS3 (through extensions) and is fully supported in CS4. Pick your library, highlight your object, pick your action(), done! Code hinting and coloring also supported.
    18. libraries: Out of the basement Real world libraries, Real world clients Tech Google BIM Dell Intel AOL Oracle News BBC NBC BusinessWeek Newsweek Reuturs CBS News Sales|Services NBC Amazon NetFlix SalesForce Dominos US Airways Prototype jQuery Tech Apple Tivo NASA Microsoft News NBC CNN.com ESPN Globe and Mail Sales|Services eBay H&M Sony DropSend Other Ruby on Rails
    19. Thanks: So long and thanks for all the $ $ . thanks () The obligatory (often overlooked) thank you page   *copy, paste, and run!   // we need an extension that will bold all selected objects <script src=&quot;http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js&quot; type=&quot;text/javascript&quot;></script>     <script> $.extend(     {         thanks:function(obj){$(obj).each(function(i){             var text    = this.toString();             setTimeout(function(){var li    = $(document.createElement(&quot;li&quot;));li.text(text).hide().fadeIn('slow');$(&quot;body&quot;).append(li);},(i * 1000))         })}     } );         $(document).ready(function(){     $.thanks(         [&quot;refresh events&quot;, &quot;justin kuzoch&quot;,    &quot;centre for social innovation&quot;,    &quot;YOU&quot;]     )        }) </script> <body><h1>big thanks to:</h1></body>

    ×