WEBVTT

00:00:01.199 --> 00:00:02.549
En programmation,

00:00:02.700 --> 00:00:07.000
les fonctions permettent de subdiviser le code 
en segments plus faciles à manipuler.

00:00:09.199 --> 00:00:11.599
Lorsqu'un programme devient plus complexe,

00:00:11.800 --> 00:00:12.900
il est souvent plus simple

00:00:13.099 --> 00:00:16.100
de le séparer  en plus petits morceaux
qu'on appelle fonction.

00:00:16.600 --> 00:00:17.750
Par exemple,

00:00:18.100 --> 00:00:21.699
si on a un programme dans lequel 
il y a plusieurs blocs de codes, ou étapes,

00:00:22.300 --> 00:00:24.600
on le sépare en fonctions.

00:00:25.199 --> 00:00:29.300
Cela permet également de réutiliser le code  sans avoir à le réécrire.

00:00:30.300 --> 00:00:33.299
Le programme exécute, à tour de rôle, 
les différentes fonctions.

00:00:36.299 --> 00:00:37.799
Dans ce tutoriel,

00:00:38.000 --> 00:00:39.149
je vais utiliser les fonctions

00:00:39.299 --> 00:00:42.299
pour recréer un panneau  qui compile les points lors d'un événement

00:00:45.600 --> 00:00:49.100
Prends le temps de te familiariser 
avec le code CSS de cet exemple

00:00:50.200 --> 00:00:52.100
qui se trouve dans un fichier externe.

00:00:52.799 --> 00:00:54.299
Pour ce qui est du HTML,

00:00:54.799 --> 00:00:58.000
remarque les deux balises <div> 
qui contiennent les points de chaque équipe.

00:00:59.000 --> 00:01:00.700
Leurs identificateurs sont :

00:01:00.799 --> 00:01:02.100
pointsVisiteurs

00:01:02.600 --> 00:01:03.500
et pointLocaux.

00:01:05.900 --> 00:01:09.900
Je commence par écrire le code 
qui ajoute un point à l'équipe locale.

00:01:10.900 --> 00:01:12.700
Je commence par le commentaire, donc :

00:01:12.799 --> 00:01:14.200
(prononce le commentaire en le tapant)

00:01:14.299 --> 00:01:23.400
//Cherche le nombre dans la boîte de points.

00:01:24.799 --> 00:01:26.799
et je vais identifier une variable :

00:01:27.500 --> 00:01:32.200
var idPointsLocaux=

00:01:33.000 --> 00:01:36.000
que je vais aller chercher 
à l'intérieur du document.

00:01:40.099 --> 00:01:43.599
Et, entre guillemets doubles,  je fais référence à l'identificateur :

00:01:44.000 --> 00:01:47.000
("pointsLocaux");

00:01:54.000 --> 00:01:57.000
Je place ensuite le contenu de l'élément  
à l'intérieur d'une variable.

00:01:57.799 --> 00:02:05.900
que j'appelle : points= idPointsLocaux

00:02:06.099 --> 00:02:10.000
et j'ajoute .inner.html  pour accéder à son contenu.

00:02:11.699 --> 00:02:14.900
Note que le contenu 
idPointsLocaux.innerHTML

00:02:15.800 --> 00:02:19.300
est une valeur contenant des caractères, 
donc de type string.

00:02:20.300 --> 00:02:23.400
Rappelle-toi que lorsque tu additionnes 
deux valeurs de type string,

00:02:23.800 --> 00:02:26.000
les caractères se placent 
l'un au bout de l'autre.

00:02:27.099 --> 00:02:31.400
Pour ajouter 1 au pointage, 
je dois faire une opération mathématique.

00:02:32.300 --> 00:02:37.199
J'utilise parseInt pour convertir la valeur de type string en un nombre.

00:02:43.300 --> 00:02:47.699
Pour la prochaine étape, 
ajouter un point à l'équipe locale,

00:02:48.400 --> 00:02:50.800
je commence par le commentaire :

00:02:51.599 --> 00:02:53.500
// Ajoute un point

00:02:54.000 --> 00:02:56.300
suivi du calcul mathématique

00:02:56.599 --> 00:03:01.699
points = points + 1;

00:03:05.900 --> 00:03:09.800
Il me reste à placer le contenu de mon calcul dans la page HTML.

00:03:10.800 --> 00:03:12.400
J'écris le commentaire :

00:03:13.500 --> 00:03:19.099
//Affiche les points locaux

00:03:19.800 --> 00:03:21.500
suivi de mon identificateur :

00:03:22.699 --> 00:03:31.199
idPointsLocaux.innerHTML qui est égal

00:03:31.500 --> 00:03:33.300
à la réponse que je viens de calculer 
(= points;).

00:03:33.800 --> 00:03:35.300
Je peux enregistrer ma page Web

00:03:35.699 --> 00:03:38.699
et vérifier dans un navigateur que le point s’ajoute au bon endroit.

00:03:41.699 --> 00:03:43.699
Dans un éventuel programme,

