Basiscursus javascript en jQuery
If, else if & else
We zijn nu aangeland bij het belangrijkste deel van het programmeren.
Als je dit begrijpt kun je bijna aan de slag om je eerste echte programmeerwerk te maken.
Met if, else if en else kunnen gegevens gecontroleerd worden.
Dat kan van alles zijn, van een controle of inloggegevens juist zijn tot een check of je in een game punten hebt gescoord.
In de afbeeldingen zie je vier voorbeelden met daarbij weer de uitleg.
We beginnen met het meest eenvoudige, het if-statement.
If statement
Op regel 2, 3, 4 en 5 worden variabelen aangemaakt.
Deze variabelen zullen ook in de volgende voorbeelden gebruikt worden.
Regel 7, 8 en 9:
Achter het woordje If staat tussen haakjes een vergelijking.
Als die vergelijking true is wordt het codeblok tussen de accolades uitgevoerd.
Als de vergelijking false is gebeurt er niets.
$(document).ready(function(){
var fruit1 = "Apple";
var fruit2 = "Citroen";
var computer = "Apple";
var auto = "Citroen";
if(fruit1 == computer){
console.log(fruit1 == computer);
console.log("dat is waar");
}
});
true
dat is waar
else statement
Regel 7 tot 12:
De vergelijking op regel 7 is anders dan in het vorige voorbeeld.
Als die vergelijking true is wordt het codeblok achter if uitgevoerd.
Als de vergelijking false is wordt het codeblok achter else uitgevoerd.
Heb je het begrepen? Dan gaan we door met else if
$(document).ready(function(){
var fruit1 = "Apple";
var fruit2 = "Citroen";
var computer = "Apple";
var auto = "Citroen";
if(fruit1 == fruit2){
console.log(fruit1 == fruit2);
console.log("dat is waar");
}else{
console.log("dat is NIET waar");
}
});
dat is NIET waar
else if statement
Hiermee kunnen we meer vergelijkingen controleren.
Er wordt steeds gekeken of een vergelijking waar is.
Als geen van de vergelijkingen waar is wordt de code achter else uitgevoerd.
Gesnapt?
Dan gaan we verder met het laatste voorbeeld.
$(document).ready(function(){
var fruit1 = "Apple";
var fruit2 = "Citroen";
var computer = "Apple";
var auto = "Citroen";
if(fruit1 == fruit2){
console.log(fruit1 == fruit2);
console.log("Fruit2 is hetzelfde als fruit1");
}else if(fruit2 == computer){
console.log(fruit2 == computer);
console.log("Fruit2 is hetzelfde als computer");
}else{
console.log("Fruit2 is hetzelfde als auto");
}
});
|| en &&
Er is een kortere manier om meer dan één vergelijking tegelijk te controleren.
Regel 7:
De 2 verticale streepjes || betekenen OF.
In deze if-statement wordt dus gecontroleerd of minimaal één van de twee vergelijkingen waar is.
Regel 13:
Het dubbele && teken betekent EN.
In deze if-statement wordt dus gecontroleerd of beide vergelijkingen waar zijn.
$(document).ready(function(){
var fruit1 = "Apple";
var fruit2 = "Citroen";
var computer = "Apple";
var auto = "Citroen";
if(fruit1 == computer || fruit1 == auto){
console.log("Minstens één van de vergelijkingen is waar");
}else{
console.log("Beide vergelijkingen zijn NIET waar");
}
if(fruit1 == computer && fruit1 == auto){
console.log("Beide vergelijkingen zijn waar");
}else{
console.log("Minstens één van de vergelijkingen is NIET waar");
}
});
Opdracht
Kennis en vaardigheden
Opdracht 1:
- Maak een nieuw project aan met de naam if_else.
- Maak in het js-bestand vier variabelen waarvan steeds 2 dezelfde waarde krijgen. Voorbeelden van meerduidige woorden vind je in de lijst hieronder
Bedenk zelf de namen van de variabelen. - Maak een if – else if – else statement (als in voorbeeld 3) waarin je controleert welke variabelen dezelfde waarde hebben.
- Maak ook twee if-statements waarin je || en het && gebruikt.
Bewaar je werk.
Dit wordt jouw persoonlijke Javascript kennisbank!
Opdracht 2:
Zoek een voorbeeld van een website, spelletje of programma / app waarin een if statement gebruikt wordt.
Vertel in je eigen woorden wat er gebeurt en wat het doel daarvan is.
- Wat doet JS in een if-statement?
- Waarvoor gebruikt je een else if?
- Wanneer wordt de code achter een else uitgevoerd?
- Wat is het verschil tussen || en &&
- Waarvoor wordt een else if gebruikt?