HTML5 en JavaScript

JavaScript wordt beschouwd als de programmeertaal van het World Wide Web.
We hebben al eerder vermeld dat in HTML5-pagina’s vaak gebruik gemaakt wordt van deze scriptingtaal. In deze paragraaf laten we als afronding van de module een paar voorbeelden zien van wat er met JavaScript zoal mogelijk is.

Canvas
In HTML5 wordt het element canvas gebruikt om te tekenen. De naam canvas refereert naar het doek dat schilders gebruiken om olieverfschilderijen op te maken. Dat doek is gemaakt van canvas. Dat is stof die gemaakt is van vlas, hennep, jute of katoen.

In HTML5 is de canvas het gebied waarop getekend kan worden. Om echt te kunnen tekenen, zijn scripts nodig. Daarvoor wordt onder andere JavaScript gebruikt. Standaard heeft het element canvas geen rand en inhoud. De attributen width en height geven de afmetingen van het canvas aan. In HTML noteer je bijvoorbeeld <canvas width="300" height=”150”></canvas>.

Aan de begintag voegen we het attribuut id toe:
<canvas id=”mijnCanvas” width=”300” height=”150”></canvas>

Het vermelden van het attribuut id is nodig omdat we in de JavaScript-code gaan verwijzen naar deze id. We voegen aan de code van het HMTL-voorbeelddocument dat we telkens in deze module hebben gebruikt een canvas toe. De opmaak van de webpagina regelen we voor het gemak even in een aparte stylesheet canvas.css

HTML-code:
<!DOCTYPE html>
<html lang="nl">
     <head>
           <title>canvas</title>
           <meta charset="utf-8">
           <link rel="stylesheet" href="css/canvas.css">
     </head>
     <body>
           <canvas id=”mijnCanvas” width=”300” height=”150”></canvas>
     </body>
</html>
CSS-code:
body
{
    color: black;
    background: #afeeee;
}
canvas
{
    border: 1px black solid;
    background: #00ffff;
}


De rechthoek is het gebied waarop we kunnen gaan tekenen. De afmetingen van de tekening worden aangegeven in pixels. Dat geldt ook voor het aangeven van de positie van de tekening op het canvas. Daarvoor wordt een horizontale en verticale nummering gebruikt. Een plaatsbepaling bestaat dus uit twee getallen. Het punt in de linkerbovenhoek van de canvas is het punt (0,0). In de popup heeft het punt in de rechteronderhoek de coördinaten (300, 150).

We gaan nu een lijn op het canvas tekenen die begint op positie (0,0) en eindigt op positie (300, 150). Daarvoor gebruiken we JavaScript:

var c = document.getElementById("mijnCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

De code staat in de body van het gebruikte HTML-document.

<body>
     <canvas id="mijnCanvas" width="300" height="150"></canvasy>
     <script>
               var c = document.getElementById("mijnCanvas");
               var ctx = c.getContext("2d");
               ctx.moveTo(0,0);
               ctx.lineTo(300,150);
               ctx.stroke();
     </script>
</body>

In de eerste regel JavaScript-code verwijzen we naar onze canvas met id mijnCanvas. Vervolgens roepen we de functie getContext() aan. Deze functie krijgt de parameter “2d” mee.

Zonder het aanroepen van deze functie is het niet mogelijk om te tekenen. De functie moveTo() geeft een punt op het canvas aan vanwaar we willen gaan tekenen. De functie lineTo() geeft het punt aan waar de lijn naar toe moet lopen. Voor het zichtbaar maken van de lijn gebruiken we de functie stroke()

Geolocatie
Geolocation wordt in HTML5 gebruikt om te lokaliseren waar iemand zich bevindt. Voor het aanduiden van plaatsen op aarde en het berekenen van onderlinge afstanden worden lengte- en breedtegraden gebruikt. Lengtegraden zijn de denkbeeldige verticale cirkelbogen ( meridianen) die vanaf de Noordpool via de evenaar naar de Zuidpool lopen. De breedtegraad van een plek op Aarde is de hoek die de verbindingslijn tussen die plek en het middelpunt van de Aarde met het vlak van de evenaar maakt. De Engelse term voor lengtegraad is longitude.
Een breedtegraad wordt latitude genoemd.

Aangezien het opvragen van geografische coördinaten privacygevoelige informatie kan zijn, moet er van tevoren toestemming worden gegeven om dit te mogen doen.
Niet alle browsers ondersteunen geolocation. Bekijk de screenshots  hieronder. Hierin zie je wat er gebeurt als in Internet Explorer gebruik gemaakt wordt van geolocation. De broncode van de HTML-pagina staat eronder.

<!DOCTYPE html>
<html lang="nl">
     <head>
           <title>geolocation</title>
           <meta charset="utf-8">
     </head>
     <body>
           <p id="positie">Klik op de knop om je positie op te vragen:</p>
           <button onclick="getLocation()">Klik hier</button>
           <script>
                 var x = document.getElementById("positie");
                 function getLocation()
                 {
                 navigator.geolocation.getCurrentPosition(showPosition);
                 }
                 function showPosition(position)
                 {
                       x.innerHTML="Breedtegraad: " +
                       position.coords.latitude +
                       "<br>Lengtegraad: " + position.coords.longitude;
                 }
           </script>
     </body>
</html>