Les 4 – script.js
Wat ga je leren?
Je leert hoe je JavaScript verplaatst naar een apart bestand script.js en hoe je dat koppelt via defer.
Theorie
In de vorige les schreef je JavaScript in een <script> tag onderaan de body. Bij grotere projecten wil je HTML en JavaScript in aparte bestanden houden — overzichtelijker en makkelijker te hergebruiken.
Je maakt een bestand script.js en koppelt dat in de <head> met het defer-attribuut:
<head>
<script src="script.js" defer></script>
</head>
defer betekent: laad het script, maar voer het pas uit als de volledige HTML geladen is. Hetzelfde effect als de <script> tag onderaan de body, maar netter in de <head>.
In de editor hieronder schrijf je de JavaScript-code in het script.js-tabblad. Uitvoer van console.log() zie je in het consolepanel rechtsonder.
Predict
Bekijk de startcode in beide tabbladen. Beantwoord de vraag hieronder voordat je op Run klikt.
Wat gebeurt er als je defer vergeet — werkt de knop dan nog?
Zonder defer wordt script.js uitgevoerd zodra de browser de <script>-tag tegenkomt in de <head>. Op dat moment bestaat de <body> nog niet. document.getElementById('bericht') geeft null terug en de knop werkt niet — je ziet een foutmelding in het consolepanel. Met defer wacht de browser tot de volledige HTML geladen is.
Probeer het zelf!
Investigate
Experimenteer:
- Voeg meer
console.log()regels toe — verschijnen ze allemaal in het consolepanel? - Verwijder
deferuit de HTML — wat gaat er mis? Lees de foutmelding in het consolepanel - Voeg een tweede functie toe en roep die aan met een tweede knop
Modify
Opdracht: Voeg een console.log toe die de huidige datum en tijd toont via new Date().
Tip
new Date() geeft een Date-object terug. Als je dat aan console.log meegeeft, toont die de datum als tekst.
Antwoord
function verander() {
document.getElementById('bericht').textContent = 'Geklikt via script.js!';
console.log('De knop is geklikt om:', new Date());
}
Make
Opdracht: Bouw een pagina met twee knoppen: "Start" en "Stop". Als je op Start klikt, verschijnt de tekst "Gestart!" in groen en wordt de tijd gelogd. Als je op Stop klikt, verschijnt "Gestopt." in rood en wordt de tijd opnieuw gelogd.
Schrijf voor elke knop een aparte functie in script.js.
Tip
Gebruik style.color voor de kleur en console.log(new Date()) voor de tijd. Je hebt twee functies nodig: start() en stop().
Antwoord
HTML:
<p id="status">Wachten...</p>
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
script.js:
function start() {
document.getElementById('status').textContent = 'Gestart!';
document.getElementById('status').style.color = 'green';
console.log('Gestart om:', new Date());
}
function stop() {
document.getElementById('status').textContent = 'Gestopt.';
document.getElementById('status').style.color = 'red';
console.log('Gestopt om:', new Date());
}
Er gaat iets mis
defer vergeten
<!-- Zonder defer: script loopt vóór de HTML geladen is -->
<head>
<script src="script.js"></script>
</head>
Zonder defer wordt script.js uitgevoerd zodra de browser de tag tegenkomt — de <body> bestaat dan nog niet. document.getElementById('bericht') geeft null terug en je ziet een foutmelding in het consolepanel. Gebruik altijd defer als je een extern script in de <head> koppelt.