Cc 19-10

0:00

S… Speaker 1 (Cc 19-10)

Dicht.

0:00

S… Speaker 1 (Cc 19-10)

Ik wil dat jullie actief zijn.

0:04

S… Speaker 1 (Cc 19-10)

Vandaag gaan

0:08

S… Speaker 1 (Cc 19-10)

we het hebben over de functions.

0:09

S… Speaker 1 (Cc 19-10)

We

0:14

S… Speaker 1 (Cc 19-10)

hebben het al vaak gehad over functions.

0:17

S… Speaker 1 (Cc 19-10)

Wat zegt jullie dan functions?

0:19

S… Speaker 2 (Cc 19-10)

Wat zegt

0:25

S… Speaker 1 (Cc 19-10)

jullie dan functions?

0:26

S… Speaker 1 (Cc 19-10)

En we moeten dan denken.

0:28

S… Speaker 2 (Cc 19-10)

Ja,

0:33

S… Speaker 1 (Cc 19-10)

maar in het context van hetgeen dat we nu al gedaan hebben,

0:35

S… Speaker 1 (Cc 19-10)

kan er iemand mij een functie opnoemen die we

0:41

S… Speaker 1 (Cc 19-10)

al kennen.

0:44

S… Speaker 1 (Cc 19-10)

Mate?

0:44

S… Speaker 1 (Cc 19-10)

Oké,

0:45

S… Speaker 1 (Cc 19-10)

wat hebben we niet echt in de les gezien.

0:46

S… Speaker 1 (Cc 19-10)

Ik denk dat je misschien wel iets anders kent.

0:47

S… Speaker 1 (Cc 19-10)

Maar inderdaad, mate is een functie.

0:49

S… Speaker 1 (Cc 19-10)

Circle is een functie.

0:52

S… Speaker 1 (Cc 19-10)

Ken je nog iemand functies?

0:53

S… Speaker 1 (Cc 19-10)

Rect is een functie.

0:56

S… Speaker 1 (Cc 19-10)

Iets anders dan voilen.

0:58

S… Speaker 1 (Cc 19-10)

Ken je nog iemand een functie?

0:59

S… Speaker 2 (Cc 19-10)

Random

1:03

S… Speaker 1 (Cc 19-10)

is een functie.

1:04

S… Speaker 1 (Cc 19-10)

Fill is een functie,

1:06

S… Speaker 1 (Cc 19-10)

enzovoort.

1:06

S… Speaker 1 (Cc 19-10)

Dan hebben we eigenlijk vier soorten functies,

1:08

S… Speaker 1 (Cc 19-10)

die we kunnen onderscheiden.

1:09

S… Speaker 1 (Cc 19-10)

We hebben een functie zonder argumenten,

1:12

S… Speaker 1 (Cc 19-10)

dat we al vaak gedaan hebben,

1:13

S… Speaker 1 (Cc 19-10)

voor het NoStroke.

1:14

S… Speaker 1 (Cc 19-10)

Dat is een functie zonder argumenten.

1:16

S… Speaker 1 (Cc 19-10)

Dat wil zeggen, we doen een function call,

1:18

S… Speaker 1 (Cc 19-10)

we roepen die functie op,

1:19

S… Speaker 1 (Cc 19-10)

maar we geven niks mee en toch doet dat iets voor ons.

1:22

S… Speaker 1 (Cc 19-10)

Dus in dit geval NoStroke.

1:23

S… Speaker 1 (Cc 19-10)

Ik ga alle strokes bijzetten voor de rest van het programma.

1:26

S… Speaker 1 (Cc 19-10)

We hebben ook functies met argumenten.

1:29

S… Speaker 1 (Cc 19-10)

En daar hebben we bijvoorbeeld een fill met RGB of HSL,

1:32

S… Speaker 1 (Cc 19-10)

dus daar hebben we hier drie argumenten die we tussen die ronde haakjes van de function call

1:36

S… Speaker 1 (Cc 19-10)

meegeven om te zeggen tegen die functie,

1:39

S… Speaker 1 (Cc 19-10)

oké, ik wil dat je deze waardes gebruikt om de kleur te bepalen.

1:42

S… Speaker 1 (Cc 19-10)

Dus dat is ook een functie oproepen,

1:44

S… Speaker 1 (Cc 19-10)

maar we geven hem iets mee,

1:45

S… Speaker 1 (Cc 19-10)

extra informatie zodat hij dat voor ons kan doen.

1:48

S… Speaker 1 (Cc 19-10)

Dan hebben we ook nog functions,

1:50

S… Speaker 1 (Cc 19-10)

zoals random inderdaad,

1:51

S… Speaker 1 (Cc 19-10)

met een return value.

1:52

S… Speaker 1 (Cc 19-10)

Je ziet, hier geven we niet per se iets mee,

1:54

S… Speaker 1 (Cc 19-10)

als argument,

1:56

S… Speaker 1 (Cc 19-10)

dus we kunnen die ook oproepen zonder argument,

1:58

S… Speaker 1 (Cc 19-10)

maar we krijgen daar iets van terug.

1:59

S… Speaker 1 (Cc 19-10)

En dat wil zeggen...

2:01

S… Speaker 1 (Cc 19-10)

Dat op de plaats van die functie,

2:02

S… Speaker 1 (Cc 19-10)

dat er daar een getalletje in de plaats komen als we iets oproepen.

2:05

S… Speaker 1 (Cc 19-10)

Dan hebben we eigenlijk ook nog function calls met zowel argumenten

2:09

S… Speaker 3 (Cc 19-10)

als return values.

2:10

S… Speaker 1 (Cc 19-10)

Dus in dit geval geven we een minimum en een maximum waarde mee

2:14

S… Speaker 1 (Cc 19-10)

aan die functie.

2:16

S… Speaker 1 (Cc 19-10)

Die functie gaat een random value tussen die twee waarden genereren en dan krijgen we

2:20

S… Speaker 1 (Cc 19-10)

getalletje tussen die twee waarden terug.

2:21

S… Speaker 1 (Cc 19-10)

Het zijn eigenlijk de vier grote types functies dat we tot nu

2:25

S… Speaker 3 (Cc 19-10)

