Rediscovering JavaScript: The Language Behind The Libraries

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

“Selling the Future of DHTML”

May 9th, 2005 Http://www.ﬂickr.com/photos/nataliedowne/14517351/
(me, in 2005)

Also in 2005
✤ Gmail had its ﬁrst 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 (ﬁrst 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?

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
> for (var i = 0; i < a.length; i++) {
console.log(a[i]);
}
dog
cat
chicken

Tricksy array iteration
> 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
// What could be simpler?
function addTwoNumbers(a, b) {
var total = a + b; // A local variable
return total;
}
> addTwoNumbers(2, 4)
6

Functions
return total;
}
6
> addTwoNumbers()
NaN

Functions
return total;
}
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
ﬁnished 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.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
> 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() {
}
}
> 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() {
}
}
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() {
}
> 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

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 ﬁx 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

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: ﬁgure 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

✤ 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
deﬁnitely with a whole lot more bugs.

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

Rediscovering JavaScript: The Language Behind The Libraries

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (6)

Similar a Rediscovering JavaScript: The Language Behind The Libraries

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

Más de Simon Willison

Más de Simon Willison (20)

Último

Último (20)

Rediscovering JavaScript: The Language Behind The Libraries