Download as PDF, PPTX
![var dataset = [];
for (var i in customAttributes.dataset) {
dataset.push(i + ": " + customAttributes.dataset[i]);
}](https://image.slidesharecdn.com/html5workshoppart2-120213100856-phpapp01/75/HTML5-workshop-part-2-9-2048.jpg)
![var request = indexedDB.open("ABBADatabase", 2),
customerData = [
{ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com"},
{ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org"}
];
request.onerror = function(event) {
// Handle errors.
};
request.onupgradeneeded = function (event) {
var objectStore = db.createObjectStore("customers", {
keyPath: "ssn"}
);
objectStore.createIndex("name", "name", {
unique: false
});
objectStore.createIndex("email", "email", {
unique: true }
);
for (var i in customerData) {
objectStore.add(customerData[i]);
}
};](https://image.slidesharecdn.com/html5workshoppart2-120213100856-phpapp01/75/HTML5-workshop-part-2-40-2048.jpg)
![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/html5workshoppart2-120213100856-phpapp01/75/HTML5-workshop-part-2-63-2048.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/html5workshoppart2-120213100856-phpapp01/75/HTML5-workshop-part-2-64-2048.jpg)
![(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);
})();](https://image.slidesharecdn.com/html5workshoppart2-120213100856-phpapp01/75/HTML5-workshop-part-2-86-2048.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/html5workshoppart2-120213100856-phpapp01/75/HTML5-workshop-part-2-92-2048.jpg)
Uploaded byRobert Nyman
HTML5 workshop, part 2
The document discusses several new HTML5 APIs including the classList API for manipulating element classes, custom data attributes, video and audio APIs, and the canvas API. It provides examples of how to use each API, listing methods and properties for the video API and describing how to draw shapes, images and text to the canvas. It also lists many of the new events available for video elements.
More Related Content
HTML5 workshop, part 2
- 1. HTML5 APIs - WhereNo Man Has Gone Before!
- 3.
- 4. 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();
- 5.
- 6. <p data-type="police" data-value="Iam da law!"> An element with custom data attributes </p>
- 7. var customAttributes =document.getElementById("custom-attributes"); customAttributes.getAttribute("data-type"); customAttributes.getAttribute("data-value");
- 8.
- 9. var dataset =[]; for (var i in customAttributes.dataset) { dataset.push(i + ": " + customAttributes.dataset[i]); }
- 10.
- 13.
- 14. // Properties video.paused; video.muted; video.autobuffer; video.autoplay; video.buffered; (Unimplemented) video.bufferedBytes;(Unimplemented) video.bufferingRate; (Unimplemented) video.bufferingThrottled; (Unimplemented) video.controls; video.currentSrc; video.currentTime; video.defaultPlaybackRate; video.duration; video.ended; video.error; video.muted; video.networkState; video.paused; video.playbackRate; video.readyState; video.seeking; video.src; video.totalBytes; video.volume;
- 15. // Events video.abort; video.canplay; video.canplaythrough; video.canshowcurrentframe; video.dataunavailable; video.durationchange; video.emptied; video.empty; video.ended; video.error; video.loadedfirstframe; video.loadedmetadata; video.loadstart; video.pause; video.play; video.progress; (lengthComputable,loaded, total) video.ratechange; video.seeked; video.seeking; video.suspend; video.timeupdate; video.volumechange;
- 16.
- 17. <canvas id="my-canvas" width="500"height="500"> I am canvas </canvas>
- 18. var canvas =document.getElementById("my-canvas"), context = canvas.getContext("2d"); context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100);
- 19. context.save(); context.fillStyle = "rgba(0,0, 200, 0.5)"; context.fillRect(50, 50, 100, 100); context.clearRect(40, 40, 20, 20); context.restore();
- 21. 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();
- 24. context.fillStyle = "#fff"; context.fillRect(0,0, 200, 200); context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100); context.fillRect(100, 100, 100, 100);
- 26. 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);
- 28. 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");
- 29.
- 31.
- 32.
- 34.
- 35.
- 36. var anthonyWeiner ={ "Interest" : "Photography", "Social" : "Twitter" }; localStorage.setItem("anthonyWeiner", JSON.stringify(anthonyWeiner)); console.log(typeof JSON.parse(localStorage.getItem("anthonyWeiner")));
- 37. Web SQL IndexedDB
- 38.
- 39. var indexedDB =window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB; var request = indexedDB.open("ABBADatabase");
- 40. var request =indexedDB.open("ABBADatabase", 2), customerData = [ {ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com"}, {ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org"} ]; request.onerror = function(event) { // Handle errors. }; request.onupgradeneeded = function (event) { var objectStore = db.createObjectStore("customers", { keyPath: "ssn"} ); objectStore.createIndex("name", "name", { unique: false }); objectStore.createIndex("email", "email", { unique: true } ); for (var i in customerData) { objectStore.add(customerData[i]); } };
- 41.
- 42. 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; }
- 43. // Poll thenavigator.onLine property setInterval(function () { console.log(navigator.onLine); }, 1000);
- 44.
- 46. CACHE MANIFEST # VERSION10 CACHE: offline.html base.css FALLBACK: online.css offline.css NETWORK: /live-updates
- 47.
- 48. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { alert(position.coords.latitude + ", " + position.coords.longitude); }); }
- 52.
- 53.
- 54. var url ="http://robertnyman.com", title = "My blog", state = { address : url }; window.history.pushState(state, title, url);
- 56.
- 57. LiveConnect Forever Frame HTTP Long-Polling and XHR Streaming What came before WebSockets? AJAX HTTP Polling Cross Frame Communication
- 58. var ws =new WebSocket("ws://robertnyman.com/wsmagic"); // Send data ws.send("Some data"); // Close the connection ws.close();
- 59. 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"); };
- 60.
- 61.
- 62. <!-- The multiple attribute allows for uploading of multiple files --> <input id="files-upload" type="file" multiple>
- 63. 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 }; };
- 64. 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); } }
- 65. // 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);
- 66.
- 67. ...I am forcedto conclude that the HTML5 drag and drop module is not just a disaster, it’s a fucking disaster. -Peter-Paul Koch
- 68.
- 69. <p id="drop-area"> Drag and drop files here </p>
- 70. 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; };
- 71. someImg.ondragstart = function(evt) { var event = evt || window.event; event.dataTransfer.setDragImage(dragIcon, -10, -10); return false; };
- 72.
- 73. var worker =new Worker("worker.js");
- 74. // Main pagecode 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"; };
- 75. // Web Workercode onmessage = function (evt) { for (var i=evt.data, il=1000001; i<il; i++) { postMessage(i); }; };
- 76.
- 77. <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>
- 78.
- 79. html:-moz-full-screen { background: red; } html:-webkit-full-screen { background: red; }
- 82.
- 83. // Get batterylevel 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;
- 84. 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);
- 85.
- 86. (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); })();
- 87.
- 92. 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; }
- 93. 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,
- 96.
- 100. Robert Nyman robertnyman.com/speaking/ robnyman@mozilla.com robertnyman.com/html5/ Twitter: @robertnyman robertnyman.com/css3/