jQuery CodeCamp

jQuery CodeCamp Kenneth Auchenberg jQuery CodeCamp @auchenberg kenneth.io

jQuery CodeCamp Kenneth Auchenberg Twitter Blog jQuery CodeCamp @auchenberg kenneth.io

About me Bah jQuery CodeCamp @auchenberg kenneth.io

Agenda jQuery CodeCamp @auchenberg kenneth.io

Our mission. The basics. jQuery. Go Go Go! jQuery CodeCamp @auchenberg kenneth.io

Our mission jQuery CodeCamp @auchenberg kenneth.io

jQuery CodeCamp @auchenberg kenneth.io

Chat Realtime jQuery CodeCamp @auchenberg kenneth.io

Chat server Chat jQuery CodeCamp @auchenberg kenneth.io

Chat server IE Firefox Chrome Chat You guys! jQuery CodeCamp @auchenberg kenneth.io

The basics jQuery CodeCamp @auchenberg kenneth.io

Browsers jQuery CodeCamp @auchenberg kenneth.io

BOM vs. DOM? jQuery CodeCamp @auchenberg kenneth.io

Document Location History Frames BOM Navigator Browser Object Model jQuery CodeCamp @auchenberg kenneth.io

HTML DOM Document Object Model jQuery CodeCamp @auchenberg kenneth.io

SVG DOM Scalable Vector Graphics MathML DOM Mathematical Markup Langugage SMIL DOM Synchronized Multimedia Integration Language DOM Document Object Model jQuery CodeCamp @auchenberg kenneth.io

domReady vs. onLoad? jQuery CodeCamp @auchenberg kenneth.io

domReady vs. onLoad? DOMcontentLoaded vs. onLoad? jQuery CodeCamp @auchenberg kenneth.io

Closure Library Frameworks Abstractions jQuery CodeCamp @auchenberg kenneth.io

jQuery CodeCamp @auchenberg kenneth.io

“ Looking at how Behaviour works, I've never been completely happy - it simply seems too tedious and verbose for everyday ” John Resig December 2005 Quote from http://ejohn.org/blog/selectors-in-javascript/ jQuery CodeCamp @auchenberg kenneth.io

A: Behaviour B: pre-jQuery   Behaviour.register({ $('#example li').bind('click',function(){     '#example li': function(e){     this.parentNode.removeChild(this);       e.onclick = function(){ });         this.parentNode.removeChild(this);       }     }   }); A: Behaviour.register({'':function(e){e.on=}});  B: $('').bind('',); Syntax jQuery CodeCamp @auchenberg kenneth.io

