WEBVTT 00:00:00.230 --> 00:00:05.300 Maintenant, parlons un peu de quelque chose que vous avez déjà beaucoup utilisé : les fonctions. 00:00:05.339 --> 00:00:11.129 A chaque fois que vous avez utilisé "rect()" ou "fill()", vous avez appelé des fonctions. 00:00:11.137 --> 00:00:14.747 Et ces fonctions ont dessinés ce que vous leur avez demandé. 00:00:14.831 --> 00:00:16.811 Qu'est-ce qu'une fonction ? 00:00:16.811 --> 00:00:20.181 C'est un ensemble de code qui est regroupé et auquel on donne un nom 00:00:20.198 --> 00:00:23.538 pour pouvoir le ré-utiliser plusieurs fois. 00:00:23.538 --> 00:00:26.178 Pensez un peu à la fonction "rect()". Qu'est-ce qu'elle fait ? 00:00:26.188 --> 00:00:28.698 Elle dessine 4 lignes, n'est-ce pas ? 00:00:28.698 --> 00:00:31.508 On pourrait le faire en appelant 4 fois la fonction "line()". 00:00:31.623 --> 00:00:34.103 Voilà... on obtient un rectangle. 00:00:34.103 --> 00:00:38.703 Mais on s'est rendu compte qu'on voulait souvent dessiner des rectangles. 00:00:38.900 --> 00:00:44.260 Et c'est assez ennuyeux d'avoir à calculer à chaque la façon de dessiner les 4 lignes. 00:00:44.632 --> 00:00:49.232 Donc, on a créé une fonction "rect()" qui fait exactement le dessin des 4 lignes. 00:00:49.476 --> 00:00:53.746 Du coup, on peut dessiner un rectangle avec beaucoup moins de code. 00:00:54.599 --> 00:01:02.139 C'est plutôt sympa ! "rect()" est l'une des fonctions que l'on vous permet d'utiliser sur la Khan Academy 00:01:02.261 --> 00:01:07.251 Mais vous pouvez aussi créer vos propres fonctions et les réutiliser dans vos programmes. 00:01:07.709 --> 00:01:13.919 Par exemple, imaginons qu'on fasse un programme et qu'on veuille dessiner Winston plusieurs fois. 00:01:14.373 --> 00:01:19.093 Car on souhaite raconter son histoire et le dessiner à plusieurs époques. 00:01:19.218 --> 00:01:23.648 Donc, voici à quoi peut ressembler le code pour dessiner le visage de Winston. 00:01:24.071 --> 00:01:28.521 On a les variables "faceX" et "faceY" pour déterminer le centre du visage. 00:01:28.690 --> 00:01:32.350 Et on dessine ses yeux et sa bouche en fonction de ces deux variables. 00:01:32.358 --> 00:01:36.798 Pour l'instant, le programme analyse le code qui n'est pas dans une fonction. 00:01:37.138 --> 00:01:40.828 Donc il l'exécute. Il l'exécute seulement une seule fois. 00:01:41.011 --> 00:01:43.911 OK. Transformons ça avec une fonction ! 00:01:43.940 --> 00:01:48.420 Pour faire ça, cela ressemble à la façon de définir une variable. 00:01:48.686 --> 00:01:54.496 On écrit : "var drawWinston" (on choisit un nom clair) ici, c'est "dessineWinston" 00:01:54.496 --> 00:01:56.436 Puis on écrit un signe égale ( = ). 00:01:56.436 --> 00:02:01.386 Ensuite, au lieu d'indiquer un nombre ou une chaine, on écrit : "function" 00:02:01.487 --> 00:02:05.997 (Attention à bien l'écrire) Ensuite deux parenthèses ( ) 00:02:06.063 --> 00:02:10.633 Et enfin, deux accolades : { } et on termine par un point-virgule. 00:02:10.746 --> 00:02:18.539 Ce qu'il nous reste à faire, c'est de mettre tout le code nécessaire à l'intérieur des accolades. 00:02:18.539 --> 00:02:23.182 Donc on prend tout ce code, là... Et on le mets dans la fonction... 00:02:23.182 --> 00:02:26.916 On indente le code (avec la touche Tabulation). Et... Voilà ! 00:02:26.916 --> 00:02:30.546 Donc on a maintenant une variable qui contient une fonction. 00:02:30.556 --> 00:02:34.256 Dit autrement, on a donné un "nom" à ce bloc de code. 00:02:34.256 --> 00:02:37.256 Ainsi, quand on en aura besoin, on pourra demander à notre programme... 00:02:37.385 --> 00:02:40.835 de chercher ce bloc de code, et de l'exécuter. 00:02:40.835 --> 00:02:43.965 Donc, ce bloc de code est maintenant ré-utilisable. 00:02:43.965 --> 00:02:49.455 Remarquez qu'on n'a plus le dessin de Winston. On a perdu Winston ! Ou est-il passé ? 00:02:49.591 --> 00:02:54.071 OK. Ce qu'il s'est passé, c'est que quand on a mis ce bloc de code dans la fonction, 00:02:54.071 --> 00:02:58.051 On a indiqué à l'ordinateur qu'on voulait pouvoir exécuter le code plus tard... 00:02:58.140 --> 00:03:01.180 et ne l'exécuter que quand on lui dira de le faire. 00:03:01.180 --> 00:03:04.470 Donc on a besoin maintenant de lui demander d'exécuter ce code. 00:03:04.594 --> 00:03:10.084 On dit, qu'on a besoin "d’appeler la fonction". exactement comme on l'a fait pour rect() ou line(). 00:03:10.084 --> 00:03:16.300 Pour ça, on écrit le nom de la fonction : drawWinston. Puis, nos deux parenthèses : ( ) 00:03:16.300 --> 00:03:20.847 Et un point-virgule ; Et voilà ! Voilà notre Winston ! 00:03:21.101 --> 00:03:22.781 C'est cool, ça ! 00:03:22.946 --> 00:03:25.006 Bon. Peut être que vous ne trouvez pas ça si cool ! 00:03:25.133 --> 00:03:29.133 Car on a finalement exactement le même résultat qu'au début. 00:03:29.452 --> 00:03:33.452 Mais l'utilité des fonction est qu'on peut les ré-utiliser. 00:03:33.570 --> 00:03:37.870 Donc, faisons ça maintenant. On copie et colle l'appel de la fonction. 00:03:37.994 --> 00:03:43.504 Ici, et là... Hum... On ne voit rien de différent ! 00:03:43.574 --> 00:03:46.314 En fait, ça marche bien... 00:03:46.383 --> 00:03:50.723 Il dessine plusieurs Winston, mais tous au même endroit ! 00:03:50.786 --> 00:03:55.296 Si je pouvais voir avec des rayons X, je verrais 3 Winstons. 00:03:55.402 --> 00:03:59.632 Malheureusement, ce n'est pas le cas... Je ne sais pas pour vous ? ! ? 00:03:59.812 --> 00:04:04.412 OK. On peut modifier un peu notre fonction pour rendre ça plus clair. 00:04:04.505 --> 00:04:08.505 Vous voyez ces deux variables faceX et faceY ? Elles contiennent toujours 202 et 208. 00:04:08.545 --> 00:04:14.065 On peut changer ça pour utiliser un nombre aléatoire compris entre 50 et 350. 00:04:14.177 --> 00:04:18.977 Et on fait pareil pour faceY pour le rendre aléatoire aussi... 00:04:19.244 --> 00:04:23.924 Du coup, à chaque fois que la fonction est appelée cela génère une position aléatoires différente. 00:04:24.265 --> 00:04:28.555 Si on appuie sur "Redémarrer", on obtient 3 Winston à des endroits différents. 00:04:28.804 --> 00:04:31.124 OK ! C'est génial ça ! 00:04:31.333 --> 00:04:35.123 Car il aurait fallut beaucoup de lignes de code pour faire ça sans les fonctions. 00:04:35.254 --> 00:04:38.534 Il aurait fallut 3 fois plus de code ! 00:04:38.630 --> 00:04:43.250 On peut encore améliorer ça...Car c'est pas sûr qu'on ai besoin de le positionner aléatoirement ! 00:04:43.318 --> 00:04:47.318 On préfère surement pouvoir le positionner à l'endroit que l'on souhaite sur l'écran. 00:04:47.456 --> 00:04:51.456 Donc, regardez l'exposé suivant, car vous verrez comment passer des paramètres à la fonction. 00:04:51.592 --> 00:04:55.592 Et cela vous permettra de faire exactement ça !