Functies en events (gebeurtenissen)

JavaScript wordt in een HTML pagina uitgevoerd bij het laden van de pagina. Soms willen we JavaScript pas uitvoeren bij een gebeurtenis (bijvoorbeeld bij het klikken op een knop). In zo'n geval plaatsen we de code in een functie.

Events (gebeurtenissen) worden meestal in combinatie met functies gebruikt (een groep opdrachten starten bij een bepaalde gebeurtenis).

Het voorbeeld (event.html) toont het uitvoeren van een functie bij het klikken op een knop:Weergeven

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Reactie op gebeurtenis</title>
  <script type="text/javascript">
    function datumWeergeven(){
      datum = new Date();
      document.getElementById("datum").innerHTML = datum.toLocaleDateString();
    }
  </script>
</head>
<body>
  <h1>Datum weergeven</h1>
  <input type="button" onClick="datumWeergeven();" value="Datum weergeven" />
  <p id="datum"></p>
</body>
</html>

Hoofdlettergevoelig

De naam van de functie datumWeergeven bevat een hoofdletter. In tegenstelling tot HTML is JavaScript hoofdlettergevoelig – m.a.w. let op het gebruik van hoofdletters bij JavaScript opdrachten, variabelen, objecten en functies.

Opdrachten (statements)

JavaScript opdrachten (statements) voeren bepaalde opdrachten uit. De opdracht

document.write("Welkom allemaal");

plaatst te tekst Welkom allemaal op de webpagina in de browser.

Meestal worden uitvoerbare opdrachten afgesloten met een puntkomma. De meeste JavaScript programmeurs vinden dit een goede programmeertechniek. Vandaar dat de meeste voorbeelden op het internet dit ook gebruiken.

Volgens de JavaScript standaard is het gebruik van een puntkomma optioneel en moet de browser het einde van de regel als het einde van de opdracht interpreteren.

Opmerking: met behulp van puntkomma's kan je meerdere opdrachten op één regel plaatsen.

Code

JavaScript code (of kortweg JavaScript) is een opeenvolging van JavaScript opdrachten.

Elke opdracht wordt door de browser in de volgorde van voorkomen uitgevoerd.

De volgende JavaScript code schrijft een Kop en twee paragrafen naar de webpagina:

<script type="text/javascript">
  document.write("<h1>Dit is een Kop 1</h1>");
  document.write("<p>Dit is een paragraaf.</p>");
  document.write("<p>En nog een paragraaf.</p>");
</script> 

Blok

JavaScript opdrachten kan je in blokken (blocks) groeperen.

Blokken worden ingesloten door {}.

Het doel van blokken is om een reeks opdrachten als één geheel uit te voeren.

function datumWeergeven(){
  datum = new Date();
  document.getElementById("datum").innerHTML = datum.toLocaleDateString();
}

De functie datumWeergeven is een blok met twee opdrachten die steeds samen uitgevoerd worden (namelijk bij het klikken op de knop).