SlideShare a Scribd company logo
1 of 80
Download to read offline
13th September 2010
Rediscovering JavaScript
The Language BehindThe Libraries
Simon Willison, Think Vitamin JavaScript
Coming up...
✤ JavaScript, the language
✤ Object fundamentals
✤ Functions and closures
✤ Prototype inheritance
✤ JavaScript, the Libraries
✤ Event handling
✤ Animation
✤ Drag ‘n’ Drop
Let’s go back in time to 2004...
My phone
looked like this:
Nokia 7610
No one took JavaScript seriously
Well... almost no one...
“Selling the Future of DHTML”
Then, 2005 happened
May 9th, 2005 Http://www.flickr.com/photos/nataliedowne/14517351/
(me, in 2005)
Also in 2005
✤ Gmail had its first birthday, still in invite-only beta
✤ Google Maps launched February 8th
✤ The term “Ajax” was coined February 18th by Jesse James Garrett
✤ Ajaxian.com launched March 10th
A flurry of library activity
✤ February 2005: First Prototype.js
✤ March 2005: First public MochiKit code
✤ YUI started development internally at Yahoo! in 2005 (first public
release was February 2006)
✤ jQuery released at BarCamp Boston in January 2006
Different philosophical approaches
Prototype:“make JS like Ruby”
Sortable.tree(element, arguments[1]).children.map(function(item) {
return [
name + Sortable._constructIndex(item) + "[id]=" +
encodeURIComponent(item.id)
].concat(item.children.map(arguments.callee));
}).flatten().join('&');
MochiKit:“make JS like Python”
var theSum = sum(takewhile(
partial(operator.gt, 10),
imap(
partial(operator.mul, 2),
count()
)
));
YUI:“make JS like Java”
YAHOO.namespace("example.panel");
function initWait(ev) {
YAHOO.example.panel.wait = new YAHOO.widget.Panel("wait", {
width: "240px",
modal: true,
effect: {
effect:YAHOO.widget.ContainerEffect.FADE, duration:0.5
}
});
YAHOO.example.panel.wait.beforeRenderEvent.subscribe(function() {
debug('beforeRenderEvent Fired..');
}, YAHOO.example.panel.wait, true);
YAHOO.example.panel.wait.setHeader("Loading (1), please wait...");
}
jQuery:“make JS like jQuery”
$('form#login')
.find('label.optional').hide().end()
.find('input:password').css('border', '1px solid red').end()
.submit(function(){
return confirm('Are you sure you want to submit?');
});
How can one language support so
many different programming styles?
JavaScript, the Language
Objects
Everything in JavaScript is an object
Strings and numbers
> "A string".length
8
> 123.toString()
SyntaxError: Unexpected token ILLEGAL
> (123).toString()
“123”
Even functions:
> function hello() { alert("hello") }
> hello.toString()
"function hello() { alert("hello") }"
You can make your own objects
// The same thing:
var simon = new Object();
var simon = {};
// Also the same:
simon.name = "Simon Willison"; // name is a property
simon["name"] = "Simon Willison";
// Object literal syntax is most useful:
var simon = {
name: "Simon Willison",
age: 29
};
You can loop through properties
> var simon = {
name: "Simon Willison",
age: 29
};
> for (var prop in simon) {
console.log(prop + ': ' + simon[prop]);
}
name: Simon
age: 29
(more on this later...)
(almost) Everything in JavaScript is a
property on an object
> parseInt("100 bunnies");
100
> parseInt === window.parseInt // window is the global object
true
> window === window.window
true
> window === window.window.window
true
> true === window.true
SyntaxError: Unexpected token true
Arrays
> var a = new Array(); // Old-school
> var a = []; // Literal syntax
> var a = ["dog", "cat", "chicken"];
> a.length;
3
> a[0]
"dog"
> a[2]
"chicken"
> a[3]
undefined
Iteration through arrays
> var a = ["dog", "cat", "chicken"];
> for (var i = 0; i < a.length; i++) {
console.log(a[i]);
}
dog
cat
chicken
Tricksy array iteration
> var a = ["dog", "cat", "chicken"];
> for (var i = 0, item; item = a[i]; i++) {
console.log(item);
}
dog
cat
chicken
// But watch out for falsey values:
> var a = [123, 0, 12, 443];
> for (var i = 0, item; item = a[i]; i++) { console.log(item); }
123
Functions
Functions
Functions
// What could be simpler?
function addTwoNumbers(a, b) {
var total = a + b; // A local variable
return total;
}
> addTwoNumbers(2, 4)
6
Functions
// What could be simpler?
function addTwoNumbers(a, b) {
var total = a + b; // A local variable
return total;
}
> addTwoNumbers(2, 4)
6
> addTwoNumbers()
NaN
Functions
// What could be simpler?
function addTwoNumbers(a, b) {
var total = a + b; // A local variable
return total;
}
> addTwoNumbers(2, 4)
6
> addTwoNumbers()
NaN
> addTwoNumbers(2, 4, 8)
6
Function parameters are more
like guidelines
// arguments is a magic array-like object
function add() {
var sum = 0;
for (var i = 0, j = arguments.length; i < j; i++) {
sum += arguments[i];
}
return sum;
}
> add(1, 3, 4, 5, 0, 5);
18
Anonymous functions
var add = function() {
var sum = 0;
for (var i = 0, j = arguments.length; i < j; i++) {
sum += arguments[i];
}
return sum;
}
var added = (function() {
var a = 2, b = 5; // Local variables
return a + b;
})();
Modern array iteration
> var a = ["dog", "cat"];
> a.forEach(function(item) {
console.log(item);
}
dog
cat
> a.forEach(function(item, index) {
console.log(index + ': ' + item);
}
0: dog
1: cat
Closures
function makeOp(op, x) {
switch(op) {
case '+':
return function(y) { return y + x };
case '-':
return function(y) { return y - x };
case '/':
return function(y) { return y / x };
case '*':
return function(y) { return y * x };
}
}
> var third = makeOp('/', 3);
> var dbl = makeOp('*', 2);
> console.log(third(12) + ' ' + dbl(8));
4 16
How does this work?
✤ Remember “everything in JavaScript is a property of an object”?
✤ Imagine that local variables belong to a “local scope” object, which
gets created when a function is executed
✤ Now imagine this object can stick around after the function has
finished executing
✤ A closure is a function plus the scope in which that function was
created
✤ Since closures capture state, you can use them as a kind of object
Real-world closure example
function revealer(el, duration) {
return function(ev) {
ev.preventDefault();
el.show(duration);
}
}
$("#mylink').click(revealer($('#panel'), 500);
$("#mylink2').click(revealer($('#panel2'), 1000);
Functions and objects
function makePerson(first, last) {
return {
"first": first,
"last": last
}
}
function personFullName(person) {
return person.first + ' ' + person.last;
}
> simon = makePerson("Simon", "Willison");
> personFullName(simon)
"Simon Willison"
First attempt at methods
function makePerson(first, last) {
return {
"first": first,
"last": last,
"fullName": function() {
return this.first + ' ' + this.last;
}
}
}
> simon = makePerson("Simon", "Willison");
> simon.fullName();
"Simon Willison"
What the heck is “this”?
✤ When you write:
> simon.fullName();
✤
fullName() is executed with this pointing to simon.
✤ If you call a method without using the '.' operator, this is set to the
global object, i.e. window.
> var fullNameMethod = simon.fullName;
> fullNameMethod();
undefined undefined
“this” is JavaScript’s magic word
You can control what this is
> simon = makePerson("Simon", "Willison");
> nat = makePerson("Natalie", "Downe");
> nat.fullName();
"Natalie Downe"
> nat.fullName.call(simon);
"Simon Willison"
> simon.fullName.apply(nat);
"Natalie Downe"
call v.s. apply
✤ Call lets you specify both the value of this and the arguments that
should be passed:
✤ myFunction.call(myThis, arg1, arg2, arg3);
✤ Apply lets you do the same thing, but pass an array of arguments
instead:
✤ myFunction.apply(myThis, [arg1, arg2, arg3]);
✤ (I always have to look this up)
Constructors
function Person(first, last) {
this.first = first;
this.last = last;
this.fullName = function() {
return this.first + ' ' + this.last;
}
}
> var simon = new Person("Simon", "Willison");
> s.fullName();
"Simon Willison"
What does “new” do?
✤ var simon = new Person(first, last);
✤ Creates an empty object: {}
✤ Executes the Person function with this set to the new empty object
✤ Adds Person.prototype to the object's prototype chain
Prototype inheritance
The following is wasteful
function Person(first, last) {
this.first = first;
this.last = last;
this.fullName = function() {
return this.first + ' ' + this.last;
}
}
How can we avoid creating a fullName function for every object?
Prototype inheritance
function Person(first, last) { this.first = first; this.last = last; }
Person.prototype.fullName = function() {
return this.first + ' ' + this.last;
}
> var simon = new Person("Simon", "Willison");
> simon.fullName();
"Simon Willison"
> simon.fullNameReversed();
TypeError: Object #<a Person> has no method 'fullNameReversed'
Person.prototype.fullNameReversed = function() {
return this.last + ', ' + this.first;
}
> simon.fullNameReversed();
"Willison, Simon"
You can extend built-in classes
> "hello".reversed();
TypeError: Object hello has no method 'reversed'
> String.prototype.reversed = function() {
var r = '';
for (var i = this.length - 1; i >= 0; i--) {
r += this[i];
}
return r;
}
> "hello".reversed();
"olleh"
That doesn’t mean you should
✤ Don’t modify objects you don’t own
✤ Extending Object.prototype breaks the (for var prop in obj) idiom
✤ Prototype.js added document.getElementsByClassName
✤ Then Mozilla added document.getElementsByClassName...
✤ The behaviour was slightly different, so code broke
✤ If you’d written your own Array.forEach() method, today your code
would be clashing with the new forEach() method in JavaScript 1.6
Prototype chain
var simon = new Person(...);
simon.toString();
Try simon.toString()
...
Try Person.prototype.toString()
...
Try Object.toString()
...
Give up
Advanced prototype chains
function Mammal() { ... }
Mammal.prototype.eatThings = ...
Person.prototype = new Mammal();
Person.prototype.learnToRead = ...
var simon = new Person(...);
simon.eatThings();
Try simon.eatThings()
...
Try Person.prototype.eatThings()
...
Try Mammal.eatThings()
...
Try Object.eatThings()
...
Give up
Let’s talk about libraries
In 2004, no one used libraries...
✤ Well, sort of...
✤ If you wanted to write anything interesting in JavaScript, there were a
few utility functions you needed in every single project
We’ll start with something easy... Events
Adding events
var link = document.getElementById(‘mylink’);
link.onclick = function() {
alert(this.href);
return false;
}
Adding more than one event?
// W3C standard browsers
var link = document.getElementById('mylink');
link.addEventListener('click', function() {
alert("Hello");
return false;
});
// IE 6
link.attachEvent("onclick", function() {
alert("Hello");
return false;
);
The addEvent function
function addEvent(obj, evType, fn, useCapture){
  if (obj.addEventListener){
    obj.addEventListener(evType, fn, useCapture);
    return true;
  } else if (obj.attachEvent){
    var r = obj.attachEvent("on"+evType, fn);
    return r;
  } else {
    alert("Handler could not be attached");
  }
}
// DON'T USE THIS THOUGH
http://www.scottandrew.com/weblog/articles/cbs-events
✤ What if you want to keep track of the event listeners that have been
added?
✤ In particular so you can manually de-register them when the page
unloads, to clean up potential memory leaks in IE
✤ addEvent doesn't fix the different event objects for you, so you still
have to work around browser differences there
addEvent drawbacks
Dean Edwards addEvent
function addEvent(element, type, handler) {
" if (element.addEventListener) {
" " element.addEventListener(type, handler, false);
" } else {
" " // assign each event handler a unique ID
" " if (!handler.$$guid) handler.$$guid = addEvent.guid++;
" " // create a hash table of event types for the element
" " if (!element.events) element.events = {};
" " // create a hash table of event handlers for each element/event pair
" " var handlers = element.events[type];
" " if (!handlers) {
" " " handlers = element.events[type] = {};
" " " // store the existing event handler (if there is one)
" " " if (element["on" + type]) {
" " " " handlers[0] = element["on" + type];
" " " }
" " }
" " // store the event handler in the hash table
" " handlers[handler.$$guid] = handler;
" " // assign a global event handler to do all the work
" " element["on" + type] = handleEvent;
" }
};
// a counter used to create unique IDs
addEvent.guid = 1;
Dean Edwards addEvent (2)
function removeEvent(element, type, handler) {
" if (element.removeEventListener) {
" " element.removeEventListener(type, handler, false);
" } else {
" " // delete the event handler from the hash table
" " if (element.events && element.events[type]) {
" " " delete element.events[type][handler.$$guid];
" " }
" }
};
function handleEvent(event) {
" var returnValue = true;
" // grab the event object (IE uses a global event object)
" event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
" // get a reference to the hash table of event handlers
" var handlers = this.events[event.type];
" // execute each event handler
" for (var i in handlers) {
" " this.$$handleEvent = handlers[i];
" " if (this.$$handleEvent(event) === false) {
" " " returnValue = false;
" " }
" }
" return returnValue;
};
Dean Edwards addEvent (3)
function fixEvent(event) {
" // add W3C standard event methods
" event.preventDefault = fixEvent.preventDefault;
" event.stopPropagation = fixEvent.stopPropagation;
" return event;
};
fixEvent.preventDefault = function() {
" this.returnValue = false;
};
fixEvent.stopPropagation = function() {
" this.cancelBubble = true;
};
Want to know where the mouse is?
addEvent(div, 'mouseover', function(ev) {
" if (!ev) var ev = window.event; // For IE
" var posx = 0;
" var posy = 0;
" if (ev.pageX || ev.pageY) {
" " posx = ev.pageX;
" " posy = ev.pageY;
" } else if (e.clientX || e.clientY) {
" " posx = e.clientX + document.body.scrollLeft
" " " + document.documentElement.scrollLeft;
" " posy = e.clientY + document.body.scrollTop
" " " + document.documentElement.scrollTop;
" }
});
// http://www.quirksmode.org/js/events_properties.html
http://www.quirksmode.org/js/ for more
How about animation?
Animate a div moving across a screen
✤ Easy! Just use setInterval() to move it left 10 pixels every 10th of a
second
✤ But... what if you're animating lots of things, and the user's
computer can't keep up...
✤ Solution: figure out where you want it to be in 2 seconds time, then
check how much time has elapsed each time round the animation
loop and adjust the position accordingly
Drag and Drop?
✤ Watch out for an onmousedown event over the object you want to
drag
✤ Attach an onmousemove event to the body, and move the element
with the mouse
✤ Watch for onmouseup, and remove the mousemove handler
✤ Simple right?
Drag and drop implementation
Drag and drop, for real
✤ Need to be able to distinguish between a click and a drag
✤ How about... a drag starts when
✤ The user moves their mouse at least 5 pixels
✤ OR... the user holds down the mose button on the draggable for at
least a full second
✤ Need to restrict the area in which the draggable can be dragged
✤
Highlight drop targets when the draggable intersects them
✤ Revert the position of the item if it’s dropped in the wrong place...
http://developer.yahoo.com/ypatterns/richinteraction/dragdrop/modules.html
The truth is...
✤ By the time you’ve implemented event handling, basic animation,
DOM manipulation and drag and drop, you’ve re-invented a sizable
chunk of jQuery, YUI or Dojo, probably with more lines of code and
definitely with a whole lot more bugs.
So how does jQuery do it?
A simple example
jQuery(function($) {
var div = $('#sessions-placeholder');
$('ul.tags a').click(function(ev) {
ev.preventDefault();
var a = $(this);
div.html(
'<img src="/static/img/loaders/ajax-loader-blue.gif" ' +
'style="margin-bottom: 1em" />'
);
div.load(a.attr('href') + '?ajax=1');
a.closest('ul').find('li').removeClass('selected');
a.closest('li').addClass('selected');
});
});
A simple example
jQuery(function($) {
var div = $('#sessions-placeholder');
$('ul.tags a').click(function(ev) {
ev.preventDefault();
var a = $(this);
div.html(
'<img src="/static/img/loaders/ajax-loader-blue.gif" ' +
'style="margin-bottom: 1em" />'
);
div.load(a.attr('href') + '?ajax=1');
a.closest('ul').find('li').removeClass('selected');
a.closest('li').addClass('selected');
});
});
A simple example
jQuery(function($) {
var div = $('#sessions-placeholder');
$('ul.tags a').click(function(ev) {
ev.preventDefault();
var a = $(this);
div.html(
'<img src="/static/img/loaders/ajax-loader-blue.gif" ' +
'style="margin-bottom: 1em" />'
);
div.load(a.attr('href') + '?ajax=1');
a.closest('ul').find('li').removeClass('selected');
a.closest('li').addClass('selected');
});
});
A simple example
jQuery(function($) {
var div = $('#sessions-placeholder');
$('ul.tags a').click(function(ev) {
ev.preventDefault();
var a = $(this);
div.html(
'<img src="/static/img/loaders/ajax-loader-blue.gif" ' +
'style="margin-bottom: 1em" />'
);
div.load(a.attr('href') + '?ajax=1');
a.closest('ul').find('li').removeClass('selected');
a.closest('li').addClass('selected');
});
});
A simple example
jQuery(function($) {
var div = $('#sessions-placeholder');
$('ul.tags a').click(function(ev) {
ev.preventDefault();
var a = $(this);
div.html(
'<img src="/static/img/loaders/ajax-loader-blue.gif" ' +
'style="margin-bottom: 1em" />'
);
div.load(a.attr('href') + '?ajax=1');
a.closest('ul').find('li').removeClass('selected');
a.closest('li').addClass('selected');
});
});
A simple example
jQuery(function($) {
var div = $('#sessions-placeholder');
$('ul.tags a').click(function(ev) {
ev.preventDefault();
var a = $(this);
div.html(
'<img src="/static/img/loaders/ajax-loader-blue.gif" ' +
'style="margin-bottom: 1em" />'
);
div.load(a.attr('href') + '?ajax=1');
a.closest('ul').find('li').removeClass('selected');
a.closest('li').addClass('selected');
});
});
A simple example
jQuery(function($) {
var div = $('#sessions-placeholder');
$('ul.tags a').click(function(ev) {
ev.preventDefault();
var a = $(this);
div.html(
'<img src="/static/img/loaders/ajax-loader-blue.gif" ' +
'style="margin-bottom: 1em" />'
);
div.load(a.attr('href') + '?ajax=1');
a.closest('ul').find('li').removeClass('selected');
a.closest('li').addClass('selected');
});
});
Moral:
Learn JavaScript properly, but
don’t write your own library
unless you’re a total glutton for
punishment
http://lanyrd.com/scch

More Related Content

What's hot

History of jQuery
History of jQueryHistory of jQuery
History of jQueryjeresig
 
Jquery In Rails
Jquery In RailsJquery In Rails
Jquery In Railsshen liu
 
Idioms in swift 2016 05c
Idioms in swift 2016 05cIdioms in swift 2016 05c
Idioms in swift 2016 05cKaz Yoshikawa
 
Jqeury ajax plugins
Jqeury ajax pluginsJqeury ajax plugins
Jqeury ajax pluginsInbal Geffen
 
HTML5 and CSS3 Refresher
HTML5 and CSS3 RefresherHTML5 and CSS3 Refresher
HTML5 and CSS3 RefresherIvano Malavolta
 
A Short Introduction To jQuery
A Short Introduction To jQueryA Short Introduction To jQuery
A Short Introduction To jQuerySudar Muthu
 
Desarrollando aplicaciones web en minutos
Desarrollando aplicaciones web en minutosDesarrollando aplicaciones web en minutos
Desarrollando aplicaciones web en minutosEdgar Suarez
 
Introduction to ECMAScript 2015
Introduction to ECMAScript 2015Introduction to ECMAScript 2015
Introduction to ECMAScript 2015Tomasz Dziuda
 
Taming that client side mess with Backbone.js
Taming that client side mess with Backbone.jsTaming that client side mess with Backbone.js
Taming that client side mess with Backbone.jsJarod Ferguson
 
jQuery Data Manipulate API - A source code dissecting journey
jQuery Data Manipulate API - A source code dissecting journeyjQuery Data Manipulate API - A source code dissecting journey
jQuery Data Manipulate API - A source code dissecting journeyHuiyi Yan
 
DataMapper @ RubyEnRails2009
DataMapper @ RubyEnRails2009DataMapper @ RubyEnRails2009
DataMapper @ RubyEnRails2009Dirkjan Bussink
 
Юрий Буянов «Squeryl — ORM с человеческим лицом»
Юрий Буянов «Squeryl — ORM с человеческим лицом»Юрий Буянов «Squeryl — ORM с человеческим лицом»
Юрий Буянов «Squeryl — ORM с человеческим лицом»e-Legion
 
Datamapper @ Railsconf2010
Datamapper @ Railsconf2010Datamapper @ Railsconf2010
Datamapper @ Railsconf2010Dirkjan Bussink
 
Jquery Best Practices
Jquery Best PracticesJquery Best Practices
Jquery Best Practicesbrinsknaps
 
Node.js - Demnächst auf einem Server in Ihrer Nähe
Node.js - Demnächst auf einem Server in Ihrer NäheNode.js - Demnächst auf einem Server in Ihrer Nähe
Node.js - Demnächst auf einem Server in Ihrer NäheRalph Winzinger
 
Modern Application Foundations: Underscore and Twitter Bootstrap
Modern Application Foundations: Underscore and Twitter BootstrapModern Application Foundations: Underscore and Twitter Bootstrap
Modern Application Foundations: Underscore and Twitter BootstrapHoward Lewis Ship
 
Drupal Best Practices
Drupal Best PracticesDrupal Best Practices
Drupal Best Practicesmanugoel2003
 
Closure, Higher-order function in Swift
Closure, Higher-order function in SwiftClosure, Higher-order function in Swift
Closure, Higher-order function in SwiftSeongGyu Jo
 

What's hot (20)

History of jQuery
History of jQueryHistory of jQuery
History of jQuery
 
Jquery In Rails
Jquery In RailsJquery In Rails
Jquery In Rails
 
Idioms in swift 2016 05c
Idioms in swift 2016 05cIdioms in swift 2016 05c
Idioms in swift 2016 05c
 
Jqeury ajax plugins
Jqeury ajax pluginsJqeury ajax plugins
Jqeury ajax plugins
 
HTML5 and CSS3 Refresher
HTML5 and CSS3 RefresherHTML5 and CSS3 Refresher
HTML5 and CSS3 Refresher
 
A Short Introduction To jQuery
A Short Introduction To jQueryA Short Introduction To jQuery
A Short Introduction To jQuery
 
Desarrollando aplicaciones web en minutos
Desarrollando aplicaciones web en minutosDesarrollando aplicaciones web en minutos
Desarrollando aplicaciones web en minutos
 
Introduction to ECMAScript 2015
Introduction to ECMAScript 2015Introduction to ECMAScript 2015
Introduction to ECMAScript 2015
 
Taming that client side mess with Backbone.js
Taming that client side mess with Backbone.jsTaming that client side mess with Backbone.js
Taming that client side mess with Backbone.js
 
jQuery Data Manipulate API - A source code dissecting journey
jQuery Data Manipulate API - A source code dissecting journeyjQuery Data Manipulate API - A source code dissecting journey
jQuery Data Manipulate API - A source code dissecting journey
 
DataMapper @ RubyEnRails2009
DataMapper @ RubyEnRails2009DataMapper @ RubyEnRails2009
DataMapper @ RubyEnRails2009
 
Юрий Буянов «Squeryl — ORM с человеческим лицом»
Юрий Буянов «Squeryl — ORM с человеческим лицом»Юрий Буянов «Squeryl — ORM с человеческим лицом»
Юрий Буянов «Squeryl — ORM с человеческим лицом»
 
JQuery Flot
JQuery FlotJQuery Flot
JQuery Flot
 
Datamapper @ Railsconf2010
Datamapper @ Railsconf2010Datamapper @ Railsconf2010
Datamapper @ Railsconf2010
 
Jquery Best Practices
Jquery Best PracticesJquery Best Practices
Jquery Best Practices
 
Node.js - Demnächst auf einem Server in Ihrer Nähe
Node.js - Demnächst auf einem Server in Ihrer NäheNode.js - Demnächst auf einem Server in Ihrer Nähe
Node.js - Demnächst auf einem Server in Ihrer Nähe
 
Modern Application Foundations: Underscore and Twitter Bootstrap
Modern Application Foundations: Underscore and Twitter BootstrapModern Application Foundations: Underscore and Twitter Bootstrap
Modern Application Foundations: Underscore and Twitter Bootstrap
 
Drupal Best Practices
Drupal Best PracticesDrupal Best Practices
Drupal Best Practices
 
The Beauty of Java Script
The Beauty of Java ScriptThe Beauty of Java Script
The Beauty of Java Script
 
Closure, Higher-order function in Swift
Closure, Higher-order function in SwiftClosure, Higher-order function in Swift
Closure, Higher-order function in Swift
 

Viewers also liked

Jazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript librariesJazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript librariesSimon Willison
 
Good Parts of JavaScript Douglas Crockford
Good Parts of JavaScript Douglas CrockfordGood Parts of JavaScript Douglas Crockford
Good Parts of JavaScript Douglas Crockfordrajivmordani
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced JavascriptAdieu
 
The JavaScript Programming Language
The JavaScript Programming LanguageThe JavaScript Programming Language
The JavaScript Programming Languageguestceb98b
 

Viewers also liked (6)

Jazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript librariesJazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
 
Good Parts of JavaScript Douglas Crockford
Good Parts of JavaScript Douglas CrockfordGood Parts of JavaScript Douglas Crockford
Good Parts of JavaScript Douglas Crockford
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
 
Java script ppt
Java script pptJava script ppt
Java script ppt
 
The JavaScript Programming Language
The JavaScript Programming LanguageThe JavaScript Programming Language
The JavaScript Programming Language
 
Javascript Best Practices
Javascript Best PracticesJavascript Best Practices
Javascript Best Practices
 

Similar to Rediscovering JavaScript: The Language Behind The Libraries

Intro to Advanced JavaScript
Intro to Advanced JavaScriptIntro to Advanced JavaScript
Intro to Advanced JavaScriptryanstout
 
JavaScript Survival Guide
JavaScript Survival GuideJavaScript Survival Guide
JavaScript Survival GuideGiordano Scalzo
 
Getting classy with ES6
Getting classy with ES6Getting classy with ES6
Getting classy with ES6Andy Sharman
 
Jsphp 110312161301-phpapp02
Jsphp 110312161301-phpapp02Jsphp 110312161301-phpapp02
Jsphp 110312161301-phpapp02Seri Moth
 
JavaScript - Like a Box of Chocolates
JavaScript - Like a Box of ChocolatesJavaScript - Like a Box of Chocolates
JavaScript - Like a Box of ChocolatesRobert Nyman
 
Realm: Building a mobile database
Realm: Building a mobile databaseRealm: Building a mobile database
Realm: Building a mobile databaseChristian Melchior
 
Ian 20150116 java script oop
Ian 20150116 java script oopIan 20150116 java script oop
Ian 20150116 java script oopLearningTech
 
Swift - Modern & Expressive, or Magical Unicorn?
Swift  - Modern & Expressive, or Magical Unicorn?Swift  - Modern & Expressive, or Magical Unicorn?
Swift - Modern & Expressive, or Magical Unicorn?Mike Jones
 
Maintainable JavaScript 2012
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012Nicholas Zakas
 
The Beauty Of Java Script V5a
The Beauty Of Java Script V5aThe Beauty Of Java Script V5a
The Beauty Of Java Script V5arajivmordani
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developersStoyan Stefanov
 
JavaScript Objects and OOP Programming with JavaScript
JavaScript Objects and OOP Programming with JavaScriptJavaScript Objects and OOP Programming with JavaScript
JavaScript Objects and OOP Programming with JavaScriptLaurence Svekis ✔
 

Similar to Rediscovering JavaScript: The Language Behind The Libraries (20)

Intro to Advanced JavaScript
Intro to Advanced JavaScriptIntro to Advanced JavaScript
Intro to Advanced JavaScript
 
Introduction kot iin
Introduction kot iinIntroduction kot iin
Introduction kot iin
 
JavaScript Survival Guide
JavaScript Survival GuideJavaScript Survival Guide
JavaScript Survival Guide
 
Javascript tid-bits
Javascript tid-bitsJavascript tid-bits
Javascript tid-bits
 
Getting classy with ES6
Getting classy with ES6Getting classy with ES6
Getting classy with ES6
 
ES6: Features + Rails
ES6: Features + RailsES6: Features + Rails
ES6: Features + Rails
 
Elegant objects
Elegant objectsElegant objects
Elegant objects
 
Jsphp 110312161301-phpapp02
Jsphp 110312161301-phpapp02Jsphp 110312161301-phpapp02
Jsphp 110312161301-phpapp02
 
ES6 generators
ES6 generatorsES6 generators
ES6 generators
 
JavaScript - Like a Box of Chocolates
JavaScript - Like a Box of ChocolatesJavaScript - Like a Box of Chocolates
JavaScript - Like a Box of Chocolates
 
Everyday's JS
Everyday's JSEveryday's JS
Everyday's JS
 
Realm: Building a mobile database
Realm: Building a mobile databaseRealm: Building a mobile database
Realm: Building a mobile database
 
Ian 20150116 java script oop
Ian 20150116 java script oopIan 20150116 java script oop
Ian 20150116 java script oop
 
jQuery introduction
jQuery introductionjQuery introduction
jQuery introduction
 
Say It With Javascript
Say It With JavascriptSay It With Javascript
Say It With Javascript
 
Swift - Modern & Expressive, or Magical Unicorn?
Swift  - Modern & Expressive, or Magical Unicorn?Swift  - Modern & Expressive, or Magical Unicorn?
Swift - Modern & Expressive, or Magical Unicorn?
 
Maintainable JavaScript 2012
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012
 
The Beauty Of Java Script V5a
The Beauty Of Java Script V5aThe Beauty Of Java Script V5a
The Beauty Of Java Script V5a
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developers
 
JavaScript Objects and OOP Programming with JavaScript
JavaScript Objects and OOP Programming with JavaScriptJavaScript Objects and OOP Programming with JavaScript
JavaScript Objects and OOP Programming with JavaScript
 

More from Simon Willison

Cheap tricks for startups
Cheap tricks for startupsCheap tricks for startups
Cheap tricks for startupsSimon Willison
 
The Django Web Framework (EuroPython 2006)
The Django Web Framework (EuroPython 2006)The Django Web Framework (EuroPython 2006)
The Django Web Framework (EuroPython 2006)Simon Willison
 
How we bootstrapped Lanyrd using Twitter's social graph
How we bootstrapped Lanyrd using Twitter's social graphHow we bootstrapped Lanyrd using Twitter's social graph
How we bootstrapped Lanyrd using Twitter's social graphSimon Willison
 
Web Services for Fun and Profit
Web Services for Fun and ProfitWeb Services for Fun and Profit
Web Services for Fun and ProfitSimon Willison
 
Tricks & challenges developing a large Django application
Tricks & challenges developing a large Django applicationTricks & challenges developing a large Django application
Tricks & challenges developing a large Django applicationSimon Willison
 
Advanced Aspects of the Django Ecosystem: Haystack, Celery & Fabric
Advanced Aspects of the Django Ecosystem: Haystack, Celery & FabricAdvanced Aspects of the Django Ecosystem: Haystack, Celery & Fabric
Advanced Aspects of the Django Ecosystem: Haystack, Celery & FabricSimon Willison
 
How Lanyrd uses Twitter
How Lanyrd uses TwitterHow Lanyrd uses Twitter
How Lanyrd uses TwitterSimon Willison
 
Building Things Fast - and getting approval
Building Things Fast - and getting approvalBuilding Things Fast - and getting approval
Building Things Fast - and getting approvalSimon Willison
 
Building crowdsourcing applications
Building crowdsourcing applicationsBuilding crowdsourcing applications
Building crowdsourcing applicationsSimon Willison
 
Evented I/O based web servers, explained using bunnies
Evented I/O based web servers, explained using bunniesEvented I/O based web servers, explained using bunnies
Evented I/O based web servers, explained using bunniesSimon Willison
 
Cowboy development with Django
Cowboy development with DjangoCowboy development with Django
Cowboy development with DjangoSimon Willison
 
Class-based views with Django
Class-based views with DjangoClass-based views with Django
Class-based views with DjangoSimon Willison
 
Web App Security Horror Stories
Web App Security Horror StoriesWeb App Security Horror Stories
Web App Security Horror StoriesSimon Willison
 
Web Security Horror Stories
Web Security Horror StoriesWeb Security Horror Stories
Web Security Horror StoriesSimon Willison
 
When Zeppelins Ruled The Earth
When Zeppelins Ruled The EarthWhen Zeppelins Ruled The Earth
When Zeppelins Ruled The EarthSimon Willison
 
When Ajax Attacks! Web application security fundamentals
When Ajax Attacks! Web application security fundamentalsWhen Ajax Attacks! Web application security fundamentals
When Ajax Attacks! Web application security fundamentalsSimon Willison
 

More from Simon Willison (20)

How Lanyrd does Geo
How Lanyrd does GeoHow Lanyrd does Geo
How Lanyrd does Geo
 
Cheap tricks for startups
Cheap tricks for startupsCheap tricks for startups
Cheap tricks for startups
 
The Django Web Framework (EuroPython 2006)
The Django Web Framework (EuroPython 2006)The Django Web Framework (EuroPython 2006)
The Django Web Framework (EuroPython 2006)
 
Building Lanyrd
Building LanyrdBuilding Lanyrd
Building Lanyrd
 
How we bootstrapped Lanyrd using Twitter's social graph
How we bootstrapped Lanyrd using Twitter's social graphHow we bootstrapped Lanyrd using Twitter's social graph
How we bootstrapped Lanyrd using Twitter's social graph
 
Web Services for Fun and Profit
Web Services for Fun and ProfitWeb Services for Fun and Profit
Web Services for Fun and Profit
 
Tricks & challenges developing a large Django application
Tricks & challenges developing a large Django applicationTricks & challenges developing a large Django application
Tricks & challenges developing a large Django application
 
Advanced Aspects of the Django Ecosystem: Haystack, Celery & Fabric
Advanced Aspects of the Django Ecosystem: Haystack, Celery & FabricAdvanced Aspects of the Django Ecosystem: Haystack, Celery & Fabric
Advanced Aspects of the Django Ecosystem: Haystack, Celery & Fabric
 
How Lanyrd uses Twitter
How Lanyrd uses TwitterHow Lanyrd uses Twitter
How Lanyrd uses Twitter
 
ScaleFail
ScaleFailScaleFail
ScaleFail
 
Building Things Fast - and getting approval
Building Things Fast - and getting approvalBuilding Things Fast - and getting approval
Building Things Fast - and getting approval
 
Building crowdsourcing applications
Building crowdsourcing applicationsBuilding crowdsourcing applications
Building crowdsourcing applications
 
Evented I/O based web servers, explained using bunnies
Evented I/O based web servers, explained using bunniesEvented I/O based web servers, explained using bunnies
Evented I/O based web servers, explained using bunnies
 
Cowboy development with Django
Cowboy development with DjangoCowboy development with Django
Cowboy development with Django
 
Django Heresies
Django HeresiesDjango Heresies
Django Heresies
 
Class-based views with Django
Class-based views with DjangoClass-based views with Django
Class-based views with Django
 
Web App Security Horror Stories
Web App Security Horror StoriesWeb App Security Horror Stories
Web App Security Horror Stories
 
Web Security Horror Stories
Web Security Horror StoriesWeb Security Horror Stories
Web Security Horror Stories
 
When Zeppelins Ruled The Earth
When Zeppelins Ruled The EarthWhen Zeppelins Ruled The Earth
When Zeppelins Ruled The Earth
 
When Ajax Attacks! Web application security fundamentals
When Ajax Attacks! Web application security fundamentalsWhen Ajax Attacks! Web application security fundamentals
When Ajax Attacks! Web application security fundamentals
 

Recently uploaded

Introduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptxIntroduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptxmprakaash5
 
The work to make the piecework work: An ethnographic study of food delivery w...
The work to make the piecework work: An ethnographic study of food delivery w...The work to make the piecework work: An ethnographic study of food delivery w...
The work to make the piecework work: An ethnographic study of food delivery w...stockholm university
 
Why Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionWhy Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionDEEPRAJ PATHAK
 
A PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptxA PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptxatharvdev2010
 
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...BookNet Canada
 
Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!Memoori
 
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024BookNet Canada
 
Tetracrom printing process for packaging with CMYK+
Tetracrom printing process for packaging with CMYK+Tetracrom printing process for packaging with CMYK+
Tetracrom printing process for packaging with CMYK+Antonio de Llamas
 
Dublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptxDublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptxKunal Gupta
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
Bitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactiveBitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactivestartupro
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Jeffrey Haguewood
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024TopCSSGallery
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Mark Simos
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?Rustici Software
 
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdfHCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdfROWELL MARQUINA
 
Tecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for RotogravureTecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for RotogravureAntonio de Llamas
 
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023Joshua Flannery
 

Recently uploaded (20)

Introduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptxIntroduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptx
 
The work to make the piecework work: An ethnographic study of food delivery w...
The work to make the piecework work: An ethnographic study of food delivery w...The work to make the piecework work: An ethnographic study of food delivery w...
The work to make the piecework work: An ethnographic study of food delivery w...
 
Why Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionWhy Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile Evolution
 
A PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptxA PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptx
 
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
 
Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!
 
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
Green paths: Learning from publishers’ sustainability journeys - Tech Forum 2024
 
Tetracrom printing process for packaging with CMYK+
Tetracrom printing process for packaging with CMYK+Tetracrom printing process for packaging with CMYK+
Tetracrom printing process for packaging with CMYK+
 
Dublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptxDublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptx
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
Bitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactiveBitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactive
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
 
BoSEU24 | Bill Thompson | Talk From Another Century
BoSEU24 | Bill Thompson | Talk From Another CenturyBoSEU24 | Bill Thompson | Talk From Another Century
BoSEU24 | Bill Thompson | Talk From Another Century
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?
 
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdfHCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
 
Tecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for RotogravureTecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for Rotogravure
 
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
 

Rediscovering JavaScript: The Language Behind The Libraries

  • 1. 13th September 2010 Rediscovering JavaScript The Language BehindThe Libraries Simon Willison, Think Vitamin JavaScript
  • 2. Coming up... ✤ JavaScript, the language ✤ Object fundamentals ✤ Functions and closures ✤ Prototype inheritance ✤ JavaScript, the Libraries ✤ Event handling ✤ Animation ✤ Drag ‘n’ Drop
  • 3. Let’s go back in time to 2004...
  • 4. My phone looked like this: Nokia 7610
  • 5. No one took JavaScript seriously
  • 7. “Selling the Future of DHTML”
  • 9. May 9th, 2005 Http://www.flickr.com/photos/nataliedowne/14517351/ (me, in 2005)
  • 10. Also in 2005 ✤ Gmail had its first birthday, still in invite-only beta ✤ Google Maps launched February 8th ✤ The term “Ajax” was coined February 18th by Jesse James Garrett ✤ Ajaxian.com launched March 10th
  • 11. A flurry of library activity ✤ February 2005: First Prototype.js ✤ March 2005: First public MochiKit code ✤ YUI started development internally at Yahoo! in 2005 (first public release was February 2006) ✤ jQuery released at BarCamp Boston in January 2006
  • 13. Prototype:“make JS like Ruby” Sortable.tree(element, arguments[1]).children.map(function(item) { return [ name + Sortable._constructIndex(item) + "[id]=" + encodeURIComponent(item.id) ].concat(item.children.map(arguments.callee)); }).flatten().join('&');
  • 14. MochiKit:“make JS like Python” var theSum = sum(takewhile( partial(operator.gt, 10), imap( partial(operator.mul, 2), count() ) ));
  • 15. YUI:“make JS like Java” YAHOO.namespace("example.panel"); function initWait(ev) { YAHOO.example.panel.wait = new YAHOO.widget.Panel("wait", { width: "240px", modal: true, effect: { effect:YAHOO.widget.ContainerEffect.FADE, duration:0.5 } }); YAHOO.example.panel.wait.beforeRenderEvent.subscribe(function() { debug('beforeRenderEvent Fired..'); }, YAHOO.example.panel.wait, true); YAHOO.example.panel.wait.setHeader("Loading (1), please wait..."); }
  • 16. jQuery:“make JS like jQuery” $('form#login') .find('label.optional').hide().end() .find('input:password').css('border', '1px solid red').end() .submit(function(){ return confirm('Are you sure you want to submit?'); });
  • 17. How can one language support so many different programming styles?
  • 20. Everything in JavaScript is an object Strings and numbers > "A string".length 8 > 123.toString() SyntaxError: Unexpected token ILLEGAL > (123).toString() “123” Even functions: > function hello() { alert("hello") } > hello.toString() "function hello() { alert("hello") }"
  • 21. You can make your own objects // The same thing: var simon = new Object(); var simon = {}; // Also the same: simon.name = "Simon Willison"; // name is a property simon["name"] = "Simon Willison"; // Object literal syntax is most useful: var simon = { name: "Simon Willison", age: 29 };
  • 22. You can loop through properties > var simon = { name: "Simon Willison", age: 29 }; > for (var prop in simon) { console.log(prop + ': ' + simon[prop]); } name: Simon age: 29 (more on this later...)
  • 23. (almost) Everything in JavaScript is a property on an object > parseInt("100 bunnies"); 100 > parseInt === window.parseInt // window is the global object true > window === window.window true > window === window.window.window true > true === window.true SyntaxError: Unexpected token true
  • 24. Arrays > var a = new Array(); // Old-school > var a = []; // Literal syntax > var a = ["dog", "cat", "chicken"]; > a.length; 3 > a[0] "dog" > a[2] "chicken" > a[3] undefined
  • 25. Iteration through arrays > var a = ["dog", "cat", "chicken"]; > for (var i = 0; i < a.length; i++) { console.log(a[i]); } dog cat chicken
  • 26. Tricksy array iteration > var a = ["dog", "cat", "chicken"]; > for (var i = 0, item; item = a[i]; i++) { console.log(item); } dog cat chicken // But watch out for falsey values: > var a = [123, 0, 12, 443]; > for (var i = 0, item; item = a[i]; i++) { console.log(item); } 123
  • 29. Functions // What could be simpler? function addTwoNumbers(a, b) { var total = a + b; // A local variable return total; } > addTwoNumbers(2, 4) 6
  • 30. Functions // What could be simpler? function addTwoNumbers(a, b) { var total = a + b; // A local variable return total; } > addTwoNumbers(2, 4) 6 > addTwoNumbers() NaN
  • 31. Functions // What could be simpler? function addTwoNumbers(a, b) { var total = a + b; // A local variable return total; } > addTwoNumbers(2, 4) 6 > addTwoNumbers() NaN > addTwoNumbers(2, 4, 8) 6
  • 32. Function parameters are more like guidelines // arguments is a magic array-like object function add() { var sum = 0; for (var i = 0, j = arguments.length; i < j; i++) { sum += arguments[i]; } return sum; } > add(1, 3, 4, 5, 0, 5); 18
  • 33. Anonymous functions var add = function() { var sum = 0; for (var i = 0, j = arguments.length; i < j; i++) { sum += arguments[i]; } return sum; } var added = (function() { var a = 2, b = 5; // Local variables return a + b; })();
  • 34. Modern array iteration > var a = ["dog", "cat"]; > a.forEach(function(item) { console.log(item); } dog cat > a.forEach(function(item, index) { console.log(index + ': ' + item); } 0: dog 1: cat
  • 35. Closures function makeOp(op, x) { switch(op) { case '+': return function(y) { return y + x }; case '-': return function(y) { return y - x }; case '/': return function(y) { return y / x }; case '*': return function(y) { return y * x }; } } > var third = makeOp('/', 3); > var dbl = makeOp('*', 2); > console.log(third(12) + ' ' + dbl(8)); 4 16
  • 36. How does this work? ✤ Remember “everything in JavaScript is a property of an object”? ✤ Imagine that local variables belong to a “local scope” object, which gets created when a function is executed ✤ Now imagine this object can stick around after the function has finished executing ✤ A closure is a function plus the scope in which that function was created ✤ Since closures capture state, you can use them as a kind of object
  • 37. Real-world closure example function revealer(el, duration) { return function(ev) { ev.preventDefault(); el.show(duration); } } $("#mylink').click(revealer($('#panel'), 500); $("#mylink2').click(revealer($('#panel2'), 1000);
  • 38. Functions and objects function makePerson(first, last) { return { "first": first, "last": last } } function personFullName(person) { return person.first + ' ' + person.last; } > simon = makePerson("Simon", "Willison"); > personFullName(simon) "Simon Willison"
  • 39. First attempt at methods function makePerson(first, last) { return { "first": first, "last": last, "fullName": function() { return this.first + ' ' + this.last; } } } > simon = makePerson("Simon", "Willison"); > simon.fullName(); "Simon Willison"
  • 40. What the heck is “this”? ✤ When you write: > simon.fullName(); ✤ fullName() is executed with this pointing to simon. ✤ If you call a method without using the '.' operator, this is set to the global object, i.e. window. > var fullNameMethod = simon.fullName; > fullNameMethod(); undefined undefined
  • 42. You can control what this is > simon = makePerson("Simon", "Willison"); > nat = makePerson("Natalie", "Downe"); > nat.fullName(); "Natalie Downe" > nat.fullName.call(simon); "Simon Willison" > simon.fullName.apply(nat); "Natalie Downe"
  • 43. call v.s. apply ✤ Call lets you specify both the value of this and the arguments that should be passed: ✤ myFunction.call(myThis, arg1, arg2, arg3); ✤ Apply lets you do the same thing, but pass an array of arguments instead: ✤ myFunction.apply(myThis, [arg1, arg2, arg3]); ✤ (I always have to look this up)
  • 44. Constructors function Person(first, last) { this.first = first; this.last = last; this.fullName = function() { return this.first + ' ' + this.last; } } > var simon = new Person("Simon", "Willison"); > s.fullName(); "Simon Willison"
  • 45. What does “new” do? ✤ var simon = new Person(first, last); ✤ Creates an empty object: {} ✤ Executes the Person function with this set to the new empty object ✤ Adds Person.prototype to the object's prototype chain
  • 46. Prototype inheritance The following is wasteful function Person(first, last) { this.first = first; this.last = last; this.fullName = function() { return this.first + ' ' + this.last; } } How can we avoid creating a fullName function for every object?
  • 47. Prototype inheritance function Person(first, last) { this.first = first; this.last = last; } Person.prototype.fullName = function() { return this.first + ' ' + this.last; } > var simon = new Person("Simon", "Willison"); > simon.fullName(); "Simon Willison" > simon.fullNameReversed(); TypeError: Object #<a Person> has no method 'fullNameReversed' Person.prototype.fullNameReversed = function() { return this.last + ', ' + this.first; } > simon.fullNameReversed(); "Willison, Simon"
  • 48. You can extend built-in classes > "hello".reversed(); TypeError: Object hello has no method 'reversed' > String.prototype.reversed = function() { var r = ''; for (var i = this.length - 1; i >= 0; i--) { r += this[i]; } return r; } > "hello".reversed(); "olleh"
  • 49. That doesn’t mean you should ✤ Don’t modify objects you don’t own ✤ Extending Object.prototype breaks the (for var prop in obj) idiom ✤ Prototype.js added document.getElementsByClassName ✤ Then Mozilla added document.getElementsByClassName... ✤ The behaviour was slightly different, so code broke ✤ If you’d written your own Array.forEach() method, today your code would be clashing with the new forEach() method in JavaScript 1.6
  • 50. Prototype chain var simon = new Person(...); simon.toString(); Try simon.toString() ... Try Person.prototype.toString() ... Try Object.toString() ... Give up
  • 51. Advanced prototype chains function Mammal() { ... } Mammal.prototype.eatThings = ... Person.prototype = new Mammal(); Person.prototype.learnToRead = ... var simon = new Person(...); simon.eatThings(); Try simon.eatThings() ... Try Person.prototype.eatThings() ... Try Mammal.eatThings() ... Try Object.eatThings() ... Give up
  • 52. Let’s talk about libraries
  • 53. In 2004, no one used libraries... ✤ Well, sort of... ✤ If you wanted to write anything interesting in JavaScript, there were a few utility functions you needed in every single project
  • 54. We’ll start with something easy... Events
  • 55. Adding events var link = document.getElementById(‘mylink’); link.onclick = function() { alert(this.href); return false; }
  • 56. Adding more than one event? // W3C standard browsers var link = document.getElementById('mylink'); link.addEventListener('click', function() { alert("Hello"); return false; }); // IE 6 link.attachEvent("onclick", function() { alert("Hello"); return false; );
  • 57. The addEvent function function addEvent(obj, evType, fn, useCapture){   if (obj.addEventListener){     obj.addEventListener(evType, fn, useCapture);     return true;   } else if (obj.attachEvent){     var r = obj.attachEvent("on"+evType, fn);     return r;   } else {     alert("Handler could not be attached");   } } // DON'T USE THIS THOUGH http://www.scottandrew.com/weblog/articles/cbs-events
  • 58. ✤ What if you want to keep track of the event listeners that have been added? ✤ In particular so you can manually de-register them when the page unloads, to clean up potential memory leaks in IE ✤ addEvent doesn't fix the different event objects for you, so you still have to work around browser differences there addEvent drawbacks
  • 59. Dean Edwards addEvent function addEvent(element, type, handler) { " if (element.addEventListener) { " " element.addEventListener(type, handler, false); " } else { " " // assign each event handler a unique ID " " if (!handler.$$guid) handler.$$guid = addEvent.guid++; " " // create a hash table of event types for the element " " if (!element.events) element.events = {}; " " // create a hash table of event handlers for each element/event pair " " var handlers = element.events[type]; " " if (!handlers) { " " " handlers = element.events[type] = {}; " " " // store the existing event handler (if there is one) " " " if (element["on" + type]) { " " " " handlers[0] = element["on" + type]; " " " } " " } " " // store the event handler in the hash table " " handlers[handler.$$guid] = handler; " " // assign a global event handler to do all the work " " element["on" + type] = handleEvent; " } }; // a counter used to create unique IDs addEvent.guid = 1;
  • 60. Dean Edwards addEvent (2) function removeEvent(element, type, handler) { " if (element.removeEventListener) { " " element.removeEventListener(type, handler, false); " } else { " " // delete the event handler from the hash table " " if (element.events && element.events[type]) { " " " delete element.events[type][handler.$$guid]; " " } " } }; function handleEvent(event) { " var returnValue = true; " // grab the event object (IE uses a global event object) " event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event); " // get a reference to the hash table of event handlers " var handlers = this.events[event.type]; " // execute each event handler " for (var i in handlers) { " " this.$$handleEvent = handlers[i]; " " if (this.$$handleEvent(event) === false) { " " " returnValue = false; " " } " } " return returnValue; };
  • 61. Dean Edwards addEvent (3) function fixEvent(event) { " // add W3C standard event methods " event.preventDefault = fixEvent.preventDefault; " event.stopPropagation = fixEvent.stopPropagation; " return event; }; fixEvent.preventDefault = function() { " this.returnValue = false; }; fixEvent.stopPropagation = function() { " this.cancelBubble = true; };
  • 62. Want to know where the mouse is? addEvent(div, 'mouseover', function(ev) { " if (!ev) var ev = window.event; // For IE " var posx = 0; " var posy = 0; " if (ev.pageX || ev.pageY) { " " posx = ev.pageX; " " posy = ev.pageY; " } else if (e.clientX || e.clientY) { " " posx = e.clientX + document.body.scrollLeft " " " + document.documentElement.scrollLeft; " " posy = e.clientY + document.body.scrollTop " " " + document.documentElement.scrollTop; " } }); // http://www.quirksmode.org/js/events_properties.html
  • 65. Animate a div moving across a screen ✤ Easy! Just use setInterval() to move it left 10 pixels every 10th of a second ✤ But... what if you're animating lots of things, and the user's computer can't keep up... ✤ Solution: figure out where you want it to be in 2 seconds time, then check how much time has elapsed each time round the animation loop and adjust the position accordingly
  • 67. ✤ Watch out for an onmousedown event over the object you want to drag ✤ Attach an onmousemove event to the body, and move the element with the mouse ✤ Watch for onmouseup, and remove the mousemove handler ✤ Simple right? Drag and drop implementation
  • 68. Drag and drop, for real ✤ Need to be able to distinguish between a click and a drag ✤ How about... a drag starts when ✤ The user moves their mouse at least 5 pixels ✤ OR... the user holds down the mose button on the draggable for at least a full second ✤ Need to restrict the area in which the draggable can be dragged ✤ Highlight drop targets when the draggable intersects them ✤ Revert the position of the item if it’s dropped in the wrong place...
  • 70. The truth is... ✤ By the time you’ve implemented event handling, basic animation, DOM manipulation and drag and drop, you’ve re-invented a sizable chunk of jQuery, YUI or Dojo, probably with more lines of code and definitely with a whole lot more bugs.
  • 71. So how does jQuery do it?
  • 72. A simple example jQuery(function($) { var div = $('#sessions-placeholder'); $('ul.tags a').click(function(ev) { ev.preventDefault(); var a = $(this); div.html( '<img src="/static/img/loaders/ajax-loader-blue.gif" ' + 'style="margin-bottom: 1em" />' ); div.load(a.attr('href') + '?ajax=1'); a.closest('ul').find('li').removeClass('selected'); a.closest('li').addClass('selected'); }); });
  • 73. A simple example jQuery(function($) { var div = $('#sessions-placeholder'); $('ul.tags a').click(function(ev) { ev.preventDefault(); var a = $(this); div.html( '<img src="/static/img/loaders/ajax-loader-blue.gif" ' + 'style="margin-bottom: 1em" />' ); div.load(a.attr('href') + '?ajax=1'); a.closest('ul').find('li').removeClass('selected'); a.closest('li').addClass('selected'); }); });
  • 74. A simple example jQuery(function($) { var div = $('#sessions-placeholder'); $('ul.tags a').click(function(ev) { ev.preventDefault(); var a = $(this); div.html( '<img src="/static/img/loaders/ajax-loader-blue.gif" ' + 'style="margin-bottom: 1em" />' ); div.load(a.attr('href') + '?ajax=1'); a.closest('ul').find('li').removeClass('selected'); a.closest('li').addClass('selected'); }); });
  • 75. A simple example jQuery(function($) { var div = $('#sessions-placeholder'); $('ul.tags a').click(function(ev) { ev.preventDefault(); var a = $(this); div.html( '<img src="/static/img/loaders/ajax-loader-blue.gif" ' + 'style="margin-bottom: 1em" />' ); div.load(a.attr('href') + '?ajax=1'); a.closest('ul').find('li').removeClass('selected'); a.closest('li').addClass('selected'); }); });
  • 76. A simple example jQuery(function($) { var div = $('#sessions-placeholder'); $('ul.tags a').click(function(ev) { ev.preventDefault(); var a = $(this); div.html( '<img src="/static/img/loaders/ajax-loader-blue.gif" ' + 'style="margin-bottom: 1em" />' ); div.load(a.attr('href') + '?ajax=1'); a.closest('ul').find('li').removeClass('selected'); a.closest('li').addClass('selected'); }); });
  • 77. A simple example jQuery(function($) { var div = $('#sessions-placeholder'); $('ul.tags a').click(function(ev) { ev.preventDefault(); var a = $(this); div.html( '<img src="/static/img/loaders/ajax-loader-blue.gif" ' + 'style="margin-bottom: 1em" />' ); div.load(a.attr('href') + '?ajax=1'); a.closest('ul').find('li').removeClass('selected'); a.closest('li').addClass('selected'); }); });
  • 78. A simple example jQuery(function($) { var div = $('#sessions-placeholder'); $('ul.tags a').click(function(ev) { ev.preventDefault(); var a = $(this); div.html( '<img src="/static/img/loaders/ajax-loader-blue.gif" ' + 'style="margin-bottom: 1em" />' ); div.load(a.attr('href') + '?ajax=1'); a.closest('ul').find('li').removeClass('selected'); a.closest('li').addClass('selected'); }); });
  • 79. Moral: Learn JavaScript properly, but don’t write your own library unless you’re a total glutton for punishment