Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (16)
Similar a HTML5 JS APIs
Similar a HTML5 JS APIs (20)
Más de Remy Sharp
Más de Remy Sharp (20)
Último
Último (20)
HTML5 JS APIs
- 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
- 15. Canvas
- 16. Canvas
- 17. document.querySelector('canvas').getContext("2d") http://tr.im/pRkz
- 18. document.querySelector('canvas').getContext("2d") http://tr.im/pRkz
- 19. Drag'n Drop
- 20. Drag'n Drop
- 21. Drag & Drop •draggable="true" •events: dragstart, drop, etc •event.transferData
- 22. <div draggable="true">drag me</div> <script> document.querySelector('div').addEventListener( "dragstart", function (e) { e.dataTransfer.setData("arbitrary","data"); return true; }, true); </script>
- 23. <div draggable="true">drag me</div> <script> document.querySelector('div').addEventListener( "dragstart", function (e) { ??? e.dataTransfer.setData("arbitrary","data"); return true; }, true); </script>
- 24. el.addEventListener('dragover', function (e) { e.preventDefault(); }, true); el.addEventListener('drop', function (e) { e.stopPropagation(); alert(e.dataTransfer.getData('arbitrary')); }, true);
- 25. el.addEventListener('dragover', function (e) { e.preventDefault(); }, true); el.addEventListener('drop', function (e) { e.stopPropagation(); alert(e.dataTransfer.getData('arbitrary')); }, true);
- 26. el.addEventListener('dragover', function (e) { e.preventDefault(); }, true); el.addEventListener('drop', function (e) { e.stopPropagation(); alert(e.dataTransfer.getData('arbitrary')); }, true);
- 31. Of ine Apps •Application cache •Events: of ine, online •navigator.onLine property
- 34. Cache •First line: CACHE MANIFEST •Requires text/cache-manifest •Recommend using versioning •window.applicationCache
- 35. Cache •On load will hit my.manifest
- 36. Cache •On load will hit my.manifest •Change manifest: trigger reload
- 37. Cache •On load will hit my.manifest •Change manifest: trigger reload •applicationCache.update() force
- 38. Cache •On load will hit my.manifest •Change manifest: trigger reload •applicationCache.update() force •Cache events
- 41. Firefox
- 42. window.addEventListener( 'offline', // online too online, // function true );
- 43. function online() { if (navigator.onLine == false) { // gone offline } else { // else we're online } }
- 46. navigator.onLine
- 47. Geolocation
- 48. Geolocation
- 51. navigator .geolocation .getCurrentPosition( success, err );
- 54. Messaging
- 55. Messaging
- 56. Messaging •Communicate across domains •Across window object •With Workers •String transfer only
- 58. Cross Domain document .getElementById("iframe") .contentWindow .postMessage("my message");
- 59. The Catcher window.addEventListener( "message", function(e){ if (e.origin !== "http://example.com") { return; } alert(e.origin + " said: " + e.data); }, false );
- 60. Web Workers
- 61. Web Workers
- 62. •Threads
- 63. •Threads •Native or via Gears
- 64. •Threads •Native or via Gears •Sandboxed
- 65. •Threads •Native or via Gears •Sandboxed •Debugging?
- 67. Without
- 69. Storage
- 70. Storage
- 73. 1. sessionStorage 2. localStorage 3. database storage