This document provides summaries of key points about the jQuery and Prototype JavaScript libraries: 1. jQuery is an open-source JavaScript library that simplifies HTML document traversal, event handling, animation, and Ajax interactions. It has a lightweight footprint and is cross-browser compatible. 2. Both jQuery and Prototype are available under MIT and GPL licenses, allowing developers to choose the license that best suits their projects. jQuery is maintained by a core team and has additional community support. 3. The document then provides examples of common jQuery functions and selectors for manipulating the DOM, handling events, animating elements, and making Ajax requests.

1. javascript libraries: jQuery and Prototype

2. 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

3. jQuery: A little less information "The Write Less, Do More , Javascript Library" jquery.com Lightweight Footprint CSS3 Compliant Cross-Browser Compliant

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 (); $ ( "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 (){} } );

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

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: $ ( ":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" )

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>