Functies

See the Pen Les vier: functies by Frank Los (@franklosdus) on CodePen.

Klik hierboven op de oranje knop. Je ziet dat de roze cirkel dan naar rechts beweegt.

 

Luisteren naar een knop-gebeurtenis

btn.addEventListener("click",moveCircle);

 

We laten het programma luisteren naar een knop-gebeurtenis. De gebeurtenis is hier "click". Je hebt ook:

 

clickmousedowndblclickpressmovepressupmouseover / mouseout, and rollover / en rollout

meer info: https://createjs.com/tutorials/Mouse%20Interaction/

 

Opdracht

Probeer de verschillende gebeurtenissen hierboven uit in de code.


 

addEventListener() is een functie die je aanroept. En je geeft twee parameters mee:

  1. Waar wordt naar geluisterd
  2. Welke functie roep je aan?

 

Wat is een functie?

Een functie is een stukje code die wordt uitgevoerd op het moment dat jij dat wilt.

Uit zichzelf voert een computer alle code regel voor regel uit. Van boven naar beneden.

Kijk nu eens in de code naar dit stukje:

 

function moveCircle(){

circ.x+=50;

stage.update();

}

 

Als dit stukje code niet in een functie zou staan zou de computer de cirkel één keer 50 pixels naar rechts verschuiven zodra het programma opent.

 

Nu de code in een functie staat weet de computer dat hij dit stukje moet overslaan en pas moet uitvoeren als de functie wordt aangeroepen.

 

De functie wordt aangeroepen als er op de knop wordt gedrukt.

 

+= ???

Je zou kunnen schrijven:

circ.x =circ.x+50;

Maar de kunst van programmeren is om zo weinig mogelijk te typen.

circ.x+=50;

is een kortere manier.

 

 

Opbouw van een functie

De opbouw van een functie is als volgt:

 

function functieNaam(parameters){

codeDieUitgevoerdMoetWorden();

}

 

function

Het woord function laat de computer weten dat hier een functie is

 

functieNaam

Je geeft de functie een naam zodat je ernaar kunt verwijzen.

Deze naam bedenk je zelf.

Het is handig om een duidelijke naam te geven zodat je gelijk snapt wat de functie doet als je de naam leest.

 

(parameters)

Soms wil je extra eigenschappen meegeven aan een functie. De functie wordt dan elke keer net iets anders uitgevoerd. Je wilt bijvoorbeeld meegeven welke kleur iets moet worden. Dan geef je die kleur mee als parameter.

 

{

codeDieUitgevoerdMoetWorden();

}

De code die uitgevoerd moet worden staat tussen accolades. Zo weet de computer waar de functie begint en ophoudt.

 

Twee manieren om een functie aan te roepen

Als je wilt dat een functie gelijk wordt aangeroepen zodra de computer het leest gebruik je aanhalingstekens.

 

moveCircle();

 

Als je de functie meegeeft als parameter doe je dit zonder aanhalingstekens. Dat zie je in dit stukje code:

 

btn.addEventListener("click",moveCircle);

 

Als je dit zo zou schrijven:

 

btn.addEventListener("click",moveCircle());

 

zou de computer deze code al uitvoeren als hij de functie toewijst aan de knop-gebeurtenis en daarna niet meer!

Dan ben jij je interactiviteit kwijt.

 

Opdracht

Verander de knop met behulp van https://zimjs.com/docs.html


 

Opdracht

Verander de richting van beweging van de cirkel:

circ.x-=50;

circ.y+=50;

circ.y-=50;

 

Anonieme functies

Soms voer je een functie maar één keer uit. Je hoeft hem later niet meer aan te roepen. In dat geval hoeft je functie geen naam te hebben. Hij kan anoniem blijven.

 

Dit is bijvoorbeeld het geval als wij het programma starten als het frame klaar is. Je hoeft een programma maar één keer te starten.

 

frame.on('ready',()=>{

code();

});

 

Hier geven we geen naam van een functie op. Hier schrijven we gelijk de functie tussen haakjes. Dat is gemakkelijk.

 

Je zou dit ook zo kunnen schrijven:

 

frame.on('ready',beginprogramma);

 

function beginProgramma(){

code();

}

 

Een anonieme functie is er zodat jij minder hoeft te typen.

 

Meer bekijken

Weer een blog van Frank Los

Ik deel graag mijn visie en projecten.
Dit soort berichten maandelijks in je mail?
Meld je dan hier aan.

illustratie kadootje

Krijg je gelijk animaties voor op je site kado! 

Delen is fijn!

Wil je zelf uitblinken met visuele communicatie?

Bekijk dan mijn diensten.

Wellicht wil je meer weten over mij.