Functies

	Functies
	Vaak wil je in programmeertalen stukken code vaker gebruiken. Bijvoorbeeld als je een boom zou willen tekenen met processing. Je kan dan steeds zeggen teken een bruine rechthoek op positie x,y en teken daarbovenop een groen rondje. Dit zou er in code zo uitzien: fill(94, 70, 3); rect(100, 200, 31,79); fill(2, 56, 9); ellipse(116, 187, 70, 70); Regel 1: Vul met bruine kleur Regel 2: Teken een rechthoek op 100,200 van grootte 31 bij 79 Regel 3: Vul met groene kleur Regel 4: Teken een rondje op 116,187 met diameter 70 Stel je voor dat je 10 bomen wil tekenen. Je zou dan bovenstaande code 10 keer kunnen kopiëren. Je krijgt dan voor iets ‘simpels’ al heel veel (40) regels code. Dit kan veel handiger, namelijk met behulp van functies. Een functie is een aantal regels code die samen een bepaald 'iets' doen, een functie hebben (vandaar de naam). De 4 regels code hierboven hebben samen de functie om een boom te tekenen. Omdat we dit vaker willen doen kan je deze vier regels ook in een functie zetten: function boom() { fill(94, 70, 3); rect(100, 200, 31,79); fill(2, 56, 9); ellipse(116, 187, 70, 70); } Regel 1: Syntax voor het definiëren van een functie met naam boom Regel 2: Accolade die begin van code van functie aangeeft Regel 3, 4, 5 en 6: Code die uitgevoerd wordt als de functie boom wordt aangeroepen Regel 7: Accolade die eind van code van functie aangeeft De code voor het tekenen van een boom is nu in een functie gezet. Deze code kan je nu vanuit elke andere regel in je code ‘aanroepen’. Dat doe je simpel door ‘boom();’ in de code te zetten. Als je met de vorige 4 regels code 10 bomen zou willen tekenen heb je in totaal 40 regels code nodig. Als je met de functie 10 bomen wil tekenen heb je bovenstaande 7 regels plus 10 regels waarin je 10 keer de functie aanroept dus in totaal 17 regels. Zoals je ziet is er voor zoiets ‘simpels’ al een ‘besparing’ van 23 regels!! Het probleem met deze code is dat je alle bomen op hetzelfde punt gaat tekenen. Omdat je in je code hebt staan dat je het op punt 100,200 gaat tekenen. Je wilt natuurlijk dat elke boom op een ander punt getekend gaat worden (anders heb je 10 bomen getekend maar zie je er maar een). Dit kan ook met functies. Je kunt namelijk waardes (argumenten genoemd) meegeven aan een functie waarmee je binnen die functie kan werken of iets kan berekenen. In code ziet dat er zo uit: function boom(posX, posY) { fill(94, 70, 3); rect(posX, posY, 31,79); fill(2, 56, 9); ellipse(posX+16, posY-13, 70, 70); } Regel 1: Syntax voor het definiëren van een functie met naam boom met argumenten posX en posY Regel 2, 3, 4 en 5 : Code die uitgevoerd wordt als de functie boom wordt aangeroepen. Hier kun je nu de argumenten posX en posY gebruiken Doordat je de functie nu met argumenten hebt gedefinieerd is de aanroep van de functie ook anders dan bij een functie zonder argumenten. Nu roep je de functie aan door de naam te gebruiken en dan tussen haakjes de waardes die je meegeeft om de boom op dat punt te tekenen. In code ziet dat er (bijvoorbeeld) zo uit: ‘boom(100, 200);’. Met deze code roep je bovenstaande functie aan. De argumenten posX en posY worden nu ‘vervangen’ door de waardes 100 en 200 en is de code uiteindelijk hetzelfde als de eerste 4 regels code. Het voordeel is dat dezelfde code van de functie nu ook gebruikt kan worden om een boom op een andere plek te tekenen! Bijvoorbeeld ‘boom(100,250);’ zorgt ervoor dat er een boom getekend wordt op positie 100,250. Met bovenstaande functie hebben we gezien dat een functie handig is omdat je code kan hergebruiken. Naast het hergebruiken van code kan een functie ook een waarde ‘terug geven’. Hiermee wordt bedoeld dat de functie iets uitrekent (bijvoorbeeld aan de hand van de argumenten), en die uitgerekende waarde kan verder in de code gebruikt worden. Zo kan je denken aan een functie die van een aantal getallen het gemiddelde berekent. Als je zo een functie maakt kan je het gemiddelde ‘return’-en en als je dat ik de code in een variabele zet kan je deze waarde in de code verder gebruiken. Hieronder een voorbeeld: var per1 = 0; var per2 = 0; var per3 = 0; var jaar = 0; …code… per1 = gemiddelde(5, 5, 7); per2 = gemiddelde(6, 4, 6); per3 = gemiddelde(6, 6, 6); …code… jaar = gemiddelde(per1, per2, per3); print(jaar); function gemiddelde(cijfer1, cijfer2, cijfer3) { var gem = (cijfer1+cijfer2+cijfer3)/3; return gem; } Regel 1: Variabele voor gemiddelde van periode 1 Regel 2: Variabele voor gemiddelde van periode 2 Regel 3: Variabele voor gemiddelde van periode 3 Regel 4: Variabele voor gemiddelde van het hele jaar Regel 5: Eventuele andere code Regel 6, 7, en 8: Bereken gemiddelde van 3 cijfers via de functie gemiddelde en zet de terug gegeven waarde in variabele per1, per2 en per3 Regel 9: Eventuele andere code Regel 10: Bereken het gemiddelde van de drie periodes Regel 11: Zet op het scherm wat het gemiddelde is van het jaar Regel 13: De functie met naam gemiddelde die drie getallen neemt en daarvan het gemiddelde berekent Regel 15: Het gemiddelde wordt berekend Regel 16: Het uitgerekende gemiddelde wordt terug gegeven Zoals je in het voorbeeld hierboven ziet kan je handig gebruik maken van 1 functie die iets voor je berekend (regel 13-17) en die waarde ook terug geeft (regel 16). De berekende waardes (regel 6, 7 en 8) kan je later weer in de code gebruiken (regel 10). Lokale en globale variabelen We hebben al gezien hoe variabelen gedeclareerd worden en gebruikt worden. Wat we nog niet besproken hebben is 'hoe lang variabelen bestaan', hiermee bedoelen we eigenlijk vanuit welke regels code kan je bij de waarde van een variabele. Zoals de kop zegt zijn er twee mogelijkheden: globaal en lokaal. We zullen dit verschil uitleggen aan de hand van het voorbeeld van de code van het berekenen van het gemiddelde (laatste stuk code in de rode box). Een globale variabele is een variabele die in alle regels code van het bestand 'bestaat'. Dus als zo een variabele gedeclareerd wordt op bijvoorbeeld regel 2 kan je in regel 20, 32 of 756 ook bij de waarde van die variabele. Deze variabelen worden precies voor dit principe gebruikt, je kan overal in de code bij de waarde. In het voorbeeld van het berekenen van de gemiddelden is 'per1' bijvoorbeeld zo een globale variabele. In alle andere regels van het voorbeeld (na declaratie dus na regel 1) kan je bij de waarde die opgeslagen is in per1. Je kan de waarde ook in alle regels code wijzigen (zoals we doen in regel 6). Een lokale variabele is een variabele die in maar een beperkt aantal regels 'bestaat'. Dit betekent dat je dus niet vanuit alle andere regels code bij de waarde kan. Alleen de regels 'in de buurt' (vandaar de naam lokaal) kunnen bij de variabele. In het voorbeeld van het berekenen van het gemiddelde zijn 'cijfer1', 'cijfer2', 'cijfer3' en 'gem' lokale variabelen. Deze variabelen zijn alleen toegankelijk binnen de functie. Dus vanuit regel 9 of 12 kan de waarde niet gelezen of veranderd worden van deze variabelen. Alleen vanuit regels tussen de accolades op regel 14 en 17 (schrijf je meer regels tussen de accolades zijn de waardes vanuit al die regels bereikbaar). Opdrachten: Maak de functie draw() in het 'test.js' bestand van opgave 1, 2 of 3 leeg (of nog beter maak een nieuw bestand en link die op de juiste manier met een html bestand). Schrijf een functie 'huis' die ervoor zorgt dat er aan huis getekend wordt en dat die aangeroepen wordt. Zorg er nu voor dat de functie met parameters werkt (zoals het voorbeeld van de boom) en teken 10 huizen naast elkaar op het canvas. Gebruik daartoe een herhaling. Zet regel voor regel commentaar bij de vorige opdracht. Zet ook bij het commentaar of een variabele globaal of lokaal is.

