Ontdek het Document Object Model in JavaScript

 Document Object Model in JavaScript
1 / 15
next
Slide 1: Slide
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

This lesson contains 15 slides, with interactive quizzes and text slides.

time-iconLesson duration is: 45 min

Items in this lesson

 Document Object Model in JavaScript

Slide 1 - Slide

This item has no instructions

Waar aan denk je als je Document Object Model hoort

Slide 2 - Mind map

This item has no instructions

Leerdoelen
1. Het DOM uitleggen 
2. DOM-elementen selecteren en manipuleren met JavaScript 
3. Events en event listeners toepassen op DOM-elementen

Slide 3 - Slide

Dit is een goede plek om de leerdoelen van de les te delen.
Wat is het DOM?
Het Document Object Model (DOM) is een programmeerinterface voor HTML- en XML-documenten. Het vertegenwoordigt de pagina, zodat programma's zoals JavaScript de structuur, stijl en inhoud van de pagina kunnen wijzigen.

Slide 4 - Slide

Hier legt de leraar uit wat het DOM is en waarom het belangrijk is voor het ontwikkelen van webpagina's.
DOM-elementen selecteren
De 'document' variabele en verschillende methoden zoals getElementById, getElementsByClassName en querySelector.

Slide 5 - Slide

Hier laat de leraar verschillende manieren zien om DOM-elementen te selecteren met JavaScript.
DOM-elementen manipuleren
Stijl en attributen van DOM-elementen wijzigen met behulp van methoden zoals innerHTML, style en setAttribute.

Slide 6 - Slide

Hier laat de leraar zien hoe je de inhoud, stijl en attributen van DOM-elementen kunt wijzigen met JavaScript.
Hoe kan ik een element van kleur veranderen met JS?

A
Style.Color==red
B
Style.color="red"
C
Color =="red"
D
Color=red

Slide 7 - Quiz

This item has no instructions

Events en event listeners
Events zijn acties die worden uitgevoerd door de gebruiker of de browser, zoals klikken op een knop. JavaScript kan reageren op deze events door event listeners toe te passen op DOM-elementen.

Slide 8 - Slide

Hier legt de leraar uit wat events zijn en hoe je event listeners kunt toepassen op DOM-elementen.
Welke andere User events kan je bedenken

Slide 9 - Open question

This item has no instructions

Voorbeeld: Verander achtergrondkleur
In dit voorbeeld gebruiken we JavaScript om de achtergrondkleur van een HTML-element te veranderen wanneer erop wordt geklikt.

Slide 10 - Slide

Hier laat de leraar een interactief voorbeeld zien van hoe het DOM kan worden gemanipuleerd met JavaScript.
Oefening: Maak een interactieve knop
Gebruik JavaScript om een knop te maken die de tekst van een HTML-element verandert wanneer erop wordt geklikt.

Slide 11 - Slide

Hier geeft de leraar een oefening om de studenten de kans te geven hun vaardigheden met het DOM en JavaScript te oefenen.
Samenvatting
Het DOM is een belangrijk concept voor het ontwikkelen van webpagina's met JavaScript. Het stelt ontwikkelaars in staat om de structuur, stijl en inhoud van een pagina te manipuleren.

Slide 12 - Slide

Dit is een goede plek om de belangrijkste punten van de les samen te vatten en te benadrukken waarom het DOM belangrijk is.
Schrijf 3 dingen op die je deze les hebt geleerd.

Slide 13 - Open question

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 14 - Open question

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 15 - Open question

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.