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 !