Eugene Andruszczenko: jQuery

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 Lightweight Footprint CSS3 Compliant 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

Development Team

Evangelist Team

jQuery UI Team

Plugins Team

Web and Design Team

jQuery has an additional unofficial team

The web community

jQuery extension authors

3rd party contributors

You!

jQuery: Show me the money $

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

The basics:

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:

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:

collect only checkboxes $ ( ":checkbox" );

collect only hidden inputs $ ( ":hidden" );

collect only text inputs + iterate $ ( ":text" );

jQuery: In the event of... events

jQuery'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:

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: ready

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!

Example:

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 $ . post

Let'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 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

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>