JavaScript APIs - The Web is the Platform

@robertnyman

Mozilla is aglobal non-proﬁt dedicatedto putting youin control ofyour onlineexperience andshaping thefuture of theWeb for thepublic good

File API

<input id="files-upload" type="file" multiple>

var filesUpload = document.getElementById("files-upload");filesUpload.onchange = function () { // Access to data about all files var files = this.files, file; for (var i=0, l=files.length; i<l; i++) { file = file[i]; file.name; // Get the name of the file file.size; // Get the size of the file, in bytes file.type; // Get the type of the file };};

for (var i=0, l=files.length, file, img; i<l; i++) { file = files[i]; if (typeof FileReader !== "undefined") { img = document.createElement("img"); reader = new FileReader(); reader.onload = (function (theImg) { return function (evt) { theImg.src = evt.target.result; }; }(img)); reader.readAsDataURL(file); }}

// For Firefox, Google Chrome and Safarivar xhr = new XMLHttpRequest();xhr.open("post", "upload/upload.php", true);xhr.onreadystatechange = function() { if (this.readyState === 4) { // File uploaded }};// Upload file: Firefox, Google Chrome and Safarixhr.setRequestHeader("Content-Type", "multipart/form-data");xhr.setRequestHeader("X-File-Name", file.fileName);xhr.setRequestHeader("X-File-Size", file.fileSize);xhr.setRequestHeader("X-File-Type", file.type);xhr.send(file);

must die!!! rea lly Not

Fullscreen

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

mozRequestFullScreenWithKeys?

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

Camera

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

WebRTC

Pointer Lock API

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

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

Web Storage

sessionStorage.setItem("Wrestles", "Bears");console.log(sessionStorage.getItem("Wrestles"));

localStorage.setItem("Occupation", "Politician");

var vladimirPutin = { "sings" : "yes", "song" : "Blueberry Hill"};localStorage.setItem("vladimirPutin", JSON.stringify(vladimirPutin));console.log(typeof JSON.parse(localStorage.getItem("vladimirPutin")));

IndexedDB

// 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);

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

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

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

Battery

// 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;

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

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.muted);// Check if the speaker is enabled (read/write property)console.log(tel.speakerEnabled);// Place a callvar call = tel.dial("123456789");

// 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();

// SMS objectvar sms = navigator.mozSMS;// Send a messagesms.send("123456789", "Hello world!");// Recieve a messagesms.onrecieved = function (event) { // Read message console.log(event.message);};

Vibration

WebAPI

Try new things

HTML5 -The beauty of the Open Web

"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/css3/

http://rudevich.com	323
http://hacks.mozilla.org	59
http://www.newsblur.com	30
http://lanyrd.com	25
http://drbeat.li	20
http://thewebdesign.collected.info	14
https://hacks.mozilla.org	11
http://newsblur.com	10
http://127.0.0.1	7
http://webdesigning.collected.info	7
http://htmlfive.collected.info	6
http://webcache.googleusercontent.com	3
http://www.hanrss.com	1
http://www.ofelio.com	1
http://feeds.feedburner.com	1
http://1kpl.us	1
http://hghltd.yandex.net	1
http://nodeslide.herokuapp.com	1
http://us-w1.rockmelt.com	1

JavaScript APIs - The Web is the Platform - .toster conference, Moscow

by Robert Nyman on May 25, 2012

Accessibility

Categories

Upload Details

Usage Rights

19 Embeds 522

Statistics

JavaScript APIs - The Web is the Platform - .toster conference, Moscow Presentation Transcript