Inhoud

5. Functies

Je hebt al eens eerder functies gebruikt, zonder dat je het wist. Maar wat functies precies zijn, wat je er mee kan, hoe je ze maakt en hoe je ze gebruikt wordt in dit hoofdstuk uitgelegd.

Naar boven

5.1. Wat is een functie?

Een functie is eigenlijk een stukje code met een naam, zodat je die code makkelijk later nog eens kan gebruiken zonder hem helemaal overnieuw te moeten schrijven. Nou kan je natuurlijk alles kopiëren en plakken, maar als je dan wat wil wijzigen moet dat op al die verschillende plekken en bovendien is het waarschijnlijk niet overzichtelijk. Maar nog belangrijker is dat je de functie zo kan maken dat de code die uitgevoerd wordt wel hetzelfde is maar telkens net wat anders doet, daarover meer in H5.4.

In JavaScript bestaat een functie uit 2 delen. De naam, en de argumenten tussen haakjes: functie(argumenten). Wat die argumenten dus precies zijn wordt in H5.4 uitgelegd. Deze notatie zal je waarschijnlijk wel bekend voorkomen van bijvoorbeeld alert en prompt. Voor het maken van een naam voor zo'n functie gelden dezelfde regels als voor het maken van een naam voor een variabele (zie H4.2). Hierbij geldt echter wel dat een variabele niet dezelfde naam als een functie mag hebben, en een functie mag niet dezelfde naam als een variabele hebben. Anders weet de browser niet wat je nou bedoelt, de variabele of de functie.

Naar boven

5.2. Functies maken en gebruiken

Wanneer je een variabele aanmaakt gebruik je het woordje var ervoor (H4.2), zo gebruik je wanneer je een functie maakt het woordje function ervoor. Daarna komt dus de naam van de functie en daarna volgen de haakjes (in H5.4 zul je zien waar die haakjes voor dienen):

JavaScript:

function f()

Om nu code aan deze functie toe te wijzen moeten we eerst aangeven welke code er bij die functie hoort. Hiervoor type je eerst een { om aan te geven dat de code daar begint en na de code die bij deze functie hoort type je een }. Het is handig eerst { } te typen en daarna pas de code ertussen te zetten, zo vergeet je nooit de } op het laatst (wat anders nog wel eens wil gebeuren).

JavaScript:

function f()
{
    // Code hier...
}

Het is een goede gewoonte een tab in te springen binnen de accolades (dus voor elke regel code een tab zetten), zo hou je de code overzichtelijker.

Wat kan er nou als code in zo'n functie staan? Eigenlijk alle code die je normaal ook kan schrijven:

JavaScript:

function vraagNaam()
{
    var naam = prompt("Wat is uw naam?");
    alert("Hoi " + naam + '!');
}

Het aanroepen van een zelfgemaakte functie gaat zoals je gewend bent van de ingebouwde functies

JavaScript:

function vraagNaam()
{
    var naam = prompt("Wat is uw naam?");
    alert("Hoi " + naam + '!');
}
 
vraagNaam();    // Roep de functie aan, dus: voer de code die in de functie vraagNaam() staat uit

Normaliter wordt code uitgevoerd zodra de browser die code tegenkomt. Dat geldt niet voor code in een functie, die wordt pas uitgevoerd zodra de functie aangeroepen wordt.

Naar boven

5.3. Functies die iets teruggeven

Een functie kan ook een bepaalde waarde teruggeven. Dat doet prompt bijvoorbeeld. Het teruggeven van een waarde gebeurt met return en daarachter komt dan de waarde die teruggegeven moet worden. De functie stopt ook gelijk als hij een return tegenkomt, daar wordt ook veel gebruik van gemaakt door return; aan te roepen. Nu staat er geen waarde achter return, dus wordt er niks teruggegeven door de functie maar de functie wordt wel op die plek beëindigd.

JavaScript:

