Book: Head First HTML5 Programming
Table of Contents |
05.Geolocation
01. Getting to Know HTML5 |
minimal html5 document:
<!doctype html><meta charset="utf-8">rel="stylesheet"href="name.css">
var name = "tekst";
var othername = 100;
while(condition){...}
if(condition){}
else{}
name = name + "
"; // string concatination
"; // string concatination
document.write(name); // write string at position of
linking a file usually containing
var data = [{"name":"tw"},{"name":"other}]myCallback(data);
Script injection: insert script tag with JavaScript
var head = document.getElementsByTagName("head")[0];if(oldScriptElement == null){head.appendChild(newScriptElement):
}else{
head.replaceChild(newScriptElement, oldScriptElement);
}
-----------------------------------------------------------------------------
Timer
setInterval(handleRefresh, 3000);
Anti-browser-cache
var url = "http://gumball.wickedlysmart.com/?callback=updateSales" +
"&random=" + (new Date()).getTime();
07. Canvas |
H7 Canvas
canvas html tag
css width and height SCALE the canvas
var cancas = document.getElementById("...");var context = canvas.getContext("2d");
stroke/fill
context.fillRect(x,y,width,height);
checksupport:
if(canvas.getContext){}
check support without canvas in html:
var cavas = document.createElement("canvas");
color(like CSS)
context.fillStyle = "lightblue";
// c --> context
Create paths:
c.beginPath();c.moveTo(x,y);c.lineTo(x,y);...c.closePath();
Draw paths:
c.lineWidth = 5c.stroke();c.fillStyle = "red";c.fill();
Arcs:
angles in radial
direction true is counterClockwise
c.beginPath();c.arc(x,y,radius, startAngle, endAngle, direction);
Text:
c.font = "italic 1.2em serif"; // cfcss
c.textAlign = "left";
c.fillText("text", x,y);
Image:
var img = new Image();
img.src = "url.png";
img.onload = function(){c.drawImage(img, x, y, width, hieght);}
08. Video |
H8 Video
attributes:
- src="url": video file
- width=""
- height=""
- controls: show controls
- preload: load before play is clicked
- autoplay: start playing when loaded
- poster="imgSrc": show this image before playing
- loop: auto replay
Video formats:
- MP4: H264 video + AAC audio
- safari
- IE9
- chrome?
- Ogg: Theora video + Vorbis audio
- firefox
- chrome
- opera
- WebM: Vp8 video + Vorbis audio
- firefox
- chrome
- opera
Fallback flash:
Extra's:
scratch buffer to process video before copying it to the display.
no HTML5 standard for streaming
no standard way of protecting video delivered through the video element
09. Web Storage |
H9: Web Storage - storing things locally
localStorage/sessionStorage---------------------------length---------------------------setItem("key", "value")getItem("key") : "value"key(i) : "key"removeItem("key")clear()
Cookies:
- size=4KB
- key-value pairs
- sent with every HTTP request
Web Storage:
- size=5-10MB per domain
- key-value pairs
- private per browser, per domain
save/load:
localStorage.setItem("key", "value"); // overrides if key already existsvar valueString = localStorage.getItem("key");
or
localStorage["key"] = "value";var value = localStorage["key"];
check if supported
if (window["localStorage"]) {...}
loopthrough whole storage: (undefined order)
for (var i = 0; i < localStorage.length; i++) {var key = localStorage.key(i);var value = localStorage[key];}
FOR IN
for (var key in localStorage) {var value = localStorage[key];}
remove:
localStorage.removeItem("key");
Developer tools of a browser can show all local storage
use JSON to store arrays,objects,... in localstorage
Going over thequota:
try {localStorage.setItem(myKey, myValue);} catch(e) {if (e == QUOTA_EXCEEDED_ERR) {}}
Session Storage:
- remove data on exit
- "sessionStorage" instead of "localStorage"
? Does editing page source allow localStorage.clear() for that domain?
10. Web Workers |
H10 Web Workers
MAIN
check if workers areavailable:
if (window["Worker"]) {var status = document.getElementById("status");status.innerHTML = "Bummer, no Web Workers";}
createworkers:
var worker = new Worker("worker.js");var worker2 = new Worker("worker.js");
communicate(string, array, JSON, not functions):
worker.postMessage("ping");
worker.onmessage = function (event) {var message = "Worker says " + event.data;var worker = event.target;};
WORKER
onmessage = pingPong;function pingPong(event) {if (event.data == "ping") {postMessage("pong");}}
VARIA
scripts:
importScripts("http://bigscience.org/nuclear.js","mylibs/atomsmasher.js");
main:
worker.terminate();
worker:
close();
handle errors (main):
worker.onerror = function(error) {document.getElementById("output").innerHTML ="There was an error in " + error.filename +" at line number " + error.lineno +": " + error.message;}
workers can use
- XMLHttpRequest
- Local Storage