toe gezien hebben.

2:27

S… Speaker 1 (Cc 19-10)

En nu hebben we eigenlijk altijd functies die al bestaan,

2:29

S… Speaker 1 (Cc 19-10)

die van P5,

2:30

S… Speaker 1 (Cc 19-10)

de mensen die P5 gemaakt hebben,

2:32

S… Speaker 1 (Cc 19-10)

die functies roepen wij op,

2:36

S… Speaker 1 (Cc 19-10)

en zij hebben die al voor ons gemaakt.

2:37

S… Speaker 1 (Cc 19-10)

Maar wij kunnen ook vanaf nu zelf functies gaan schrijven.

2:40

S… Speaker 1 (Cc 19-10)

We kunnen onze eigen functies maken,

2:43

S… Speaker 1 (Cc 19-10)

dus een soort van functie -definitie maken,

2:45

S… Speaker 1 (Cc 19-10)

waar er een stukje code in staat,

2:47

S… Speaker 1 (Cc 19-10)

en dan kunnen we die meerdere keren naar elkaar oproepen als we dat willen.

2:51

S… Speaker 1 (Cc 19-10)

In dit geval,

2:52

S… Speaker 1 (Cc 19-10)

zie je hier,

2:53

S… Speaker 1 (Cc 19-10)

dat we function schrijven,

2:55

S… Speaker 1 (Cc 19-10)

en dat lijkt een beetje op een if -statement kunnen we wel zeggen,

2:59

S… Speaker 1 (Cc 19-10)

een klein beetje.

2:59

S… Speaker 1 (Cc 19-10)

Maar we schrijven het keyword function om te zeggen we gaan een functie maken.

3:04

S… Speaker 1 (Cc 19-10)

We geven dat ding een naam,

3:06

S… Speaker 1 (Cc 19-10)

die ik mocht volledig zelf kiezen.

3:08

S… Speaker 1 (Cc 19-10)

En we gaan die meestal zo beschrijvend mogelijk maken.

3:10

S… Speaker 1 (Cc 19-10)

In dit geval,

3:11

S… Speaker 1 (Cc 19-10)

wat doet die functie?

3:12

S… Speaker 1 (Cc 19-10)

Die gaat in de console Hello Multimedia schrijven.

3:15

S… Speaker 1 (Cc 19-10)

Dus een goede naam voor die functie is Say Hello Multimedia in dit geval.

3:19

S… Speaker 1 (Cc 19-10)

Heel simpel voorbeeldje.

3:21

S… Speaker 1 (Cc 19-10)

Ik ga het straks nog verder opnemen.

3:24

S… Speaker 1 (Cc 19-10)

We gaan tussen de accolades,

3:25

S… Speaker 1 (Cc 19-10)

net zoals bij een if statement,

3:27

S… Speaker 1 (Cc 19-10)

gaan we code zetten die we willen uitvoeren als we die functie

3:31

S… Speaker 1 (Cc 19-10)

aanroepen.

3:33

S… Speaker 1 (Cc 19-10)

Dus in dit geval zien we hier,

3:35

S… Speaker 1 (Cc 19-10)

net zoals dat we no stroke bijvoorbeeld zouden aanroepen,

3:38

S… Speaker 1 (Cc 19-10)

zien we hier dat we ons eigen functienaam zetten,

3:40

S… Speaker 1 (Cc 19-10)

maar zo het weer om de haak is.

3:41

S… Speaker 1 (Cc 19-10)

En wat gaat er gebeuren als die code uitgevoerd wordt,

3:45

S… Speaker 1 (Cc 19-10)

gaat hij op zoek gaan in onze file,

3:47

S… Speaker 1 (Cc 19-10)

bestaat er een functie,

3:49

S… Speaker 1 (Cc 19-10)

function,

3:50

S… Speaker 1 (Cc 19-10)

met die naam.

3:52

S… Speaker 1 (Cc 19-10)

En als dat zo is,

3:53

S… Speaker 1 (Cc 19-10)

voer je dan gewoon alles wat er tussen de accolades staat,

3:56

S… Speaker 1 (Cc 19-10)

stap voor stap uit.

3:57

S… Speaker 1 (Cc 19-10)

Het is eigenlijk een soort van templateje dat we kunnen maken,

4:00

S… Speaker 1 (Cc 19-10)

met wat code in,

4:01

S… Speaker 1 (Cc 19-10)

en dan kunnen we zeggen,

4:02

S… Speaker 1 (Cc 19-10)

voer die code uit,

4:03

S… Speaker 1 (Cc 19-10)

en ga die dat voor ons doen.

4:04

S… Speaker 1 (Cc 19-10)

Dat noemen we dus een function

4:08

S… Speaker 1 (Cc 19-10)

call, net zoals dat al gewoon zijn,

4:10

S… Speaker 1 (Cc 19-10)

een function call,

4:11

S… Speaker 1 (Cc 19-10)

met zo 'n twee ronde haakjes,

4:13

S… Speaker 1 (Cc 19-10)

eventueel met daar iets tussen.

4:14

S… Speaker 1 (Cc 19-10)

En dit noemen we een function definition.

4:17

S… Speaker 1 (Cc 19-10)

Als we enkel een function definition in onze code zouden schrijven,

4:21

S… Speaker 1 (Cc 19-10)

gaat er niets gebeuren.

4:22

S… Speaker 1 (Cc 19-10)

Dat is enkel maar...

4:23

S… Speaker 1 (Cc 19-10)

dan klaarzetten om uit te voeren,

4:25

S… Speaker 1 (Cc 19-10)

maar we moeten een function call doen om die code effectief uit te voeren.

4:28

S… Speaker 1 (Cc 19-10)

Dus als je gewoon dit schrijft in de code,

4:30

S… Speaker 1 (Cc 19-10)

gaat er niets gebeuren.

4:32

S… Speaker 1 (Cc 19-10)

We moeten specifiek zeggen,

4:34

S… Speaker 1 (Cc 19-10)

voer die code uit.

4:35

S… Speaker 1 (Cc 19-10)

Net zoals dat we zeggen,

4:36

S… Speaker 1 (Cc 19-10)

circle,

4:37

