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

10. Globale objecten

Zoals in H9.5 al werd gezegd is dit niet een naslagwerk. Toch worden in dit hoofdstuk een aantal veel voorkomende objecten en een deel van hun methodes behandeld, omdat deze altijd wel van pas zullen komen.

10.1. Wat zijn globale objecten?

In H9 werd uitgelegd wat objecten zijn. Je kan dus zelf objecten maken.

var mijnArray = new Array(); // Een array is een object, je maakt hier dus een object aan

Sommige objecten zijn echter al voor je gemaakt, dit zijn objecten die je zelf ook niet kan namaken. Je bent ze gedurende alle uitleg op deze site al eens tegen gekomen, bijvoorbeeld document. Dit zijn globale objecten, deze zijn dus overal in je code bruikbaar en zullen overal in je code naar hetzelfde object verwijzen. In dit hoofdstuk wordt van de belangrijkste uitgelegd wat ze doen en wat je er mee kan. Meer informatie kan wederom op het internet gevonden worden, waarbij het (weliswaar Engelstalige) naslagwerk van W3Schools over JavaScript aan te raden is.

10.2. Het window object

Het window object gebruik je veel maar dat merk je nooit. Het eigenaardige aan dit object is namelijk dat dit het enige geval is waarbij je de objectnaam en dan de punt mag weglaten. Zo heb je de functie alert() al vaak gebruikt, maar eigenlijk is dat een methode van window terwijl je niet hoeft te typen window.alert() (wat overigens wel mag).

Je mag de naam window dus weglaten. Je hoeft het enkel te weten om te snappen waarom ergens soms window.alert() of window.document.getElementById() staat in plaats van gewoon alert() of document.getElementById(). Zelf hoef je nooit window. te typen, tenzij je dat natuurlijk overzichtelijker vindt.

Het window object bevat nog twee handige methoden die je vaak zult gebruiken, window.setTimeout() en window.setInterval() Of zoals je het dus ook kan noemen: setTimeout() en setInterval(). Ze hebben beide 2 argumenten nodig, het eerste is een string die een stukje JavaScript bevat, het tweede een aantal milliseconden. Vervolgens wordt het stukje JavaScript in de string na het gegeven aantal milliseconden uitgevoerd. In het gevan van setTimeout() wordt het eenmalig uitgevoerd, in het geval van setInterval() wordt het elke keer weer opnieuw uitgevoerd na het gegeven aantal milliseconden.

setTimeout('alert("Mij zie je na 5 seconden!");', 5000);      // 5000 ms = 5s
setInterval('alert("Mij zie je elke 3.5 seconden!");', 3500); // 3500 ms = 3.5s

Soms wil je een time-out of interval stoppen. Zeker bij een interval kan dat handig zijn. Zodra je een van die twee functies aanroept geeft die een ID terug, dat ID kun je dan opslaan in een variabele en kun je later weer gebruiken om de timer te stoppen. Merk op dat als je de timer stopt de code dus niet meer uitgevoerd wordt. Het stoppen van die timer gaat met clearTimeout() voor time-outs en clearInterval() voor een interval. Als argument geef je dan het ID van de time-out of interval die je wilt stoppen aan de functie mee.

var id = setTimeout('alert("Mij zie je na 5 seconden!");', 5000);     // Sla het ID op in een variabele
clearTimeout(id);                                                       // Stop de timer

10.3. Het document object

Het document object heb je ook al eens gebruikt. Het is deel van het window object, maar zoals beschreven in H10.2 hoef je window niet te noemen. Je kan dus window.document typen, maar ook document.

Het document object stelt het gehele HTML-document voor. Dus alle HTML-tags, plaatjes, links, formulieren, noem maar op. Het document object bevat dan ook methodes en eigenschappen om die die dingen op te vragen en te bewerken. Zo bevat document 4 arrays:

Zo kun je bijvoorbeeld aangeven hoeveel plaatjes er op je webpagina staan.

