WEBVTT

00:00:01.353 --> 00:00:02.699
Comme tu l'as déjà appris,

00:00:02.699 --> 00:00:04.667
les variables te permettent d'enregistrer

00:00:04.667 --> 00:00:06.613
dans la mémoire de l'ordinateur des données.

00:00:07.268 --> 00:00:08.823
Elles sont à la base de tout programme.

00:00:09.759 --> 00:00:10.690
Dans ce tutoriel, 

00:00:10.750 --> 00:00:13.363
tu vas apprendre à utiliser en JavaScript

00:00:13.423 --> 00:00:16.386
des variables contenant des nombres et des caractères.

00:00:17.236 --> 00:00:20.673
Je commence avec un fichier HTML contenant une balise <div>


00:00:21.118 --> 00:00:24.058
et un lien vers un fichier externe javascript 

00:00:24.058 --> 00:00:25.542
que je vais ouvrir à l'instant.

00:00:28.333 --> 00:00:30.279
Pour déclarer une variable en JavaScript,

00:00:30.279 --> 00:00:33.341
tu écris « var » suivi du nom de la variable.

00:00:34.051 --> 00:00:39.966
Par exemple, var nombre;.

00:00:42.000 --> 00:00:44.179
Le nom de la variable doit être unique dans ton programme

00:00:44.555 --> 00:00:46.751
et il y a certaines règles à respecter.

00:00:47.282 --> 00:00:50.832
Premièrement, le nom de la variable peut être composé de lettres,

00:00:50.832 --> 00:00:55.043
de chiffres, du tiret souligné ou du signe de dollars.

00:00:56.312 --> 00:00:59.120
En deuxième lieu, le nom doit commencer par une lettre,

00:00:59.120 --> 00:01:02.542
le tiret souligné ou le signe de dollars.

00:01:03.059 --> 00:01:06.825
Finalement, il ne doit pas être un mot réservé dans JavaScript

00:01:06.825 --> 00:01:09.629
comme par exemple « var » ou « if »,

00:01:09.629 --> 00:01:12.224
car ces mots ont déjà une signification particulière.

00:01:14.533 --> 00:01:16.223
Pour affecter une valeur à la variable,

00:01:16.223 --> 00:01:19.502
il faut utiliser le signe égal. Par exemple,

00:01:19.502 --> 00:01:29.374
nombre= 10;

00:01:30.306 --> 00:01:32.856
Je peux afficher sa valeur dans la fenêtre console

00:01:32.856 --> 00:01:41.570
en écrivant console.log(nombre);

00:01:43.174 --> 00:01:49.525
J'enregistre et dans le navigateur Internet, je rafraîchi la page

00:01:49.525 --> 00:01:53.190
et je remarque que la fenêtre console que le nombre 10 est bien affiché.

00:01:54.628 --> 00:01:57.676
Je déclare par la suite, une variable x et y

00:01:57.706 --> 00:02:00.443
et leur affecte les valeurs 5 et 3.

00:02:00.443 --> 00:02:11.986
Donc var x=5; et var y=3; 

00:02:15.834 --> 00:02:18.711
Dans une troisième variable, z,

00:02:18.711 --> 00:02:24.183
je vais placer le contenu de x et y (x+y).

00:02:25.011 --> 00:02:26.695
Je vais également afficher cette variable (z)

00:02:26.755 --> 00:02:28.631
à l'intérieur de la fenêtre console.

00:02:30.277 --> 00:02:33.137
Tu remarques alors que z et égale à 8,

00:02:33.197 --> 00:02:37.136
soit l'opération mathématique de l'addition 5+3.

00:02:38.018 --> 00:02:43.394
Si je modifie la valeur de x (x=1) avant de faire l'addition,

00:02:43.394 --> 00:02:48.357
tu remarqueras que cette fois-ci la valeur de z sera égale à 4.

00:02:48.921 --> 00:02:51.184
Lorsque que je dis que x=1,

00:02:51.244 --> 00:02:56.398
la valeur de 5 est effacée et x à ce moment est égale à 1.

00:02:58.444 --> 00:03:06.301
Si, à la place, j'écris x+1, alors au début x=5,

00:03:07.541 --> 00:03:14.802
ensuite x = x+1 ou 5+1; 

00:03:16.540 --> 00:03:19.104
donc x est maintenant égale à 6.

00:03:21.082 --> 00:03:25.008
Finalement z sera égale à 9.

00:03:26.879 --> 00:03:29.353
Une variable peut aussi contenir des caractères,

00:03:29.353 --> 00:03:32.134
en anglais on utilise le terme string.