Vaak wil je in programmeertalen stukken code vaker gebruiken. Bijvoorbeeld als je een boom zou willen tekenen met processing. Je kan dan steeds zeggen teken een bruine rechthoek op positie x,y en teken daarbovenop een groen rondje. Dit zou er in code zo uitzien:

fill(94, 70, 3);
rect(100, 200, 31,79);
fill(2, 56, 9);
ellipse(116, 187, 70, 70);

Regel 1: Vul met bruine kleur
Regel 2: Teken een rechthoek op 100,200 van grootte 31 bij 79
Regel 3: Vul met groene kleur
Regel 4: Teken een rondje op 116,187 met diameter 70

Stel je voor dat je 10 bomen wil tekenen. Je zou dan bovenstaande code 10 keer kunnen kopiëren. Je krijgt dan voor iets ‘simpels’ al heel veel (40) regels code. Dit kan veel handiger, namelijk met behulp van functies.

Een functie is een aantal regels code die samen een bepaald 'iets' doen, een functie hebben (vandaar de naam). De 4 regels code hierboven hebben samen de functie om een boom te tekenen. Omdat we dit vaker willen doen kan je deze vier regels ook in een functie zetten:

function boom()
{
    fill(94, 70, 3);
    rect(100, 200, 31,79);
    fill(2, 56, 9);
    ellipse(116, 187, 70, 70);
}

