1. JavaScript APIs -
The Web is the
Platform

4. @robertnyman

7. <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>

8. POST request to https://browserid.org/verify with
two parameters:
curl -d "assertion=<ASSERTION>&audience=https://
mysite.com" "https://browserid.org/verify"

9. {
"status": "okay",
"email": "lloyd@example.com",
"audience": "https://mysite.com",
"expires": 1308859352261,
"issuer": "browserid.org"
}

10. navigator.id.logout();

13. Drag and Drop

14. ...I am forced to conclude that the
HTML5 drag and drop module is not
just a disaster, it’s a fucking disaster.
-Peter-Paul Koch

15. <div id="can-be-dragged" draggable></div>

16. <p id="drop-area">
Drag and drop files here
</p>

17. 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 this
dropArea.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;
};

18. someImg.ondragstart = function (evt) {
var event = evt || window.event;
event.dataTransfer.setDragImage(dragIcon, -10, -10);
return false;
};

19. Fullscreen

22. <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>

23. mozRequestFullScreenWithKeys?

24. html:-moz-full-screen {
background: red;
}
html:-webkit-full-screen {
background: red;
}

25. Camera

27. <input type="file" id="take-picture" accept="image/*">

28. 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);
}
};

29. WebRTC

30. var liveVideo = document.querySelector("#live-video");
navigator.getUserMedia(
{video: true},
function (stream) {
liveVideo.src = stream;
},
function (error) {
console.log("An error occurred: " + error);
}
);

31. Pointer Lock API

32. var docElm = document.documentElement;
// Requesting Pointer Lock
docElm.requestPointerLock = elem.requestPointerLock ||
elem.mozRequestPointerLock ||
elem.webkitRequestPointerLock;
docElm.requestPointerLock();

33. 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);

35. IndexedDB

36. // IndexedDB
var indexedDB = window.indexedDB || window.webkitIndexedDB ||
window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB,
IDBTransaction = window.IDBTransaction ||
window.webkitIDBTransaction || window.OIDBTransaction ||
window.msIDBTransaction,
dbVersion = 1;
// Create/open database
var request = indexedDB.open("elephantFiles", dbVersion);

37. createObjectStore = function (dataBase) {
// Create an objectStore
dataBase.createObjectStore("elephants");
}
// Currently only in latest Firefox versions
request.onupgradeneeded = function (event) {
createObjectStore(event.target.result);
};

38. 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();
}

39. 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);
};
};

40. Battery

42. // Get battery level in percentage
var batteryLevel = battery.level * 100 + "%";
// Get whether device is charging or not
var chargingStatus = battery.charging;
// Time until the device is fully charged
var batteryCharged = battery.chargingTime;
// Time until the device is discharged
var batteryDischarged = battery.dischargingTime;

43. 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);

44. Boot to Gecko

47. https://github.com/andreasgal/B2G
https://github.com/andreasgal/gaia

49. Telephony & SMS

50. // Telephony object
var 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 call
var call = tel.dial("123456789");

51. // Receiving a call
tel.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 call
call.hangUp();

52. // SMS object
var sms = navigator.mozSMS;
// Send a message
sms.send("123456789", "Hello world!");
// Receive a message
sms.onreceived = function (event) {
// Read message
console.log(event.message);
};

53. Vibration

54. (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);
})();

55. WebAPI

56. Dev tools

66. "So we saved the world
together for a while,
and that was lovely."
-Lost

67. Robert Nyman
robertnyman.com/speaking/ robnyman@mozilla.com
robertnyman.com/html5/ Twitter: @robertnyman
robertnyman.com/css3/