JavaScript and HTML5 - Brave New World (revised)
5 likes15,591 views
Gives an introduction to the most important features in JavaScript and then goes through some of the most interesting HTML5 APIs.
![// Object literal
var forrest = {
firstName : "Forrest"
};
// Array literal
var forrestFriends = ["Bubba", "Lieutenant Dan"];](https://image.slidesharecdn.com/javascript-and-html5-poland-101020182752-phpapp02/85/JavaScript-and-HTML5-Brave-New-World-revised-28-320.jpg)
![// 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");](https://image.slidesharecdn.com/javascript-and-html5-poland-101020182752-phpapp02/85/JavaScript-and-HTML5-Brave-New-World-revised-42-320.jpg)
![// Controlling scope
function whoAmI () {
return this.nodeName;
}
whoAmI(); // undefined
whoAmI.call(document, "Hello"); // #document
whoAmI.apply(document.body, ["Hello", "Greetings?"]); // BODY](https://image.slidesharecdn.com/javascript-and-html5-poland-101020182752-phpapp02/85/JavaScript-and-HTML5-Brave-New-World-revised-46-320.jpg)
Ad
More Related Content
What's hot (20)
Viewers also liked (20)
Ad
Similar to JavaScript and HTML5 - Brave New World (revised) (20)
Ad
More from Robert Nyman (20)
Recently uploaded (20)
JavaScript and HTML5 - Brave New World (revised)
- 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
- 10. JavaScript
- 17. “Are you telling me that I can’t get away anymore without getting deeply into Javascript?” - Developer
- 18. “That is a disaster for me! I have made a career out of actively avoiding Javascript.” - Developer
- 19. “If I cant continue to ignore Javascript, then you may as well amputate one of my limbs.” - Developer
- 26. // Variable declaration var firstName = "Forrest"; // Function declaration function party () { return "Stupid is as stupid does"; }
- 27. // 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; }
- 28. // Object literal var forrest = { firstName : "Forrest" }; // Array literal var forrestFriends = ["Bubba", "Lieutenant Dan"];
- 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. // Using arguments function friends (friend1, friend2) { return friend1 + " & " + friend2; } // Lieutenant Dan & Bubba friends("Lieutenant Dan", "Bubba"); // Lieutenant Dan & undefined friends("Lieutenant Dan");
- 42. // 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");
- 44. // 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?"; }
- 45. // 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
- 46. // Controlling scope function whoAmI () { return this.nodeName; } whoAmI(); // undefined whoAmI.call(document, "Hello"); // #document whoAmI.apply(document.body, ["Hello", "Greetings?"]); // BODY
- 49. // closures function happens (what) { return function (verb) { return what + " " + verb; } } var action = happens("Shit"); action("happens"); // Shit happens
- 51. // closures function happens (what) { return function (verb) { return what + " " + verb; } } var action = happens("Shit"); // Breaking it down var action = function (verb) { return "Shit" + " " + verb; };
- 52. // closures function happens (what) { return function (verb) { return what + " " + verb; } } var action = happens("Shit"); // Breaking it down var action = function (verb) { return "Shit" + " " + verb; };
- 53. 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); };
- 54. 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); };
- 55. 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); };
- 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. 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); };
- 58. What is HTML5?
- 62. 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. // Checking codec support if (video.canPlayType('video/ogg; codecs="theora, vorbis"')) { video.play(); } else { alert("Evil browser with only licensed codec support!"); }
- 70. // 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;
- 71. // 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;
- 73. canvas
- 74. <canvas id="my-canvas" width="200" height="200"> I am canvas </canvas>
- 75. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d");
- 76. var canvas2 = document.getElementById("my-canvas-2"), context2 = canvas2.getContext("2d"); context2.fillStyle = "#0f0"; context2.beginPath(); context2.moveTo(100, 0); context2.lineTo(0, 100); context2.lineTo(200, 100); context2.fill();
- 78. var canvas5 = document.getElementById("my-canvas-5"), context5 = canvas5.getContext("2d"), img = document.createElement("img"); img.addEventListener("load", function () { context5.drawImage(img, 0, 0, 600, 200); // Get canvas content as a base64 image var base64Img = canvas5.toDataURL("image/png"); }, false); img.setAttribute("src", "view.jpg");
- 80. HTML5 Canvas for Internet Explorer <= 8 - explorercanvas
- 82. http://craftymind.com/factory/html5video/ CanvasVideo.html
- 84. Web Storage
- 87. // sessionStorage sessionStorage.setItem("name") = "Robert"; alert(sessionStorage.getItem("name")); // Robert
- 88. // localStorage localStorage.setItem("origin", "Sweden"); alert(localStorage.getItem("origin")); // Sweden
- 89. // Using JSON var info = { "language" : "Polish", "location" : "Warsaw" }; // Save as string localStorage.setItem("info", JSON.stringify(info)); // Load as JSON object alert(JSON.parse(localStorage.info));
- 91. File API
- 92. <!-- The multiple attribute allows for uploading of multiple files --> <input id="files-upload" type="file" multiple>
- 93. var filesUpload = document.getElementById("files-upload"); filesUpload.onchange = function () { // Access to data about all files var files = this.files; for (var i=0, il=files.length; i<il; i++) { file.name; // Get the name of the file file.size; // Get the size of the file, in bytes file.type; // Get the type of the file }; };
- 95. // Supported in Firefox and Google Chrome if (typeof FileReader !== "undefined") { var img = document.createElement("img"), reader = new FileReader(); reader.onload = function (evt) { img.src = evt.target.result; }; reader.readAsDataURL(file); }
- 96. History API
- 97. var url = "http://robertnyman.com", title = "My blog", state = { address : url }; window.history.pushState(state.address, title, url);
- 99. Web Sockets
- 103. var ws = new WebSocket("ws://robertnyman.com/wsmagic"); // Send data ws.send("Some data"); // Close the connection ws.close();
- 104. var ws = new WebSocket("ws://robertnyman.com/wsmagic"); // When connection is opened ws.onopen = function () { console.log("Connection opened!") }; // When you receive a message ws.onmessage = function (evt) { console.log(evt.data); }; // When you close the connection ws.onclose = function () { console.log("Connection closed"); }; // When an error occurred ws.onerror = function () { console.log("An error occurred") };
- 106. Offline Web Applications Web Workers Geolocation Drag & drop postMessage contentEditable
- 107. Web browser support
- 114. Robert Nyman http://robertnyman.com/speaking/ http://robertnyman.com/html5/ Twitter: @robertnyman Pictures: Ninja Turtle: http://www.originalprop.com/blog/2008/03/20/teenage-mutant-ninja-turtles-costume-restoration/ What is HTML5: http://www.thedvshow.com/mini-guide-html-5-for-video-producers/ Bruce Willis: http://www.starsjournal.com/3192/bruce-willis-is-being-sued-for-4-million-dollars.html Semantics: http://www.cs.cmu.edu/~tom7/csnotes/fall02/semantics.gif Love 2010: http://www.stockholm.se/-/nyheter/kultur--fritid/love-2010/ APIs: http://lonewolflibrarian.wordpress.com/2009/09/01/library-apis-09-01-09/ Euro Coin: http://accidentaldong.blogspot.com/2009/10/euro-uh-oh.html 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.html Most popular language: http://odetocode.com/Blogs/scott/archive/2009/03/18/signs-that-your-javascript-skills- Waiting in line: http://www.roirevolution.com/blog/2009/05/ need-updating.aspx make_sure_your_excluded_placements_are_actually_be.html Sunrise: http://www.manywallpapers.com/space-wallpapers/earth/sunrise-from-space.html Canvas: http://www.brianbatson.com/ablankcanvas/giftlist.html Astronaut: http://martianchronicles.wordpress.com/2009/01/23/carnival-of-space-87/ Storage fail: http://failfun.com/funny-pictures/gangsta-fail/ Netscape 2: http://blog.explorelearning.com/2005/12/index.html Cookie monster: http://open.salon.com/blog/shiral/2009/03/25/ Internet Explorer 3: http://www.guidebookgallery.org/screenshots/browser the_coveted_shiral_interview_with_kermit_and_cookie_monster Gandalf: http://web.mit.edu/kayla/Public/Backgrounds/LOTR%20Gandalf%204.JPG Boy giving the finger: http://www.deangoodman.com/ThingsThatSuck.html Now: http://www.geekologie.com/2007/07/15-week/ Axe: http://bestgamewallpapers.com/a3-the-age-of-sovereign/axe Files: http://www.hannonhill.com/products/index.html Time: http://www.mindhacks.com/blog/seeing/index.html History: http://animatedtv.about.com/od/fgmultimedia/ig/-Family-Guy--Pictures/Griffin-Family-History.htm Money: http://www.mediabistro.com/unbeige/ideas/ Sockets: http://www.gigaweb.com/products/view/31681/plug-socket-adult-costume.html Happy Ape: http://thesituationist.wordpress.com/2007/06/14/ AJAX: http://www.aqlanza.com/technologies01.html High speed train: http://www.freefoto.com/preview/23-22-1?ffid=23-22-1 Comet: http://www.blogiversity.org/blogs/cstanton/archive/2009/12/16/revealing-hidden-comet-strikes.aspx Sunspider results: http://ie.microsoft.com/testdrive/benchmarks/sunspider/default.html Flash: http://www.zerofractal.com/assets/error-flash.jpg Forrest Gump: http://wallpaper-s.org/36__Forrest_Gump,_1994,_Tom_Hanks,_Robin_Wright_Penn.htm Hillary Clinton & Soldier: http://confederateyankee.mu.nu/archives/154032.php Web browsers: http://www.zamaanonline.com/category/funny-amazing-stuff/geek-fun Dog (Cat): http://www.cartoonstock.com/directory/f/false_identity.asp Fallen beaver: http://failsalon.com/?p=183 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/ Pollution: http://blog.lib.umn.edu/cramb005/architecture/ Internet Explorer 9: http://www.redmondpie.com/internet-explorer-9-to-be-announced-at-pdc-9140118/ Beaver win: http://thefourcornersclassroom.wikispaces.com/Group+30+-+Pre-Project Overloading: http://theshadowhive.blogspot.com/2010/04/mutating-chaos-gene.html Closure: http://today.msnbc.msn.com/id/4760120 Mila & Macaulay: http://uk.eonline.com/uberblog/b61889_mila_macaulay_home_alone.html Steve Ballmer: http://www.businessinsider.com/microsoft-completely-rebooted-its-mobile-strategy-yesterday- Hearts: http://www.funonthenet.in/content/view/395/31/ heres-what-you-missed-2010-2