Regel 1: Syntax voor het definiëren van een functie met naam boom
Regel 2: Accolade die begin van code van functie aangeeft
Regel 3, 4, 5 en 6: Code die uitgevoerd wordt als de functie boom wordt aangeroepen
Regel 7: Accolade die eind van code van functie aangeeft

De code voor het tekenen van een boom is nu in een functie gezet. Deze code kan je nu vanuit elke andere regel in je code ‘aanroepen’. Dat doe je simpel door ‘boom();’ in de code te zetten. Als je met de vorige 4 regels code 10 bomen zou willen tekenen heb je in totaal 40 regels code nodig. Als je met de functie 10 bomen wil tekenen heb je bovenstaande 7 regels plus 10 regels waarin je 10 keer de functie aanroept dus in totaal 17 regels. Zoals je ziet is er voor zoiets ‘simpels’ al een ‘besparing’ van 23 regels!!

Het probleem met deze code is dat je alle bomen op hetzelfde punt gaat tekenen. Omdat je in je code hebt staan dat je het op punt 100,200 gaat tekenen. Je wilt natuurlijk dat elke boom op een ander punt getekend gaat worden (anders heb je 10 bomen getekend maar zie je er maar een). Dit kan ook met functies. Je kunt namelijk waardes (argumenten genoemd) meegeven aan een functie waarmee je binnen die functie kan werken of iets kan berekenen. In code ziet dat er zo uit:

function boom(posX, posY)
{
    fill(94, 70, 3);
    rect(posX, posY, 31,79);
    fill(2, 56, 9);
    ellipse(posX+16, posY-13, 70, 70);
}

Regel 1: Syntax voor het definiëren van een functie met naam boom met argumenten posX en posY
Regel 2, 3, 4 en 5 : Code die uitgevoerd wordt als de functie boom wordt aangeroepen. Hier kun je nu de argumenten posX en posY gebruiken

Doordat je de functie nu met argumenten hebt gedefinieerd is de aanroep van de functie ook anders dan bij een functie zonder argumenten. Nu roep je de functie aan door de naam te gebruiken en dan tussen haakjes de waardes die je meegeeft om de boom op dat punt te tekenen. In code ziet dat er (bijvoorbeeld) zo uit: ‘boom(100, 200);’. Met deze code roep je bovenstaande functie aan. De argumenten posX en posY worden nu ‘vervangen’ door de waardes 100 en 200 en is de code uiteindelijk hetzelfde als de eerste 4 regels code. Het voordeel is dat dezelfde code van de functie nu ook gebruikt kan worden om een boom op een andere plek te tekenen! Bijvoorbeeld ‘boom(100,250);’ zorgt ervoor dat er een boom getekend wordt op positie 100,250.

Met bovenstaande functie hebben we gezien dat een functie handig is omdat je code kan hergebruiken. Naast het hergebruiken van code kan een functie ook een waarde ‘terug geven’. Hiermee wordt bedoeld dat de functie iets uitrekent (bijvoorbeeld aan de hand van de argumenten), en die uitgerekende waarde kan verder in de code gebruikt worden. Zo kan je denken aan een functie die van een aantal getallen het gemiddelde berekent. Als je zo een functie maakt kan je het gemiddelde ‘return’-en en als je dat ik de code in een variabele zet kan je deze waarde in de code verder gebruiken. Hieronder een voorbeeld:

