1. JavaScript & HTML5
Brave New World

3. “O wonder!
How many goodly creatures are there here! How
beauteous mankind is! O brave new world! That
has such people in't!”
- Shakespeare’s The Tempest

11. JavaScript

18. “Are you telling me that I cant away anymore
without getting deeply into Javascript?”
- Developer

19. “That is a disaster for me! I have made a career
out of actively avoiding Javascript.”
- Developer

20. “If I cant continue to ignore Javascript, then you
may as well amputate one of my limbs.”
- Developer

27. // Variable declaration
var firstName = "Forrest";
// Function declaration
function party () {
return "Stupid is as stupid does";
}

28. // If statement
if (badGrades) {
return "Mom sleeps with teacher";
}
// Switch statement
var age = 10,
lifeState;
switch (age) {
case 10:
lifeState = "Young";
break;
case 60:
lifeState = "Old";
break;
}

29. // Shorthand assignment
function (boxOfChocolates) {
var life = boxOfChocolates || "Snickers bar";
}
// Ternary operators
(looking)? "I gotta find Bubba!" : "It's ok";

31. “Coercion is the practice of forcing another party
to behave in an involuntary manner”
- Wikipedia

32. // Assignment
var happy = true;
// Equality
if (7 == "7") {
// true
}
// Identity
if (7 === "7") {
// false
}

33. // Assignment
rci on
oe
var happy = true;
c
// Equality Ty pe
if (7 == "7") {
// true
}
// Identity
if (7 === "7") {
// false
}

34. // Type coercion
var sum = "5" + 6 + 7; // 567

35. // Prevent type coercion
var sum = parseInt("5", 10) + 6 + 7; // 18

37. // Various "false" values
var nullVal = null;
var undefinedVal = undefined;
var zeroVal = 0;
var falseVal = false;
var emptyString = "";
// All would equal false in an if-clause
if (emptyString) {
// Would never go in here
}

39. // Self-invoking functions
(function () {
var investment = "Lieutenant Dan got me
invested in some kind of fruit company.";
})();

41. // Scope - global or local
// Global
var quote = "I had run for 3 years, 2 months,
14 days, and 16 hours."
function () {
// Local
var pantherParty = "I'm sorry I had to
fight in the middle of your Black Panther
party.";
// Global
question = "And so, you just ran?";
}

42. // Global
function meetingJFK () {
var JFKQuestion = "Congratulations, how do
you feel?";
// Local
function forrestReply () {
return "I gotta pee.";
}
return forrestReply();
}
meetingJFK(); // I gotta pee
forrestReply(); // Error: not accessible

44. // Controlling scope
function whoAmI () {
return this.nodeName;
}
whoAmI(); // undefined
whoAmI.call(document, "Hello"); // #document
whoAmI.apply(document.body, ["Hello", "Greetings?"]); // BODY

46. // Using arguments
function friends (friend1, friend2) {
return friend1 + " & " + friend2;
}
// Lieutenant Dan & Bubba
friends("Lieutenant Dan", "Bubba");
// Lieutenant Dan & undefined
friends("Lieutenant Dan");

47. // Using the arguments collection
function friends () {
var allFriends = [];
for (var i=0, il=arguments.length; i<il; i++) {
allFriends.push(arguments[i]);
};
return allFriends.join(" & ");
}
// Lieutenant Dan & Bubba
friends("Lieutenant Dan", "Bubba");
// Lieutenant Dan
friends("Lieutenant Dan");

49. // Extending core JavaScript objects
if (typeof Array.prototype.push === "undefined") {
Array.prototype.push = function () {
for (var i=0, il=arguments.length; i<il; i++) {
this[this.length] = arguments[i];
};
return this;
}
}
var locations = ["Vietnam"];
locations.push("China", "White House");
// locations = ["Vietnam", "China", "White House"];

51. // closures
function happens (what) {
return function (verb) {
return what + " " + verb;
}
}
var action = happens("Shit");
action("happens"); // Shit happens

53. // closures
function happens (what) {
return function (verb) {
return what + " " + verb;
}
}
var action = happens("Shit");
// Breaking it down
var action = function (verb) {
return "Shit" + " " + verb;
};

54. // closures
function happens (what) {
return function (verb) {
return what + " " + verb;
}
}
var action = happens("Shit");
// Breaking it down
var action = function (verb) {
return "Shit" + " " + verb;
};

