Basiscursus javascript en jQuery
For loop
Een for-loop is een stukje code dat zichzelf blijft herhalen zolang er aan een voorwaarde voldaan wordt.
Dat scheelt veel regels code als je bijvoorbeeld voor alle elementen in een array iets wilt controleren.
In de afbeelding zie je een voorbeeld van een for-loop.
Hieronder de uitleg.
Regels 2:
Hier wordt de array die we gaan gebruiken aangemaakt.
Regel 4:
De structuur van een for-loop is altijd hetzelfde.
In het voorbeeld zie je deze structuur.
Tussen de haakjes staan 3 expressies die gescheiden worden door een puntkomma (;)
- var i = 0; Hier wordt een teller aangemaakt. Dit is een variabele met de naam i die “telt” hoe vaak het codeblokje op regel 6 uitgevoerd wordt.
De teller wordt ingesteld op 0. - i < namen.length; Dit is de voorwaarde waaraan voldaan moet worden om de code uit te mogen voeren.
- Als het resultaat van deze voorwaarde true is wordt de code van regel 6 uitgevoerd
- Als het resultaat van deze voorwaarde false is stopt de loop.
Er staan 8 namen in de array dus de code zal 8 keer uitgevoerd worden
- i++: De waarde van de teller wordt elke keer als de loop draait met 1 verhoogd tot de tellerstand gelijk is aan namen.length
Regel 5:
Tussen de accolades op regel 4 en 6 staat het codeblokje dat uitgevoerd moet worden voor elk element in de array.
Bekijk dit codeblokje.
Wat wordt er gedaan?
Zo lang de tellerstand (i) kleiner is dan het aantal elementen in de array “namen” zal de for-loop zich blijven herhalen.
Als de tellerstand gelijk is aan het aantal elementen in de array stopt de loop!
Als je het begrijpt mag je door naar het volgende blok.
We gaan de code een beetje uitbreiden.
$(document).ready(function(){
var namen = ["Eva", "Joshua", "Liam", "Finn", "Sem", "Mikaela", "Jenna", "Margot"];
for(var i = 0 ; i < namen.length ; i++){
console.log(namen[i])
}
});
For loop met 2 array's
Op regel 3 is een extra array (leeftijden) aangemaakt.
Het codeblokje dat telkens uitgevoerd moet worden is ook uitgebreid.
- Zolang i kleiner is dan het aantal namen in de array wordt steeds de volgende zin opgebouwd en in variabele myStr bewaard:
- de naam op positie i in de array namen
- dan de string ” is “
- vervolgens het getal op positie i in de array leeftijd
- en tenslotte de string ” jaar”
- Telkens als de string is opgebouwd wordt deze in de console gelogd.
Zo kun je gemakkelijk controleren of de string correct is opgebouwd. - Daarna wordt er een variabele myObj gemaakt.
Dit is een jQuery object $(); met daarin een <h3>tag. - En dan wordt de string myStr met append() in myObj geplaatst.
- En dan wordt myObj met append() in de body geplaatst.
Let goed op het gebruik van spaties in de string.
$(document).ready(function(){
var namen = ["Eva", "Joshua", "Liam", "Finn", "Sem", "Mikaela", "Jenna", "Margot"];
var leeftijden = [15,17,16,17,15,15,17,16];
for(var i = 0 ; i < namen.length ; i++){
var myStr = namen[i] + " is " + leeftijden[i] + " jaar";
console.log(myStr);
var myObj = $("<h3></h3>");
$(myObj).append(myStr);
$("body").append(myObj);
}
});
Een if in een loop
We gaan nu een if statement in de for-loop zetten.
In het if-statement controleren we of de leeftijd aan bepaalde voorwaarden voldoet.
Als dat zo is wordt er een code uitgevoerd die dus afhankelijk is van de leeftijd van de persoon.
Omdat het if-statement in een loop staat wordt die controle voor elk persoon in de array uitgevoerd.
$(document).ready(function(){
var namen = ["Eva", "Joshua", "Liam", "Finn", "Sem", "Mikaela", "Jenna", "Margot"];
var leeftijd = [15,17,16,17,15,15,17,16];
for(var i = 0 ; i < namen.length ; i++){
if(leeftijd[i] < 16){
console.log(namen[i] + " is jonger dan 16.")
}else if(leeftijd[i] == 16){
console.log(namen[i] + " is precies 16.")
}else{
console.log(namen[i] + " is ouder dan 16.")
}
}
});
Geneste (Nested) arrays
$(document).ready(function(){
namen = [
["Eva",15,"voetbal","maandag"],
["Joshua",17,"zwemmen","woensdag"],
["Liam",16,"dansen","donderdag"],
["Finn",17,"tennis","vrijdag"],
["Sem",15,"fitness","dinsdag"],
["Mikaela",15,"hardlopen","maandag"],
["Jenna",17,"aerobics","dinsdag"],
["Margot",16,"kickboksen","donderdag"],
];
var s1 = " is ";
var s2 = " jaar en gaat elke ";
var s3 = " naar ";
var s4 = ".";
for(var i = 0 ; i < namen.length ; i++){
if(namen[i][1]>16){
console.log(namen[i][0]+s1+namen[i][1]+s2+namen[i][3]+s3+namen[i][2]+s4);
}
}
});
Je begrijpt natuurlijk dat we de informatie anders moeten gaan ordenen als er veel leerlingen toegevoegd worden of als er van elke leerling veel informatie verwerkt moet worden.
In het voorbeeld hierboven zie je hoe we een array van arrays kunnen maken.
Met andere woorden; in de array namen staan 8 sub-arrays.
Elke sub-array bevat 4 gegevens.
We noemen dit nested array’s of multidimensionale array’s
Als we informatie over Eva willen ophalen typen we namen[0]
Voor Joshua is dat namen[1] enzovoort.
De naam van Eva is dan namen[0][0]
haar leeftijd is namen[0][1] enzovoort.
In het voorbeeld worden alle sub-array’s doorlopen door de for-loop. Met het if-statement worden de leerlingen die ouder zijn dan 16 eruit gefilterd.
Van hen worden alle gegevens verwerkt in een zin
Opdracht
Kennis en vaardigheden
- Maak een nieuw project aan met de naam for_loop.
- Maak in het js-bestand een array met voor elke leerling een sub-array met daarin de [voornaam, tussenvoegsel, achternaam, klas, leeftijd, man/vrouw, sport of hobby, kleur haar] en nog twee andere dingen.
- Maak een for-loop met daarin een if-statement waarin je de informatie uit de array’s combineert in één of meerdere zinnen.
- Maak jQuery objecten van de zinnen en plaats deze in de body.
- Maak er met css een mooi geheel van.
Bewaar je werk. Dit wordt jouw persoonlijke Javascript kennisbank!
- Wat is het nut/voordeel van het gebruik van een for-loop?
- Welke 3 expressies zijn er nodig in een for-loop?
- Wat doen deze expressies (in je eigen woorden)?
- Wat gebeurt er als één van deze expressies niet correct is?
- Wat is een multidimansionale array?
- Op welke manier kan een element uit een sub-array opgehaald worden?
De trotse leraar
Als je de opdrachten tot hier hebt gemaakt en begrepen mag je jezelf programmeur noemen.
Gefeliciteerd met deze geweldige prestatie.
Ik ben trots op je.
if(teacher == "proud){
console.log("grade is good!")
});
