Een for i loop is een herhaling ook wel iteratie genoemd. Alles wat in de for i loop gebeurt kun je een x aantal keer laten herhalen. Bij het aanmaken van een for i loop moet je 3 dingen weten: beginpunt, eindpunt en aantal stappen tussen elke herhaling. Een for i loop heeft de volgende syntax:
for ( var <iteratorNaam> = <beginPunt>; <iteratorNaam> <operator> <eindPunt>; <iteratorNaam><aantalStappen> ) { // het te herhalen code block }
Een voorbeeld van een simpele for i loop is het tellen van 1 naar 10. Het beginpunt is 1, het eindpunt is 10, het aantal stappen is 1:
for (var i = 1; i <= 10; i++) { alert( i ); }
Bij het aanmaken van een iteratie zul je wel moeten oppassen dat je geen oneindige loop aanmaakt. Dit kan ervoor zorgen dat je browser vast gaat lopen. Maak dus je iteraties met voorzichtigheid aan. Het is niet leuk voor een bezoeker om op een webpagina te komen met een loop dat hun browser vastzet. Gegarandeerd komen ze niet meer terug.
Met een for loop is het mogelijk om te tellen van een getal naar een hoger getal. Dit is vooral handig als je wilt loopen door een 1-dimensionale Array. Hieronder heb ik een Array aangemaakt met wat waarden. Ook heb ik een for loop geschreven dat van 0 naar 4 telt om zo de waarden in deze Array te alerten.
var crewMembers = ['Joel', 'Gerard', 'Maarten', 'Thijs', 'Ibrahim']; for (var i = 0; i < 5; i++) { alert(crewMembers[i]); }
Er zijn nog meer dingen mogelijk. Zo is het ook mogelijk om een for loop binnen een for loop uit te voeren. Het is mogelijk om een functie meerdere malen uit te voeren. Hiermee wordt het duidelijk dat de for loop meestal wordt gebruikt om herhaling van code te voorkomen.
Stel je eens voor dat je voor NASA werkt. Ze vragen aan jou, de nieuweling, om een script te schrijven dat telt van 10 naar 0 om zo hun raket te lanceren. Zij hebben het je gemakkelijk gemaakt door de raketlanceringsscript door een gevorderde programmeur te maken. Jij hoeft dus enkel te concentreren op het aftellen. Een for i loop kan dit prima aan ! Het is mogelijk om van een getal af te tellen naar een lager getal. Hieronder staat het script dat de NASA tegenwoordig gebruikt!
alert('Ready for launch. T minus:'); for (var i = 10; i <= 0; i--) { alert(i + ' seconds'); if (i == 0) { NASA.Core.launchRocket(); } }
Zoals je kunt zien, maken we gebruik van de -- operator. Deze zorgt ervoor dat bij elke iteratie de variabele i met 1 wordt verlaagd. Dit zal zo doorgaan totdat hij de 0 bereikt. Ook kun je zien dat het mogelijk is om meerdere code uit te voeren. Hiermee is het duidelijk dat je niet gelimiteerd bent tot één codefragment.
Je hebt in de vorige paragrafen gezien dat ik gebruik heb gemaakt van 1 stap. Dit is niet een beperking. Het is ook mogelijk om meerdere stappen over te slaan. Stel dat je een script hebt dat per iteratie een x aantal stappen moet overslaan. Dit betekent dat de laatste gedeelte van de syntax aangepast moet worden. Hieronder heb ik een script gemaakt dat begint van 0 en eindigt op 100. Ik ga hierbij stappen van 20 nemen. Dit betekent dat er enkel 5 alertboxen tevoorschijn komen.
for (var i = 0; i <= 100; i += 20) { alert(i); }
Zoals je kunt zien hierboven en bovenstaande paragrafen, zijn de operators erg belangrijk voor for loops. Ik heb het al gemeld in de operators hoofdstuk, maar herhaal het hier. Operators zijn erg belangrijk bij elke programmeertaal. Blijf oefenen met for loops en operators!