Functies

Een functie wordt uitgevoerd bij een gebeurtenis (event) of bij een aanroep naar de functie.

Functies worden niet uitgevoerd bij het laden van de webpagina, ze worden enkel gedefinieerd.

Je kunt functies aanroepen vanop elke plaats op de webpagina (zelfs vanaf andere webpagina's als je de functie in een extern .js bestand hebt opgeslagen).

Functies kun je definiëren in de <head> en in de <body> tag van een webpagina (document). Om er zeker van te zijn dat de functie gedefinieerd is voor hij gebruikt wordt, wordt aangeraden de functie in de <head> van de webpagina te plaatsen.

Functies definiëren

Syntaxis:

function functienaam(variabele_1, variabele_2, ..., variabele_X) {
  JavaScript code
}

De argumenten (parameters) variabele_1, variabele_2, enz. zijn variabelen of waarden die je aan de functie doorgeeft. De { en de } bepalen het begin en het einde van de functie code.

Opmerkingen:

Een functies zonder argumenten heeft achter de functienaam ook de ronde haken () nodig.
Let op voor de hoofdlettergevoeligheid van JavaScript! Het woord function moet in kleine letters worden geschreven. De naam van de functie mag hoofdletters bevatten, maar moet bij het aanroepen op dezelfde manier inclusief hoofdlettergebruik geschreven worden.

Voorbeeld:

<!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>Functies</title>
  <script type="text/javascript">
    function geklikt(){
      alert("Je hebt op de knop geklikt.");
    }
  </script>
</head>
<body>
  <input type="button" value="Klik hier" onclick="geklikt();" />
</body>
</html>

Indien de alert opdracht niet in een functie was opgenomen, zou de alert opdracht uitgevoerd worden na het laden van de webpagina. Nu wordt de alert opdracht pas uitgevoerd als de gebruiker op de knop klikt. M.a.w. De opdracht binnen de functie geklikt() wordt pas na het klikken op de knop uitgevoerd.

De return opdracht

De return opdracht wordt gebruikt om waarden binnen een functie door te geven aan de opdracht die de functie gebruikt.

Het voorbeeld berekent het product van twee getallen en geeft het resultaat terug:

<script type="text/javascript">
  function product(a, b){
    return a * b;
  }
</script>
<p>4 x 3 = <span id="product"></span></p>
<script type="text/javascript">
  document.getElementById("product").innerHTML = product(4, 3);
</script>

Lokale variabelen

Als je binnen een functie een variabele met de opdracht var definieert, kan de variabele enkel in die functie gebruikt worden. Bij het verlaten van de functie wordt zo'n variabele vernietigd. Deze variabelen noemen we lokale variabelen. Je kunt lokale variabelen met dezelfde naam in verschillende functies definiëren en gebruiken, want ze worden enkel herkend binnen de functie waarin ze aangemaakt werden.

Bij het definiëren van een variabele buiten een functie, kan je de variabele binnen alle functies op een webpagina gebruiken. Zo'n variabele is bruikbaar vanaf het aanmaken tot het verlaten (sluiten) van de webpagina. Dit noemen we globale variabelen.