A: Behaviour B: pre-jQuery   Behaviour.register({ $('#foo ol li')     '#foo ol li': function(a) {  .set('title','List Items!')       a.title = "List Items!";  .bind('click',function(){alert('Hello!');})       a.onclick = function(){alert('Hello!');};     .select('.tmp')     },       .style('color','white')     '#foo ol li.tmp': function(a) {       .select('.foo')       a.style.color = 'white';         .style('background','red');     },     '#foo ol li.tmp .foo': function(a) {       a.style.background = 'red';     }   }); A: Behaviour.register({'':function(a){a.=;a.on=;},'#foo ol li':function(a){a.style.='';}, B: $('').set('','').bind('',).select('').style('','').select('').style('',''); jQuery CodeCamp @auchenberg kenneth.io

jQuery Prototype Trend October 2010 Scale is based on the average worldwide traffic of jquery javascript from 2004 to 2010. Source: http://www.google.com/trends?q=dojo+javascript,+jquery+javascript,+yui+javascript,+prototype+javascript,+mootools+javascript&ctab=0&geo=all&date=all&sort=1 jQuery CodeCamp @auchenberg kenneth.io

Prototype jQuery Usage October 2010 Distribution is calculated from a cross section of website domains provided by URLs entered at BuiltWith.com and the Quantcast Top Million. Last calculated on October 19 2010. Source: http://trends.builtwith.com/javascript jQuery CodeCamp @auchenberg kenneth.io

$? jQuery CodeCamp @auchenberg kenneth.io

var $ = ʻHello Worldʼ; var € = ʻHello Worldʼ; var @ = ʻHello Worldʼ; var _ = ʻHello Worldʼ; Identiﬁes Names jQuery CodeCamp @auchenberg kenneth.io

“ 7.6 Identifier Names and Identifiers Identifier Names are tokens that are interpreted according to the grammar given in the “Identifiers” section of chapter 5 of the Unicode standard, with some small modifications. An Identifier is an IdentifierName that is not a ReservedWord (see 7.6.1). The Unicode identifier grammar is based on both normative and informative character categories specified by the Unicode Standard. The characters in the specified categories in version 3.0 of the Unicode standard must be treated as in those categories by all conforming ECMAScript implementations. This standard specifies specific character additions: The dollar sign ($) and the underscore (_) are permitted anywhere in an IdentifierName. ECMA-262 …” Quote from Standard ECMA-262 ECMAScript Language Specification jQuery CodeCamp @auchenberg kenneth.io

Utilities Traversing Attributes Effects Core Selectors Manipulation CSS Events Ajax jQuery jQuery jQuery CodeCamp @auchenberg kenneth.io

Selectors & Performance Events & Delegation AJAX & Communication Extensions & Community jQuery CodeCamp @auchenberg kenneth.io

Which browsers does jQuery support? jQuery CodeCamp @auchenberg kenneth.io

3.0+ 9.0+ 2.0+ 6.0+ Browsers 1.0+ jQuery CodeCamp @auchenberg kenneth.io

Getting started jQuery CodeCamp @auchenberg kenneth.io

<!DOCTYPE html> <html>   <head>       <title>jQuery</title>   </head>     <body></body>     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ jquery/1.4.3/jquery.min.js"></script> </html> Inject jQuery CodeCamp @auchenberg kenneth.io

$(document).ready(function() {      // Go mental }(; Ready jQuery CodeCamp @auchenberg kenneth.io

jQuery code begins $ followed by a selector and ends with action(s) $(’div’).addClass(‘kenneth’); $(’div.groups‐panel’).addClass(‘kenneth’).find(’span:first‐ child’).text(‘rocks’).show(); jQuery CodeCamp @auchenberg kenneth.io

Selectors and actions can be attached to events. $(’body’).click(function() {      $(’div’).addClass(‘kenneth’) ; }); $(’body’).live(’click’, function() {      $(’div’).addClass(‘kenneth’) ; }); jQuery CodeCamp @auchenberg kenneth.io

Pause jQuery CodeCamp @auchenberg kenneth.io

Selectors jQuery CodeCamp @auchenberg kenneth.io

document.getElementById('header') document.getElementsByTagName('p') document.getElementsByClassName(‘.hey’) 'body > div.wrapper > section'? Browser selectors jQuery CodeCamp @auchenberg kenneth.io

Selector Engine jQuery CodeCamp @auchenberg kenneth.io

!"#$ ;<"3-)$ ;+=(),"(->)?$ ;()5G+5"&#$ %&%'%()$ ;&,-)$ ;%'2)B$ ;<"3-)G+5"&#$ *+&,--$ ;(=)>-%&?$ ;5,->-%&?$ ;&,-)G+5"&#$ *+&,--*+&,--$ ;%6%($ ;2,3%()$ ;=(&BG+5"&#$ .$ ;=##$ ;5"##%($ -%&/0$-%&1$ ;%@>"(#%8?$ ;6"-":&%$ ;"(2H)$ ;A)>"(#%8?$ ;<"&%$ 2,3%()$4$+5"&#$ ;&)>"(#%8?$ .C,))3D$ ;:H))=($ 23%6$7$(%8)$ ;5%,#%3$ .C,))3E6,&D$ ;%(,:&%#$ 23%6$9$-":$ ;,("',)%#$ .C,))3FE6,&D$ ;+5%+I%#$ .C,))DC,))1D$ ;-%&%+)%#$ Selectors jQuery CodeCamp @auchenberg kenneth.io

• 2003.03.25: document.getElementsBySelector() by Simon Willison (later used in behaviour.js)[source] • 2004.04.10: CssQuery() 1.0: by Dean Edwards • 2005.08.19: CssQuery() 2.0. • 2005.08.22: jSelect (precursor to jQuery) • 2006.01.14: jQuery first release. • 2006.01.18: Prototype. Initial release of selector engine. • 2006.04.04: moo.dom (precursor to mootools • 2006.08.26: jQuery 1.0 • 2006.11.14: Mochikit Selector. (orig. ported from prototype) • 2007.01.08: jQuery 1.1a ("10-20x faster than 1.0") • 2007.01.11: DomQuery by Jack Slocum (ExtJS). • 2007.02.05: dojo.query(). • 2007.03.21: base2.DOM. • 2007.05.01: Prototype 1.5.1 • 2007.05.07: Mootools 1.1 • 2007.07.01: jQuery 1.1.3 ("800% faster") • 2007.07.10: Ext 1.1 RC1 • • 2007.07.10: Dojo 0.9 2007.12.04: YUI 2.4.0 Timeline • 2007.12.17: NWMatcher by Diego Perini • 2008.08.25: Sizzle.js by John Resig Source: http://paulirish.com/2008/javascript-css-selector-engine-timeline/ jQuery CodeCamp @auchenberg kenneth.io

Sizzle introduction jQuery CodeCamp @auchenberg kenneth.io

if ( document.querySelectorAll ) { (function(){ var oldSizzle = Sizzle, div = document.createElement("div"); div.innerHTML = ""; // Safari can't handle uppercase or unicode characters when // in quirks mode. if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) { return; } Sizzle = function(query, context, extra, seed){ context = context || document; // Only use querySelectorAll on non-XML documents // (ID selectors don't work in non-HTML documents) if ( !seed && !Sizzle.isXML(context) ) { if ( context.nodeType === 9 ) { try { return makeArray( context.querySelectorAll(query), extra ); } catch(qsaError) {} querySelectorAll jQuery CodeCamp @auchenberg kenneth.io

$(ʻheader aʼ) jQuery CodeCamp @auchenberg kenneth.io

$(ʻheader aʼ) document.querySelectorAll(ʻheader aʼ) ???????? Selector break-down jQuery CodeCamp @auchenberg kenneth.io

array = [ʻ.headerʼ , ʻaʼ] jQuery CodeCamp @auchenberg kenneth.io

Left to right Right to left MooTools Sizzle Ext.JS YUI 3 Prototype.js querySelectorAll Direction jQuery CodeCamp @auchenberg kenneth.io

match: {      ID: /#((?:[wu00c0‐uFFFF‐]|.)+)/,      CLASS: /.((?:[wu00c0‐uFFFF‐]|.)+)/,      NAME: /[name=['"]*((?:[wu00c0‐uFFFF‐]|.)+)['"]*]/,      ATTR: /[s*((?:[wu00c0‐uFFFF‐]|.)+)s*(?:(S?=)s*(['"]*)(.*?)3|)s*]/,      TAG: /^((?:[wu00c0‐uFFFF*‐]|.)+)/,      CHILD: /:(only|nth|last|first)‐child(?:((even|odd|[dn+‐]*)))?/,      POS: /:(nth|eq|gt|lt|first|last|even|odd)(?:((d*)))?(?=[^‐]|$)/,      PSEUDO: /:((?:[wu00c0‐uFFFF‐]|.)+)(?:((['"]?)((?:([^)]+)|[^()]*)+)2))?/ }, .ﬁnd(ʻaʼ) jQuery CodeCamp @auchenberg kenneth.io

TAG: function(match, context){      return context.getElementsByTagName(match[1]); } .ﬁnd(ʻaʼ) jQuery CodeCamp @auchenberg kenneth.io

    CLASS: function(match, curLoop, inplace, result, not, isXML){       match = " " + match[1].replace(//g, "") + " ";       if ( isXML ) {         return match;       }       for ( var i = 0, elem; (elem = curLoop[i]) != null; i++ ) {         if ( elem ) {           if ( not ^ (elem.className && (" " + elem.className + " ").replace(/[tn]/g, "  ").indexOf(match) >= 0) ) {             if ( !inplace ) {               result.push( elem );             }           } else if ( inplace ) {             curLoop[i] = false;           }         }       }           }, return false; .ﬁnd(ʻ.headerʼ) jQuery CodeCamp @auchenberg kenneth.io

$(ʻdiv.me .projectsʼ) $(ʻ.me div.projectsʼ) http://jsperf.com/sizzle-selector-performance jQuery CodeCamp @auchenberg kenneth.io

Pause jQuery CodeCamp @auchenberg kenneth.io

Performance jQuery CodeCamp @auchenberg kenneth.io

cache vs. no-cache http://jsperf.com/cache-jquery-objects jQuery CodeCamp @auchenberg kenneth.io

jQuery.each vs. for loop http://jsperf.com/jquery-each-vs-for-loop/6 jQuery CodeCamp @auchenberg kenneth.io

jQuery.trim vs. RegExp http://jsperf.com/jquery-trim-vs-regexp-trim jQuery CodeCamp @auchenberg kenneth.io

http://jsperf.com/jquery-htmlencode-vs-string-replace/3 jQuery CodeCamp @auchenberg kenneth.io

jQuery vs. HtmlEncode http://jsperf.com/jquery-htmlencode-vs-string-replace/3 jQuery CodeCamp @auchenberg kenneth.io

(build) string vs. object http://jsperf.com/build-appended-object-test jQuery CodeCamp @auchenberg kenneth.io

Events and delegation jQuery CodeCamp @auchenberg kenneth.io

.bind(eventname, function)        .click, .hover, .mouseover .unbind(eventname)                  .focus, .submit .trigger(eventname, function) .live(eventname, function) .delegate(eventname, function) $(’body’).click(function() {      $(’div’).addClass(’zyb’) ; }); Events jQuery CodeCamp @auchenberg kenneth.io

$(’body’).click(function() {      $(’div’).addClass(‘kenneth’) ; }); $(’body’).live(function() {      $(’div’).addClass(‘kenneth’) ; }); Event delegation jQuery CodeCamp @auchenberg kenneth.io

Event delegation jQuery CodeCamp @auchenberg kenneth.io

<ul class="myList">   <li class="red">The first item.</li>   <li class="green">The second item.</li>   <li class="yellow">The third item.</li>   <li class="blue">The fourth item.</li> </ul> Class of the last clicked item: <span id="display">  $(’ul’).click(function(event) {     if(event.target.nodeName == ”LI”) {    $(’#display’).text(event.target.className);   } }); How does it work? jQuery CodeCamp @auchenberg kenneth.io

<ul class="myList">   <li class="red">The first item.</li>     <li class="green">The second item.</li>   <li class="yellow">The third item.</li>     <li class="blue">The fourth item.</li> </ul>   Class of the last clicked item: <span id="display">  $("ul").click( function( event ) {   var elem = event.target;   while( elem.nodeName != "LI" && elem.parentNode) {     elem = elem.parentNode;   }   if(elem.nodeName == "LI") {     $("#display").text(event.target.className);   } }); What if inside? jQuery CodeCamp @auchenberg kenneth.io

<ul class="myList">   <li class="red">The first item.</li>     <li class="green">The second item.</li>   <li class="yellow">The third item.</li>     <li class="blue">The fourth item.</li> </ul>   Class of the last clicked item: <span id="display">  $("ul").click( function( event ) {   var $elem = $(event.target).closest("li");   if($elem.length) {     $("#display").text($elem.attr("class"));   } }); Closest to the rescue jQuery CodeCamp @auchenberg kenneth.io

<ul class="myList">   <li class="red">The first item.</li>     <li class="green">The second item.</li>   <li class="yellow">The third item.</li>     <li class="blue">The fourth item.</li> </ul>   Class of the last clicked item: <span id="display">  $("ul.myList > li").live("click", function(e) {   $("#display").text(     $(this).attr("class")   ); }); $("ul").delegate("li", "click", function(e) {   $("#display").text( .live & .delegate     $(this).attr("class")   ); }); jQuery CodeCamp @auchenberg kenneth.io

AJAX/Communication jQuery CodeCamp @auchenberg kenneth.io

.ajax(options) .get(url, data, callback, dateType) .post(url, data, callback, dateType) .getJSON(url, data, callback, dateType) .getScript(url, callback) .load(url, data, callback) .ajaxComplete()              .ajaxSetup(options) .ajaxStart() .ajaxStop() .ajaxSuccess() .ajaxError() Ajax in jQuery jQuery CodeCamp @auchenberg kenneth.io

CORS jQuery CodeCamp @auchenberg kenneth.io

CORS Cross-Origin Resource Sharing jQuery CodeCamp @auchenberg kenneth.io

callback=? jQuery CodeCamp @auchenberg kenneth.io

TwitterAPI = function() { function getUserData(username) { $.getJSON('http://twitter.com/status/user_timeline/' + username + '.json?count=10&callback=?', onSucesss); } function onSuccess(responseData) { // to render } return { getUserData: getUserData } }(); TwitterAPI.getUserData('auchenberg'); JSONP JSON with Padding jQuery CodeCamp @auchenberg kenneth.io

JSONP demos jQuery CodeCamp @auchenberg kenneth.io

    function poll(callback){         $.ajax({             type: "GET",             url: ”http://localhost:8080/cometd",             timeout:50000,             success: function(data){                 callback(data);             },             error: function(XMLHttpRequest, textStatus, errorThrown){                 // Do the logging                              }         });     };    setInterval(poll(onPollFinished)), 2000); XHR Polling Old jQuery CodeCamp @auchenberg kenneth.io

Chat server (socket.io) XHR Long-polling XHR Multipart WebSockets IE Firefox Chrome Real time jQuery CodeCamp @auchenberg kenneth.io

    function longPool(callback){         $.ajax({             type: "GET",             url: ”http://localhost:8080/cometd",             timeout:50000,             success: function(data){                 callback(data);          longPool(callback);             },             error: function(XMLHttpRequest, textStatus, errorThrown){                 // Do the logging                 longPool(callback);             }         });     }; HTTP/1.1 200 OK  Content‐Type: text/plain  Transfer‐Encoding: chunked   25  This is the data in the first chunk XHR Long Polling   1C  HTTP 1.1 and this is the second one   0  jQuery CodeCamp @auchenberg kenneth.io

MIME‐Version: 1.0 Content‐Type: multipart/mixed; boundary="frontier" This is a message with multiple parts in MIME format. ‐‐frontier Content‐Type: text/plain This is the body of the message. ‐‐frontier Content‐Type: application/octet‐stream Content‐Transfer‐Encoding: base64 PGh0bWw+CiAgPGhlYWQ+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHA+VGhpcyBpcyB0aGUg Ym9keSBvZiB0aGUgbWVzc2FnZS48L3A+CiAgPC9ib2R5Pgo8L2h0bWw+Cg== ‐‐frontier‐‐ xhr.multipart = True XHR Multipart MIME jQuery CodeCamp @auchenberg kenneth.io

Extensions jQuery CodeCamp @auchenberg kenneth.io

plugins.jquery.com community jQuery CodeCamp @auchenberg kenneth.io

jquery.barcode Bloat jQuery CodeCamp @auchenberg kenneth.io

}); function handler(event) { var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0; event = $.event.fix(orgEvent); event.type = "mousewheel"; // Old school scrollwheel delta if ( event.wheelDelta ) { delta = event.wheelDelta/120; } if ( event.detail ) { delta = -event.detail/3; } // New school multidimensional scroll (touchpads) deltas deltaY = delta; // Gecko if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) { deltaY = 0; deltaX = -1*delta; } // Webkit if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; } if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; } // Add event and delta to the front of the arguments args.unshift(event, delta, deltaX, deltaY); return $.event.handle.apply(this, args); } })(jQuery); jquery.mouseWheel Custom events http://github.com/brandonaaron/jquery-mousewheel jQuery CodeCamp @auchenberg kenneth.io

var person = {}; $("form").link(person); $("#name").val("foo"); alert(person.name); // foo // ... user changes value ... alert(person.name); // <user typed value> $(person).data("name", "bar"); alert($("#name").val()); // bar jquery.dataLink Databinding http://github.com/jquery/jquery-datalink jQuery CodeCamp @auchenberg kenneth.io

Go Go Go! jQuery CodeCamp @auchenberg kenneth.io

Be the cool kid jQuery CodeCamp @auchenberg kenneth.io

Thanks jQuery CodeCamp @auchenberg kenneth.io

http://blog.kenneth.io	1674
http://localhost	189
http://onwebdev.blogspot.com	37
http://www.linkedin.com	7
http://onwebdev.blogspot.co.uk	2
http://onwebdev.blogspot.in	2
http://webcache.googleusercontent.com	2
http://onwebdev.blogspot.com.br	1
http://translate.googleusercontent.com	1
http://onwebdev.blogspot.co.nz	1
http://feeds.feedburner.com	1
http://www.linkedin-ei2.com	1

jQuery CodeCamp

by Kenneth Auchenberg

Accessibility

Categories

Upload Details

Usage Rights

12 Embeds 1,918

Statistics

jQuery CodeCamp Presentation Transcript

jQuery CodeCamp

by Kenneth Auchenberg

Accessibility

Categories

Upload Details

Usage Rights

12 Embeds 1,918

Statistics

jQuery CodeCamp Presentation Transcript

Let LinkedIn power your SlideShare experience

Let LinkedIn power your SlideShare experience

Customize SlideShare content based on your interests

Keep up to date when your LinkedIn contacts post on SlideShare