JS - (DOM1)

1 Introductievideo

🎯 Leerdoelen

Je weet wat de DOM is.
Je weet dat je met JavaScript het DOM kan lezen en kan aanpassen.

💡 Uitleg

Bekijk de volgende video

https://www.roc.ovh/link/902#bkmrk-6-formulieren-in-html

Code

Gebruik dit als start-code.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Simple Page</title>
  <style>body{font-family:Arial,sans-serif;background-color:#f0f4f8;padding:60px;text-align:center}.container{background-color:#fff;padding:40px;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,0.1);max-width:600px;margin:auto}h1{color:#2c3e50}p{color:#555;font-size:1.1em}</style>
</head>
<body>

<div class="container">
  <h1>Embrace the Simplicity</h1>
  <p>Sometimes, all you need is a quiet page, a clear message, and a bit of whitespace. Let your thoughts breathe and focus on what truly matters.</p>
</div>

</body>
</html>
<script>

</script>

🛠️ Opdracht

Bekijk de video daarin worden dingen voorgendaan, die jij ook moet toepassen.

Neem de start-code over in het bestand dom1.html en
Op regel 18 plaats code waarmee je de backgoundColor van de body grijs (grey) maakt.
Plaats vervolgens JavaScript code om tekst van de header met id "header" aan te passen naar:
"Hallo slimme student".
In de video wordt dit beiden voorgedaan!

Je ziet aan het eind dus:

📤 Inleveren

De aangepaste code (dom1.html bestand).

2 Elementen ophalen en aanpassen

🎯 Leerdoelen

Je weet wat de DOM is.
Je kunt HTML-elementen selecteren met JavaScript.
Je kunt de inhoud en stijl van elementen aanpassen via JavaScript.

💡 Uitleg

De DOM (Document Object Model) is de structuur van je HTML-document zoals de browser die begrijpt. Met JavaScript kun je deze structuur lezen en aanpassen.

Voorbeeld – een paragraaf veranderen:

<p id="mijnParagraaf">Oude tekst</p>
<script>
  const p = document.getElementById("mijnParagraaf");
  p.textContent = "Nieuwe tekst!";
  p.style.color = "blue";
</script>

🛠️ Opdracht – Tekst aanpassen

Maak een nieuw bestand aan met de naam dom1.html.
Begin met de start-code (heironder)
Als je op de knop klikt, moet de tekst in de paragraaf veranderen naar iets anders (bijv. “Hallo wereld!”).

Start code

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <title>Voorbeeld</title>
</head>
<body>

<p id="mijnParagraaf">Dit is de originele tekst.</p>
<button onclick="verander()">Verander</button>

<script>
  function verander() {
    // plaats hier de code die de inhoud vande pragraaf veranderd.
  }
</script>

</body>
</html>

🧠 Reflectie

Wat is de DOM in eigen woorden?
Wat doet getElementById precies?
Waarom zou je de stijl van een element met JavaScript aanpassen en niet met CSS?

📤 Inleveren

Lever je bestand dom2.html in via Teams of Canvas.
Beantwoord de reflectievragen in een .txt of .pdf bestand en lever deze mee in.

3 Meerdere elementen aanpakken

🎯 Leerdoelen

Je kunt meerdere elementen selecteren met querySelectorAll.
Je kunt met forEach een actie uitvoeren op elk element.
Je kunt een class toevoegen of verwijderen met classList.

💡 Uitleg

Als je meerdere elementen tegelijk wilt aanpakken (zoals alle -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:

<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>

<button onclick="verander()">Verander</button>

<script>
  function verander() {
      const alleP = document.querySelectorAll("p");
      alleP.forEach(function(p) {
        p.style.color = "green";
      });
    }
</script>

Je kunt ook classes toevoegen of weghalen met classList:

p.classList.add("actief");
p.classList.remove("verborgen");
p.classList.toggle("geselecteerd");

🛠️ Opdracht – items markeren

Maak een bestand dom3.html.
Maak een lijst van minimaal 5 -elementen met een class item.
Maak een knop met de tekst “Markeer alles”.
Wanneer je op de knop klikt, moeten alle elementen de class geselecteerdkrijgen.
Als je weer op de knop drukt, dan moet de weer terug veranderen (tip: gebuik toggle!).
Gebruik de voorbeeld code en pas die zelf aan.

Voorbeeld (gebruik zelf andere items)

🧠 Reflectie

Wat doet querySelectorAll(".item") precies?
Wat is het verschil tussen getElementById en querySelectorAll?
Waarom gebruik je forEach bij een NodeList?
Wat doet p.classList.toggle("geselecteerd"); ?

📤 Inleveren

Lever het bestand dom3.html in via Teams of Canvas.
Beantwoord de reflectievragen in een .txt of .pdf bestand en lever die ook in.

4 Interactie met knoppen en events

🎯 Leerdoelen

Je begrijpt wat een event is in JavaScript.
Je kunt reageren op een klik of muisactie met addEventListener.
Je kunt een actie koppelen aan meerdere elementen.

💡 Uitleg

Een event is iets wat gebeurt in de browser: een klik, het bewegen van de muis, een toets indrukken…

Met addEventListener kun je zeggen: “Als dit gebeurt, doe dan dat.”

<button id="klikMij">Klik mij (addEventListener)</button>

<script>
  const knop = document.getElementById("klikMij");
  knop.addEventListener("click", function() {
    alert("Je klikte op de knop!");
  });
</script>

Dit doet hetzelde als:

<button onclick="toonMelding()">Klik mij (via functie)</button>

<script>
  function toonMelding() {
    alert("Je klikte op de knop!");
  }
</script>

Waarom zou je eventlisteners gebruiken?

Denk eerst zelf na en klik dan open!

➕ Voordelen:

Scheidt structuur (HTML) van gedrag (JS) → netter.

Je kunt meerdere functies aan één event koppelen.

Flexibeler: makkelijk dynamisch events toevoegen of verwijderen.

Werkt ook bij elementen die pas later op de pagina verschijnen (bijv. via JavaScript geladen).

➖ Nadelen:

Iets meer code nodig.

Niet altijd direct zichtbaar in de HTML wat er gebeurt (iets minder beginner-vriendelijk).

Andere events

Ook andere events zijn mogelijk, zoals mouseover, mouseout, keydown enzovoort.

Je kunt ook meerdere elementen selecteren en daar een event aan koppelen:

document.querySelectorAll(".kleurvak").forEach(function(el) {
  el.addEventListener("mouseover", function() {
    el.style.backgroundColor = "yellow";
  });
});

Wat doet dit? Denk eerst na en controleer dan door hier te klikken.

Elk vak met de class "kleurvak" krijgt een gele achtergrond kleur als je er met de muis overheen gaat.

🛠️ Opdracht – Events in actie

Maak een nieuw HTML-bestand dom4.html.
Voeg 5 divjes toe met de class kleurvak, elk met een vaste afmeting en een andere begin-kleur.
Als je met de muis over een vakje gaat, verandert de achtergrondkleur in geel.
Als je erop klikt, moet de tekst in het vakje veranderen naar “Geklikt!”.

Gebruik zowel mouseover als click events.

Gebruik dit als basis voor de CSS:

  <style>
    .kleurvak {
      width: 100px;
      height: 100px;
      display: inline-block;
      margin: 10px;
      text-align: center;
      line-height: 100px;
      background-color: lightblue;
      font-weight: bold;
      cursor: pointer;
    }
  </style>

Resultaat

https://youtu.be/deDyTevLTgk

🧠 Reflectie

Wat is een event in je eigen woorden?
Wat doet addEventListener precies?
Wat is het verschil tussen mouseover en click?

📤 Inleveren

Lever je bestand dom4.html in via Teams of Canvas.
Beantwoord de reflectievragen in een .txt of .pdf bestand en lever die ook in.

5 Elementen toevoegen met JavaScript

🎯 Leerdoelen

Je kunt een nieuw HTML-element aanmaken met createElement.
Je kunt dat element toevoegen aan de DOM met appendChild.
Je kunt invoer van de gebruiker gebruiken om dynamisch iets te maken.

💡 Uitleg

Je kunt nieuwe HTML-elementen maken en ze toevoegen aan je pagina met JavaScript. Dit is handig als je bijvoorbeeld automatisch lijstjes wilt uitbreiden of reacties wilt tonen.

const nieuwElement = document.createElement("p");
nieuwElement.textContent = "Hallo, ik ben nieuw!";
document.body.appendChild(nieuwElement);

Je kunt ook iets maken op basis van wat de gebruiker invoert:

<input type="text" id="tekstvak">
<button id="voegToe">Voeg toe</button>
<div id="resultaat"></div>

<script>
  document.getElementById("voegToe").addEventListener("click", function() {
    const invoer = document.getElementById("tekstvak").value;
    const nieuwP = document.createElement("p");
    nieuwP.textContent = invoer;
    document.getElementById("resultaat").appendChild(nieuwP);
  });
</script>

🛠️ Opdracht – Invoer toevoegen

Maak een bestand dom4.html.
Voeg een invoerveld toe waarin de gebruiker een hobby, film of favoriet eten kan typen.
Voeg een knop toe met de tekst “Toevoegen”.
Telkens wanneer je klikt, moet er een nieuw -element met de ingevoerde tekst verschijnen onder een lijstdiv.

Bonus: Als je het leuk vindt, laat de invoervelden na het klikken automatisch leeglopen.

🧠 Reflectie

Wat doet createElement precies?
Wat is het verschil tussen textContent en innerHTML?
Waarom moet je appendChild gebruiken?

📤 Inleveren

Lever je bestand dom4.html in via Teams of Canvas.
Beantwoord de reflectievragen in een .txt of .pdf bestand en lever die ook in.

6 Elementen verwijderen of aanpassen via `event.target`

🎯 Leerdoelen

Je begrijpt wat event.target doet.
Je kunt een klik koppelen aan een specifiek element dat je wilt aanpassen of verwijderen.
Je kunt met JavaScript elementen verwijderen uit de DOM.

💡 Uitleg

Als een event plaatsvindt (zoals een klik), kun je met event.target achterhalen welk element precies geklikt is.

Voorbeeld – klikbare lijst waarin een item verdwijnt:

<ul id="lijst">
  <li>Appel</li>
  <li>Banaan</li>
  <li>Peer</li>
</ul>

<script>
  document.querySelectorAll("#lijst li").forEach(function(item) {
    item.addEventListener("click", function(event) {
      event.target.remove();
    });
  });
</script>

Of met this als shorthand:

item.addEventListener("click", function() {
  this.remove();
});

🛠️ Opdracht – Klik en verwijder

Maak een bestand dom5.html.
Voeg een lijst toe (bijv. <ul>) met minstens 5 items (bijv. films, dieren of snacks).
Schrijf JavaScript die ervoor zorgt dat je een item uit de lijst verwijdert zodra je erop klikt.
Bonus: Toon boven de lijst hoeveel items er nog over zijn.

Gebruik event.target.remove() of this.remove() binnen je event handler.

🧠 Reflectie

Wat is event.target en waar gebruik je het voor?
Wat is het verschil tussen event.target en this in een event?
Waarom zou je een lijst dynamisch willen kunnen aanpassen?

📤 Inleveren

Lever je bestand dom5.html in via Teams of Canvas.
Beantwoord de reflectievragen in een .txt of .pdf bestand en lever die ook in.

7 Klassennamen wisselen met `classList.toggle`

🎯 Leerdoelen

Je kunt met JavaScript classes toevoegen of verwijderen.
Je weet wat classList.toggle doet.
Je kunt styling aanpassen afhankelijk van de class van een element.

💡 Uitleg

Met classList kun je een class toevoegen, verwijderen of omwisselen (“toggelen”). Dit is handig om styling of gedrag van elementen aan te passen wanneer de gebruiker iets doet.

Bijvoorbeeld: klik op een element om het te markeren:

<ul id="taken">
  <li>Boodschappen doen</li>
  <li>Afwassen</li>
  <li>Hond uitlaten</li>
</ul>

<style>
  .afgevinkt {
    text-decoration: line-through;
    color: grey;
  }
</style>

<script>
  document.querySelectorAll("#taken li").forEach(function(taak) {
    taak.addEventListener("click", function() {
      this.classList.toggle("afgevinkt");
    });
  });
</script>

🛠️ 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 - (DOM1)

1 Introductievideo

🎯 Leerdoelen

💡 Uitleg

Code

🛠️ Opdracht

📤 Inleveren

2 Elementen ophalen en aanpassen

🎯 Leerdoelen

💡 Uitleg

Voorbeeld – een paragraaf veranderen:

🛠️ Opdracht – Tekst aanpassen

Start code

🧠 Reflectie

📤 Inleveren

3 Meerdere elementen aanpakken

🎯 Leerdoelen

💡 Uitleg

🛠️ Opdracht – items markeren

Voorbeeld (gebruik zelf andere items)

🧠 Reflectie

📤 Inleveren

4 Interactie met knoppen en events

🎯 Leerdoelen

💡 Uitleg

Waarom zou je eventlisteners gebruiken?

Andere events

🛠️ Opdracht – Events in actie

Resultaat

🧠 Reflectie

📤 Inleveren

5 Elementen toevoegen met JavaScript

🎯 Leerdoelen

💡 Uitleg

🛠️ Opdracht – Invoer toevoegen

🧠 Reflectie

📤 Inleveren

6 Elementen verwijderen of aanpassen via event.target

🎯 Leerdoelen

💡 Uitleg

🛠️ Opdracht – Klik en verwijder

🧠 Reflectie

📤 Inleveren

7 Klassennamen wisselen met classList.toggle

🎯 Leerdoelen

💡 Uitleg

🛠️ Opdracht – Actieve selectie

🧠 Reflectie

📤 Inleveren

6 Elementen verwijderen of aanpassen via `event.target`

7 Klassennamen wisselen met `classList.toggle`