1
00:00:00,230 --> 00:00:05,300
Maintenant, parlons un peu de quelque chose
que vous avez déjà beaucoup utilisé : les fonctions.

2
00:00:05,339 --> 00:00:11,129
A chaque fois que vous avez utilisé "rect()" ou "fill()", 
vous avez appelé des fonctions.

3
00:00:11,137 --> 00:00:14,747
Et ces fonctions ont dessinés ce que vous
leur avez demandé.

4
00:00:14,831 --> 00:00:16,811
Qu'est-ce qu'une fonction ?

5
00:00:16,811 --> 00:00:20,181
C'est un ensemble de code qui est regroupé 
et auquel on donne un nom

6
00:00:20,198 --> 00:00:23,538
pour pouvoir le ré-utiliser plusieurs fois.

7
00:00:23,538 --> 00:00:26,178
Pensez un peu à la fonction "rect()".
Qu'est-ce qu'elle fait ?

8
00:00:26,188 --> 00:00:28,698
Elle dessine 4 lignes, n'est-ce pas ?

9
00:00:28,698 --> 00:00:31,508
On pourrait le faire en appelant 
4 fois la fonction "line()".

10
00:00:31,623 --> 00:00:34,103
Voilà... on obtient un rectangle.

11
00:00:34,103 --> 00:00:38,703
Mais on s'est rendu compte qu'on voulait
souvent dessiner des rectangles.

12
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.

13
00:00:44,632 --> 00:00:49,232
Donc, on a créé une fonction "rect()" qui fait
exactement le dessin des 4 lignes.

14
00:00:49,476 --> 00:00:53,746
Du coup, on peut dessiner un rectangle 
avec beaucoup moins de code.

15
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

16
00:01:02,261 --> 00:01:07,251
Mais vous pouvez aussi créer vos propres
fonctions et les réutiliser dans vos programmes.

17
00:01:07,709 --> 00:01:13,919
Par exemple, imaginons qu'on fasse un programme
et qu'on veuille dessiner Winston plusieurs fois.

18
00:01:14,373 --> 00:01:19,093
Car on souhaite raconter son histoire
et le dessiner à plusieurs époques.

19
00:01:19,218 --> 00:01:23,648
Donc, voici à quoi peut ressembler le code
pour dessiner le visage de Winston.

20
00:01:24,071 --> 00:01:28,521
On a les variables "faceX" et "faceY"
pour déterminer le centre du visage.

21
00:01:28,690 --> 00:01:32,350
Et on dessine ses yeux et sa bouche 
en fonction de ces deux variables.

22
00:01:32,358 --> 00:01:36,798
Pour l'instant, le programme analyse le code
qui n'est pas dans une fonction.

23
00:01:37,138 --> 00:01:40,828
Donc il l'exécute.
Il l'exécute seulement une seule fois.

24
00:01:41,011 --> 00:01:43,911
OK. Transformons ça avec une fonction !

25
00:01:43,940 --> 00:01:48,420
Pour faire ça, cela ressemble à la façon
de définir une variable.

26
00:01:48,686 --> 00:01:54,496
On écrit : "var drawWinston"
(on choisit un nom clair) ici, c'est
"dessineWinston"

27
00:01:54,496 --> 00:01:56,436
Puis on écrit un signe égale ( = ).

28
00:01:56,436 --> 00:02:01,386
Ensuite, au lieu d'indiquer un nombre 
ou une chaine, on écrit : "function"

