Loops en Arrays

Wat is een loop?

Loops gebruik je om hetzelfde stuk code een aantal keren uit te voeren. Met behulp van een loop kan de computer herhalende handelingen verrichten. Er zijn drie soorten loops: for, while en do while.

  1. We zullen voornamelijk kijken naar for en while.
  2. De while loop voert een stuk code uit, zolang een conditie waar is.
  3. De for loop voert een stuk code een gespecificeerd aantal keren uit.

Toepassingen

In welke situaties kom je loops tegen? Enkele voorbeelden:

Batch-functie in Photoshop (for loop)

Photoshop bevat een functie (batch) waarmee je een bepaalde handeling om meerdere afbeeldingen kunt toepassen. Als je bijvoorbeeld 10.000 afbeeldingen wilt verkleinen en van RGB naar zwart-wit wilt converteren, dan kun je dit met de hand doen (wat je waarschijnlijk 2 weken kost en een muisarm). Maar je kunt ook de batch-functie gebruiken. Deze batch-functie is eigenlijk een for loop

for Loop

De for loop voert een stuk code een gespecificeerd aantal keren uit. Tussen de haken '()' staan drie statements bekijk de volgende code

for (i=0; i<100;i++){
	[code to be executed];
}

Let op de statements die tussen de haken '()' staan worden gescheiden met een punt-komma. Tussen de accolades '{}' staan de statements die je wilt uitvoeren. Algemeen gezegd:

for ([initialization]; [condition]; [increment]){
    [code to be executed];
}

Voorbeeld 1 | For Loop

Stel je wilt vijf keer een bericht tonen aan de gebruiker: 'This message is annoying.' . Je zou de code dan als volgt kunnen schrijven

alert ( 'This message is annoying!');
alert ( 'This message is annoying!');
alert ( 'This message is annoying!');
alert ( 'This message is annoying!');
alert ( 'This message is annoying!');

Indien je dit bericht 10 keer wilt laten zien (als je echt heel vervelend wilt zijn). Dan heb je 10 keer een alert nodig, dit kun je doen door de code te copy-pasten. Maar dit kan natuurlijk slimmer, je kunt in dit geval een for loop gebruiken. De code ziet er dan als volgt uit:

for (counter = 0; counter < 10; counter = counter + 1) {
	alert('This message is annoying!');
}
Hoe het werkt:

Je initialiseert eerst de variabele 'counter'. Deze begint bij 0: counter = 0 Vervolgens geef je aan hoe vaak de code uitgevoerd moet worden: counter < 10 Tenslotte geef je aan met welke waarde de teller (counter) verhoogd moet worden: counter = counter + 1

Dus de loop begint te tellen bij 0, voert de statements tussen de accolades uit. En iedere keer als de statements zijn uitgevoerd, wordt de teller (counter) verhoogd met de waarde 1. Vervolgens controleert de for loop of teller (counter) kleiner is dan 10. Indien dit het geval worden de statements nog een keer uitgevoerd.

Je kunt ook aan de gebruiker laten zien hoe vaak de loop al doorlopen is:

for (counter = 0; counter < 5; counter = counter + 1) {
	alert(counter);
}

Je kunt dit ook combineren met een tekst:

for (counter = 0; counter < 5; counter = counter + 1) {
	alert('This is round number: ' + counter);
}

Als je bovenstaande code uitvoert, dan zullen de volgende berichten getoond worden:

This is round number: 0 This is round number: 1 This is round number: 2 This is round number: 3 This is round number: 4

Bovenstaand resultaat ziet er wat vreemd uit, want wellicht wil je beginnen met de boodschap 'This is round number: 1', en niet met 'This is round number: 0'. Je kunt dit doen door de counter te verhogen met 1 in de code die je uitvoert:

for (counter = 0; counter < 5; counter = counter + 1) {
	alert('This is round number: ' + (counter + 1));
}

Of je kunt de beginwaarde van de for loop aanpassen, je dient dan ook de conditie aan te passen:

for (counter = 1; counter <= 5; counter = counter + 1) {
	alert('This is round number: ' + counter);
}

