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

7. Events

Je wil vaak dat er iets gebeurt op het moment dat de gebruiker ergens op klikt, op een toets drukt of iets anders doet. Events maken dit mogelijk.

Naar boven

7.1. Wat is een event?

Een event is letterlijk een gebeurtenis. Als een event wordt getriggerd (in werking gesteld), voert die de toegekende code uit. In andere woorden: je kan dus bepaalde code laten uitvoeren bij een bepaald event (gebeurtenis).

Naar boven

7.2. Events maken en gebruiken

Een event gebeurt altijd bij een bepaald element. Als er bijvoorbeeld op een knop geklikt wordt, zal die knop een onclick event triggeren. Welke events er allemaal zijn komt in H7.3, nu houden we het even bij het onclick event van een knop.

Je kan in de HTML-code events toekennen aan elementen. Dan zijn ze gewoon een attribuut:

HTML:
  1. <button onclick="javascript hier">Klik hier!</button>

Maar het is beter om de JavaScript en HTML geheel gescheiden te houden. Dus zullen we de events via JavaScript moeten toekennen. Daarvoor moet er eerst een functie gemaakt worden die uitgevoerd moet worden bij dat event. Vervolgens kan die functie aan het event worden toegekend.

JavaScript:
  1. // Functie voor het even maken
  2. function functieBijEvent()
  3. {
  4. alert("Je klikte!");
  5. }
  6.  
  7. // Functie aan het event toekennen
  8. document.getElementById("knop").onclick = functieBijEvent; // Let op, nu geen () gebruiken

HTML:
  1. <button id="knop">Klik hier</button>

Merk op dat er bij het toekennen aan het event geen ( ) gebruikt wordt. Je roept de functie immers niet aan, maar je ken hem toe.

Er wordt hier ook gelijk een nieuwe functie geïntroduceerd: document.getElementById(). Waarom hier document. voor de functie staat komt in H9.4 aan bod, zie het voor nu maar als deel van de naam van de functie. Deze functie geeft een variabele terug die verwijst naar het HTML-element met het opgegeven id. Dat HTML-element moet dus wel bestaan. Via de verwijzing naar dat HTML-element kunnen dus de events (en meer, maar dat komt in H10.4 aan bod) ervan aangepast worden

Alleen gaat dit niet helemaal goed als de JavaScript voor het HTML-element komt in de pagina. Want dan wordt eerst de JavaScript uitgevoerd en dan pas het HTML-element aangemaakt. Wat betekent dat het HTML element met het id knop nog niet bestaat zodra de JavaScript wordt uitgevoerd en dus kan er geen event aan toegekend worden. Om dit op te lossen kan een ander event gebruikt worden dat wel vanaf het begin bestaat: window.onload. Dit event wordt getriggerd op het moment dat de pagina geladen is, en omdat je hier geen HTML element aanspreekt heb je niet het probleem dat het element mogelijk nog niet bestaat. We maken dus een functie die alle andere events toekent, en we kennen die functie toe aan het window.onload-event.

JavaScript:
  1. function functieBijEvent()
  2. {
  3. alert("Je klikte!");
  4. }
  5. function maakEvents()
  6. {
  7. // Events voor de HTML-elementen aanmaken:
  8. document.getElementById("knop").onclick = functieBijEvent;
  9. }
  10. window.onload = maakEvents; // Functie maakEvents() wordt aangeroepen als window.onload getriggerd wordt
  11. // In die functie worden de rest van de events toegekend aan hun HTML-elementen
  12. // Omdat window.onload pas getriggerd wordt als alles geladen is bestaan alle HTML-elementen al

HTML:
  1. <button id="knop">Klik hier</button>
Naar boven

7.3. Welke events zijn er?

Er zijn heel veel events, de volgende events gelden voor elk HTML-element:

EventWordt getriggerd als...
onblur... een element de focus verliest
onclick... er op het element geklikt wordt
ondblclick... er op het element gedubbelklikt wordt
onfocus... het element de focus krijgt
onkeydown... er een toets wordt ingedrukt
onkeypress... er een toets wordt ingedrukt of ingedrukt is
onkeyup... er een toets los gelaten wordt
onmousedown... een muisknop ingedrukt wordt
onmousemove... de muis beweegt
onmouseout... de muis uit het element weg beweegt
onmouseover... de muis over het element heen beweegt
onmouseup... de muisknop losgelaten wordt
onresize... een scherm of frame van grootte verandert

De volgende events worden maar door enkele elementen ondersteund:

EventWordt getriggerd als...Elementen
onchange... de inhoud van een invoerveld verandert<input type="text"> <textarea> <select>
onerror... er een fout optreedt tijdens het laden van een document of plaatje<img> <object> <style>
onload... een pagina of plaatje geladen is<img> <body>
onselect... de inhoud van een invoerveld geselecteerd wordt<input type="text"> <textarea>
onunload... de gebruiker de pagina verlaat<body> <frameset>
Naar boven