29
00:02:01,487 --> 00:02:05,997
(Attention à bien l'écrire)
Ensuite deux parenthèses ( )

30
00:02:06,063 --> 00:02:10,633
Et enfin, deux accolades : { }
et on termine par un point-virgule.

31
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.

32
00:02:18,539 --> 00:02:23,182
Donc on prend tout ce code, là...
Et on le mets dans la fonction...

33
00:02:23,182 --> 00:02:26,916
On indente le code (avec la touche Tabulation).
Et... Voilà !

34
00:02:26,916 --> 00:02:30,546
Donc on a maintenant une variable qui
contient une fonction.

35
00:02:30,556 --> 00:02:34,256
Dit autrement, on a donné un "nom"
à ce bloc de code.

36
00:02:34,256 --> 00:02:37,256
Ainsi, quand on en aura besoin, on pourra
demander à notre programme...

37
00:02:37,385 --> 00:02:40,835
de chercher ce bloc de code,
et de l'exécuter.

38
00:02:40,835 --> 00:02:43,965
Donc, ce bloc de code est maintenant
ré-utilisable.

39
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é ?

40
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,

41
00:02:54,071 --> 00:02:58,051
On a indiqué à l'ordinateur qu'on voulait
pouvoir exécuter le code plus tard...

42
00:02:58,140 --> 00:03:01,180
et ne l'exécuter que quand on lui dira de le faire.

43
00:03:01,180 --> 00:03:04,470
Donc on a besoin maintenant de lui
demander d'exécuter ce code.

44
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().

45
00:03:10,084 --> 00:03:16,300
Pour ça, on écrit le nom de la fonction : drawWinston.
Puis, nos deux parenthèses : ( )

46
00:03:16,300 --> 00:03:20,847
Et un point-virgule ;
Et voilà ! Voilà notre Winston !

47
00:03:21,101 --> 00:03:22,781
C'est cool, ça !

48
00:03:22,946 --> 00:03:25,006
Bon. Peut être que vous 
ne trouvez pas ça si cool !

49
00:03:25,133 --> 00:03:29,133
Car on a finalement exactement
le même résultat qu'au début.

50
00:03:29,452 --> 00:03:33,452
Mais l'utilité des fonction est 
qu'on peut les ré-utiliser.

51
00:03:33,570 --> 00:03:37,870
Donc, faisons ça maintenant.
On copie et colle l'appel de la fonction.

52
00:03:37,994 --> 00:03:43,504
Ici, et là... Hum...
On ne voit rien de différent !

53
00:03:43,574 --> 00:03:46,314
En fait, ça marche bien...

54
00:03:46,383 --> 00:03:50,723
Il dessine plusieurs Winston,
mais tous au même endroit !

55
00:03:50,786 --> 00:03:55,296
Si je pouvais voir avec des rayons X,
je verrais 3 Winstons.

56
00:03:55,402 --> 00:03:59,632
Malheureusement, ce n'est pas le cas...
Je ne sais pas pour vous ? ! ?

57
00:03:59,812 --> 00:04:04,412
OK. On peut modifier un peu notre fonction
pour rendre ça plus clair.

58
00:04:04,505 --> 00:04:08,505
Vous voyez ces deux variables faceX et faceY ?
Elles contiennent toujours 202 et 208.

59
00:04:08,545 --> 00:04:14,065
On peut changer ça pour utiliser un nombre
aléatoire compris entre 50 et 350.

60
00:04:14,177 --> 00:04:18,977
Et on fait pareil pour faceY 
pour le rendre aléatoire aussi...

61
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.

62
00:04:24,265 --> 00:04:28,555
Si on appuie sur "Redémarrer", on obtient
3 Winston à des endroits différents.

63
00:04:28,804 --> 00:04:31,124
OK !
C'est génial ça !

64
00:04:31,333 --> 00:04:35,123
Car il aurait fallut beaucoup de lignes de code
pour faire ça sans les fonctions.

65
00:04:35,254 --> 00:04:38,534
Il aurait fallut 3 fois plus de code !

66
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 !

67
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.

68
00:04:47,456 --> 00:04:51,456
Donc, regardez l'exposé suivant, car vous verrez
comment passer des paramètres à la fonction.

69
00:04:51,592 --> 00:04:55,592
Et cela vous permettra de faire exactement ça !