Deze werkt ook:

for (counter = 1; counter < 6; counter = counter + 1) {
	alert('This is round number: ' + counter);
}

voorbeeld 2 | for-loop

Je kunt de teller ook ophogen met een andere waarde dan 1, stel je wilt de waarde ophogen met 2, dan ziet de code er als volgt uit:

for (counter = 0; counter < 10; counter = counter + 2) {
	alert('This is round number: ' + counter);
}

In dit geval zal de browser 5 berichten tonen, waarvan iedere keer de teller wordt opgehoogd met 2. Het gebruik van het woord counter zie je eigenlijk zelden. Programmeurs zijn lui en ze vinden het teveel werk om iedere keer 'counter' in te typen. Echte programmeurs gebruiken daarom vaak de variabele 'i' als teller.

for (i = 0; i < 5; i = i + 1) {
	alert('This is round number: ' + i);
}

Ook hebben de programmeurs een kortere notatie bedacht voor i = i + 1, namelijk i++. Je ziet dus vaak in programma's:

for (i=0; i<5; i++) {
	alert('This is round number: ' + i);
}

i = i + 1 is dus hetzelfde als i++. Net als dat i = i - 1 hetzelfde is als i--. Als je bijvoorbeeld wilt aftellen:

for (i = 10; i>0; i--) {
  alert('Countdown: ' + i);
}

voorbeeld 3 | for-loop

Je kunt de teller ook ophogen met een andere waarde dan 1, stel je wilt de waarde ophogen met 2, dan ziet de code er als volgt uit:

Je kunt in een for loop ook if-statements plaatsen, het volgende voorbeeld toont eerst drie berichten 'i is kleiner dan drie', de laatste twee berichten 'i is 3 of groter en bijna 5':

for(i=0; i<5; i++) {
	if (i < 3) {
		alert('i is kleiner dan drie');
	} else {
    	alert('i is 3 of groter en bijna 5');
	}
}

Let op het inspringen van de code, anders wordt het onoverzichtelijk.

While loop

De while loop voert een stuk code uit, zolang een conditie waar is. Tussen de haken '()' staat de conditie (net als een if-statement). Tussen de accolades '{}' staan de statements die je wilt uitvoeren.

while ([condition]){
	[code to be executed];
}

voorbeeld: while-loop

Stel je wilt de gebruiker blijven prompten totdat hij de juiste leeftijd heeft ingevoerd, tenslotte wordt een welkomstbericht getoond (als de juiste leeftijd is ingevoerd), zoals je ziet wordt het script van boven naar beneden uitgevoerd:

// Initialiseer een waarde voor age.
age = 0;
// Blijf aan de gebruiker vragen hoe oud hij/zij is,
// totdat de gebruiker aangeeft dat hij/zij 18 is.
while (age != 18){
	age = prompt('What is your age?', '');
}
// Het volgende bericht wordt pas getoond nadat de gebruik
// de juist leeftijd heeft ingevoerd.
alert('Welcome to my site');

Net als met de for loop, kun je een teller maken met de while loop (hoewel dit wel ongebruikelijk is). 

counter = 0;
while (counter < 10){
	alert('Count: ' + counter);
	counter++;
}

Arrays (verzameling) of het Array Object.

Hoe werkt het met variabelen ook alweer?

Een normale variabele kun je vergelijken met een enveloppe. Deze enveloppe kan één waarde bevatten, bijvoorbeeld de naam van één vriend. Je kunt zeg maar 1 velletje papier in een enveloppe doen.

var friend = 'Peter';

Indien je dus meerdere vrienden hebt, dien je meerdere variabelen (meerdere enveloppes) aan te maken:

var friend01 = 'Clark';
var friend02 = 'Lois';
var friend03 = 'Zorro';

Wanneer je deze variabelen wilt gebruiken, dien je dus iedere keer de juiste variabele naam te gebruiken. Stel je wilt al je vrienden tonen:

var friend01 = 'Clark';
var friend02 = 'Lois';
var friend03 = 'Zorro';

document.write(friend01);
document.write(friend02);
document.write(friend03);

