Inhoud

1. H1 - Voorwoord
2. H2 - Wat is JavaScript?
   1. §1. Wat kun je met JavaScript?
   2. §2. De script-tag
   3. §3. Opdrachten
3. H3 - Statements (opdrachten)
   1. §1. Wat zijn statements?
   2. §2. Functie document.write
   3. §3. Commentaar
   4. §4. Functie alert
   5. §5. Opdrachten
4. H4 - Variabelen
   1. §1. Wat is een variabele?
   2. §2. Variabelen maken en gebruiken
   3. §3. Functie prompt
   4. §4. Operatoren
   5. §5. Strings
   6. §6. Opdrachten
5. H5 - Functies
   1. §1. Wat is een functie?
   2. §2. Functies maken en gebruiken
   3. §3. Functies die iets teruggeven
   4. §4. Parameters en argumenten
   5. §5. De scope van variabelen
   6. §6. Expressies
   7. §7. Functie parseInt
   8. §8. Opdrachten
6. H6 - Loops en voorwaardes
   1. §1. Wat zijn loops en voorwaardes?
   2. §2. Het if-else statement
   3. §3. Vergelijkingen en hun operatoren
   4. §4. Functie confirm
   5. §5. Het switch-statement
   6. §6. De while-loop
   7. §7. De for-loop
   8. §8. Stoppen door break
   9. §9. Opdrachten
7. H7 - Events
   1. §1. Wat is een event?
   2. §2. Events maken en gebruiken
   3. §3. Welke events zijn er?
   4. §4. Variabele this
   5. §5. Event-object
   6. §6. Opdrachten
8. H8 - Arrays
   1. §1. Wat is een Array?
   2. §2. Een Array maken en gebruiken
   3. §3. Een Array doorlopen
   4. §4. Een associatieve array
   5. §5. De for-in loop
   6. §6. Opdrachten
9. H9 - Objecten
   1. §1. Wat is een object?
   2. §2. Verschil object en variabele
   3. §3. Eigenschappen
   4. §4. Methodes
   5. §5. Eigenschappen en methodes
   6. §6. Opdrachten
10. H10 - Globale objecten
    1. §1. Het window-object
    2. §2. Het document-object
    3. §3. Het Math-object
    4. §4. Standaard HTML-Element-object
    5. §5. Een HTML-Table-object
    6. §6. Opdrachten

9. Objecten

Objecten maken het mogelijk makkelijk leesbare en efficiënte code te schrijven. Zonder objecten is de kans groot dat je code een grote warboel wordt.

9.1. Wat is een object?

Bij objecten denk je al snel aan dingen, zoals een stoel of een lamp. Zo'n stoel of lamp bestaat dan weer uit kleinere onderdelen, bijvoorbeeld een lampekap, een poot om op te staan en een aan/uit-knop voor de lamp. Dat is bij een object in JavaScript precies zo: het stelt iets voor, en bestaat uit een aantal onderdelen.

Je hebt al een aantal objecten gebruikt in JavaScript, bijvoorbeeld een string (H4.5) of een array (H8). Een object bevat vaak een aantal variabelen, ofwel eigenschappen (zie H9.3) zoals je bij een array de lengte van die array kon opvragen met de eigenschap length. Verder bevat een object vaak een aantal methodes (zie H9.4), dit zijn de functies die in het object zitten. Zo had je bij de array de methode push().

9.2. Verschil object en variabele

Een normale variabele kan maar één waarde bevatten, een object bevat er vaak meer. Verder bevat een normale variabele geen methodes. Een array is dus een object, want die bevat een heleboel waardes en bevat methodes. Maar toch schrijf je:

var mijnArray = [];

Hierdoor zou je denken dat een array ook gewoon een variabele is (terwijl het een object is), maar dat is het niet. Je maakt wel een variabele aan, genaamd mijnArray, maar dat is niet de werkelijke array. Die variabele is eigenlijk enkel een verwijzing naar de werkelijke array. Dat is te zien wanneer je een tweede variabele maakt, en de verwijzing die in mijnArray zit kopieert naar de nieuwe variabele. Als je dan namelijk iets wijzigt via die nieuwe variabele, zal die de wijziging doorverwijzen naar de werkelijke array en zal de wijziging dus ook bij mijnArray plaatsvinden gezien die naar dezelfde array verwijst.