S… Speaker 1 (Cc 19-10)

dan gaat hij eigenlijk in de P5 -code gaan kijken,

4:40

S… Speaker 1 (Cc 19-10)

bestaat er een functie circle,

4:42

S… Speaker 1 (Cc 19-10)

en voer die code die daarin staat voor ons uit.

4:48

S… Speaker 1 (Cc 19-10)

Het maakt niet uit waar je die functiedefinities zet.

4:50

S… Speaker 1 (Cc 19-10)

Je kunt die bovenaan zetten,

4:51

S… Speaker 1 (Cc 19-10)

je kunt die onderaan zetten.

4:52

S… Speaker 1 (Cc 19-10)

Je kunt function calls en andere functies er allemaal tussen zetten.

4:55

S… Speaker 1 (Cc 19-10)

Dat gaat allemaal werken.

4:57

S… Speaker 1 (Cc 19-10)

Maar we gaan best practice zeggen.

5:00

S… Speaker 1 (Cc 19-10)

we gaan de meeste van onze function calls bovenaan zetten en onze function definitions onderaan

5:04

S… Speaker 1 (Cc 19-10)

zodat we boven eigenlijk onze code zien die effectief uitgevoerd wordt en

5:08

S… Speaker 1 (Cc 19-10)

onderaan al onze definities.

5:10

S… Speaker 2 (Cc 19-10)

Goed.

5:12

S… Speaker 1 (Cc 19-10)

Om nog even zo de verschillende functies van die haakjes uit

5:16

S… Speaker 1 (Cc 19-10)

te leggen.

5:16

S… Speaker 1 (Cc 19-10)

En die ronde haakjes,

5:18

S… Speaker 1 (Cc 19-10)

die dienen eigenlijk voor de parameters.

5:20

S… Speaker 1 (Cc 19-10)

Parameters zoals bijvoorbeeld bij rect hebben we x,

5:23

S… Speaker 1 (Cc 19-10)

y breedte en hoogte.

5:25

S… Speaker 1 (Cc 19-10)

Dat zijn onze vier parameters.

5:26

S… Speaker 1 (Cc 19-10)

Dus daartussen kunnen we parameters gaan meegeven.

5:31

S… Speaker 1 (Cc 19-10)

De ronde haakjes,

5:32

S… Speaker 1 (Cc 19-10)

de accolades,

5:33

S… Speaker 1 (Cc 19-10)

sorry, die bepaalt onze scope.

5:35

S… Speaker 1 (Cc 19-10)

Dus dat wil zeggen,

5:36

S… Speaker 1 (Cc 19-10)

alles tussen die accolades gaat uitgevoerd worden binnen die functie.

5:39

S… Speaker 1 (Cc 19-10)

Net hetzelfde zoals bij een if en een for,

5:43

S… Speaker 1 (Cc 19-10)

hetzelfde principe die accolades bepalen van onze scope.

5:46

S… Speaker 1 (Cc 19-10)

En als we dan gaan bekijken,

5:50

S… Speaker 1 (Cc 19-10)

dit bepaalt het effectief van,

5:53

S… Speaker 1 (Cc 19-10)

dat is een functiedefinitie.

5:54

S… Speaker 1 (Cc 19-10)

Hetgeen dat ertussen staat,

5:56

S… Speaker 1 (Cc 19-10)

is onze naam.

5:58

S… Speaker 1 (Cc 19-10)

We gaan dat een beetje hetzelfde doen zoals bij Variable,

6:00

S… Speaker 1 (Cc 19-10)

we gaan dat in CamelCase doen.

6:01

S… Speaker 1 (Cc 19-10)

En we gaan dat meestal uit verschillende woorden laten bestaan.

6:04

S… Speaker 1 (Cc 19-10)

We gaan dan eigenlijk zo 'n goed mogelijke naam krijgen die echt

6:08

S… Speaker 1 (Cc 19-10)

beschrijft wat het doet.

6:09

S… Speaker 1 (Cc 19-10)

In dit geval say something,

6:11

S… Speaker 1 (Cc 19-10)

meestal een werkwoord en nog iets.

6:13

S… Speaker 1 (Cc 19-10)

P5 doet dat niet overal,

6:15

S… Speaker 1 (Cc 19-10)

want circle is gewoon de naam circle.

6:18

S… Speaker 1 (Cc 19-10)

Eigenlijk zou een iets betere naam zijn,

6:20

S… Speaker 1 (Cc 19-10)

draw circle.

6:21

S… Speaker 1 (Cc 19-10)

zodanig dat als je boord later een functie schrijft die die cirkel bewegen,

6:25

S… Speaker 1 (Cc 19-10)

dan noemen we die move circle.

6:27

S… Speaker 1 (Cc 19-10)

Dus zo goed mogelijk beschrijven wat die functie gaat doen,

6:31

S… Speaker 1 (Cc 19-10)

zodanig dat je later ook goed weet wat die juist doet.

6:35

S… Speaker 1 (Cc 19-10)

Dit noemen we het instructieblok,

6:39

S… Speaker 1 (Cc 19-10)

dus een beetje hetzelfde als bij de f -statement.

6:41

S… Speaker 1 (Cc 19-10)

Dus alles wat hier tussen staat noemen we eigenlijk de instructies,

6:44

S… Speaker 1 (Cc 19-10)

een stuk de score die we moeten uitvoeren.

6:48

S… Speaker 1 (Cc 19-10)

Er wordt dan nu uitgevoerd,

6:50

S… Speaker 1 (Cc 19-10)

dus eigenlijk een heel slecht voorbeeldje,

6:51

S… Speaker 1 (Cc 19-10)

want, ik heb dat juist gezegd,

6:54

S… Speaker 1 (Cc 19-10)

waarom zou je dit niet zo in je code plaatsen?

6:57

S… Speaker 2 (Cc 19-10)

Wat zou

7:09

S… Speaker 1 (Cc 19-10)

er beter zijn?

7:12

S… Speaker 1 (Cc 19-10)

Ja, dit zijn onze function calls.

7:15

S… Speaker 1 (Cc 19-10)

We zullen die eigenlijk beter bovenaan ons stukje code zetten,

7:18

