DOM manipulation opdrachten
Opdracht 1, kleur aanpassen (via id)
Je hebt de volgende HTML/JS-code.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Tekstkleur Veranderen</title>
</head>
<body>
<p id="tekst">Dit is een voorbeeldtekst.</p>
<button onclick="veranderKleur()">Verander Kleur</button>
<script>
function veranderKleur() {
// maak de code af en plaats hieronder de code die de kleur van de tekst verandert
...
}
</script>
</body>
</html>De JavaScript-functie wordt aangeroepen vanuit de onclick attribuut van de HTML-knop.
Wanneer de knop wordt ingedrukt, moet de kleur van de tekst in het paragraafelement veranderen. Maak hiervoor het script af.
Zorg dat je in het script zoekt naar het element met het id "tekst". Als je het element hebt gevonden dan kan je de daarna de kleur aanpassen.
Inleveren
Zet jouw naam als commentaar in de JS-code en lever het geteste en werkende script in.
Opdracht 2, kleur aanpassen (via class)
Je hebt de volgende HTML/JS-code:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Achtergrondkleur Veranderen</title>
</head>
<body>
<p class="kleurVerander">Dit is een voorbeeldtekst 1.</p>
<p class="kleurVerander">Dit is een voorbeeldtekst 2.</p>
<p class="kleurVeranderNiet">Dit is een voorbeeldtekst 3.</p>
<p class="kleurVerander">Dit is een voorbeeldtekst 4.</p>
<button onclick="veranderAchtergrondKleur()">Verander Achtergrondkleur</button>
<script>
function veranderAchtergrondKleur() {
// maak de code af en plaats hieronder de code die de kleur van de tekst met de class kleurVerander verandert
...
}
</script>
</body>
</html>De JavaScript-functie wordt aangeroepen vanuit de onclick attribuut van de HTML-knop.
Wanneer de knop wordt ingedrukt, moet de kleur van de tekst in alle paragraafelement met de class kleurVerander veranderen. Maak hiervoor het script af.
Maak gebruik van document.getElementsByClassName en gebruik een for-loop.
Denk erom dat document.getElementsByClassName een array met elementen terug geeft en dat je met de loop door het array moet heenlopen.
Bedek zelf een mooie kleur.
Inleveren
Zet jouw naam als commentaar in de JS-code en lever het geteste en werkende script in.
Opdracht 3, stijl toggle
Je hebt de volgende HTML/JS-code:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Tekststijl Veranderen</title>
</head>
<body>
<h1>Dit is een koptekst</h1>
<p>Dit is een gewone paragraaf.</p>
<p class="speciaal">Dit is een speciale paragraaf.</p>
<div>Dit is een div element.</div>
<p class="speciaal">Nog een speciale paragraaf.</p>
<p id="speciaal">Nog een speciale paragraaf.</p>
<button onclick="veranderTekstStijl()">Verander Tekststijl</button>
<script>
function veranderTekstStijl() {
var elementen = document.querySelectorAll(........);
for (......) {
// Maak de elementen green, bold, and italic (schuingedrukt)
}
</script>
</body>
</html>Vul de code aan op de puntje en zorg ervoor dat zodra op de knop wordt gedrukt:
- alle elementen met de class speciaal groen, vet en schuingedrukt worden.
Als er weer op de knop wordt gedrukt dan worden:
- alle elementen met de class speciaal worden weer zwarte, niet vet en niet schuingedrukt.
De knop wisselt dus telkens de stijl alle tekst met de class speciaal.
Inleveren
Zet jouw naam als commentaar in de JS-code en lever het geteste en werkende script in.
Opdracht 4, counter
Bekijk het volgende voorbeeld.
<div id="nummerDiv">123</div>
<button onclick="toonGetal()">Toon Getal</button>
<script>
function toonGetal() {
var divElement = document.getElementById('nummerDiv');
var getal = divElement.innerText; // Lees de tekst (in dit geval een getal) uit de div
alert("Het getal in de div is: " + getal);
}
</script>Probeer te begrijpen wat er gebeurt en test de code om te kijken of je snapt wat er gebeurt!
Opdracht
- maak een extra button
- als je op de button druk dan roep je een javaScript funcite aan (bedenk zelf een naam voor de functie).
- met een console.log druk je de waarde af die in de div staat; in dit voorbeeld dus 123.
- tel 1 op bij het getal en druk dit getal ook af met een console.log. In dit voorbeeld is dat dus 124.
Als je in JS een getal bij een getal optelt met + dan 'denkt' JS standaard dat je een string hebt. Dan wordt 1+1 dus 11 en niet 2! Om dit te voorkomen moet je aangeven dat je geen string maar een integer hebt.
Dit doe je met parseInt(string).
Dus parseInt(getal) + 1 wordt dan 2.
Dus, stel getal = 1
getal + 1 wordt 11 en
parseInt(getal) + 1 wordt 2 - dan zet je het getal (in dit voorbeeld dus 124) terug in de div.
Als jet goed is, heb je nu een div met een getal en telkens als je op de knop druk wordt het getal opgehoogd.
Inleveren
Zet jouw naam als commentaar in de JS-code en lever het geteste en werkende script in.
Opdracht 5, Ronde teller
Maak een interactieve webpagina met een tabel die schaatsers en hun rondeteller weergeeft.
De gebruiker kan het aantal ronden voor elke schaatser verhogen door op de teller in de tabel te klikken.
Begin met deze HTML/CSS-code:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Schaatser Ronde Teller</title>
<style>
table {
width: 50%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
td.rondes {
cursor: pointer;
background-color: #e6ffe6;
}
td.rondes:hover {
background-color: #ccffcc;
}
</style>
</head>
<body>
<table>
<tr>
<th>Schaatser</th>
<th>Aantal Rondes</th>
</tr>
<tr>
<td>JanMo JansenMot</td>
<td class="rondes" onclick="verhoogRondes(this)">0</td>
</tr>
<tr>
<td>PietAyoub PietersenAllemaal</td>
<td class="rondes" onclick="verhoogRondes(this)">0</td>
</tr>
<tr>
<td>Klaas KlaassenKaas</td>
<td class="rondes" onclick="verhoogRondes(this)">0</td>
</tr>
<tr>
<td>ElsGoedele ElsenGoedgeluk</td>
<td class="rondes" onclick="verhoogRondes(this)">0</td>
</tr>
<tr>
<td>SofieRoos SmitRommelhuis</td>
<td class="rondes" onclick="verhoogRondes(this)">0</td>
</tr>
<tr>
<td>Lars LarsenLeeghoofd</td>
<td class="rondes" onclick="verhoogRondes(this)">0</td>
</tr>
</table>
</body>
</html>
Maak de code af en maak een script waarbij als je op het ronde nummer drukt, de ronde met een wordt verhoogd. Denk aan het gebruik van parseInt (vorige opdracht).
Inleveren
Zet jouw naam als commentaar in de JS-code en lever het geteste en werkende script in.
Opdracht 6,
Opdracht 10 (extra)
Je krijgt een eenvoudige HTML-pagina met een invoerveld voor de geboortedatum, een knop, en een leeg element waar een persoonlijke groet zal verschijnen. Jouw taak is om JavaScript te schrijven dat het volgende doet:
- Wanneer de gebruiker op de knop klikt, lees de ingevoerde geboortedatum uit het invoerveld.
- Bereken de leeftijd van de gebruiker op basis van de huidige datum en de ingevoerde geboortedatum.
- Genereer een persoonlijke groet die de leeftijd van de gebruiker bevat en toon dit in het lege element op de pagina.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Persoonlijke Groet</title>
</head>
<body>
<h1>Welkom!</h1>
<div>
<label for="birthdate">Voer je geboortedatum in (YYYY-MM-DD):</label>
<input type="date" id="birthdate" name="birthdate">
</div>
<div>
<button id="greetButton">Toon Groet</button>
<div id="greetingMessage"></div>
</div>
<script>
// Jouw JavaScript code gaat hier
</script>
</body>
</html>- Voeg een event listener toe aan de knop zodat er een functie wordt uitgevoerd wanneer er op de knop wordt geklikt.
- In de functie, haal de waarde van het geboortedatumveld op en converteer deze naar een JavaScript
Dateobject. - Bereken de leeftijd door het verschil tussen de huidige datum en de geboortedatum te nemen. Zorg ervoor dat je rekening houdt met de maanden en dagen (niet alleen de jaren) om de leeftijd nauwkeurig te berekenen.
- Genereer een persoonlijke groet zoals "Hallo! Je bent nu [leeftijd] jaar oud.".
- Toon de groet in het element met id
greetingMessagedoor deinnerTextofinnerHTMLeigenschap van het element aan te passen.
Inleveren
Opdracht
Neem de goedgekeurde opdracht xxx en maak de volgende aanpassingen:
- Voeg een controle toe die verzekert dat de ingevoerde geboortedatum niet in de toekomst ligt.
- Maak de groet persoonlijker door de tijd van de dag te gebruiken (goedemorgen, goedemiddag, goedenavond).
- Voeg stijlen toe aan de webpagina om het er aantrekkelijker uit te laten zien.