function telPlaatjes()
{
    alert("Deze pagina bevat " + document.images.length + " plaatjes.");
}
window.onload = telPlaatjes; // Omdat de HTML eerst geladen moet worden voordat de JavaScript uitgevoerd kan worden (gezien de JavaScript de HTML gebruikt)

<img src="img/plaatje.png" alt="Een plaatje" /><br />
<img src="img/plaatje2.png" alt="Nog een plaatje" />

Gezien die arrays HTML elementen bevatten kan je die HTML elementen ook aanpassen via die array.

function veranderTekst()
{
    for(var i=0; i<document.anchors.length; ++i)
    {
        document.anchors[i].innerHTML = "Hello world!"; // Pas de tekst van het a-element aan
    }
    alert("In alle anchors staat nu de tekst Hello world!");
}
window.onload = veranderTekst;

<a name="een naam">Tekst</a><br />
<a href="pagina.html">Nog wat tekst</a><br />
<a name="nog een naam" href="pagina2.html">En nog wat tekst!</a>

De eigenschap body is ook wel noemenswaardig, document.body verwijst gewoon naar de body van de HTML. Dus het body-element.

Verder bevat hij de volgende handige methodes:

Wat je allemaal met een HTML-element in JavaScript kan wordt uitgelegd in H10.5. Een ding ken je al: innerHTML.

function veranderTeksten()
{
    var alleSpans = document.getElementsByTagName("span");
    for(var i=0; i<alleSpans.length; ++i)                           // Eerst vullen we alle span-elementen met de tekst "How are you?"
    {
        alleSpans[i].innerHTML = "How are you?";
    }
    document.getElementById("mijnID").innerHTML = "Hello world!";   // Daarna veranderen we de tekst van alleen het HTML-element met het id "mijnID" in "Hello world!"
}
window.onload = veranderTeksten;

<span id="mijnID">Lorem ipsum</span>
<span>dolor sit amet</span>

Ook hier geldt weer dat er meer methodes bestaan, daarvoor verwijs ik wederom naar een naslagwerk: W3Schools JavaScript - Het document object

10.4. Het Math object

Met het Math object kun je wiskundige functies en constanten (zoals π) gebruiken. Deze website is niet bedoeld om wiskunde uit te leggen, dus er wordt alleen genoemd wat welke methode doet of wat een eigenschap voorstelt. Er wordt niet uitgelegd wat je er wiskundig mee kan.

De eigenschappen van het Math object zijn constant, dat wil zeggen dat je ze niet aan kan passen.

Voorbeeld van gebruik van het Math object:

var x = prompt("Geef een getal op", "");
alert("De wortel van " + x + " is " + Math.sqrt(x));

10.5. Standaard HTML-Element object

Wanneer je een variabele in JavaScript hebt die naar een HTML-element verwijst (bijvoorbeeld verkregen van document.getElementById()) dan kun je dat HTML-element aanpassen via die variabele. Zo'n HTML-element is in JavaScript namelijk ook gewoon een object met methodes en eigenschappen. Voor een aantal HTMl elementen zijn natuurlijk specifieke eigenschappen (zoals bijvoorbeeld bij een img-tag, het src attribuut). Maar HTML-elementen hebben ook veel gemeen, in deze paragraaf worden een aantal handige methodes en eigenschappen beschreven die elk HTML-element in JavaScript heeft.

Zoals je al eerder hebt gezien kun je de inhoud van het element aanpassen via innerHTML. Dit vervangt de gehele inhoud, dus ook de tags die er in staan.

function veranderTekst()
{
    var span = document.getElementById("spanTag");
    span.innerHTML="Hallo <i>wereld!</i>";
}
window.onload = veranderTekst;

<span id="spanTag">Hello <b>world!</b></span>

De CSS-stijl van het element kan ook aangepast worden, via style. Dit is alsof je gewoon CSS zou neerzetten het style-attribuut van dat element. Zo kun je bijvoorbeeld de tekstkleur veranderen wanneer er met de muis overheen gegaan wordt.