7.4. Variabele this

Vaak wil je dat er juist met het element dat het event getriggerd heeft iets gebeurt. Bijvoorbeeld een plaatje die een blauwe rand krijgt als hij aangeklikt is. Of een tekstvakje waarvan de tekst wordt geselecteerd zodra je erop klikt. Dan kun je wel met allemaal id's gaan werken en het juiste element telkens proberen te vinden met dat id. Maar JavaScript heeft iets veel makkelijkers: een variabele die naar het element dat de event getriggerd heeft wijst. Die variabele heet this.

Wat je allemaal precies kan aanpassen aan zo'n element komt in H10.5. Maar voor nu hoef je alleen te weten dat element.innerHTML de HTML die in dat element zit bevat. Als je die dus aanpast zal ook de inhoud van dat element aangepast worden.

De variabele this is alleen bekend in zijn event. Maar dat is op zich geen probleem, want dat is ook de enige plek waar je hem meestal wil gebruiken. De variabele this verwijst dus naar het element vanuit waar het event getriggerd is, dus kun je met this bijvoorbeeld de inhoud van dat element aanpassen.

JavaScript:
  1. function vertaal()
  2. {
  3. // Binnen in deze functie is 'this' dus bekend, als deze functie tenminste door het triggeren van een event wordt aangeroepen
  4. // Als je zelf ergens 'vertaal();' neerzet dan zal 'this' niet bekend zijn, wat in dit geval dus tot een fout zou leiden (gezien 'this' gebruikt wordt)
  5. this.innerHTML = "Hallo wereld!"; // Pas de inhoud van het HMTL-element dat dit event getriggerd heeft aan
  6. }
  7.  
  8. function maakEvents()
  9. {
  10. document.getElementById("translate_me").onclick = vertaal;
  11. }
  12. window.onload = maakEvents;

HTML:
  1. <div id="translate_me">Hello world!<br />(click to translate to Dutch)</div>

Je kan meerdere events aan dezelfde functie koppelen. Omdat this telkens naar een andere element verwijst (namelijk naar degene die het event getriggerd heeft) hoeven we de functie niet eens te herschrijven.

JavaScript:
  1. function vertaal()
  2. {
  3. this.innerHTML = "Hallo wereld!"; // Pas de inhoud van het HMTL-element dat dit event getriggerd heeft aan
  4. }
  5.  
  6. function maakEvents()
  7. {
  8. // Alle HTML-elementen hebben een event met dezelfde functie
  9. // Maar toch zal die functie alleen het element waarop geklikt wordt 'vertalen'
  10. document.getElementById("translate_me1").onclick = vertaal;
  11. document.getElementById("translate_me2").onclick = vertaal;
  12. document.getElementById("translate_me3").onclick = vertaal;
  13. document.getElementById("translate_me4").onclick = vertaal;
  14. document.getElementById("translate_me5").onclick = vertaal;
  15. }
  16. window.onload = maakEvents;

HTML:
  1. <div id="translate_me1">Hello world!<br />(click to translate to Dutch)</div>
  2. <div id="translate_me2">Hello world!<br />(click to translate to Dutch)</div>
  3. <div id="translate_me3">Hello world!<br />(click to translate to Dutch)</div>
  4. <div id="translate_me4">Hello world!<br />(click to translate to Dutch)</div>
  5. <div id="translate_me5">Hello world!<br />(click to translate to Dutch)</div>

Merk op dat de naam this een gereserveerde naam is, en dat je dus niet zelf ergens een variabele of functie met die naam aan mag maken (zoals beschreven in H4.2).

Naar boven

7.5. Variabele window.event

Soms wil je ook informatie over het event hebben. Bij een onkeypress-event wil je bijvoorbeeld vaak weten welke toets er ingedrukt is. Hiervoor is de variabele window.event bedacht. In sommige browsers (bijvoorbeeld Firefox) bestaat window.event niet, maar wordt de variabele als argument aan het event mee gegeven. Ook daar kunnen we een oplossing voor bedenken:

JavaScript:
  1. function functieDieEventGebruikt(event)
  2. {
  3. if(window.event) // Als window.event niet bestaat is zijn waar null, ofwel: 0, ofwel: false
  4. event = window.event; // Dus als hij wel bestaat is het bovenstaande if-statement true
  5. // Code waarin je event gebruikt
  6. }
  7.  
  8. function maakEvents()
  9. {
  10. document.getElementById("knop").onclick = functieDieEventGebruikt;
  11. }
  12. window.onload = maakEvents;

HTML:
  1. <button id="knop">Klik hier</button>

Via de variabele event kan allerlei informatie over het event worden opgevraagd. Hieronder kun je in een tabel zien welke informatie opgevraagd kan worden.

