Download as PDF, PPTX
![frame = ctx.getImageData(0, 0, w, h); i = 0; // or via loop r = frame.data[i + 0]; g = frame.data[i + 1]; b = frame.data[i + 2];](https://image.slidesharecdn.com/html5-js-apis-091109003913-phpapp02/75/HTML5-JavaScript-APIs-60-2048.jpg)
![db = openDatabase("demo", "1.0", "sample", 200000); db.transaction(function (tx) { tx.executeSql('SELECT * FROM tweets WHERE mention = ?', [mention], function (tx, results) { // do something with results }); });](https://image.slidesharecdn.com/html5-js-apis-091109003913-phpapp02/75/HTML5-JavaScript-APIs-78-2048.jpg)
![db = openDatabase("demo", "1.0", "sample", 200000); db.transaction(function (tx) { tx.executeSql('SELECT * FROM tweets WHERE mention = ?', [mention], function (tx, results) { // do something with results }); });](https://image.slidesharecdn.com/html5-js-apis-091109003913-phpapp02/75/HTML5-JavaScript-APIs-79-2048.jpg)
![db = openDatabase("demo", "1.0", "sample", 200000); db.transaction(function (tx) { tx.executeSql('SELECT * FROM tweets WHERE mention = ?', [mention], function (tx, results) { // do something with results }); });](https://image.slidesharecdn.com/html5-js-apis-091109003913-phpapp02/75/HTML5-JavaScript-APIs-80-2048.jpg)
![db = openDatabase("demo", "1.0", "sample", 200000); db.transaction(function (tx) { tx.executeSql('SELECT * FROM tweets WHERE mention = ?', [mention], function (tx, results) { // do something with results }); });](https://image.slidesharecdn.com/html5-js-apis-091109003913-phpapp02/75/HTML5-JavaScript-APIs-81-2048.jpg)
Uploaded byRemy Sharp
HTML5 JavaScript APIs
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
HTML5 JavaScript APIs
- 1.
- 2.
- 3.
- 4.
- 5.
- 6. Web Forms Audio/Video Canvas Offline Drag &Drop Editable History API Undo X-Domain Messaging HTML5
- 7.
- 8. “HTML5” •Web Forms 2.0 •Audio& Video •Canvas •Offline •Storage •Geolocation •Workers
- 9. “HTML5” •Web Forms 2.0 •Audio& Video •Canvas •Offline •Storage •Geolocation •Workers
- 10. “HTML5” •Web Forms 2.0 •Audio& Video •Canvas •Offline •Storage •Geolocation •Workers
- 11. Web Forms 2.0 Actualsearch for "web forms", wtf? http://tr.im/webforms_pic ➙
- 12. "JavaScript is onlygood for image roll overs & form validation"
- 13. "JavaScript is onlygood for image roll overs & form validation" :hover
- 14. "JavaScript is onlygood for image roll overs & form validation" .hasFeature('WebForms', '2.0')
- 15. "JavaScript is onlygood for image roll overs & form validation" awesome shit" .hasFeature('WebForms', '2.0')
- 17. var f =document.querySelector('form'); f.onsubmit = function () { if ( this.checkValidity() ) { alert("It's all okay"); } else { alert("Something's gone wrong..."); return false; } };
- 18. Less JavaScript on donkeywork == more JavaScript on awesome work.
- 21.
- 22. <object classid="clsid:d27cdb6e-a height="344" codebase="http://dow flash/swflash.cab#version=6,0,40, <paramname="allowFullScreen" val <param name="allowscriptaccess" v <param name="src" value="http://w <param name="allowfullscreen" val <embed type="application/x-shockw src="http://www.youtube.com/v/oHg allowscriptaccess="always" allowf </embed> </object>
- 23.
- 25. <video> <source src="dizzy.ogv" /> <sourcesrc="dizzy.mp4" /> </video>
- 26.
- 27. <video> <source src="dizzy.ogv" /> <sourcesrc="dizzy.mp4" /> </video>
- 28. <video> <source src="dizzy.ogv" /> <sourcesrc="dizzy.mp4" /> <!-- QuickTime support --> <object><param></object> </video>
- 29. <video> <source src="dizzy.ogv" /> <sourcesrc="dizzy.mp4" /> <!-- QuickTime support --> <object><param></object> <!-- down to flash --> <object><param></object> </video>
- 30. <video> <source src="dizzy.ogv" /> <sourcesrc="dizzy.mp4" /> </video>
- 32. if (video.paused) { if(video.ended) { video.currentTime = 0; } video.play(); } else { video.pause(); }
- 33. if (video.paused) { if(video.ended) { video.currentTime = 0; } video.play(); } else { video.pause(); }
- 34. if (video.paused) { if(video.ended) { video.currentTime = 0; } video.play(); } else { video.pause(); }
- 35. if (video.paused) { if(video.ended) { video.currentTime = 0; } video.play(); } else { video.pause(); }
- 36. addEvent( video, 'timeupdate', function () { positon.innerHTML= ➥ asTime(this.currentTime); } );
- 37. addEvent( video, 'timeupdate', function () { positon.innerHTML= ➥ asTime(this.currentTime); } );
- 38. addEvent( video, 'timeupdate', function () { positon.innerHTML= ➥ asTime(this.currentTime); } );
- 39. •play(), pause() •paused, ended,currentTime •canplay, timeupdate, ended •and a bunch more.
- 40. •Bugs tend tobe rather quiet...shhh... •Firefox needs the right content-type •Safari will plough ahead
- 41.
- 42.
- 43.
- 46.
- 47. var ctx =canvas.getContext('2d');
- 48. var ctx =canvas.getContext('2d'); // Create radial gradient var grad = ctx.createRadialGradient(0,0,0,0,0,600);
- 49. var ctx =canvas.getContext('2d'); // Create radial gradient var grad = ctx.createRadialGradient(0,0,0,0,0,600); grad.addColorStop(0, '#E4E4E4'); grad.addColorStop(1, '#000');
- 50. var ctx =canvas.getContext('2d'); // Create radial gradient var grad = ctx.createRadialGradient(0,0,0,0,0,600); grad.addColorStop(0, '#E4E4E4'); grad.addColorStop(1, '#000'); // assign gradients to fill ctx.fillStyle = grad;
- 51. var ctx =canvas.getContext('2d'); // Create radial gradient var grad = ctx.createRadialGradient(0,0,0,0,0,600); grad.addColorStop(0, '#E4E4E4'); grad.addColorStop(1, '#000'); // assign gradients to fill ctx.fillStyle = grad; // draw 600x600 fill ctx.fillRect(0,0,600,600);
- 53.
- 54.
- 55.
- 59.
- 60. frame = ctx.getImageData(0,0, w, h); i = 0; // or via loop r = frame.data[i + 0]; g = frame.data[i + 1]; b = frame.data[i + 2];
- 61. 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);
- 62. Don't use forevil
- 63.
- 64.
- 65. Offline Apps •Application cache •Events:offline, online •navigator.onLine property
- 66.
- 67. Enable <!DOCTYPE html> <html manifest="my.manifest"> <body> <!--my page --> </body> </html>
- 68.
- 69. Cache •First line: CACHEMANIFEST •Requires text/cache-manifest •Recommend using versioning •window.applicationCache •Add it last!
- 70.
- 71. Browser: request Server:serve all Browser: I have a manifest, cache assets Server: serve manifest assets Browser: applicationCache updated Browser: reload Browser: only request manifest file Server: 304 Not Modified Browser: serve locally
- 72.
- 73.
- 74.
- 75.
- 77. SQLite "User agents must implementthe SQL dialect supported by Sqlite 3.6.19" Another one that fails super silently :(
- 78. db = openDatabase("demo","1.0", "sample", 200000); db.transaction(function (tx) { tx.executeSql('SELECT * FROM tweets WHERE mention = ?', [mention], function (tx, results) { // do something with results }); });
- 79. db = openDatabase("demo","1.0", "sample", 200000); db.transaction(function (tx) { tx.executeSql('SELECT * FROM tweets WHERE mention = ?', [mention], function (tx, results) { // do something with results }); });
- 80. db = openDatabase("demo","1.0", "sample", 200000); db.transaction(function (tx) { tx.executeSql('SELECT * FROM tweets WHERE mention = ?', [mention], function (tx, results) { // do something with results }); });
- 81. db = openDatabase("demo","1.0", "sample", 200000); db.transaction(function (tx) { tx.executeSql('SELECT * FROM tweets WHERE mention = ?', [mention], function (tx, results) { // do something with results }); });
- 83.
- 84.
- 86.
- 87.
- 89.
- 90. •"Threads" •Native or viaGears (or setTimeout hack?) •Sandboxed •Debugging?
- 92.
- 93.
- 94. var w =new Worker('worker.js'); w.onmessage = function (event) { alert("msg: " + event.data); }; w.postMessage('run'); app.html
- 95. importScripts('xhr.js', 'db.js'); onmessage =function (event) { if (event.data == 'run') { run(); } }; function run() { var data = doCrazyNumberCrunch(); postMessage(data); } worker.js
- 96. importScripts('xhr.js', 'db.js'); onmessage =function (event) { if (event.data == 'run') { run(); } }; function run() { var data = doCrazyNumberCrunch(); postMessage(data); } worker.js
- 97. importScripts('xhr.js', 'db.js'); onmessage =function (event) { if (event.data == 'run') { run(); } }; function run() { var data = doCrazyNumberCrunch(); postMessage(data); } worker.js
- 98.
- 99. Attributes: data-*, itemProp, sandbox(on iframes) Microdata API, datagrid, XHR2 & upload progress Drag & Drop, History manager ARIA overlap querySelector <progress> <meter> <datalist> <ruby>
- 100.
- 101.