JavaScript & HTML5 - Brave New World

JavaScript & HTML5 Brave 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 declaration var firstName = "Forrest"; // Function declaration function party () { return "Stupid is as stupid does"; }

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

// Shorthand assignment function (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

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

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

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

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

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

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

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

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

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

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

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

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

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

// closures function happens (what) { return function (verb) { return what + " " + verb; } } var action = happens("Shit"); // Breaking it down var 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 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=ZT0xJmk9MzE5NjcyNDUwJms9UUVOdUomYT01MjU0ODc5X21uWFdIJnU9cm9iZXJ0b nltYW4="> </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 tilt context.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 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);

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

Ofﬂine 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 property setInterval(function () { console.log(navigator.onLine); }, 1000);

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

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

File API Drag & drop History contentEditable

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/

http://www.slideshare.net	137
http://lanyrd.com	19
http://www.valtech.se	13
http://www.phannarith.com	12
http://www.valtechlabs.se	11
http://onwebdev.blogspot.com	3
http://valtech.se	2
http://eugenioysuproblemaambiental.blogspot.com	2
http://localhost	2
http://www.yaojiazhai.net	1
http://rohitsharma9889.wordpress.com	1

JavaScript & HTML5 - Brave New World

by Robert Nyman on Apr 24, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

11 Embeds 203

Statistics

JavaScript & HTML5 - Brave New World — Presentation Transcript