55. var link;
for (var i=0; i<3; i++) {
link = document.createElement("a");
link.innerHTML = "Link " + i;
link.onclick = function () {
alert("I am link " + i);
};
document.body.appendChild(link);
};

56. var link;
for (var i=0; i<3; i++) {
link = document.createElement("a");
link.innerHTML = "Link " + i;
link.onclick = function (index) {
return function () {
alert("I am link " + index);
};
}(i);
document.body.appendChild(link);
};

57. What is HTML5?

61. Video

62. <video src="swedish-flag.ogv"></video>

63. <video src="swedish-flag.ogv" controls
width="320" height="240">
</video>

64. <video controls>
<source src="swedish-flag.mp4">
<source src="swedish-flag.ogv">
<p>
Sorry, your web browser doesn't
support the video element.
</p>
</video>

66. <video controls>
<source src="http://robertnyman.com/video/swedish-flag.mp4">
<source src="http://robertnyman.com/video/swedish-flag.ogv">
<object width="425" height="340" type="application/x-shockwave-flash"
data="http://pics.robertnyman.com/ria/ShizVidz-2010012201.swf">
<param name="movie" value="http://pics.robertnyman.com/ria/
ShizVidz-2010012201.swf">
<param name="allowFullScreen" value="true">
<param name="flashVars"
value="s=ZT0xJmk9MzE5NjcyNDUwJms9UUVOdUomYT01MjU0ODc5X21uWFdIJnU9cm9iZXJ0b
nltYW4=">
</object>
<p>Sorry, your web browser doesn't support, well, anything...</p>
</video>

67. var video = document.getElementById("my-video");
// Play/pause button
if (video.paused || video.ended) {
video.play();
}
else {
video.pause();
}

68. // Methods
video.canPlayType();
video.load();
video.pause();
video.play();

69. // Properties
video.paused;
video.muted;
video.autobuffer;
video.autoplay;
video.buffered; (Unimplemented)
video.bufferedBytes; (Unimplemented)
video.bufferingRate; (Unimplemented)
video.bufferingThrottled; (Unimplemented)
video.controls;
video.currentSrc;
video.currentTime;
video.defaultPlaybackRate;
video.duration;
video.ended;
video.error;
video.muted;
video.networkState;
video.paused;
video.playbackRate;
video.readyState;
video.seeking;
video.src;
video.totalBytes;
video.volume;

70. // Events
video.abort;
video.canplay;
video.canplaythrough;
video.canshowcurrentframe;
video.dataunavailable;
video.durationchange;
video.emptied;
video.empty;
video.ended;
video.error;
video.loadedfirstframe;
video.loadedmetadata;
video.loadstart;
video.pause;
video.play;
video.progress; (lengthComputable, loaded, total)
video.ratechange;
video.seeked;
video.seeking;
video.suspend;
video.timeupdate;
video.volumechange;

75. // Checking codec support
if (video.canPlayType('video/ogg; codecs="theora, vorbis"')) {
video.play();
}
else {
alert("Evil browser with only licensed codec support!");
}

76. Canvas

77. <canvas id="my-canvas" width="200" height="200">
I am canvas
</canvas>

78. var canvas = document.getElementById("my-canvas"),
context = canvas.getContext("2d");

79. var canvas = document.getElementById("my-canvas"),
context = canvas.getContext("2d");
context.fillStyle = "#ffffa2";
context.fillRect(0, 0, 100, 100);

81. var canvas = document.getElementById("my-canvas"),
context = canvas.getContext("2d");
context.fillStyle = "#ffffa2";
// Adding shadows and tilt
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 100;
context.shadowColor = "#000000";
context.rotate(0.05);
context.fillRect(10, 10, 100, 100);

83. var canvas = document.getElementById("my-canvas"),
context = canvas.getContext("2d");
// Adding shadows and tilt
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 100;
context.shadowColor = "#000000";
context.rotate(0.05);
// Adding a little gradient
var gradient = context.createRadialGradient(90, 63, 10, 90,
63, 50);
gradient.addColorStop(0, "#ff0000");
gradient.addColorStop(1, "#000000");
context.fillStyle = gradient;
context.fillRect(10, 10, 100, 100);