Dit wordt een probleem als je een vriend hebt toegevoegd of verwijderd. Je moet dan op meerdere plaatsen je script aanpassen. Stel je voegt een paar vrienden toe aan je lijst, dit resulteert dan in de volgende code:

var friend01 = 'Clark';
var friend02 = 'Lois';
var friend03 = 'Zorro';
var friend04 = 'Steve';
var friend05 = 'Arthur';

document.write(friend01);
document.write(friend02);
document.write(friend03);
document.write(friend04);
document.write(friend05);

Zoals je ziet is het dus een hoop werk om iedere keer een nieuwe variabele aan te maken en je code uit te breiden. Hierbij loop je ook het risico dat je iets vergeet aan te passen, waardoor je script niet correct werkt.

Hoe werkt het met Arrays

Een array kun je vergelijken met een doos, deze doos kan meerdere waardes bevatten. Je kunt een variabele aanmaken die meerdere vrienden bevat (een doos met meerdere briefjes erin met de naam van de vriend/vriendin erop).

friends = new Array ('Clark', 'Lois', 'Zorro');

Om al je vrienden te tonen, gebruik je een for-loop die de array uitleest:

for (i=0; i<3; i++) {
    document.write(friends[i]);
}

Wanneer je je vrienden uitbreidt, moet je wel de maar de Array en een onderdeel van de forloop aan te passen. Bij de array zet de gewenste vriend er achter en bij de forloop verhoog je de test waarde van 3 naar 4: Hier komen we later nog op terug (Array.length)

Array ('Clark', 'Lois', 'Zorro', 'Steve', 'Arthur');
for (i=0; i<4;i++) {
    document.write(friends[i]);
}

Syntax

De basisopbouw van een array ziet er als volgt uit:

[varName] = new Array ([values]);
friends = new Array ('Clark', 'Lois', 'Zorro');
Voorbeelden
//Array met alleen integers
friendsAge = new Array (33, 21, 28);

//Array met alleen strings, integers en booleans
mixed = new Array ('Clark', 33, true, 'Lois', 21, false, 'Zorro', 28, true);

De structuur van de bovenstaande array begint nu wel onoverzichtelijk te worden. Je kunt in dit geval ook arrays in een array plaatsen.

friends = new Array (new Array('Clark', 33, true),  new Array('Lois', 21, false),  new Array('Zorro', 28, true) );
//wellicht wat rommelig uit, dus je kunt het ook als volgt schrijven:
friends = new Array;
friends = new Array (
	new Array('Clark', 33, true),
    new Array('Lois', 21, false),
    new Array('Zorro', 28, true)
);

Arrays in arrays worden ookwel 'multi dimensional arrays' genoemd. Het is een geavanceerd gebruik van arrays, dus je hoeft dit niet direct te begrijpen.

Arrary Functionaliteiten

Arrays UITLEZEN

Elke waarde in een array heeft een index nummer. Deze index begint altijd bij 0! Van de onderstaande array, zijn de index nummers als volgt:

friends = new Array ('Clark', 'Lois', 'Zorro');

Index   Value
------------------------
0       Clark
1       Lois
2       Zorro

Je kunt een waarde uitlezen door te refereren naar het index-nummer. Dit index nummer plaats je tussen rechte haken. Dus om een ander variabele te vullen doe je het volgdende:

friends = new Array ('Clark', 'Lois', 'Zorro');
var bestfriend =  friends[1]
// bestfiend is nu gevuld met 'Lois';

Array UITLEZEN met een Loop

Indien je alle waardes uit een array wilt uitlezen (om bijvoorbeeld in een alert te tonen), gebruik je een for-loop.

friends = new Array ('Clark', 'Lois', 'Zorro');
for (i=0; i<3;i++) {
    alert(friends[i]);
}

Ter verduidelijking:

Er is echter een probleem met de code hierboven, indien je de array uitbreidt met meer waardes (meer vrienden), dien je dus ook 'i<3' aan te passen. Het de onderstaande code worden dus alleen de namen van Clark, Lois en Zorro getoond, omdat de for-loop niet verder gaat dan 3.