function veranderTekstKleur()
{
    this.style.color = "#f00";      // Verander de tekst-kleur van het element waar vanuit de event getriggerd is in rood
}
function maakEvents()
{
    var spans = document.getElementsByTagName("span");
    for(var i = 0; i < spans.length; ++i)
    {
        spans[i].onmouseover = veranderTekstKleur;
    }
}
window.onload = maakEvents;

<span>Dit is een beetje tekst</span><br />
<span>Nog wat tekst</span><br />
<span>Het laatste beetje tekst</span>

Het gebruik is dus simpel: element.style.CssStijlNaam = "CSS waarde";, dit zou dan gelijk zijn aan style="CssStijlNaam: CSS waarde;" in het gekozen element. Alleen zijn er in CSS ook stijl namen met een - er tussen (zoals bijvoorbeeld background-color), en in een naam in JavaScript kan geen - zitten want dat is al een minteken. Daarom laat je dan de - weg, en begin je het woord na de - met een hoofdletter: element.style.backgroundColor = "#f00";. Voor een volledig overzicht van alle CSS stijlen die via style aan te passen zijn, zie: W3Schools JavaScript - style

Merk op dat je in CSS vaak een eenheid erbij moet geven, bijvoorbeeld: width: 20px;, de waarde is dan dus 20px en niet alleen 20 en dus zonder ; (die geeft enkel aan dat de waarde daar eindigt, maar is dus geen deel van de waarde). Dus in JavaScript moet dat dan ook: element.style.width = "20px"; worden, waarbij dus die ; niks met de CSS te maken heeft maar enkel het einde van het statement aan geeft (zie H3.1).

Via elke JavaScript verwijzing naar een HTML-element kan het id of de class van dat HTML-element opgevraagd of gewijzigd worden. Dat kan via element.id of element.className. Zo kun je bijvoorbeeld met JavaScript alle spans selecteren die de class abc hebben.

function veranderSpans()
{
    var spans = document.getElementsByTagName("span");      // Selecteer alle spans in het document
    for(var i=0; i<spans.length; ++i)                       // Doorloop al die spans
    {
        if(spans[i].className == "abc")                     // Als de huidige span de class "abc" heeft
        {
            spans[i].style.color = "#f00";                  // Pas de stijl van de huidige span aan, maak de tekst rood
        }
    }
}
function maakEvents()
{
    document.getElementById("veranderABC").onclick = veranderSpans;
}
window.onload = maakEvents;

<span class="abc">Deze span heeft de class &quot;abc&quot;</span><br />
<span class="abc">Deze ook...</span><br />
<span>Maar deze niet!</span><br />
<button id="veranderABC">Kleur alle abc-spans rood</button>

In HTML staan alle elementen in elkaar:

<div id="deDiv">Ik ben een div-element
 <span id="deSpan">En ik ben een span element in het div-element
  <b id="deB">Met daar in weer een b-element...</b>
  <i id="deI">en een i-element!</i>
 </span>
</div>

Als je met JavaScript een verwijzing naar een element hebt, kun je ook een verwijzing naar zijn parent krijgen. Zijn parent is het element waar hij in staat. Dus in het geval van de span hierboven, zou dat de div zijn. Die verwijzing kan met de eigenschap parentNode worden opgevraagd.

Een element kan altijd maar 1 parent hebben, maar kan meerdere kinderen hebben. Zoals de span in het bovenstaande voorbeeld, die heeft een b en een i als kind, merk op dat de b en i wel indirect kinderen zijn van de div maar niet direct. Al die directe kinderen kun je verkrijgen met de eigenschap childNodes, dat is dus een array van alle HTML-elementen die direct in dat element zitten (kan dus ook leeg zijn).