AttribuutOmschrijving
altKeyIs true als de alt-toets was ingedrukt toen het event getriggerd werd
ctrlKeyIs true als de control-toets was ingedrukt toen het event getriggerd werd
shiftKeyIs true als de shift-toets was ingedrukt toen het event getriggerd werd
keyCodeWaarde van de toets die ingedrukt werd
clientXGeeft de x-coördinaat van waar de muis was toen het event getriggerd werd, waarbij 0 de linkerrand van het element waarin geklikt werd is
clientYGeeft de y-coördinaat van waar de muis was toen het event getriggerd werd, waarbij 0 de bovenrand van het element waarin geklikt werd is
screenXGeeft de x-coördinaat van waar de muis was toen het event getriggerd werd, waarbij 0 de linkerrand van het scherm is
screenYGeeft de y-coördinaat van waar de muis was toen het event getriggerd werd, waarbij 0 de bovenrand van het scherm is
buttonGeeft aan welke muisknop ingedrukt was toen het event getriggerd werd

Bij die laatste, button, geldt het volgende (merk op dat Internet Explorer andere waardes hanteert):

WaardeWaarde in Internet ExplorerMuisknop
01Linker muisknop
14Middelste muisknop
22Rechter muisknop

Hoe kun je nou de waarde van zo'n attribuut opvragen via de variabele event? Simpel, met: event.attribuut, waarbij attribuut natuurlijk vervangen moet worden door de naam van het attribuut.

JavaScript:
  1. function showCoords(event)
  2. {
  3. if(window.event)
  4. event = window.event;
  5. alert("De coordinaten van je muis op het scherm zijn: (" + event.screenX + ", " + event.screenY + ")");
  6. }
  7. function maakEvents()
  8. {
  9. document.getElementById("divje").onclick = showCoords;
  10. }
  11. window.onload = maakEvents;

HTML:
  1. <div id="divje">Klik hier om de co&ouml;rdinaten van je muis weer te geven</div>

Merk op dat de genoemde attributen niet altijd een waarde hebben. Zo heeft keyCode alleen een waarde als het een onkeypress, onkeydown of onkeyup event was. Want het geeft de toets aan die bij dat event ingedrukt was. Zo hebben button, clientX, clientY, screenX en screenY ook alleen een waarde bij onclick, onmouseup en onmousedown. De attributen hebben dus alleen een waarde als dat zinnig is.

Naar boven

7.6. Opdrachten

  1. Maak een knop, als op die knop geklikt wordt komt er een berichtje met de tekst Hello world! (H7.2)
    Antwoord
  2. Bedenk waarom sommige events maar door enkele HTML-elementen ondersteund worden. (H7.3)
    Antwoord
  3. Maak een div-element met de tekst: Hello world!
    Zodra je met je muis over deze div heen gaat moet de tekst schuin gedrukt worden. Zodra je met je muis weer van deze div af gaat moet de tekst weer normaal worden.
    Als je op de div klikt moet de tekst in het Nederlands vertaald worden ("Hallo wereld!" dus). Als er dan weer opnieuw op geklikt wordt verandert de tekst weer in Engels. Dus bij elke klik verandert de taal.
    Hoe vaak de tekst ook vertaald wordt, hij moet altijd schuin gedrukt worden als de muis er overheen gaat, en weer normaal als de muis van de div af gaat.
    Tip: geef de div met CSS (gewoon via het style-attribuut) een achtergrond zodat je kan zien wanneer je met je muis er boven hangt en wanneer niet.
    Alleen voor het toekennen van de events mag de functie document.getElementById() gebruikt worden, verder niet. (H7.4)
    Antwoord
  4. Maak 5 divs met dezelfde tekst waarvan je door te klikken de opmaak als volgt kan veranderen:
    als je gewoon op een div klikt, wordt deze vetgedrukt.
    Door op een vetgedrukte div te klikken, terwijl je shift ingedrukt houdt moet deze weer gewoon worden.
    De tekst in de div maakt niet uit (tip: geef de divs een achtergrondkleur, zo kun je zien wanneer je er op klikt of niet).

    Let op: alleen de opmaak van de div waarop geklikt wordt mag veranderen, ze veranderen dus los van elkaar. De functie document.getElementById() mag alleen bij het toekennen van de events gebruikt worden. (H7.5)
    Antwoord
  5. Het is lastig om uit het hoofd te leren welke toetscode bij elke toets hoort. Toch heb je deze toetscode nog wel eens nodig bij event.keyCode. Maak een pagina waarbij als je op een toets drukt, de code van die toets op de pagina weergegeven wordt. Popup-boxjes (zoals alert()) en document.write() zijn verboden. (H7.5)
    Antwoord
  6. Maak een pagina waarop constant de coördinaten van je muis worden weergegeven. Gebruik van document.write() is verboden. (H7.5)
    Antwoord