Week 5 - Arrays en willekeurige keuzes

Arrays (lijsten)#

Wat is een array?
Een array is een lijst met meerdere waardes. In plaats van voor elke waarde een aparte variabele te maken, kun je alles in één lijst stoppen.

Array maken:

let eten = ["pizza", "pasta", "burger", "sushi"];

Een array maak je met vierkante haken [ ] en waardes scheid je met komma's.

Array uitlezen:

let eten = ["pizza", "pasta", "burger", "sushi"];


                console.log(eten[0]); // "pizza"

                console.log(eten[1]); // "pasta"

                console.log(eten[2]); // "burger"

                console.log(eten[3]); // "sushi"

Let op: Arrays beginnen bij 0! Het eerste item is [0], niet [1].

Array lengte#

Met .length kun je zien hoeveel items er in een array zitten.

let kleuren = ["rood", "blauw", "groen"];


                console.log(kleuren.length); // 3

Laatste item pakken:

let kleuren = ["rood", "blauw", "groen"];

                let laatste = kleuren[kleuren.length -
                1];

                console.log(laatste); // "groen"

We doen -1 omdat arrays bij 0 beginnen. Als er 3 items zijn, is het laatste item op index 2.

Math.random (willekeurig getal)#

Wat is Math.random?
Math.random() geeft een willekeurig getal tussen 0 en 1 (bijvoorbeeld 0.7382).

console.log(Math.random()); // bijv. 0.4273819

Random getal tussen 0 en 10:

let random = Math.random() * 10;

                console.log(random); // bijv. 7.382910

Afgerond naar beneden met Math.floor:

let random = Math.floor(Math.random() * 10);

                console.log(random); // bijv. 7 (heel
                        getal)

Math.floor: rondt af naar beneden. Math.floor(7.9) wordt 7.

Random item uit array#

Combineer arrays met Math.random() om een willekeurig item te kiezen.

Stap voor stap:

let eten = ["pizza", "pasta", "burger", "sushi"];


                // Stap 1: Random getal tussen 0 en 4

                let randomIndex = Math.floor(Math.random() * eten.length);


                // Stap 2: Pak item op die index

                let randomEten = eten[randomIndex];


                console.log(randomEten); // bijv.
                        "burger"

In één regel:

let eten = ["pizza", "pasta", "burger", "sushi"];

                let randomEten = eten[Math.floor(Math.random() * eten.length)];

                console.log(randomEten);

Input uitlezen met .value#

Wat is .value?
Met .value kun je tekst uit een input veld halen die de gebruiker heeft getypt.

Verschil tussen element en waarde:

let input = document.getElementById("naamVeld");

                console.log(input); // Dit is het hele HTML
                        element

                console.log(input.value); // Dit is alleen de tekst die de gebruiker typte

Onthoud:

getElementById geeft je het hele element
.value geeft je alleen de tekst erin

Stap voor stap voorbeeld:

HTML:

<input type="text" id="naamVeld" placeholder="Je naam">

                        <button id="verzendKnop">Verzend</button>

                        <p id="resultaat"></p>

JavaScript:

let knop = document.getElementById("verzendKnop");


                        knop.addEventListener("click",
                        begroet);


                        function begroet() {

                          // Stap 1: Pak het input element

                          let inputElement = document.getElementById("naamVeld");

                          

                          // Stap 2: Haal de waarde (tekst) eruit

                          let naam = inputElement.value;

                          

                          // Stap 3: Gebruik de waarde

                          let resultaat = document.getElementById("resultaat");

                          resultaat.innerHTML = "Hallo
                                " + naam + "!";

                        }

Korte versie (in één regel):

function begroet() {

                  // Je kunt het ook in één keer doen:

                  let naam = document.getElementById("naamVeld").value;

                  

                  let resultaat = document.getElementById("resultaat");

                  resultaat.innerHTML = "Hallo "
                + naam + "!";

                }

Controleren of input leeg is:

Gebruikers vergeten vaak iets in te vullen. Daarom moet je altijd checken of de input niet leeg is!

function begroet() {

                  let naam = document.getElementById("naamVeld").value;

                  

                  // Check: is de input leeg?

                  if (naam === "") {

                    alert("Vul een naam
                        in!");

                  } else {

                    let resultaat = document.getElementById("resultaat");

                    resultaat.innerHTML = "Hallo " + naam + "!";

                  }

                }

Waarom is dit belangrijk?

Als de input leeg is, krijg je "Hallo !" zonder naam
Door te checken kun je de gebruiker een duidelijke melding geven
Dit noemen we input validatie

Veelgemaakte fout:

Dit werkt NIET:

let naam = document.getElementById("naamVeld");

                    resultaat.innerHTML = "Hallo " + naam;
                    // ❌ naam is het hele element!

Dit werkt WEL:

let naam = document.getElementById("naamVeld").value;

                    resultaat.innerHTML = "Hallo " + naam;
                    // ✅ naam is de tekst!

Veelgemaakte fouten#

Vergeten dat arrays bij 0 beginnen → array[1] is het tweede item
Math.random zonder Math.floor → krijg je een kommagetal
Vergeten .value te gebruiken → je krijgt het hele element in plaats van de tekst
Niet checken of input leeg is → geeft lege resultaten
array.lenght → moet array.length zijn (geen h!)