Inhoud

  1. Geen paragrafen H1 - Voorwoord
  2. Geeft paragrafen weer H2 - Wat is JavaScript?
    1. §1. Wat kun je met JavaScript?
    2. §2. De script-tag
    3. §3. Opdrachten
  3. Geeft paragrafen weer H3 - Statements (opdrachten)
    1. §1. Wat zijn statements?
    2. §2. Functie document.write
    3. §3. Commentaar
    4. §4. Functie alert
    5. §5. Opdrachten
  4. Geeft paragrafen weer H4 - Variabelen
    1. §1. Wat is een variabele?
    2. §2. Variabelen maken en gebruiken
    3. §3. Functie prompt
    4. §4. Operatoren
    5. §5. Strings
    6. §6. Opdrachten
  5. Geeft paragrafen weer H5 - Functies
    1. §1. Wat is een functie?
    2. §2. Functies maken en gebruiken
    3. §3. Functies die iets teruggeven
    4. §4. Parameters en argumenten
    5. §5. De scope van variabelen
    6. §6. Opdrachten
  6. Geeft paragrafen weer H6 - Loops en voorwaardes
    1. §1. Wat zijn loops en voorwaardes?
    2. §2. Het if-else statement
    3. §3. Vergelijkingen en hun operatoren
    4. §4. Functie confirm
    5. §5. Het switch-statement
    6. §6. De while-loop
    7. §7. De for-loop
    8. §8. Stoppen door break
    9. §9. Opdrachten
  7. Geeft paragrafen weer H7 - Events
    1. §1. Wat is een event?
    2. §2. Events maken en gebruiken
    3. §3. Welke events zijn er?
    4. §4. Variabele this
    5. §5. Variabele window.event
    6. §6. Opdrachten
  8. Geeft paragrafen weer H8 - Array
    1. §1. Wat is een Array?
    2. §2. Een Array maken en gebruiken
    3. §3. Een Array doorlopen
    4. §4. Een associatieve array
    5. §5. De for-in loop
    6. §6. Opdrachten
  9. Geeft paragrafen weer H9 - Objecten
    1. §1. Wat is een object?
    2. §2. Verschil object en variabele
    3. §3. Eigenschappen
    4. §4. Methodes
    5. §5. Eigenschappen en methodes
    6. §6. Opdrachten
  10. Geeft paragrafen weer H10 - Globale objecten
    1. §1. Wat zijn globale objecten?
    2. §2. Het window object
    3. §3. Het document object
    4. §4. Het Math object
    5. §5. Standaard HTML-Element object
    6. §6. Een HTML-Table object
    7. §7. Opdrachten

8. Array

Computers bewerken vaak hele lijsten gegevens tegelijk. Om dat mogelijk te maken zijn er arrays.

Naar boven

8.1. Wat is een Array?

Een array is niks anders dan een hele lijst van variabelen achter elkaar. Stel dat je de leden van een sportvereniging wil bijhouden, dan kan je wel een heleboel variabelen maken (lid1, lid2, lid3, etc) maar dat is erg onhandig. Je kan eigenlijk beter een variabele maken waar weer een heleboel andere variabelen in bewaard kunnen worden. Zo'n variabele heet een array, een lijst van gegevens dus.

Naar boven

8.2. Een Array maken en gebruiken

Het aanmaken van zo'n array gaat vrij simpel. Je maakt een gewone variabele aan, en dan gebruik je de operator = om er een array van te maken.

JavaScript:
  1. var mijnArray = new Array();

Wat het woordje new daar precies doet wordt uitgelegd in H9 uitgelegd.

Nou is het natuurlijk nog een lege lijst. Dus moeten er nog waardes in gestopt worden. Dat kan met de functie push. Daar voeg je een waarde toe aan het einde van de array.

JavaScript:
  1. var mijnArray = new Array();
  2. mijnArray.push(11); // Voeg de waarde 11 toe aan mijnArray
  3. mijnArray.push(12); // Voeg de waarde 12 toe aan mijnArray
  4. mijnArray.push(13); // Voeg de waarde 13 toe aan mijnArray

Waarom er een punt tussen mijnArray en push staat wordt in H9.3 en H9.4 uitgelegd. Voor nu hoef je alleen maar te begrijpen dat dat betekent dat de functie push bij de array mijnArray hoort.

Er is ook en snellere manier om dit te schrijven. Je kan namelijk de array gelijk al wat waardes meegeven. Dat gaat als volgt:

JavaScript:
  1. var mijnArray = [11, 12, 13]; // Maak een variabele mijnArray, dat wordt een array met de waardes 11, 12 en 13

De array mijnArray bevat nu dus 3 waardes, namelijk 11, 12 en 13 (in die volgorde). Elke waarde in de array heeft een eigen nummertje, een eigen id. Dat nummertje of id wordt een key genoemd, met die key heb je toegang tot de waarde die daarbij hoort. Die keys werken heel simpel: de eerste waarde heeft key 0, de tweede waarde heeft key 1, de derde key 2, etc. Let dus wel op dat het tellen bij 0 begint, en niet bij 1! Je zou de array mijnArray dus als volgt kunnen voorstellen.

KeyWaarde
011
112
213

Om een waarde, of zoals één zo'n waarde in een array wordt genoemd: element, via zo'n key op te vragen type je eerst de naam van de array mijnArray in dit geval dus. Daarna zet je de key tussen blokhaken (dus tussen [ ]).

JavaScript:
  1. var mijnArray = new Array();
  2. mijnArray.push(11); // Voeg de waarde 11 toe aan mijnArray
  3. mijnArray.push(12); // Voeg de waarde 12 toe aan mijnArray
  4. mijnArray.push(13); // Voeg de waarde 13 toe aan mijnArray
  5.  
  6. alert(mijnArray[1]); // Vraag het 2e element uit mijnArray op en laat de waarde daarvan zien in een alert-box

Een waarde die je opvraagt met een key gedraagt zich als een gewone variabele. Je kan er dus bewerkingen op uitvoeren (optellen, vermenigvuldigen, etc) en je kan hem wijzigen.

JavaScript:
  1. var mijnArray = new Array();
  2. mijnArray.push(11); // Voeg de waarde 11 toe aan mijnArray
  3. mijnArray.push(12); // Voeg de waarde 12 toe aan mijnArray
  4. mijnArray.push(13); // Voeg de waarde 13 toe aan mijnArray
  5.  
  6. // Vraag een nieuwe waarde en sla deze op in het 2e element uit mijnArray
  7. mijnArray[1] = parseInt(prompt("Geef een nieuwe waarde in", mijnArray[1]));
  8. // Op elementen in een array kunnen gewoon bewerkingen uitgevoerd worden
  9. mijnArray[2] = mijnArray[0] + mijnArray[1];
  10. alert(mijnArray[0] + " + " + mijnArray[1] + " = " + mijnArray[2]);
Naar boven

8.3. Een Array doorlopen

Bij arrays gebruik je vaak veel loops, omdat je voor elk element dezelfde code wil uitvoeren. Je doorloopt dan dus de array met een loop. Er zijn veel redenen waarom dat nodig kan zijn, je kan bijvoorbeeld voor een bepaald element zoeken of je wil bij elk element een bepaalde code uitvoeren. Het doorlopen van een array kan het best met een for-loop (zie H6.7). Daarbij maak je gebruik van de eigenschap (meer over eigenschappen in H9.3) length, daarmee vraag je namelijk het aantal elementen in de array op.

JavaScript:
  1. var mijnArray = new Array();
  2. mijnArray.push(11); // Voeg de waarde 11 toe aan mijnArray
  3. mijnArray.push(12); // Voeg de waarde 12 toe aan mijnArray
  4. mijnArray.push(13); // Voeg de waarde 13 toe aan mijnArray
  5.  
  6. for(var i=0; i<mijnArray.length; ++i) // Doorloop de array door de keys van voor naar achter door te lopen
  7. { // Daarbij stelt i de huidige key voor
  8. document.write(mijnArray[i] + "<br />"); // Zet het element dat bij de key i hoort op het scherm
  9. }

Merk op dat het laatste element in de array de key mijnArray.length-1 heeft, want length geeft het aantal elementen aan. Omdat er bij 0 begonnen wordt met het tellen van de keys is de laatste key dus altijd mijnArray.length-1 (tenzij er geen elementen in de array zitten).

Naar boven

8.4. Een associatieve array

Je kan ook je eigen keys bepalen. Zoiets heet een associatieve array.

JavaScript:
  1. var mijnArray = new Array(); // Maak een lege array aan
  2. mijnArray[15] = "vijftien"; // Key: 15, waarde: "vijftien"
  3. mijnArray["key"] = 42; // Key: "key", waarde: 42
  4. mijnArray["a"] = "A"; // Key: "a", waarde: "A"
  5. mijnArray[12] = 144; // Key 12, waarde: 144

