Advanced JavaScript Stuff

A presentation at Multipack Presents: Emerging Standards in February 2009 in Birmingham, UK by Stuart Langridge

Slide 1

Slide 1

stuart langridge, 2009 new whizzy javascript stuff stuart langridge http://www.kryogenix.org/ @sil

Slide 2

Slide 2

stuart langridge, 2009 aka  the glorious new future

Slide 3

Slide 3

stuart langridge, 2009 aka  one day my son all this will be yours

Slide 4

Slide 4

stuart langridge, 2009 ecmascript 4

Slide 5

Slide 5

stuart langridge, 2009 ecmascript 4

Slide 6

Slide 6

stuart langridge, 2009

Slide 7

Slide 7

stuart langridge, 2009 real things

Slide 8

Slide 8

stuart langridge, 2009 querySelector querySelectorAll getters se tters Array functions DOM local storage local DB storage getComputedStyle getElementsByClassName <event-source>

Slide 9

Slide 9

stuart langridge, 2009 getElementsByClassName var elements = document.getElementsByClassName(“class”); just like getElementsByTagName

Slide 10

Slide 10

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

Slide 11

Slide 11

stuart langridge, 2009 Functional programming

Slide 12

Slide 12

stuart langridge, 2009 Functional programming not that scary...

Slide 13

Slide 13

stuart langridge, 2009 Array functions [“a”,”b”,”c”].forEach(function(val, idx, arr) {

item (idx) in array (arr) is (val) });

Slide 14

Slide 14

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”

Slide 15

Slide 15

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]

Slide 16

Slide 16

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”

Slide 17

Slide 17

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

Slide 18

Slide 18

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

Slide 19

Slide 19

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

Slide 20

Slide 20

stuart langridge, 2009 getComputedStyle var css = document. defaultView . getComputed Style(el, null ); var height = css. getPropertyValue ("height"); just not necessary

Slide 21

Slide 21

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!

Slide 22

Slide 22

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

Slide 23

Slide 23

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;

} };

Slide 24

Slide 24

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

Slide 25

Slide 25

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)

Slide 26

Slide 26

stuart langridge, 2009 no, you can’t have a consistent database API

Slide 27

Slide 27

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); }

Slide 28

Slide 28

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

Slide 29

Slide 29

stuart langridge, 2009 I know what you’re thinking... where can I get these fine new  items?

Slide 30

Slide 30

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

Slide 31

Slide 31

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

Slide 32

Slide 32

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

Slide 33

Slide 33

stuart langridge, 2009 querySelector array functions server­sent events getters and setters DOM local storage getComputedStyle local database storage getElementsByClassName EPIC FAIL

Slide 34

Slide 34

stuart langridge, 2009 but, but, but... IE8!

Slide 35

Slide 35

stuart langridge, 2009 querySelector server­sent events getters and setters local database storage

Slide 36

Slide 36

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

Slide 37

Slide 37

stuart langridge, 2009 single browser  environment

Slide 38

Slide 38

stuart langridge, 2009 progressive enhancement

Slide 39

Slide 39

stuart langridge, 2009 get the skills

Slide 40

Slide 40

stuart langridge, 2009

Slide 41

Slide 41

stuart langridge, 2009 party like it’s 2009

Slide 42

Slide 42

stuart langridge, 2009 fin. http://tinyurl.com/whizzy thanks to Conrad Barski