function vraagNaam()
{
    var naam = prompt("Wat is uw naam?");   // Hier zie je het ook al gebeuren: prompt() geeft een waarde terug, dus die komt op de plaats van prompt() en wordt opgeslagen in de variabele naam
    alert("Hoi " + naam + '!');
    return naam;                            // Geef de waarde van naam terug, d.m.v return. De functie eindigt hier dus ook direct (maakt in dit geval niks uit)
}

Het aanroepen van zo'n functie heb je al eens gedaan, en is dan ook eigenlijk niks nieuws. Nadat een functie die een waarde teruggeeft aangeroepen is, komt de waarde die de functie teruggeeft op zijn plaats te staan. Dit zag je al gebeuren in H4.3, nadat prompt() is aangeroepen wordt de waarde die in zijn plaats komt opgeslagen in een variabele.

JavaScript:

function vraagNaam()
{
    var naam = prompt("Wat is uw naam?");
    alert("Hoi " + naam + '!');
    return naam;    // Geef de waarde van naam terug
}
 
vraagNaam();        // Roep de functie vraagNaam() aan, ookwel: voer de code binnen vraagNaam() uit
 
// Of gezien vraagNaam() een waarde teruggeeft:
var gebruikersnaam = vraagNaam();
document.write("U bent ingelogd als: " + gebruikersnaam);
document.write("<br />");
 
// Of zelfs makkelijker:
document.write("U bent ingelogd als: " + vraagNaam());
 
// Die laatste regel voert eerst de functie vraagNaam() uit
// De waarde die teruggegeven wordt maak je vast aan de string "U bent ingelogd als: "
// En dat geheel zet je op het scherm met document.write

Merk op dat document.write() een punt in zijn naam heeft, en volgens de regels voor de naamgeving mag dat helemaal niet. Wat die punt daar betekent, en hoe dat kan wordt uitgelegd in H9.3 en H9.4 en is nu nog niet van belang.

De code in zo'n functie wordt pas uitgevoerd zodra die functie wordt aangeroepen. In tegenstelling tot wat tot nu toe gebeurde, namelijk dat de code werd uitgevoerd zodra de browser die code leest.

Merk op dat niet alle functies na te bouwen zijn. Het is bijvoorbeeld onmogelijk om alert of prompt na te maken. Dat zou ook volstrekt onnodig zijn want die bestaan immers al. Deze functies zijn al ingebouwd door de browser en hebben een ander soort code in hun kern (zoals bijvoorbeeld C++).

Naar boven

5.4. Parameters en argumenten

Je maakt vaak een functie om iets wat vaak moet gebeuren in een stukje code te kunnen stoppen. Maar soms moet er telkens net iets anders gebeuren. Een voorbeeld hiervan is alert(), die geeft elke keer dat hij wordt aangeroepen een pop-up met een tekst. Maar hij doet niet elke keer precies hetzelfde, er staat namelijk elke keer een andere tekst in de pop-up. Het zou vrij onhandig (noem het maar: onmogelijk) zijn als je voor elke tekst die in zo'n pop-up kan verschijnen een andere functie moet maken. Daarvoor zijn de parameters en argumenten bedacht.

Een argument is een waarde die meegegeven wordt aan een functie bij het aanroepen van de functie. Een parameter is een onbekende variabele waarop een functie zijn uitvoer baseert. Een parameter wordt dus eigenlijk een argument genoemd zodra de functie wordt aangeroepen en het dus bekend is welke waarde de parameter heeft. Soms kan een functie meerdere parameters hebben (zoals prompt())

JavaScript:

// Roep een functie aan (alert())
// en geef de waarde "Hello world!" mee als argument
alert("Hello world!");
 
// Roep een functie aan (prompt())
// en geef de waarde "Wilt u de nieuwsbrief ontvangen?" als eerste argument mee
// en de waarde "Ja" als tweede argument
var spamMe = prompt("Wilt u de nieuwsbrief ontvangen?", "Ja");

