Ga naar hoofdinhoud

De script-tag

Tot nu toe schreef je code direct in onclick. Dat werkt voor één regel, maar in Opdracht 2 van Inline stijl zag je al hoe onleesbaar het wordt zodra er meer bij komt:

<!-- Onoverzichtelijk: -->
<button onclick="document.getElementById('a').textContent='X'; document.getElementById('b').style.color='red'; ...">

De oplossing is een functie.

Stap 1: functies​

Een functie is een blok code met een naam. Je definieert hem één keer en roept hem daarna aan zo vaak als je wil:

function verander() {
  document.getElementById('bericht').textContent = 'Geklikt.';
  document.getElementById('bericht').style.color = 'green';
}
  1. function: het sleutelwoord dat zegt dat hier een functie begint.
  2. verander: de naam, die kies je zelf. Geen spaties; gebruik camelCase voor meer woorden (maakKleurRood).
  3. (): twee ronde haakjes. Die horen bij elke functie; ze blijven in deze cursus leeg.
  4. { ... }: accolades met daartussen de regels code die draaien zodra je de functie aanroept.

Definiëren is nog niet uitvoeren​

De code binnen de accolades draait niet vanzelf. Hij draait pas als je de functie aanroept: de naam typen met () erachter.

verander();   // nu draait de code binnenin

In HTML gebeurt dat aanroepen via onclick:

<button onclick="verander()">Klik mij</button>
Naam zonder haakjes vs. mét haakjes

verander (zonder haakjes) is een verwijzing naar de functie — alsof je een telefoonnummer noemt. verander() (mét haakjes) is een aanroep — alsof je dat nummer ook echt belt.

Stap 2: de script-tag​

De functie zelf zet je in een <script>-tag, onderaan de <body> — zo bestaan alle HTML-elementen al op het moment dat de code laadt:

<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 voordat je op de knop klikt.

Hoeveel dingen veranderen er tegelijk als je op de knop klikt?

Twee: de tekst én de kleur van de <p>. De functie voert bij een aanroep alle regels binnen de accolades uit, hoeveel het er ook zijn.

Probeer het zelf.​

JavaScript in het HTML-tabblad

In deze les staat de JavaScript-code in een <script>-tag binnenin de HTML. Je vindt de code in het index.html-tabblad, onderaan de <body>.

Editor laden...

Investigate​

Experimenteer in het veld hierboven:

  • Klik twee keer op de knop. Verandert er na de eerste klik nog iets? Waarom (niet)?
  • Hernoem de functie in de <script>-tag naar veranderTekst, maar laat de onclick staan. Welke foutmelding zie je in de console onder het voorbeeld?
  • Roep de functie een tweede keer aan door onderaan de <script>-tag los verander(); toe te voegen. Wat zie je al vóórdat je klikt?
Voorspel: je vergeet de sluitende } van de functie. Wat staat er in de console, vóór en na een klik?

Al vóór de klik, zodra de pagina laadt:

JavaScript fout: Uncaught SyntaxError: Unexpected end of input

Na een klik komt er een tweede regel bij:

JavaScript fout: Uncaught ReferenceError: verander is not defined

Omdat de browser de <script> niet kon lezen, heeft hij de functie nooit gemaakt. De tweede melding is een gevolg van de eerste. Los bij meer meldingen altijd de bovenste eerst op.

Opdracht 1: Derde regel​

Breid de functie verander() uit: na een klik worden de letters ook groter (style.fontSize).

Editor laden...
Tip

Eén extra regel binnen de accolades, naar het voorbeeld van de twee regels die er al staan.

Antwoord
function verander() {
  document.getElementById('bericht').textContent = 'Geklikt.';
  document.getElementById('bericht').style.color = 'green';
  document.getElementById('bericht').style.fontSize = '2rem';
}

Opdracht 2: Herstel-knop​

Voeg een knop "Herstel" toe die de tekst en de kleur terugzet naar de beginwaarden. Schrijf er een eigen functie voor.

Editor laden...
Tip

Een tweede functie herstel() in dezelfde <script>-tag, en een tweede knop met onclick="herstel()". Een lege string ('') verwijdert een inline stijl.

Antwoord

HTML-toevoeging:

<button onclick="herstel()">Herstel</button>

Toevoeging in de <script>-tag:

function herstel() {
  document.getElementById('bericht').textContent = 'Klik op de knop.';
  document.getElementById('bericht').style.color = '';
}

Opdracht 3: Lichtknop​

Bouw vanaf een lege pagina een lichtknop: een <p> die begint als "Licht is uit.", een knop "Aan" die de tekst op "Licht is aan." zet en de achtergrond geel maakt, en een knop "Uit" die alles terugzet. Schrijf voor elke knop een aparte functie in een <script>-tag.

Editor laden...
Tip

Gebruik style.backgroundColor voor de achtergrondkleur, en '' om hem weer weg te halen.

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';
    }
    verander();   // Fout: dit draait meteen, de <p> bestaat nog niet
  </script>
</head>
<body>
  <p id="bericht">Tekst</p>
</body>
JavaScript fout: Uncaught TypeError: Cannot set properties of null (setting 'textContent')

De aanroep verander(); draait zodra de browser de <script>-tag in de <head> tegenkomt — en op dat moment is de <body> nog niet geladen, dus getElementById geeft null. Alleen de functie definiëren in de <head> is niet erg (die draait pas later), maar code die meteen een element aanraakt wel. Zet de <script>-tag daarom onderaan de <body>, na alle HTML-elementen. In script.js zie je hoe je dit met defer ook vanuit de <head> oplost.

Functienaam verschilt tussen onclick en <script>

<button onclick="veranderTekst()">Klik</button>

<script>
  function verander() {
    document.getElementById('bericht').textContent = 'Hoi';
  }
</script>
JavaScript fout: Uncaught ReferenceError: veranderTekst is not defined

De knop roept veranderTekst aan, maar de functie heet verander. "Is not defined" betekent: deze naam ken ik niet. Kijk bij deze melding of de naam in de onclick letter voor letter gelijk is aan de naam achter function, hoofdletters meegeteld.