Les 3 – De script-tag
Wat ga je leren?
Je leert hoe je meerdere JavaScript-regels samenvoegt in een functie, en hoe je die functie in een <script> tag in de HTML plaatst.
Het probleem: inline code wordt te lang
Tot nu toe schreef je code direct in onclick. Dat werkt prima voor één regel. Maar wat als je bij een klik vijf dingen wilt doen?
<!-- Onoverzichtelijk: -->
<button onclick="document.getElementById('a').textContent='X'; document.getElementById('b').style.color='red'; ...">
Dit wordt snel onleesbaar. De oplossing is een functie.
Stap 1 — functies
Een functie is een blok code met een naam. Je definieert de functie één keer, en roept hem daarna aan via onclick:
function verander() {
document.getElementById('bericht').textContent = 'Geklikt!';
document.getElementById('bericht').style.color = 'green';
}
In de HTML roep je de functie aan met haar naam gevolgd door ():
<button onclick="verander()">Klik mij</button>
Stap 2 — de <script> tag
JavaScript-code in een HTML-bestand zet je in een <script> tag. Die tag staat onderaan de <body> — zodat alle HTML-elementen al bestaan op het moment dat de code geladen wordt:
<body>
<p id="bericht">Klik op de knop.</p>
<button onclick="verander()">Klik mij</button>
<script>
function verander() {
document.getElementById('bericht').textContent = 'Geklikt!';
document.getElementById('bericht').style.color = 'green';
}
</script>
</body>
Predict
Bekijk de startcode in de editor. Beantwoord de vraag hieronder voordat je op de knop klikt.
Hoeveel dingen veranderen er tegelijk als je op de knop klikt?
Er veranderen twee dingen tegelijk: de tekst én de kleur van de <p>. De functie verander() voert alle regels binnenin uit zodra ze wordt aangeroepen — het maakt niet uit hoeveel regels erin staan.
Probeer het zelf!
In deze les staat de JavaScript-code in een <script> tag binnenin de HTML. Je vindt de code in het index.html-tabblad — zoek naar het <script> blok onderaan de <body>.
Investigate
Experimenteer:
- Voeg een extra regel toe in de functie die ook
style.fontSizeaanpast - Maak een tweede functie
herstel()en een tweede knop die de tekst en kleur terugzet - Verplaats de
<script>tag naar de<head>— wat gaat er mis? Waarom?
Modify
Opdracht: Voeg een knop "Herstel" toe die de tekst en kleur terugzet naar de beginwaarden.
Tip
Schrijf een tweede functie herstel() in de <script> tag. Zet de tekst terug met .textContent en de kleur met .style.color = '' (lege string verwijdert de inline stijl).
Antwoord
HTML-toevoeging:
<button onclick="herstel()">Herstel</button>
JavaScript-toevoeging in <script>:
function herstel() {
document.getElementById('bericht').textContent = 'Klik op de knop.';
document.getElementById('bericht').style.color = '';
}
Make
Opdracht: Bouw een mini-lichtenknop. Er is één <p> die begint als "Licht is uit". Maak twee knoppen:
- "Aan" — zet de tekst op "Licht is aan" en de achtergrond op geel
- "Uit" — zet alles terug naar de beginwaarden
Schrijf voor elke knop een aparte functie in de <script> tag.
Tip
Gebruik style.backgroundColor voor de achtergrondkleur. Een lege string ('') verwijdert een eerder ingestelde stijl.
Antwoord
<p id="lamp">Licht is uit.</p>
<button onclick="aan()">Aan</button>
<button onclick="uit()">Uit</button>
<script>
function aan() {
document.getElementById('lamp').textContent = 'Licht is aan!';
document.getElementById('lamp').style.backgroundColor = 'yellow';
}
function uit() {
document.getElementById('lamp').textContent = 'Licht is uit.';
document.getElementById('lamp').style.backgroundColor = '';
}
</script>
Er gaat iets mis
<script> tag staat vóór de HTML-elementen
<head>
<script>
function verander() {
document.getElementById('bericht').textContent = 'Hoi'; // Fout!
}
</script>
</head>
<body>
<p id="bericht">Tekst</p>
</body>
Als de <script> tag in de <head> staat en de functie wordt direct aangeroepen (niet via een knop), bestaat de <p> nog niet — getElementById geeft dan null terug. Zet de <script> tag altijd onderaan de <body>, na alle HTML-elementen. (In les 4 zie je hoe je dit ook met defer oplost vanuit de <head>.)