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.
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;
}
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");
};
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
};
};
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;
};
83. // 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;
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);