Making Javascript Fun Again

8/8/2019 Making Javascript Fun Again

1/134

jQuery

Steven Wittens

Making JavaScript fun again


2/134

DrupalCon / BarCamp

Brussels 2006Pretty much the same talk.


3/134

JavaScriptYou probably hate it.


4/134


5/134

Its buggy and broken


6/134


Browsers do suck


7/134


Browsers do suck Implementations of CSS, events, ... broken

Language itself is pretty reliable


8/134




Orders of magnitude better than in the 90s


9/134




Orders of magnitude better than in the 90s

Blame IE6


10/134

Used only for

annoying people


11/134

Used only for

annoying people

Usability is a problem with or without JS


12/134

Used only for

annoying people

Usability is a problem with or without JS Browsers prevent worst offenses


13/134

Used only for

annoying people

Usability is a problem with or without JS Browsers prevent worst offenses

Use for good, not for evil


14/134

Only use it because

ou have to


15/134


16/134

Only use it because

ou have to The most successful scripting environment?

Every browser, many OSes (Windows,Dashboard), XUL (Mozilla), Flash(ActionScript), server-side (ASP, Rhino), ...


17/134


18/134

Flexible & Powerful


19/134

Flexible & Powerful

Imperative, functional and OO


20/134

Flexible & Powerful


Lexical scope and closures+ Anonymous functions


21/134

Flexible & Powerful



Everything is an object (including functions)


22/134

Flexible & Powerful



Everything is an object (including functions) Prototype-based inheritance


23/134

Learn JavaScriptYou know you want to.


24/134

Essentials


25/134

Essentials

var myInt = 1;


26/134

Essentials

var myInt = 1;

var myString = foobar;


27/134

Essentials

var myInt = 1;


var myArray = [ 1, two, three ];// myArray[0] == 1


28/134

Essentials

var myInt = 1;



var myHash = { foo: 1, bar: two };// myHash.foo == 1// myHash[foo] == 1


29/134

Essentials

var myInt = 1;



var myHash = { foo: 1, bar: two };// myHash.foo == 1// myHash[foo] == 1

if(), switch(), for(), ... work like you expect them to.


30/134

Function = Primitive type


31/134


32/134

Function = Primitive typefunction myFunction() {...

};

var myFunction = function () {...

};


33/134


};


};

var sameFunction = myFunction;sameFunction();


34/134


};


};

var sameFunction = myFunction;sameFunction();

(function () { ... })();


35/134

Hash = Object


36/134

Hash = Object

var myObject = {foo: 1,bar: two,

spam: function () { this.foo++; }};


37/134

Hash = Object



myObject.spam = function () {this.foo += 2;

};


38/134

Hash = Object



myObject.spam = function () {this.foo += 2;

};

myObject.spam();

F


39/134

Function =

Object Constructorvar myClass = function (doodad) {this.doodad = doodad;

this.spam = function () { ... };return this;

};

var myObject = new myClass(boing);myObject.spam();

F


40/134

Function =

Object Constructorvar myClass = function (doodad) {this.doodad = doodad;

return this;};

myClass.prototype.spam = function () {...};

var myObject = new myClass(boing);myObject.spam();


41/134

Function = Closurefunction myFunction() {

var counter = 0;

function closureFunction() {

counter++;alert(counter);};

closureFunction(); // shows 1

closureFunction(); // shows 2};


42/134


var counter = 0;



return closureFunction;

};

var closure = myFunction();closure(); // shows 1closure(); // shows 2


43/134


var counter = 0;




};



44/134


var counter = 0;




};



45/134


46/134


47/134


48/134

Browser ScriptingMake IE your bitch.

D Ob


49/134

Document Object

Model DOM

D Ob


50/134

Document Object

Model DOM

Representation of the HTML document


51/134


52/134

D Obj


53/134

Document Object

Model DOM

D Obj


54/134

Document Object

Model DOM

Navigate or query the document tree:

var node = document.getElementById(my-element);var child = node.nextSibling.firstChild;

D Obj


55/134

Document Object

Model DOM

Navigate or query the document tree:

Alter element properties and styles:

var node = document.getElementById(my-element);var child = node.nextSibling.firstChild;

node.setAttribute(href) = http://drupal.org/;node.style.backgroundColor = red;alert(node.getAttribute(title));
http://www.drupal.org/http://www.drupal.org/


56/134

DOM Events


57/134

DOM Events

Respond to user interaction: change, click,keydown, mousemove, ...


58/134

DOM Events

Respond to user interaction: change, click,keydown, mousemove, ...

Assign an event handler for a particularDOM Node:

node.onclick = function () {this.style.color = green;

}


59/134

AJAX


60/134

AJAX

Make HTTP GET and POST requests fromwithin JS


61/134

AJAX


XML


62/134

AJAX


XML HTML (AHAH)


63/134

AJAX


XML HTML (AHAH) JSON


64/134

AJAX


XML HTML (AHAH) JSON

JavaScript


65/134


66/134

Things fly around

on the page=

AJAX?


67/134

Things fly around

on the page=

AJAX?


68/134

Wait, wasnt this talkabout jQuery?


69/134

Problems?


70/134


71/134

Problems?

DOM tree is clunky to use

No multiple handlers per event


72/134

Problems?



Browser incompatibilities


73/134


74/134

Problems?



Browser incompatibilities No high-level functions

= JavaScript libraries to fill the gap


75/134


76/134


77/134

jQuery John Resig

Released at BarCamp NYC (Jan 2006).


