Advanced JavaScript stuff, Multipack February 2009

a presentation by stuart langridge

A presentation given at the first Multipack Presents event in Birmingham on February 21st 2009.

The theme of the event was "Emerging Standards", and this presentation covers some facilities in JavaScript which are either upcoming or have actually been available for a while but that people don't use or don't know about, such as the advanced methods of Array, DOM Storage, and the easy way to do Comet, server-sent events.

Download as OpenOffice · Download as PDF

Watch Flash video (truncated)

OSS BarCamp version (more jokes)

Download as OpenOffice · Download as PDF

Errata

  1. new whizzy javascript stuff

stuart langridge, multipack, february 2009


  2. aka

 the glorious new future

stuart langridge, multipack, february 2009


  3. aka

 one day my son all this will be yours

stuart langridge, multipack, february 2009


  4. ecmascript 4

stuart langridge, multipack, february 2009


  5. ecmascript 4

stuart langridge, multipack, february 2009


  6. face? bothered?

stuart langridge, multipack, february 2009


  7. real things

stuart langridge, multipack, february 2009


  8. Array functions getters querySelectorAll
DOM local storage

querySelector
local DB storage


setters

getComputedStyle getElementsByClassName
stuart langridge, multipack, february 2009


  9. getElementsByClassName
var elements = document.getElementsByClassName(“class”);

just like getElementsByTagName
stuart langridge, multipack, february 2009


  10. querySelector, querySelectorAll
var link = document.querySelector(“.nav p a”); var links = document.querySelectorAll(“.nav p a”); var l = e.querySelectorAll(“.large:nth-child(even)”);

use any CSS selectors you like
stuart langridge, multipack, february 2009


  11. Array functions
[“a”,”b”,”c”].forEach(function(val, idx, arr) { item (idx) in array (arr) is (val) });

stuart langridge, multipack, february 2009


  12. Array functions
[“a”,”b”,”c”].forEach(function(val, idx, arr) { item (idx) in array (arr) is (val) }); [1,2,3].every(function(val, idx, arr) { return (val < 4) }) // true: see also “some”

stuart langridge, multipack, february 2009


  13. Array functions
[“a”,”b”,”c”].forEach(function(val, idx, arr) { item (idx) in array (arr) is (val) }); [1,2,3].every(function(val, idx, arr) { return (val < 4) }) // true: see also “some” [1,2,3,4,5].filter(function(val, idx, arr) { return (val < 4) }) // [1,2,3]

stuart langridge, multipack, february 2009


  14. Array functions
[“a”,”b”,”c”].forEach(function(val, idx, arr) { item (idx) in array (arr) is (val) }); [1,2,3].every(function(val, idx, arr) { return (val < 4) }) // true: see also “some” [1,2,3,4,5].filter(function(val, idx, arr) { return (val < 4) }) // [1,2,3] [1,2,3,4,5].map(function(val, idx, arr) { return (val + 6) }) // [7,8,9,10,11]: see also “reduce”

stuart langridge, multipack, february 2009


  15. Array functions
[“a”,”b”,”c”].forEach(function(val, idx, arr) { item (idx) in array (arr) is (val) }); [1,2,3].every(function(val, idx, arr) { return (val < 4) }) // true: see also “some” [1,2,3,4,5].filter(function(val, idx, arr) { return (val < 4) }) // [1,2,3] [1,2,3,4,5].map(function(val, idx, arr) { return (val + 6) }) // [7,8,9,10,11]: see also “reduce” [“a”,”b”,”c”].indexOf(“b”) // 1

stuart langridge, multipack, february 2009


  16. getComputedStyle
var el = document.querySelector(“p”); var css = document.defaultView.getComputedStyle(el,null); var height = css.getPropertyValue("height");

unnecessarily complex
stuart langridge, multipack, february 2009


  17. runtimeStyle in IE
var el = document.getElementsByTagName(“p”)[0]; var height = el.runtimeStyle.height; el.runtimeStyle.cssText = “height: 200px;”;

Internet Explorer ftw!
stuart langridge, multipack, february 2009


  18. getters and setters
var dt = Date.prototype; dt.__defineGetter__(“sinceIWasBorn”, function() { var silborn = Date.parse(“30/01/1976”); return this.getTime() - silborn; }); var now = new Date(); alert(now.sinceIWasBorn); // property, not method

stuart langridge, multipack, february 2009


  19. getters and setters
var dt = Date.prototype; dt.__defineGetter__(“sinceIWasBorn”, function() { var silborn = Date.parse(“30/01/1976”); return this.getTime() - silborn; }); var obj = { a: 100, get b(): { return this.a + 1 } set c(val): { this.a = val + 50; } };

stuart langridge, multipack, february 2009


  20. DOM local storage
var visits = globalStorage[“kryogenix.org”].visits; if (!visits) visits = 0; globalStorage[“kryogenix.org”].visits = visits + 1;

IE has userData behaviours
stuart langridge, multipack, february 2009


  21. local database storage
var db = openDatabase("My Database", "1.0"); db.executeSql("SELECT * FROM test", function(result1) { // do something with the results db.executeSql("DROP TABLE test", function(result2) { // do some more stuff alert("The second query has finished"); });

});

WebKit only (Mozilla in XPCOM)
stuart langridge, multipack, february 2009


  22. server­sent events
PHP on the server: header("Content-Type: application/x-dom-event-stream"); while(true) { echo "Event: server-time\n"; $time = time(); echo "data: $time\n"; echo "\n"; flush(); sleep(3); }

stuart langridge, multipack, february 2009


  23. server­sent events
header("Content-Type: application/x-dom-event-stream"); while(true) { echo "Event: server-time\n"; $time = time(); echo "data: $time\n"; echo "\n"; flush(); sleep(3); }

 document.getElementsByTagName("event-source")[0] .addEventListener("server-time", eventHandler, false); function eventHandler(event) { alert(event.data); }

Opera only
stuart langridge, multipack, february 2009


  24. I know what you’re thinking... where can I get these fine new  items?

stuart langridge, multipack, february 2009


  25. querySelector array functions server­sent events getters and setters DOM local storage getComputedStyle local database storage getElementsByClassName
stuart langridge, multipack, february 2009


  26. querySelector array functions server­sent events (opera only) getters and setters DOM local storage (not webkit) getComputedStyle local database storage (webkit only) getElementsByClassName
stuart langridge, multipack, february 2009


  27. querySelector array functions server­sent events getters and setters DOM local storage getComputedStyle local database storage getElementsByClassName
stuart langridge, multipack, february 2009


  28. querySelector server­sent events getters and setters local database storage
stuart langridge, multipack, february 2009


  29. with a library querySelector array functions server­sent events getters and setters DOM local storage getComputedStyle local database storage getElementsByClassName
stuart langridge, multipack, february 2009


  30. single browser  environment

stuart langridge, multipack, february 2009


  31. progressive enhancement

stuart langridge, multipack, february 2009


  32. party like it’s 2009

stuart langridge, multipack, february 2009


  33. fin.

stuart langridge, multipack, february 2009