JavaScript_Week6_Events_Interactie

• newEditor
• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 1

Hoe staan we erin vandaag?

INPUT

CLICK

JAVASCRIPT

HERO CARD

↓

↓

↓

Week 6

Events & Interactie

Maak je Hero Card interactief

Lesdoelen

Aan het eind van de les kan de student:

• Uitleggen wat een event is.

• Reageren op een klik met addEventListener().

• Input uitlezen wanneer de gebruiker klikt.

• Bestaande functies gebruiken binnen een event.

• De Hero Card bijwerken met textContent en classList.

Terugblik: de bouwstenen

Vandaag verbinden we alles met een gebruikersactie.

Week 1 – variabelen en datatypes

Week 2 – input, .value, Number() en rekenen

Week 3 – vergelijken en if/else

Week 4 – functies, parameters en return

Week 5 – DOM: querySelector(), textContent en classList

De programmeerketen

INPUT

→

KLIK

→

WAARDE

→

FUNCTIES

→

DOM

→

HERO CARD

Wat is een event?

Een event is iets dat op de webpagina gebeurt.

Voorbeelden: klikken, typen of een waarde veranderen.

Deze week gebruiken we alleen het click-event.

JavaScript kan luisteren naar een event en daarna code uitvoeren.

Eerste click-event

const createButton = document.querySelector("#createButton");

createButton.addEventListener("click", function () {
console.log("De knop is aangeklikt!");
});

Lees de code

1. querySelector() zoekt de knop.

2. addEventListener() luistert naar een gebeurtenis.

3. "click" is de gebeurtenis waarop we wachten.

4. De functie tussen { } wordt uitgevoerd na de klik.

Korte oefening 1

5 minuten – werk eerst zelfstandig, vergelijk daarna met je buur.

1. Maak een button met id createButton.

2. Selecteer de knop met querySelector().

3. Voeg een click-event toe.

4. Laat na iedere klik “Hero wordt gemaakt” in de console verschijnen.

Input uitlezen na de klik

createButton.addEventListener("click", function () {
let characterName = nameInput.value;
let health = Number(healthInput.value);

console.log(characterName);
console.log(health);
});

Waarom staat .value in het event?

1. De gebruiker vult eerst iets in.

2. Daarna klikt de gebruiker op de knop.

3. Op dat moment lezen we de actuele waarde uit.

4. Number() blijft nodig voor waarden waarmee we rekenen.

Korte oefening 2

Controle: verander de naam en klik opnieuw. Verandert de kaart mee?

1. Maak een input voor de naam van het character.

2. Maak een knop.

3. Lees nameInput.value pas uit na de klik.

4. Zet de ingevoerde naam met textContent op de Hero Card.

Gebruik je functies uit week 4

let power = calculatePower(attack, defense);
let status = checkHealth(health);
let playstyle = determinePlaystyle(attack, defense);
let rank = determineRank(power);

Werk daarna de DOM bij

nameOutput.textContent = characterName;
powerOutput.textContent = power;
statusOutput.textContent = status;
rankOutput.textContent = rank;

Statuskleur bijwerken

Hier combineer je week 3 en week 5.

Verwijder eerst oude statusclasses.

Gebruik daarna if/else om de juiste class toe te voegen.

Gezond → healthy

Gewond → wounded

Kritiek → critical

Hoofdopdracht – interactieve Hero Card

Voeg inputs toe voor naam, class, health, attack en defense.

Voeg een knop “Maak Hero” toe.

Lees alle waarden uit na de klik.

Gebruik je vier bestaande functies.

Toon alle resultaten op de Hero Card.

Pas de statusclass van de kaart aan.

Test je applicatie

Nova: 85 / 80 / 50 → Gezond, Aanvallend, A-Rank

Mira: 50 / 40 / 70 → Gewond, Verdedigend, A-Rank

Rex: 20 / 30 / 20 → Kritiek, Aanvallend, C-Rank

Test daarna minimaal één eigen combinatie.

Als je vastloopt

1. Werkt de knop? Test met console.log().

2. Vindt querySelector() het element? Controleer op null.

3. Kloppen de .value-resultaten? Log ze.

4. Gebruik je Number() bij getallen?

5. Geven je functies het verwachte resultaat terug?

6. Pas daarna de DOM aan.

Differentiatie

Iedereen werkt aan hetzelfde eindproduct; de route verschilt.

Extra ondersteuning: laat eerst alleen naam → klik → Hero Card werken.

Basis: maak de volledige interactieve Hero Card.

Verdieping: voeg een Reset-knop toe of controleer lege invoer met if/else.

Kennischeck

Wat doet addEventListener()?

Waarom gebruiken we "click"?

Waarom staat .value binnen het event?

Wanneer is Number() nodig?

Wat is het verschil tussen een event en een functie?

Exitvraag

Bewaar je project: dit is de basis voor je eindpresentatie.

Leg de hele keten in je eigen woorden uit:

Gebruiker → klik → input → JavaScript → functies → DOM → Hero Card

Kun jij één functie aanwijzen en vertellen wat erin gaat en wat eruit komt?