Download as PDF, PPTX
![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
};
};](https://image.slidesharecdn.com/html5apis-wherenomanhasgonebefore-parisweb-111013050140-phpapp02/85/HTML5-APIs-Where-No-Man-Has-Gone-Before-Paris-Web-34-320.jpg)
![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);
}
}](https://image.slidesharecdn.com/html5apis-wherenomanhasgonebefore-parisweb-111013050140-phpapp02/85/HTML5-APIs-Where-No-Man-Has-Gone-Before-Paris-Web-35-320.jpg)
![squareVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
vertices = [
1.0, 1.0, 0.0,
-1.0, 1.0, 0.0,
1.0, -1.0, 0.0,
-1.0, -1.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
squareVertexPositionBuffer.itemSize = 3;
squareVertexPositionBuffer.numItems = 4;
}](https://image.slidesharecdn.com/html5apis-wherenomanhasgonebefore-parisweb-111013050140-phpapp02/85/HTML5-APIs-Where-No-Man-Has-Gone-Before-Paris-Web-70-320.jpg)
Uploaded byRobert Nyman
HTML5 APIs - Where No Man Has Gone Before! - Paris Web
The document provides an overview of various HTML5 APIs including web storage, offline web applications, geolocation, the history API, web sockets, the file API, video, canvas, and more. It includes code examples demonstrating how to use sessionStorage, localStorage, offline caching manifests, geolocation, pushState, web sockets, reading files, drawing to canvas, and other APIs. The document is intended to introduce developers to new capabilities provided by HTML5.
More Related Content
Similar to HTML5 APIs - Where No Man Has Gone Before! - Paris Web
![Getting Started with Apache Spark: Big Data Made Simple [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/apachesparkgettingstarted-260203175547-8361bcc3-thumbnail.jpg?width=640&height=640&fit=bounds)
HTML5 APIs - Where No Man Has Gone Before! - Paris Web
- 1. HTML5 APIs - WhereNo Man Has Gone Before!
- 3. Mozilla is aglobal non-profit dedicated to putting you in control of your online experience and shaping the future of the Web for the public good
- 6.
- 7.
- 9.
- 10.
- 11. var anthonyWeiner ={ "Interest" : "Photography", "Social" : "Twitter" }; localStorage.setItem("anthonyWeiner", JSON.stringify(anthonyWeiner)); console.log(typeof JSON.parse(localStorage.getItem("anthonyWeiner")));
- 12. Web SQL IndexedDB
- 13.
- 14. 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; }
- 15. // Poll thenavigator.onLine property setInterval(function () { console.log(navigator.onLine); }, 1000);
- 16.
- 17. CACHE MANIFEST # VERSION10 CACHE: offline.html base.css FALLBACK: online.css offline.css NETWORK: /live-updates
- 18.
- 19. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { alert(position.coords.latitude + ", " + position.coords.longitude); }); }
- 22.
- 23.
- 24. var url ="http://robertnyman.com", title = "My blog", state = { address : url }; window.history.pushState(state, title, url);
- 26.
- 28. var ws =new WebSocket("ws://robertnyman.com/wsmagic"); // Send data ws.send("Some data"); // Close the connection ws.close();
- 29. var ws =new WebSocket("ws://robertnyman.com/wsmagic"); // When connection is opened ws.onopen = function () { console.log("Connection opened!"); }; // When you receive a message ws.onmessage = function (evt) { console.log(evt.data); }; // When you close the connection ws.onclose = function () { console.log("Connection closed"); }; // When an error occurred ws.onerror = function () { console.log("An error occurred"); };
- 30.
- 32.
- 33. <!-- The multiple attribute allows for uploading of multiple files --> <input id="files-upload" type="file" multiple>
- 34. 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 }; };
- 35. 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); } }
- 36. // 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);
- 38.
- 39.
- 40. <video controls> <source src="nasa.mp4"></source> <source src="nasa.webm"></source> <p>Hello, older web browser</p> </video>
- 42.
- 49.
- 50. <canvas id="my-canvas" width="500"height="500"> I am canvas </canvas>
- 51. var canvas =document.getElementById("my-canvas"), context = canvas.getContext("2d"); context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100);
- 52. context.save(); context.fillStyle = "rgba(0,0, 200, 0.5)"; context.fillRect(50, 50, 100, 100); context.clearRect(40, 40, 20, 20); context.restore();
- 54. context.fillRect(350, 50, 100,100); context.lineWidth = "10"; context.lineJoin = "round"; context.moveTo(50, 50); context.lineTo(200, 200); context.lineTo(100, 300); context.closePath(); context.stroke(); context.fill(); context.beginPath(); context.strokeStyle = "#00f"; context.arc(200, 400, 75, 0, Math.PI*2, false); context.stroke();
- 57. context.fillStyle = "#fff"; context.fillRect(0,0, 200, 200); context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100); context.fillRect(100, 100, 100, 100);
- 59. context.strokeStyle = "transparent"; context.arc(100,100, 75, 0, Math.PI*2, false); context.clip(); context.stroke(); context.fillStyle = "#fff"; context.fillRect(0, 0, 200, 200); context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100); context.fillRect(100, 100, 100, 100);
- 61. var canvas =document.getElementById("my-canvas"), context = canvas.getContext("2d"), img = document.createElement("img"); img.addEventListener("load", function () { context.drawImage(img, 0, 0, 600, 200); // Get canvas content as a base64 image var base64Img = canvas.toDataURL("image/png"); }, false); img.setAttribute("src", "view.jpg");
- 62.
- 65.
- 66.
- 70. squareVertexPositionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER,squareVertexPositionBuffer); vertices = [ 1.0, 1.0, 0.0, -1.0, 1.0, 0.0, 1.0, -1.0, 0.0, -1.0, -1.0, 0.0 ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); squareVertexPositionBuffer.itemSize = 3; squareVertexPositionBuffer.numItems = 4; }
- 71. var teapotPositions =new Float32Array([ 17.83489990234375, 0, 30.573999404907227, 16.452699661254883, -7.000179767608643, 30.573999404907227, 16.223100662231445, -6.902520179748535, 31.51460075378418, 17.586000442504883, 0, 31.51460075378418, 16.48940086364746, -7.015810012817383, 31.828100204467773, 17.87470054626465, 0, 31.828100204467773, 17.031099319458008, -7.246280193328857, 31.51460075378418, 18.46190071105957, 0, 31.51460075378418, 17.62779998779297, -7.500199794769287, 30.573999404907227, 19.108800888061523, 0, 30.573999404907227, 12.662699699401855, -12.662699699401855, 30.573999404907227, 12.486100196838379, -12.486100196838379, 31.51460075378418, 12.690999984741211, -12.690999984741211, 31.828100204467773, 13.10789966583252, -13.10789966583252, 31.51460075378418, 13.56719970703125, -13.56719970703125, 30.573999404907227, 7.000179767608643, -16.452699661254883, 30.573999404907227, 6.902520179748535, -16.223100662231445, 31.51460075378418, 7.015810012817383, -16.48940086364746, 31.828100204467773, 7.246280193328857, -17.031099319458008, 31.51460075378418, 7.500199794769287, -17.62779998779297, 30.573999404907227, 0, -17.83489990234375, 30.573999404907227, 0, -17.586000442504883, 31.51460075378418, 0, -17.87470054626465, 31.828100204467773, 0, -18.46190071105957, 31.51460075378418, 0, -19.108800888061523, 30.573999404907227, 0, -17.83489990234375, 30.573999404907227, -7.483870029449463, -16.452699661254883, 30.573999404907227, -7.106579780578613, -16.223100662231445, 31.51460075378418, 0, -17.586000442504883, 31.51460075378418, -7.07627010345459, -16.48940086364746, 31.828100204467773, 0, -17.87470054626465, 31.828100204467773, -7.25383996963501, -17.031099319458008, 31.51460075378418, 0, -18.46190071105957, 31.51460075378418, -7.500199794769287, -17.62779998779297, 30.573999404907227, 0, -19.108800888061523, 30.573999404907227, -13.092700004577637, -12.662699699401855, 30.573999404907227, -12.667499542236328, -12.486100196838379, 31.51460075378418, -12.744799613952637, -12.690999984741211, 31.828100204467773, -13.11460018157959, -13.10789966583252, 31.51460075378418, -13.56719970703125, -13.56719970703125, 30.573999404907227, -16.61389923095703, -7.000179767608643, 30.573999404907227, -16.291099548339844, -6.902520179748535, 31.51460075378418, -16.50950050354004, -7.015810012817383, 31.828100204467773, -17.033599853515625, -7.246280193328857, 31.51460075378418, -17.62779998779297, -7.500199794769287, 30.573999404907227, -17.83489990234375, 0, 30.573999404907227, -17.586000442504883, 0, 31.51460075378418, -17.87470054626465, 0, 31.828100204467773, -18.46190071105957, 0, 31.51460075378418, -19.108800888061523, 0, 30.573999404907227, -17.83489990234375, 0, 30.573999404907227, -16.452699661254883, 7.000179767608643,
- 73.
- 75.
- 79. HTML5 - The beauty of the Open Web
- 81. Robert Nyman robertnyman.com/speaking/ robnyman@mozilla.com robertnyman.com/html5/ Twitter: @robertnyman robertnyman.com/css3/