JS - STATEMENTS

Koppelingen
Voorbeelden bij dit hoofdstuk

HOOFDSTUKKEN

Algemeen
Voorwaardelijke statements
* if
* if ... else
* if ... else if ... else
* switch
Loop statements
* for
* for ... in
* while
* do ... while
* break
* continue
Foutafhandeling
* try ... catch ... finally
* throw
* onerror



Algemeen

Terug naar de top

 

Statements worden gebruikt om een bepaalde toestand vast te stellen of om tot een bepaald eindresultaat te komen. Er zijn diverse soortten statements:
Voorwaardelijke (conditional) statements worden gebruikt om diverse acties uit te voeren gebaseerd op diverse condities (als ... dan). Vaak als je een code schrijft, wil je dat onder verschillende omstandigheden verschillende acties worden uitgevoerd. Dit kan door voorwaardelijke statements op te nemen in de code.
Loops worden gebruikt om hetzelfde codeblok een gespecificeerd aantal malen uit te voeren of zolang als een bepaalde conditie waar is. Het is met loops niet nodig om hetzelfde codeblok meerdere keren in een code op te nemen.
Object Manipulation Statements (for...in statement) wordt gebruikt om alle elementen van een object automatisch te doorlopen (iteration). Kan hulpvol zijn als een aantal eigenschappen niet bekend is, of regelmatig verandert. De code in de body van de for ... in loop wordt éénmaal voor elk element/property uitgevoerd.
Exception Handling Statements worden gebruikt om een codeblok op fouten te onderzoeken en vervolgens aan te geven wat er met eventuele fouten gedaan moet worden. Ook geeft het het vervolg aan op het zoeken naar fouten.

Voorwaardelijke statements

Terug naar de top

 

Voorwaardelijke (conditional) statements in JavaScript worden gebruikt om diverse acties uit te voeren gebaseerd op diverse condities. Vaak als je een code schrijft, wil je dat onder verschillende omstandigheden verschillende acties worden uitgevoerd. Dit kan door voorwaardelijke statements op te nemen in de code. In JavaScript kennen we de volgende voorwaardelijke statements:

  • ifstatement - gebruik dit statement als je alleen een code wil laten uitvoeren als een bepaalde conditie waar is.
  • if...elsestatement - gebruik dit statement als je een code wil laten uitvoeren als een bepaalde conditie waar is en een andere code als die niet waar is.
  • if...else if....elsestatement - gebruik dit statement als je één van vele codeblokken wilt uitvoeren.
  • switch statement - kan ook worden gebruikt als je één van vele codeblokken wilt uitvoeren.

NB. De statements zijn in kleine letters geschreven. Hoofdletters levert een JavaScript Error op.

 

if statement

Terug naar de top

 

Het if-statement moet alleen gebruikt worden als je wilt dat er alleen een code uitgevoerd wordt als een bepaalde conditie waar is.

Schrijfwijze

if (conditie)
{
uit te voeren code als de genoemde conditie waar is
}

NB-1: if is geschreven in kleine letters. Als men hoofdletters gebruikt (IF) volgt een JavaScript error!
NB-2: Als je variabelen wilt vergelijken moeten de twee is-gelijk-tekens (==)! naast elkaar worden geplaatst
NB-3: Er is geen ..else.. in deze schrijfwijze. De code wordt alleen maar uitgevoerd als een bepaalde conditie waar is.

Voorbeeld 1 - IF

<script type="text/javascript">
//Schrijf een "Goede morgen" begroeting als
//het nog geen 10 uur is.
var d=new Date()
var time=d.getHours()

if (time<10)
{
document.write("<b>Goede morgen</b>")
}
</script>

Voorbeeld 2 - IF

<script type="text/javascript">
//Write "Hoera, vrij!" als het na 18 uur is
var d=new Date()
var time=d.getHours()

if (time>18)
{
document.write("<b>Hoera, vrij!</b>")
}
</script>

Voorbeeld 3 - IF