Argumenten worden dus gescheiden door komma's. Ze kunnen elk soort waarde bevatten, een getal, een string of nog iets anders (andere datatypen worden later besproken).

Als je zelf een functie maakt die gebruik maakt van parameters, zet je die parameters tussen de haakjes. Je geeft elke parameter een naam, waarbij weer dezelfde regels gelden als bij het geven van een naam aan een variabele of functie. De parameters zijn dan als gewone variabelen binnen de code van de functie beschikbaar:

JavaScript:

function telOp(a, b)            // Twee parameters, genaamd a en b
{
    return a + b;               // Tel a bij b op en geef die waarde terug
}
 
document.write(telOp(5, 6));    // Uitvoer: 11
document.write("<br />");
document.write(telOp(40, 2));   // Uitvoer: 42

Naar boven

5.5. De scope van variabelen

Variabelen zijn niet overal zichtbaar of te gebruiken, ze hebben dus een zogenaamde scope. De scope van een variabele is het stuk code waarin de variabele bestaat en dus gebruikt kan worden. Je kan eigenlijk zeggen dat de scope van een variabele is vanaf het punt waar hij aangemaakt wordt tot de sluitende } van de {} waar hij tussen staat:

JavaScript:

var a = 11;
function f(b)
{
    var c = a*b;
    b += a;
    document.write(a + ", " + b + ", " + c);
    a++;
}
function g(b)
{
    document.write(a + ", " + b);
}
f(1); // Uitvoer: 11, 12, 11
document.write("<br />");
g(0); // Uitvoer: 12, 0
document.write("<br />");
f(2); // Uitvoer: 12, 14, 24
document.write("<br />");
g(8); // Uitvoer: 13, 8
document.write("<br />");
f(3); // Uitvoer: 13, 16, 39
document.write("<br />");
g(7); // Uitvoer: 14, 7

Nou zie je dus dat variabele a door het hele script heen bestaat en dus vanuit alle functies gebruikt en gewijzigd kan worden. Dat komt omdat a globaal is aangemaakt zoals dat heet. Het is dus een variabele die niet in een functie is aangemaakt en dus overal bekend is.

Er zijn 2 verschillende variabelen b. Eentje als parameter van de functie f, en de ander als parameter van de functie g. Maar ze hebben niks met elkaar te maken. Want ze worden telkens aan het begin van de functie aangemaakt, en aan het einde (bij de sluitende }) vernietigd.

Verder kent functie f ook nog de variabele c, die wordt binnen in die functie aangemaakt en zal dus ook aan het einde vernietigd worden. Waardoor die niet bruikbaar is buiten de functie.
Dit zou dus niet kunnen:

JavaScript:

var a = 11;
function f(b)
{
    var c = a*b;
    b += a;
    document.write(a + ", " + b + ", " + c);
    a++;
}
function g(b)
{
    document.write(a + ", " + b);
}
f(1);       // Uitvoer: 11, 12, 11
alert(c);   // Kan niet! c bestaat enkel in functie f

Naar boven

5.6. Opdrachten

