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 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, 2009 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); } <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 server­sent events getters and setters DOM local storage getComputedStyle local database storage getElementsByClassName

stuart langridge, 2009 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, 2009 querySelector array functions server­sent events getters and setters DOM local storage getComputedStyle local database storage getElementsByClassName

stuart langridge, 2009 querySelector array functions server­sent 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 server­sent events getters and setters local database storage

stuart langridge, 2009 querySelector array functions server­sent 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