Les 5. Interactief met de DOM: HTML-elementen manipuleren met JavaScript

Interactief met de DOM: HTML-elementen manipuleren met JavaScript
1 / 16
volgende
Slide 1: Tekstslide

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

Onderdelen in deze les

Interactief met de DOM: HTML-elementen manipuleren met JavaScript

Slide 1 - Tekstslide

Deze slide heeft geen instructies

Leerdoel
Aan het einde van de les kan je de basisinteracties met de DOM uitleggen en HTML-elementen manipuleren met JavaScript.

Slide 2 - Tekstslide

Deze slide heeft geen instructies

Wat weet je al over het manipuleren van HTML-elementen met JavaScript?

Slide 3 - Woordweb

Deze slide heeft geen instructies

DOM = Document Object Model
Een programmeerinterface voor webdocumenten.
Stelt JavaScript in staat om de structuur, stijl en inhoud van een webpagina te manipuleren
Een boomstructuur van objecten die de pagina representeert


Slide 4 - Tekstslide

Deze slide heeft geen instructies

Html
Boomstructuur

Slide 5 - Tekstslide

Deze slide heeft geen instructies

Zonder de DOM

  • Statische webpagina's 
  • Geen interactie mogelijk
  • Geen dynamische content


Met de DOM
  • Dynamische webpagina's 
  • Interactieve elementen
  • Real-time updates
  • Responsieve interfaces



Slide 6 - Tekstslide

Deze slide heeft geen instructies

Hoe werk je met de DOM
Element selecteren 👆

Element manipuleren 🛠️
Event listeners toevoegen 🎯

Slide 7 - Tekstslide

Deze slide heeft geen instructies

Selecteren van elementen

Slide 8 - Tekstslide

Deze slide heeft geen instructies

Elementattributen wijzigen
JavaScript stelt ons in staat om de attributen van HTML-elementen te bewerken, zoals het veranderen van de tekstinhoud, het toevoegen van klassen of het wijzigen van stijlen.

Slide 9 - Tekstslide

Deze slide heeft geen instructies

Eventlisteners

Slide 10 - Tekstslide

Deze slide heeft geen instructies

Opdracht

Slide 11 - Tekstslide

Deze slide heeft geen instructies

Dom manipulatie

Slide 12 - Tekstslide

Deze slide heeft geen instructies

Samenvatting
De interactie met de DOM en het manipuleren van HTML-elementen met JavaScript stelt ontwikkelaars in staat om dynamische en interactieve webpagina's te creëren.

Slide 13 - Tekstslide

Deze slide heeft geen instructies

Schrijf 3 dingen op die je deze les hebt geleerd.

Slide 14 - 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 15 - 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 16 - 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.