HTML5 JavaScript APIs

  • 27,996 views
Uploaded on

HTML5 is all the rage with the cool kids, and although there's a lot of focus on the new language, there's lots of interesting new JavaScript APIs both in the HTML5 spec and separated out. This …

HTML5 is all the rage with the cool kids, and although there's a lot of focus on the new language, there's lots of interesting new JavaScript APIs both in the HTML5 spec and separated out. This presentation will take you through demos and code behind the new JavaScript APIs, and explore where these features can be used

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
27,996
On Slideshare
0
From Embeds
0
Number of Embeds
22

Actions

Shares
Downloads
1,234
Comments
4
Likes
67

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Is AP L5 HTMHTML5 JavaScript APIs jsconf.eu 2009
  • 2. 2022
  • 3. 2022 = two completely interoperableimplementations
  • 4. CSS 2.1
  • 5. HTML5
  • 6. HTML5Web Forms Offline History APIAudio/Video Drag & Drop UndoCanvas Editable X-Domain Messaging
  • 7. “HTML5”
  • 8. “HTML5”•Web Forms 2.0 •Storage•Audio & Video •Geolocation•Canvas •Workers•Offline
  • 9. “HTML5”•Web Forms 2.0 •Storage•Audio & Video •Geolocation•Canvas •Workers•Offline
  • 10. “HTML5”•Web Forms 2.0 •Storage•Audio & Video •Geolocation•Canvas •Workers•Offline
  • 11. Web Forms 2.0 Actual search for "web forms", wtf? http://tr.im/webforms_pic ➙
  • 12. "JavaScript is only good for image roll overs & form validation"
  • 13. "JavaScript is only good for image roll overs & form validation" :hover
  • 14. "JavaScript is only good for image roll overs & form validation".hasFeature(WebForms, 2.0)
  • 15. "JavaScript is only good for image roll overs & form validation" awesome shit".hasFeature(WebForms, 2.0)
  • 16. var f = document.querySelector(form);f.onsubmit = function () { if ( this.checkValidity() ) { alert("Its all okay"); } else { alert("Somethings gone wrong..."); return false; }};
  • 17. Less JavaScript on donkey work == more JavaScripton awesome work.
  • 18. Native Media Elements
  • 19. <object classid="clsid:d27cdb6e-aheight="344" codebase="http://dowflash/swflash.cab#version=6,0,40,<param name="allowFullScreen" val<param name="allowscriptaccess" v<param name="src" value="http://w<param name="allowfullscreen" val<embed type="application/x-shockwsrc="http://www.youtube.com/v/oHgallowscriptaccess="always" allowf</embed></object>
  • 20. <video src="dizzy.ogv" />
  • 21. <video> <source src="dizzy.ogv" /> <source src="dizzy.mp4" /></video>
  • 22. ?
  • 23. <video> <source src="dizzy.ogv" /> <source src="dizzy.mp4" /></video>
  • 24. <video> <source src="dizzy.ogv" /> <source src="dizzy.mp4" /> <!-- QuickTime support --> <object><param></object></video>
  • 25. <video> <source src="dizzy.ogv" /> <source src="dizzy.mp4" /> <!-- QuickTime support --> <object><param></object> <!-- down to flash --> <object><param></object></video>
  • 26. <video> <source src="dizzy.ogv" /> <source src="dizzy.mp4" /></video>
  • 27. if (video.paused) { if (video.ended) { video.currentTime = 0; } video.play();} else { video.pause();}
  • 28. if (video.paused) { if (video.ended) { video.currentTime = 0; } video.play();} else { video.pause();}
  • 29. if (video.paused) { if (video.ended) { video.currentTime = 0; } video.play();} else { video.pause();}
  • 30. if (video.paused) { if (video.ended) { video.currentTime = 0; } video.play();} else { video.pause();}
  • 31. addEvent( video, timeupdate, function () { positon.innerHTML = ➥ asTime(this.currentTime); });
  • 32. addEvent( video, timeupdate, function () { positon.innerHTML = ➥ asTime(this.currentTime); });
  • 33. addEvent( video, timeupdate, function () { positon.innerHTML = ➥ asTime(this.currentTime); });
  • 34. •play(), pause()•paused, ended, currentTime•canplay, timeupdate, ended•and a bunch more.
  • 35. •Bugs tend to be ratherquiet...shhh...•Firefox needs the rightcontent-type•Safari will plough ahead
  • 36. Accessibility?
  • 37. http://open.bbc.co.uk/rad/demos/html5/rdtv/episode2/
  • 38. Canvas(+ excanvas.js)
  • 39. <!DOCTYPE html><html><head> <title>Canvas</title></head><body> <canvas></canvas></body></html>
  • 40. var ctx = canvas.getContext(2d);
  • 41. var ctx = canvas.getContext(2d);// Create radial gradientvar grad = ctx.createRadialGradient(0,0,0,0,0,600);
  • 42. var ctx = canvas.getContext(2d);// Create radial gradientvar grad = ctx.createRadialGradient(0,0,0,0,0,600);grad.addColorStop(0, #E4E4E4);grad.addColorStop(1, #000);
  • 43. var ctx = canvas.getContext(2d);// Create radial gradientvar grad = ctx.createRadialGradient(0,0,0,0,0,600);grad.addColorStop(0, #E4E4E4);grad.addColorStop(1, #000);// assign gradients to fillctx.fillStyle = grad;
  • 44. var ctx = canvas.getContext(2d);// Create radial gradientvar grad = ctx.createRadialGradient(0,0,0,0,0,600);grad.addColorStop(0, #E4E4E4);grad.addColorStop(1, #000);// assign gradients to fillctx.fillStyle = grad;// draw 600x600 fillctx.fillRect(0,0,600,600);
  • 45. ctx.toDataURL("image/png");
  • 46. ctx.toDataURL("image/png");data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAFxUlEQVR4Ae3dQW5jORAEUXvQ97+yezCzNQpNyPwdIp+XJkVlRTKgheGvz69/fz78IIDAtwT++fa3fokAAv8RIIiLgMBAgCADHEsIEMQdQGAgQJABjiUECOIOIDAQIMgAxxICBHEHEBgIEGSAYwkBgrgDCAwECDLAsYQAQdwBBAYCBBngWEKAIO4AAgMBggxwLCFAEHcAgYEAQQY4lhAgiDuAwECAIAMcSwj8+nEEn58/fuQfHehf6/8Ik01rBHyCrPGy+zICBLmscOOuESDIGi+7LyNAkMsKN data:image/png;base64,...+4aAYKs8bL7MgIEuaxw464RIMgaL7svI0CQywo37hoBgqzxsvsyAgS5rHDjrhEgyBovuy8jQJDLCjfuGgGCrPGy+zICBLmscOOuESDIGi+7LyNAkMsKN+4aAYKs8bL7MgIEuaxw464RIMgaL7svI0CQywo37hoBgqzxsvsyAgS5rHDjrhEgyBovuy8jQJDLCjfuGgGCrPGy+zICBLmscOOuESDIGi+7LyNAkMsKN+4aAYKs8bL7MgI//3R3T1m/7AqdPa5PkLP7Nd2LBAjyIkAvP5sAQc7u13QvEiDIiwC9/GwCBDm7X9O9SIAgLwL08rMJEOTsfk33IgGCvAjQy88mQJCz+zXdiwR+/i/pLwba/fLPj7/zPe5fH1+7R3P+BgI+QTZAdeQ5BAhyTpcm2UCAIBugOvIcAgQ5p0uTbCBAkA1QHXkOAYKc06VJNhAgyAaojjyHAEHO6dIkGwgQZANUR55DgCDndGmSDQQIsgGqI88hQJBzujTJBgIE2QDVkecQIMg5XZpkAwGCbIDqyHMIEOScLk2ygQBBNkB15DkECHJOlybZQIAgG6A68hwCBDmnS5NsIECQDVAdeQ4BgpzTpUk2ECDIBqiOPIcAQc7p0iQbCBBkA1RHnkOAIOd0aZINBAiyAaojzyFAkHO6NMkGAgTZANWR5xC47ununrJ+zuV9YhKfIE9Q9h5vS4Agb1ud4E8QIMgTlL3H2xIgyNtWJ/gTBAjyBGXv8bYECPK21Qn+BAGCPEHZe7wtAYK8bXWCP0GAIE9Q9h5vS+C6v6TXm/r8O1/j/vHla9y/vRo+Qb7F4pcI/E+AIG4CAgMBggxwLCFAEHcAgYEAQQY4lhAgiDuAwECAIAMcSwgQxB1AYCBAkAGOJQQI4g4gMBAgyADHEgIEcQcQGAgQZIBjCQGCuAMIDAQIMsCxhABB3AEEBgIEGeBYQoAg7gACAwGCDHAsIUAQdwCBgQBBBjiWECCIO4DAQIAgAxxLCBDEHUBgIECQAY4lBAjiDiAwECDIAMcSAgRxBxAYCBBkgGMJAU93j90BT1lvFeITpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECBIkVIk6LAEFafUgTI0CQWCHitAgQpNWHNDECvwHnaxGSkEUPVAAAAABJRU5ErkJggg==
  • 47. Canvas +drawImage + Video =
  • 48. ctx.getImageData() http://blog.mozbox.org/post/2009/04/12/Firefox-35%3A-a-new-experiment-with-Canvas-Video
  • 49. frame = ctx.getImageData(0, 0, w, h);i = 0; // or via loopr = frame.data[i + 0];g = frame.data[i + 1];b = frame.data[i + 2];
  • 50. ctx.translate(canvas.width/2, canvas.height/2);ctx.scale(-1, 1);ctx.translate(-canvas.width/2, -canvas.height/2);ctx.drawImage( video, 0, 0, video.width, video.height, 0, 0, canvas.width, canvas.height);
  • 51. Dont use for evil
  • 52. Of ine Applications
  • 53. Of ine Applications
  • 54. Of ine Apps•Application cache•Events: of ine, online•navigator.onLine property
  • 55. http://icanhaz.com/rubiks
  • 56. Enable<!DOCTYPE html><html manifest="my.manifest"><body><!-- my page --></body></html>
  • 57. my.manifestCACHE MANIFESTimages/shade.jpgimages/bin.jpg#version 13
  • 58. Cache•First line: CACHE MANIFEST•Requires text/cache-manifest•Recommend using versioning•window.applicationCache•Add it last!
  • 59. The process
  • 60. Browser: I have aBrowser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reloadmanifest assets updated Browser: only Server: 304 Not Browser: serverequest manifest Modified locally file
  • 61. Storage(giant cookies)
  • 62. key/val SQLite
  • 63. key/valuewindow based sessionStorage localStorage .setItem(key, value); .getItem(key);
  • 64. key/valuewindow based sessionStoragedomain based localStorage .setItem(key, value); .getItem(key);
  • 65. SQLite "User agents mustimplement the SQL dialectsupported by Sqlite 3.6.19" Another one that fails super silently :(
  • 66. db = openDatabase("demo", "1.0","sample", 200000);db.transaction(function (tx) { tx.executeSql(SELECT * FROM tweetsWHERE mention = ?, [mention], function(tx, results) { // do something with results });});
  • 67. db = openDatabase("demo", "1.0","sample", 200000);db.transaction(function (tx) { tx.executeSql(SELECT * FROM tweetsWHERE mention = ?, [mention], function(tx, results) { // do something with results });});
  • 68. db = openDatabase("demo", "1.0","sample", 200000);db.transaction(function (tx) { tx.executeSql(SELECT * FROM tweetsWHERE mention = ?, [mention], function(tx, results) { // do something with results });});
  • 69. db = openDatabase("demo", "1.0","sample", 200000);db.transaction(function (tx) { tx.executeSql(SELECT * FROM tweetsWHERE mention = ?, [mention], function(tx, results) { // do something with results });});
  • 70. Geolocation
  • 71. Geolocation
  • 72. Not always accurate!
  • 73. navigator .geolocation .getCurrentPosition( success, err );
  • 74. Web Workers
  • 75. •"Threads"•Native or via Gears (or setTimeout hack?)•Sandboxed•Debugging?
  • 76. http://html5demos.com/worker
  • 77. •importScripts• postMessage• onmessage• onconnect
  • 78. app.htmlvar w = new Worker(worker.js);w.onmessage = function (event) { alert("msg: " + event.data);};w.postMessage(run);
  • 79. worker.jsimportScripts(xhr.js, db.js);onmessage = function (event) { if (event.data == run) { run(); }};function run() { var data = doCrazyNumberCrunch(); postMessage(data);}
  • 80. worker.jsimportScripts(xhr.js, db.js);onmessage = function (event) { if (event.data == run) { run(); }};function run() { var data = doCrazyNumberCrunch(); postMessage(data);}
  • 81. worker.jsimportScripts(xhr.js, db.js);onmessage = function (event) { if (event.data == run) { run(); }};function run() { var data = doCrazyNumberCrunch(); postMessage(data);}
  • 82. And alotmore...
  • 83. Attributes: data-*, itemProp,sandbox (on iframes)<progress> Microdata API,<meter> datagrid, XHR2 &<datalist> upload progress<ruby> querySelectorDrag & Drop,History manager ARIA overlap
  • 84. http://www.whatwg.org/html5/http://tr.im/whatwg_completeirc://irc.freenode.net/#whatwg
  • 85. Pro tip: cats cantRemy code for crapSharp@rem(another)JavaScript Conference:full-frontal.orghttp://html5demos.comLinks: http://tr.im/rs_jsconfeu