JavaScript & HTML5 - Brave New World

download JavaScript & HTML5 - Brave New World

If you can't read please download the document

  • date post

    16-Apr-2017
  • Category

    Technology

  • view

    16.885
  • download

    2

Embed Size (px)

Transcript of JavaScript & HTML5 - Brave New World

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

    - Shakespeares The Tempest

    http://en.wikipedia.org/wiki/The_Tempest_(play)http://en.wikipedia.org/wiki/The_Tempest_(play)

  • JavaScript

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

    - Developer

    http://odetocode.com/Blogs/scott/archive/2009/03/18/signs-that-your-javascript-skills-need-updating.aspx%233467http://odetocode.com/Blogs/scott/archive/2009/03/18/signs-that-your-javascript-skills-need-updating.aspx%233467

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

    - Developer

    http://odetocode.com/Blogs/scott/archive/2009/03/18/signs-that-your-javascript-skills-need-updating.aspx%233467http://odetocode.com/Blogs/scott/archive/2009/03/18/signs-that-your-javascript-skills-need-updating.aspx%233467

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

    - Developer

    http://odetocode.com/Blogs/scott/archive/2009/03/18/signs-that-your-javascript-skills-need-updating.aspxhttp://odetocode.com/Blogs/scott/archive/2009/03/18/signs-that-your-javascript-skills-need-updating.aspx

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

    http://en.wikipedia.org/wiki/Coercionhttp://en.wikipedia.org/wiki/Coercion

  • // Assignmentvar happy = true;

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

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

  • // Assignmentvar happy = true;

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

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

    Type co

    ercion

  • // 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
  • // Extending core JavaScript objectsif (typeof Array.prototype.push === "undefined") { Array.prototype.push = function () { for (var i=0, il=arguments.length; i
  • // 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
  • var link;for (var i=0; i
  • What is HTML5?

  • Video

  • Sorry, your web browser doesn't support the video element.

  • Sorry, your web browser doesn't support, well, anything...

    http://pics.robertnyman.com/ria/ShizVidz-2010012201.swfhttp://pics.robertnyman.com/ria/ShizVidz-2010012201.swf

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

  • http://open.bbc.co.uk/rad/demos/html5/rdtv/episode2/index.htmlhttp://open.bbc.co.uk/rad/demos/html5/rdtv/episode2/index.html

  • http://open.bbc.co.uk/rad/demos/html5/rdtv/episode2/index.htmlhttp://open.bbc.co.uk/rad/demos/html5/rdtv/episode2/index.html

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

  • Canvas

  • I am 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

    http://code.google.com/p/explorercanvas/http://code.google.com/p/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");

    http://robertnyman.comhttp://robertnyman.com

  • // Handle message function displayMessage (evt) { var message; if (evt.origin !== "http://robertnyman.com") { message = "You ar