if(waarde<0){
waarde=0;
alert('waarde kleiner dan nul!'}

if ... else statement

Terug naar de top

 

Dit statement dient te worden gebruikt als je een code wil laten uitvoeren als een bepaalde conditie waar is en een andere code als die niet waar is.

Schrijfwijze

if (condition)
{
uit te voeren code als de genoemde conditie waar is
}
else
{
uit te voeren code als de genoemde conditie niet waar is
}

Voorbeeld

<script type="text/javascript">
//Als het nog geen 10 uur is,
//krijg je een "Goede morgen.
//Anders krijg je een "Goedendag"
var d = new Date()
var time = d.getHours()

if (time < 10)
{
document.write("Goede morgen!")
}
else
{
document.write("Goedendag!")
}
</script>

Goedendag!

if ... else if ... else statement

Terug naar de top

 

Dit statement dient te worden gebruikt als je één van vele codeblokken wilt uitvoeren.

Schrijfwijze

if (condition1)
{
uit te voeren code als de conditie 1 waar is
}
else if (condition2)
{
uit te voeren code als de conditie 2 waar is
}
else
{
uit te voeren code als de condities 1 en 2 niet waar zijn
}

Voorbeeld

<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write("<b>Goede morgen</b>")
}
else if (time>10 && time<16)
{
document.write("<b>Goede middag</b>")
}
else
{
document.write("<b>Goede avond</b>")
}
</script>

Goede avond

switch statement

Terug naar de top

 

Evenals bij if ... else if ... else kan dit statement gebruikt worden als je één van vele codeblokken wilt uitvoeren.

Schrijfwijze

switch(n)
{
case 1:
voer code blok 1 uit
break
case 2:
voer code blok 2 uit
break
default:
code uit te voeren als n
anders is als case 1 en 2
}

Switch werkt op deze wijze: Allereerst hebben we een enkelvoudige expressie n (meestal een variabele) die ook één keer geevalueerd wordt. De waarde van de expressie wordt vergeleken met de waarden voor iedere case in de code. Als er een overeenkomst is, wordt het codeblok van de case uitgevoerd.
NB-1. Break is optioneel. Het wordt echter aanbevolen om te voorkomen, dat een deel van het volgende codeblok mee wordt uitgevoerd.
NB-2. Voeg aan het eind ook een break-statement toe uit voorzorg in geval er later cases aan worden toegevoegd.
NB-3. Voor de waarden van de cases kunnen strings worden gebruikt.
NB-4. Het gebruik van accolades is verplicht.

Voorbeeld

<script type="text/javascript">
//Je wordt verschillend begroet gebaseerd
//op welke dag het is. NB: Zondag=0,
//Maandag=1, Dinsdag=2, etc.
var d=new Date()
theDay=d.getDay()
switch (theDay)
{
case 5:
document.write("Eindelijk vrijdag")
break
case 6:
document.write("Fijne zaterdag")
break
case 0:
document.write("Rustige zondag")
break
default:
document.write("Ik verlang naar het weekend!")
break
}
</script>

Eindelijk vrijdag

Loop statements

Terug naar de top

 

Loops worden in JavaScript gebruikt om hetzelfde codeblok een gespecificeerd aantal malen uit te voeren of zolang als een bepaalde conditie waar is. Het is met loops niet nodig om hetzelfde codeblok meerdere keren in een code op te nemen.

In JavaScript zijn er twee soorten loops:

  • for- herhaalt een codeblok een gespecificeerd aantal keren.
  • for ... in- doorloopt automatisch alle elewmenten van een object achter elkaar.
  • while - herhaalt een codeblok zolang een gespecificeerde conditie true is.
  • do ... while - voert een codeblok altijd minimaal één keer uit.

Er zijn twee statements die binnen een loop gebruikt kunnen worden:

  • break- Verbreekt de lus en gaat verder met het uitvoeren van de code die volgt op de loop (als die er is).
  • continue - Verbreekt de huidige lus en gaat door met de daaropvolgende waarde.

 

for statement

Terug naar de top

 

De for loop wordt gebruikt wanneer in het begin al bekend is hoe vaak een script moet worden uitgevoerd.

Schrijfwijze

for (var=startwaarde;var<=eindwaarde;var=var+verhoging)
{
uit te voeren code
}

Voorbeeld
Het voorbeeld hieronder definieert een loop die start met i=0. De loop blijft lopen zolang i kleiner of gelijk aan 10 is. i wordt elke keer wanneer de cyclus doorlopen wordt, verhoogt met 1.
NB. In plaats van verhogen kan ook verlaagt worden. De parameter is dan -1. Daarnaast kan <= elk ander vergelijkend statement zijn.

<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
document.write("Het getal is " + i)
document.write("<br />")
}
</script>
</body>
</html>