78/134

jQuery John Resig

Released at BarCamp NYC (Jan 2006). jQuery 1.0 out (Aug 2006)


79/134


80/134

jQuery


81/134


82/134


83/134

jQuery

Doesnt mess with the language (Prototype)

Doesnt try to be Python (Mochikit) Only essentials: 15KB (Scriptaculous, Dojo)


84/134

jQuery


Doesnt try to be Python (Mochikit) Only essentials: 15KB (Scriptaculous, Dojo) More than cosmetic effects (Moo.fx)


85/134

jQuery


Doesnt try to be Python (Mochikit) Only essentials: 15KB (Scriptaculous, Dojo) More than cosmetic effects (Moo.fx) Makes common tasks easy


86/134

BeforePlain DOM

var fieldsets = document.getElementsByTagName('fieldset');var legend, fieldset;for (var i = 0; fieldset = fieldsets[i]; i++) {if (!hasClass(fieldset, 'collapsible')) {

continue;}legend = fieldset.getElementsByTagName('legend');if (legend.length == 0) {

continue;}legend = legend[0];...

}


87/134

After With jQuery

$('fieldset.collapsible legend').each(function () {...});


88/134

jQueries


89/134

jQueries

Use CSS3/XPath selectors to find elements$(#my-element)$(fieldset.collapsible > legend)$(table.prices tr:last-of-type td)


90/134

jQueries

Use CSS3/XPath selectors to find elements

Apply operations to all selected elements

$(#my-element)$(fieldset.collapsible > legend)$(table.prices tr:last-of-type td)

$(p:hidden).addClass(emphasis);$(p:hidden).slideDown(fast);


91/134

It Gets Better


92/134

It Gets Better

jQuery Methods are chainable. Query objectis stateful:

$(p).addClass(big).wrap()


93/134

It Gets Better


$(p).addClass(big).wrap().filter(.tagged).css(background, red).end()

G


94/134

It Gets Better


$(p).addClass(big).wrap().filter(.tagged).css(background, red).end().filter(:hidden).slideDown(fast).end();

I G B


95/134

It Gets Better


Sensible event handling

$(p).addClass(big).wrap().filter(.tagged).css(background, red).end().filter(:hidden).slideDown(fast).end();

$(span.info).mouseover(function () { ... }).mouseout(function () { ... });


96/134

D Wh I M


97/134

Do What I Mean

$('')

D Wh I M


98/134

Do What I Mean

$('')

.hide()

D Wh I M


99/134

Do What I Mean

$('')

.hide()

.ajaxStart(function(){$(this).show();

})


100/134

D Wh I M


101/134

Do What I Mean

$('')

.hide()

.ajaxStart(function(){$(this).show();

}).ajaxStop(function(){

$(this).hide();

}).appendTo("#someContainer");

Pl i


102/134

Plug-ins

Pl i


103/134

Plug-ins

Already more than 160

Pl i


104/134

Plug-ins


New (chainable) methods

Pl i


105/134

Plug-ins


New (chainable) methods Additional Effects (Pause, Ease)

Pl i


106/134

Plug-ins


New (chainable) methods Additional Effects (Pause, Ease) New Abilities (Interface, Caching, Forms)


107/134


108/134

jQuery in your CMSAnd how we did it in Drupal

J S i t i CMS


109/134

JavaScript in a CMS

J S i t i CMS


110/134

JavaScript in a CMS

Lots of server-side logicLocalization, Formatting, Theming, ...

J S i t i CMS


111/134

JavaScript in a CMS


Stick to small, self-contained JS features

J S i t i CMS


112/134

JavaScript in a CMS


Stick to small, self-contained JS features No complete client-side applications

J S i t i CMS


113/134

JavaScript in a CMS


Stick to small, self-contained JS features No complete client-side applications

Still: demand for good JS library

Server Side


114/134

Server-Side

Server Side


115/134

Server-Side

Nothing really changes

Server Side


116/134

Server-Side

Nothing really changes Callbacks to answer AJAX calls

Server Side


117/134

Server-Side


Callbacks to answer AJAX calls Just a .js file unobtrusive JavaScript

Server Side


118/134

Server-Side


Callbacks to answer AJAX calls Just a .js file unobtrusive JavaScript

Drupal: Form API widgets, drupal_add_js()

Client Side


119/134

Client-Side

Client Side


120/134

Client-Side

Namespace your methods


121/134

Client Side


122/134

Client-Side

Namespace your methods

jQuery is included Drupal core JS rewritten to use jQuery:

Less code!

Attractive Platform


123/134

Attractive Platform

Attractive Platform


124/134

Attractive Platform

Satisfies demand for bells and whistles

Attractive Platform


125/134

Attractive Platform


Solid base for Drupal core


126/134

Attractive Platform


127/134

Attractive Platform


Solid base for Drupal core Dedicated jQuery community Huge array of plug-ins

Attractive Platform


128/134

Attractive Platform


Solid base for Drupal core Dedicated jQuery community Huge array of plug-ins

JS wizardry not needed

Caveats


129/134

Caveats

Caveats


130/134

Caveats

Must be accessible

Caveats


131/134

Caveats

Must be accessible

Must degrade

Caveats


132/134

Caveats

Must be accessible

Must degrade Especially for search engines

Caveats


133/134

Caveats

Must be accessible

Must degrade Especially for search engines

Slow if used badly


134/134

Live DemoUsing Firebug for Firefox

Documents

Making Javascript Fun Again