Nou kan er ook nog tekst in een element staan, dit telt ook als kind. Zelfs de enter en de paar spaties aan het eind van de div met het id deDiv (dus tussen </span> en </div>) in het bovenstaande stukje HTML tellen als tekst, ook al zie je ze niet in het resultaat!

function laatKinderenZien()
{
    var div = document.getElementById("deDiv");
    alert("Het div-element bevat " + div.childNodes.length + " kinderen");
 
    var span = div.childNodes[1];           // Het span-element is 2e (na het stukje tekst) kind van de div
    alert("Het span-element bevat " + span.childNodes.length + " kinderen");
    for(var i=0; i<span.childNodes.length; ++i)
    {
        alert("Het " + (i+1) + "e element is een " + span.childNodes[i].nodeName + "-element");
    }
}
window.onload = laatKinderenZien;

<div id="deDiv">Ik ben een div-element
 <span id="deSpan">En ik ben een span element in het div-element
  <b id="deB">Met daar in weer een b-element...</b>
  <i id="deI">en een i-element!</i>
 </span>
</div>

In het bovenstaande stukje code zie je ook nodeName staan (regel 9). Dit is ook een eigenschap die elk HTML-element bevat, en is niks anders dan de naam van het element (DIV, SPAN, B, I, etc) in hoofdletters.

Wederom zijn er veel meer eigenschappen en methodes dan in deze paragraaf besproken zijn, daarvoor verwijs ik weer naar W3Schools JavaScript - Eigenschappen en methodes van alle HTML-elementen

10.6. Een HTML-Table object

Zoals in H10.5 al is gezegd, hebben een aantal HTML-elementen nog wat specifieke eigenschappen. Zo heeft ook een tabel een aantal handige eigenschappen die ik hier nog wel wil bespreken. Je zal deze namelijk vaak nodig hebben, als je bijvoorbeeld een spelletje maakt dan gebruik je vaak een tabel als speelbord of level.

Elke tabel-object in JavaScript heeft een eigenschap rows, dit is een array van alle rijen in die tabel. Deze array kan dus leeg zijn. Elk element in die array is dus een verwijzing naar een tr-element. De rijen staan in de array op dezelfde volgorde als ze in de HTML voorkomen.