Resultaat

Het getal is 0
Het getal is 1
Het getal is 2
Het getal is 3
Het getal is 4
Het getal is 5
Het getal is 6
Het getal is 7
Het getal is 8
Het getal is 9
Het getal is 10

 

for ... in statement

Terug naar de top

 

Het for...in statement wordt gebruikt om alle elementen van een object automatisch te doorlopen (iteration). Kan hulpvol zijn als een aantal eigenschappen niet bekend is, of regelmatig verandert. De code in de body van de for ... in loop wordt éénmaal voor elk element/property uitgevoerd.

Schrijfwijze

for (variabele in object)
{
uit te voeren code
}

NB-1. Het variabele argument kan een benoemde variabele, een array element, of de property van een object zijn.
NB-2. De code doorloopt alle op te sommen eigenschappen van een object of de objecten als geheel als index van een array.
NB-3. Er zijn verschillen tussen de diverse browsers met betrekking tot de eigenschappen die getoond worden in de for ... in - statement. In theorie wordt dit beheerst door een interne eigenschap gedefinieerd door de ECMAScript standaard genaamd "DontEnum" maar in de praktijk geven de browsers een onderling enigszins verschillende set van eigenschappen terug.

Voorbeeld
Gebruik van for...in loop via een array:

<html>
<body>

<script type="text/javascript">
var x
var mijnauto = new Array()
mijnauto[0] = "Saab"
mijnauto[1] = "Volvo"
mijnauto[2] = "BMW"

for (x in mijnauto)
{
document.write(mijnauto[x] + "<br />")
}
</script>

</body>
</html>
Resultaat
Saab
Volvo
BMW


while statement

Terug naar de top

 

De while loop herhaalt een codeblok zolang een gespecificeerde conditie true is.

Voorbeeld

while (var<=eindwaarde)
{
uit te voeren code
}

NB: De <= kan elk ander vergelijkend statement zijn.

Voorbeeld 1
De loop blijft lopen zolang i kleiner of gelijk aan 10 is. i wordt elke keer wanneer de cyclus doorlopen wordt, verhoogt met 1.

<html>
<body>
<script type="text/javascript">
var i=0
while (i<=10)
{
document.write("The number is " + i)
document.write("<br />")
i=i+1
}
</script>
</body>
</html>

 

Resultaat.
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
The number is 10

Voorbeeld 2
Bij het begin van de loop wordt de variabele antwoord op true gezet, zodat de vraag wel gesteld wordt. De loop wordt pas geannuleerd als het juiste antwoord is ingevoerd.
Het is mogelijk om het aantal keren dat men kan antwoorden aan een maximum te onderwerpen. Zie daarvoor verderop bij "break & continue".

var antwoord = ""
var oplossing = "5"
while(antwoord!oplossing)
{
antwoord = prompt("Hoeveel vingers heeft een hand?" ,"");
}

do ... while statement

Terug naar de top

 

De do...while loop is een variant van de while loop. Deze loop voert het codeblok altijd één keer uit en vervolgens net zolang als de conditie true is. De reden dat deze loop tenminste één keer wordt uitgevoerd is, dat de code wordt uitgevoerd voordat de conditie wordt getest. Er wordt die eerste keer dus niet nagegaan of de conditie juist of vals is.

Schrijfwijze

do
{
uit te voeren code
}
while (var<=eindwaarde)

Voorbeeld

<html>
<body>
<script type="text/javascript">
var i=0
do
{
document.write("Het getal is " + i)
document.write("<br />")
i=i+1
}
while (i<0)
</script>
</body>
</html>

 

Resultaat
Het getal is 0

break statement

Terug naar de top

 

Het break-commando wordt onder andere gebruikt in combinatie met het while-commando om oneindige vragen te voorkomen.

Schrijfwijze

<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3){break}
document.write("Het getal is " + i)
document.write("<br />")
}
</script>
</body>
</html>

 

Resultaat
Het getal is 0
Het getal is 1
Het getal is 2

In het volgende voorbeeld kan de lus worden verlaten na een goed antwoord of na 5x een fout antwoord.

var antwoord = ""
var oplossing = "5"
while(antwoord!oplossing)
i=0
{
if(i==5) break;
antwoord = prompt("Hoeveel vingers heeft een hand?" ,"");
i++
}

continue statement

