making javascript fun again
TRANSCRIPT
-
8/8/2019 Making Javascript Fun Again
1/134
jQuery
Steven Wittens
Making JavaScript fun again
-
8/8/2019 Making Javascript Fun Again
2/134
DrupalCon / BarCamp
Brussels 2006Pretty much the same talk.
-
8/8/2019 Making Javascript Fun Again
3/134
JavaScriptYou probably hate it.
-
8/8/2019 Making Javascript Fun Again
4/134
-
8/8/2019 Making Javascript Fun Again
5/134
Its buggy and broken
-
8/8/2019 Making Javascript Fun Again
6/134
Its buggy and broken
Browsers do suck
-
8/8/2019 Making Javascript Fun Again
7/134
Its buggy and broken
Browsers do suck Implementations of CSS, events, ... broken
Language itself is pretty reliable
-
8/8/2019 Making Javascript Fun Again
8/134
Its buggy and broken
Browsers do suck Implementations of CSS, events, ... broken
Language itself is pretty reliable
Orders of magnitude better than in the 90s
-
8/8/2019 Making Javascript Fun Again
9/134
Its buggy and broken
Browsers do suck Implementations of CSS, events, ... broken
Language itself is pretty reliable
Orders of magnitude better than in the 90s
Blame IE6
-
8/8/2019 Making Javascript Fun Again
10/134
Used only for
annoying people
-
8/8/2019 Making Javascript Fun Again
11/134
Used only for
annoying people
Usability is a problem with or without JS
-
8/8/2019 Making Javascript Fun Again
12/134
Used only for
annoying people
Usability is a problem with or without JS Browsers prevent worst offenses
-
8/8/2019 Making Javascript Fun Again
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
-
8/8/2019 Making Javascript Fun Again
14/134
Only use it because
ou have to
-
8/8/2019 Making Javascript Fun Again
15/134
-
8/8/2019 Making Javascript Fun Again
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), ...
-
8/8/2019 Making Javascript Fun Again
17/134
-
8/8/2019 Making Javascript Fun Again
18/134
Flexible & Powerful
-
8/8/2019 Making Javascript Fun Again
19/134
Flexible & Powerful
Imperative, functional and OO
-
8/8/2019 Making Javascript Fun Again
20/134
Flexible & Powerful
Imperative, functional and OO
Lexical scope and closures+ Anonymous functions
-
8/8/2019 Making Javascript Fun Again
21/134
Flexible & Powerful
Imperative, functional and OO
Lexical scope and closures+ Anonymous functions
Everything is an object (including functions)
-
8/8/2019 Making Javascript Fun Again
22/134
Flexible & Powerful
Imperative, functional and OO
Lexical scope and closures+ Anonymous functions
Everything is an object (including functions) Prototype-based inheritance
-
8/8/2019 Making Javascript Fun Again
23/134
Learn JavaScriptYou know you want to.
-
8/8/2019 Making Javascript Fun Again
24/134
Essentials
-
8/8/2019 Making Javascript Fun Again
25/134
Essentials
var myInt = 1;
-
8/8/2019 Making Javascript Fun Again
26/134
Essentials
var myInt = 1;
var myString = foobar;
-
8/8/2019 Making Javascript Fun Again
27/134
Essentials
var myInt = 1;
var myString = foobar;
var myArray = [ 1, two, three ];// myArray[0] == 1
-
8/8/2019 Making Javascript Fun Again
28/134
Essentials
var myInt = 1;
var myString = foobar;
var myArray = [ 1, two, three ];// myArray[0] == 1
var myHash = { foo: 1, bar: two };// myHash.foo == 1// myHash[foo] == 1
-
8/8/2019 Making Javascript Fun Again
29/134
Essentials
var myInt = 1;
var myString = foobar;
var myArray = [ 1, two, three ];// myArray[0] == 1
var myHash = { foo: 1, bar: two };// myHash.foo == 1// myHash[foo] == 1
if(), switch(), for(), ... work like you expect them to.
-
8/8/2019 Making Javascript Fun Again
30/134
Function = Primitive type
-
8/8/2019 Making Javascript Fun Again
31/134
-
8/8/2019 Making Javascript Fun Again
32/134
Function = Primitive typefunction myFunction() {...
};
var myFunction = function () {...
};
-
8/8/2019 Making Javascript Fun Again
33/134
Function = Primitive typefunction myFunction() {...
};
var myFunction = function () {...
};
var sameFunction = myFunction;sameFunction();
-
8/8/2019 Making Javascript Fun Again
34/134
Function = Primitive typefunction myFunction() {...
};
var myFunction = function () {...
};
var sameFunction = myFunction;sameFunction();
(function () { ... })();
-
8/8/2019 Making Javascript Fun Again
35/134
Hash = Object
-
8/8/2019 Making Javascript Fun Again
36/134
Hash = Object
var myObject = {foo: 1,bar: two,
spam: function () { this.foo++; }};
-
8/8/2019 Making Javascript Fun Again
37/134
Hash = Object
var myObject = {foo: 1,bar: two,
spam: function () { this.foo++; }};
myObject.spam = function () {this.foo += 2;
};
-
8/8/2019 Making Javascript Fun Again
38/134
Hash = Object
var myObject = {foo: 1,bar: two,
spam: function () { this.foo++; }};
myObject.spam = function () {this.foo += 2;
};
myObject.spam();
F
-
8/8/2019 Making Javascript Fun Again
39/134
Function =
Object Constructorvar myClass = function (doodad) {this.doodad = doodad;
this.spam = function () { ... };return this;
};
var myObject = new myClass(boing);myObject.spam();
F
-
8/8/2019 Making Javascript Fun Again
40/134
Function =
Object Constructorvar myClass = function (doodad) {this.doodad = doodad;
return this;};
myClass.prototype.spam = function () {...};
var myObject = new myClass(boing);myObject.spam();
-
8/8/2019 Making Javascript Fun Again
41/134
Function = Closurefunction myFunction() {
var counter = 0;
function closureFunction() {
counter++;alert(counter);};
closureFunction(); // shows 1
closureFunction(); // shows 2};
-
8/8/2019 Making Javascript Fun Again
42/134
Function = Closurefunction myFunction() {
var counter = 0;
function closureFunction() {
counter++;alert(counter);};
return closureFunction;
};
var closure = myFunction();closure(); // shows 1closure(); // shows 2
-
8/8/2019 Making Javascript Fun Again
43/134
Function = Closurefunction myFunction() {
var counter = 0;
function closureFunction() {
counter++;alert(counter);};
return closureFunction;
};
var closure = myFunction();closure(); // shows 1closure(); // shows 2
-
8/8/2019 Making Javascript Fun Again
44/134
Function = Closurefunction myFunction() {
var counter = 0;
function closureFunction() {
counter++;alert(counter);};
return closureFunction;
};
var closure = myFunction();closure(); // shows 1closure(); // shows 2
-
8/8/2019 Making Javascript Fun Again
45/134
-
8/8/2019 Making Javascript Fun Again
46/134
-
8/8/2019 Making Javascript Fun Again
47/134
-
8/8/2019 Making Javascript Fun Again
48/134
Browser ScriptingMake IE your bitch.
D Ob
-
8/8/2019 Making Javascript Fun Again
49/134
Document Object
Model DOM
D Ob
-
8/8/2019 Making Javascript Fun Again
50/134
Document Object
Model DOM
Representation of the HTML document
-
8/8/2019 Making Javascript Fun Again
51/134
-
8/8/2019 Making Javascript Fun Again
52/134
D Obj
-
8/8/2019 Making Javascript Fun Again
53/134
Document Object
Model DOM
D Obj
-
8/8/2019 Making Javascript Fun Again
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
-
8/8/2019 Making Javascript Fun Again
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/ -
8/8/2019 Making Javascript Fun Again
56/134
DOM Events
-
8/8/2019 Making Javascript Fun Again
57/134
DOM Events
Respond to user interaction: change, click,keydown, mousemove, ...
-
8/8/2019 Making Javascript Fun Again
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;
}
-
8/8/2019 Making Javascript Fun Again
59/134
AJAX
-
8/8/2019 Making Javascript Fun Again
60/134
AJAX
Make HTTP GET and POST requests fromwithin JS
-
8/8/2019 Making Javascript Fun Again
61/134
AJAX
Make HTTP GET and POST requests fromwithin JS
XML
-
8/8/2019 Making Javascript Fun Again
62/134
AJAX
Make HTTP GET and POST requests fromwithin JS
XML HTML (AHAH)
-
8/8/2019 Making Javascript Fun Again
63/134
AJAX
Make HTTP GET and POST requests fromwithin JS
XML HTML (AHAH) JSON
-
8/8/2019 Making Javascript Fun Again
64/134
AJAX
Make HTTP GET and POST requests fromwithin JS
XML HTML (AHAH) JSON
JavaScript
-
8/8/2019 Making Javascript Fun Again
65/134
-
8/8/2019 Making Javascript Fun Again
66/134
Things fly around
on the page=
AJAX?
-
8/8/2019 Making Javascript Fun Again
67/134
Things fly around
on the page=
AJAX?
-
8/8/2019 Making Javascript Fun Again
68/134
Wait, wasnt this talkabout jQuery?
-
8/8/2019 Making Javascript Fun Again
69/134
Problems?
-
8/8/2019 Making Javascript Fun Again
70/134
-
8/8/2019 Making Javascript Fun Again
71/134
Problems?
DOM tree is clunky to use
No multiple handlers per event
-
8/8/2019 Making Javascript Fun Again
72/134
Problems?
DOM tree is clunky to use
No multiple handlers per event
Browser incompatibilities
-
8/8/2019 Making Javascript Fun Again
73/134
-
8/8/2019 Making Javascript Fun Again
74/134
Problems?
DOM tree is clunky to use
No multiple handlers per event
Browser incompatibilities No high-level functions
= JavaScript libraries to fill the gap
-
8/8/2019 Making Javascript Fun Again
75/134
-
8/8/2019 Making Javascript Fun Again
76/134
-
8/8/2019 Making Javascript Fun Again
77/134
jQuery John Resig
Released at BarCamp NYC (Jan 2006).
-
8/8/2019 Making Javascript Fun Again
78/134
jQuery John Resig
Released at BarCamp NYC (Jan 2006). jQuery 1.0 out (Aug 2006)
-
8/8/2019 Making Javascript Fun Again
79/134
-
8/8/2019 Making Javascript Fun Again
80/134
jQuery
-
8/8/2019 Making Javascript Fun Again
81/134
-
8/8/2019 Making Javascript Fun Again
82/134
-
8/8/2019 Making Javascript Fun Again
83/134
jQuery
Doesnt mess with the language (Prototype)
Doesnt try to be Python (Mochikit) Only essentials: 15KB (Scriptaculous, Dojo)
-
8/8/2019 Making Javascript Fun Again
84/134
jQuery
Doesnt mess with the language (Prototype)
Doesnt try to be Python (Mochikit) Only essentials: 15KB (Scriptaculous, Dojo) More than cosmetic effects (Moo.fx)
-
8/8/2019 Making Javascript Fun Again
85/134
jQuery
Doesnt mess with the language (Prototype)
Doesnt try to be Python (Mochikit) Only essentials: 15KB (Scriptaculous, Dojo) More than cosmetic effects (Moo.fx) Makes common tasks easy
-
8/8/2019 Making Javascript Fun Again
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];...
}
-
8/8/2019 Making Javascript Fun Again
87/134
After With jQuery
$('fieldset.collapsible legend').each(function () {...});
-
8/8/2019 Making Javascript Fun Again
88/134
jQueries
-
8/8/2019 Making Javascript Fun Again
89/134
jQueries
Use CSS3/XPath selectors to find elements$(#my-element)$(fieldset.collapsible > legend)$(table.prices tr:last-of-type td)
-
8/8/2019 Making Javascript Fun Again
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);
-
8/8/2019 Making Javascript Fun Again
91/134
It Gets Better
-
8/8/2019 Making Javascript Fun Again
92/134
It Gets Better
jQuery Methods are chainable. Query objectis stateful:
$(p).addClass(big).wrap()
-
8/8/2019 Making Javascript Fun Again
93/134
It Gets Better
jQuery Methods are chainable. Query objectis stateful:
$(p).addClass(big).wrap().filter(.tagged).css(background, red).end()
G
-
8/8/2019 Making Javascript Fun Again
94/134
It Gets Better
jQuery Methods are chainable. Query objectis stateful:
$(p).addClass(big).wrap().filter(.tagged).css(background, red).end().filter(:hidden).slideDown(fast).end();
I G B
-
8/8/2019 Making Javascript Fun Again
95/134
It Gets Better
jQuery Methods are chainable. Query objectis stateful:
Sensible event handling
$(p).addClass(big).wrap().filter(.tagged).css(background, red).end().filter(:hidden).slideDown(fast).end();
$(span.info).mouseover(function () { ... }).mouseout(function () { ... });
-
8/8/2019 Making Javascript Fun Again
96/134
D Wh I M
-
8/8/2019 Making Javascript Fun Again
97/134
Do What I Mean
$('')
D Wh I M
-
8/8/2019 Making Javascript Fun Again
98/134
Do What I Mean
$('')
.hide()
D Wh I M
-
8/8/2019 Making Javascript Fun Again
99/134
Do What I Mean
$('')
.hide()
.ajaxStart(function(){$(this).show();
})
-
8/8/2019 Making Javascript Fun Again
100/134
D Wh I M
-
8/8/2019 Making Javascript Fun Again
101/134
Do What I Mean
$('')
.hide()
.ajaxStart(function(){$(this).show();
}).ajaxStop(function(){
$(this).hide();
}).appendTo("#someContainer");
Pl i
-
8/8/2019 Making Javascript Fun Again
102/134
Plug-ins
Pl i
-
8/8/2019 Making Javascript Fun Again
103/134
Plug-ins
Already more than 160
Pl i
-
8/8/2019 Making Javascript Fun Again
104/134
Plug-ins
Already more than 160
New (chainable) methods
Pl i
-
8/8/2019 Making Javascript Fun Again
105/134
Plug-ins
Already more than 160
New (chainable) methods Additional Effects (Pause, Ease)
Pl i
-
8/8/2019 Making Javascript Fun Again
106/134
Plug-ins
Already more than 160
New (chainable) methods Additional Effects (Pause, Ease) New Abilities (Interface, Caching, Forms)
-
8/8/2019 Making Javascript Fun Again
107/134
-
8/8/2019 Making Javascript Fun Again
108/134
jQuery in your CMSAnd how we did it in Drupal
J S i t i CMS
-
8/8/2019 Making Javascript Fun Again
109/134
JavaScript in a CMS
J S i t i CMS
-
8/8/2019 Making Javascript Fun Again
110/134
JavaScript in a CMS
Lots of server-side logicLocalization, Formatting, Theming, ...
J S i t i CMS
-
8/8/2019 Making Javascript Fun Again
111/134
JavaScript in a CMS
Lots of server-side logicLocalization, Formatting, Theming, ...
Stick to small, self-contained JS features
J S i t i CMS
-
8/8/2019 Making Javascript Fun Again
112/134
JavaScript in a CMS
Lots of server-side logicLocalization, Formatting, Theming, ...
Stick to small, self-contained JS features No complete client-side applications
J S i t i CMS
-
8/8/2019 Making Javascript Fun Again
113/134
JavaScript in a CMS
Lots of server-side logicLocalization, Formatting, Theming, ...
Stick to small, self-contained JS features No complete client-side applications
Still: demand for good JS library
Server Side
-
8/8/2019 Making Javascript Fun Again
114/134
Server-Side
Server Side
-
8/8/2019 Making Javascript Fun Again
115/134
Server-Side
Nothing really changes
Server Side
-
8/8/2019 Making Javascript Fun Again
116/134
Server-Side
Nothing really changes Callbacks to answer AJAX calls
Server Side
-
8/8/2019 Making Javascript Fun Again
117/134
Server-Side
Nothing really changes
Callbacks to answer AJAX calls Just a .js file unobtrusive JavaScript
Server Side
-
8/8/2019 Making Javascript Fun Again
118/134
Server-Side
Nothing really changes
Callbacks to answer AJAX calls Just a .js file unobtrusive JavaScript
Drupal: Form API widgets, drupal_add_js()
Client Side
-
8/8/2019 Making Javascript Fun Again
119/134
Client-Side
Client Side
-
8/8/2019 Making Javascript Fun Again
120/134
Client-Side
Namespace your methods
-
8/8/2019 Making Javascript Fun Again
121/134
Client Side
-
8/8/2019 Making Javascript Fun Again
122/134
Client-Side
Namespace your methods
jQuery is included Drupal core JS rewritten to use jQuery:
Less code!
Attractive Platform
-
8/8/2019 Making Javascript Fun Again
123/134
Attractive Platform
Attractive Platform
-
8/8/2019 Making Javascript Fun Again
124/134
Attractive Platform
Satisfies demand for bells and whistles
Attractive Platform
-
8/8/2019 Making Javascript Fun Again
125/134
Attractive Platform
Satisfies demand for bells and whistles
Solid base for Drupal core
-
8/8/2019 Making Javascript Fun Again
126/134
Attractive Platform
-
8/8/2019 Making Javascript Fun Again
127/134
Attractive Platform
Satisfies demand for bells and whistles
Solid base for Drupal core Dedicated jQuery community Huge array of plug-ins
Attractive Platform
-
8/8/2019 Making Javascript Fun Again
128/134
Attractive Platform
Satisfies demand for bells and whistles
Solid base for Drupal core Dedicated jQuery community Huge array of plug-ins
JS wizardry not needed
Caveats
-
8/8/2019 Making Javascript Fun Again
129/134
Caveats
Caveats
-
8/8/2019 Making Javascript Fun Again
130/134
Caveats
Must be accessible
Caveats
-
8/8/2019 Making Javascript Fun Again
131/134
Caveats
Must be accessible
Must degrade
Caveats
-
8/8/2019 Making Javascript Fun Again
132/134
Caveats
Must be accessible
Must degrade Especially for search engines
Caveats
-
8/8/2019 Making Javascript Fun Again
133/134
Caveats
Must be accessible
Must degrade Especially for search engines
Slow if used badly
-
8/8/2019 Making Javascript Fun Again
134/134
Live DemoUsing Firebug for Firefox