S… Speaker 1 (Cc 19-10)

zodat dat heel duidelijk is.

7:20

S… Speaker 1 (Cc 19-10)

Anders moet ik,

7:20

S… Speaker 1 (Cc 19-10)

als ik heel veel functies zou hebben in mijn code,

7:22

S… Speaker 1 (Cc 19-10)

helemaal naar beneden scrollen om te zien wat er met mijn code gebeurt.

7:25

S… Speaker 1 (Cc 19-10)

Dus function calls liefst bovenaan.

7:27

S… Speaker 1 (Cc 19-10)

Maar nu om even een voorbeeld te geven.

7:28

S… Speaker 1 (Cc 19-10)

Stel,

7:29

S… Speaker 1 (Cc 19-10)

we hebben dit stukje code in onze file staan.

7:31

S… Speaker 1 (Cc 19-10)

Dit wordt eigenlijk niet zomaar uitgevoerd.

7:34

S… Speaker 1 (Cc 19-10)

Hij gaat die code gaan lezen en hij komt eerst een function call tegen.

7:38

S… Speaker 1 (Cc 19-10)

Dan gaat hij die uitvoeren.

7:39

S… Speaker 1 (Cc 19-10)

Net zoals dat we circle,

7:40

S… Speaker 1 (Cc 19-10)

en daarna circle zouden doen,

7:42

S… Speaker 1 (Cc 19-10)

hetzelfde principe,

7:43

S… Speaker 1 (Cc 19-10)

maar onze eigen functie.

7:44

S… Speaker 1 (Cc 19-10)

Dus ik wil zeggen,

7:44

S… Speaker 1 (Cc 19-10)

hij komt die say hello multimedia tegen,

7:46

S… Speaker 1 (Cc 19-10)

en hij gaat op zoek in onze code,

7:48

S… Speaker 1 (Cc 19-10)

bestaat die functie definitiares,

7:50

S… Speaker 1 (Cc 19-10)

hij vindt die,

7:51

S… Speaker 1 (Cc 19-10)

en dan gaat hij gewoon alles en volgende uitvoeren,

7:54

S… Speaker 1 (Cc 19-10)

dat in die functie staat.

7:55

S… Speaker 1 (Cc 19-10)

En als hij daarmee klaar is,

7:57

S… Speaker 1 (Cc 19-10)

is die functie afgehandeld,

7:59

S… Speaker 1 (Cc 19-10)

komt hij de volgende say hello multimedia tegen,

8:02

S… Speaker 1 (Cc 19-10)

en gaat hij nog een keer die code kunnen aanroepen,

8:05

S… Speaker 1 (Cc 19-10)

gaat hij wat meer gaan zeggen,

8:06

S… Speaker 1 (Cc 19-10)

en dan is de code gedaan.

8:07

S… Speaker 4 (Cc 19-10)

Oké?

8:09

S… Speaker 1 (Cc 19-10)

Nu, waarom is dat handig?

8:11

S… Speaker 1 (Cc 19-10)

Omdat we bijvoorbeeld meerdere

8:15

S… Speaker 1 (Cc 19-10)

keer dezelfde code willen gaan uitvoeren,

8:17

S… Speaker 1 (Cc 19-10)

zonder dat we dat telkens moeten gaan kopiëren.

8:19

S… Speaker 1 (Cc 19-10)

Bijvoorbeeld,

8:21

S… Speaker 1 (Cc 19-10)

wacht, misschien eerst nog een beetje verder gaan.

8:24

S… Speaker 2 (Cc 19-10)

Nee,

8:26

S… Speaker 2 (Cc 19-10)

ga je zitten.

8:27

S… Speaker 2 (Cc 19-10)

Goed.

8:28

S… Speaker 1 (Cc 19-10)

We hebben hier bijvoorbeeld ons huisje

8:33

S… Speaker 1 (Cc 19-10)

van de vorige keer staan,

8:34

S… Speaker 1 (Cc 19-10)

met ons boompje.

8:35

S… Speaker 1 (Cc 19-10)

En dat boompje was willekeurig.

8:37

S… Speaker 1 (Cc 19-10)

Even kijken.

8:40

S… Speaker 1 (Cc 19-10)

Iedere keer als ik mijn code refresh,

8:43

S… Speaker 1 (Cc 19-10)

zie je dat dat boomje gaat verspringen.

8:45

S… Speaker 1 (Cc 19-10)

En dat komt omdat we hier een stukje code hebben voor die boom,

8:48

S… Speaker 1 (Cc 19-10)

die een random waarde ging genereren en die ging gebruiken voor de x -as.

8:52

S… Speaker 1 (Cc 19-10)

Dus hier zie je eigenlijk allerlei code staan.

8:55

S… Speaker 1 (Cc 19-10)

Wat wil ik nu gaan doen?

8:57

S… Speaker 1 (Cc 19-10)

Ik wil een stukje,

8:59

S… Speaker 1 (Cc 19-10)

een functietje gaan maken,

9:01

S… Speaker 1 (Cc 19-10)

function, draw3,

9:03

S… Speaker 1 (Cc 19-10)

of misschien drawrandom3.

9:11

S… Speaker 1 (Cc 19-10)

Dat ik volledig ga inzetten.

9:13

S… Speaker 1 (Cc 19-10)

Nu ga je zien dat

9:17

S… Speaker 1 (Cc 19-10)

dat nog niets doet,

9:17

S… Speaker 1 (Cc 19-10)

want...

9:18

S… Speaker 1 (Cc 19-10)

Waarom wordt er geen boom getekend?

9:22

S… Speaker 5 (Cc 19-10)

Dat je nog niet ziet.

9:24

S… Speaker 1 (Cc 19-10)

Ja, ik heb dan maar de definitie gemaakt.

9:26

S… Speaker 1 (Cc 19-10)

En de definitie gaat er gewoon overslaan,

9:29

S… Speaker 1 (Cc 19-10)

totdat je ze oproept.

9:30

S… Speaker 1 (Cc 19-10)

Dus ik heb nu wel een definitie,

9:31

S… Speaker 1 (Cc 19-10)

waar die code in staat.

9:32

S… Speaker 1 (Cc 19-10)