friends = new Array ('Clark', 'Lois', 'Zorro', 'Steve', 'Arthur');
for (i=0; i<3;i++) {
    alert(friends[i]);
}

Er onstaat echter een groter probleem als de array korter is, dan dat de for-loop aangeeft.

friends = new Array ('Clark', 'Lois');
for (i=0; i<3;i++) {
    alert(friends[i]);
}

In dit geval zou 'i<3' dus 'i<2' moeten zijn. De for-loop zal drie keer een alert tonen, de derde keer wordt echter de waarde 'undefined' getoond, want er bestaat immers geen derde waarde voor de array 'friends'. Hoe kun je dit oplossen? Je wilt eigenlijk weten hoe lang de array is en dat het script dus uitleest hoeveel waardes een array bevat. De oplossing is de lengte uitlezen.

Array.length

De lengte van een array is gewoon het aantal elementen wat in een array staat. Als de lengte van een string wil weten kun je dat ook doen. Alleen gaan het dan niet om het aantal elementen maar het aantal karakters inclusief spaties. De methode die daar voor gebruikt wordt heet length. Deze methode wordt gekoppeld aan het te bewerken array of string doormiddel van de punt notatie.

Voorbeelden

var mijnNaam = 'Jan Klaasen';
alert (mijnNaam.length);
// Returns 11;

friends = new Array ('Clark', 'Lois', 'Zorro');
alert(friends.lenght);
// Returns 3

Vooral bij loops en arrays is het dus handig om de lengte te gebruiken in plaats van een vast nummer. Als de Array van lengte te verandert hoef je dus de forloop niet aan te passen. Nu snap je ook waar de index van een array met 0 begint. Dit is handiger voor de forloop. Je kunt deze methode dus ook gebruiken in een for loop:

friends = new Array ('Clark', 'Lois', 'Zorro');
countFriends = friends.length;
alert('I have ' + countFriends + 'friends.');
for (i=0; i<countFriends;i++) {
    alert(friends[i]);
}

Ter verduidelijking

Je kunt deze code ook iets korter schrijven:

friends = new Array ('Clark', 'Lois', 'Zorro');
alert('I have ' + friends.length + 'friends.');
for (i=0; i<friends.length i++) {
    alert(friends[i]);
}
Voorbeeld: alle waardes uitlezen

Je kunt ook de waardes van een multidimensional array uitlezen. Let op hoe de index wordt uitgelezen: '[i][0]'. Dus de eerste waarde tussen de rechte haken is 'i' en dit selecteert dus het betreffende item in de array friends. De tweede waarde tussen de rechte haken is de index van de array die de naam en de leeftijd van de friend bevat. In dit geval is is '[i][0]' voor de naam en '[i][1]' voor de leeftijd.

<html>
    <head>
        <title>JavaScript Example</title>
        <script>
            friends = new Array (
            	// First item of array is name,
                // second item is age
                new Array('Clark', 21),
                new Array('Lois', 28),
                new Array('Zorro', 33)
           );
           for (i=0; i < friends.length; i++){
                document.write('<strong>I have ' + friends.length + ' friends.</strong><br/>');
                for (i=0; i < friends.length; i++); friends.length; i++) {
                    // Show friend name and age.
                    message = friends[i][0] + ' is ' + friends[i][1] + ' years old.<br>';
                    document.write(message);
                }
            }

    </script>
  </body>
</html>

Arrays AANVULLEN/SCHRIJVEN

Je kunt aan een array nieuwe waardes toevoegen, er bestaan verschillende manieren om de array uit te breiden. Je kunt beginnen met een lege array, om vervolgens drie vrienden toe te voegen aan deze array.

// Start with an empty array
friends = new Array ();
friends[0] = 'Cark';
friends[1] = 'Lois';
friends[2] = 'Zorro';
//etc

Je geeft dus tussen de rechte haken de index aan, vervolgens ken je een waarde toe aan de index. Als je al een array met met 3 vrienden, en je wil er 2 vrienden aan toe voegen:

friends = new Array ('Clark', 'Lois', 'Zorro');
// Aanvullen kan dan ook met lege haken. De volgorde bepaald de index.
friends[] = 'Steve';
friends[] = 'Arthur';

Er is ook een nette methode Array.push genaamd:

Array.push

het pushen van een array is eigenlijk wat er gebeurd in het bovenstaande voorbeeld. Deze functie zorgt er voor dat er aan het einde van een array een waarde wordt toegevoegd. De officiele manier van notatie is echter:

friends = new Array ('Clark', 'Lois', 'Zorro');
// Aanvullen kan dan ook met lege haken. De volgorde bepaald de index.
friends.push('Steve');

Arrays WIJZIGEN

Je kunt de waarde van een item in een array wijzigen, je doet dit door te refereren naar de index en aan deze index een nieuwe waarde toe te kennen.

friends = new Array ('Lois', 'Zorro');
friends[1] = 'Joan';

Array ITEMS verwijderen

Array.splice()

Je kunt de items in een array verwijderen met de methode 'splice()'. De methode splice bevat twee parameters: het index nummer waar je begint met verwijderen, en het aantal items dat je wilt verwijderen:

[arrayName].splice([startIndex], [amount])
friends = new Array ('Clark', 'Lois', 'Zorro', 'Steve', 'Arthur');
for (i=0; i<friends.length; i++) {
    document.write('First round: ' + friends[i] + '<br/>');
}
// Print horizontal rule
document.write('<hr>');
// Verwijder 3 items van de array, starten bij het tweede item (index 1).
// Index 1, 2 en 3 zullen verwijdert worden (dus Lois, Zorro en Steve worden verwijdert).
friends.splice(1,3);
for (i=0; i<friends.length; i++) {
    document.write('Second round: ' + friends[i] + '<br/>');
}

Array.pop()

Een andere veel gebruikte manier om elementen te verwijderen is de pop methode. Deze methode verwijdert het laatste element uit een array en geeft deze als er om wordt gevraagd terug. Bijvoorbeeld:

friends = new Array ('Clark', 'Lois', 'Zorro', 'Steve', 'Arthur');
lastfriend = friends.pop();
//lastfriend is nu nu 'Arthur';
//friends is 'Clark', 'Lois', 'Zorro', 'Steve'
friends.pop();
//friends is 'Clark', 'Lois', 'Zorro'

Andere Array bewerkingen

Array.join();

Voor weergave doeleinden is het soms makkelijk om een array te kunnen zien als string. Dit kan je bewerkstelligen door de join methode aante roepen. De join methode vraagt wel om een argument. Het vraagt namelijk om het verbindende element tussen de te verbinden elementen.

friends = new Array ('Clark', 'Lois', 'Zorro', 'Steve', 'Arthur');
var allevrinden = friends.join('.');
//allevrinden is gelijk aan 'Clark.Lois.Zorro.Steve.Arthur';
//of
friends = new Array ('Clark', 'Lois', 'Zorro', 'Steve', 'Arthur');
var allevrinden = friends.join(' ');
//allevrinden is gelijk aan 'Clark Lois Zorro Steve Arthur';

Array.split();

Omgekeerd is ook mogelijk door een string te splitten op een te vinden karakter in een zin of woord. Het te vinden karakter komt vervolgens niet terug in de array

var zinsuperhelden = 'Clark Lois Zorro Steve Arthur';
friends = new Array;
friends = zinsuperhelden.split (' ');
//friends is nu gelijk aan ('Clark', 'Lois', 'Zorro', 'Steve', 'Arthur')

Met deze laatste twee zou je je kunnen afvragen wat he er mee moet. Welnu een goed voorbeeld is als je bijvoorbeeld meerdere classes op een element zit en je zou er een voudig op willen testen of willen toevoegen. Zie het volgende voorbeeld.

...
<input id="tester" class="required lenght4" />
...

element = document.getElementById('tester');
var allclasses = element.className;
separaterclasses = new Array;
separaterclasses = allclasses.split (' ');
errorclass = separaterclasses;
errorclass.push('error');

if(element.value == ''){
	element.className = errorclass.join(' ');
}