85. HTML5 Canvas for Internet Explorer
-
explorercanvas

86. Geolocation

87. if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
alert(position.coords.latitude + ", " + position.coords.longitude);
});
}

90. Web Storage

93. // sessionStorage
sessionStorage["name"] = "Robert";
alert(sessionStorage["name"]); // Robert

94. // localStorage
localStorage.setItem("origin", "Sweden");
alert(localStorage.origin); // Sweden

95. // Using JSON
var info = {
"language" : "Bulgarian",
"location" : "Veliko Tarnovo"
};
// Save as string
localStorage.setItem("info", JSON.stringify(info));
// Load as JSON object
alert(JSON.parse(localStorage.info));

96. postMessage

97. // Use postMessage on a window to send a message
var iframeWin = document.getElementById("da-iframe").contentWindow;
iframeWin.postMessage("Love you!", "http://robertnyman.com");

98. // Handle message
function displayMessage (evt) {
var message;
if (evt.origin !== "http://robertnyman.com") {
message = "You are not worthy";
}
else {
message = "I got " + evt.data + " from " + evt.origin;
}
document.getElementById("received-message").innerHTML = message;
}
// Using onmessage to receive message
if (window.addEventListener) {
// For standards-compliant web browsers
window.addEventListener("message", displayMessage, false);
}
else {
window.attachEvent("onmessage", displayMessage);
}

99. Web Workers

100. var worker = new Worker("worker.js");

101. // Main page code
var worker = new Worker("worker.js");
// postMessage
worker.postMessage(5);
// Receive message back from Worker
worker.onmessage = function (evt) {
document.getElementById("worker-results").innerHTML = evt.data;
};
// Error handling
worker.onerror = function (evt) {
document.getElementById("worker-results").innerHTML = "An error
occurred";
};

102. // Web Worker code
onmessage = function (evt) {
for (var i=evt.data, il=1000001; i<il; i++) {
postMessage(i);
};
};

103. Offline Web Applications

104. if (window.addEventListener) {
/*
Works well in Firefox and Opera with the
Work Offline option in the File menu.
Pulling the ethernet cable doesn't seem to trigger it
*/
window.addEventListener("online", isOnline, false);
window.addEventListener("offline", isOffline, false);
}
else {
/*
Works in IE with the Work Offline option in the
File menu and pulling the ethernet cable
*/
document.body.ononline = isOnline;
document.body.onoffline = isOffline;
}

105. // Poll the navigator.onLine property
setInterval(function () {
console.log(navigator.onLine);
}, 1000);

106. <!DOCTYPE html>
<html manifest="offline.manifest">
<head>
...

107. CACHE MANIFEST
# VERSION 10
CACHE:
offline.html
base.css
FALLBACK:
online.css offline.css
NETWORK:
/live-updates

108. File API
Drag & drop
History
contentEditable

