JavaScript APIs - The Web is the    Platform
@robertnyman
<button id="browser-id">Log in</button><script>    document.querySelector("#browser-id").onclick = function () {         n...
POST request to https://browserid.org/verify withtwo parameters:curl -d "assertion=<ASSERTION>&audience=https://mysite.com...
{    "status": "okay",    "email": "lloyd@example.com",    "audience": "https://mysite.com",    "expires": 1308859352261, ...
navigator.id.logout();
Drag and Drop
...I am forced to conclude that theHTML5 drag and drop module is notjust a disaster, it’s a fucking disaster.             ...
<div id="can-be-dragged" draggable></div>
<p id="drop-area">     Drag and drop files here</p>
var someImg = document.getElementById("some-image"),    dropArea = document.getElementById("drop-area");someImg.ondragstar...
someImg.ondragstart = function (evt) {    var event = evt || window.event;    event.dataTransfer.setDragImage(dragIcon, -1...
Fullscreen
<button id="view-fullscreen">Fullscreen</button><script type="text/javascript">(function () {    var viewFullScreen = docu...
mozRequestFullScreenWithKeys?
html:-moz-full-screen {    background: red;}html:-webkit-full-screen {    background: red;}
Camera
<input type="file" id="take-picture" accept="image/*">
takePicture.onchange = function (event) {    // Get a reference to the taken picture or chosen file    var files = event.t...
WebRTC
var liveVideo = document.querySelector("#live-video");navigator.getUserMedia(    {video: true},    function (stream) {    ...
Pointer Lock API
var docElm = document.documentElement;// Requesting Pointer LockdocElm.requestPointerLock = elem.requestPointerLock ||    ...
document.addEventListener("mousemove", function(e) {    var movementX = e.movementX       ||                    e.mozMovem...
IndexedDB
// IndexedDBvar indexedDB = window.indexedDB || window.webkitIndexedDB ||window.mozIndexedDB || window.OIndexedDB || windo...
createObjectStore = function (dataBase) {    // Create an objectStore    dataBase.createObjectStore("elephants");}// Curre...
request.onsuccess = function (event) {    // Create XHR    var xhr = new XMLHttpRequest(),        blob;    xhr.open("GET",...
putElephantInDb = function (blob) {    // Open a transaction to the database    var transaction = db.transaction(["elephan...
Battery
// Get battery level in percentagevar batteryLevel = battery.level * 100 + "%";// Get whether device is charging or notvar...
battery.addEventLister("levelchange", function () {    // Devices battery level changed}, false);battery.addEventListener(...
Boot to Gecko
https://github.com/andreasgal/B2Ghttps://github.com/andreasgal/gaia
Telephony & SMS
// Telephony objectvar tel = navigator.mozTelephony;// Check if the phone is muted (read/write property)console.log(tel.mu...
// Receiving a calltel.onincoming = function (event) {    var incomingCall = event.call;     // Get the number of the inco...
// SMS objectvar sms = navigator.mozSMS;// Send a messagesms.send("123456789", "Hello world!");// Receive a messagesms.onr...
Vibration
(function () {    document.querySelector("#vibrate-one-second").addEventListener("click",        function () {            ...
WebAPI
Dev tools
"So we saved the worldtogether for a while,and that was lovely."                  -Lost
Robert Nymanrobertnyman.com/speaking/ robnyman@mozilla.comrobertnyman.com/html5/    Twitter: @robertnymanrobertnyman.com/c...
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
Upcoming SlideShare
Loading in...5
×

JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo

4,521

Published on

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,521
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
11
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo"

  1. 1. JavaScript APIs - The Web is the Platform
  2. 2. @robertnyman
  3. 3. <button id="browser-id">Log in</button><script> document.querySelector("#browser-id").onclick = function () { navigator.id.get(function (assertion) { if (assertion) { AJAX request to your server with the assertion } }); }</script>
  4. 4. POST request to https://browserid.org/verify withtwo parameters:curl -d "assertion=<ASSERTION>&audience=https://mysite.com" "https://browserid.org/verify"
  5. 5. { "status": "okay", "email": "lloyd@example.com", "audience": "https://mysite.com", "expires": 1308859352261, "issuer": "browserid.org"}
  6. 6. navigator.id.logout();
  7. 7. Drag and Drop
  8. 8. ...I am forced to conclude that theHTML5 drag and drop module is notjust a disaster, it’s a fucking disaster. -Peter-Paul Koch
  9. 9. <div id="can-be-dragged" draggable></div>
  10. 10. <p id="drop-area"> Drag and drop files here</p>
  11. 11. var someImg = document.getElementById("some-image"), dropArea = document.getElementById("drop-area");someImg.ondragstart = function (evt) { var event = evt || window.event; event.dataTransfer.setData("Text", this.getAttribute("alt")); return false;};dropArea.ondragenter = function (evt) { return false; “If the drop is to be}; accepted, then thisdropArea.ondragover = function (evt) { return false; event (dragover) has}; to be canceled.”dropArea.ondrop = function (evt) { var text = event.dataTransfer.getData("Text"); event.cancelBubble = true; // For IE return false;};
  12. 12. someImg.ondragstart = function (evt) { var event = evt || window.event; event.dataTransfer.setDragImage(dragIcon, -10, -10); return false;};
  13. 13. Fullscreen
  14. 14. <button id="view-fullscreen">Fullscreen</button><script type="text/javascript">(function () { var viewFullScreen = document.getElementById("view-fullscreen"); if (viewFullScreen) { viewFullScreen.addEventListener("click", function () { var docElm = document.documentElement; if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } }, false); }})(); </script>
  15. 15. mozRequestFullScreenWithKeys?
  16. 16. html:-moz-full-screen { background: red;}html:-webkit-full-screen { background: red;}
  17. 17. Camera
  18. 18. <input type="file" id="take-picture" accept="image/*">
  19. 19. takePicture.onchange = function (event) { // Get a reference to the taken picture or chosen file var files = event.target.files, file; if (files && files.length > 0) { file = files[0]; // Get window.URL object var URL = window.URL || window.webkitURL; // Create ObjectURL var imgURL = URL.createObjectURL(file); // Set img src to ObjectURL showPicture.src = imgURL; // Revoke ObjectURL URL.revokeObjectURL(imgURL); }};
  20. 20. WebRTC
  21. 21. var liveVideo = document.querySelector("#live-video");navigator.getUserMedia( {video: true}, function (stream) { liveVideo.src = stream; }, function (error) { console.log("An error occurred: " + error); });
  22. 22. Pointer Lock API
  23. 23. var docElm = document.documentElement;// Requesting Pointer LockdocElm.requestPointerLock = elem.requestPointerLock || elem.mozRequestPointerLock || elem.webkitRequestPointerLock;docElm.requestPointerLock();
  24. 24. document.addEventListener("mousemove", function(e) { var movementX = e.movementX || e.mozMovementX || e.webkitMovementX || 0, movementY = e.movementY || e.mozMovementY || e.webkitMovementY || 0; // Print the mouse movement delta values console.log("movementX=" + movementX, "movementY="+ movementY);}, false);
  25. 25. IndexedDB
  26. 26. // IndexedDBvar indexedDB = window.indexedDB || window.webkitIndexedDB ||window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB, IDBTransaction = window.IDBTransaction ||window.webkitIDBTransaction || window.OIDBTransaction ||window.msIDBTransaction, dbVersion = 1;// Create/open databasevar request = indexedDB.open("elephantFiles", dbVersion);
  27. 27. createObjectStore = function (dataBase) { // Create an objectStore dataBase.createObjectStore("elephants");}// Currently only in latest Firefox versionsrequest.onupgradeneeded = function (event) { createObjectStore(event.target.result);};
  28. 28. request.onsuccess = function (event) { // Create XHR var xhr = new XMLHttpRequest(), blob; xhr.open("GET", "elephant.png", true); // Set the responseType to blob xhr.responseType = "blob"; xhr.addEventListener("load", function () { if (xhr.status === 200) { // Blob as response blob = xhr.response; // Put the received blob into IndexedDB putElephantInDb(blob); } }, false); // Send XHR xhr.send();}
  29. 29. putElephantInDb = function (blob) { // Open a transaction to the database var transaction = db.transaction(["elephants"], IDBTransaction.READ_WRITE); // Put the blob into the dabase var put = transaction.objectStore("elephants").put(blob, "image"); // Retrieve the file that was just stored transaction.objectStore("elephants").get("image").onsuccess = function (event) { var imgFile = event.target.result; // Get window.URL object var URL = window.URL || window.webkitURL; // Create and revoke ObjectURL var imgURL = URL.createObjectURL(imgFile); // Set img src to ObjectURL var imgElephant = document.getElementById("elephant"); imgElephant.setAttribute("src", imgURL); // Revoking ObjectURL URL.revokeObjectURL(imgURL); };};
  30. 30. Battery
  31. 31. // Get battery level in percentagevar batteryLevel = battery.level * 100 + "%";// Get whether device is charging or notvar chargingStatus = battery.charging;// Time until the device is fully chargedvar batteryCharged = battery.chargingTime;// Time until the device is dischargedvar batteryDischarged = battery.dischargingTime;
  32. 32. battery.addEventLister("levelchange", function () { // Devices battery level changed}, false);battery.addEventListener("chargingchange", function () { // Device got plugged in to power, or unplugged}, false);battery.addEventListener("chargingtimechange", function () { // Devices charging time changed}, false);battery.addEventListener("dischargingtimechange", function () { // Devices discharging time changed}, false);
  33. 33. Boot to Gecko
  34. 34. https://github.com/andreasgal/B2Ghttps://github.com/andreasgal/gaia
  35. 35. Telephony & SMS
  36. 36. // Telephony objectvar tel = navigator.mozTelephony;// Check if the phone is muted (read/write property)console.log(tel.muted);// Check if the speaker is enabled (read/write property)console.log(tel.speakerEnabled);// Place a callvar call = tel.dial("123456789");
  37. 37. // Receiving a calltel.onincoming = function (event) { var incomingCall = event.call; // Get the number of the incoming call console.log(incomingCall.number); // Answer the call incomingCall.answer();};// Disconnect a callcall.hangUp();
  38. 38. // SMS objectvar sms = navigator.mozSMS;// Send a messagesms.send("123456789", "Hello world!");// Receive a messagesms.onreceived = function (event) { // Read message console.log(event.message);};
  39. 39. Vibration
  40. 40. (function () { document.querySelector("#vibrate-one-second").addEventListener("click", function () { navigator.mozVibrate(1000); }, false); document.querySelector("#vibrate-twice").addEventListener("click", function () { navigator.mozVibrate([200, 100, 200, 100]); }, false); document.querySelector("#vibrate-long-time").addEventListener("click", function () { navigator.mozVibrate(5000); }, false); document.querySelector("#vibrate-off").addEventListener("click", function () { navigator.mozVibrate(0); }, false);})();
  41. 41. WebAPI
  42. 42. Dev tools
  43. 43. "So we saved the worldtogether for a while,and that was lovely." -Lost
  44. 44. Robert Nymanrobertnyman.com/speaking/ robnyman@mozilla.comrobertnyman.com/html5/ Twitter: @robertnymanrobertnyman.com/css3/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×