2. De basis

2.1. Variabelen

Een variabele kan je beschouwen als een benoemd en gereserveerd stukje werkgeheugen waarin je een waarde kan zetten.

2.1.1. Declaratie en initialisatie

De namen van variabelen, identifiers genoemd, mogen letters, cijfers, _ en $ bevatten, maar het eerste teken moet een letter zijn als je geen moeilijkheden wil krijgen.

Het is de afspraak dat namen van variabelen met een kleine letter beginnen, behalve als ze een constante vertegenwoordigen.
bv: var PI = 3.14159265;
   var tekst = "JavaScript is niet moeilijk!";

Een variabele zal je eerst declareren – een naam geven met het codewoord var – en dan een waarde toewijzen, initialiseren.

Dat kan apart gebeuren, bv:

  • één variabele declareren: var i;
  • twee variabelen tegelijk declareren: var i, j;
  • variabelen initialiseren, een waarde geven: i = 5; j = "hallo";

of per variabele declaratie en initialisatie samen op één regel:
var i = 5;
var j = "hallo";

Bekijk de broncode (rechtsklik en kies Bron) van volgend voorbeeld.

Als je een variabele binnen een functie declareert, bestaat ze alleen binnen die functie.
Verlaat je de functie, dan wordt de variable vernietigd. Zulke variabelen zijn lokale variabelen.
Je kan binnen verschillende functies lokale variabelen met dezelfde naam declareren, aangezien elke lokale variabele enkel herkend wordt binnen de functie waarin ze gedeclareerd werd.

Declareer je een variabele buiten een functie, dan kunnen alle functies op dezelfde pagina die variabele gebruiken; dat is een globale variabele.
De levensloop van zo'n variabele begint bij de declaratie en eindigt als de pagina gesloten wordt.

Pas op: als je een variabele declareert zonder het woordje 'var' ervoor, is die variabele automatisch globaal.

2.1.2. Waarden en types

Constante waarden of literals zijn waarden en tekenreeksen die letterlijk in de programmacode getypt worden, bv: 43 – 1.2 – "Mijn naam" – true

Hierbij gelden de volgende regels:

  • tekenreeksen of strings worden tussen enkele of dubbele aanhalingstekens getypt;
  • Alle getallen (numbers) in JavaScript worden opgeslagen als 64-bit "double precision floating point".
  • gehele getallen of integers mogen decimaal, hexadecimaal of octaal ingegeven worden.
    Wij zijn gewoon aan het tiendelige of decimale stelsel: basiscijfers van 0 tot 9 en vanaf waarde tien een getal dat bestaat uit twee cijfers.
    Integers kunnen positief of negatief zijn en mogen maximaal bestaan uit 15 cijfers.
    bv: var dec = 19 decimaal is gelijk aan var oc = 025 octaal (0 vooraan) en gelijk aan var hex = 0x13 heximaal (0x vooraan)
  • het decimaalteken in JavaScript (en Java) is een punt, geen komma.
    Dus "kommagetallen" of floating point-waarden worden met een punt geschreven, bv. anderhalf is 1.5 en niet 1,5
  • het gereserveerde woord null betekent zoveel als "geen waarde" en dat is niet gelijk aan nul!
  • de logische waarden true (waar) en false (onwaar) zal je tegenkomen i.v.m. voorwaarden.

Behalve numbers en strings kent JavaScript nog vier typen variabelen; klik voor een voorbeeldje.

JavaScript is een zwak getypeerde scriptingtaal: het type van de variabele wordt niet expliciet opgegeven, maar afgeleid uit de context. Het is dus aan de programmeur om te zorgen dat er geen verwarring optreedt!

2.1.3. Arrays

Een variabele bevat maar één waarde tegelijk.
In een array-object daarentegen kan je verschillende waarden stoppen onder één naam.

Een array bestaat uit een rij van elementen, waarbij elk element wel of niet een waarde bevat.
Je kan een waarde uit een array opvragen aan de hand van de arraynaam en het indexnummer van het element.

Je zal beginnen met de array te declareren (maken):
bv: "maak een array met naam 'weekdag' die bestaat uit 7 elementen" wordt: var weekdag = new Array(7);

Daarna kan je de array initialiseren, opvullen.
pas op: het eerste element van een array krijgt nummer nul en in javascript is zondag dag nul

weekdag[0] = "zondag";
weekdag[1] = "maandag" enz.

