Inhoud

5. Functies

Je hebt in de vorige hoofdstukken al een paar functies gebruikt, zoals alert en prompt. 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. Nu 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 toch telkens net wat anders doet, daarover meer in H5.4.

In JavaScript bestaat een functie uit 3 delen. Het woord function, de functienaam en de parameters tussen haakjes: function functienaam (parameters). Wat die parameters precies zijn wordt in H5.4 uitgelegd. 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. Je ziet namelijk meteen wanneer de code die bij een fucntie hoort begint en waar die eindigt. Met name bij grotere stukken code is inspringen binnen accolades zeer belangrijk!

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: Noem de functie, inclusief de haakjes openen en sluiten, met daartussen eventueel een of meerdere expressies

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.

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 als het ware op zijn plaats te staan; de functieaanroep heeft een waarde gekregen en is dus een expressie. 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
}
// Roep de functie vraagNaam() aan, voer de code binnen vraagNaam() uit
// Er gebeurt nu echter niets met wat teruggegeven wordt
vraagNaam();        
 
// Of, aangezien vraagNaam() een waarde teruggeeft 
// en dus een expressie is (een waarde heeft),
// toewijzen aan een variabele :
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. 
// Deze functie geeft iets, een bepaalde waarde, terug en is dus een expressie
// De waarde van deze expressie, dat wat teruggegeven wordt, wordt vastgmeaakt aan de string "U bent ingelogd als: "
// En dat geheel wordt op het scherm gezet 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.

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.

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
 
 // Merk op dat bij de eerst en de derde write er een functie aangeroepenwordt
 // die iets teruggeeft. De aanroep is dus een expressie, het heeft een waarde
 // en kan dus aan de functie write worden meegegeven als argument.
 // Dit is korter dan bijvoorbeeld:
 
 var uitkomst = telOp(5, 6);
 document.write(uitkomst);

Naar boven

5.5. De scope van variabelen

Variabelen zijn niet overal zichtbaar of te gebruiken, ze hebben een zogenaamde scope. De scope van een variabele is het stuk code waarin de variabele bestaat en dus gebruikt kan worden. Je kan eigenlijk stellen dat de scope van een bepaalde variabele loopt 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 twee 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. Expressies

Alles dat een waarde heeft noemen we een expressie.

Dat geldt niet alleen voor eenvoudige getallen en stukken tekst (strings), maar ook voor berekeningen en aanroepen van functies die een waarde teruggeven, zoals prompt en parseInt.Naar boven

5.7. Functie parseInt

Als je via prompt om twee getallen vraagt en deze op wilt tellen, dan gaat het fout. De antwoorden die gegeven worden, worden namelijk als een string gezien. En twee strings 'optellen' betekent aan elkaar vast maken.

Als je in onderstaand voorbeeld de getallen 6 en 7 invult, dan krijg je 67 te zien.

JavaScript:

var getal1 = prompt("Geef het eerste getal","");
var getal2 = prompt("Geef het tweede getal","");
alert(getal1 + getal2); 	//Dit gaat fout!

Om een string om te zetten naar een getal gebruiken we parseInt():

JavaScript:

var getal1 = prompt("Geef het eerste getal","");
var getal2 = prompt("Geef het tweede getal","");
getal1 = parseInt(getal1);
getal2 = parseInt(getal2);
alert(getal1 + getal2); 	//Dit gaat goed

Als je geen getallen hebt ingevoerd krijg je NaN als resultaat (Not a Number).

Je kan prompt en parseInt ook combineren in ��n statement.

JavaScript:

var getal1 = parseInt(prompt("Geef het eerste getal",""));
var getal2 = parseInt(prompt("Geef het tweede getal",""));
alert(getal1 + getal2); 	//Dit gaat goed

De functie prompt geeft iets terug, de aanroep van die functie krijgt dus een waarde, en is dus een expressie. En die expressie kan weer als argument worden doorgegeven aan de functie parseInt.

Naar boven

5.8. 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 daarbij al het eerste getal ingevoerd staan. Dus stel je voert op de vraag naar het eerste getal 5 in, dan moet bij de vraag naar het tweede getal 5 al ingevuld staan.
Test je functie door hem 3x aan te roepen. (H5.2)
Antwoord
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 zélf 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.
(H5.3)
Antwoord
Maak weer een functie som(), alleen dit keer krijgt hij 2 argumenten door, die hij bij elkaar moet tellen. Er moet dus niet in de funcie pas naar de getallen worden gevraagd. Test je functie vervolgens met de volgende code(buiten de functie dus):
```
alert(som(prompt("Getal 1?",''), prompt("Getal 2?", '')));
```
Ga er maar weer vanuit dat er geldige getallen ingevoerd worden. (H5.4)
Antwoord
Maak een functie kwadraat() die het kwadraat van zijn parameter teruggeeft. 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() de twee rechthoekzijdes a en b als argumenten door.
Voor de vierkantswortel gebruik je de in JavaScript ingebouwde functie Math.sqrt().

Schrijf ook een stukje code, buten de functies, om je functies te testen. Daarin moeten de lengtes van de zijdes a en b worden gevraagd, en vervolgens met behulp van de functie pythagoras de lengte van de schuine zijde c worden weergegeven. (H5.4)
Antwoord
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(en) meekrijgen! 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 door maar 1 statement te gebruiken in de functie. (H5.5)
Antwoord