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

3. Statements (opdrachten)

Statements zijn de basis van een programmeertaal. Een heel script bestaat enkel uit statements. In dit hoofdstuk wordt je uitgelegd wat het precies zijn.

3.1. Wat zijn statements?

Statements zijn simpelweg de opdrachten die je aan de browser geeft. Normaliter gebruik je één statement (opdracht) per regel, ze worden dus gescheiden door een enter:

Opdracht_1
Opdracht_2
Opdracht_3

Als je toch meerdere statements achter elkaar wil op 1 regel, dan kun je ze scheiden met een puntkomma:

Opdracht_1; Opdracht_2; Opdracht_3

Het is een goede gewoonte, zelfs als je maar één statement per regel schrijft, om altijd een puntkomma achter een statement te zetten:

Opdracht_1;
Opdracht_2;
Opdracht_3;

Dit is overzichtelijker, en je kan het nooit fout doen. Bedenk wel: één statement betekent niet dat er ook maar één ding gebeurt. Er kan een heleboel gebeuren in een statement.

3.2. Functie document.write

Je wil heel vaak iets aan de gebruiker laten zien. Dit kan onder andere met document.write(). Waarbij tussen de haakjes de tekst komt te staan die je wil laten zien:

document.write("Hello world!");

Wat document precies betekent kom later in deze cursus (H10.3). Het enige wat dit stukje code doet is de tekst Hello world! op het scherm zetten. De aanhalingstekens (") betekenen dat de computer dat wat ertussen staat als tekst moet zien en niet als code.

Dat noem je dan een zogeheten string (= reeks van tekens), daarover meer in H4.5. Het enige wat je nu moet weten, is dat als je letterlijke tekst wil laten zien dit tussen dubbele aanhalingstekens (") of enkele aanhalingstekens (') moet staan. Een mix daarvan mag niet.
Als je gewoon een getal wil schrijven hoef je geen aanhalingstekens te gebruiken. Dit komt omdat een getal geen letterlijke tekst is, maar ook werkelijk betekenis heeft voor de computer:

document.write(42);
document.write("42"); // Geeft dezelfde uitvoer als de regel hierboven
document.write('42'); // Geeft ook dezelfde uitvoer
 

Zoals je ziet zijn er dus meerdere manieren om hetzelfde te bereiken. In dit geval kun je 42 als getal schrijven of als letterlijke tekst, voor de uitvoer maakt dat niks uit.

Bij het schrijven van getallen moet je er rekening mee houden dat bij cijfers 'achter de komma' er geen komma gebruikt wordt maar een punt. Dus niet: 1,5. Maar wel: 1.5.

Met document.write() laat je dus iets aan de gebruiker zien. Wat je laat zien is in HTML, dus je kan ook schrijven:

document.write("<b>Hello world!</b>");

Nu zul je dus als uitvoer de tekst Hello world! vetgedrukt op het scherm krijgen.

3.3. Commentaar

In de vorige paragraaf stond dit stukje code:

document.write(42);
document.write("42"); // Geeft dezelfde uitvoer als de regel hierboven
document.write('42'); // Geeft ook dezelfde uitvoer

Er is echter nog niet uitgelegd wat die twee slashes betekenen. Met twee slashes kun je aangeven dat de rest van die regel commentaar is. Dus vanaf de // tot aan het einde van de regel wordt alles door de browser genegeerd. Dit is erg handig om uitleg bij je code te geven, zodat je later als je wat wil veranderen beter begrijpt wat dat stukje code doet.

Behalve commentaar met // is er ook commentaar met /* */. Bij die laatste variant kun je meerdere regels commentaar invoegen. Daarbij begint het commentaar namelijk bij /* en het eindigt bij */. Net zoals in CSS dus. Daardoor kan je ook binnen één regel commentaar geven dat nog voor het einde van die regel ophoudt:

document.write("Hello world!"); // Commentaar
// document.write("Hoi wereld!"); <-- Let op!
// De bovenstaande regel is nu geheel commentaar.
// De tekst "Hoi wereld!" zal dus niet op het scherm verschijnen!
document.write("<br />");       // Een enter
document.write(/* En nu in het latijn: */"Ave munde!");
/*
  Dit zijn meerdere regels commentaar.
  Het bovenstaande statement zal de tekst "Ave munde!" laten zien.
*/

3.4. Functie alert

Je kan al tekst op het scherm laten verschijnen, maar soms wil je zeker weten dat je de aandacht van de gebruiker krijgt. Dan wil je dus eigenlijk een pop-up venstertje weergeven. Dat kan met alert(), die werkt hetzelfde als document.write() alleen komt het dan niet simpelweg op het scherm te staan maar krijg je een pop-up venstertje:

alert("Dit is een alert-box...");

Heeft dus als resultaat:

Tussen de haakjes kun je alles invullen dat je ook bij document.write() kan invullen. Alleen werkt HTML daar niet:

alert("Letterlijke tekst");
alert(42); // Laat een getal zien
alert("<b>Jammer genoeg niet vetgedrukt</b>");

Hierbij zal je dus achtereenvolgens 3 pop-up venstertjes krijgen die de teksten Letterlijke tekst, 42 en <b>Jammer genoeg niet vetgedrukt</b> laten zien. Waarbij je bij de laatste dus de <b> en </b> gewoon ziet staan en het dus niet vetgedrukt wordt.

3.5. Opdrachten

1. Maak een scriptje waarmee je jezelf voorstelt, de uitvoer moet er als volgt in de webpagina uitzien:
   
   Hallo, ik ben Mark.
   Ik ben 16 jaar oud!
   
   Gebruik hiervoor exact 2 statements (H3.2)
   Antwoord
2. Doe hetzelfde als bij opdracht 1, alleen dan met pop-up boxjes. Gebruik weer 2 statements. Vergeet niet de opmaak weg te halen! (H3.4)
   Antwoord