Maar nu moet ik nog de function call doen.

9:34

S… Speaker 1 (Cc 19-10)

Ik ga draw a random tree oproepen.

9:36

S… Speaker 1 (Cc 19-10)

En dan gaat die effectief.

9:39

S… Speaker 1 (Cc 19-10)

We gaan oproepen,

9:40

S… Speaker 1 (Cc 19-10)

dus hij doet alle code zoals normaal.

9:42

S… Speaker 1 (Cc 19-10)

Hij komt deze naam tegen en kijkt in de code,

9:44

S… Speaker 1 (Cc 19-10)

vind ik een functie,

9:45

S… Speaker 1 (Cc 19-10)

ja, voer die functie uit.

9:47

S… Speaker 1 (Cc 19-10)

Dus eigenlijk is er heel weinig veranderd op dit moment.

9:49

S… Speaker 1 (Cc 19-10)

Maar wat kan ik nu gaan doen?

9:50

S… Speaker 1 (Cc 19-10)

In plaats van dat ik dit telkens moet gaan kopiëren voor meerdere random trees te hebben,

9:54

S… Speaker 1 (Cc 19-10)

kan ik gewoon deze functie meerdere keren naar elkaar oproepen.

10:00

S… Speaker 1 (Cc 19-10)

En dan krijg ik drie verschillende boompjes.

10:01

S… Speaker 1 (Cc 19-10)

Want dan komt die function call tegen en gaat naar hier.

10:05

S… Speaker 1 (Cc 19-10)

Binnen die functie maakt hij een variabele aan random tussen

10:09

S… Speaker 1 (Cc 19-10)

0 en de helft van de breedte.

10:12

S… Speaker 1 (Cc 19-10)

Dus dan zal het hier terechtkomen.

10:13

S… Speaker 1 (Cc 19-10)

En hij tekent dat boomp.

10:15

S… Speaker 1 (Cc 19-10)

Hij is klaar met die code.

10:16

S… Speaker 1 (Cc 19-10)

Deze functie is gedaan.

10:18

S… Speaker 1 (Cc 19-10)

Hij gaat naar de volgende en hoeft weer die functie op.

10:20

S… Speaker 1 (Cc 19-10)

En zo moet ik niet drie keer dit stukje code onder elkaar gaan kopiëren.

10:24

S… Speaker 1 (Cc 19-10)

Maar kan ik gewoon zoveel wat ik wil bomen gaan genereren.

10:27

S… Speaker 1 (Cc 19-10)

Dus in dit geval...

10:30

S… Speaker 1 (Cc 19-10)

Zoveel of ik wil,

10:31

S… Speaker 1 (Cc 19-10)

gaan er altijd diezelfde code uitgevoegd worden.

10:34

S… Speaker 1 (Cc 19-10)

En je ziet dat is veel efficiënter dan bijvoorbeeld op die

10:39

S… Speaker 1 (Cc 19-10)

manier te gaan werken.

10:40

S… Speaker 1 (Cc 19-10)

Want dan moet ik dit kopiëren,

10:44

S… Speaker 1 (Cc 19-10)

moet ik die variante overschrijven,

10:47

S… Speaker 1 (Cc 19-10)

oké.

10:50

S… Speaker 1 (Cc 19-10)

Dat werkt ook natuurlijk,

10:53

S… Speaker 1 (Cc 19-10)

maar stel ik wil dat die boom niet groen maar blauw is,

10:57

S… Speaker 1 (Cc 19-10)

moet ik op deze plaats.

10:59

S… Speaker 1 (Cc 19-10)

Blauw gaan zetten,

10:59

S… Speaker 1 (Cc 19-10)

blauw gaan zetten,

11:00

S… Speaker 6 (Cc 19-10)

blauw gaan zetten, blauw gaan zetten.

11:01

S… Speaker 1 (Cc 19-10)

Dus als ik iets wil aanpassen aan die boom,

11:03

S… Speaker 1 (Cc 19-10)

moet ik dat op vier verschillende plaatsen doen,

11:05

S… Speaker 1 (Cc 19-10)

of als ik er honderd heb op honderd verschillende plaatsen.

11:07

S… Speaker 1 (Cc 19-10)

Dat is niet zo handig.

11:08

S… Speaker 1 (Cc 19-10)

Ik kan eigenlijk een stuk code dat ik vaak wil gaan hergebruiken,

11:11

S… Speaker 1 (Cc 19-10)

ga ik gewoon in mijn functie gaan zetten.

11:13

S… Speaker 1 (Cc 19-10)

En kan ik die gewoon zoveel oproepen of ik wil.

11:16

S… Speaker 1 (Cc 19-10)

En dat is veel efficiënter om te onderhouden,

11:19

S… Speaker 1 (Cc 19-10)

om op te roepen.

11:21

S… Speaker 1 (Cc 19-10)

Oké,

11:23

S… Speaker 1 (Cc 19-10)

iedereen overtuigd van het net van functies.

11:25

S… Speaker 1 (Cc 19-10)

We gaan dan vanaf nu zoveel mogelijk beginnen te gebruiken.

11:32

S… Speaker 1 (Cc 19-10)

Nu, waar moeten we wel op letten,

11:34

S… Speaker 1 (Cc 19-10)

is dat onze variabelen die we declareren,

11:36

S… Speaker 1 (Cc 19-10)

dat die binnen de scope van een functie kunnen staan.

11:40

S… Speaker 1 (Cc 19-10)

In dit geval heb ik hier twee functies,

11:42

S… Speaker 1 (Cc 19-10)

eentje voor mijn boom,

11:43

S… Speaker 1 (Cc 19-10)

eentje voor mijn huis.

11:45

S… Speaker 1 (Cc 19-10)

Geen goede code op zich,

11:47

S… Speaker 1 (Cc 19-10)

maar gewoon om het principe van de variabelen uit te leggen.

11:49

S… Speaker 1 (Cc 19-10)

Wat gebeurt er hier?

11:51

S… Speaker 1 (Cc 19-10)

Ik roep de draw3 functie op,

11:52

S… Speaker 1 (Cc 19-10)

ik kom hierin terecht en ik maak een variabele x aan.

