Voorgedefinieerde objecten

Het Date-object

JavaScript laat ons gebruik maken van enkele voorgedefinieerde objecten. Zo kennen we bijvoorbeeld het Date-object, het Array-object en het Math-object. Er zijn nog verscheidene andere objecten - hiervoor verwijzen we graag naar de reference-guide van Netscape.
Eerst en vooral gaan we eens het Date-object bekijken. Zoals de naam het al zegt laat dit object ons spelen met de tijd en de datum. Zo kunnen we bijvoorbeeld uitrekenen hoeveel dagen ons nog scheiden van Kerstmis of iemand zijn verjaardag of waarom niet het fameuze jaar 2000. We kunnen bijvoorbeeld ook een klokje toevoegen aan ons HTML-document.
Eerst en vooral creeren we een nieuw Date-object. Hiervoor gebruiken we de new operator. De code is als volgt: 

vandaag= new Date()

Dit maakt een nieuw Date-object aan genaamd vandaag. Indien we geen bepaalde datum of tijd specifieren dan zal de huidige datum en uur worden gebruikt.
Het Date-object biedt ons volgende methodes die we kunnen toepassen op het object vandaag. Bijvoorbeeld : getHours(), setHours(), getMinutes(), setMinutes(), getMonth(), setMonth(), enz... .
Let op : het Date-object stelt enkel een bepaalde vastgestelde datum en uur voor. Het betreft hier geen klok die elke seconde automatisch verandert.
Indien we een bepaalde datum wensen voor te stellen (bijvoorbeeld 1/1/2000) dan moeten we hiervoor de Date() methode oproepen via een new operator bij het aanmaken van een nieuw Date-object): 

vandaag= new Date(2000, 0, 1, 21, 35, 23)

Dit zal een Date-object aanmaken voor de eerste januari van het fameuze jaar 2000 met als uur 21:35 en 23 seconden. Datum en uur worden dus in volgend formaat gespecifieerd :

Date(jaar, maand, dag, uren, minuten, seconden)

Let op : we gebruiken 0 voor de maand januari en niet 1 zoals we zouden vermoeden.

Laat ons nu een script schrijven wat de huidige datum en uur weergeeft.:

De code is als volgt: 

<script language="JavaScript">
<!-- verbergen voor niet-Javascript browsers

now= new Date();

document.write("Tijd: " + now.getHours() + ":" + now.getMinutes() + "<br>");
document.write("Datum: " + now.getDate() + "/" + (now.getMonth() + 1)
 + "/" + (1900 + now.getYear()));

// -->
</script>
Hier gebruiken we methodes zoals getHours() om uur en datum te specifieren in ons Date-object now. We zien ook dat we 1900 toevoegen aan het jaar. De methode getYear() geeft on het aantal jaren sinds 1900 terug. Dit betekent dat voor 1998 we 98 terug krijgen en in het jaar 2010 zullen we 110 terugkrijgen en geen 10! Als we dus 1900 toevoegen aan het jaar dan zullen we geen last hebben van het jaar 2000 probleem. Vergeet ook niet om 1 toe te voegen aan de maand die we terug krijgen via getMonth().
Dit script controleert niet of het aantal minuten kleiner is dan 10. Dit betekent dat we het uur zien als bijvoorbeeld: 14:3 wat eigenlijk 14:03 betekent. In het volgende script zien we hoe dit op te lossen is.

Nu zullen we zien hoe we een werkende klok maken dmv Javascript:

Tijd:
Datum:
Hier volgt de code: 
<html>
<head>

<script Language="JavaScript">
<!-- verbergen voor niet-Javascript browsers

var timeStr, dateStr;

function clock() {
        now= new Date();

        // time 
        hours= now.getHours();
        minutes= now.getMinutes();
        seconds= now.getSeconds();
        timeStr= "" + hours;
        timeStr+= ((minutes < 10) ? ":0" : ":") + minutes;
        timeStr+= ((seconds < 10) ? ":0" : ":") + seconds;
        document.clock.time.value = timeStr;

        // date
        date= now.getDate();
        month= now.getMonth()+1;
        year= now.getYear();
        dateStr= "" + date;
        dateStr+= ((month < 10) ? "/0" : "/") + month;
        dateStr+= "/" + year;
        document.clock.date.value = dateStr;

        Timer= setTimeout("clock()",1000);
}

// -->
</script>
</head>

<body onLoad="clock()">

<form name="clock">
  Tijd:
  <input type="text" name="time" size="8"  value=""><br>
  Datum:
  <input type="text" name="date" size="8" value="">
</form>

