Labo 17 - DOM
Zorg dat je de volgende folder structuur volgt:
webtechnologie/
├─ labo-x/
│ ├─ oefening-01/
│ │ ├─ index.html
│ │ ├─ assets/
│ │ │ ├─ image-1.jpg
│ │ │ ├─ data.json
│ │ ├─ css/
│ │ │ ├─ reset.css
│ │ │ ├─ style.css
│ │ ├─ js/
│ │ │ ├─ script.js
│ ├─ oefening-02/
│ ├─ oefening-n/
├─ labo-y/
├─ labo-z/ Gebruik steeds JS modules om globale variabelen te vermijden (
<script type="module" src="./path/to/script.js" defer></script>)Zet je Javascript file steeds in strict mode (
"use strict");Volg de Coding Guidelines
oefening 1: tekst plaatsen
leerdoelen
een HTML-element selecteren o.b.v. id
de inhoud van een HTML-element wijzigen
functionele analyse
Jouw programma gaat de titel op een website aanpassen naar de inhoud van een variabele
technische analyse
In jouw HTML voorzie je een h1-element met als tekst "Hello world!".
Plaats in jouw code de tekst "Welkom op onze website" in een const. Gebruik deze const om de h1 op de website aan te passen.
voorbeeldinteractie
Oefening 2: Attributen lezen
Leerdoelen
Een HTML-element selecteren op basis van id
Attributen van een HTML-element lezen
Functionele analyse
Lees de waarde van het "src"-attribuut van een afbeelding en toon deze in de console.
Technische analyse
Voeg in jouw HTML een img-element toe met een id, bijvoorbeeld "myImage", en een standaardbron, bijvoorbeeld "afbeelding.png".
In jouw JavaScript-code, selecteer dit img-element op basis van het id "myImage" en lees de waarde van het "src"-attribuut. Toon deze waarde vervolgens in de console.
voorbeeldinteractie
oefening 3: attributen wijzigen
leerdoelen
een HTML-element selecteren op basis van tag
attributen van een HTML-element wijzigen
functionele analyse
Je moet de bron van een afbeelding wijzigen op basis van een variabele.
technische analyse
In jouw HTML heb je een img-element met een id "myImage" en een standaardbron, bijvoorbeeld "afbeelding.png".
Maak in jouw JavaScript-code een variabele met de naam newSource en wijs hieraan een nieuwe afbeeldings-URL toe.
Selecteer het img-element op de pagina op basis van het id "myImage" en wijzig het attribuut "src" naar de waarde van de variabele newSource. Zo moet de afbeelding op de website veranderen afhankelijk van de nieuwe bron die je hebt opgegeven.
voorbeeldinteractie
oefening 4: stijlen aanpassen
leerdoelen
een HTML-element selecteren op basis van id
stijlen van een HTML-element wijzigen
functionele analyse
Pas de tekstkleur van een alinea aan op basis van een variabele.
technische analyse
Voeg in jouw HTML een paar p-elementen toe met verschillende tekstinhoud en verschillende klasses, bijvoorbeeld .red.
Maak een variabele met de naam red en wijs hieraan een kleurwaarde toe, bijvoorbeeld "rood".
Selecteer de p-elementen op de pagina op basis van de klasse en pas de tekstkleur aan naar de waarde van de variabele. Hierdoor moeten de paragrafen een nieuwe tekstkleur hebben.
voorbeeldinteractie
oefening 5: elementen verwijderen
leerdoelen
bestaande HTML-elementen verwijderen
functionele analyse
Verwijder een item uit een lijst.
technische analyse
In jouw HTML, creëer een ongeordende lijst (ul) met enkele lijstitems (li).
Selecteer een bestaand lijstitem (je kunt bijvoorbeeld het eerste lijstitem selecteren) en verwijder dit item uit de lijst.
voorbeeldinteractie
oefening 6: tekstinhoud lezen
Leerdoelen
Een HTML-element selecteren op basis van tag
De inhoud van een HTML-element lezen
Functionele analyse
Lees de tekstinhoud van een paragraaf en toon deze in de console.
Technische analyse
Voeg in jouw HTML een p-element toe met wat tekstinhoud.
In jouw JavaScript-code, selecteer dit p-element op basis van de tag en lees de tekstinhoud ervan. Toon deze tekst vervolgens in de console.
voorbeeldinteractie
oefening 7: stijlen lezen
Leerdoelen
Een HTML-element selecteren op basis van id
Stijlinformatie van een HTML-element lezen
Functionele analyse
Lees de achtergrondkleur van een div-element met een specifieke id en toon deze in de console.
Technische analyse
Voeg in jouw HTML een div-element toe met een id, bijvoorbeeld bg-grey, en pas wat stijlen toe, zoals achtergrondkleur.
In jouw JavaScript-code, selecteer dit div-element op basis van de id en lees de achtergrondkleur. Toon deze kleur vervolgens in de console.
voorbeeldinteractie
oefening 8: elementen toevoegen
Leerdoelen
Nieuwe HTML-elementen maken
Bestaande HTML-elementen wijzigen
Functionele analyse
Voeg een nieuw item toe aan een lijst.
Technische analyse
In jouw HTML, creëer een ongeordende lijst (ul) met enkele lijstitems (li).
In jouw JavaScript-code, maak een nieuw li-element aan met de tekst "Nieuw Item" en voeg dit toe aan de bestaande ul. Toon het resultaat in de console.
Deze oefening laat zien hoe je dynamisch nieuwe elementen aan een pagina kunt toevoegen.
voorbeeldinteractie
Last updated