Homepage » Tutorials » Javascript » Voorwaardelijke functies

Voorwaardelijke functies

Info
Door:	Mirax	Moeilijkheidsgraad:
Geplaatst op:	10-02-2004	Reacties:	13(Bekijken)
Views:	12198 (gem. 5.0804 per week)	Log in om zelf te reageren
		Waardering:	9.2/10 (5 stemmen)

Basiscursus Javascript» Inleiding Javascript | De eerste tekst en variabelen | Strings en operators | Hiërarchie | Event handlers | Functies | Het venster/windows | Voorwaardelijke functies

Voorwaardelijke functies zijn functies die worden uitgevoerd als er aan een voorwaarde wordt volbracht. Op deze manier klinkt dit wat abstract, maar ik zal het verduidelijken aan de hand van een voorbeeld. In het vorige deel heb je geleerd om met bevestigingsvenstertjes te werken. Nu kan je met zo'n voorwaardelijke functie iets laten uitvoeren als er op OK wordt geklikt, en evenzo als er op Annuleren wordt gedrukt.

Om dit laatste voorbeeld maar gelijk te gebruiken, moet je dus een bevestigingsvenstertje krijgen bij een bepaalde gebeurtenis, waarvoor je een event-handler kunt gebruiken. De gebruiker klikt dan of op OK, of op Annuleren, waarna het script daarbij een bepaalde opdracht uitvoert. Het script moet dus kunnen zien waarop de gebruiker geklikt heeft. Hierbij moet je je nog twee dingen herinneren uit de vorige delen. Ten eerste de Boleaanse vergelijkingsmethode, en ten tweede dat een bevestigingsvenstertje de waarde true meekrijgt als er op OK wordt geklikt, en false indien er op Annuleren werd gedrukt. Ten slotte komt er iets nieuws bij, en dat is een van de voorwaardelijke functies, namelijk de if, else functie. Het script komt er dan zo uit te zien:

Script in de head:

function Bevestiging(){
B = window.confirm('Ok of Annuleren?');
if (B == true){
window.alert('U drukte op OK');
}
else{
window.alert('U drukte op Annuleren');
}
}

Vervolgens heb je in de body een event-handler nodig die deze functie oproept, maar dat hebben we je in een van de vorige delen geleerd. We zullen nu deze functie eens wat nader gaan bekijken.

Zodra de functie wordt geactiveerd (event-handler), wordt er zo'n bevestigingsvenstertje aangeroepen. Als de gebruiker een van de twee opties heeft aangeklikt, wordt de waarde true of false meegegeven aan de variabele B. Daarna komt de eigenlijke voorwaardelijke functie aan bod. Deze begint met if, en vervolgens een vergelijking tussen haakjes. Als deze vergelijking klopt, in dit geval is dat: Gebruiker drukte op OK, dan voert het script de dingen uit die daarna tussen de twee accolades staan ( { en } ). Klopt deze vergelijk niet, met andere worden, drukte de gebruiker op annuleren, dan wordt er gekeken naar de else{ inhoud }. De inhoud die hiertussen staat wordt wordt gebruikt als de vergelijking niet klopt. De algemene vorm van een if-else functie is dus:

if (vergelijking){
vergelijking klopt
}
else{
vergelijking klopt niet
}

Een volgende opdracht is om een script te laten uitvoeren, zolang er aan een bepaalde vergelijking wordt voldaan. Dit doen we met de while-functie. Een voorbeeld van een script is - we hebben opnieuw alleen de functie in de head geschreven- :

function Schrijfnummer(){
I = 1
while(I <= 100){
document.write(I +'<br>');
I++
}
}

Het effect van dit script is, dat de nummers 1 tot en met 100 onder elkaar worden uitgeschreven op het scherm. We zullen eerst deze functie eens nader bekijken. Ten eerste maken we een variabele I aan, die we de waarde 1 geven. Daarna komt de voorwaardelijke functie. Tussen de haakjes staat de vergelijking, zolang deze vergelijking waar is, dus zolang I kleiner dan of gelijk is aan 100, wordt de inhoud tussen de accolades gedaan. In geval wordt in het document de variabele I geschreven, vervolgens wordt bij deze variabele 1 opgeteld. De vermeerdering met 1 is in dit geval erg belangrijk. Pas als de waarde van I groter is dan 100, wordt de cirkel onderbroken.

De algemene vorm van deze voorwaardelijke vergelijking is dus:

while(voorwaarde){
inhoud
}

Als je het script een klein beetje aanpast, kun je de gebruikers laten invoeren tussen welke twee getallen de cijfers geschreven moeten wordenn, het script wordt dan:

function FunctieNummer3(){
9 I = window.prompt('Schrijf de nummers vanaf:','Hier het nummer');
J = window.prompt('tot nummer:','Hier het nummer');
while(I <= J){
document.write(I + '<br>');
I++;
}
}
Ga zelf na hoe dit script te werk gaat.

