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

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.

Naar boven

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:

JavaScript:
  1. Opdracht_1
  2. Opdracht_2
  3. Opdracht_3

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

JavaScript:
  1. 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:

JavaScript:
  1. Opdracht_1;
  2. Opdracht_2;
  3. 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.

Naar boven

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:

JavaScript:
  1. document.write("Hello world!");

Wat document precies betekent kom later in dit boekje (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 is 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:

JavaScript:
  1. document.write(42);
  2. document.write("42"); // Geeft dezelfde uitvoer als de regel hierboven
  3. document.write('42'); // Geeft ook dezelfde uitvoer
  4. document.write("42'); // Mag niet! Dit is een mix van " en '

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 ze geen komma gebruiken 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:

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

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

Naar boven

3.3. Commentaar

In de vorige paragraaf stond dit stukje code:

JavaScript:
  1. document.write(42);
  2. document.write("42"); // Geeft dezelfde uitvoer als de regel hierboven
  3. document.write('42'); // Geeft ook dezelfde uitvoer
  4. document.write("42'); // Mag niet! Dit is een mix van " en '

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:

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

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:

JavaScript:
  1. alert("Dit is een alert-box...");

Heeft dus als resultaat:
Alert box

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

JavaScript:
  1. alert("Letterlijke tekst");
  2. alert(42); // Laat een getal zien
  3. 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.

Naar boven

3.5. Opdrachten

  1. Maak een scriptje waarmee je jezelf voorstelt, de uitvoer moet er als volgt uit zien:

    Hallo, ik ben Mark.
    Ik ben 16 jaar oud!

    Gebruik hiervoor exact 2 statements (H3.2)
    Antwoord
  2. Geef van het volgende stukje JavaScript aan wat de uitvoer zal zijn:
    1. document.write("Hallo wereld!<br />");
    2. document.write(/*"Hoe gaat het vandaag met u?<br />"*/);
    3. document.write("- Prima, dank u!<br />");/* Het gaat goed
    4. document.write("En met u?<br />");
    5. document.write("Ach, het is wel eens beter geweest...*///<br />");
    6. document.write('Nou, tot ziens dan maar!<br />'); // Neem afscheid
    
    (H3.3)
    Antwoord
  3. 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