var mijnArray = [];        // Maak een nieuwe array, de lengte van deze array is dus 0
var tweedeVariabele = mijnArray;    // Kopieert de verwijzing naar de array, niet de array zelf!
tweedeVariabele.push(42);           // Voeg een element toe aan de array
alert(mijnArray.length);            // Zonder iets met mijnArray zelf gedaan te hebben is toch de lengte naar 1 veranderd!

Hoewel een string strict genomen ook een object is, is het meer een soort kruising tussen een variabele en een object. Want als je een string maakt is die variabele geen verwijzing naar de string maar dan is die variabele ook werkelijk de string. Een string is dus eigenlijk een variabele die ook methodes bevat.

var mijnString = "Hello world";     // Maak een nieuwe string
var tweedeVariabele = mijnString;   // Kopieert de string, niet een verwijzing!
tweedeVariabele += '!';             // Voeg een uitroepteken toe aan de kopie van de string
alert(mijnString);                  // In tegenstelling tot een normaal object is mijnString nu niet gewijzigd, omdat mijnString ook werkelijk de string is en geen verwijzing

9.3. Eigenschappen

Een object kan eigenschappen bevatten. Dat zijn de variabelen die in dat object zitten. Je hebt er al eens een gezien, namelijk eenArray.length (waarbij eenArray natuurlijk een array is). Eigenschappen kunnen dus benaderd worden door eerst de naam van de variabele die naar het object verwijst te typen, dan een punt en dan de naam van de eigenschap. Dus schematisch: verwijzendeVariabele.eigenschap

De eigenschappen zijn gewone variabelen en kunnen dus ook weer een verwijzing naar een object zijn met zijn eigen eigenschappen en methodes. Daardoor is de volgende code mogelijk:

window.document.getElementById("een_id"); // Vraag van het window-object de eigenschap document op (ook een object), en gebruik dan van document de methode getElementById()

9.4. Methodes

Methodes lijken veel op eigenschappen, het enige verschil is dat methodes functies zijn die in een object zitten en geen variabelen die in een object zitten. Methodes kunnen vaak de eigenschappen van een object aanpassen, denk bijvoorbeeld aan een array. Als je de methode push() aanroept zal er een element in die array bijkomen en dus wordt de eigenschap length ook aangepast.

Een methode gebruik je op dezelfde manier als een eigenschap: verwijzendeVariabele.methode(eventuele, argumenten). Nu zie je dus dat bijvoorbeeld document.write() een methode is, write() is een methode (ingebouwde functie) van document, document is een van de objecten die altijd bestaat in JavaScript (die je dus niet zelf hoeft te maken en die je niet zelf kan maken), zie H10.3.

Een methode is dus eigenlijk een functie die een speciale actie voor het object waar hij deel van is uitvoert. Zo voegt bijvoorbeeld push() alleen een element toe aan de array waar hij op uitgevoerd wordt.

var a1 = [];   // Nieuwe lege array
var a2 = [];   // Tweede nieuwe lege array
a1.push(42);            // Nu wordt push() dus uitgevoerd op de array waar a1 naar verwijst
alert(a2.length);       // Daardoor zal de array waar a2 naar verwijst nog leeg zijn

9.5. Eigenschappen en methodes

Elk object heeft zo zijn eigen eigenschappen en methodes. Zo heeft een string ook weer allerlei methodes, en een array heeft ook veel meer methodes dan alleen push(). In H10 wordt van een aantal objecten een aantal eigenschappen en methodes genoemd die handig zullen zijn. Verder dient deze site niet als naslagwerk, maar als leersite. Naslagwerken die uitleg over alle methodes en eigenschappen bevatten kunnen makkelijk gevonden worden op het internet. Een daarvan is zeer aan te raden, alleen is deze wel Engelstalig: het naslagwerk van W3Schools over JavaScript

9.6. Opdrachten

Er zijn (nog) geen opdrachten voor dit hoofdstuk!