116. Robert Nyman
http://robertnyman.com/speaking/
http://robertnyman.com/html5/
Twitter: @robertnyman
Pictures:
Volcano: http://www.boston.com/bigpicture/2010/04/more_from_eyjafjallajokull.html Overloading: http://theshadowhive.blogspot.com/2010/04/mutating-chaos-gene.html
Laptop smurf: http://www.schleich-s.de/cms_schleich/cms_bilder/detail/40263.jpg Closure movie: http://www.monstersandcritics.com/dvd/news/article_1332892.php/
Computer smurf: http://www.schleich-s.com/en/wishlist/index.html?PHPSESSID=cwjpavod Golden_Globe_winner_Gillian_Anderson_stars_in_Closure
Swedish flag: http://www.olssonfoto.se/JAlbum/SGP%202008%20Ullevi/slides/Svenska%20flaggan.html Steve Ballmer: http://www.businessinsider.com/microsoft-completely-rebooted-its-mobile-strategy-yesterday-heres-
Euro Coin: http://accidentaldong.blogspot.com/2009/10/euro-uh-oh.html what-you-missed-2010-2
Smurfette in car: http://www.schleich-s.com/cms_schleich/cms_bilder/detail/40265.jpg What is HTML5: http://www.thedvshow.com/mini-guide-html-5-for-video-producers/
Baby smurf one: http://images.esellerpro.com/13/I/106/33/baby%20A.jpg Semantics: http://www.cs.cmu.edu/~tom7/csnotes/fall02/semantics.gif
Baby smurf two: http://www.arbgames.com.au/images/T/Smurf%20Baby%20With%20Teddy.jpg APIs: http://lonewolflibrarian.wordpress.com/2009/09/01/library-apis-09-01-09/
Most popular language: http://odetocode.com/Blogs/scott/archive/2009/03/18/signs-that-your-javascript-skills- Progressive enhancement: http://www.flickr.com/photos/cole007/4187641210/
need-updating.aspx Video: http://www.roirevolution.com/blog/2009/05/make_sure_your_excluded_placements_are_actually_be.html
Sunrise: http://www.manywallpapers.com/space-wallpapers/earth/sunrise-from-space.html Waiting in line: http://www.roirevolution.com/blog/2009/05/
Astronaut: http://martianchronicles.wordpress.com/2009/01/23/carnival-of-space-87/ make_sure_your_excluded_placements_are_actually_be.html
Netscape 2: http://blog.explorelearning.com/2005/12/index.html Canvas: http://www.brianbatson.com/ablankcanvas/giftlist.html
Internet Explorer 3: http://www.guidebookgallery.org/screenshots/browser Geolocation: http://www.datadial.net/blog/index.php/2008/09/22/the-definitive-guide-to-website-geo-location/
Gandalf: http://web.mit.edu/kayla/Public/Backgrounds/LOTR%20Gandalf%204.JPG Storage fail: http://failblog.org/2009/02/09/storage-box-fail/
Now: http://www.geekologie.com/2007/07/15-week/ Cookie monster: http://open.salon.com/blog/shiral/2009/03/25/
Axe: http://bestgamewallpapers.com/a3-the-age-of-sovereign/axe the_coveted_shiral_interview_with_kermit_and_cookie_monster
Time: http://www.mindhacks.com/blog/seeing/index.html Boy giving the finger: http://www.deangoodman.com/ThingsThatSuck.html
Money: http://www.mediabistro.com/unbeige/ideas/ Postman (Costner): http://nationallampoon.com/articles/the-list-top-20-movies-about-the-end-of-the-world
Happy Ape: http://thesituationist.wordpress.com/2007/06/14/ Web Workers: http://miscellanea.wellingtongrey.net/2007/06/03/this-modern-life/
High speed train: http://www.freefoto.com/preview/23-22-1?ffid=23-22-1 Dude offline: http://blogs.phoenixnewtimes.com/uponsun/2008/06/you_asked_for_it_dude_offline.php
Sunspider results: http://blogs.msdn.com/ie/archive/2010/03/18/the-new-javascript-engine-in-internet- Cute dog: http://www.emmitsburg.net/humor/daily_additions/2007/mar/30.htm
explorer-9.aspx Firefox: http://www.flickr.com/photos/tedion/3966234643/
Forrest Gump: http://wallpaper-s.org/36__Forrest_Gump,_1994,_Tom_Hanks,_Robin_Wright_Penn.htm Google Chrome: http://www.flickr.com/photos/tedion/3966233919/
Hillary Clinton & Soldier: http://confederateyankee.mu.nu/archives/154032.php Safari: http://www.rapidshareindex.com/Apple-Safari-v4-0-3-Portable_284132.html
Dog (Cat): http://www.cartoonstock.com/directory/f/false_identity.asp Opera: http://www.geek.com/wp-content/uploads/2009/11/Opera_512x512.png
Play with yourself: http://www.justwhatshesaid.com/?p=965 Bill Gates: http://punditkitchen.com/2009/04/14/political-pictures-bill-gates-failure-windows/
Tiger Woods: http://blogs.bigadda.com/pal4868546/2010/01/ Winning IE: http://cybernetnews.com/april-browser-stats-safari-triples-its-windows-market-share/
Dirty water: http://www.freefoto.com/preview/13-08-52?ffid=13-08-52 Internet Explorer 9: http://www.redmondpie.com/internet-explorer-9-to-be-announced-at-pdc-9140118/
Extensible table: http://www.amishshowroom.com/index.php?main_page=index&cPath=40_64 Mila & Macaulay: http://uk.eonline.com/uberblog/b61889_mila_macaulay_home_alone.html
Hearts: http://www.funonthenet.in/content/view/395/31/