11:56

S… Speaker 1 (Cc 19-10)

De x is 10.

11:59

S… Speaker 1 (Cc 19-10)

Als ik later in mijn drawHouse -functie de x probeer te gebruiken,

12:03

S… Speaker 1 (Cc 19-10)

dan ga ik een fout krijgen.

12:04

S… Speaker 1 (Cc 19-10)

Dat komt omdat die variabele,

12:07

S… Speaker 1 (Cc 19-10)

en dat heb ik de vorige keer ook verteld,

12:08

S… Speaker 1 (Cc 19-10)

of die scope,

12:09

S… Speaker 1 (Cc 19-10)

als een variabele aangemaakt wordt tussen accolades,

12:12

S… Speaker 1 (Cc 19-10)

bestaat die alleen maar tussen die accolades.

12:15

S… Speaker 1 (Cc 19-10)

Dus vanaf dat we daarbuiten zijn,

12:17

S… Speaker 1 (Cc 19-10)

in een andere functie,

12:18

S… Speaker 1 (Cc 19-10)

of hier bijvoorbeeld net na,

12:20

S… Speaker 1 (Cc 19-10)

gaat die variabele niet meer beschikbaar zijn.

12:22

S… Speaker 1 (Cc 19-10)

Dan moet je heel goed opletten als je variabele binnen een functie gaat declareren.

12:27

S… Speaker 1 (Cc 19-10)

kunnen we niet in een andere functie of buiten die functie gaan gebruiken.

12:31

S… Speaker 1 (Cc 19-10)

Hetzelfde om een keer natuurlijk,

12:32

S… Speaker 1 (Cc 19-10)

hier heb ik een variabele i gemaakt.

12:34

S… Speaker 1 (Cc 19-10)

Ik kan er natuurlijk niet aan vanuit een andere functie.

12:38

S… Speaker 1 (Cc 19-10)

En dan doen we eigenlijk lokale variabele.

12:41

S… Speaker 1 (Cc 19-10)

LocalScope wil zeggen,

12:43

S… Speaker 1 (Cc 19-10)

binnen bepaalde accolades bestaat die alleen maar lokaal daar.

12:48

S… Speaker 1 (Cc 19-10)

Wat kunnen we gaan doen als we een variabele wel in verschillende functies willen gebruiken?

12:53

S… Speaker 1 (Cc 19-10)

Kunnen we bijvoorbeeld die variabele gewoon in ons code bovenaan zetten,

12:57

S… Speaker 1 (Cc 19-10)

of toch buiten alle accolades.

12:59

S… Speaker 1 (Cc 19-10)

En dan kunnen we die wel overal gaan gebruiken.

13:02

S… Speaker 1 (Cc 19-10)

Dus in dit geval heb ik nu gewoon...

13:04

S… Speaker 1 (Cc 19-10)

Stonde naam,

13:05

S… Speaker 1 (Cc 19-10)

letter Z is 20.

13:07

S… Speaker 1 (Cc 19-10)

Als ik dan binnen die functie daaraan wil,

13:09

S… Speaker 1 (Cc 19-10)

omdat die buiten die accolades aangemaakt is,

13:12

S… Speaker 1 (Cc 19-10)

kan ik binnen die accolades er wel aan.

13:13

S… Speaker 1 (Cc 19-10)

Dan zou ik altijd in die richting,

13:15

S… Speaker 1 (Cc 19-10)

als dat globaal aangemaakt is,

13:17

S… Speaker 1 (Cc 19-10)

en globaal in onze file,

13:19

S… Speaker 1 (Cc 19-10)

in ons scriptje,

13:20

S… Speaker 1 (Cc 19-10)

dan kunnen we daar binnen lokale scope wel aan.

13:22

S… Speaker 1 (Cc 19-10)

Omgekeerd niet.

13:23

S… Speaker 2 (Cc 19-10)

Oké?

13:24

S… Speaker 6 (Cc 19-10)

Dat is een hele belang,

13:25

S… Speaker 1 (Cc 19-10)

ik ga we nog vaak nodig hebben.

13:34

S… Speaker 1 (Cc 19-10)

En dat is heel belangrijk om te duiden,

13:35

S… Speaker 1 (Cc 19-10)

zeker als we straks met animaties gaan beginnen,

13:38

S… Speaker 1 (Cc 19-10)

het tweede deel van de les gaan we animaties beginnen maken,

13:40

S… Speaker 1 (Cc 19-10)

hebben we ook wel een nodige verschil tussen globaal en lokaal.

13:43

S… Speaker 1 (Cc 19-10)

Nu,

13:46

S… Speaker 1 (Cc 19-10)

ik heb het al een klein beetje verteld in de vorige lessen.

13:50

S… Speaker 1 (Cc 19-10)

We hadden LED -variabelen.

13:53

S… Speaker 1 (Cc 19-10)

LED -message is hello,

13:56

S… Speaker 1 (Cc 19-10)

dus zo maken we variabelen aan.

13:57

S… Speaker 1 (Cc 19-10)

Maar wat een const nu weer,

13:59

S… Speaker 1 (Cc 19-10)

weet u daar nog iemand?

14:00

S… Speaker 1 (Cc 19-10)

Of voor wat staat const?

14:04

S… Speaker 1 (Cc 19-10)

Die kan je niet veranderen,

14:05

S… Speaker 1 (Cc 19-10)

dat is een constante.

14:06

S… Speaker 1 (Cc 19-10)

Dus vanaf dat we die aangemaakt hebben,

14:08

S… Speaker 1 (Cc 19-10)

const message is hello.

14:10

S… Speaker 1 (Cc 19-10)

Hierna kunnen we niet zeggen,

14:12

S… Speaker 1 (Cc 19-10)

message is goodbye.

14:13

S… Speaker 3 (Cc 19-10)

Dat ga je.

14:13

S… Speaker 1 (Cc 19-10)

Ik ga zeggen,

14:14

S… Speaker 1 (Cc 19-10)

dat is een constante variabel,

14:15

S… Speaker 2 (Cc 19-10)

ik mocht daar niet aankomen.

14:16

S… Speaker 1 (Cc 19-10)

