Datum en tijd gebruiken met Javascript

Met Javascript is het mogelijk de datum en tijd uit te lezen van de computer/telefoon van de bezoeker van je website. Dat kan bijvoorbeeld gebruikt worden aan te geven hoe lang een kortingsactie nog geldig is.

Javascript kan in 1 opdracht alle tijdsgegevens ophalen. Die worden samen in een variabel opgeslagen. We geven die variabel de naam ‘tijd’ Als we de inhoud van ‘tijd’ opvragen in een alert-bericht krijgen we een rij gegevens te zien (dag, maand, datum, jaar, uren, minuten, seconden).

<body>
<script type=”text/javascript”>
var tijd=new Date();
alert(tijd);
</script>
</body>

Om die gegevens beter te kunnen gebruiken is het handiger om die variabel ‘tijd’ met de rij gegevens op te knippen in afzonderlijke variabelen. Dat kun je doen door van alle gegevens van ‘tijd’ er 1 op te vragen. In onderstaand voorbeeld wordt binnen alle gegevens van ‘tijd’ gezocht naar het huidige jaar.

<script type=”text/javascript”>
var tijd=new Date();
var jaar=tijd.getFullYear();
alert(jaar);
</script>

Op dezelfde manier zijn ook de andere gegevens als afzonderlijke variabelen op te slaan, maar bij het opvragen van de maand is iets bijzonders te zien. Het lijkt er namelijk op dat Javascript er een maand naast lijkt te zitten. In April (de 4e maand) geeft Javascript als antwoord ‘3’ bij het uitvoeren van de functie getMonth(). De reden hiervoor is dat Javascript niet bij ‘1’ begint te tellen, maar bij ‘0’.

<script type=”text/javascript”>
var tijd=new Date();
var jaar=tijd.getFullYear();
var maand=tijd.getMonth();
alert(maand);
</script>

De opdracht ‘getDate()’ geeft gewoon aan de hoeveelste dag van de maand het is, maar als we de dag opvragen krijgen met ‘getDay()’ zien we dat Javascript een getal geeft in plaats van de naam van de dag. Ook nu begint Javascript bij ‘0’ te tellen.

<script type=”text/javascript”>
var tijd=new Date();
var jaar=tijd.getFullYear();
var maand=tijd.getMonth();
var datum=tijd.getDate();
alert(datum);
</script>

<script type=”text/javascript”>
var tijd=new Date();
var jaar=tijd.getFullYear();
var maand=tijd.getMonth();
var datum=tijd.getDate();
var dag=tijd.getDay();
alert(dag);
</script>

De uren, minuten en seconden worden gegeven in de verwachte getallen.

<script type=”text/javascript”>
var tijd=new Date();
var jaar=tijd.getFullYear();
var maand=tijd.getMonth();
var datum=tijd.getDate();
var dag=tijd.getDay();
var uren=tijd.getHours();
var minuten=tijd.getMinutes();
var seconden=tijd.getSeconds();
alert(seconden);
</script>

We zijn nu zover dat we met Javascript de datum gegevens uit kunnen lezen en bewaren in variabelen. Die variabelen hebben we vertoont in een alert-pop up. Het wordt boeiender als we deze variabelen kunnen toepassen binnen een html-document. Als voorbeeld maken we een eenvoudige klok. Om te beginnen hebben we in de body een tekst-tag nodig. Die geven we de id ‘klok’ zodat we deze tag makkelijk met Javascript kunnen vinden.

<body>
<h1 id=”klok”></h1>

<script type=”text/javascript”>

Vervolgens laten we Javascript zoeken naar een tag met de id ‘klok’. Die zoektocht wordt opgeslagen in een variabel. Daarna plaatsen we de uren, minuten en seconden in ‘klok’ door gebruik te maken van de opdracht ‘innerHTML’. De uren, minuten en seconden worden gescheiden door een dubbele punt(:).

<script type=”text/javascript”>
var tijd=new Date();
var jaar=tijd.getFullYear();
var maand=tijd.getMonth();
var datum=tijd.getDate();
var dag=tijd.getDay();
var uren=tijd.getHours();
var minuten=tijd.getMinutes();
var seconden=tijd.getSeconds();
//alert(seconden);

var klok=document.getElementById(“klok”);
klok.innerHTML=uren +”:” +minuten +”:” +seconden;
</script>

Nu wordt de juiste tijd weergegeven in een html pagina. Het valt wel meteen op dat de klok stil staat. De opdracht aan Javascript om de datum gegevens op te halen, op te slaan in variabelen en te vertonen in de h1-tag ‘klok’, wordt namelijk maar 1 keer uitgevoerd.

Om Javascript de tijd elke seconde te laten verversen hebben we een functie nodig die door een ‘setInterval’ geactiveerd wordt. Daarvoor moeten we een aantal dingen aanpassen. Om te beginnen worden alle variabelen die we nodig hebben al wel gemaakt/benoemd, maar nog zonder waarde. Daarna maken we een ‘setInterval’ die elke seconde de functie ‘veranderTijd()’ uitvoert. De functie ‘veranderTijd’ leest de actuele tijd en plaatst die in de variabelen.

<script type=”text/javascript”>
var tijd;
var jaar;
var maand;
var datum;
var dag;
var uren;
var minuten;
var seconden;
//alert(seconden);

var klok=document.getElementById(“klok”);
klok.innerHTML=uren+”:” +minuten+”:” +seconden;
var interval=setInterval(veranderTijd,1000);

function veranderTijd()
{
     tijd=new Date();
     jaar=tijd.getFullYear();
     maand=tijd.getMonth();
     datum=tijd.getDate();
     dag=tijd.getDay();
     uren=tijd.getHours();
     minuten=tijd.getMinutes();
     seconden=tijd.getSeconds();
}
</script>

Nu wordt de tijd elke seconde bijgewerkt, maar dat is nog niet te zien in ‘klok’. Daarom moet de opdracht om html aan te passen van ‘klok’ ook verplaatst worden naar een plek binnen de functie ‘veranderTijd’. Na 1 seconde wordt deze functie uitgevoerd. Dat zorgt ervoor dat we 1 seconde moeten wachten voordat onze klok zichtbaar is en gaat lopen. Om dat op te lossen kunnen we Javascript de opdracht geven om bij het laden van het document alvast 1 keer de functie ‘veranderTijd’ uit te voeren. Dat wordt vervolgens elke seconde herhaalt door ‘interval’.

<script type=”text/javascript”>
var tijd;
var jaar;
var maand;
var datum;
var dag;
var uren;
var minuten;
var seconden;
//alert(seconden);

var klok=document.getElementById(“klok”);

var interval=setInterval(veranderTijd,1000);

function veranderTijd()
{
     tijd=new Date();
     jaar=tijd.getFullYear();
     maand=tijd.getMonth();
     datum=tijd.getDate();
     dag=tijd.getDay();
     uren=tijd.getHours();
     minuten=tijd.getMinutes();
     seconden=tijd.getSeconds();

     klok.innerHTML=uren+”:” +minuten+”:” +seconden;
}
veranderTijd();
</script>