if
Om instructies uit te voeren wanneer een voorwaarde is voldaan gebruik je het if-statement. Je kan aan dit statement ook een else-tak koppelen: deze instructies worden uitgevoerd als de gestelde voorwaarde niet waar is.
In deze toepassing wordt een berichtvenster getoond met de alert-methode van het window-object. Je hoeft het window-object niet expliciet te vermelden bij het tonen van een alert.
\n zorgt in de alert voor een newline-karakter: het nemen van een nieuwe lijn.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus HTML - IVO Brugge</TITLE>
<script type="text/javascript">
<!--
naamcursus = "Javascript";
prijs = 45.5;
aantalleerlingen = 12;
leerkrachtgevonden = false;
// -->
</script>
</HEAD>
<BODY>
<script type="text/javascript">
<!--
document.write('<h3>Cursus ' +naamcursus +'</h3>');
// if gevolgd door 1 statement
if(prijs < 50) document.write('<p>De cursus is niet duur</p>');
// if gevolgd door meerdere statements
if(aantalleerlingen <= 15){
document.write('<p>Een kleine klas</p>');
alert('Er zijn nog te weinig leerlingen\nMaak wat meer reclame!');
}
// if met een else-tak
if(leerkrachtgevonden){
document.write('<p>Er is reeds een leekracht voor deze cursus.</p>');
} else {
document.write('<p>Er is nog <b>geen</b> leekracht voor deze cursus.</p>');
}
// -->
</script>
</BODY>
</HTML>
Opmerkingen:
- na het else-sleutelwoord kan je onmiddellijk een nieuw if-statement plaatsen.
- Je kan if-statements nesten: een if-statement binnen een ander if-statement.
switch
Om meerdere mogelijkheden te scheiden kan je gebruik maken van een switch-statement in plaats van meerder if-statements.
Bij het switch statement moet je tussen haakjes een expressie invoeren. Het programma springt dan binnen het opgegeven programmagedeelte naar een bepaald label (een naam gevolgd door een : )
Alle statements eindigen met break; . Wanneer u geen break plaatst worden ook de statements uitgevoerd van de labels eronder !
In Javascript mag u zoals uit het voorbeeld blijkt strings opgeven voor het switch statement, getalwaarden zijn natuurlijk ook toegestaan.
Wanneer een label met de naam default in het switch statement wordt opgenomen worden de statements onder dit label uitgevoerd wanneer geen enkele case beantwoord aan de switch-voorwaarde.
In dit voorbeeld wordt de methode prompt van het object window gebruikt om een invulvenster te tonen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus HTML - IVO Brugge</TITLE>
<script type="text/javascript">
<!--
naam = prompt("Wat is je naam ?","Naam ingeven");
// -->
</script>
</HEAD>
<BODY>
<script type="text/javascript">
<!--
switch(naam) {
case 'William' :
document.write ('De naam is William');
break;
case 'Pol' :
document.write ('De naam is Pol');
break;
case 'Sofie' :
document.write ('De naam is Sofie');
break;
default:
document.write ('De naam is niet William, Pol of Sofie');
break;
}
// -->
</script>
</BODY>
</HTML>
While
Een while statement voert een opdracht of een groep opdrachten telkens opnieuw uit tot de voorwaarde voor de while-lus onwaar wordt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus HTML - IVO Brugge</TITLE>
</HEAD>
<BODY>
<script type="text/javascript">
<!--
var teller=1;
while(teller<11) {
document.write('<br>teller heeft de waarde '+teller);
teller++;
}
// -->
</script>
</BODY>
</HTML>
Dit stukje code plaatst 10 keer het zinnetje 'teller heeft de waarde ' op de webpagina.
Het zinnetje wordt voorafgegaan door een <br>-tag en gevolgd door de waarde die in de variabele teller is opgenomen. De variabele teller heeft oorspronkelijk de waarde 1, telkens de while lus wordt doorlopen wordt teller met 1 opgehoogd. Wanneer teller 11 wordt, worden de statements in de while-lus niet meer uitgevoerd.
teller++; is equivalent met teller = teller + 1;
Wanneer teller oorspronkelijk 11 of meer zou zijn, worden de statements binnen de while-lus niet uitgevoerd !
Do...While
Bij een Do...While-lus wordt de voorwaarde om verder te lussen aangegeven na de lusopdrachten.
Doordat deze voorwaarde pas na de statements wordt gecontroleerd worden de statements minstens 1 keer uitgevoerd!
De opdrachten zullen dus ook uitgevoerd worden wanneer de initiële waarde van de variabele teller 11 of meer is.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus HTML - IVO Brugge</TITLE>
</HEAD>
<BODY>
<script type="text/javascript">
<!--
var teller=1;
do{
document.write('<br>teller heeft de waarde '+teller);
teller++;
}
while(teller<11);
// -->
</script>
</BODY>
</HTML>
for
Een for-lus is lus-structuur waarbij je de initialisatie, lusvoorwaarde en eindstatements in een compact geheel plaatst.
Doordat de eindstatements als derde argument in de lus opgenomen zijn, is het niet nodig de variabele teller binnen de lus op te hogen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus HTML - IVO Brugge</TITLE>
</HEAD>
<BODY>
<script type="text/javascript">
<!--
for(var teller = 1; teller < 11 ; teller++){
document.write('<br>teller heeft de waarde '+teller);
}
// -->
</script>
</BODY>
</HTML>
for...in
Met een for...in lus kan je objecten doorzoeken. We zullen deze lusstructuur gebruiken wanneer we zelf javascript-objecten aanmaken. We kunnen de ingebouwde browser-objecten waarmee we reeds kennis hebben gemaakt nu reeds onderzoeken.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus HTML - IVO Brugge</TITLE>
</HEAD>
<BODY>
<script type="text/javascript">
<!--
document.write("<h2>Onderzoek van het object navigator</h2>");
for(var veld in navigator){
document.write("<b>" +veld +"</b>: " +navigator[veld] +"<br>");
}
document.write("<hr>");
document.write("<h2>Onderzoek van het object window</h2>");
for(var veld in window){
document.write("<b>" +veld +"</b>: " +window[veld] +"<br>");
}
document.write("<hr>");
document.write("<h2>Onderzoek van het object document</h2>");
for(var veld in document){
document.write("<b>" +veld +"</b>: " +document[veld] +"<br>");
}
document.write("<hr>");
// -->
</script>
</BODY>
</HTML>
Maak je nog niet te veel zorgen over de concrete betekenis van deze code, deze objecten met hun eigenschappen zijn in feite voorbeelden van associatieve arrays - meer hierover later.
Break
Een lus kan je stoppen met het sleutelwoord break.
Dit is handig wanneer je een lus gebruikt om een item te zoeken. Je kan wanneer de lusdoorgang succesvol was de lus beïndigen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus HTML - IVO Brugge</TITLE>
</HEAD>
<BODY>
<script type="text/javascript">
<!--
for(var teller = 1; teller < 11 ; teller++){
document.write('<br>teller heeft de waarde '+teller);
if(teller == 6) break;
}
// -->
</script>
</BODY>
</HTML>
Continue
Met het sleutelwoord continue kan je ervoor zorgen dat de eropvolgende opdrachten binnen de huidige lusdoorgang niet meer worden uitgevoerd.
Wanneer de voorwaarde voor het verder lussen nog is voldaan wordt de lus -anders dan bij het statement break- hernomen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus HTML - IVO Brugge</TITLE>
</HEAD>
<BODY>
<script type="text/javascript">
<!--
for(var teller = 1; teller < 11 ; teller++){
if(teller == 6) continue;
document.write('<br>teller heeft de waarde '+teller);
}
// -->
</script>
</BODY>
</HTML>
