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
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
Msg when canvas not supported
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 = 5

c.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:
tag in