localStorage/ sessionStorage

• localStorage lagrer data i nettleseren uten utløpsdato
• sessionStorage lagrer data i nettleseren som slettes når siden lukkes
• localStorage.setItem ("navn", "Øivind Kolloen");
• localStorage.navn = "Øivind Kolloen";
• Bruk setItem dersom "variabel navnet" inneholder mellomrom
• var navn = sessionStorage.getItem ("navnet mitt");

Eksempel med localStorage

<input id="localStorageData"/>
<input type="button" id="localStorageStore" value="Lagre"/>
<input type="button" id="localStorageFetch" value="hent"/>
<script>
	document.querySelector("#localStorageStore").onclick = function() {
		localStorage.setItem ("localStorageItem", document.querySelector("#localStorageData").value);
	};
	document.querySelector("#localStorageFetch").onclick = function() {
		document.querySelector("#localStorageData").value = localStorage.getItem ("localStorageItem");
	};
</script>

Geolocation (hvor er jeg)

• Mobiler har vanligvis GPS som kan gi plassering med svært stor nøyaktighet
• Selv uten GPS kan en på en mobil bruke triangulering mellom mobilmaster for å finne plassering
• "Vanlig" datamaskiner vet vanligvis også sin plassering, dette er lagt inn av tilbydere av trådløsnett/kablede nett
• I nettleseren kan en finne denne plasseringen ved hjelp av navigator.geolocation objektet

navigator.geolocation

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
    console.err = "Geolocation is not supported by this browser.";
}

• showPosition og showError er funksjoner som kalles henholdsvis dersom plassering blir funnet og dersom plassering ikke blir funnet.

Kunne ikke finne plasseringen

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}

Vise plasseringen

function showPosition(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;

    var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="
    +latlon+"&zoom=14&size=400x300&sensor=false";
    var p = document.createElement ("P");
    p.innerHTML ("Du er her : "+latlon+"<br/><img src='"+img_url+"'>");
    document.querySelector("body").appendChild (p);
}

Demo av geolocation

Mer komplekst eksempel

Canvas

• Canvas kan brukes til alle typer av tegning
• Canvas brukes for å fremstille grafer direkte i en nettside
• Canvas brukes for å lage spill i HTML/JavaScript
• Canvas brukes for å lage bilde/video editorer i HTML/JavaScript
• Canvas kan brukes for å vise video i HTML/JavaScript

Enkelt canvas

<canvas id="canvas" style="width:300px; height:200px; background-color: #FFF;">
</canvas>
<script>
	var canvas = document.querySelector("#canvas");
	var ctx=c.getContext("2d");
	ctx.fillStyle="#FF0000";
	ctx.fillRect(20,20,100,50);
</script>

Canvas med gradient

<canvas id="canvas" style="width:300px; height:200px; background-color: #FFF;">
</canvas>
<script>
	var canvas = document.querySelector("#canvas");
	var ctx=c.getContext("2d");
	var grd=ctx.createLinearGradient(140,20,240,70);
	grd.addColorStop(0,"black");
	grd.addColorStop(1,"white");
	ctx.fillStyle=grd;
	ctx.fillRect(140,20,100,50);
</script>

Canvas med flerfarge gradient

<canvas id="canvas" style="width:300px; height:200px; background-color: #FFF;">
</canvas>
<script>
	var canvas = document.querySelector("#canvas");
	var ctx=c.getContext("2d");
	var grd2=ctx.createLinearGradient(20,90,120,90);
	grd2.addColorStop(0,"black"); grd2.addColorStop("0.3","magenta"); 
	grd2.addColorStop("0.5","blue"); grd2.addColorStop("0.6","green"); 
	grd2.addColorStop("0.8","yellow"); grd2.addColorStop(1,"red");
	ctx.fillStyle=grd2;
	ctx.fillRect(20,90,100,50);
</script>

Canvas med flerfarget tekst

<canvas id="canvas" style="width:300px; height:200px; background-color: #FFF;">
</canvas>
<script>
	var canvas = document.querySelector("#canvas");
	var ctx=c.getContext("2d");
	ctx.font="30px Verdana";
	var grd3=ctx.createLinearGradient(140,20,240,90);
	grd3.addColorStop(0,"black"); grd3.addColorStop("0.3","magenta");
	grd3.addColorStop("0.6","blue"); grd3.addColorStop("0.8","green");
	grd3.addColorStop(1,"red");
	ctx.strokeStyle=grd3;
	ctx.strokeText("Smile!",140,120); 
</script>

Størrelse på canvas

• Ved å sette størrelse via <canvas height="h" width="w"> vil tegneflaten bli h*w
• canvas.height/canvas.width er tegneflatens høyde/bredde
• canvas.style.height/canvas.style.width er høyde/bredde til canvas elementet på siden
• Ved å sette størrelsen via <canvas style="height:300px; width: 200px"> så blir canvas.height/canvas.width satt automatisk
• Hva er standard størrelse på canvas (tegneområdet)?

IndexedDB - Databasen rett i nettleseren

• indexedDB gir en fullverdig object store database direkte i nettleseren
• indexedDB er IKKE en relasjonsdatabase
• indexedDB lagrer javascript objekter
• En kan bruke indekser i indexedDB
• Det er IKKE mulig å koble "tabeller" i en object store
• Mer om indexedDB

IndexedDB - et eksempel

Video og bilde fra lokalt kamera

• Kameraer finnes på alle typer enheter, disse kan brukes til å ta video
• Fra enhver video kan en hente ut enkeltbilder
• Video kan vises på canvas, og så kan en legge på mer informasjon på toppen av denne
• Dette kan f.eks. brukes til augmented reality.
• Bruk kamera på en telefon, posisjon fra GPS og rettning fra kompass. Da kan en på skjermen vise en utvidet virkelighet.
• Mer om getUserMedia

Enkelt eksempel, bilde fra kamera

WebWorkers

Multithreading i JavaScript

HTML kode

<body>
<button id="start">Start en kjempejobb</button>
<button id="stop">Avbryt en kjempejobb</button>
<br/>
<progress max="100" min="0" value="0"></progress>
</body>

WebWorkers - oppsett

var worker = null;

$(function () {
	$('#stop').attr('disabled','disabled');
	$('#start').click(function() { });
	$('#stop').click(function() { });
});

Starte en WebWorker

$('#start').attr('disabled','disabled');
$('#stop').removeAttr('disabled');
worker = new Worker('doWork.js');
worker.addEventListener('message', function(e) {
	if (e.data.complete===100) {
		worker = null;
		$('#start').removeAttr('disabled');
		$('#stop').attr('disabled','disabled');
	}
	$('progress')[0].value = e.data.complete;
}, false);
worker.postMessage({start: true});

Koden i doWork.js

var counter = 0;
addEventListener('message', function(e) {
  var data = e.data;
  if (data.start===true) {
    setTimeout (work, 50);
  }
});

function work() {
  if (counter===100) {
    postMessage ({complete: 100});
    self.close();
  } else {
    setTimeout (work, 50);
  }
  postMessage ({complete: counter++});
} 

Koden i funksjonen for stopp knappen

if (worker!==null) {
	worker.terminate();
	worker = null;
}
$('#stop').attr('disabled','disabled');
$('#start').removeAttr('disabled');