Schrijf een functie product. Deze functie moet twee getallen aan de gebruiker vragen (je mag er weer vanuit gaan dat er geldige getallen ingevoerd worden), deze twee getallen moeten met elkaar vermenigvuldigd worden en vervolgens moet het resultaat daarvan weergegeven worden met een alert-boxje.
Wanneer de functie om het tweede getal vraagt moet standaard het eerste getal ingevoerd staan. Dus stel je voert de eerste keer 5 in, dan moet bij de tweede vraag standaard 5 ingevuld staan.
Test je functie door hem 3x aan te roepen. (H5.2)
Hetzelfde als opdracht 1. Alleen nu maak je niet een functie product maar een functie som, die dus, zoals de naam al zegt, de twee getallen bij elkaar optelt. Verder moet de functie niet het resultaat weergeven, maar teruggeven. Schrijf wederom een stukje code om de functie 3x te testen en het resultaat met een alert-boxje weer te geven.
Je zit nu alleen met het probleem dat prompt() eigenlijk een string teruggeeft (dus niet gewoon 5 maar eigenlijk '5'). JavaScript zet een string automatisch om in een getal als dat nodig is en als dat kan. Dus als je '5'*'6' schrijft dan worden ze omgezet naar getallen en is de uitkomst 30 (want je kan geen strings met elkaar vermenigvuldigen, maar wel getallen). Een probleem ontstaat wanneer je de strings optelt, '5'+'6' zal '56' opleveren, en niet 11. Dit komt omdat je wel twee strings bij elkaar op kan tellen en dus is het niet nodig ze om te zetten in een getal.
Zoek dus in deze functie zelf een manier om te voorkomen dat je twee aan elkaar geplakte strings krijgt, en daarvoor in de plaats gewoon de som van die 2 ingevoerde getallen (je mag er weer vanuit gaan dat er geldige getallen ingevoerd worden). (H5.3)
Maak weer een functie som(), alleen dit keer krijgt hij 2 argumenten die hij bij elkaar optelt. Test je functie vervolgens met de volgende code:
```
alert(som(prompt("Getal 1?",''), prompt("Getal 2?", '')));
```
Ga er maar weer vanuit dat er geldige getallen ingevoerd worden. (H5.4)
Maak een functie kwadraat() die het kwadraat van zijn parameter geeft. Maak ook een functie pythagoras() die de schuine zijde van een driehoek, dus c, uitrekent (a² + b² = c²). Hierbij moet de functie pythagoras() gebruik maken van kwadraat(), en krijgt pythagoras() dus de twee andere zijden als argument door.
Voor de vierkantswortel gebruik je de in JavaScript ingebouwde functie Math.sqrt().

Schrijf ook een stukje code om je functie te testen. (H5.4)
Maak een script waarin je 1 globale variabele aanmaakt, en gelijk de waarde 0 geeft. Je maakt ook een functie in dit script, deze functie heeft 1 parameter en je maakt in die functie een lokale variabele aan (d.w.z: een variabele die alleen zichtbaar is in die functie). Je mag zelf een waarde voor die lokale variabele kiezen.
Vervolgens telt die functie zijn parameter, de globale variabele en de lokale variabele bij elkaar op en laat hij zien wat het resultaat daarvan is (met alert() of document.write()).
Roep de functie twee keer met hetzelfde argument aan, en een keer met een ander argument. Zorg dat de uitvoer alle drie de keren anders is. (H5.5)
Bekijk het volgende stukje code:
```
var a = 12;
/* [A] */
�
function f(a)
{
    var b = 16;
    /* [B] */
    return a+b;
}
�
function g(b)
{
    /* [C] */
    return a+b;
}
�
/* [D] */
alert(g(f(10)));
```
Op een aantal plekken staat commentaar (zoals: /* [A] */) geef van die plekken aan welke variabelen daar bekend zijn en welke waarde ze hebben. Geef ook het getal dat de alert-box zal weergeven. (H5.5)
Maak een functie die de volgende tekst op het scherm zet:
Ik ben x keer aangeroepen!
Waarbij x wordt vervangen door het aantal keer dat de functie is aangeroepen. De functie mag geen argument mee krijgen. Roep de functie 10x aan, zodat de uitvoer als volgt is:
Ik ben 1 keer aangeroepen!
Ik ben 2 keer aangeroepen!
Ik ben 3 keer aangeroepen!
Ik ben 4 keer aangeroepen!
Ik ben 5 keer aangeroepen!
Ik ben 6 keer aangeroepen!
Ik ben 7 keer aangeroepen!
Ik ben 8 keer aangeroepen!
Ik ben 9 keer aangeroepen!
Ik ben 10 keer aangeroepen!

Extra: als je het kan, probeer dan maar 1 statement te gebruiken in de functie. (H5.5)