Maar je kan ook declaratie en initialisatie samen uitvoeren:
ofwel var weekdag = ["zondag", "maandag", "dinsdag", "woensdag", "donderdag", "vrijdag", "zaterdag"];
ofwel var weekdag = new Array("zondag", "maandag", "dinsdag", "woensdag", "donderdag", "vrijdag", "zaterdag");

Volgende stap: elementen opvragen uit een array.
bv: document.write("Het is vandaag " + weekdag[0]);

Bestudeer de broncode van het voorbeeld.

Let erop dat je de juiste indexen gebruikt, want als je een te grote index gebruikt, krijg je geen foutmelding, maar wordt de array stilzwijgend groter gemaakt.


Een array in Javascript is een object, d.w.z.:

  • heeft een constructor:
    new Array(n) maakt een array met n elementen
  • heeft eigenschappen, of in dit geval één eigenschap:
    array.length geeft het aantal elementen in de array
  • en methoden, functies zoals:
    array2.concat(array1) voegt de elementen van array1 toe aan array2.
    array.join() voegt alle elementen samen in één tekstlijn, met komma's tussen de elementen
    array.pop() verwijdert het laatste element van de array
    array.push(waarde) voegt de waarde toe als laatste element van de array
    array.reverse() plaatst de elementen van de array in omgekeerde volgorde
    array.sort() sorteert de elementen in de volgorde: getallen – hoofdletters – kleine letters
    array.shift(waarde) voegt de waarde toe als eerste element van de array – en schuift de rest dus op
    array.unshift() verwijdert het eerste element van de array en schuift de rest een plaatsje op

2.1.4. Meerdimensionale Arrays

Een meerdimensionale array is een array van arrays, bv. voor een tweedimensionale array of tabel definieer je eerst de 'buitenste' array, anders gezegd het aantal rijen en vervolgens wordt elk element een nieuwe array, met evenveel elementen als het aantal kolommen.

Meestal zal je zo'n array via een lus initialiseren en vullen, zie broncode van het voorbeeld.

2.2. Operatoren

Zowel met constante waarden als met variabelen kan je expressies samenstellen en bewerkingen uitvoeren – en daarvoor zijn operatoren nodig.

2.2.1. Wiskundige operatoren

Voor alle bewerkingen op numerieke waarden gebruik je de bekende operatoren:

operatorbetekenisvoorbeeld
+optellenj=8+3; geeft als resultaat in j: 11
-aftrekkenj=8-3; geeft als resultaat in j: 5
*vermenigvuldigenj=8*3; geeft als resultaat in j: 24
/delenj=8/2; geeft als resultaat in j: 4
%modulus, rest van de deling j=7%3; geeft als resultaat in j: 1 (6/3=2, rest 1)
++plus éénj=8; j++; geeft als resultaat in j: 9
--min éénj=8; j--; geeft als resultaat in j: 7

Tekenreeksen, strings kan je ook 'optellen', aan elkaar hangen; dat heet dan concatenatie.
bv: "Hallo"+" "+"allemaal"; geeft als resultaat: Hallo allemaal

2.2.2. Toekenningsoperatoren

Je kan een waarde toekennen aan een variabele met =, maar er bestaan meer mogelijkheden:

operatorbetekenisvoorbeeld
= is gelijk aani = 5;
+= optellen meti += 5; is hetzelfde als i = i + 5;
-=aftrekken vani -= 5; is hetzelfde als i = i - 5;
*=vermenigvuldigen meti *= 5; is hetzelfde als i = i * 5;
/=delen doori /= 5; is hetzelfde als i = i/5;
%=modulusi %= 5; is hetzelfde als i = i % 5;

2.2.3. Vergelijkingsoperatoren

operatorbetekenisvoorbeeld
==is gelijk aan (let op: 2x =) 8==8 is true, 8==7 is false
===is naar waarde én naar type exact gelijk aan 8===8 is true, 8==='8' is false
!=is niet gelijk aan of: is verschillend van 8!=7 is true, 8!=8 is false
<is kleiner dan 7<8 is true, 8<7 is false
>is groter dan 9>8 is true, 8>9 is false
<=is kleiner dan of gelijk aan 8<=8 is true, 8<=7 is false
>=is groter dan of gelijk aan 8>=8 is true, 8>=9 is false

