HTML5 APIs - Where no man has gone before! - Altran

HTML5 APIs -
Where No Man Has
Gone Before!

var elm = document.getElementById("classlist-demo");
elm.classList.add("boxy");
elm.classList.add("pretty");
elm.classList.remove("pretty");
elm.classList.toggle("pretty");
elm.classList.contains("pretty");
elm.classList.toString();

sessionStorage.setItem("FU", "Sarah Palin");
console.log(sessionStorage.getItem("FU"));

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

var sarahPalin = {
"contest" : "Miss Alaska pageant",
"Talent" : "Flute playing"
};

localStorage.setItem("sarah", JSON.stringify(sarahPalin));

console.log(typeof JSON.parse(localStorage.getItem("sarah")));

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

createObjectStore = function (dataBase) {
// Create an objectStore
dataBase.createObjectStore("elephants");
}

// Currently only in latest Firefox versions
request.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);
};
};

if (window.addEventListener) {
/*
Works well in Firefox and Opera with the
Work Offline option in the File menu.
Pulling the ethernet cable doesn't seem to trigger it
*/
window.addEventListener("online", isOnline, false);
window.addEventListener("offline", isOffline, false);
}
else {
/*
Works in IE with the Work Offline option in the
File menu and pulling the ethernet cable
*/
document.body.ononline = isOnline;
document.body.onoffline = isOffline;
}

// Poll the navigator.onLine property
setInterval(function () {
console.log(navigator.onLine);
}, 1000);

<!DOCTYPE html>
<html manifest="offline.appcache">
<head>
...

CACHE MANIFEST

# VERSION 10

CACHE:
offline.html
base.css

FALLBACK:
online.css offline.css

NETWORK:
/live-updates

window.history.pushState(state, title, url);

var url = "http://robertnyman.com",
title = "My blog",
state = {
address : url
};

window.history.pushState(state, title, url);

LiveConnect
Forever Frame

HTTP Long-Polling and XHR Streaming

What came before WebSockets?

AJAX
HTTP Polling

Cross Frame Communication

var ws = new WebSocket("ws://robertnyman.com/wsmagic");

// Send data
ws.send("Some data");

// Close the connection
ws.close();

<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 Safari
var 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 Safari
xhr.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);

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

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

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

var worker = new Worker("worker.js");

// Main page code
var worker = new Worker("worker.js");

// postMessage
worker.postMessage(5);

// Receive message back from Worker
worker.onmessage = function (evt) {
document.getElementById("worker-results").innerHTML
= evt.data;
};

// Error handling
worker.onerror = function (evt) {
document.getElementById("worker-results").innerHTML
= "An error occurred";
};

// Web Worker code
onmessage = function (evt) {
for (var i=evt.data, il=1000001; i<il; i++) {
postMessage(i);
};
};

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

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

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

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

var docElm = document.documentElement;

// Requesting Pointer Lock
docElm.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);

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

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

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

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

HTML5 APIs - Where no man has gone before! - Altran

More Related Content

What's hot (20)

Similar to HTML5 APIs - Where no man has gone before! - Altran (20)

More from Robert Nyman (20)

Recently uploaded (20)

HTML5 APIs - Where no man has gone before! - Altran