This lesson contains 15 slides, with interactive quizzes and text slides.
Lesson 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.