javascript apis - the web is the platform - mdn hack day - buenos aires
DESCRIPTION
TRANSCRIPT
![Page 1: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/1.jpg)
JavaScript APIs - The Web is the
Platform
![Page 2: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/2.jpg)
![Page 3: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/3.jpg)
![Page 4: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/4.jpg)
![Page 5: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/5.jpg)
@robertnyman@mozhacks
![Page 6: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/6.jpg)
![Page 7: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/7.jpg)
![Page 8: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/8.jpg)
![Page 9: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/9.jpg)
pdf.js
![Page 10: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/10.jpg)
Fullscreen
![Page 11: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/11.jpg)
![Page 12: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/12.jpg)
![Page 13: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/13.jpg)
<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>
![Page 14: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/14.jpg)
mozRequestFullScreenWithKeys?
![Page 15: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/15.jpg)
html:-moz-full-screen { background: red;}
html:-webkit-full-screen { background: red;}
![Page 17: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/17.jpg)
![Page 18: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/18.jpg)
<input type="file" id="take-picture" accept="image/*">
![Page 19: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/19.jpg)
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); }};
![Page 20: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/20.jpg)
Pointer Lock API
![Page 21: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/21.jpg)
var docElm = document.documentElement; // Requesting Pointer LockdocElm.requestPointerLock = elem.requestPointerLock || elem.mozRequestPointerLock || elem.webkitRequestPointerLock; docElm.requestPointerLock();
![Page 22: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/22.jpg)
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);
![Page 24: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/24.jpg)
IndexedDB
![Page 25: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/25.jpg)
// 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);
![Page 26: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/26.jpg)
createObjectStore = function (dataBase) { // Create an objectStore dataBase.createObjectStore("elephants");}
// Currently only in latest Firefox versionsrequest.onupgradeneeded = function (event) { createObjectStore(event.target.result);};
![Page 27: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/27.jpg)
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();}
![Page 28: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/28.jpg)
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); };};
![Page 29: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/29.jpg)
Battery
![Page 30: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/30.jpg)
![Page 31: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/31.jpg)
// 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;
![Page 32: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/32.jpg)
battery.addEventLister("levelchange", function () { // Device's battery level changed}, false);
battery.addEventListener("chargingchange", function () { // Device got plugged in to power, or unplugged}, false);
battery.addEventListener("chargingtimechange", function () { // Device's charging time changed}, false);
battery.addEventListener("dischargingtimechange", function () { // Device's discharging time changed}, false);
![Page 33: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/33.jpg)
Boot to Gecko
![Page 34: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/34.jpg)
![Page 35: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/35.jpg)
![Page 36: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/36.jpg)
https://github.com/andreasgal/B2G
https://github.com/andreasgal/gaia
![Page 37: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/37.jpg)
![Page 38: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/38.jpg)
Telephony & SMS
![Page 39: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/39.jpg)
// 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");
![Page 40: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/40.jpg)
// 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();
![Page 41: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/41.jpg)
// SMS objectvar sms = navigator.mozSMS;
// Send a messagesms.send("123456789", "Hello world!");
// Recieve a messagesms.onrecieved = function (event) { // Read message console.log(event.message);};
![Page 42: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/42.jpg)
Vibration
![Page 43: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/43.jpg)
(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);})();
![Page 44: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/44.jpg)
Dev tools
![Page 45: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/45.jpg)
![Page 46: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/46.jpg)
![Page 48: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/48.jpg)
Try new things
![Page 49: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/49.jpg)
![Page 51: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/51.jpg)
![Page 52: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/52.jpg)
![Page 53: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/53.jpg)
![Page 54: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/54.jpg)
![Page 55: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/55.jpg)
"So we saved the world together for a while, and that was lovely."
-Lost
![Page 56: JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires](https://reader034.vdocuments.us/reader034/viewer/2022052617/54001dac8d7f724c088b4b0d/html5/thumbnails/56.jpg)
Robert [email protected]: @robertnyman
robertnyman.com/speaking/robertnyman.com/html5/robertnyman.com/css3/