Learning jQuery @ MIT
Upcoming SlideShare
Loading in...5
×
 

Learning jQuery @ MIT

on

  • 7,572 views

A talk that I gave at MIT, in January 2009, about jQuery.

A talk that I gave at MIT, in January 2009, about jQuery.

Statistics

Views

Total Views
7,572
Views on SlideShare
7,405
Embed Views
167

Actions

Likes
9
Downloads
262
Comments
1

10 Embeds 167

http://www.sliversofmysoul.netsons.org 114
http://onwebdev.blogspot.com 20
http://www.slideshare.net 13
https://confluence.uk.jpmorgan.com 12
http://lanyrd.com 2
http://onwebdev.blogspot.com.br 2
http://onwebdev.blogspot.co.uk 1
http://onwebdev.blogspot.co.il 1
http://www.techgig.com 1
http://confluence.uk.jpmorgan.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…

  • km,m,

    <b>[Comment posted from</b> http://www.sliversofmysoul.netsons.org/2009/02/23/alcune-presentazioni-utili-su-jquery/]
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Learning jQuery @ MIT Learning jQuery @ MIT Presentation Transcript

  • MIT - January 2009 John Resig http://ejohn.org - http://twitter.com/jeresig
  • What is jQuery? An open source JavaScript library that ✦ simplifies the interaction between HTML and JavaScript.
  • Easy To Use Completely unobtrusive ✦ Uses CSS to layer functionality ✦ Easy to separate behavior ✦ Quick, terse, syntax ✦
  • The Focus of jQuery Find Some Elements Do something with them { { $(“div”).addClass(“special”); jQuery Object
  • Selectors
  • Todo List
  • Todo List All items saved in a session variable. ✦ ?item=Some+Item ✦ Save a single item. ?items=<li>item</li><li>item</li> ✦ Save a list of items.
  • Plugins Huge plugin ecosystem ✦ Managed by Plugin tracker ✦ http://plugins.jquery.com/ Hundreds in the tracker - even more on ✦ the web
  • jQuery Plugins Extend the jQuery system ✦ Add on extra methods: ✦ jQuery(“div”).hideRemove(); Trivial to implement: ✦ jQuery.fn.hideRemove = function(speed){ return this.hide(speed, function(){ jQuery(this).remove(); }); };
  • jQuery UI A complete set of themed, cross-browser, ✦ user interface components (plugins!). Drag, Drop, Sort, Select, Resize ✦ Accordion, Datepicker, Dialog, Slider, Tabs ✦ More info: ✦ http://ui.jquery.com/ 1.6 is almost ready ✦
  • Accessibility Keyboard Accessible ✦ Screenreader Accessible ✦ Grant from Mozilla Foundation to ✦ implement ARIA
  • Themeroller Customize the styling of any jQuery UI ✦ component Full CSS, images for all components ✦ Easy to customize and use ✦ http://themeroller.com/ ✦
  • Why jQuery? Fully documented ✦ Great community ✦ Tons of plugins ✦ Small size (18kb) ✦ Everything works in IE 6+, Firefox 2+, ✦ Safari 3+, Chrome, and Opera 9+
  • Who uses jQuery? Projects: ✦ ✦ Wordpress, Drupal, CakePHP, Textpattern, Mozilla Companies: ✦ ✦ Google, IBM, Amazon, Digg, Netflix, Dell, HP, Bank of America, Intel... ✦ NBC, CBS, BBC, Reuters, Newsweek, Boston Globe, and more many others... ✦
  • Community Very active mailing list ✦ ✦ 150+ Posts/Day ✦ 12700+ Members Technorati: Hundred blog posts per day ✦
  • Growth
  • Books 3 Books Released: ✦ ✦ Learning jQuery (Packt) ✦ jQuery Reference (Packt) ✦ jQuery in Action (Manning)
  • jQuery 1.3 Released on the 14th ✦ 1.3.1 was released on the 21st ✦ Much faster, new live events ✦
  • 1.3 Selectors
  • How It Works How most engines work ✦ “div > p” ✦ Find all divs ✦ Loop through each div ✦ Find all child elements ✦ Verify if element is paragraph
  • How It Works “div p” ✦ Find all divs ✦ Loop through all divs ✦ Find all p, relative to the div Merge all results ✦ Figure out unique results ✦
  • Code name “Sizzle” http://github.com/jeresig/sizzle/tree/master ✦ New Selector Engine for jQuery ✦ 4KB Compressed ✦ No dependencies, can be used by other ✦ libraries (MochiKit, Prototype, Dojo, YUI)
  • How Does it Work? Query Restructuring ✦ “div p” ✦ Find all p elements ✦ For each p element ✦ check if parent is div ✦ if not, traverse up farther ✦ if at top, remove element ✦ if so, save element No merging! No unique! ✦
  • How Does it Work? Faster for some queries, slower for others ✦ Depends on the DOM structure ✦ “div > p” much faster, for example ✦ Built like how browsers query the DOM ✦
  • Live Events Behave like normal event binding ✦ ... but work for all future elements too! ✦ $(“a”).live(“click”, ...); ✦ $(“div”).append(“<a>test</a>”);
  • 1.3 Sniffing All major JS libraries use browser sniffing ✦ Look at the user agent and make guesses ✦ ✦ navigator.userAgent is bad! :-( We got rid of this in 1.3! ✦ Makes our code more resilient to change ✦
  • Detection Object Detection ✦ ✦ if ( document.getElementsByTagName ) Feature Simulation ✦ ✦ var div = document.createElement(“div”); div.innerHTML = “<!--test-->”; var a = div.getElementsByTagName(“*”); if ( a.length > 0 ) { // Why did we match a comment? }
  • jquery.com docs.jquery.com - plugins.jquery.com More: ui.jquery.com api.jquery.com learningjquery.com
  • Thank You! John Resig ✦ http://ejohn.org/ ✦ http://twitter.com/jeresig/ ✦