Terug naar de top

 

Continue verbreekt de huidige lus en gaat door met de daaropvolgende waarde. Continu slaat dus in feite de aangegeven waarde over.

Voorbeeld

<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3){continue}
document.write("Het getal is " + i)
document.write("<br />")
}
</script>
</body>
</html>

 

Resultaat
Het getal is 0
Het getal is 1
Het getal is 2
Het getal is 4
Het getal is 5
Het getal is 6
Het getal is 7
Het getal is 8
Het getal is 9
Het getal is 10


Foutafhandeling

Terug naar de top

 

Het try...catch statement maakt het mogelijk een codeblok op fouten te onderzoeken. Iedereen heeft op internet wel eens de mededeling "There is a runtime error - Do you wish to debug?" gezien. Error messages als deze kunnen nuttig zijn voor ontwikkelaars, maar niet voor gebruikers. Gebruikers verlaten vaak de pagina als ze een dergelijke mededeling zien. In dit deel staat hoe men om kan gaan met JavaScript error messages. Er zijn twee manieren om fouten in een webpagina op te vangen:

  • Met gebruikmaking van het try...catch...finallystatement (beschikbaar in IE5+, Mozilla 1.0, and Netscape 6)
  • Met gebruikmaking van het onerror event. Dit is de oude standaard oplossing om fouten te ondervangen. (beschikbaar vanaf Netscape 3)

 

try ... catch ... finally statement

Terug naar de top

 

Het try...catch...finally statement maakt het mogelijk een codeblok op fouten te onderzoeken. Het try-blok bevat de code die onderzocht moet worden en het catch-blok geeft aan wat er moet gebeuren als een fout ontdekt wordt. Het finally-blok geeft aan wat er daarna moet gebeuren.

Schrijfwijze

try {
// Statements waarin fouten kunnen voorkomen
} catch(error) {
// Statements die worden uitgevoerd in geval van een fout
} finally {
// Statements die achteraf in elk geval worden uitgevoerd
}

NB. try, catch en finally zijn met kleine letters geschreven. Hoofdletters veroorzaken een fout.

Om te beginnen worden de statements binnen het try-blok uitgevoerd. Als er een fout in zit (een exception) dan gaat het dscript onmiddellijk naar het catch-blok waarbij de fout beschikbaar blijft voor de foutmelding. Als het catch-blok eindigt of als er niets aan de hand is, dan wordt onmiddellijk doorgegaan met finally. Finally wordt meestal gebruikt om geheugen vrij te maken die geblokkeerd raakt als een fatale fout optreedt. Hier een voorbeeld van een try...catch...finally statement.

Voorbeeld - algemeen

try {
// Maak een array
arr = new Array();
// Roep een functie op die mogelijk niet succesvol is
func(arr);
}
catch (...) {
// Herstel van de fout
logError();
}
finally {
// Zelfs als er een fatale fout optreedt kunnen we de array
// leegmaken
delete arr;
}

Het try-statement treedt op met het catch- en/of het finally-statement. Eén van beide mag weggelaten worden; niet allebei!

Voorbeeld - 1
Het voorbeeld hieronder bevat een script dat wordt verondersteld de boodschap "Welkom bezoeker!" weer te geven als je op een knop drukt. Echter, er zit een typefout in de bericht() function. alert() is fout gespeld als adddlert(). Een JavaScript error treedt op:

<html>
<head>
<script type="text/javascript">
function bericht()
{
adddlert("Welkom bezoeker!")
}
</script>
</head>

<body>
<input type="button" value="Bekijk bericht" onclick="bericht()" />
</body>
</html>

Om passende actie te kunnen nemen als een fout optreedt, kan men een try...catch statement toevoegen. Het voorbeeld hieronder bevat het vorige voorbeeld, herschreven om het try...catch statement te kunnen gebruiken. Omdat alert() fout gespeld is, treedt een JavaScript error op. Echter, het catch-blok vangt de fout op en voert een standaard code uit om er mee om te gaan. De code laat een standaard fout mededeling zien en vertelt de gebruiker wat er gebeurd is:

<html>
<head>
<script type="text/javascript">
var txt=""
function bericht()
{
try
{
adddlert("Welkom bezoeker!")
}
catch(err)
{
txt="Er was een fout op deze pagina.\n\n"
txt+="Fout omschrijving: " + err.description + "\n\n"
txt+="Klik OK om door te gaan.\n\n"
alert(txt)
}
}
</script>
</head>