Elke rij, dus elk tr-element, bevat weer een een eigenschap genaamd cells. Dat is een array van alle cellen (dus td's) in die rij, ook weer in dezelfde volgorde als voorkomen in de HTML.

Op die manier kun je bijvoorbeeld een blokje door een tabel laten bewegen.

var x = 2;  // De x-coordinaat van het zwarte wordt in deze variabele bijgehouden
var y = 2;  // De y-coordinaat van het zwarte wordt in deze variabele bijgehouden
 
function beweeg(event)
{
    if(window.event)
        event = window.event;
 
    var table = document.getElementById("gameboard");
    table.rows[y].cells[x].style.backgroundColor = "#fff";  // Maak het huidige zwarte vakje wit, we gaan immers hier vandaan verplaatsen
                                                            // Als er geen pijltjes toets ingedrukt is blijven de coordinaten ongewijzigd
                                                            // en zal het vakje dus opnieuw zwart worden gemaakt aan het einde van deze functie
 
    switch(event.keyCode)
    {
        case 37:                                            // Pijltje naar links
            if(--x < 0)                                     // Trek 1 van x af, als het resultaat kleiner is dan 0 (dus buiten de tabel valt)
                x = 4;                                      // Spring dan weer naar rechts
        break;
 
        case 38:                                            // Pijltje naar boven
            if(--y < 0)                                     // Trek 1 van y af, als het resultaat kleiner is dan 0 (dus buiten de tabel valt)
                y = 4;                                      // Spring dan weer naar onder
        break;
 
        case 39:                                            // Pijltje naar rechts
            if(++x > 4)                                     // Tel 1 bij x op, als het resultaat groter is dan 4 (dus buiten de tabel valt)
                x = 0;                                      // Spring dan weer naar links
        break;
 
        case 40:                                            // Pijltje naar onder
            if(++y > 4)                                     // Tel 1 bij y op, als het resultaat groter is dan 4 (dus buiten de tabel valt)
                y = 0;                                      // Spring dan weer naar boven
        break;
    }
 
    table.rows[y].cells[x].style.backgroundColor = "#000";  // Maak het vakje met de nieuwe coordinaten zwart
}
 
function maakEvents()
{
    document.body.onkeydown = beweeg;
}
window.onload = maakEvents;

<table id="gameboard" style="empty-cells:show;width:250px;height:250px;">
 <tr><td></td><td></td><td></td><td></td><td></td></tr>
 <tr><td></td><td></td><td></td><td></td><td></td></tr>
 <tr><td></td><td></td><td style="background-color:#000;"></td><td></td><td></td></tr>
 <tr><td></td><td></td><td></td><td></td><td></td></tr>
 <tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
Bestuur het zwarte vakje met de pijltjes

10.7. Opdrachten

1. Maak een soort timer. De gebruiker wordt gevraagd over hoeveel seconden de timer af moet gaan (ga er vanuit dat er een geldig getal ingevoerd wordt). Na zoveel seconden moet er dan een berichtje verschijnen met de tekst: "Timer afgelopen!". (H10.2)
2. Als opdracht 1, maar maak er nu een knop bij waarmee de timer gestopt kan worden voordat deze afgelopen is. (H10.2)
3. Er zijn 2 manieren om op een webpagina met JavaScript te tellen hoeveel a-elementen er zijn, als er geen area-elementen op die pagina staan. Op welke 2 maniere kan dit? (H10.3)
4. Geef aan hoe je de volgende berekeningen in JavaScript kunt doen:
   1. π²
   2. cos(2^0.5)³
      Opmerking: tot de macht 0.5 is hetzelfde als de wortel trekken.
   3. log_E(13) ook wel genoteerd als: ^Elog(13)
   4. log₂(E) ook wel genoteerd als: ²log(E)
   (H10.4)
5. Maak een pagina met daarop jouw naam en ernaast een knopje (of linkje) "Geef details weer". Als daarop geklikt wordt verandert de tekst van dit linkje in "Verberg details" en moet onder jouw naam je geboortedatum en woonplaats verschijnen.
   Als er op "Verberg details" geklikt wordt moeten je geboortedatum en woonplaats weer verdwijnen (je naam blijft altijd staan) en moet de tekst op de knop/link weer veranderen in "Geef details weer". (H10.5)
6. 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 (H10.5)
7. Maak een tabel waarin elke keer dat de muiscursor over een cel heen beweegt de achtergrond daarvan zwart wordt en de waarde in de cel (in eerste instantie 0) opgehoogd wordt.
   Bij het verlaten van de cel moet de achtergrond weer wit worden.
   Maak gebruik van this. (H10.5)
8. Maak een boter, kaas en eieren spelletje.
   De spelers mogen om de beurt klikken, alleen als er op een leeg vakje geklikt wordt zal er een x of o verschijnen (afhankelijk van wie aan de beurt is).
   Er hoeft geen bericht te verschijnen als er iemand gewonnen heeft. (H10.6)
9. Maak een tabel van 5 bij 5, waarin in het midden een zwart blokje start. Dit blokje moet bestuurt kunnen worden met de pijltjestoetsen. Als het blokje aan de rand komt stopt het daar (het gaat dus niet naar de andere kant, en gaat ook niet van de rand af).
   Tip: maak gebruik van het voorbeeld van H10.6 (H10.6)
10. Hetzelfde als opdracht 9, maar nu maak je het 'speelveld' iets groter. Namelijk 10 bij 10. Wanneer de gebruiker nu ergens klikt komt daar een muur (rood blokje). Door te klikken terwijl shift ingedrukt wordt moeten de muren weer weggehaald kunnen worden.
    Het zwarte blokje mag uiteraard niet op/over een muur lopen. (H10.6)