Je maakt een interactieve webpagina door HTML te combineren met JavaScript. In deze oefening bouwen we een pagina met een knop die bijhoudt hoe vaak je erop hebt geklikt.
Zo maak je direct kennis met de belangrijkste onderdelen van JavaScript.
Stap 1: Maak een HTML-bestand
Open Visual Studio Code en maak een nieuw bestand aan.
Sla het bestand op als:
index.html
Dit is het bestand waarin we de webpagina gaan bouwen. De extensie .html zorgt ervoor dat je browser het bestand als een webpagina herkent.
Stap 2: Voeg HTML en JavaScript toe
Kopieer de onderstaande code naar je bestand.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Mijn eerste JavaScript-pagina</title>
</head>
<body>
<h1>Mijn eerste webpagina</h1>
<p id="bericht">
Klik op de knop!
</p>
<button id="knop">
Klik hier
</button>
<script>
const knop = document.getElementById("knop");
const bericht = document.getElementById("bericht");
let aantalKlikken = 0;
knop.addEventListener("click", function() {
aantalKlikken++;
bericht.textContent =
`Je hebt ${aantalKlikken} keer geklikt!`;
});
</script>
</body>
</html>
Je hoeft nog niet iedere regel te begrijpen. We leggen de belangrijkste onderdelen zo uit.
Stap 3: Open je webpagina
Sla het bestand op en zoek index.html op je computer.
Dubbelklik op het bestand om het in je webbrowser te openen.
Je ziet nu:
- De titel ‘Mijn eerste webpagina’.
- De tekst ‘Klik op de knop!’.
- Een knop met de tekst ‘Klik hier’.
Klik vervolgens op de knop.
De tekst verandert automatisch in:
Je hebt 1 keer geklikt!
Klik je opnieuw, dan wordt dit:
Je hebt 2 keer geklikt!
Gefeliciteerd! Je hebt je eerste interactieve webpagina met JavaScript gemaakt.
Stap 4: Pas zelf iets aan
Nu kun je experimenteren met de code.
Verander bijvoorbeeld de tekst van de knop van ‘Klik hier’ naar ‘Druk op mij’.
Sla het bestand opnieuw op en vernieuw de webpagina in je browser.
Je ziet direct de aanpassing. Zo ontdek je hoe veranderingen in je code invloed hebben op een website.
