7. Objecten

7.1 Algemeen
7.2 Het Array-object
7.3 Het Date-object
7.4 Het Math-object
7.5 Het String-object
7.6 Zelf objecten maken

 

7.1 Algemeen

vb. het object Fiets:

vb.: mijnFiets = new Fiets()

 

7.2 Het Array-object

7.2.1 Omschrijving

Een rij is een opeenvolging van een aantal elementen opgeslagen onder één naam.
vb.: De dagen van een week vormen een rij van 7 elementen. De maanden van een jaar vormen een rij van 12 elementen.

7.2.2 Een rij declareren (creëren)

Vooraleer met een rij te kunnen werken moet je ze eerst creëren.
Dit doe je als volgt: weekDagen = new Array(7)
Het getal 7 betekent het aantal elementen van de rij.

De elementen van een rij kan je aanspreken met een index (een natuurlijk getal). Hierbij wordt het eerste natuurlijk getal nl. 0 gebruikt voor het eerste element.
vb.: weekDagen[0] bepaalt het eerste element van de rij. weekDagen[5] bepaalt het zesde element van de rij.
Merk de vierkante haken op na de rijnaam.

7.2.3 De elementen van een rij opvullen met gegevens

Dit gebeurt op dezelfde wijze als het geven van waarden aan variabelen:
vb.: weekDagen[0] = "Maandag", weekDagen[1] = "Dinsdag", ...

Opm.: het declareren en opvullen van gegevens kan bij een rij in één stap als volgt:
weekDagen = new Array("Maandag","Dinsdag","Woensdag","Donderdag","Vrijdag","Zaterdag","Zondag")

7.2.4 Eigenschappen

Het object Array heeft maar één eigenschap nl.: length

vb.: x = weekDagen.length : de variabele x bevat nu het getal 7

Opm.: wanneer je bij het opvullen van de rij weekDagen de indexen 1 to 7 gebruikt (weekDagen[1] = "Maandag", weekDagen[2] = "Dinsdag", ...) dan zal de rij 8 elementen bevatten, ook al heb je ze gecreëerd met 7 elementen (weekDagen = new Array(7) ) Zo zal weekDagen[0] bestaan maar geen gegevens bevatten.

7.2.5 Methoden

7.2.6 Voorbeeld

Het volgend voorbeeld maakt een array van de dagen van de week en drukt ze met een iteratie af. (Klik hier voor het resultaat)

<html>
<head>
</head>
<body>
<script language="javascript">
dagen= new Array(7)
dagen[0]="maandag"
dagen[1]="dinsdag"
dagen[2]="woensdag"
dagen[3]="donderdag"
dagen[4]="vrijdag"
dagen[5]="zaterdag"
dagen[6]="zondag"
for (index=0;index<=6;index++)
{document.write(dagen[index],"<br>")}
</script>

</body>
</html>

 

7.2.7 Oefeningen

1. Verander het voorbeeld zodat in de afdruk de dagen achter elkaar worden weergegeven. Oplossing.

2. Verander het voorbeeld zodat in de afdruk de dagen gesorteerd worden weergegeven. Oplossing.

3. Verander het voorbeeld zodat in de afdruk de dagen omgekeerd worden weergegeven. Oplossing.

4. Maak een afdruk van de oneven natuurlijke getallen kleiner dan 100, in stijgende orde en in dalende orde, in twee kolommen. Oplossing.

