stuart langridge, 2009 new whizzy javascript stuff stuart langridge http://www.kryogenix.org/ @sil
A presentation at Multipack Presents: Emerging Standards in February 2009 in Birmingham, UK by Stuart Langridge
stuart langridge, 2009 new whizzy javascript stuff stuart langridge http://www.kryogenix.org/ @sil
stuart langridge, 2009 aka the glorious new future
stuart langridge, 2009 aka one day my son all this will be yours
stuart langridge, 2009 ecmascript 4
stuart langridge, 2009 ecmascript 4
stuart langridge, 2009
stuart langridge, 2009 real things
stuart langridge, 2009 querySelector querySelectorAll getters se tters Array functions DOM local storage local DB storage getComputedStyle getElementsByClassName <event-source>
stuart langridge, 2009 getElementsByClassName var elements = document.getElementsByClassName(“class”); just like getElementsByTagName
stuart langridge, 2009 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, 2009 Functional programming
stuart langridge, 2009 Functional programming not that scary...
stuart langridge, 2009 Array functions [“a”,”b”,”c”].forEach(function(val, idx, arr) {
item (idx) in array (arr) is (val) });
stuart langridge, 2009 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, 2009 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, 2009 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, 2009 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, 2009 getComputedStyle var el = document.querySelector(“p”); var css = document.defaultView.getComputedStyle(el,null); var height = css.getPropertyValue("height");
stuart langridge, 2009 getComputedStyle var el = document.querySelector(“p”); var css = document.defaultView.getComputedStyle(el,null); var height = css.getPropertyValue("height"); but... el.style.height
stuart langridge, 2009 getComputedStyle var css = document. defaultView . getComputed Style(el, null ); var height = css. getPropertyValue ("height"); just not necessary
stuart langridge, 2009 runtimeStyle in IE var el = document.getElementsByTagName(“p”)[0]; var height = el.runtimeStyle.height; el.runtimeStyle.cssText = “height: 200px;”; Internet Explorer ftw!
stuart langridge, 2009 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, 2009 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, 2009 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, 2009 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, 2009 no, you can’t have a consistent database API
stuart langridge, 2009 serversent 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, 2009 serversent 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); } <event-source src=”getTime.php”> document.getElementsByTagName("event-source")[0]
.addEventListener("server-time", eventHandler, false); function eventHandler(event) {
alert(event.data); } Opera only
stuart langridge, 2009 I know what you’re thinking... where can I get these fine new items?
stuart langridge, 2009 querySelector array functions serversent events getters and setters DOM local storage getComputedStyle local database storage getElementsByClassName
stuart langridge, 2009 querySelector array functions serversent events (opera only) getters and setters DOM local storage (not webkit) getComputedStyle local database storage (webkit only) getElementsByClassName
stuart langridge, 2009 querySelector array functions serversent events getters and setters DOM local storage getComputedStyle local database storage getElementsByClassName
stuart langridge, 2009 querySelector array functions serversent events getters and setters DOM local storage getComputedStyle local database storage getElementsByClassName EPIC FAIL
stuart langridge, 2009 but, but, but... IE8!
stuart langridge, 2009 querySelector serversent events getters and setters local database storage
stuart langridge, 2009 querySelector array functions serversent events getters and setters DOM local storage getComputedStyle local database storage getElementsByClassName with a library
stuart langridge, 2009 single browser environment
stuart langridge, 2009 progressive enhancement
stuart langridge, 2009 get the skills
stuart langridge, 2009
stuart langridge, 2009 party like it’s 2009
stuart langridge, 2009 fin. http://tinyurl.com/whizzy thanks to Conrad Barski
