Week 3 - If/else en state | JavaScript Cheatsheet

If/else (keuzes maken)#

Wat is if/else?
Met if/else kan je code laten beslissen wat er moet gebeuren. Als een voorwaarde waar is, doe je het ene. Anders doe je iets anders.

Basis voorbeeld:

let leeftijd = 17;


                    if (leeftijd >= 18) {

                      console.log("Je mag
                        stemmen!");

                    } else {

                      console.log("Je mag nog niet
                        stemmen");

                    }

Wat gebeurt er?

Check: Is leeftijd groter of gelijk aan 18?
Ja? → Voer code tussen eerste { } uit
Nee? → Voer code tussen else { } uit

Vergelijk operators#

Operators die je kunt gebruiken:

=== → is precies gelijk aan
!== → is niet gelijk aan
> → groter dan
< → kleiner dan
>= → groter dan of gelijk aan
<= → kleiner dan of gelijk aan

Voorbeelden:

// Boolean controleren

                    let aanwezigheid = true;


                    if (aanwezigheid === true) {

                      console.log("Fijn dat je er
                        bent!");

                    } else {

                      console.log("We missen je op
                        school");

                    }


                    // Stemgerechtigd ja/nee

                    let leeftijd = 20;


                    if (leeftijd >= 18) {

                      alert("Je mag stemmen!");

                    } else {

                      alert("Je bent nog te jong om te
                        stemmen");

                    }

Let op: Gebruik === (3 is-tekens) in plaats van == (2 is-tekens). Dit voorkomt fouten.

Waarom?

== controleert alleen de waarde
=== controleert waarde EN datatype

Voorbeeld:

"3" == 3 // true
                            (JavaScript maakt automatisch van "3" het getal 3)

                        "3" === 3 // false
                            (string is niet hetzelfde als number)

Conclusie: Gebruik altijd === omdat het betrouwbaarder is en bugs voorkomt.

State (geheugen in je app)#

Wat is state?
State is een variabele die onthoudt wat er gebeurt in je app. Bijvoorbeeld: hoevaak heb je de knop al geklikt? Die waarde moet ergens worden opgeslagen.

Simpele teller:

// State: onthoud hoeveel keer er geklikt is

                    let teller = 0;


                    function klik() {

                      teller = teller + 1; // of:
                        teller++;

                      console.log(teller);

                    }

💡 Tip: teller++ is hetzelfde als teller = teller + 1

DOM aanpassen met variabele waarde#

Je kunt de waarde van een variabele direct in de HTML zetten:

let score = 42;

                    let naam = "Lisa";


                    // Zet de waarde in HTML

                    document.getElementById("score").innerHTML = score;

                    document.getElementById("naam").innerHTML = naam;


                    // Of gecombineerd:

                    document.getElementById("resultaat").innerHTML = naam + " heeft " + score + " punten!";

Veelgemaakte fouten#

if (leeftijd = 18) → if (leeftijd === 18) (gebruik === voor vergelijken!)
Vergeten om state variabele buiten functie te zetten → werkt niet!
if (leeftijd >= 18) zonder { } → gebruik altijd haakjes!
Vergeten om innerHTML bij te werken → gebruiker ziet niks