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

4. Variabelen

In elke programmeertaal zijn variabelen erg belangrijk. In JavaScript dus ook. Misschien ken je ze al van wiskunde, maar in dit hoofdstuk wordt uitgelegd wat het in JavaScript zijn en hoe ze werken.

4.1. Wat is een variabele?

In de wiskunde kom je heel vaak variabelen tegen, denk maar aan 2x = 42. Hierbij staat x voor een onbekende waarde. Een variabele is dus een andere naam voor een getal. Een variabele heeft dus een waarde. Dit kan elke waarde zijn, denk maar aan: y = 5x, y kan nu elke waarde zijn. Zo werkt het ook met JavaScript, je geeft je variabele een naam (vaak iets logischer dan x of y), en die geef je een waarde. Die waarde kun je dan uiteraard weer op andere plekken in je code gebruiken.

Maar wat is zo'n variabele nou precies? Een variabele is een plekje in het geheugen van de computer, en met de naam van die variabele (dus bijvoorbeeld x of y) kun je dan bij het geheugen op dat plekje. Ergens in het geheugen van de computer staat dus een waarde opgeslagen, en die kan jij dan met JavaScript veranderen of gebruiken.

4.2. Variabelen maken en gebruiken

Hoe maak je nou variabelen aan, en nog belangrijker: hoe gebruik je ze dan? Voor het aanmaken moet je dus op de een of andere manier de computer om een stukje geheugen vragen, en dat stukje geheugen moet je dan een naam geven. Namelijk de naam van de variabele. Dat klinkt ingewikkeld, maar dat is het niet:

var x;

Nu heb je dus een variabele x gemaakt. Het aanmaken van een variabele bestaat dus uit (minstens) 2 delen: het woord var en een zelfgekozen naam (in dit geval: x).

Voor het geven van die naam zijn enkele regels:

• De naam mag niet al bestaan (dus bijvoorbeeld alert en var zijn verboden)
• De naam mag met een letter (hoofdletter of kleine letter) beginnen, of met een underscore (_)
• De naam mag daarna letters (hoofdletters of kleine letters), underscores(_) en cijfers bevatten.

Enkele voorbeelden:

var x;              // Is goed
var X;              // Is goed, let op: deze naam is anders dan de bovenstaande naam
var naam;           // Is goed
var 2eNaam;         // Is fout, een naam mag niet met een cijfer beginnen
var tweede_naam;    // Is goed
var tweedeNaam;     // Is goed
var naam2;          // Is goed
var ___;            // Is goed, maar af te raden (niet overzichtelijk)
var var;            // Is fout, de naam var bestaat al
var $x;             // Is fout, een $ is niet toegestaan
var function;       // Is fout, de naam function bestaat al (zie H5.2)

Voordat je de waarde van zo'n variabele kan gebruiken zul je eerst een waarde aan die variabele moeten toekennen:

var x;
x = 42;

Een is-teken (=) betekent dus niet "is gelijk aan", maar "wordt gelijk aan" (of kortweg "wordt"). Je zou de bovenstaande code dus als volgt kunnen vertalen:

Maak een variabele, met de naam x;
x wordt 42;

Dit kan ook korter:

var x = 42; // Maak een variabele, met de naam x, en deze wordt 42

Nu x een waarde heeft kan die waarde ook gebruikt worden. Overal waar nu x staat zal dit vervangen worden door de waarde van x. Behalve als het tussen "" of '' staat, dan neemt de computer het namelijk letterlijk en ziet het dus niet als code (zoals besproken in H3.2).

var x = 42;
document.write(x);      // Uitvoer: 42
document.write("<br />");
document.write('x');    // Uitvoer: x (niet 42!)
document.write("<br />");
x = 11;
document.write(x);      // Uitvoer 11

Zoals je aan de laatste regel code kan zien kan de waarde van een variabele door de loop van het script heen wijzigen. Vandaar de term variabele, zijn waarde variëert namelijk.

4.3. Functie prompt

Variabelen blijken pas echt nuttig te zijn wanneer je invoer van de gebruiker wil vragen. Dan weet je namelijk niet van tevoren wat er ingevoerd gaat worden.

Met prompt() kun je de invoer van de gebruiker vragen, prompt() werkt hetzelfde als alert(). Alleen prompt heeft een waarde. Hoe dit precies kan, wordt beschreven in H5.3. Je kan dus scrhijven:

var antwoord = prompt("Wat is uw naam?", "");
document.write("Uw naam is: ");
document.write(antwoord);

Zodra er dus een antwoord is gegeven verandert het stukje prompt("Wat is uw naam?") in dat antwoord. Dat antwoord wordt vervolgens opgeslagen in de variabele antwoord, en die wordt vervolgens op het scherm gezet (achter de tekst Uw naam is:).

