Contactpagina

-elementen of alle knoppen), gebruik je querySelectorAll . Dit geeft je een lijst (een zogenaamde “NodeList”) van alle elementen die matchen. Met forEach kun je vervolgens over deze lijst heen lopen en elk element iets laten doen:

-elementen met een class item . Maak een knop met de tekst “Markeer alles”. Wanneer je op de knop klikt, moeten alle

elementen de class actief krijgen. Gebruik bijvoorbeeld: document.getElementById("knop").addEventListener("click", function() { document.querySelectorAll(".item").forEach(function(el) { el.classList.add("actief"); }); }); Stijl de class actief in je 🛠️ Opdracht – Actieve selectie Maak een bestand dom6.html . Maak een lijst (bijv. favoriete games, liedjes, sporters). Als je op een item klikt, moet de class geselecteerd worden toegevoegd of verwijderd. Stijl de class geselecteerd in CSS met bijvoorbeeld een andere kleur en achtergrond. Voorbeeld CSS: .geselecteerd { background-color: lightgreen; font-weight: bold; } Gebruik element.classList.toggle("geselecteerd") bij het klikken. 🧠 Reflectie Wat is het voordeel van toggle ten opzichte van add en remove ? Wat gebeurt er als je meerdere keren op hetzelfde item klikt? Waar zou je dit in een echte webapp kunnen gebruiken? 📤 Inleveren Lever het bestand dom6.html in via Teams of Canvas. Beantwoord de reflectievragen in een .txt of .pdf bestand en lever die ook in. JS - (DOM2) 1 Formulieren en invoer met JavaScript 🎯 Leerdoelen Je weet hoe je gegevens uit een formulier leest met JavaScript. Je kunt reageren op een submit -event. Je weet wat preventDefault() doet. 💡 Uitleg Formulieren worden normaal automatisch verstuurd en de pagina ververst dan. Maar in JavaScript kun je het formulier ook “afhandelen” zonder te verversen. Voorbeeldformulier:

-element. Bonus: Voeg meerdere berichten toe (zoals een eenvoudige chat). 🧠 Reflectie Wat doet preventDefault() en waarom gebruik je het? Wat is het verschil tussen een click -event en een submit -event? Hoe lees je de waarde van een inputveld? 📤 Inleveren Lever je bestand dom7.html in via Teams of Canvas. Beantwoord de reflectievragen in een .txt of .pdf bestand en lever die ook in. 2 Gegevens bewaren met localStorage 🎯 Leerdoelen Je weet wat localStorage is en wanneer je het gebruikt. Je kunt gegevens opslaan in de browser. Je kunt opgeslagen gegevens bij het laden van de pagina weer tonen. 💡 Uitleg localStorage is een opslagruimte in de browser. Alles wat je daarin zet, blijft bewaard – ook als je de pagina sluit of opnieuw opent. Je gebruikt het bijvoorbeeld zo: // Iets opslaan localStorage.setItem("naam", "Ali"); // Iets ophalen const naam = localStorage.getItem("naam"); // Iets verwijderen localStorage.removeItem("naam"); Let op: je kunt alleen strings opslaan. Wil je een lijst opslaan? Gebruik dan JSON.stringify() en JSON.parse() : const lijst = ["bananen", "appels"]; localStorage.setItem("boodschappen", JSON.stringify(lijst)); const terug = JSON.parse(localStorage.getItem("boodschappen")); console.log(terug); // ["bananen", "appels"] 🛠️ Opdracht – Opslaan wat je invult Maak een bestand dom9.html . Maak een invoerveld waar de gebruiker een hobby, taak of naam kan invullen. Als de gebruiker iets toevoegt, verschijnt het in een lijst op de pagina. De lijst moet bewaard blijven via localStorage zodat deze zichtbaar blijft bij herladen. Bonus: Voeg een knop toe om alles te wissen (via localStorage.clear() ). Tips: Lees bij het laden van de pagina eerst de gegevens uit localStorage . Update localStorage telkens als je iets toevoegt of verwijdert. 🧠 Reflectie Wat is het voordeel van localStorage ? Waarom moet je JSON gebruiken bij het opslaan van lijsten? Wat zou je nog meer kunnen opslaan in een webapp? 📤 Inleveren Lever je bestand dom9.html in via Teams of Canvas. Beantwoord de reflectievragen in een .txt of .pdf bestand en lever die ook in. Toon in een screenshot dat je lijst bewaard blijft bij herladen. 3 Gegevens ophalen met fetch() 🎯 Leerdoelen Je weet wat fetch() doet in JavaScript. Je kunt externe gegevens ophalen en tonen op een webpagina. Je begrijpt hoe je met JSON-data werkt en deze verwerkt met de DOM. 💡 Uitleg Met fetch() kun je gegevens ophalen van een externe bron zoals een API. Vaak krijg je dan JSON-data terug: een soort tekstversie van een JavaScript-object of array. Een voorbeeld: fetch("https://jsonplaceholder.typicode.com/users") .then(response => response.json()) .then(data => { console.log(data); // Hier kun je nu iets mee doen }); Je kunt daarna bijvoorbeeld een lijst maken van namen: fetch("https://jsonplaceholder.typicode.com/users") .then(res => res.json()) .then(users => { users.forEach(user => { const p = document.createElement("p"); p.textContent = user.name; document.body.appendChild(p); }); }); 🛠️ Opdracht – Externe gebruikerslijst Maak een bestand dom10.html . Haal gegevens op van https://jsonplaceholder.typicode.com/users . Laat van elke gebruiker de naam en e-mailadres zien in de browser. Maak van elke gebruiker een eigen