Een andere vorm van de whilefunctie is de do,while-functie. Hier wordt pas na de loop gekeken of aan de voorwaarde voldaan wordt. In z'n algemeenheid komt die er zo uit te zien, we zullen hier geen voorbeeld meer bij geven. Experimenteer er zelf eens mee:

do{
inhoud
}
while (voorwaarde)

De laatste voorwaardelijke functie die we hier gaan behandelen is de for-functie. Deze lijkt eigenlijk veel op de while-functie. De algemene vorm van de for-functie ziet erg zo uit:

for(beginterm;voorwaarde;lusberekening){
inhoud
}

Eenvoorbeeld van zo'n script is deze:

<table border="1">
<script>
<!--
for(I=1;I<50;I=I+1){
J = I*I;
document.write('<tr><td>' + I + '²</td><td>' + J + '</td></tr>');
}
//-->
</script>
</table>

Als je dit script zelf uitvoert, zie je eigenlijk wat het leuke hieraan is. Dit script geeft namelijk een overzicht van alle kwadraten van absolute getallen tot 50, weergegeven in een tabel. De mogelijkheden hiervan zijn natuurlijk veel groter dan dit script laat zien.
Om deze cursus af te sluiten heb je nog een uitleg van deze for-functie te goed. Ik zal deze uitleggen aan de hand van het bovenstaande voorbeeld.
Om te beginnen wordt er een tabel begonnen, waarschijnlijk aan jou niet onbekend. Dan wordt het script begonnen met een for-functie. De eerste term, I=1, geeft aan dat de functie moet beginnen met de variabele I als 1. De inhoud tussen de inmiddelse bekende accolades moet worden herhaald, zoland I kleiner is dan 50 en bij elke keer dat deze 'loop' wordt doorlopen, wordt er 1 bij de variabele 1 opgeteld. Dan komen we tot het laatste punt, namelijk dat de loop tussen de accolade wordt herhaald. In dit geval betekent dit dat er een tabelrij wordt afgesloten waarin staat nummer in het kwadraat en de uitkomst daarvan.

Je beheerst nu een deel van het JavaScript, maar er is nog meer. Houd daarvoor de artikelen op deze site in de gaten.

«Het venster/windows

13 reacties
Help ik kan er niets van!	Geplaatst op 13-07-2009 om 18:41
Regular	Hoe ziet zo' functie er dan uit met een event Handler want dat heb ik nog niet helemaal door De laatste is de enige die iets van resultaat geeft als ik heb invoeg bij al de rest zie ik niets. Hoe moet ik zo'n functie precies in mijn website ingeven?
Gasparov	Geplaatst op 25-08-2007 om 20:08
Regular	ik snap het laatste deel niet met die popups en die enventhandlers (alles wat er na komt ook niet dus) Wie kan het verduidelijken?
omarjuul	Geplaatst op 27-05-2007 om 16:46
Regular	Het enige verschil van een do-while met een while is dat een do-while hem minstens 1 keer uitvoert...
ThePlague	Geplaatst op 21-04-2007 om 14:42
Regular	ik begrijp de do-while funtie niet zo goed kan iemand miss een voorbeeldje geven?
Mirax	Geplaatst op 06-04-2007 om 10:37
Moderator	Nee, helaas werkt dat niet in JavaScript.
Laurent	Geplaatst op 04-04-2007 om 21:27
Regular	bestaat er ook zoiets als 'elseif' ?
omarjuul	Geplaatst op 14-01-2007 om 19:53
Regular	Ik durfde het voorheen nooit aan om aan JS te beginnen... Nu zie ik in dat dat best wel dom was, want het staat hier (voor mij) helder uitgelegd. Danjewel daarvoor, Mirax!
stinohomepage	Geplaatst op 01-11-2006 om 11:46
Regular	ik versta er geen bal van !
Razorke	Geplaatst op 26-03-2006 om 12:55
Regular	idd goeie tutorial, maak er nog maar zo'n goeie :p
Michielvsb	Geplaatst op 12-03-2006 om 11:05
Regular	Deze cursus is echt goed uitgelecht! Proficiat Mirax ;-)
Onbekend lid	Geplaatst op 20-02-2006 om 17:10
Spammer	Je moet het als volgt zien: De beginwaarde van i wordt gelijkgesteld aan 1. zolang i kleiner is dan 50 wordt de code tussen de accolades uitgevoerd. Na het uitvoeren van de code wordt i met 1 verhoogt (+1). Dus na 1x de for-lus doorlopen hebben zal i gelijk zijn aan 2, en wordt de code opnieuw uitgevoerd. i wordt opnieuw verhoogd met 1 en is nu gelijk aan 3. Zo gaat dit verder tot i gelijk is aan 50 (want dan geldt deze voorwaarde niet meer: i < 50.
.:ME:.	Geplaatst op 20-02-2006 om 14:34
Regular	Ik begrijp dit laatse deeltje niet zo goed (niet om te zeggen niet)
Bestwebdesigners	Geplaatst op 05-02-2006 om 13:37
Regular	toppie cursus!!

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!

Terug naar gewone pagina