-
Maintenant, parlons un peu de quelque chose
que vous avez déjà beaucoup utilisé : les fonctions.
-
A chaque fois que vous avez utilisé "rect()" ou "fill()",
vous avez appelé des fonctions.
-
Et ces fonctions ont dessinés ce que vous
leur avez demandé.
-
Qu'est-ce qu'une fonction ?
-
C'est un ensemble de code qui est regroupé
et auquel on donne un nom
-
pour pouvoir le ré-utiliser plusieurs fois.
-
Pensez un peu à la fonction "rect()".
Qu'est-ce qu'elle fait ?
-
Elle dessine 4 lignes, n'est-ce pas ?
-
On pourrait le faire en appelant
4 fois la fonction "line()".
-
Voilà... on obtient un rectangle.
-
Mais on s'est rendu compte qu'on voulait
souvent dessiner des rectangles.
-
Et c'est assez ennuyeux d'avoir à calculer
à chaque la façon de dessiner les 4 lignes.
-
Donc, on a créé une fonction "rect()" qui fait
exactement le dessin des 4 lignes.
-
Du coup, on peut dessiner un rectangle
avec beaucoup moins de code.
-
C'est plutôt sympa ! "rect()" est l'une des fonctions
que l'on vous permet d'utiliser sur la Khan Academy
-
Mais vous pouvez aussi créer vos propres
fonctions et les réutiliser dans vos programmes.
-
Par exemple, imaginons qu'on fasse un programme
et qu'on veuille dessiner Winston plusieurs fois.
-
Car on souhaite raconter son histoire
et le dessiner à plusieurs époques.
-
Donc, voici à quoi peut ressembler le code
pour dessiner le visage de Winston.
-
On a les variables "faceX" et "faceY"
pour déterminer le centre du visage.
-
Et on dessine ses yeux et sa bouche
en fonction de ces deux variables.
-
Pour l'instant, le programme analyse le code
qui n'est pas dans une fonction.
-
Donc il l'exécute.
Il l'exécute seulement une seule fois.
-
OK. Transformons ça avec une fonction !
-
Pour faire ça, cela ressemble à la façon
de définir une variable.
-
On écrit : "var drawWinston"
(on choisit un nom clair) ici, c'est
"dessineWinston"
-
Puis on écrit un signe égale ( = ).
-
Ensuite, au lieu d'indiquer un nombre
ou une chaine, on écrit : "function"
-
(Attention à bien l'écrire)
Ensuite deux parenthèses ( )
-
Et enfin, deux accolades : { }
et on termine par un point-virgule.
-
Ce qu'il nous reste à faire, c'est de mettre
tout le code nécessaire à l'intérieur
des accolades.
-
Donc on prend tout ce code, là...
Et on le mets dans la fonction...
-
On indente le code (avec la touche Tabulation).
Et... Voilà !
-
Donc on a maintenant une variable qui
contient une fonction.
-
Dit autrement, on a donné un "nom"
à ce bloc de code.
-
Ainsi, quand on en aura besoin, on pourra
demander à notre programme...
-
de chercher ce bloc de code,
et de l'exécuter.
-
Donc, ce bloc de code est maintenant
ré-utilisable.
-
Remarquez qu'on n'a plus le dessin de Winston.
On a perdu Winston ! Ou est-il passé ?
-
OK. Ce qu'il s'est passé, c'est que quand on a
mis ce bloc de code dans la fonction,
-
On a indiqué à l'ordinateur qu'on voulait
pouvoir exécuter le code plus tard...
-
et ne l'exécuter que quand on lui dira de le faire.
-
Donc on a besoin maintenant de lui
demander d'exécuter ce code.
-
On dit, qu'on a besoin "d’appeler la fonction".
exactement comme on l'a fait pour rect() ou line().
-
Pour ça, on écrit le nom de la fonction : drawWinston.
Puis, nos deux parenthèses : ( )
-
Et un point-virgule ;
Et voilà ! Voilà notre Winston !
-
C'est cool, ça !
-
Bon. Peut être que vous
ne trouvez pas ça si cool !
-
Car on a finalement exactement
le même résultat qu'au début.
-
Mais l'utilité des fonction est
qu'on peut les ré-utiliser.
-
Donc, faisons ça maintenant.
On copie et colle l'appel de la fonction.
-
Ici, et là... Hum...
On ne voit rien de différent !
-
En fait, ça marche bien...
-
Il dessine plusieurs Winston,
mais tous au même endroit !
-
Si je pouvais voir avec des rayons X,
je verrais 3 Winstons.
-
Malheureusement, ce n'est pas le cas...
Je ne sais pas pour vous ? ! ?
-
OK. On peut modifier un peu notre fonction
pour rendre ça plus clair.
-
Vous voyez ces deux variables faceX et faceY ?
Elles contiennent toujours 202 et 208.
-
On peut changer ça pour utiliser un nombre
aléatoire compris entre 50 et 350.
-
Et on fait pareil pour faceY
pour le rendre aléatoire aussi...
-
Du coup, à chaque fois que la fonction est appelée
cela génère une position aléatoires différente.
-
Si on appuie sur "Redémarrer", on obtient
3 Winston à des endroits différents.
-
OK !
C'est génial ça !
-
Car il aurait fallut beaucoup de lignes de code
pour faire ça sans les fonctions.
-
Il aurait fallut 3 fois plus de code !
-
On peut encore améliorer ça...Car c'est pas sûr
qu'on ai besoin de le positionner aléatoirement !
-
On préfère surement pouvoir le positionner
à l'endroit que l'on souhaite sur l'écran.
-
Donc, regardez l'exposé suivant, car vous verrez
comment passer des paramètres à la fonction.
-
Et cela vous permettra de faire exactement ça !