Pas op: bij de toewijzing van een waarde aan een variabele gebruik je één =-teken (bv: j=4), in een vergelijking van twee waarden staat een dubbel =-teken.

2.2.4. Logische operatoren

Wil je meer voorwaarden tegelijk testen, dan combineer je ze met een logische operator:

operatoromschrijvingvoorbeeldbetekenis
&&en(vw1) && (vw2) vw1 is waar en vw2 is waar
||of(vw1) || (vw2)vw1 is waar of vw2 is waar
!niet!(vw1) als vw1 true (waar) is, is het resultaat false (onwaar)
?voorwaarde(vw1) ? dan : anders als vw1 waar is, wordt het resultaat "dan",
is vw1 onwaar dan wordt het resultaat "anders"

2.3. Selecties

We willen met JavaScript meer dynamiek in webpagina's brengen – en meestal betekent dat, dat het programma moet kunnen reageren op handelingen van de gebruiker, problemen zoals:
"als (if) de gebruiker keuze 1 maakt, dan moet oplossing 1 uitgevoerd worden, anders (else) oplossing 2".

2.3.1 If

Een voorwaarde definieer je via if met of zonder else.
De voorwaarde zelf staat tussen haakjes.

Dat geeft als eenvoudigste vorm volgende constructie:
if (voorwaarde)
  statement;

Als de voorwaarde klopt (is true), wordt statement uitgevoerd, anders niet.

De voorwaarde zal meestal vergelijkingsoperatoren bevatten.

De voorwaarde zelf staat tussen haakjes en als er meer statements uitgevoerd moeten worden na if(voorwaarde), dan groepeer je de statements met { }.

En dit geeft precies hetzelfde resultaat:
if(voorwaarde)
{ statement1;
  statement2;
}

Dat geeft in algemene vorm:
if(voorwaarde) {
 statement1;
 statement2; }

Moet er ook een actie uitgevoerd worden als de voorwaarde niet waar is, dan komt er else bij:

if (voorwaarde)
 statement1;
else
 statement2;

Even een voorbeeld bekijken? Klik hier.

Tja, in dit voorbeeldje zijn we wel aan 't vals spelen, hm?
Of de gebruiker nu 2 of 4 kiest, de kleur wordt blauw.
Hier hebben we meer if's nodig om een meervoudige keuze te bewerkstelligen.

En dan kunnen we ook dadelijk een controle inbouwen.
Bestudeer de broncode van volgend voorbeeld ter illustratie.

Hier ben je wel verplicht om accolades te gebruiken, ook al is het telkens maar één statement, anders geraakt de compiler de kluts kwijt en weet niet meer welke else bij welke if hoort.

2.3.2 Switch case

Als er meer dan twee mogelijkheden zijn, kan je beter de case-constructie gebruiken, zoals in volgend voorbeeld.

  • Je begint met switch(varNaam)
  • Elke case evalueert een mogelijke waarde.
  • Foute of niet relevante keuzes worden opgevangen via default.
  • Bij elke keuze staat een break om naar het einde van de switch te springen, anders wordt gewoon de ene na de andere 'case' uitgevoerd.

2.4. Iteraties

Dikwijls wil je dat een stuk programma verschillende keren uitgevoerd wordt, herhaald wordt.
Daarvoor gebruik je een lus (loop).

JavaScript kent vier lusconstructies:

2.4.1. While

In het eerste voorbeeld wordt een while-lus gebruikt.
Algemene vorm:

while (voorwaarde)
{ statement(s); }

Hadden we in dit voorbeeld var wat = 5 gedeclareerd, dan werd de lus helemaal niet uitgevoerd.

Wil je dat de lus minstens éénmaal doorlopen wordt, ook als de voorwaarde niet klopt, dan gebruik je de do-while-lus:

do
 { statement(s); }
while(voorwaarde);

2.4.2. For

Als er een teller in de lus zit, is de for-lus eigenlijk handiger en compacter, zoals in volgend voorbeeld.

Algemene vorm:

for(var teller=beginwaarde;vergelijk met eindwaarde;stap)
{ statement(s); }

Als er een voorwaarde in de lus verwerkt is, kan je break gebruiken om naar het einde van de lus te springen of continue om de lus opnieuw te doorlopen vanaf het begin.

Om alle elementen van een reeksvariabele of ander object af te lopen, bestaat de for ... in lus:

for (var x in array)
{ statement(s) met x; }

Voorbeeldje?