# Oefeningen arrays en forEach()

# Oefening 1: Uitnodigen

Maak een nieuwe HTML-pagina met naam oef1_uitnodigen.html. Koppel een extern scriptbestand aan de pagina met naam oef1_uitnodigen.js.

Je hebt een reeks vrienden die je wil uitnodigen voor een feestje. Jammer genoeg heb je geen villa en zal je een keuze moeten maken wie er welkom is en wie... hopelijk nooit op de hoogte wordt gebracht. Schrijf een applicatie die aan de gebruiker één voor één vraagt of een gegeven persoon uitgenodigd is. De reeks van personen is op voorhand opgeslagen in een array, bv.

const vrienden = [
    "Eddy",
    "Frieda",
    "Gonny",
    "Henk",
    "Kees",
    "Mia"
];

De gebruiker antwoordt met ja of nee (of een variatie daarvan). Als de persoon mee mag, wordt ze opgenomen in een andere array. Nadat elke persoon aan bod is geweest, schrijf je op het scherm via document.write() wie er allemaal uitgenodigd is.

Neem een kijkje naar het gewenste resultaat.

TIP

Wanneer je een array volledig programmatisch wil opstellen is het vaak een goed idee te beginnen met een lege array en die stuk voor stuk op te vullen.

const getallen = []; // Beginnen met een lege array

getallen.push(4); // Stuk voor stuk opvullen
getallen.push(3);

# Oefening 2: Lotto

Maak een nieuwe HTML-pagina met naam oef2_lotto.html. Koppel een extern scriptbestand aan de pagina met naam oef2_lotto.js.

Bouw een kleine applicatie die nakijkt of jouw lottonummers winst opleveren of niet. De winnende getallen zijn op voorhand in een array bepaald.

De invoer van de gebruiker moet bestaan uit de volledige reeks getallen (in één prompt()), gescheiden door een spatie. Bv. 3 5 16 18 29 40. Gebruik de stringfunctie split() om een de invoer om te zetten naar een array. Gebruik vervolgens de arrayfunctie includes() om na te kijken of een getal voorkomt in de reeks.

Naargelang hoeveel getallen correct zijn krijgt de gebruiker een andere boodschap:

Zes getallen: Je hebt alle getallen goed! Jackpot!
Vijf getallen: Je hebt 5 getallen goed! Net geen hoofdprijs!
Drie of vier getallen: Je hebt X getallen goed! (X is 3 of 4)
Minder dan drie getallen: Je hebt slechts X getallen goed! Volgende keer beter! (X is aantal juiste getallen)

Neem een kijkje naar het gewenste resultaat.

NIEUW: `split()`

De stringfunctie split() zet een string om in een array. Het doet dit door een string te splitsen op een scheidingsteken, dat de methode als argument tussen de ronde haken aanneemt:

const zin = "Hallo, ik denk, eerlijk gezegd, dat dit goed te doen is!"

const stukken = zin.split(", ");
console.log(stukken);
// ["Hallo", "ik denk", "eerlijk gezegd", "dat dit goed te doen is!"]

NIEUW: `includes()`

De methode includes() kijkt na of een bepaald element voorkomt in een array. Het geeft een boolean (true of false) terug als resultaat. Je kan het dus perfect gebruiken in combinatie met condities en de if-structuur.

const leden = ["Bart", "Jelle", "Kiara", "Tom"];

if (leden.includes("Jelle")) {
    document.write("Ik ben blij dat Jelle lid is!");
}

# Oefening 3: Reizen

Maak een nieuwe HTML-pagina met naam oef3_reizen.html. Koppel een extern scriptbestand aan de pagina met naam oef3_reizen.js.

Schrijf een webapplicatie die een reeks reisbestemmingen evalueert en per bestemming de goedkoopste prijs uit een reeks bijhorende prijzen kiest. De array om van te starten zou er als volgt kunnen uitzien:

const reizen = [
    ["Ibiza", [300, 400, 245, 780, 423]],
    ["Mallorca", [500, 550, 600, 720]],
    ["Madeira", [650, 750, 910, 600, 620]],
    ["Kreta", [530, 590, 610, 490, 495]]
]

Laat de applicatie twee lussen uitvoeren (genest): één om elke bestemming te overlopen en één om binnen elke bestemming de prijzen te overlopen. Hou de goedkoopste prijs van een bestemming bij om de volgende uitvoer te tonen:

Goedkoopste reis naar X: Y waarbij X de bestemming is en Y de goedkoopste prijs.

Neem een kijkje naar het gewenste resultaat.

← Lussen - forEach