Je kan ook zorgen dat de computer standaard al iets invult voor de gebruiker, door achter de tekst die weergegeven moet worden een komma te plaatsen en dan de tekst die je standaard ingevuld wil hebben:

var spamGebruiker = prompt("Wilt u zich inschrijven voor de nieuwsbrief?", "Ja");

Hier wordt dus standaard al de tekst Ja ingevuld in het invoervakje. Maar de gebruiker kan er nog altijd van maken wat hij of zij wil.

4.4. Operatoren

Om bewerkingen op die variabelen uit te voeren (zoals optellen, vermenigvuldigen, delen, etc) zijn er operatoren. Het zal je waarschijnlijk erg bekend voorkomen:

var a = 12 + 6;

In dit geval is het natuurlijk veel handiger gewoon 18 te schrijven.

Omdat overal waar je gewoon een getal in kan vullen je ook een variabele in kan vullen kun je die operatoren natuurlijk ook op variabelen toepassen:

var a = 6;
var b = 5;
document.write(a + b); // Uitvoer: 11
document.write("<br />");
document.write(b - a); // Uitvoer: -1
document.write("<br />");
document.write(a * b); // Uitvoer: 30

Er zijn een hoop verschillende operatoren. In de volgende tabel gaan we er even vanuit dat a = 6 en b = 5:

Dit zijn alle operatoren waarmee je bewerkingen kan doen. Er bestaan ook zogenaamde toekenningsvariabelen. In de voorbeelden zijn weer a = 6 en b = 5 gebruikt.

De operatoren kennen gewoon de standaard voorrangsregels. Waarbij toekenningsoperatoren de laagste prioriteit hebben:

var a = 6;
var b = a - 1;              // b = 5
document.write(a*b-2);      // (6*5)-2 = 28
document.write("<br />");
document.write(a*(b-2));    // 6*(5-2) = 18
document.write("<br />");
a /= b+5;                   // a /= (5+5) => a /= 10 => a = 0.6
a += 0.4;                   // a = 1
document.write(a++);        // Uitvoer: 1, a = 2 (eerst a gebruiken, daarna verhogen)
document.write("<br />");
document.write(++a);        // Uitvoer: 3, a = 3 (eerst a verhogen, daarna gebruiken)
document.write("<br />");
 
// En zelfs:
document.write(a += 2);     // Uitvoer: 5, a = 5

4.5. Strings

Strings zijn tekenreeksen, stukken tekst dus. Je bent ze al eerder tegen gekomen in dit boekje. Dat waren namelijk de teksten tussen "" of '', de stukjes die de browser dus niet zag als code maar als letterlijke tekst. Merk op dat er of "" of '' gebruikt moet worden, en geen combinatie daarvan! Dus "letterlijke tekst" is goed, 'letterlijke tekst' ook, maar "letterlijke tekst' of 'letterlijke tekst" niet!

Strings kunnen net als alle andere variabelen gebruikt worden:

var str = "Hello world!";   // Variabele aanmaken en daar een string in opslaan
document.write(str);        // Uitvoer: Hello world!

Variabelen waarin strings opgeslagen zijn hebben echter andere operatoren dan normale variabelen. Eigenlijk kennen ze alleen de operatoren =, + en +=.

De operator = hebben we al gezien:

var str = "Hello world!";   // Variabele aanmaken en daar een string in opslaan
document.write(str);        // Uitvoer: Hello world!
str = " How are you?";      // Nieuwe waarde toekennen aan str
document.write(str);        // Uitvoer:  How are you?

De operator + betekent eigenlijk niks anders dan twee strings, of een string en een normale variabele (getal) aan elkaar vastmaken:

var str = "Hello" + ' ' + "world!";
document.write(str); // Uitvoer: Hello world!

Als je de betekenis van + weet en de betekenis van =, dan is de betekenis van += niet zo moeilijk gezien a += b eigenlijk hetzelfde is als a = a + b. Dat geldt ook voor strings:

var str = "Hello ";
str += "world!";
document.write(str);                    // Uivoer: Hello world!
document.write("<br />");
document.write(str + " How are you?");  // Uitvoer: Hello world! How are you?
str += " I'm " + 16 + " years old.";        // Zelfs gewone getallen kunnen aan een string worden toegevoegd
document.write("<br />");
document.write(str);                    // Uitvoer: Hello world! I'm 16 years old.

De operatoren + en += hebben dus een dubbele betekenis. Voor de + geldt: deze telt alleen de getallen op als aan beide kanten een getal staat. Als een van beide kanten een string is zal de andere kant ook als string worden gezien en worden de strings aan elkaar geplakt. Bij += werkt dit ongeveer hetzelfde, dat komt omdat a += b eigenlijk hetzelfde is als a = a + b. Daarbij geldt dus wel dat a naderhand een string is als a of b een string was. Als ze beide een getal waren gebeurt wat je in H4.4 geleerd hebt, dan worden de getallen bij elkaar opgeteld en wordt a het resultaat hiervan.

