JavaScript Basis – Week 3
Hoe staan we erin vandaag?
Lesson duration is: 60 minItems in this lesson
Hoe staan we erin vandaag?
This item has no instructions
JavaScript Basis – Week 3 Beslissingen met JavaScript
Open met de koppeling naar week 2: toen rekenden studenten met variabelen en input, deze week gebruiken ze die waarden om keuzes te maken in code.
Lesdoel
Aan het eind van de les kan de student vergelijkingen maken met:
`>` `<`, `>=`, `<=`, `===` en `!==`, begrijpen dat die `true` of `false` opleveren, en met `if`, `if/else` en `else if` automatisch beslissingen laten maken op basis van input.
This item has no instructions
Welke woorden koppel jij aan true, false en if/else?
Gebruik de opbrengst om voorkennis te activeren. Verwachte woorden: waar, onwaar, keuze, vergelijken, ja/nee, route, beslissing, boolean.
Terugblik op week 2
Vorige week gebruikten we variabelen en operators om te rekenen:
let attack = 30;
let defense = 20;
let totalPower = attack + defense;
console.log(totalPower);
Benadruk dat dit bekende code is: waarden opslaan, optellen en loggen. Vandaag komt daar beslislogica bovenop.
Van rekenen naar vergelijken
Nu stellen we een andere soort vraag aan JavaScript:
console.log(attack > defense);
De computer rekent nu niet uit hoeveel groter iets is, maar controleert of de uitspraak klopt.
Laat studenten eerst mentaal voorspellen wat er verschijnt met attack 30 en defense 20. Nog geen antwoord op de slide zetten.
Vergelijking geeft een boolean
Een vergelijking levert een boolean op: `true` of `false`.
let health = 100;
console.log(health > 50);
Omdat 100 groter is dan 50, is de uitkomst `true`.
Gebruik hier het woord boolean bewust als nieuw begrip: geen getal, maar een waar/onwaar-uitkomst.
Vergelijkingsoperators
Nog twee belangrijke
`>` - groter dan
`<` - kleiner dan
`>=` - groter dan of gelijk aan
Basissymbolen
`<=` - kleiner dan of gelijk aan
`===` - gelijk aan
`!==` - niet gelijk aan
Houd het eenvoudig: alleen betekenis en gebruik. Nog niet uitweiden naar type coercion of ==.
Predict–Run–Check
Voorspel eerst de uitkomsten, voer daarna uit en controleer:
let level = 5;
console.log(level > 3);
console.log(level < 3);
console.log(level === 5);
console.log(level !== 5);
Docentenantwoord voor later: true, false, true, false. Laat studenten eerst redeneren per regel.
let attack=50; let defense =20;
Wat verschijnt bij console.log(attack > defense)?
30
20
true
false
Sluit aan op slide 3 met attack = 30 en defense = 20. Veelgemaakte fout: denken dat de uitkomst een getal is in plaats van een boolean.
Van vergelijking naar boolean
Een vergelijking met > of === geeft geen getal terug, maar een boolean. Die uitkomst is true of false.
Controleert of studenten de basislijn snappen: operator → vergelijking → boolean → true/false.
if: alleen uitvoeren bij true
Met `if` voer je code alleen uit als de vergelijking `true` is.
if (health < 50) {
console.log("Healing nodig");
}
Is de voorwaarde `false`, dan gebeurt er niets.
Bespreek mondeling wat er gebeurt bij health = 80: de boodschap verschijnt niet, omdat 80 < 50 false is.
if/else: twee routes
Met `else` krijgt je code altijd een alternatief:
if (health < 50) {
console.log("Healing nodig");
} else {
console.log("Je bent gezond");
}
Benadruk dat er nu altijd precies één route wordt gekozen.
Voorbeeld: aanval of verdediging
De vergelijking bepaalt welke route de code neemt:
let attack = 70;
let defense = 40;
if (attack > defense) {
console.log("Aanvallend");
} else {
console.log("Verdedigend");
}
Laat studenten de route voorspellen voordat je de uitkomst bespreekt.
else if: meer dan twee keuzes
Met `else if` kun je meerdere routes maken:
if (power >= 80) {
console.log("Sterk");
} else if (power >= 50) {
console.log("Gemiddeld");
} else {
console.log("Zwak");
}
Koppel dit aan echte programma's: één invoerwaarde kan in verschillende categorieën vallen.
Volgorde in else if
Bij `power = 75` controleert JavaScript van boven naar beneden:
`power >= 80` → `false`
`power >= 50` → `true`
resultaat → `Gemiddeld`
Zodra een voorwaarde `true` is, stopt de keten.
Dit is een belangrijk denkpunt: de volgorde van voorwaarden bepaalt de uitkomst.
Wat gebeurt er bij health = 80 in deze if?
if (health >= 80) {
console.log("Je bent gezond");
} else if (health>= 50) {
console.log("healing nodig");
} else {
console.log("heal onmiddelijk");
}
Healing nodig
Er gebeurt niets
Je bent gezond
health wordt 50
Verwijst naar slide 7. Bij een losse if zonder else gebeurt er niets als de voorwaarde false is.
Routes in beslissingen
Met if voer je code alleen uit als de voorwaarde true is. Met else krijgt je code een andere route. Met else if maak je meer dan twee keuzes.
Echoot slides 7 t/m 11 en laat studenten de structuurtaal actief invullen.
Waarom wordt health= 75 dan Gemiddeld?
Bespreek dat JavaScript van boven naar beneden controleert en stopt bij de eerste true-voorwaarde. Bij power = 75 is >=80 false en >=50 true, dus Gemiddeld.
Het verschil tussen = en ===
=
Wijst een waarde toe aan een variabele.
Voorbeeld: `let health = 50;`
===
Vergelijkt twee waarden.
Voorbeeld: `health === 50`
Maak expliciet dat dit een veelgemaakte beginnersfout is. Houd het bij = en ===; bespreek geen andere gelijkheidsoperators.
Fout zoeken in een if
In deze code staat een fout:
if (health = 50) {
console.log("Health is 50");
}
In een `if` wil je vergelijken, niet toewijzen.
Laat de fout mondeling verklaren en corrigeren naar health === 50. Dit hoeft niet op de studentenslide te staan, zodat studenten zelf kunnen nadenken.
Oefening: Health Status
Maak drie categorieën met `else if`:
`health >= 70` → `Gezond`
`health >= 30` → `Gewond`
anders → `Kritiek`
Test daarna met: `100`, `70`, `69`, `30`, `29` en `0`.
De verwachte indeling komt later terug. Leg nu de nadruk op denken in grenzen en routes.
Grenswaarden zijn extra belangrijk
Bij categorieën zitten fouten vaak rond de grens:
`70` → `Gezond`
`69` → `Gewond`
`30` → `Gewond`
`29` → `Kritiek`
Controleer daarom altijd waarden net boven, op en net onder de grens.
Benadruk boundary testing als programmeergewoonte, passend bij beginnersniveau.
Koppeling met HTML-input
De keten uit week 2 en deze week samen:
HTML-input → `.value` → `Number()` → variabele → vergelijking → `if/else` → resultaat
Zo gebruik je invoer van een gebruiker om automatisch een beslissing te laten maken.
Herhaal dat .value tekst oplevert en dat Number() nodig is als je numeriek wilt vergelijken.
Welke operator controleert strikte gelijkheid?
=
=>
===
==>
Kennischeck uit de lesvraag. Let op verwarring tussen toewijzen en vergelijken.
Health Status en grenzen
Bij Health Status geldt: vanaf 70 is de status Gezond. Vanaf 30 is de status Gewond. Daaronder is de status Kritiek. Daarom test je extra goed rond de grenswaarden.
Sluit aan op slides 14 t/m 16. Focus op grenswaarden en categorieën.
health = 60; health >= 50 geeft?
60
true
false
"true"
Echte kennischeck uit de docentvraag. Bespreek verschil tussen boolean true en de tekst "true".
Eindopdracht: Character Analyzer
Gebruik invoer voor:
`naam`
`health`
`attack`
`defense`
Bepaal daarna de health-status en vergelijk `attack` met `defense` om `Aanvallend` of `Verdedigend` te tonen.
Houd de opdracht klein en duidelijk: geen extra features, alleen toepassen van input, vergelijken en if-structuren.
Handige controle als iets niet werkt
Controleer je waarden
Controleer je code
Let op haakjes en accolades
`=` is toewijzen
`===` is vergelijken
Gebruik `console.log()` bij variabelen
Controleer `Number()`
Kijk naar `>`, `>=` en `===`
Dit is de WHHTK-hulp uit de input, maar zonder interne afkorting op de slide. Houd het praktisch en direct toepasbaar.
Extra uitdaging
Voeg een extra categorie toe:
`attack > 70` → `Warrior`
`defense > 70` → `Tank`
anders → `Adventurer`
Dit is opnieuw een voorbeeld van meerdere routes met `if/else if/else`.
Alleen als de basis lukt. Geen complexere JavaScript-onderwerpen toevoegen.
Samenvatting
Een vergelijking geeft `true` of `false`
`if` voert code uit bij `true`
`else` is de andere route
`else if` geeft meerdere routes
`===` vergelijkt en `=` wijst toe
Volgende week: functies
Gebruik dit als korte terugblik op de centrale lijn van de les: van invoer naar automatische beslissingen.
Wat is de juiste volgorde vanaf HTML-input?
.value → Number() → variabele → vergelijking → if/else
Number() → .value → if/else → variabele → vergelijking
variabele → if/else → .value → Number() → vergelijking
vergelijking → .value → Number() → variabele → if/else
Toetst de keten van slide 16 en de koppeling met week 2.
attack = 30 en defense = 50. Wat verschijnt?
Aanvallend
false
niets
Verdedigend
Echte kennischeck uit de docentvraag. Omdat attack > defense false is, gaat de else-route lopen.
Wat is één ding dat jij vandaag hebt geleerd?
Laat studenten kort terugkijken op hun leerproces. Mogelijke elementen: vergelijkingen, true/false, if/else, else if, input gebruiken voor beslissingen.
Welk onderdeel hielp jou het meest om dit te snappen?
Gebruik antwoorden om te zien welke didactische stap werkte: voorspellen, code lezen, voorbeelden, grenswaarden of input-keten.
Welk onderdeel vond jij nog lastig?
Gebruik dit als formatieve check voor de volgende les of extra uitleg. Verwachte thema's: = of ===, grenswaarden, else if-volgorde, Number().
Begrippenlijst
boolean - Een waarde die alleen `true` of `false` kan zijn.
vergelijking - Een controle of twee waarden groter, kleiner, gelijk of ongelijk zijn.
if - Een instructie die code uitvoert als een voorwaarde `true` is.
else - Het alternatief dat draait als de `if`-voorwaarde `false` is.
else if - Een extra voorwaarde voor een volgende mogelijke route.
toewijzen - Een waarde in een variabele zetten met `=`.
vergelijken - Controleren of een uitspraak klopt, bijvoorbeeld met `===` of `>`.
This item has no instructions
