Inhoud

  1. Geen paragrafen H1 - Voorwoord
  2. Geeft paragrafen weer H2 - Wat is JavaScript?
    1. §1. Wat kun je met JavaScript?
    2. §2. De script-tag
    3. §3. Opdrachten
  3. Geeft paragrafen weer H3 - Statements (opdrachten)
    1. §1. Wat zijn statements?
    2. §2. Functie document.write
    3. §3. Commentaar
    4. §4. Functie alert
    5. §5. Opdrachten
  4. Geeft paragrafen weer 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. Geeft paragrafen weer 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. Opdrachten
  6. Geeft paragrafen weer H6 - Loops en voorwaarden
    1. §1. Wat zijn loops en voorwaarden?
    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. Geeft paragrafen weer 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. Variabele window.event
    6. §6. Opdrachten
  8. Geeft paragrafen weer H8 - Array
    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. Geeft paragrafen weer 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. Geeft paragrafen weer H10 - Globale objecten
    1. §1. Wat zijn globale objecten?
    2. §2. Het window object
    3. §3. Het document object
    4. §4. Het Math object
    5. §5. Standaard HTML-Element object
    6. §6. Een HTML-Table object
    7. §7. 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.

Naar boven

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 ook bij de array de methode push().

Naar boven

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:

JavaScript:
  1. var mijnArray = new Array();

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.

JavaScript:
  1. var mijnArray = new Array(); // Maak een nieuwe array, de lengte van deze array is dus 0
  2. var tweedeVariabele = mijnArray; // Kopieert de verwijzing naar de array, niet de array zelf!
  3. tweedeVariabele.push(42); // Voeg een element toe aan de array
  4. 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.

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

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:

JavaScript:
  1. window.document.getElementById("een_id"); // Vraag de eigenschap document op van window, en gebruik dan van document de methode getElementById()
Naar boven

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 dus mogelijk 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.

JavaScript:
  1. var a1 = new Array(); // Nieuwe lege array
  2. var a2 = new Array(); // Tweede nieuwe lege array
  3. a1.push(42); // Nu wordt push() dus uitgevoerd op de array waar a1 naar verwijst
  4. alert(a2.length); // Daardoor zal de array waar a2 naar verwijst nog leeg zijn
Naar boven

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

Naar boven

9.6. Opdrachten

  1. Zoals je gezien hebt kun je niet makkelijk even een array kopiėren. Maak een functie copy() waarmee je wel een array kan kopiėren. De functie moet als volgt aangeroepen kunnen worden naarArray = copy(vanArray).
    Vergeet niet rekening te houden met associatieve arrays! (H9.2)
    Antwoord
  2. Geef van de volgende namen aan wat een object, variabele, functie, eigenschap of methode is.
    Voorbeeld: window.document.getElementById("een_id");
    window: object
    document: eigenschap en object
    getElementById(): methode

    1. mijnArr.length
    2. hoofdstad("Nederland")
    3. kwadraat(x)
    4. window.document.getElementById("id").innerHTML
    5. document.write("Hello world!")
    (H9.4)
    Antwoord
  3. Zoek op (tip: W3Schools) welke methode of eigenschap je in de volgende gevallen kan gebruiken.
    Voorbeeld: "Je wilt 13 aan de array arr toevoegen"
    Antwoord: arr.push(13);
    1. Variabele txt is een string, je wilt de lengte van deze string weten.
    2. Variabele txt is een string, je wilt weten welk karakter (welk teken) er op de 4e plek in die string staat.
    3. Je wilt de wortel van š weten.
    4. Je wilt weten of variabele x een geldig getal is.
    5. Je wilt weten hoeveel plaatjes (img-elementen) er op je pagina zijn.
    (H9.5)
    Antwoord