Dat is het grote verschil tussen die twee.

14:18

S… Speaker 1 (Cc 19-10)

En dan hebben we nog een ander soort,

14:20

S… Speaker 1 (Cc 19-10)

var.

14:21

S… Speaker 1 (Cc 19-10)

Ik weet nog niet wat ik daarover vertelde.

14:23

S… Speaker 1 (Cc 19-10)

Niet gebruiken,

14:28

S… Speaker 1 (Cc 19-10)

en waarom?

14:29

S… Speaker 2 (Cc 19-10)

Dat

14:34

S… Speaker 1 (Cc 19-10)

is eigenlijk de oude manier om variabelen aan te maken.

14:36

S… Speaker 1 (Cc 19-10)

Dat gaat dan ook heel vaak op het net...

14:38

S… Speaker 1 (Cc 19-10)

in allerlei bronnen en boeken zien verschijnen,

14:40

S… Speaker 1 (Cc 19-10)

maar VAR werkt een klein beetje anders dan LED.

14:43

S… Speaker 1 (Cc 19-10)

In principe,

14:45

S… Speaker 1 (Cc 19-10)

als je altijd LED gebruikt,

14:46

S… Speaker 1 (Cc 19-10)

moet je niet weten wat het verschil is,

14:48

S… Speaker 1 (Cc 19-10)

maar ik wil je toch even meegeven wat het grote verschil is tussen die twee,

14:52

S… Speaker 1 (Cc 19-10)

zodat je weet waarom dat beter niet gebruikt,

14:55

S… Speaker 1 (Cc 19-10)

of als je een stukje code gebruikt van vroeger,

14:58

S… Speaker 1 (Cc 19-10)

kan het soms anders...

15:00

S… Speaker 1 (Cc 19-10)

reageren dan dat je denkt.

15:00

S… Speaker 1 (Cc 19-10)

Dus als je gewoon vaar vervangt door LED,

15:04

S… Speaker 1 (Cc 19-10)

gaat dat meestal werken,

15:06

S… Speaker 1 (Cc 19-10)

maar soms gaat het raar.

15:08

S… Speaker 1 (Cc 19-10)

En wat is het grote verschil?

15:10

S… Speaker 1 (Cc 19-10)

Als we dit zouden doen,

15:13

S… Speaker 1 (Cc 19-10)

en we doen hier output message,

15:16

S… Speaker 1 (Cc 19-10)

dat geeft een fout,

15:18

S… Speaker 1 (Cc 19-10)

deze fout,

15:18

S… Speaker 1 (Cc 19-10)

waarom?

15:19

S… Speaker 1 (Cc 19-10)

Als we het in het Engels lezen,

15:21

S… Speaker 1 (Cc 19-10)

kunnen we het wel afleveren.

15:22

S… Speaker 1 (Cc 19-10)

Waarom geeft dat een fout?

15:36

S… Speaker 1 (Cc 19-10)

Ja, ik probeer eerst die variabelen weg te schrijven naar de console.

15:40

S… Speaker 1 (Cc 19-10)

En daarna maak ik die pas aan in het gedure.

15:42

S… Speaker 1 (Cc 19-10)

Dus dat gaat natuurlijk niet.

15:43

S… Speaker 1 (Cc 19-10)

Je gaat zeggen, je probeert op deze lijncode iets weg

15:48

S… Speaker 1 (Cc 19-10)

te schrijven naar de console dat helemaal niet bestaat.

15:50

S… Speaker 1 (Cc 19-10)

Dus pas de lijn daarna gaan we dat gaan maken.

15:52

S… Speaker 1 (Cc 19-10)

Hetzelfde voor constante,

15:53

S… Speaker 1 (Cc 19-10)

je gaat zeggen, dat kan niet,

15:54

S… Speaker 1 (Cc 19-10)

want je hebt dat nog niet aangemaakt.

15:56

S… Speaker 1 (Cc 19-10)

Nu, als je een var variabelen gaat maken,

15:59

S… Speaker 1 (Cc 19-10)

op deze manier,

16:00

S… Speaker 1 (Cc 19-10)

en je voert dat uit.

16:03

S… Speaker 1 (Cc 19-10)

Dan gaat hij gewoon een lege string in de console zetten.

16:05

S… Speaker 1 (Cc 19-10)

Maar wat doet hij eigenlijk?

16:07

S… Speaker 1 (Cc 19-10)

Als je een var maakt,

16:08

S… Speaker 1 (Cc 19-10)

dan gaat hij sowieso die variabelen,

16:10

S… Speaker 1 (Cc 19-10)

gaan hoisten noemen ze dat.

16:12

S… Speaker 1 (Cc 19-10)

En Javascript gaat eigenlijk als hij een var tegenkomt,

16:16

S… Speaker 1 (Cc 19-10)

die gewoon,

16:17

S… Speaker 1 (Cc 19-10)

sorry,

16:18

S… Speaker 1 (Cc 19-10)

een var tegenkomt,

16:19

S… Speaker 1 (Cc 19-10)

gaat hij eigenlijk achter de schermen helemaal bovenaan gaan zetten.

16:21

S… Speaker 1 (Cc 19-10)

En dan de code uitvoeren.

16:23

S… Speaker 1 (Cc 19-10)

Dus je ziet hier eigenlijk als hij die bovenaan zet,

16:25

S… Speaker 1 (Cc 19-10)

dan gaat hij die enkel maar gaan initialiseren,

16:27

S… Speaker 1 (Cc 19-10)

maar niet.

16:28

S… Speaker 1 (Cc 19-10)

hun waarde aan gaan toekennen.

16:30

S… Speaker 1 (Cc 19-10)

Dus in dit geval gaat hij gewoon effectief iets outputten,

16:34

S… Speaker 1 (Cc 19-10)

maar gewoon leeg zijn omdat er nog niets in zit.

16:36

S… Speaker 1 (Cc 19-10)

Dat is het grote verschil tussen die twee.

16:38

S… Speaker 1 (Cc 19-10)

En het probleem was vooral,

16:40

S… Speaker 1 (Cc 19-10)

waarom hebben we ze aangepast?

16:41

S… Speaker 1 (Cc 19-10)