00:03:43.900 --> 00:03:46.900
ce segment de code pourrait être nécessaire 
à plusieurs endroits.

00:03:47.500 --> 00:03:50.300
Je vais donc le regrouper 
à l'intérieur d'une fonction

00:03:50.699 --> 00:03:53.699
en ajoutant, au début, 
function,

00:03:56.099 --> 00:04:02.599
suivi du nom de ma fonction que j’appelle : ajoutePointsLocaux,

00:04:03.199 --> 00:04:05.199
suivi des deux parenthèses().

00:04:05.900 --> 00:04:08.900
J'insère une accolade d'ouverture 
au début de mon code {

00:04:10.300 --> 00:04:13.300
et une accolade de fermeture }, à la fin.

00:04:15.699 --> 00:04:16.500
Maintenant,

00:04:17.100 --> 00:04:18.899
chaque fois que je dois ajouter un point,

00:04:19.100 --> 00:04:27.899
il me suffit d'écrire :
ajoutePointsLocaux();

00:04:32.199 --> 00:04:35.800
Si j'appelle une deuxième fois la fonction  ajoutePointsLocaux();

00:04:36.199 --> 00:04:41.100
je fais ctrlC pour copier et,
sur la ligne suivante, ctrlV pour coller,

00:04:41.699 --> 00:04:44.699
le point du l'équipe locale est maintenant 2.

00:04:46.699 --> 00:04:49.699
Au lieu de juste ajouter un point,

00:04:50.100 --> 00:04:53.199
je vais maintenant faire une fonction 
qui ajuste le point à une valeur donnée,

00:04:53.399 --> 00:04:55.100
p. ex., 10.

00:04:57.000 --> 00:05:04.600
Je commence par créer une nouvelle fonction :  function setPointsLocaux

00:05:05.399 --> 00:05:09.399
Celle-ci est suivie de parenthèses() 
et d'accolades { } pour délimiter mon code.

00:05:10.000 --> 00:05:11.899
J’enchaîne avec un commentaire :

00:05:12.300 --> 00:05:17.600
// Chercher l’élément 
contenant les points locaux

00:05:18.000 --> 00:05:23.600
(On entend les bruits du clavier 
pendant que le commentaire est tapé.)

00:05:24.300 --> 00:05:28.300
Donc, je crée une variable 
en faisant un copier-coller

00:05:28.500 --> 00:05:31.500
du code que j'ai déjà en haut et je l'insère 
à l'intérieur de ma fonction :

00:05:31.800 --> 00:05:33.500
var idPointsLocaux = document.getElementById{"pointsLocaux" }

00:05:33.699 --> 00:05:36.100
Il me reste ensuite à afficher les points.

00:05:37.500 --> 00:05:39.000
J'écris donc un commentaire :

00:05:41.000 --> 00:05:43.600
//  Affiche les points

00:05:44.300 --> 00:05:53.600
suivi de mon identificateur : 
idPointsLocaux.innerHTML

00:05:54.500 --> 00:05:57.500
et, dans cet exemple, je lui donne la valeur 10
= 10;

00:06:01.399 --> 00:06:08.899
À l'extérieur de la fonction, je vais écrire : setPointsLocaux();,

00:06:09.600 --> 00:06:11.399
ce qui appelle ma fonction.

00:06:12.000 --> 00:06:14.500
Si j'enregistre et que je regarde le résultat,

00:06:14.899 --> 00:06:17.199
je vois que le pointage est maintenant 10.

00:06:18.699 --> 00:06:21.100
Ma fonction est un peu restrictive,

00:06:21.500 --> 00:06:23.800
car si je veux modifier le pointage à 15.

00:06:24.500 --> 00:06:27.500
je dois le changer à l'intérieur de mon code.

00:06:29.399 --> 00:06:32.399
Plutôt, j'ajoute ce qu'on appelle un paramètre,

00:06:33.000 --> 00:06:36.800
que je nomme « point », à l'intérieur
des deux parenthèses de ma fonction.

00:06:37.899 --> 00:06:40.199
Ce paramètre est en quelque sorte 
une variable,

00:06:40.300 --> 00:06:42.899
confinée à l'intérieur de ma fonction.

00:06:45.300 --> 00:06:50.600
J'enlève la valeur 15 et je la remplace 
par ma variable point.

00:06:57.000 --> 00:07:00.699
Lorsque j'appelle la fonction 
setPointsLocaux ();

00:07:01.000 --> 00:07:04.899
à l'intérieur des parenthèses, 
j'ajoute la valeur que je veux transmettre.

00:07:06.800 --> 00:07:09.800
Lorsque j'enregistre 
et que je regarde le résultat,

00:07:10.100 --> 00:07:13.100
je remarque que le pointage 
est maintenant de 15.

00:07:15.500 --> 00:07:19.500
Si je modifie la valeur à l'intérieur de la fonction et que je l'enregistre,

00:07:20.100 --> 00:07:23.500
je vais voir que le pointage affiché 
est maintenant de 20.

NOTE end of file