Hoofdstuk 9

JavaScript Inleiding

Breng je websites tot leven met gedrag, logica en interactiviteit.

📚 Inleiding

Als HTML het skelet is en CSS de huid, dan is JavaScript het brein. Het stelt je in staat om dynamische, interactieve webervaringen te creëren die reageren op acties van de gebruiker.

Wist je dat? JavaScript in slechts 10 dagen werd gecreëerd in 1995! Vandaag de dag is het de meest populaire programmeertaal ter wereld en drijft het bijna elke website aan die je bezoekt.

1. Moderne Variabelen: let, const, en var

In modern JavaScript (ES6+) is de manier waarop je variabelen declareert belangrijk voor de stabiliteit en leesbaarheid van je code.

const

Constanten. Gebruik dit standaard. Het voorkomt her-toewijzing, wat je code voorspelbaarder maakt.

let

Her-toewijsbaar. Gebruik dit wanneer je weet dat de waarde zal veranderen (bijv. een teller of een toggle-status).

var

De Verouderde Manier. Vermijd het gebruik van var. Het heeft verwarrende scoping-regels en kan leiden tot bugs.

JS 
const apiKey = "12345"; // Kan niet worden gewijzigd
let score = 0;         // Kan worden gewijzigd
score = 10;            // Dit is prima

// var is function-scoped en "hoisted", wat leidt tot vreemd gedrag
if (true) {
    var legacy = "Ik lek buiten dit blok";
    let modern = "Ik blijf binnen dit blok";
}
console.log(legacy); // Werkt
console.log(modern); // Foutmelding!

2. Moderne Strings & Template Literals

Werken met tekst is veel eenvoudiger met ES6 Template Literals met backticks (`).

JS 
const name = "Alice";
const greeting = `Hallo, ${name}!`; // Template Literal

// Moderne String Methoden
const text = "JavaScript is geweldig";
console.log(text.includes("geweldig")); // true
console.log(text.startsWith("Java"));   // true
console.log(text.endsWith("!"));        // false

3. Functies & Arrow Syntax

Functies zijn herbruikbare blokken code. Hoewel traditionele functies nog steeds worden gebruikt, bieden Arrow Functions een kortere syntax.

JS 
// Traditionele Functie
function optellen(a, b) {
    return a + b;
}

// Arrow Function (Modern)
const vermenigvuldigen = (a, b) => a * b;

// Single line arrow function (impliciete return)
const kwadraat = x => x * x;

4. Diepduiken: DOM Selectie

Om de pagina te manipuleren, moet je eerst de elementen "vinden". Modern JavaScript gebruikt CSS-achtige selectors.

JS 
// Selecteer de EERSTE match
const header = document.querySelector("#main-header");
const eersteKnop = document.querySelector(".btn");

// Selecteer ALLE matches (geeft een NodeList terug)
const alleKaarten = document.querySelectorAll(".card");

// Loop door een NodeList
alleKaarten.forEach(kaart => {
    kaart.style.border = "1px solid red";
});

Pro Tip: querySelectorAll geeft een statische NodeList terug. In tegenstelling tot oudere methoden zoals getElementsByClassName, kun je .forEach() er direct op gebruiken!

5. Events & Propagatie

Events vinden plaats wanneer de gebruiker interactie heeft met de pagina (klikken, scrollen, typen). Het begrijpen van hoe events "reizen" is cruciaal.

Event Propagatie

Wanneer je op een knop klikt binnen een <div>, "bubbelt" het event omhoog van de knop naar de div, en uiteindelijk naar het document.

JS 
const knop = document.querySelector("#mijnKnop");

knop.addEventListener("click", function(e) {
    console.log("Target:", e.target);           // Het exacte element waarop geklikt is
    console.log("Current:", e.currentTarget);   // Het element waar de listener aan gekoppeld is
    
    // Stop het event van omhoog bubbelen naar ouders
    e.stopPropagation();
    
    // Voorkom standaard gedrag (zoals het volgen van een link of verzenden van een formulier)
    e.preventDefault();
});

6. LocalStorage: Persistentie

Webpagina's zijn staatloos—ze "vergeten" alles wanneer je ververst. LocalStorage stelt je in staat om gegevens op te slaan in de browser van de gebruiker.

JS 
// Gegevens opslaan
localStorage.setItem("thema", "donker");

// Gegevens ophalen
const huidigThema = localStorage.getItem("thema");

// Objecten/Arrays opslaan (moeten worden omgezet naar String)
const gebruiker = { name: "Alice", score: 100 };
localStorage.setItem("gebruiker", JSON.stringify(gebruiker));

// Ophalen en Parsen
const opgeslagenGebruiker = JSON.parse(localStorage.getItem("gebruiker"));
console.log(opgeslagenGebruiker.name); // "Alice"

🚀 Uitdagende Oefeningen

Pas je kennis toe met deze interactieve uitdagingen. Bouw deze vanaf nul op in een nieuw HTML/JS-bestand.

Oefening 1

Dynamische Thema Schakelaar

Maak drie knoppen (Licht, Donker, Solar). Wanneer erop geklikt wordt, verander de body klasse en sla de voorkeur op in LocalStorage zodat deze na een verversing behouden blijft.

Oefening 2

Interactieve Quiz

Maak een kleine quiz met 3 vragen. Gebruik JS om de score bij te houden. Toon bij het verzenden de eindscore en markeer de goede/foute antwoorden dynamisch.

Oefening 3

Filter Lijst

Maak een invoerveld en een lijst van 10 items. Gebruik het input event om items die niet overeenkomen met de zoekterm in real-time te verbergen terwijl de gebruiker typt.

Oefening 4

Afbeelding Modal Galerij

Maak een raster van miniatuurafbeeldingen. Wanneer erop geklikt wordt, open de afbeelding in een schermvullende "modal" (een gecentreerde overlay). Klikken op de overlay moet de modal sluiten.

Oefening 5

Dynamische Formulier Bouwer

Maak een "Veld Toevoegen" knop. Elke klik moet een nieuw tekstveld en een "Verwijder" knop toevoegen aan een container. Zorg ervoor dat de "Verwijder" knop alleen zijn specifieke veld verwijdert.

Blijf Leren

← Vorige: Responsive Design Volgende: Eindproject →