var per1 = 0;
var per2 = 0;
var per3 = 0;
var jaar = 0;
…code…
per1 = gemiddelde(5, 5, 7);
per2 = gemiddelde(6, 4, 6);
per3 = gemiddelde(6, 6, 6);
…code…
jaar = gemiddelde(per1, per2, per3);
print(jaar);

function gemiddelde(cijfer1, cijfer2, cijfer3)
{
    var gem = (cijfer1+cijfer2+cijfer3)/3;
    return gem;
}

Regel 1: Variabele voor gemiddelde van periode 1
Regel 2: Variabele voor gemiddelde van periode 2
Regel 3: Variabele voor gemiddelde van periode 3
Regel 4: Variabele voor gemiddelde van het hele jaar
Regel 5: Eventuele andere code
Regel 6, 7, en 8: Bereken gemiddelde van 3 cijfers via de functie gemiddelde en zet de terug gegeven waarde in variabele per1, per2 en per3
Regel 9: Eventuele andere code
Regel 10: Bereken het gemiddelde van de drie periodes
Regel 11: Zet op het scherm wat het gemiddelde is van het jaar
Regel 13: De functie met naam gemiddelde die drie getallen neemt en daarvan het gemiddelde berekent
Regel 15: Het gemiddelde wordt berekend
Regel 16: Het uitgerekende gemiddelde wordt terug gegeven

Zoals je in het voorbeeld hierboven ziet kan je handig gebruik maken van 1 functie die iets voor je berekend (regel 13-17) en die waarde ook terug geeft (regel 16). De berekende waardes (regel 6, 7 en 8) kan je later weer in de code gebruiken (regel 10).

Lokale en globale variabelen

We hebben al gezien hoe variabelen gedeclareerd worden en gebruikt worden. Wat we nog niet besproken hebben is 'hoe lang variabelen bestaan', hiermee bedoelen we eigenlijk vanuit welke regels code kan je bij de waarde van een variabele. Zoals de kop zegt zijn er twee mogelijkheden: globaal en lokaal. We zullen dit verschil uitleggen aan de hand van het voorbeeld van de code van het berekenen van het gemiddelde (laatste stuk code in de rode box).

Een globale variabele is een variabele die in alle regels code van het bestand 'bestaat'. Dus als zo een variabele gedeclareerd wordt op bijvoorbeeld regel 2 kan je in regel 20, 32 of 756 ook bij de waarde van die variabele. Deze variabelen worden precies voor dit principe gebruikt, je kan overal in de code bij de waarde. In het voorbeeld van het berekenen van de gemiddelden is 'per1' bijvoorbeeld zo een globale variabele. In alle andere regels van het voorbeeld (na declaratie dus na regel 1) kan je bij de waarde die opgeslagen is in per1. Je kan de waarde ook in alle regels code wijzigen (zoals we doen in regel 6).

Een lokale variabele is een variabele die in maar een beperkt aantal regels 'bestaat'. Dit betekent dat je dus niet vanuit alle andere regels code bij de waarde kan. Alleen de regels 'in de buurt' (vandaar de naam lokaal) kunnen bij de variabele. In het voorbeeld van het berekenen van het gemiddelde zijn 'cijfer1', 'cijfer2', 'cijfer3' en 'gem' lokale variabelen. Deze variabelen zijn alleen toegankelijk binnen de functie. Dus vanuit regel 9 of 12 kan de waarde niet gelezen of veranderd worden van deze variabelen. Alleen vanuit regels tussen de accolades op regel 14 en 17 (schrijf je meer regels tussen de accolades zijn de waardes vanuit al die regels bereikbaar).

Opdrachten:

Maak de functie draw() in het 'test.js' bestand van opgave 1, 2 of 3 leeg (of nog beter maak een nieuw bestand en link die op de juiste manier met een html bestand). Schrijf een functie 'huis' die ervoor zorgt dat er aan huis getekend wordt en dat die aangeroepen wordt.
Zorg er nu voor dat de functie met parameters werkt (zoals het voorbeeld van de boom) en teken 10 huizen naast elkaar op het canvas. Gebruik daartoe een herhaling.
Zet regel voor regel commentaar bij de vorige opdracht. Zet ook bij het commentaar of een variabele globaal of lokaal is.