Table of Contents 01. Getting to Know HTML5 02. Introducing JavaScript and the DOM 03. Events, Handlers and All that Jazz 04. JavaScript functions and Objects (05. Geolocation) 06. Talking to the web 07. Canvas 08. Video 09. Web Storage 10. Web Workers


01. Getting to Know HTML5 minimal html5 document:

<**!**doctype html>

<meta charset=“utf-8”>

<linkrel="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 tag


02. Introducing JavaScript and the DOM var element = document.getElementById(“idName”); element.innerHTML = “nieuwe tekst”; function initBlaBla() {…} window.onload=initBlaBla; var arr = new Array(); arr[1]=“tests”; var arr = [4,8,6]; var length = arr.length; Math.floor(x); Math.random() * arr.length; Book: David Flanagan - Javascript: The Definitive Guide undefined != null


03. Events, Handlers and All that Jazz H3: Events, Handlers, … - Interaction

DOM: Document Object Model

adding a click listener to a button

button.onclick = handleButtonClick; // self defined function

function handleButtonClick(){

alert(“Button was clicked”);

}

access or edit value of input text field

txt.value = “new text”; // for input text fields

creating a DOM element and add it to the page

var li = document.createElement(“li”);

ul.appendChild(li);


04. JavaScript functions and Objects

Arguments VS Parameters:

fName(arg);

function fName(param){

return param;

}

parameters: pass-by-value objects: pass-by-reference function without return, returns ‘undefined’ functions are values

Object Literals:

var obj = {

name : “name”,

rank : 3,

arrName : [“elt0”,“elt1”],

methodName : function(){…}

}

obj.name;

obj[“name”];

for(prop in obj){…}

Add/remove property to object

obj.newFieldName = “test”;

delete obj.newFieldName; // undefined

current time:

new Date().getTime();

Function vs Method

  • function: global

  • method: object-bound

Constructor(function with statements using ’this')

function Dog(name, weight){

this.name= name;

this.weight = weight;

this.bark = function(){…};

}

var instance = new Dog(“fido”, 46);

Assigning a variable without ‘var’ makes it global, even when done in a function


06. Talking to the web

A) XHRorAJAX: XML Http Request

  • secure
  • only from same server as webpage
  • not only JSON

var request = new XMLHttpRequest();

request.open(“GET”, url);

request.onload = function() {

if (request.status == 200) {

alert(“Data received!”);

}

};

request.send(null); // or data you want to send

JSON: JavaScript Object Notation

JSON.stringify(movie);

JSON.parse(jsonString);

? WHY does ‘for..in’ not work but ‘for i-n++’ does work? > because ‘for..in’ is more complicated than ‘for..i-n++’ -—————————————————————————- B) JSONP: json with Padding

  • less secure
  • from ANY server
  • automatically parsed as JavaScript
  • usually callback function

var newScriptElement = document.createElement(“script”);

newScriptElement.setAttribute(“src”, url);

newScriptElement.setAttribute(“id”, “jsonp”);

insert a script tag

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

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

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

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


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 exists

var 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

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