<body>
<input type="button" value="Bekijk bericht" onclick="bericht()" />
</body>
</html>

Voorbeeld - 2
Het volgende voorbeeld gebruikt een confirm-box waarmee een bericht wordt getoond dat zijn op OK kunnen klikken om door te gaan, of op Cancel om terug te gaan naar de homepage. Als de confirm-method false terug geeft, heeft de gebruiker op Cancel geklikt en wordt de gebruiker teruggeleid naar de homepage. Als de confirm-method true terug geeft, doet de code niets.

<html>
<head>
<script type="text/javascript">
var txt=""
function bericht()
{
try
{
adddlert("Welkom bezoeker!")
}
catch(err)
{
txt="Er was een fout op deze pagina.\n\n"
txt+="Klik OK om door te gaan met het bekijken van deze pagina,\n"
txt+="of Cancel om terug te gaan naar de home page.\n\n"
if(!confirm(txt))
{
document.location.href="http://www.f-jansen.nl/"
}
}
}
</script>
</head>

<body>
<input type="button" value="Bekijk bericht" onclick="bericht()" />
</body>
</html>
 

throw statement

Terug naar de top

 

Het onerror event wordt wat later uitgelegd. Eerst wordt het trow-statement behandeld die het mogelijk maakt om een uitzondering / exception te creëeren. De throw statement kan samen met de try...catch statement worden gebruikt.

Het throw statement maakt het mogelijk uitzonderingen / exceptions te maken. Als men throw trehgelijk gebruikt met het try...catch statement, kun je de programma's beheersen en accurate foutmeldingen genereren.

Schrijfwijze

throw(exception)

NB-1. De exception kan een string, integer, Boolean of een object zijn.
NB-2. throw wordt met kleine letters geschreven. Het gebruiken van hoofdletters veroorzaakt een JavaScript error!

Schrijfwijze
Het voorbeeld hieronder bepaalt de waarde van een variabele genaamd x. Als de waarde van x hoger dan 10 of lager dan 0 is, geven we een foutmelding. De fout wordt vervolgens opgepakt door het catch argument en de juist foutmelding wordt weergegeven.

<html>
<body>
<script type="text/javascript">
var x=prompt("Vul in een getal tussen 0 en 10:","")
try
{
if(x>10)
throw "Err1"
else if(x<0)
throw "Err2"
}
catch(er)
{
if(er=="Err1")
alert("Fout! de waarde is te hoog")
if(er == "Err2")
alert("Fout! de waarde is te laag")
}
</script>
</body>
</html>

onerrorstatement

Terug naar de top

 

Gebruik maken van het onerror event is de oude standaard oplossing voor het vangen van fouten in een webpagina. In het vorige deel kwam het try...catch statement aan de orde. In dit deel wordt uitgelegd hoe hetzelfde bereikt kan worden met onerror.
Het onerror event wordt actief als er een scriptfout op de pagina staat.
Om onerror te gebruiken moet er een function gecreeërd worden om met fouten om te gaan. Vervolgens wordt de functie aangertoepen met de onerror event handler. De event handler heeft drie argumenten: msg (foutmelding), url (de url van de pagina die de fout veroorzaakte) en line (de regel waar de fout optrad).

Schrijfwijze

onerror=handleErr

function handleErr(msg,url,l)
{
//Ga hier met de fout om
return true or false
}

De waarde die teruggegeven wordt door onerror bepaalt of de browser een standaard error message toont. Als false geretourneerd wordt, toont de browser een standaard error message. Als true geretourneerd wordt, toont de browser niets.

Voorbeeld
Het volgende voorbeeld hoe je de fout oppakt met het onerror event:

<html>
<head>
<script type="text/javascript">
onerror=handleErr
var txt=""

function handleErr(msg,url,l)
{
txt="Er zat een fout op deze pagina.\n\n"
txt+="Error: " + msg + "\n"
txt+="URL: " + url + "\n"
txt+="Line: " + l + "\n\n"
txt+="Klik OK om verder te gaan.\n\n"
alert(txt)
return true
}

function bericht()
{
adddlert("Welkom bezoeker!")
}
</script>
</head>

<body>
<input type="button" value="Bekijk bericht" onclick="bericht()" />
</body>
</html>

Terug naar de top