Bij strings heb je nog wel eens het probleem dat je aanhalingstekens of enters in de string wil gebruiken. Daarvoor zijn de zogenaamde escape sequences bedacht, dat betekent dat je binnen in de string een soort speciale code hebt om aan te geven dat hij daar een enter moet plaatsen of dat de string niet eindigt bij dat aanhalingsteken:

var str = "Citaat van Caesar: \"Veni, vidi, vici\"";
var str2 = "Regel 1\nRegel 2\nRegel 3";
var str3 = 'Naam:\tCaesar\nCitaat:\t\'Veni, vidi, vici\'';
var str4 = "U vindt het bestand in C:\\Program Files\\Adobe";

Er wordt dus eerst een \ geplaatst en dan nog een karakter. De eerste backslash (\) betekent dat er zo'n escape sequence gaat volgen. Daar zijn er een heleboel van, maar de belangrijksten zijn:

De \\ is nodig omdat een enkele \ zou betekenen dat er een escape sequence volgt, en dan zou de browser dus niet weten wat je bedoelt met: "C:\\Users\nick". Moet dit nou C:\Users\nick worden, of C:\Users<enter>ick? Je bedoelde dan waarschijnlijk de eerste, maar het wordt de laatste! Als je dus een \ wil typen, gebruik dan altijd \\.

Voor aanhalingstekens is echter een klein trucje, zodat je geen escape sequences hoeft te gebruiken. Want die escape sequences doen de overzichtelijkheid vaak niet ten goede (zoals je in het voorbeeld waarschijnlijk al gezien had). Als je dubbele aanhalingstekens wil gebruiken ("), dan kun je de string ook gewoon tussen enkele aanhalingstekens zetten ('). De browser weet immers toch dat het dan begint bij een ' en eindigt bij een ' (en niet bij een "). Anders om werkt dit uiteraard ook:

var str1 = "Da's vervelend!";                                    // Is goed, de string stopt immers toch pas bij een "
var str2 = 'Citaten moeten tussen ", anders gaan er punten af!'; // Is ook goed, de string stopt toch pas bij een '

4.6. Opdrachten

1. Geef van de volgende variabele namen aan of ze goed of fout zijn. Als een naam fout is, geef dan aan wat er fout is.
   1. blabla
   2. blaBla
   3. x_x
   4. x2
   5. 2x
   6. x_kwadraat
   7. xKwadraat
   8. x-kwadraat
   9. (x)
   10. x^2
   (H4.2)
2. Maak een scriptje waarin je 3 variabelen aanmaakt, en geef ze alle 3 ergens in het script een andere waarde dan ze in het begin hadden. Gebruik maximaal 6 statements. (H4.2)
3. Hetzelfde als opdracht 2, maar gebruik nu maximaal 4 statements. (H4.2)
4. Maak een script dat vraagt hoeveel boeken een boekwinkel verkocht heeft, vraag daarna hoe duur een boek is en vraag daarna hoeveel het de boekwinkel kost zo'n boek in te kopen. Daarna laat je de gebruiker weten hoeveel winst de boekwinkel gemaakt heeft.
   Je mag er hierbij vanuit gaan dat de getallen die ingevoerd worden geldige getallen zijn. (H4.4)
   Voorbeeld
5. Voorspel de waarden van de variabelen na afloop van dit script.

   var a = 3;
   var b = 4;
   var c = 5;
   a += b+c;
   b = c++;
   c -= ++b;
   a *= b;

   (H4.4)
6. Maak een variabele met daarin een string die het volgende stukje tekst bevat:

   Vaak wordt gezegd:
   "Je bent nooit te oud om te leren".
   Da's nou nog eens een wijze spreuk!

   Je moet de variabele met de string erin in 1 statement maken. Vervolgens laat je de waarde van die gemaakte variabele zien door middel van een alert-boxje. (H4.5)
7. Maak een scriptje waarin je om iemands naam en leeftijd vraagt (2 prompt-boxjes dus). Laat dan vervolgens een alert-boxje zien met de volgende tekst:

   Hoi ,
   ik ben  jaar ouder dan jij!

   
   Waarbij je door de eerder verkregen naam vervangt en door het verschil in leeftijd tussen jou en die ander. Het is hierbij niet erg als er komt te staan ik ben -3 jaar ouder dan jij! als je 3 jaar jonger bent.
   
   Je mag er weer vanuit gaan dat de ingevulde leeftijd een geldige leeftijd is. (H4.5)