JavaScript & HTML5Brave New World

“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

JavaScript

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

- Developer

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

- Developer

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

- Developer

// Variable declarationvar firstName = "Forrest";

// Function declarationfunction party () { return "Stupid is as stupid does";}

// If statementif (badGrades) { return "Mom sleeps with teacher";}

// Switch statementvar age = 10, lifeState;switch (age) { case 10: lifeState = "Young"; break; case 60: lifeState = "Old"; break; }

// Shorthand assignmentfunction (boxOfChocolates) { var life = boxOfChocolates || "Snickers bar";}

// Ternary operators(looking)? "I gotta find Bubba!" : "It's ok";

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

- Wikipedia

// Assignmentvar happy = true;

// Equalityif (7 == "7") { // true}

// Identityif (7 === "7") { // false}

// Assignmentvar happy = true;

// Equalityif (7 == "7") { // true}

// Identityif (7 === "7") { // false}

Type coercio

n

// Type coercionvar sum = "5" + 6 + 7; // 567

// Prevent type coercionvar sum = parseInt("5", 10) + 6 + 7; // 18

// Various "false" valuesvar nullVal = null;var undefinedVal = undefined;var zeroVal = 0;var falseVal = false;var emptyString = "";

// All would equal false in an if-clauseif (emptyString) { // Would never go in here}

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

// Scope - global or local

// Globalvar 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?";}

// Globalfunction meetingJFK () { var JFKQuestion = "Congratulations, how do you feel?"; // Local function forrestReply () { return "I gotta pee."; } return forrestReply();}

meetingJFK(); // I gotta peeforrestReply(); // Error: not accessible

// Controlling scopefunction whoAmI () { return this.nodeName;}

whoAmI(); // undefinedwhoAmI.call(document, "Hello"); // #documentwhoAmI.apply(document.body, ["Hello", "Greetings?"]); // BODY

// Using argumentsfunction friends (friend1, friend2) { return friend1 + " & " + friend2;}

// Lieutenant Dan & Bubbafriends("Lieutenant Dan", "Bubba");

// Lieutenant Dan & undefinedfriends("Lieutenant Dan");

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

// Lieutenant Dan & Bubbafriends("Lieutenant Dan", "Bubba");

// Lieutenant Danfriends("Lieutenant Dan");

// Extending core JavaScript objectsif (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"];

// closuresfunction happens (what) { return function (verb) { return what + " " + verb; }}

var action = happens("Shit");

action("happens"); // Shit happens

// closuresfunction happens (what) { return function (verb) { return what + " " + verb; }}

var action = happens("Shit");

// Breaking it downvar action = function (verb) { return "Shit" + " " + verb;};

// closuresfunction happens (what) { return function (verb) { return what + " " + verb; }}

var action = happens("Shit");

// Breaking it downvar action = function (verb) { return "Shit" + " " + verb;};

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

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

What is HTML5?

Video

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

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

</video>

<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>

<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=ZT0xJmk9MzE5NjcyNDUwJms9UUVOdUomYT01MjU0ODc5X21uWFdIJnU9cm9iZXJ0bnltYW4="> </object> <p>Sorry, your web browser doesn't support, well, anything...</p></video>

var video = document.getElementById("my-video");

// Play/pause button if (video.paused || video.ended) { video.play(); } else { video.pause(); }

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

// 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;

// 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;

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

Canvas

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

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

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

context.fillStyle = "#ffffa2";context.fillRect(0, 0, 100, 100);

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

context.fillStyle = "#ffffa2";

// Adding shadows and tiltcontext.shadowOffsetX = 10;context.shadowOffsetY = 10;context.shadowBlur = 100;context.shadowColor = "#000000";context.rotate(0.05);

context.fillRect(10, 10, 100, 100);

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

// Adding shadows and tiltcontext.shadowOffsetX = 10;context.shadowOffsetY = 10;context.shadowBlur = 100;context.shadowColor = "#000000";context.rotate(0.05);

// Adding a little gradientvar 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);

HTML5 Canvas for Internet Explorer

-

explorercanvas

Geolocation

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

Web Storage

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

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

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

postMessage

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

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

Web Workers

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

// 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"; };

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

Offline Web Applications

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

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

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

CACHE MANIFEST

# VERSION 10

CACHE:offline.htmlbase.css

FALLBACK:online.css offline.css

NETWORK:/live-updates

HistoryDrag & drop

contentEditable

File API

Robert Nymanhttp://robertnyman.com/speaking/http://robertnyman.com/html5/

Twitter: @robertnyman

Pictures:

Volcano: http://www.boston.com/bigpicture/2010/04/more_from_eyjafjallajokull.htmlLaptop smurf: http://www.schleich-s.de/cms_schleich/cms_bilder/detail/40263.jpgComputer smurf: http://www.schleich-s.com/en/wishlist/index.html?PHPSESSID=cwjpavodSwedish flag: http://www.olssonfoto.se/JAlbum/SGP%202008%20Ullevi/slides/Svenska%20flaggan.htmlEuro Coin: http://accidentaldong.blogspot.com/2009/10/euro-uh-oh.htmlSmurfette in car: http://www.schleich-s.com/cms_schleich/cms_bilder/detail/40265.jpgBaby smurf one: http://images.esellerpro.com/13/I/106/33/baby%20A.jpgBaby smurf two: http://www.arbgames.com.au/images/T/Smurf%20Baby%20With%20Teddy.jpgMost popular language: http://odetocode.com/Blogs/scott/archive/2009/03/18/signs-that-your-javascript-skills-need-updating.aspxSunrise: http://www.manywallpapers.com/space-wallpapers/earth/sunrise-from-space.htmlAstronaut: http://martianchronicles.wordpress.com/2009/01/23/carnival-of-space-87/Netscape 2: http://blog.explorelearning.com/2005/12/index.htmlInternet Explorer 3: http://www.guidebookgallery.org/screenshots/browserGandalf: http://web.mit.edu/kayla/Public/Backgrounds/LOTR%20Gandalf%204.JPGNow: http://www.geekologie.com/2007/07/15-week/Axe: http://bestgamewallpapers.com/a3-the-age-of-sovereign/axeTime: http://www.mindhacks.com/blog/seeing/index.htmlMoney: http://www.mediabistro.com/unbeige/ideas/Happy Ape: http://thesituationist.wordpress.com/2007/06/14/High speed train: http://www.freefoto.com/preview/23-22-1?ffid=23-22-1Sunspider results: http://blogs.msdn.com/ie/archive/2010/03/18/the-new-javascript-engine-in-internet-explorer-9.aspxForrest Gump: http://wallpaper-s.org/36__Forrest_Gump,_1994,_Tom_Hanks,_Robin_Wright_Penn.htmHillary Clinton & Soldier: http://confederateyankee.mu.nu/archives/154032.phpDog (Cat): http://www.cartoonstock.com/directory/f/false_identity.aspPlay with yourself: http://www.justwhatshesaid.com/?p=965Tiger Woods: http://blogs.bigadda.com/pal4868546/2010/01/Dirty water: http://www.freefoto.com/preview/13-08-52?ffid=13-08-52Extensible table: http://www.amishshowroom.com/index.php?main_page=index&cPath=40_64

Overloading: http://theshadowhive.blogspot.com/2010/04/mutating-chaos-gene.htmlClosure movie: http://www.monstersandcritics.com/dvd/news/article_1332892.php/Golden_Globe_winner_Gillian_Anderson_stars_in_ClosureSteve Ballmer: http://www.businessinsider.com/microsoft-completely-rebooted-its-mobile-strategy-yesterday-heres-what-you-missed-2010-2What is HTML5: http://www.thedvshow.com/mini-guide-html-5-for-video-producers/Semantics: http://www.cs.cmu.edu/~tom7/csnotes/fall02/semantics.gifAPIs: http://lonewolflibrarian.wordpress.com/2009/09/01/library-apis-09-01-09/Progressive enhancement: http://www.flickr.com/photos/cole007/4187641210/Video: http://www.roirevolution.com/blog/2009/05/make_sure_your_excluded_placements_are_actually_be.htmlWaiting in line: http://www.roirevolution.com/blog/2009/05/make_sure_your_excluded_placements_are_actually_be.htmlCanvas: http://www.brianbatson.com/ablankcanvas/giftlist.htmlGeolocation: http://www.datadial.net/blog/index.php/2008/09/22/the-definitive-guide-to-website-geo-location/Storage fail: http://failblog.org/2009/02/09/storage-box-fail/Cookie monster: http://open.salon.com/blog/shiral/2009/03/25/the_coveted_shiral_interview_with_kermit_and_cookie_monsterBoy giving the finger: http://www.deangoodman.com/ThingsThatSuck.htmlPostman (Costner): http://nationallampoon.com/articles/the-list-top-20-movies-about-the-end-of-the-worldWeb Workers: http://miscellanea.wellingtongrey.net/2007/06/03/this-modern-life/Dude offline: http://blogs.phoenixnewtimes.com/uponsun/2008/06/you_asked_for_it_dude_offline.phpCute dog: http://www.emmitsburg.net/humor/daily_additions/2007/mar/30.htmFirefox: http://www.flickr.com/photos/tedion/3966234643/Google Chrome: http://www.flickr.com/photos/tedion/3966233919/Safari: http://www.rapidshareindex.com/Apple-Safari-v4-0-3-Portable_284132.htmlOpera: http://www.geek.com/wp-content/uploads/2009/11/Opera_512x512.pngBill Gates: http://punditkitchen.com/2009/04/14/political-pictures-bill-gates-failure-windows/Winning IE: http://cybernetnews.com/april-browser-stats-safari-triples-its-windows-market-share/Internet Explorer 9: http://www.redmondpie.com/internet-explorer-9-to-be-announced-at-pdc-9140118/Mila & Macaulay: http://uk.eonline.com/uberblog/b61889_mila_macaulay_home_alone.htmlHearts: http://www.funonthenet.in/content/view/395/31/