Een functie kan je in Javascript gebruiken om een groep opdrachten te kunnen uitvoeren met een aangegeven naam. De opdrachten of statements die binnen de functie staan worden uitgevoerd wanneer de functie wordt aangeroepen.Een functie kan waarden ontvangen en retourneren naar de plaats van aanroep.
Eenvoudig voorbeeld:
function toonzin(){
document.write('Een zin in een functie.<BR>');
}
Het sleutelwoord function wordt gebruikt om een functie aan te maken. Dit woord wordt gevolgd door de naam van de functie, deze naam kan je zelf kiezen. Na de naam van de functie noteer je een paar ronde haken ( en ). Hier zal je later namen van argumenten noteren. De functie toonzin ontvangt geen argumenten, toch moeten de ronde haken er staan.
De statements die de ziel van de functie uitmaken worden genoteerd tussen accolades: { en }.
Wanneer deze functie wordt aangeroepen zal de zin in het document worden geplaatst.
Functies worden doorgaans in een script-blok in de hoofding van de pagina geplaatst. De informatie in de hoofding wordt geladen vooraleer de browser iets toont, zodoende ben je er zeker van dat de functie reeds geladen en dus gekend is door de browser vooraleer je ze aanroept.
Een functie doet niks op zich, de statements binnen de functies worden pas uitgevoerd wanneer de functie wordt aangeroepen.
<HTML>
<HEAD>
<TITLE>Cursus HTML - IVO Brugge</TITLE>
<script type="text/javascript">
<!--
function toonzin(){
document.write('Een zin in een functie.<BR>');
}
// -->
</script>
</HEAD>
<BODY>
<script type="text/javascript">
<!--
toonzin()
// -->
</script>
</BODY>
</HTML>
Je merkt dat de functie-declaratie in de hoofding van de pagina staat. Het aanroepen van deze functie gebeurt binnen de BODY van het document, daar de document.write-opdracht die zal worden uitgevoerd informatie op het zichtbare gebied van de webpagina moet plaatsen.
Functies kunnen meerdere keren worden aangeroepen binnen hetzelfde document. Dit kan met een eenvoudige for-lus gedemonstreerd worden:
for (var teller = 1 ; teller < 11 ; teller ++){
toonzin()
}
We zorgen ervoor dat we zelf kunnen kiezen welke zin we op het scherm zetten.
Hiervoor doen we twee aanpassingen:
- we geven bij aanroep van de functie een argument mee: de weer te geven zin.
- we zorgen ervoor dat het argument bruikbaar is in de functie door het te stockeren in een variabele. De naam van deze variabele is in dit voorbeeld tekst, deze naam kan je zelf kiezen.
<HTML>
<HEAD>
<TITLE>Cursus HTML - IVO Brugge</TITLE>
<script type="text/javascript">
<!--
function toonzin(tekst){
document.write(tekst +'<BR>');
}
// -->
</script>
</HEAD>
<BODY>
<script type="text/javascript">
<!--
toonzin("Een eerste zin");
toonzin("Een tweede zin");
toonzin("Nog een zin");
// -->
</script>
</BODY>
</HTML>
Belangrijk: de scope (levensduur) van de variabele tekst is enkel de functie toonzin, buiten de functie is de variabele niet gekend.
Een functie kan ook een waarde retourneren naar de plaats van aanroep.
Met het sleutelwoord return geef je aan welke waarde je wenst te retourneren
<HTML>
<HEAD>
<TITLE>Cursus HTML - IVO Brugge</TITLE>
<script type="text/javascript">
<!--
function dubbel(getal){
if(!isNaN(getal)) return 2 * getal
else return "geen getal !"
}
// -->
</script>
</HEAD>
<BODY>
<script type="text/javascript">
<!--
document.write("<br>" +dubbel(50));
document.write("<br>" +dubbel(46.2));
document.write("<br>" +dubbel("aap"));
// -->
</script>
</BODY>
</HTML>
Het sleutelwoord return wordt vaak gebruikt om functies vroegtijdig (onder bepaalde voorwaarden) te beëindigen.
Je zal tijdens het leren en werken met Javascript talloze nuttige functies schrijven die je wellicht op vele pagina's van je website zal kunnen gebruiken. Om de functie niet op elke pagina te moeten hernemen, met de nodige onderhoudsproblemen die hiermee gepaard gaan, kan je ervoor opteren om functies onder te brengen in aparte bestanden met een extensie .
js.
functie5.html
<HTML>
<HEAD>
<TITLE>Cursus HTML - IVO Brugge</TITLE>
<script type="text/javascript" src="functie5.js"></script>
</HEAD>
<BODY>
<script type="text/javascript">
<!--
document.write("<br>" +dubbel(50));
document.write("<br>" +dubbel(46.2));
document.write("<br>" +dubbel("aap"));
// -->
</script>
</BODY>
</HTML>
functie5.js
function dubbel(getal){
if(!isNaN(getal)) return 2 * getal
else return "geen getal !"
}
