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

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.

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

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:

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

// Functie voor het even maken
function functieBijEvent()
{
    alert("Je klikte!");
}
 
// Functie aan het event toekennen
document.getElementById("knop").onclick = functieBijEvent; // Let op, nu geen () gebruiken

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

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

<button id="knop">Klik hier</button>

7.3. Welke events zijn er?

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

De volgende events worden maar door enkele elementen ondersteund:

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.

function vertaal()
{
    // Binnen in deze functie is 'this' dus bekend, als deze functie tenminste door het triggeren van een event wordt aangeroepen
    // 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)
    this.innerHTML = "Hallo wereld!";   // Pas de inhoud van het HMTL-element dat dit event getriggerd heeft aan
}
 
function maakEvents()
{
    document.getElementById("translate_me").onclick = vertaal;
}
window.onload = maakEvents;

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

function vertaal()
{
    this.innerHTML = "Hallo wereld!";   // Pas de inhoud van het HMTL-element dat dit event getriggerd heeft aan
}
 
function maakEvents()
{
    // Alle HTML-elementen hebben een event met dezelfde functie
    // Maar toch zal die functie alleen het element waarop geklikt wordt 'vertalen'
    document.getElementById("translate_me1").onclick = vertaal;
    document.getElementById("translate_me2").onclick = vertaal;
    document.getElementById("translate_me3").onclick = vertaal;
    document.getElementById("translate_me4").onclick = vertaal;
    document.getElementById("translate_me5").onclick = vertaal;
}
window.onload = maakEvents;

<div id="translate_me1">Hello world!<br />(click to translate to Dutch)</div>
<div id="translate_me2">Hello world!<br />(click to translate to Dutch)</div>
<div id="translate_me3">Hello world!<br />(click to translate to Dutch)</div>
<div id="translate_me4">Hello world!<br />(click to translate to Dutch)</div>
<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).

7.5. Event-object

Soms wil je ook informatie over het event hebben. Bij een onkeypress-event wil je bijvoorbeeld vaak weten welke toets er ingedrukt is. Hiervoor kan je een parameter toevoegen aan de eventfunctie. Deze parameter noemen we vaak gewoon event, maar het kan net zo goed pipo zijn. Je mag het zelf verzinnen.

Het is de browser die voor jou die functie uitvoert als de event getriggerd wordt, en het is ook de browser die als argument een event-object aan die functie als argument meegeeft. Je hoeft dus niet zelf daarvoor te zorgen en iets als argument mee te geven. Jouw zelfverzonnen parameter is dus dan dat event-object.

function functieDieEventGebruikt(event)
{
    // Code waarin je event gebruikt
}
 
function maakEvents()
{
    document.getElementById("knop").onclick = functieDieEventGebruikt;
}
window.onload = maakEvents;

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

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

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.

function showCoords(event)
{
 
    alert("De coordinaten van je muis op het scherm zijn: (" + event.screenX + ", " + event.screenY + ")");
}
function maakEvents()
{
    document.getElementById("divje").onclick = showCoords;
}
window.onload = maakEvents;

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

Om te weten welke toets er ingedrukt is, via attribuut keyCode, moet je de bijbehorende functie triggeren via de onkeydown-, onkeypress- of onkeyup-event van het document-object.

Omdat je hier niet een functie koppelt aan iets met een id, kan je de toewijzing meteen bij de start van de pagina doen. Het hoeft dus niet in een functie die je start via window.onload.

document.onkeydown = toetsen
function toetsen(event){
	//iets met event.keyCode doen
}

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. 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
3. Maak een webpagina met daarin in een divje met de tekst 'Klik hier' Zorg ervoor dat elke keer als je op dat divje klikt er een prompt verschijnt die een naam vraagt. Die naam moet vervolgens in dat divje verschijnen Als er nog een keer op het divje geklikt wordt (met nu dus een naam) moet er weer dezelfde prompt verschijnen en de nieuw ingevoerde naam moet achter de vorige naam verschijnen, gescheiden door een komma Let op: gebruik geen variabelenamen die gelijk zijn aan een id (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