Omdat daar heel veel misbruik van gemaakt werd in code,

16:43

S… Speaker 1 (Cc 19-10)

door programmeurs,

16:44

S… Speaker 1 (Cc 19-10)

en dat we natuurlijk niet meer goed wisten wat er allemaal aan het gebeuren was.

16:47

S… Speaker 1 (Cc 19-10)

Dus let eens iets concreter,

16:48

S… Speaker 1 (Cc 19-10)

dat ga sowieso altijd een fout geven,

16:50

S… Speaker 1 (Cc 19-10)

als die nog niet aangemaakt is.

16:52

S… Speaker 1 (Cc 19-10)

Dus dat geef ik even gewoon mee ter info.

16:55

S… Speaker 6 (Cc 19-10)

Nou,

16:56

S… Speaker 1 (Cc 19-10)

je weet...

16:57

S… Speaker 1 (Cc 19-10)

waarom dat zo is en waarom we nu LED gaan gebruiken.

16:59

S… Speaker 7 (Cc 19-10)

Een globale variabele.

17:04

S… Speaker 1 (Cc 19-10)

Ik ga even de code erbij pakken.

17:06

S… Speaker 1 (Cc 19-10)

Je kunt een goede kandidaat vinden hier voor een globale variabele.

17:10

S… Speaker 1 (Cc 19-10)

Wat ga ik even doen?

17:11

S… Speaker 1 (Cc 19-10)

Ik ga dit stukje code voor dat huisje ook in een functie gaan zetten.

17:15

S… Speaker 1 (Cc 19-10)

Dus ik kan hier een function definition maken,

17:17

S… Speaker 6 (Cc 19-10)

draw house.

17:19

S… Speaker 1 (Cc 19-10)

En ik zet alle code die daarbij hoort,

17:22

S… Speaker 1 (Cc 19-10)

daar binnen.

17:24

S… Speaker 1 (Cc 19-10)

Dus mijn huisje gaat nu natuurlijk verdwijnen,

17:26

S… Speaker 1 (Cc 19-10)

want ik moet die functie nog aanroepen.

17:29

S… Speaker 1 (Cc 19-10)

Drawhouse.

17:29

S… Speaker 2 (Cc 19-10)

En

17:34

S… Speaker 1 (Cc 19-10)

dan wil ik bijvoorbeeld nog mijn grass

17:38

S… Speaker 8 (Cc 19-10)

function Drawgrass.

17:42

S… Speaker 7 (Cc 19-10)

Nu

17:47

S… Speaker 1 (Cc 19-10)

om proper

17:56

S… Speaker 1 (Cc 19-10)

te zijn en je begint dan een beetje te merken,

17:58

S… Speaker 1 (Cc 19-10)

als ik hier mijn code begin te lezen.

18:01

S… Speaker 1 (Cc 19-10)

Oké, create canvas,

18:03

S… Speaker 1 (Cc 19-10)

background,

18:03

S… Speaker 1 (Cc 19-10)

no stroke enzovoort.

18:05

S… Speaker 3 (Cc 19-10)

draw -grass,

18:06

S… Speaker 1 (Cc 19-10)

draw -house, maar in een draw -tree kan ik al niet meer zien,

18:08

S… Speaker 1 (Cc 19-10)

want mijn functie -definities staan helemaal tussen.

18:11

S… Speaker 1 (Cc 19-10)

Dus best practice,

18:12

S… Speaker 1 (Cc 19-10)

ik zeg dat werkt gewoon,

18:13

S… Speaker 1 (Cc 19-10)

maar best practice,

18:14

S… Speaker 1 (Cc 19-10)

we gaan overeenkomen dat we onze function -calls boven

18:19

S… Speaker 1 (Cc 19-10)

onze function -definitions gaan zetten.

18:20

S… Speaker 1 (Cc 19-10)

Dat doet exact

18:24

S… Speaker 1 (Cc 19-10)

hetzelfde,

18:25

S… Speaker 1 (Cc 19-10)

maar nu kan ik eigenlijk een hoge opslag al van boven zien wat er

18:29

S… Speaker 1 (Cc 19-10)

gebeurt in mijn code.

18:30

S… Speaker 3 (Cc 19-10)

Ik ga draw -grass doen,

18:32

S… Speaker 3 (Cc 19-10)

draw -house, draw -random -tree doen.

18:34

S… Speaker 1 (Cc 19-10)

Nou juist kom ik nu zeker weten dat in deze gooit opgenomen werd.

18:38

S… Speaker 1 (Cc 19-10)

Op het eerste gezicht,

18:39

S… Speaker 1 (Cc 19-10)

want die stond helemaal van onderwijs gedeclareerd.

18:43

S… Speaker 1 (Cc 19-10)

Of opgeroepen.

18:44

S… Speaker 1 (Cc 19-10)

Dus mooi afspreken hier bovenaan.

18:48

S… Speaker 1 (Cc 19-10)

En op die manier hebben we eigenlijk van de eerste keer ook twee globale variabelen gemaakt.

18:51

S… Speaker 1 (Cc 19-10)

Welke zijn dat?

18:52

S… Speaker 2 (Cc 19-10)

Je ziet,

18:55

S… Speaker 1 (Cc 19-10)

globale variabelen.

18:56

S… Speaker 7 (Cc 19-10)

Ja,

19:02

S… Speaker 1 (Cc 19-10)

let x en let y zijn inderdaad globale variabelen,

19:04

S… Speaker 1 (Cc 19-10)

want die staan buiten alle functies.

19:06

S… Speaker 1 (Cc 19-10)

Die staan gewoon bovenaan.

19:07

S… Speaker 1 (Cc 19-10)

Hier terug hetzelfde.

19:09

S… Speaker 1 (Cc 19-10)

In principe zou je die een beetje kunnen zetten waar je wilt,

19:12

S… Speaker 1 (Cc 19-10)

maar...

19:14

S… Speaker 1 (Cc 19-10)

Je moet natuurlijk wel zien dat ze in de juiste volgorde staan.

19:16

S… Speaker 1 (Cc 19-10)

Dus ik kan hier onder mijn dingen zetten.

Resume

Konbyen tan pou m' fè transkript la?