Programmeren in JavaScript/Functies
Op een pak macaroni in de supermarkt trof ik het volgende recept aan:
Recept-code: Macaroni met ham en kaas
Kook de macaroni volgens de algemene bereidingswijze
Meng de hamblokjes en de gemalen kaas door de macaroni
Algemene bereidingswijze:
{
Zet een ruime hoeveelheid water op en wacht tot die kookt
Doe de macaroni in het water
Laat 8 minuten koken
Giet af
}
De "algemene bereidingswijze" is hier een deelrecept, dat ook voor andere macaronischotels dan "ham en kaas" gebruikt kan worden. Daarom zetten we het apart en geven in het recept aan dat het deelrecept moet worden uitgevoerd. Wanneer de eerste regel van het recept zou hebben ontbroken, zou het deelrecept nooit zijn uitgevoerd en zouden we onze tanden breken op de ongekookte macaroni.
Het equivalent van een deelrecept in JavaScript is een function
Je kunt in vele programmeer- en scripttalen zogenaamde functies aanmaken. Functies zijn stukjes code die buiten de rest van de script worden geschreven. Die code worden alleen maar uitgevoerd wanneer de script er expliciet om vraagt. Als een script veel dezelfde code bevat kun je de code die altijd hetzelfde is apart zetten in een functie en die functie telkens opnieuw oproepen.
Functies aanmaken
bewerkenEen functie aanmaken is heel simpel en gaat als volgt:
JavaScript-code: Je eerste functie
function hallowereld(){
document.write("Hallo Wereld!");
}
hallowereld();
Deze functie laat het tekstje "Hallo Wereld!" zien op het scherm. Je begint eerst met het woord function te typen; dit geeft aan dat je een functie wilt aanmaken. Vervolgens geef je een naam aan de functie die kort omschrijft wat ze doet. Hier heet de functie hallowereld. De haakjes("()") moeten er altijd staan, net zoals de accolades({}) die aangeven waar de functie begint en eindigt. Alles wat tussen de accolades staat wordt uitgevoerd wanneer die functie wordt opgeroepen. Een functie oproepen doe je gewoon door de naam van de functie te typen. Vergeet vooral de haakjes niet, want anders denkt JavaScript dat het een gewone variabele is. Over de haakjes gesproken: ze hebben nog een bijkomende functie, die we gaan uitleggen met de algemene notatie van een functie.
JavaScript-code: Algemene notatie
function functienaam(parameter1, parameter2, ..., parameterN){
//code
}
Tussen de haakjes kun je zogenaamde parameters zetten, dat kan er ééntje zijn maar ook oneindig veel. Parameters zijn eigenlijk variabelen en dienen om gegevens uit te wisselen tussen het script en de functies.
JavaScript-code: Parameters
function hallo(naam){
document.write("Hallo " + naam + "!<br />");
}
var naamVanPersoon = "Jan"
hallo(naamVanPersoon);
hallo("jan");
Gegevens kun je doorgeven aan een functie d.m.v. een variabele zoals bij hallo(naamVanPersoon); of je kunt ze ook rechtstreeks geven aan een functie zoals hallo("jan");. Over variabelen gesproken, variabelen die gedeclareerd zijn in een functie gelden niet buiten een functie. Buiten een functie kun je ze dus niet oproepen zoals in het volgende voorbeeld.
JavaScript-code: Variabelen in ene functie
function functie(){
var x = 10;
}
document.write(x);
Als je dit zou doen zul je foutmeldingen krijgen en komt er niets op het scherm.
De return
bewerkenHoewel je variabelen die gedeclareerd zijn in een functie niet daarbuiten kunt gebruiken, is er toch een manier om de gegevens in de rest code te gebruiken. We kunnen dit doen via de return. De return laat toe om de gegevens van een variabele door te sturen naar een andere variabele of object buiten de functie.
JavaScript-code: Variabelen in ene functie
<html>
<head>
<script type="text/javascript">
function oppervlakte(x,y){
var uitkomst = x * y;
return uitkomst;
}
</script>
</head>
<body>
<script type="text/javascript">
var x = 10;
var y = 20;
var uitkomst = oppervlakte(x,y);
document.write(uitkomst);
</script>
</body>
</html>
Functies in een variabele
bewerkenIn javascript kun je functies ook in een variabele stoppen:
JavaScript-code: Functies in een variabele
function uitvoer(s)
{
writeln(s);
}
var f = uitvoer;
f("kijk nou toch");
Hierboven heb ik eerst een functie "uitvoer" aangemaakt. Vervolgens heb ik de functie aan de variable "f" toegewezen. Ik kan nu "f" als functie gebruiken. Je kunt ook een functie aan een variabele toewijzen zonder hem eerst "apart" aan te maken:
JavaScript-code: Functies in een variabele
var f = function(s) {writeln(s);};
f("asjemenou");
Dit laatste wordt vaak toegepast bij het aanmaken van methoden in objecten (zie later);