</body>
</html>
We gebruiken hier de setTimeout() methode om elke seconde datum en tijd automatisch aan te passen.
De functie clock() roepen we aan via de onLoad event-handler in de <body> tag. In het body-gedeelte van onze HTML-pagina vinden we twee tekstelementen terug. De functie clock() schrijft het uur en de datum in de twee form-elementen in het juiste formaat. We gebruiken hiervoor twee strings timeStr en dateStr. We hebben eerder al het probleem aangehaald met het weergeven van de minuten in het uur. Dit probleem wordt opgelost dmv volgende code:
timeStr+= ((minutes < 10) ? ":0" : ":") + minutes;
Hierbij wordt het aantal minuten toegevoegd aan de string timeStr. Als het aantal minuten kleiner is dan 10 dan wordt er een 0 toegevoegd. We kunnen dit ook anders schrijven onder een meer herkenbare vorm:

if (minutes < 10) timeStr+= ":0" + minutes
  else timeStr+= ":" + minutes;
Het Array-object

Arrays zijn zeer belangrijk. Stel dat we 100 verschillende namen wensen te stockeren. Hoe kunnen we dit realiseren dmv Javascript? We kunnen 100 verschillende variabelen creeren naam1, naam2, .... tot en met naam100. Dit is zeer omslachtig en zeker en vast niet efficient.
Arrays kunnen we zien als een aantal variabelen die samen gebundeld zijn. We kunnen toegang krijgen tot de inhoud van die variabelen dmv hun naam en een nummer. Stel bijvoorbeeld dat we voor ons voorbeeld een array names definieren. Dan kunnen we toegang krijgen tot de eerste naam dmv names[0]. De tweede naam heet dan names[1] enz... .
Sinds JavaScript 1.1 (Netscape Navigator 3.0) kunnen we gebruik maken van het Array-object. We kunnen een nieuwe array aanmaken dmv myArray= new Array(). Vervolgens kennen we waarden toe aan die array: 

myArray[0]= 2;
myArray[1]= "De Baere Johan";
myArray[2]= "Windey Ann";
JavaScript arrays zijn zeer flexibel. We hoeven ons niet te bekommeren over de grootte van de array - dit gebeurt dynamisch. Indien we het volgende schrijven : myArray[99]= "xyz" dan is de grootte van de array voorzien voor 100 elementen (een JavaScript array kan alleen maar groeien - hij kan niet verkleinen. Hou de arrays dus zo klein mogelijk.).
Het heeft geen belang welk type data we stockeren in een array zij het cijfers, letters of andere objecten.
Laat ons dit verduidelijken dmv volgend voorbeeld. De output van het voorbeeld is als volgt: 
eerste element
tweede element
derde element
Hier volgt de source code: 
<script language="JavaScript">
<!-- verbergen voor niet-Javascript browsers

myArray= new Array();

myArray[0]= "eerste element";
myArray[1]= "tweede element";
myArray[2]= "derde element";

for (var i= 0; i< 3; i++) {
  document.write(myArray[i] + "<br>");
}

// -->
</script>
Eerst en vooral creeren we een nieuwe array genaamd myArray. Vervolgens kennen we drie verschillende waarden toe aan de array. Nadien starten we een loop waarin we volgend commando uitvoeren : document.write(myArray[i] + "<br>"); en dit drie keer na mekaar. De variabele i laten we varieren van 0 tot 2 dmv een for-loop. We zien ook dat we myArray[i] gebruiken in de for-loop. Omdat i telt vanaf 0 tot 2 levert ons dit drie document.write()-commando's op. Hetzelfde zouden we ook zo kunnen schrijven: 
document.write(myArray[0] + "<br>");
document.write(myArray[1] + "<br>");
document.write(myArray[2] + "<br>");
Arrays met JavaScript 1.0

Zoals we eerder zagen bestaat het Array-object pas vanaf Javascript 1.1. Om toch dezelfde functionaliteit te bieden in JavaScript 1.0 (Netscape Navigator 2.x en Microsoft Internet Explorer 3.x) moeten we hiervoor een alternatief zoeken. Dit stukje code vinden we terug in de documentatie van Netscape: 

function initArray() {
  this.length = initArray.arguments.length
  for (var i = 0; i < this.length; i++)   
    this[i+1] = initArray.arguments[i]
}
Dmv bovenstaande functie kunnen we een array definieren: 
myArray= new initArray(17, 3, 5);
De cijfers binnen de haakjes bepalen de initiele waarden van onze 'Array' Let op : dit soort 'Array' biedt niet alle mogelijkheden zoals we die kennen in JavaScript 1.1 (er is bijvoorbeeld de sort()-methode die ons toelaat elementen in een array te sorteren).

Het Math-object

Indien we wiskundige berekeningen moeten doen dan vinden we in het Math-object een aantal methodes die ons verder kunnen helpen. Zo is er bijvoorbeeld de sinus-methode sin(). Een complete lijst van beschikbare functies vinden we terug in de Netscape documentatie.
We zullen hier als voorbeeld de random-functie tonen.
Bij het aanroepen van Math.random() krijgen we een willekeurig getal terug tussen 0 en 1. Hier volgt de output via document.write(Math.random()) (het cijfer wijzigt telkens we de webpagina herladen):

[vorig hoofdstuk] [inhoud] [volgend hoofdstuk]

Site monitored 
by 
   

webdesign by

© 1998