javascript libraries: jQuery and Prototype

jQuery: Introduction

"jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development."

jquery.com 

jQuery: A little less information

"The Write Less, Do More, Javascript Library"jquery.com 

LightweightFootprint

CSS3Compliant Cross-Browser

Compliant

jQuery: A business approach

Open License  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.  Ongoing Refinement jQuery has 5 core teams that 

1. Development Team2. Evangelist Team3. jQuery UI Team4. Plugins Team5. Web and Design Team

 jQuery has an additional unofficial team

1. The web communityo jQuery extension authorso 3rd party contributors

• You!

jQuery: Show me the money

$The dollar sign ($) is your first step in talking to jQuery

 The basics: 

1. CSS selectors           $(".className");• DOM selectors          $("a");• classes, methods      $.fn();

jQuery: Where the action is

$().action()$().action() is how you perform your action on all of your items *note: actions are stackable *note: actions accept arguments and callbacks

Example: 

1. simple fade in                                     $("a").fadeIn();• hide, then fade in all anchor tags       $("a").hide().fadeIn();• fade in all anchor tags w/ callback     $("a").fadeIn('slow', function(){});

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();         $("a").animate(    {        "opacity":1    },    {        "duration":500    });  

// fade in, change dimensions, left position add a callback $("a").animate(    {         "opacity":1,        "height":500,        "width":400,        "left":250     },    {        "duration":500,        "complete":function(){}     });

jQuery: per-form-ing relationship

$(":input")

Collect all your form input fields in one step: $(":input") *more refined selects are available

Example: 1. collect only checkboxes                       $(":checkbox");• collect only hidden inputs                     $(":hidden");• collect only text inputs + iterate            $(":text");

jQuery: In the event of...

eventsjQuery's event system normalizes the event object according to W3C standards. The event object is guaranteed to be passed to the event handler. *2 approaches exist, direct event, and binding event listeners

Example: 

1. perform a click                    $("a").click(function(){alert('you clinked')}); • bind a click                          $("a").bind('click', function(){alert('you clinked')});• call that event                     $("a").trigger('click'); // calls #2• unbind that event                $("a").unbind('click'); *jQuery currently has support for over 39 different events! and that's just the core 

jQuery: Are you ready?

events: readyOne 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! Example: 

1. document                    $(document).ready(function(){// ready when you are }); • shorthand                    $(function(){// ready when you are });

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({"font-weight":"bold"});                }             )         }    } )// usage $.bold("a");

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: $(":input") 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("font-weight") === "bold")      }  })//usage$(":bold")

jQuery: AJAX - fast data

$.ajax()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 $.postLet's take a look!// newsletter opt-in subscriber$.ajax( {     url:"http://someurl.com/newsletter.php",     cache:false,     data:{action:"subscribe",email:"eugene.andruszczenko@gmail.com",name:"eugene"},     dataType:"json",    // [xml, html, script, json, jsonp, text]     type:"POST",        // [POST, GET, PUT, DELETE]     success:function(response)     {         // response is the data returned: in this case it will be expecting json data         // {success:true|false}             },     error:function()     {         // something went wrong!!!     } }

)

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

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

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

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.

libraries: Out of the basement

Real world libraries, Real world clients

TechGoogleBIMDellIntelAOLOracle

NewsBBCNBCBusinessWeekNewsweekReutursCBS News

Sales|ServicesNBCAmazonNetFlixSalesForceDominosUS Airways

Prototype

jQuery

TechAppleTivoNASAMicrosoft

NewsNBCCNN.comESPNGlobe and Mail

Sales|ServiceseBayH&MSonyDropSend

OtherRuby on Rails

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="http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js" type="text/javascript"></script>    <script>$.extend(    {        thanks:function(obj){$(obj).each(function(i){            var text    = this.toString();            setTimeout(function(){var li    = $(document.createElement("li"));li.text(text).hide().fadeIn('slow');$("body").append(li);},(i * 1000))        })}    });        

$(document).ready(function(){    $.thanks(        ["refresh events", "justin kuzoch",    "centre for social innovation",    "YOU"]    )        })</script><body><h1>big thanks to:</h1></body>