HTML5 JS APIs
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

HTML5 JS APIs

  • 106,869 views
Uploaded on

Standards.next for HTML5 JavaScript APIs

Standards.next for HTML5 JavaScript APIs

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

Views

Total Views
106,869
On Slideshare
92,050
From Embeds
14,819
Number of Embeds
40

Actions

Shares
Downloads
1,781
Comments
12
Likes
91

Embeds 14,819

http://www.labnol.org 11,856
http://www.slideshare.net 1,058
http://blog.dreamcss.com 585
http://congdongthongtin.com 377
http://www.askqtp.com 284
http://www.tozoy.com 200
http://nvd-sap.dowdensite.com 151
http://blog.jeanbaptistedumont.com 90
http://www.learnnpublish.com 47
http://translate.googleusercontent.com 27
http://ehealth.kcl.ac.uk 25
http://localhost 19
http://tingletech.tumblr.com 11
http://firecracker.ytnobody.net 10
http://paper.li 7
http://cdn.pearltrees.com 7
http://lanyrd.com 7
http://dumont.typepad.com 6
http://tech-buzz.net 5
http://www.lifeyun.com 5
http://core.traackr.com 4
http://123.preprommtv.appspot.com 4
http://fruendt-online.de 4
http://127.0.0.1 4
http://www.mashme.tv 3
http://techberry.blogspot.com 3
http://hi.chibaole.com 3
http://webcache.googleusercontent.com 3
http://a0.twimg.com 2
http://www.e-presentations.us 2
http://74.6.117.48 1
http://one-more-site.blogspot.com 1
http://74.125.113.132 1
http://feeds.labnol.org 1
http://mysecretwebsite.blogspot.com 1
http://lumiere.ens.fr 1
http://74.125.93.132 1
http://vnwindowsblog.tk 1
http://twittertim.es 1
http://www.ikmarkcremer.nl 1

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. JavaScript APIs HTML5 Remy Sharp @rem standards.next
  • 2. JavaScript APIs HTML5 & friends! Remy Sharp @rem standards.next
  • 3. HTML5: 2022?
  • 4. Bollocks.
  • 5. APIs •Canvas •Geolocation •Drag & Drop •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Of ine Apps •Workers •Video & Audio
  • 6. APIs •Canvas •Geolocation •Drag & Drop •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Of ine Apps •Workers •Video & Audio
  • 7. APIs •Canvas •Geolocation •Drag & Drop •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Of ine Apps •Workers •Video & Audio
  • 8. APIs •Canvas •Geolocation •Drag & Drop •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Of ine Apps •Workers •Video & Audio
  • 9. APIs •Canvas •Geolocation •Drag & Drop? •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Of ine Apps •Workers •Video & Audio
  • 10. Documentation
  • 11. www.whatwg.org/html5/ dev.w3.org/html5/ irc://irc.freenode.net/#whatwg
  • 12. Canvas
  • 13. Canvas
  • 14. document.querySelector('canvas').getContext("2d") http://tr.im/pRkz
  • 15. document.querySelector('canvas').getContext("2d") http://tr.im/pRkz
  • 16. Drag'n Drop
  • 17. Drag'n Drop
  • 18. Drag & Drop •draggable="true" •events: dragstart, drop, etc •event.transferData
  • 19. <div draggable="true">drag me</div> <script> document.querySelector('div').addEventListener( "dragstart", function (e) { e.dataTransfer.setData("arbitrary","data"); return true; }, true); </script>
  • 20. <div draggable="true">drag me</div> <script> document.querySelector('div').addEventListener( "dragstart", function (e) { ??? e.dataTransfer.setData("arbitrary","data"); return true; }, true); </script>
  • 21. el.addEventListener('dragover', function (e) { e.preventDefault(); }, true); el.addEventListener('drop', function (e) { e.stopPropagation(); alert(e.dataTransfer.getData('arbitrary')); }, true);
  • 22. el.addEventListener('dragover', function (e) { e.preventDefault(); }, true); el.addEventListener('drop', function (e) { e.stopPropagation(); alert(e.dataTransfer.getData('arbitrary')); }, true);
  • 23. el.addEventListener('dragover', function (e) { e.preventDefault(); }, true); el.addEventListener('drop', function (e) { e.stopPropagation(); alert(e.dataTransfer.getData('arbitrary')); }, true);
  • 24. http://html5demos.com/drag
  • 25. http://html5demos.com/drag
  • 26. Of ine Applications
  • 27. Of ine Applications
  • 28. Of ine Apps •Application cache •Events: of ine, online •navigator.onLine property
  • 29. Enable <html manifest="my.manifest" >
  • 30. my.manifest CACHE MANIFEST images/shade.jpg images/bin.jpg
  • 31. Cache •First line: CACHE MANIFEST •Requires text/cache-manifest •Recommend using versioning •window.applicationCache
  • 32. Cache •On load will hit my.manifest
  • 33. Cache •On load will hit my.manifest •Change manifest: trigger reload
  • 34. Cache •On load will hit my.manifest •Change manifest: trigger reload •applicationCache.update() force
  • 35. Cache •On load will hit my.manifest •Change manifest: trigger reload •applicationCache.update() force •Cache events
  • 36. Firefox
  • 37. window.addEventListener( 'offline', // online too online, // function true );
  • 38. function online() { if (navigator.onLine == false) { // gone offline } else { // else we're online } }
  • 39. http://html5demos.com/offline
  • 40. http://html5demos.com/offline
  • 41. navigator.onLine
  • 42. Geolocation
  • 43. Geolocation
  • 44. Not always accurate!
  • 45. navigator .geolocation .getCurrentPosition( success, err );
  • 46. Messaging
  • 47. Messaging
  • 48. Messaging •Communicate across domains •Across window object •With Workers •String transfer only
  • 49. .postMessage(str) .onMessage(event) event.data == str
  • 50. Cross Domain document .getElementById("iframe") .contentWindow .postMessage("my message");
  • 51. The Catcher window.addEventListener( "message", function(e){ if (e.origin !== "http://example.com") { return; } alert(e.origin + " said: " + e.data); }, false );
  • 52. Web Workers
  • 53. Web Workers
  • 54. •Threads
  • 55. •Threads •Native or via Gears
  • 56. •Threads •Native or via Gears •Sandboxed
  • 57. •Threads •Native or via Gears •Sandboxed •Debugging?
  • 58. •importScripts •postMessage •onmessage •onconnect
  • 59. Without
  • 60. http://html5demos.com/worker
  • 61. Storage
  • 62. Storage
  • 63. 1. sessionStorage
  • 64. 1. sessionStorage 2. localStorage
  • 65. 1. sessionStorage 2. localStorage 3. database storage
  • 66. Storage sessionStorage.setItem(key, value) sessionStorage.getItem(key)
  • 67. Storage localStorage.setItem(key, value) localStorage.getItem(key)
  • 68. And more! Remy Sharp @rem remy@leftlogic.com html5demos.com remysharp.com full-frontal.org