Wat is JavaScript? Interactiviteit toevoegen aan je website
JavaScript is de derde pijler van het web, naast HTML en CSS. Waar HTML de structuur bepaalt en CSS de opmaak, voegt JavaScript gedrag toe: knoppen die reageren, formulieren die valideren, animaties die starten. JavaScript draait rechtstreeks in de browser, zonder installatie of server. Elke moderne browser begrijpt JavaScript en voert het direct uit.
Je eerste JavaScript
De eenvoudigste manier om JavaScript toe te voegen is een <script>-tag onderaan je <body>. De browser voert de code uit zodra hij de tag tegenkomt.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<title>Mijn eerste JavaScript</title>
</head>
<body>
<h1>Hallo!</h1>
<!-- JavaScript onderaan de body -->
<script>
console.log('JavaScript werkt!')
</script>
</body>
</html>
Open de browser, druk op F12 (of Cmd+Option+I op Mac) en ga naar het tabblad Console. Je ziet daar de tekst JavaScript werkt!.
Extern JavaScript-bestand
Net als bij CSS is het netter om JavaScript in een apart bestand te zetten. Je koppelt het met een <script src="...">-tag.
<body>
<h1>Hallo!</h1>
<!-- Koppeling naar extern JavaScript-bestand -->
<script src="script.js"></script>
</body>
console.log('Extern bestand geladen!')
Plaats <script>-tags altijd vlak voor het sluitende </body>-tag. Dan is de HTML al geladen voordat JavaScript ernaar zoekt.
Variabelen
Met variabelen sla je gegevens op. Gebruik const als de waarde niet verandert en let als dat wel zo is. Gebruik nooit var: dat is een oude schrijfwijze met verwarrend gedrag.
// const: de waarde verandert nooit
const name = 'Anna'
const age = 28
// let: de waarde kan later veranderen
let points = 0
points = points + 10
console.log(name) // Anna
console.log(points) // 10
Veelgebruikte datatypes
JavaScript kent vijf veelgebruikte datatypes:
// String: tekst, altijd tussen aanhalingstekens
const title = 'Webdevelopment voor beginners'
// Number: getal (geheel of decimaal)
const price = 29.95
// Boolean: true of false
const loggedIn = true
// Array: een geordende lijst van waarden
const colors = ['rood', 'groen', 'blauw']
console.log(colors[0]) // rood (index begint bij 0)
// Object: een verzameling van sleutel-waardeparen
const user = {
name: 'Anna',
age: 28,
active: true,
}
console.log(user.name) // Anna
Functies
Een functie is een herbruikbaar blok code. Je definieert hem eenmalig en roept hem daarna zo vaak aan als nodig.
// Functie declaratie
function greet(name) {
return 'Hallo, ' + name + '!'
}
// Functie aanroepen
const message = greet('Anna')
console.log(message) // Hallo, Anna!
Pijlfuncties
Een kortere schrijfwijze is de pijlfunctie (arrow function). Ze werken hetzelfde, maar zijn compacter.
// Dezelfde functie als hierboven, maar als pijlfunctie
const greet = (name) => {
return 'Hallo, ' + name + '!'
}
// Als de functie slechts één expressie teruggeeft, mag je de accolades en return weglaten
const greetShort = (name) => 'Hallo, ' + name + '!'
console.log(greetShort('Bram')) // Hallo, Bram!
Begin met gewone function-declaraties: die zijn duidelijker te lezen. Pijlfuncties kom je veel tegen in moderne code en bij event handlers, dus het is goed ze te herkennen.
De DOM
De DOM (Document Object Model) is de manier waarop JavaScript de HTML-pagina ziet. De browser maakt van je HTML een boomstructuur van objecten. Via de DOM kun je elk element lezen of aanpassen.
// Selecteer een element met een CSS-selector
const heading = document.querySelector('h1')
// Verander de tekst
heading.textContent = 'Aangepaste koptekst'
// Verander een stijl
heading.style.color = 'blue'
document.querySelector() geeft het eerste element dat voldoet aan de selector. Je kunt dezelfde selectors gebruiken als in CSS: tagnaam, .klassenaam, #id.
// Selecteer op klasse
const button = document.querySelector('.my-button')
// Selecteer op ID
const form = document.querySelector('#contact-form')
// Verander de inhoud van een element
const intro = document.querySelector('.intro')
intro.textContent = 'Nieuwe introductietekst'
Je ziet soms ook document.getElementById('id'). Dat is een oudere schrijfwijze. querySelector is flexibeler en werkt met alle CSS-selectors, dus gebruik dat.
Gebeurtenissen (Events)
Met events reageert JavaScript op acties van de gebruiker: klikken, typen, scrollen. Je koppelt een event listener aan een element.
const button = document.querySelector('#my-button')
button.addEventListener('click', function () {
alert('Je hebt geklikt!')
})
Met een pijlfunctie is dit compacter:
const button = document.querySelector('#my-button')
button.addEventListener('click', () => {
alert('Je hebt geklikt!')
})
De addEventListener-methode heeft twee parameters: de naam van het event (als string) en de functie die uitgevoerd wordt. Veelgebruikte events zijn 'click', 'input', 'submit' en 'keydown'.
Een praktisch voorbeeld
We bouwen een kleine pagina met een knop die de donkere modus in- en uitschakelt. Dit combineert alles: de DOM, een event, een klasse toevoegen en CSS.
body {
font-family: system-ui, sans-serif;
background: #ffffff;
color: #1a1a1a;
transition:
background 0.3s,
color 0.3s;
}
body.dark {
background: #1a1a2e;
color: #e2e8f0;
}
.btn-mode {
padding: 0.6rem 1.2rem;
border: none;
border-radius: 6px;
cursor: pointer;
background: #0070f3;
color: white;
font-size: 1rem;
}
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<title>Donkere modus</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Donkere modus demo</h1>
<p>Klik op de knop om de modus te wisselen.</p>
<button class="btn-mode" id="mode-button">Donkere modus aan</button>
<script src="script.js"></script>
</body>
</html>
const button = document.querySelector('#mode-button')
button.addEventListener('click', () => {
// toggle voegt de klasse toe als die er niet is, en verwijdert hem als die er wel is
document.body.classList.toggle('dark')
// Pas de knoptekst aan op basis van de huidige modus
const isDark = document.body.classList.contains('dark')
button.textContent = isDark ? 'Donkere modus uit' : 'Donkere modus aan'
})
Sla de drie bestanden op in dezelfde map en open index.html in je browser. Elke klik wisselt de klasse dark op <body> en past de tekst van de knop aan.
Als je verder leert, kom je namen tegen als React, Vue en Svelte. Dat zijn JavaScript-frameworks die grote applicaties overzichtelijker maken. Ze bouwen allemaal voort op de DOM-concepten die je hier hebt geleerd. Begin altijd met gewone (vanilla) JavaScript voordat je een framework oppakt.
Er bestaat ook TypeScript, een uitbreiding op JavaScript die je code voorziet van types. TypeScript is populair in professionele projecten, maar voor beginners is het verstandig eerst JavaScript goed te leren.
Verder lezen
- MDN: JavaScript, eerste stappen
- MDN: Werken met de DOM
- MDN: addEventListener
- javascript.info (Engelstalig, maar uitstekend voor beginners)
Volgende stap
Je kunt nu HTML, CSS en JavaScript combineren tot een interactieve webpagina. De volgende stap is leren hoe je je code bijhoudt en veilig opslaat: dat doe je met versiebeheer. Lees verder over Git en versiebeheer.