. Bonus: laat de gegevens pas zien als je op een knop “Laad gebruikers” hebt geklikt. Extra uitdaging: Voeg bij elk item een knop “verwijder” toe waarmee dat item uit de DOM verdwijnt. 🧠 Reflectie Wat doet fetch() precies? Wat is een API, en wat kun je ermee? Wat zou een risico zijn als je data van andere websites gebruikt? 📤 Inleveren Lever je bestand dom10.html in via Teams of Canvas. Beantwoord de reflectievragen in een .txt of .pdf bestand. Lever een screenshot aan waarop de opgehaalde gebruikers zichtbaar zijn in je browser. 4 Lijsten filteren op basis van invoer 🎯 Leerdoelen Je weet hoe je gebruikersinvoer gebruikt om iets te filteren. Je kunt elementen verbergen of tonen met JavaScript. Je past een input -event toe om live te reageren. 💡 Uitleg Je kunt met JavaScript elementen tonen of verbergen op basis van wat de gebruiker intypt. Voorbeeld – een zoekveld dat een lijst filtert:

Hond
Kat
Papegaai
Vogelbekdier

🛠️ Opdracht – Live filter maken Maak een bestand dom11.html . Voeg een lijst toe met minstens 10 items (bijv. landen, games, fruitsoorten). Voeg een zoekveld toe boven de lijst. Laat de lijst automatisch filteren terwijl je typt. Bonus: maak de zoekopdracht hoofdletterongevoelig en toon “Geen resultaten gevonden” als niets matcht. 🧠 Reflectie Wat gebeurt er bij het input -event? Hoe kun je ervoor zorgen dat je filter hoofdletterongevoelig is? Wat zou je nog kunnen verbeteren aan deze zoekfunctie? 📤 Inleveren Lever je bestand dom11.html in via Teams of Canvas. Beantwoord de reflectievragen in een .txt of .pdf bestand en lever die ook in. Java Script Challenge 🎯 DOM Challenge – Bouw jouw eigen mini-app 🎯 Leerdoelen Je past alle basisvaardigheden toe rondom DOM-manipulatie. Je maakt een interactieve webapp met HTML, CSS en JavaScript. Je leert werken met gebruikersinvoer, events en eventueel localStorage. Je leert een eenvoudige planning te maken voor je project. Je leert AI bewust inzetten en daarover verantwoording afleggen. 💡 Uitleg In deze les ontwerp je zelf een kleine interactieve DOM-app. Je past de technieken toe uit de vorige lessen. Kies één van de volgende apps, of verzin een eigen variant: Mogelijke projecten: Todo-lijst: gebruiker voert een taak in, kan deze toevoegen, afvinken (class toggle), en verwijderen (event.target.remove()). Quiz: gebruiker kiest een antwoord en krijgt direct feedback. Poll/stemming: klik op een optie, zie het aantal stemmen stijgen. Chatbox: gebruikersberichtjes invoeren die onder elkaar verschijnen. Boekenkast: boeken toevoegen, afvinken als gelezen, verwijderen, zoeken én opslaan in localStorage. Let op: Bij elk project gebruik je minimaal deze onderdelen: Een invoerveld + knop Een lijst of reeks elementen die via JavaScript groeit Event-handling (bijv. click, submit) classList.toggle() of remove() Bij het project Boekenkast moet je daarnaast ook werken met localStorage en een live zoekveld. 🛠️ Opdracht – Kies en bouw jouw mini-app Maak een bestand met een duidelijke naam, bijv. dom-project.html . Kies welk klein DOM-project je maakt (zie hierboven). Maak een planning van je project in een tabel (zie voorbeeld hieronder). Werk stap voor stap: begin met HTML, voeg daarna JavaScript toe. Gebruik technieken uit eerdere lessen zoals querySelector , addEventListener , en innerHTML . Stijl je pagina met CSS zodat deze overzichtelijk is. 📋 Voorbeeld planning | Onderdeel | Tijd | Status | |---------------------------|------|--------| | HTML structuur | 20m | | | JS: items toevoegen | 30m | | | JS: verwijderen/afvinken | 20m | | | Styling | 15m | | | Reflectie schrijven | 15m | | 🧠 Reflectie Wat vond je het makkelijkst en het moeilijkst? Welke technieken heb je toegepast? Noem er minstens drie. Waar heb je AI voor gebruikt? Wat zou je in de toekomst nog willen verbeteren of leren? 📤 Inleveren Lever je dom-project.html in, samen met je CSS-bestand (indien apart). Lever je planning in als .txt of .pdf. Lever je reflectie in als .txt of .pdf. Lever je AI-logboek in: geef aan welke prompts je gebruikte, wat je codeerde met hulp van AI, en wat je zelf schreef of aanpaste. Eventueel: voeg screenshots toe van je werkende webapp als je trots bent op het resultaat!

Neem contact met ons op