Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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'...
JavaScript
“Are you telling me that I cant away anymore
without getting deeply into Javascript?”

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

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

                               ...
// Variable declaration
var firstName = "Forrest";

// Function declaration
function party () {
    return "Stupid is as s...
// If statement
if (badGrades) {
    return "Mom sleeps with teacher";
}

// Switch statement
var age = 10,
    lifeState;...
// Shorthand assignment
function (boxOfChocolates) {
    var life = boxOfChocolates || "Snickers bar";
}

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

                                  ...
// Assignment
var happy = true;

// Equality
if (7 == "7") {
    // true
}

// Identity
if (7 === "7") {
    // false
}
// Assignment
                               rci on
                             oe
var happy = true;
                    ...
// 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 emp...
// Self-invoking functions
(function () {
    var investment = "Lieutenant Dan got me
invested in some kind of fruit compa...
// Scope - global or local

// Global
var quote = "I had run for 3 years, 2 months,
14 days, and 16 hours."

function () {...
// Global
function meetingJFK () {
    var JFKQuestion = "Congratulations, how do
you feel?";

    // Local
    function f...
// Controlling scope
function whoAmI () {
    return this.nodeName;
}

whoAmI(); // undefined
whoAmI.call(document, "Hello...
// Using arguments
function friends (friend1, friend2) {
    return friend1 + " & " + friend2;
}

// Lieutenant Dan & Bubb...
// Using the arguments collection
function friends () {
    var allFriends = [];
    for (var i=0, il=arguments.length; i<...
// Extending core JavaScript objects
if (typeof Array.prototype.push === "undefined") {
    Array.prototype.push = functio...
// closures
function happens (what) {
    return function (verb) {
        return what + " " + verb;
    }
}

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

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

var action =...
var link;
for (var i=0; i<3; i++) {
    link = document.createElement("a");
    link.innerHTML = "Link " + i;
    link.onc...
var link;
for (var i=0; i<3; i++) {
    link = document.createElement("a");
    link.innerHTML = "Link " + i;
    link.onc...
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 doe...
<video controls>
    <source src="http://robertnyman.com/video/swedish-flag.mp4">
    <source src="http://robertnyman.com/...
var video = document.getElementById("my-video");

 // Play/pause button
 if (video.paused || video.ended) {
     video.pla...
// Methods
video.canPlayType();
video.load();
video.pause();
video.play();
// Properties
video.paused;
video.muted;
video.autobuffer;
video.autoplay;
video.buffered; (Unimplemented)
video.bufferedB...
// Events
video.abort;
video.canplay;
video.canplaythrough;
video.canshowcurrentframe;
video.dataunavailable;
video.durati...
// Checking codec support
if (video.canPlayType('video/ogg; codecs="theora, vorbis"')) {
    video.play();
}
else {
    al...
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";
...
var canvas = document.getElementById("my-canvas"),
    context = canvas.getContext("2d");

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

// Adding shadows and tilt
cont...
HTML5 Canvas for Internet Explorer
                -
          explorercanvas
Geolocation
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (position) {
        alert(position.coo...
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
localStor...
postMessage
// Use postMessage on a window to send a message
var iframeWin = document.getElementById("da-iframe").contentWindow;
ifram...
// Handle message
function displayMessage (evt) {
    var message;
    if (evt.origin !== "http://robertnyman.com") {
    ...
Web Workers
var worker = new Worker("worker.js");
// Main page code
    var worker = new Worker("worker.js");

    // postMessage
    worker.postMessage(5);

    // Receive...
// 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 ...
// 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/
              ...
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
Upcoming SlideShare
Loading in …5
×

JavaScript & HTML5 - Brave New World

22,107 views

Published on

A presentation about JavaScript basics and new exciting HTML5 APIs

Published in: Technology
  • Follow the link, new dating source: ❤❤❤ http://bit.ly/2F7hN3u ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❤❤❤ http://bit.ly/2F7hN3u ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @focalisations Thanks for sharing your experience
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

JavaScript & HTML5 - Brave New World

  1. JavaScript & HTML5 Brave New World
  2. “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
  3. JavaScript
  4. “Are you telling me that I cant away anymore without getting deeply into Javascript?” - Developer
  5. “That is a disaster for me! I have made a career out of actively avoiding Javascript.” - Developer
  6. “If I cant continue to ignore Javascript, then you may as well amputate one of my limbs.” - Developer
  7. // Variable declaration var firstName = "Forrest"; // Function declaration function party () { return "Stupid is as stupid does"; }
  8. // 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; }
  9. // Shorthand assignment function (boxOfChocolates) { var life = boxOfChocolates || "Snickers bar"; } // Ternary operators (looking)? "I gotta find Bubba!" : "It's ok";
  10. “Coercion is the practice of forcing another party to behave in an involuntary manner” - Wikipedia
  11. // Assignment var happy = true; // Equality if (7 == "7") { // true } // Identity if (7 === "7") { // false }
  12. // Assignment rci on oe var happy = true; c // Equality Ty pe if (7 == "7") { // true } // Identity if (7 === "7") { // false }
  13. // Type coercion var sum = "5" + 6 + 7; // 567
  14. // Prevent type coercion var sum = parseInt("5", 10) + 6 + 7; // 18
  15. // 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 }
  16. // Self-invoking functions (function () { var investment = "Lieutenant Dan got me invested in some kind of fruit company."; })();
  17. // 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?"; }
  18. // 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
  19. // Controlling scope function whoAmI () { return this.nodeName; } whoAmI(); // undefined whoAmI.call(document, "Hello"); // #document whoAmI.apply(document.body, ["Hello", "Greetings?"]); // BODY
  20. // Using arguments function friends (friend1, friend2) { return friend1 + " & " + friend2; } // Lieutenant Dan & Bubba friends("Lieutenant Dan", "Bubba"); // Lieutenant Dan & undefined friends("Lieutenant Dan");
  21. // 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");
  22. // 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"];
  23. // closures function happens (what) { return function (verb) { return what + " " + verb; } } var action = happens("Shit"); action("happens"); // Shit happens
  24. // closures function happens (what) { return function (verb) { return what + " " + verb; } } var action = happens("Shit"); // Breaking it down var action = function (verb) { return "Shit" + " " + verb; };
  25. // closures function happens (what) { return function (verb) { return what + " " + verb; } } var action = happens("Shit"); // Breaking it down var action = function (verb) { return "Shit" + " " + verb; };
  26. 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); };
  27. 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); };
  28. What is HTML5?
  29. Video
  30. <video src="swedish-flag.ogv"></video>
  31. <video src="swedish-flag.ogv" controls width="320" height="240"> </video>
  32. <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>
  33. <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>
  34. var video = document.getElementById("my-video"); // Play/pause button if (video.paused || video.ended) { video.play(); } else { video.pause(); }
  35. // Methods video.canPlayType(); video.load(); video.pause(); video.play();
  36. // 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;
  37. // 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;
  38. // Checking codec support if (video.canPlayType('video/ogg; codecs="theora, vorbis"')) { video.play(); } else { alert("Evil browser with only licensed codec support!"); }
  39. Canvas
  40. <canvas id="my-canvas" width="200" height="200"> I am canvas </canvas>
  41. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d");
  42. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d"); context.fillStyle = "#ffffa2"; context.fillRect(0, 0, 100, 100);
  43. 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);
  44. 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);
  45. HTML5 Canvas for Internet Explorer - explorercanvas
  46. Geolocation
  47. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { alert(position.coords.latitude + ", " + position.coords.longitude); }); }
  48. Web Storage
  49. // sessionStorage sessionStorage["name"] = "Robert"; alert(sessionStorage["name"]); // Robert
  50. // localStorage localStorage.setItem("origin", "Sweden"); alert(localStorage.origin); // Sweden
  51. // 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));
  52. postMessage
  53. // Use postMessage on a window to send a message var iframeWin = document.getElementById("da-iframe").contentWindow; iframeWin.postMessage("Love you!", "http://robertnyman.com");
  54. // 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); }
  55. Web Workers
  56. var worker = new Worker("worker.js");
  57. // 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"; };
  58. // Web Worker code onmessage = function (evt) { for (var i=evt.data, il=1000001; i<il; i++) { postMessage(i); }; };
  59. Offline Web Applications
  60. 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; }
  61. // Poll the navigator.onLine property setInterval(function () { console.log(navigator.onLine); }, 1000);
  62. <!DOCTYPE html> <html manifest="offline.manifest"> <head> ...
  63. CACHE MANIFEST # VERSION 10 CACHE: offline.html base.css FALLBACK: online.css offline.css NETWORK: /live-updates
  64. File API Drag & drop History contentEditable
  65. 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/

×