html5 apis - where no man has gone before! - altran

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

Post on 29-Aug-2014

2.242 views

Category:

Technology

4 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

  • HTML5 APIs -Where No Man Has Gone Before!
  • classList
  • 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();
  • Web Storage
  • 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")));
  • Web SQL IndexedDB
  • 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); };};
  • Ofine Web Applications
  • if (window.addEventListener) { /* Works well in Firefox and Opera with the Work Offline option in the File menu. Pulling the ethernet cable doesnt 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 propertysetInterval(function () { console.log(navigator.onLine);}, 1000);
  • ...
  • CACHE MANIFEST# VERSION 10CACHE:offline.htmlbase.cssFALLBACK:online.css offline.cssNETWORK:/live-updates
  • History API
  • window.history.pushState(state, title, url);
  • var url = "http://robertnyman.com",title = "My blog",state = { address : url};window.history.pushState(state, title, url);
  • Web Sockets
  • LiveConnect Forever Frame HTTP Long-Polling and XHR Streaming What came before WebSockets? AJAX HTTP PollingCross Frame Communication
  • var ws = new WebSocket("ws://robertnyman.com/wsmagic");// Send dataws.send("Some data");// Close the connectionws.close();
  • var ws = new WebSocket("ws://robertnyman.com/wsmagic");// When connection is openedws.onopen = function () { console.log("Connection opened!");};// When you receive a messagews.onmessage = function (evt) { console.log(evt.data);};// When you close the connectionws.onclose = function () { console.log("Connection closed");};// When an error occurredws.onerror = function () { console.log("An error occurred");};
  • web-socket-js Socket.IO
  • File API
  • 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
  • for (var i=0, l=files.length, file, img; i
  • // 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);
  • Drag and Drop
  • ...I am forced to conclude thatthe HTML5 drag and dropmodule is not just a disaster, itsa fucking disaster. -Peter-Paul Koch
  • Drag and drop files here

  • 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;};
  • someImg.ondragstart = function (evt) { var event = evt || window.event; event.dataTransfer.setDragImage(dragIcon, -10, -10); return false;};
  • Web Workers
  • 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 codeonmessage = function (evt) { for (var i=evt.data, il=1000001; i
  • Fullscreen
  • Fullscreen
  • 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]; //