00:03:32.320 --> 00:03:36.464
Par exemple, je peux définir une variable nommée cote,

00:03:36.464 --> 00:03:45.590
et je lui affecte la valeur ICS3C placée entre guillemets.

00:03:45.590 --> 00:03:51.553
Par la suite, je vais faire une deuxième variable nommée titre

00:03:52.499 --> 00:03:53.943
 et cette fois-ci, je lui affecte le texte

00:03:54.834 --> 00:04:03.280
"Introduction à la programmation informatique".

00:04:05.793 --> 00:04:07.853
Encore, on finit par un point-virgule.

00:04:09.296 --> 00:04:12.226
Remarque que la valeur d'une variable contenant des lettres,

00:04:12.226 --> 00:04:15.539
donc de type string est écrit entre guillemets doubles.

00:04:16.960 --> 00:04:19.685
Lorsque que j'additionne 2 variables de type string,

00:04:19.715 --> 00:04:28.872
donc var message= cote + titre;

00:04:29.394 --> 00:04:32.927
Ensuite, j’affiche le résultat à l’intérieur de la fenêtre console :

00:04:32.927 --> 00:04:38.037
console.log(message);

00:04:39.162 --> 00:04:42.051
Tu remarqueras que dans cette fenêtre, les textes

00:04:42.461 --> 00:04:45.401
« ICS3C » et « Introduction à la programmation informatique » 

00:04:45.401 --> 00:04:46.865
sont juxtaposés.

00:04:49.200 --> 00:04:51.646
Je peux également ajouter un trait d’union entre les deux textes 

00:04:51.706 --> 00:04:57.884
en ajoutant un + et entre guillemets double, un trait d’union.

00:04:58.939 --> 00:05:00.473
Lorsque j’enregistre,

00:05:00.473 --> 00:05:03.157
je remarque que le message à l’intérieur de ma fenêtre console

00:05:03.157 --> 00:05:04.056
est modifié.

00:05:06.400 --> 00:05:14.094
Maintenant, je vais ajouter une variable chiffre =2,

00:05:14.094 --> 00:05:15.542
placé entre guillemets double.

00:05:17.947 --> 00:05:19.999
Il faut noter qu’en raison des guillemets,

00:05:19.999 --> 00:05:23.190
il s'agit du caractère 2 et non pas du nombre 2.

00:05:25.467 --> 00:05:28.153
Ensuite, je vais afficher dans ma fenêtre console

00:05:28.213 --> 00:05:34.677
ma variable (chiffre + 7).

00:05:36.858 --> 00:05:38.567
Qu'arrive-t-il lorsque je tente d'additionner 

00:05:38.567 --> 00:05:40.191
une variable de type String

00:05:40.221 --> 00:05:42.149
et une variable de type numérique?

00:05:43.834 --> 00:05:46.388
L'opération mathématique ne sera pas exécutée

00:05:46.388 --> 00:05:49.082
et les caractères «2 » et « 7 »

00:05:49.112 --> 00:05:51.030
seront affichés l'un à côté de l'autre. 

00:05:53.356 --> 00:05:56.240
Une variable peut aussi contenir un élément du document HTML.

00:05:57.622 --> 00:05:58.553
J'écris :

00:05:58.553 --> 00:06:16.741
var texte= document.getElementById("monTexte");

00:06:18.583 --> 00:06:20.006
Rappelle-toi que le fichier HTML

00:06:20.066 --> 00:06:24.234
contient une balise <div> avec un id "monTexte"

00:06:27.358 --> 00:06:29.286
Je peux alors utiliser la variable texte

00:06:29.346 --> 00:06:31.527
pour accéder son contenu en ajoutant :

00:06:31.527 --> 00:06:44.112
texte.innerHTML= message; 

00:06:47.166 --> 00:06:51.235
Lorsque j'enregistre et que je regarde le contenu de ma page Web,

00:06:51.235 --> 00:06:53.598
je vois que le message est affiché au bon endroit

00:06:56.369 --> 00:06:59.625
Finalement, une variable peut également être de type booléen.

00:07:00.055 --> 00:07:04.825
Dans ce cas, la variable peut être égale soit à true ou à false. 

00:07:07.056 --> 00:07:07.864
Par exemple :

00:07:09.000 --> 00:07:13.694
var condition=true;

00:07:15.400 --> 00:07:16.341
Et je peux également faire :

00:07:16.341 --> 00:07:19.813
condition= false;

00:07:21.500 --> 00:07:23.941
J’affiche la variable à l’intérieur de la console

00:07:28.935 --> 00:07:33.128
Dans ce cas-ci, false sera affiché.