Ga naar hoofdinhoud

script.js

In de vorige les stond 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.

De console: een kijkglas op je code​

console.log() toont een bericht in de console: een paneel dat bezoekers niet zien, maar jij als programmeur wel. In de editor is dat het consolepanel rechtsonder; in een gewone browser open je hem met F12 → tabblad "Console".

console.log('Knop is geklikt.');
console.log('Naam:', naam);

Je gebruikt console.log vooral om te debuggen (fouten opsporen): zet hem op een paar plekken in je code, en je ziet precies welke regels draaien en met welke waarden.

Predict​

Bekijk de startcode in beide tabbladen. Beantwoord de vraag voordat je op Run klikt.

Wat verschijnt er in het consolepanel na één klik op de knop?

Eén regel: De knop is geklikt. De functie doet twee dingen — de paginatekst veranderen (zichtbaar in de preview) en een bericht loggen (zichtbaar in de console).

Probeer het zelf.​

Editor laden...

Investigate​

Experimenteer in het veld hierboven:

  • Voeg meer console.log()-regels toe binnen de functie. Verschijnen ze allemaal?
  • Zet een console.log('Script geladen.') buiten de functie, onderaan script.js. Wanneer verschijnt die — bij het laden of bij een klik?
  • Klik drie keer op de knop. Hoe vaak staat het bericht in de console?

Opdracht 1: Wis-knop​

Voeg een knop "Wis" toe die de tekst in de <p> leegmaakt én Gewist. in de console logt. Schrijf de functie in het script.js-tabblad.

Editor laden...
Tip

Een tweede functie in script.js en een tweede knop in de HTML, net als bij de Herstel-knop van de vorige les. Een lege tekst is ''.

Antwoord

HTML-toevoeging:

<button onclick="wis()">Wis</button>

Toevoeging in script.js:

function wis() {
  document.getElementById('bericht').textContent = '';
  console.log('Gewist.');
}

Opdracht 2: Vind de fout met de console​

In het veld hieronder doet de knop niets. Kopieer het stukje document.getElementById(...) uit de functie naar een console.log(...) als eerste regel, zodat je ziet wat de code daar te pakken krijgt. Repareer daarna de fout. De rode foutmelding in de console is ook een aanwijzing.

Editor laden...
Tip

Vergelijk wat de console.log laat zien met wat je verwacht. Kijk daarna heel precies naar het id in script.js en het id in de HTML.

Antwoord

De log toont het gevonden element — en dat is er niet: de console laat null zien zodra je de regel met het foute id logt. In script.js staat 'Bericht' met een hoofdletter, in de HTML id="bericht" met een kleine letter. Herstel:

function verander() {
  document.getElementById('bericht').textContent = 'Geklikt via script.js.';
  console.log('De knop is geklikt.');
}

Zo gebruik je de console in het echt: niet gokken waar de fout zit, maar de tussenstand laten zien.

Opdracht 3: Winkelbord​

Bouw een statusbord voor een winkel. De <p> begint als "Gesloten.". De knop "Open de winkel" zet de tekst op "Open." in het groen en logt Winkel open.; de knop "Sluit de winkel" zet de tekst terug op "Gesloten." in het rood en logt Winkel dicht.. Schrijf voor elke knop een aparte functie in script.js.

Editor laden...
Tip

De knoppen in de HTML roepen openWinkel() en sluitWinkel() aan — die twee functies schrijf jij. Kleur zet je met style.color.

Antwoord
function openWinkel() {
  document.getElementById('status').textContent = 'Open.';
  document.getElementById('status').style.color = 'green';
  console.log('Winkel open.');
}

function sluitWinkel() {
  document.getElementById('status').textContent = 'Gesloten.';
  document.getElementById('status').style.color = 'red';
  console.log('Winkel dicht.');
}

Er gaat iets mis​

defer vergeten

<!-- Zonder defer: script draait vóórdat de HTML geladen is -->
<head>
  <script src="script.js"></script>
</head>

Zonder defer voert de browser script.js uit zodra hij de tag tegenkomt — de <body> bestaat dan nog niet. Code die dan al een element opzoekt, krijgt null terug, met een foutmelding in de console. Gebruik altijd defer als je een extern script in de <head> koppelt.