5. Maak volgende afdruk. (De som van de oneven natuurlijke getallen kleiner dan 100 = (aantal : 2) x 100 = 2500. Oplossing

1 + 99 = 100
3 + 97 = 100
5 + 95 = 100
7 + 93 = 100
9 + 91 = 100
11 + 89 = 100
13 + 87 = 100
15 + 85 = 100
17 + 83 = 100
19 + 81 = 100
21 + 79 = 100
23 + 77 = 100
25 + 75 = 100
27 + 73 = 100
29 + 71 = 100
31 + 69 = 100
33 + 67 = 100
35 + 65 = 100
37 + 63 = 100
39 + 61 = 100
41 + 59 = 100
43 + 57 = 100
45 + 55 = 100
47 + 53 = 100
49 + 51 = 100

De totale som = 25 x 100 = 2500

6. Maak een rij van de maanden van het jaar en druk ze af op het scherm. Oplossing.

7. Vraag vijf woorden op aan de gebruiker en druk ze alfabetisch af op het scherm. Oplossing.

 

7.3 Het Date-object

7.3.1 Omschrijving

Je kan het Date-object gebruiken om met tijden en data te werken.
Het Date-object slaat een datum op als een getal dat het aantal milliseconden bevat sedert 1 januari 1970.
Het Date-object heeft geen eigenschappen.

7.3.2 Een datum/tijd declareren

Om met een datum of tijd te kunnen werken moet je deze eerst creëren.
Dit doe je als volgt:

7.3.3 Methoden

Het Date-object heeft methoden om data en tijden op te vragen (Get-methoden) en om data of tijden op een bepaalde waarde te zetten (Set-methoden)

Opvragen van Omschrijving Instellen van
     
getDate() De dag van de maand setDate()
getDay() De dag van de week setDay()
getMonth() De maand van het jaar setMonth()
getYear() Het jaar setYear()
getHours() Het uur van de dag setHours()
getMinutes() Het aantal minuten in de huidige tijd setMinutes()
getSeconds() Het aantal seconden in de huidige tijd setSeconds()

7.3.4 Voorbeelden

 

<html>
<head>
</head>
<body>
<script language="javascript">

datum= new Date()
document.write (datum)
document.write("<br>")
document.write (datum.getDate(),"/",datum.getMonth(),"/",datum.getYear())

document.write("<br>")

datum.setYear(2000)
datum.setMonth(0)
datum.setDate(1)

document.write(datum)
</script>
</body>
</html>

<html>
<head>
</head>
<body onload = "JSKlok()">
<script language="javascript">
function JSKlock() {

tijd = new Date()
uur = tijd.getHours()
minuten = tijd.getMinutes()
seconden = tijd.getSeconds()
huidigeTijd = uur
if (minuten < 10) {

huidigeTijd += ":0" + minuten }

else {

huidigeTijd +=":"+ minuten}

if (seconden < 10) {

huidigeTijd += ":0" + seconden}

else {

huidigeTijd +=":"+ seconden }

document.klokform.cijfers.value = huidigeTijd
waarde = setTimeout("JSKlok()",1000)

}

</script>

<form name = "klokform">
De juiste tijd is <input type = "text" name = "cijfers" size = 12 value = " ">

</form>

</body>
</html>

 

7.3.5. Oefeningen

1. Vraag de geboortedatum op en druk de weekdag af van de geboorte. Maak je programma eerst zonder controle van de data. Voer daarna controles toe op de ingevoerde waarden. Oplossing.

2. Bereken het aantal dagen die nog resten tot het jaar 2000 en druk het resultaat af op het scherm. Oplossing.

3. Maak een programma waarin de huidige datum op het scherm wordt afgedrukt in de volgende vorm: "Vandaag zijn we maandag , 4 januari 1999. Nog veel surfplezier." Oplossing.

 

 

7.4 Het Math-object

7.4.1 Omschrijving

Het math-object is bedoeld om allerhande wiskundige berekeningen uit te voeren door middel van methoden.
vb.: x = Math.pow(2,3) : de variabele x verkrijgt de waarde van 2 tot de derde macht.

Opm.: het Math-object wordt rechtstreeks benaderd. Je hoeft er geen nieuw exemplaar uit te creëren.

7.4.2 Methoden en constanten (eigenschappen)

Constanten  
   
Math.PI 3.141592653589793
Math.E 2.718281828459045
Math.LN2 0.6931471805599453
Math.LN 2.302585092994046
Math.LOG2E 1.4426950408889633
Math.LOG10E 0.4342944819032518
Methoden  
   
Math.abs(x) geeft de absolute waarde van x
Math.sin(x),cos(x),tan(x) geeft de sin, cos, tg van de hoek x opgegeven in radialen
Math.asin(x),acos(x),atan(x) inverse functies van sin, cos, tg . Geeft resultaat in radialen
Math.ceil(x) geeft het kleinste geheel getal dat >= x
Math.floor(x) geeft het grootste geheel getal dat <= x
Math.min(x,y),max(x,y) geeft het kleinste/grootste getal van de twee opgegeven getallen
Math.pow(x,y) geeft x tot de macht y
Math.sqrt(x) geeft de vierkantswortel van x
Math.round(x) geeft de afronding van x (als geheel getal)
Math.random() geeft een willekeurig getal tussen 0 en 1 (16 beduidende cijfers)

7.4.3 Voorbeeld

Met het volgend programma kan je een willekeurig getal tussen 1 en 10 raden. (Klik hier voor het resultaat)

<html>
<head>
</head>
<body onLoad="genereer()">
<script language="javascript">

function genereer()
{
getal=Math.floor(Math.random()*10)+1
teller=1
}
function controleer(f)
{
if (eval(f.cijfer.value)==getal){window.alert("geraden in " + teller+ " beurten")}
else
{teller=teller+1}
}
</script>

<form>
Kies een getal tussen 1 en 10 <input type="text" name="cijfer"><br>
<input type="button" value="controleer" onClick="controleer(this.form)">
</form>
</body>
</html>

 

7.4.4 Oefeningen

1. Vraag de straal op van een cirkel en druk de omtrek en de oppervlakte af op het scherm. Zorg voor een afronding op een opgevraagd aantal decimalen. Oplossing.
2. Vraag de lengte van de twee rechthoekszijden van een rechthoekige driehoek op en druk de lengte van de schuine zijde af op het scherm. Vraag eveneens een nauwkeurigheidsgraad op. Oplossing.
3. Druk de machten van 2 af van exponent 0 tot exponent 40. Oplossing.
4. Bereken het volume van een bol met een opgegeven straal en tot op een gevraagd aantal decimalen nauwkeurig. Oplossing.
5. Vraag een getal op en druk de vierkantswortel van dat getal af tot op een op te vragen aantal decimalen nauwkeurig. Oplossing.
6. Vraag de straal en de hoogte van een cilinder en bereken het volume van die cilinder tot op een gevraagd aantal decimalen nauwkeurig. Oplossing.
7. Druk de machten van een op te vragen natuurlijk getal af vanaf exponent 0 tot een op te vragen natuurlijk getal. Oplossing.

 

7.5 Het String-object

7.5.1 Omschrijving

In javascript bestaat het gewone gegevenstype "string" (voor tekstlijnen) niet. In de plaats daarvan werd het String-object gecreëerd.
Als je een tekstwaarde aan een variabele toewijst, dan creëert javascript automatisch een string-object. Op die wijze kan je alle eigenschappen en methoden van een String-object gebruiken voor een tekstvariabele.
vb.: mijnTekst = "Hello vrienden!" creëert het String-object mijnTekst.

7.5.2 Een String-object declareren

7.5.3 Eigenschappen

Een String-object heeft maar één eigenschap nl. length (lengte)
vb.: x = mijnTekst.length : de variabele x krijgt de waarde 15 (de tekst "Hello vrienden!" is 15 karakters lang).

 

7.5.4 Methoden

big() Zet de tekst om in grotere letters
blink() Doet de tekst knipperen
bold() Zet de tekst in het vet
fixed() Zet de letters in vast tekenschrift (niet-proportionele tekens)
italics() Zet de tekst in schuinschrift
small() Zet de tekst in kleine letters
strike() Doorstreept de tekst
sub() Zet de tekst in subschrift (zoals een index)
sup() Zet de tekst in superschrift (zoals exponenten)
charAt(x) Geeft het teken op de opgegeven plaats x in de tekst
indexOf(x) Geeft de beginpositie van de opgegeven substring (tekstdeel) in de tekst
lastIndexOf(x) Geeft de eindpositie van de opgegeven substring in de tekst
split("teken") Splitst de tekst in een rij van deelteksten. De scheiding gebeurt op de plaats waar het "teken" voorkomt.
substring(x,y) geeft een deeltekst vanaf het karakter op plaats x tot juist voor het karkater op plaats y (x<=y). Merk op dat het eerste karakter met index 0 wordt aangeduid en het laatste karakter met index tekstlengte-1
toLowerCase() De tekst wordt omgezet in kleine letters
toUpperCase() De tekts wordt omgezet in hoofdletters

7.5.5 Voorbeelden

<html>
<head>
</head>
<body>
<script language="javascript">

function controleer(f)
{
nr=f.nummer.value
deel1=nr.substring(0,3)
deel2=nr.substring(4,11)
controle_getal=eval(nr.substring(12,14))
getal=eval(deel1+deel2)

if (getal%97==controle_getal){window.alert("het rekeningnummer is juist")}
else
{window.alert("het rekeningnummer is fout")}
}
</script>

<form>
Voer een rekeningnummer in (bijvoorbeeld 477-1234567-34) <input type="text" name="nummer"><br>
<input type="button" value="controleer" onClick="controleer(this.form)">
</form>
</body>
</html>

<html>
<head>

</head>

<body onLoad="controleer()">
<script language="javascript">
tekst="Wij wensen u een prettige Paasvakantie "

function controleer()
{
document.formulier.banner.value=tekst
tekst=tekst.substring(1,tekst.length)+tekst.substring(0,1)
waarde=setTimeout("controleer()",180)
}
</script>

<form name="formulier">
<input type="text" name="banner" size="38"><br>
</body>
</html>

7.5.6 Oefeningen

1. Vraag een tekst op en druk hem af in hoofdletters/kleine letters/schuine letters/vette letters/ grote letters/doorstreepte letters. Oplossing.
2. Vraag een zin en een letter op en druk af hoeveel keer de letter in de zin voorkomt. Oplossing.
3. Vraag een zin op, tel de woorden en druk de woorden van die zin af in alfabetische volgorde. (de zin mag geen leestekens bevatten) Oplossing.

7.6 Zelf objecten maken

7.6.1 Een nieuw object maken

Naast de ingebouwde objecten kan men ook zelf objecten creëren.

bijvoorbeeld: we maken van de gegevens op een adresetiket een object met naam adres

function adres(a,b,c,d)
{this.naam=a;
this.adres=b;
this.postnummer=c;
this.gemeente=d;}

Een instance van het object adres wordt als volgt gedefinieerd:

label1=new adres("De man van Melle","Koekoekstraat 70","9380","Melle")

We noemen label1 een instance van het object adres met 4 properties. Het postnummer kan men met label1.postnummer aanspreken.

<html>

<head>

</head>


<body>
<script language="javascript">
function adres(a,b,c,d)
{this.naam=a;
this.adres=b;
this.postnummer=c;
this.gemeente=d;
}

label1=new adres("De man van Melle","Koekoekstraat 70","9380","Melle")
document.write(label1.postnummer)
</script>
</body>

</html>

oplossing

7.6.2 Een methode aan een object toevoegen

Ook methodes kan men voor een zelfgemaakt object maken bijvoorbeeld

function schrijf()
{regel=this.naam+" "+this.adres+" "+this.postnummer+" "+this.gemeente;
document.write(regel);}

De functie adres kan men aanvullen met :

this.afdruk=schrijf

Het oproepen van de methode kan met:

adres.afdruk() waardoor het volledig adres op één regel wordt afgedrukt

voorbeeld:

<html>

<head>

</head>


<body>
<script language="javascript">
function adres(a,b,c,d)
{this.naam=a;
this.adres=b;
this.postnummer=c;
this.gemeente=d;
this.afdruk=schrijf;
}
function schrijf()
{regel=this.naam+" "+this.adres+" "+this.postnummer+" "+this.gemeente;
document.write(regel)
}

adres1=new adres("De man van Melle","Koekoekstraat 70","9380","Melle")
adres1.afdruk()
</script>
</body>

</html>

oplossing