Les 5. Interactieve en Dynamische Elementen met JavaScript

Interactieve en Dynamische Elementen met JavaScript
1 / 13
volgende
Slide 1: Tekstslide

In deze les zitten 13 slides, met interactieve quizzen en tekstslides.

Onderdelen in deze les

Interactieve en Dynamische Elementen met JavaScript

Slide 1 - Tekstslide

Deze slide heeft geen instructies

Leerdoelen
Aan het einde van de les kunnen studenten JavaScript gebruiken om de stijl van HTML-elementen te veranderen en eenvoudige interacties en dynamische elementen creëren.

Slide 2 - Tekstslide

Deze slide heeft geen instructies

Wat weet je al over het gebruik van JavaScript voor het veranderen van HTML-elementen?

Slide 3 - Woordweb

Deze slide heeft geen instructies

Inhoud
  • CSS-stijlen veranderen met JavaScript: element.style
  • Klassen toevoegen en verwijderen: classList.add, classList.remove, classList.toggle
  • Eenvoudige animaties en effecten

Slide 4 - Tekstslide

Deze slide heeft geen instructies

Veranderen van stijl
Met JavaScript kunnen we de stijl van HTML-elementen veranderen door eigenschappen zoals kleur, grootte en positie aan te passen.

Slide 5 - Tekstslide

Deze slide heeft geen instructies

Event Listeners
Event listeners in JavaScript stellen ons in staat om te reageren op interacties zoals klikken, hoveren en invoer van gebruikers.

Slide 6 - Tekstslide

Deze slide heeft geen instructies

Dynamische elementen
Met JavaScript kunnen we dynamische elementen creëren die reageren op gebruikersinteracties en veranderingen in de webpagina.

Slide 7 - Tekstslide

Deze slide heeft geen instructies

Praktische voorbeelden
Laten we praktische voorbeelden bekijken van hoe JavaScript gebruikt kan worden om interactieve en dynamische elementen op een webpagina te maken.

Slide 8 - Tekstslide

Deze slide heeft geen instructies

Oefeningen
Nu is het tijd om zelf aan de slag te gaan! Probeer eenvoudige interacties en dynamische elementen te creëren met JavaScript.

Slide 9 - Tekstslide

Deze slide heeft geen instructies

Samenvatting
We hebben geleerd hoe JavaScript kan worden gebruikt om de stijl van HTML-elementen te veranderen en interactieve, dynamische elementen te creëren.

Slide 10 - Tekstslide

Deze slide heeft geen instructies

Schrijf 3 dingen op die je deze les hebt geleerd.

Slide 11 - Open vraag

De leerlingen voeren hier drie dingen in die ze in deze les hebben geleerd. Hiermee geven ze aan wat hun eigen leerrendement van deze les is.
Schrijf 2 dingen op waarover je meer wilt weten.

Slide 12 - Open vraag

De leerlingen voeren hier twee dingen in waarover ze meer zouden willen weten. Hiermee vergroot je niet alleen betrokkenheid, maar geef je hen ook meer eigenaarschap.
Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.

Slide 13 - Open vraag

De leerlingen geven hier (in vraagvorm) aan met welk onderdeel van de stof ze nog moeite. Voor de docent biedt dit niet alleen inzicht in de mate waarin de stof de leerlingen begrijpen/beheersen, maar ook een goed startpunt voor een volgende les.