Nu staan er in mijnArray dus 4 waardes. Ieder met hun eigen key.

KeyWaarde
15"vijftien"
"key"42
"a""A"
12144

Zoals je kan zien kunnen er dus zowel strings als getallen gebruikt worden als key.

Het opvragen van de waardes gaat hetzelfde als bij een normale array.

JavaScript:
  1. var mijnArray = new Array(); // Maak een lege array aan
  2. mijnArray[15] = "vijftien"; // Key: 15, waarde: "vijftien"
  3. mijnArray["key"] = 42; // Key: "key", waarde: 42
  4. mijnArray["a"] = "A"; // Key: "a", waarde: "A"
  5. mijnArray[12] = 144; // Key 12, waarde: 144
  6.  
  7. alert(mijnArray["key"]); // alert-box met: 42
Naar boven

8.5. De for-in loop

Een nadeel van zo'n associatieve array is dat hij niet op een normale manier doorgelopen kan worden. De keys zijn namelijk niet netjes genummerd. Daarvoor is de for-in-loop bedacht. Die ziet er als volgt uit:

JavaScript:
  1. for(variabele in associatieve_array)
  2. {
  3. // Code die uitgevoerd moet worden
  4. }

Hierbij krijgt variabele telkens de waarde van een key uit de array totdat alle keys geweest zijn. Zo kan de hele array als nog doorgelopen worden. Merk op dat dit ook werkt voor gewone arrays, dus niet alleen voor associatieve arrays.

JavaScript:
  1. var mijnArray = new Array(); // Maak een lege array aan
  2. mijnArray[15] = "vijftien"; // Key: 15, waarde: "vijftien"
  3. mijnArray["key"] = 42; // Key: "key", waarde: 42
  4. mijnArray["a"] = "A"; // Key: "a", waarde: "A"
  5. mijnArray[12] = 144; // Key 12, waarde: 144
  6.  
  7. for(key in mijnArray)
  8. {
  9. document.write(key + ": " + mijnArray[key] + "<br />");
  10. }
Naar boven

8.6. Opdrachten

  1. Je zou een array als een kastje kunnen zien. Dat kastje heeft dan lades, met op elke lade een nummertje en in elke lade zit een waarde.
    Wat stelt in deze vergelijking het nummertje op de lade voor, wat stelt de inhoud van elke lade voor en wat stelt het kastje in zijn geheel voor?
    En met welk nummertje heeft de eerste lade? (H8.2)
    Antwoord
  2. Maak een array, en vraag 3 keer om een getal (ga ervan uit dat er een geldig getal ingevoerd wordt). Elke keer sla je deze waarde in de array op. Aan het eind geef je de som van deze 3 getallen (in een alert-box of met document.write()).
    Andere variabelen, behalve de array, zijn niet toegestaan. (H8.2)
    Antwoord
  3. Maak een functie waarmee de gebruiker getallen invoert totdat de gebruiker stop invoert. Je mag er wederom vanuit gaan dat er enkel geldige getallen ingevoerd worden. De functie moet een array met alle ingevoerde getallen returnen.
    Maak vervolgens een functie die alle getallen in een array (die de functie als argument heeft gekregen) optelt en het resultaat returnt.
    Vervolgens roep je beide functies 1x aan en laat je de som van de ingevoerde getallen in een alert-boxje zien. (H8.3)
    Antwoord
  4. Maak een script dat elke keer om een landnaam vraagt en daarna om de hoofdstad van dat land. Deze gegevens slaat het script op in een associatieve array.
    Als de gebruiker bij het invullen van het land niks invult stopt het invoeren. Vervolgens vrraagt het script aan de gebruiker van welk ingevoerd land hij hoofdstad wil weten. Deze hoofdstad geeft het script weer. Ga er hierbij vanuit dat een gebruiker enkel een landnaam zal invullen die hij tijdens het invoeren van de gegevens ook heeft opgegeven.
    (H8.4)
    Antwoord
  5. Zelfde als opdracht 4. Alleen wordt er niet gevraagd welke hoofdstad de gebruiker wil weten, maar worden alle landen en hun hoofdsteden in 1 overzicht op de pagina weergegeven (dus geen alert-box). (H8.5)
    Voorbeeld - Antwoord