Tutoriel pour apprendre la programmation en JavaScript

• booléen (boolean) : true, false
• nombre (integer/float number) : 999, 0.12, -9.99
• chaine de caractères (string) : 'coucou'
• aucune valeur : null

• non défini : undefined
• objet (object) : { prop : 'valeur' }
• tableau (array) : [ 1, 2, 3 ]
• fonction (function) : function(){ /* ... */ }

1) Reconnaissez les types des valeurs ci-dessous. Notez que  :

• certaines lignes contiennent plusieurs valeurs ;
• quand une ligne contient une opération, devinez la valeur et le type du résultat de cette opération.

2) Vérifiez vos réponses en saisissant ces opérations dans la console, et en utilisant le mot-clé typeof. (voir plus bas)

0
true
2 - 1.2
'hello'
'bonjour' + 4
{ a : 0.4 }
[ 'a', 'b', 'c' ]

Le mot-clé typeof renvoie le type de l'expression qui suit.

3) Expliquez le type de la dernière ligne.

Solution

typeof 0                    // => number
typeof true                 // => boolean
typeof 2 - 1.2              // => number
typeof 'hello'              // => string
typeof 'bonjour' + 4        // => string (car concaténation)
typeof { a: 0.4 }           // => object
typeof [ 'a', 'b', 'c' ]    // => object (car un tableau est une sorte d'objet)

Dans l'exercice ci-dessus, nous avons manipulé des valeurs de manière littérale. C'est-à-dire qu'elles étaient explicitement affichées dans le code.

Dans un véritable programme, les valeurs dépendent souvent d'une saisie de l'utilisateur, ou d'autre chose. Du coup, elles sont rarement exprimées de manière littérale. On utilise pour ça une représentation symbolique : les variables.

En maths, on représente habituellement une variable sous forme d'une lettre minuscule. Par exemple « soit x=4 » veut dire qu'on définit une variable appelée x représente actuellement la valeur 4 (un nombre entier, en l'occurrence).

En JavaScript, une variable représentée par une suite de lettres (minuscules et/ou majuscules) pouvant contenir aussi des chiffres et le symbole underscore (_).

Généralement, on emploie une notation appelée camel case pour nommer les variables en JavaScript. Cette notation consiste à coller plusieurs mots, en mettant en majuscule seulement la première lettre de chaque mot, sauf celle du premier mot.

Exemple : nombreSaisiParUtilisateur est un bon nom pour une variable JavaScript.

Comme en maths, l'opérateur d'affectation = permet d'affecter une valeur (à droite) à une variable (à gauche).

Chaque usage de l'opérateur d'affectation sur une variable changera sa valeur actuelle, quitte à remplacer la valeur qu'elle portait précédemment.

La valeur affectée (à droite du =) peut être une valeur littérale, ou celle d'une autre variable.

À noter que l'opérateur d'affectation se comporte différemment selon que la valeur affectée est de type simple (nombre, chaine de caractères…) ou avancé (objet, tableau, fonction…) :

• l'affectation d'une valeur de type simple dupliquera cette valeur dans la variable affectée ;
• alors qu'en affectant une valeur de type avancé, notre variable affectée sera en fait une référence à cette valeur.

Exemple d'affectation de valeur de type simple :

maValeurSimple = 1;
autreValeurSimple = maValeurSimple;
// à ce stade, nos deux variables valent 1
maValeurSimple = 2;
// => autreValeurSimple vaut toujours 1, alors que maValeurSimple vaut 2

Exemple d'affectation de valeur de type avancé  :

monTableau = [ 1, 2, 3 ];
autreVariable = monTableau;
// à ce stade, nos deux variables valent [ 1, 2, 3 ]
monTableau = [ 4, 5, 6 ];
// cette instruction a affecté un autre tableau à monTableau
// => autreValeurSimple vaut toujours [ 1, 2, 3 ], car il référence toujours le tableau qui lui avait été affecté

Exemple d'affectation de valeur de type avancé, avec modification :

monTableau = [ 9, 8, 7 ];
autreVariable = monTableau;
// à ce stade, nos deux variables valent [ 9, 8, 7 ]
monTableau.sort();
// cette instruction a rangé notre tableau dans l'ordre croissant
// => monTableau vaut désormais [ 7, 8, 9 ]
// => ... et autreVariable vaut aussi [ 7, 8, 9 ], car le tableau qu'il a référencé a été modifié.

Dans nos exemples, les variables ont été créées automatiquement par la console JavaScript lors de leur première affectation de valeur.

Mais nous allons désormais créer nos variables de manière explicite, à l'aide du mot-clé var.

En effet, l'usage de var permet de s'assurer qu'on a pas déjà créé une variable du même nom.

Il est possible d'affecter une valeur à notre variable lors de sa création avec var.

Il restera évidemment possible d'affecter d'autres valeurs à notre variable, à l'aide de l'opérateur d'affectation, mais sans utiliser var ensuite.

Exemple  :

// on va créer une variable de type chaine de caractères :
var maVariable = 'mon texte';
// => maVariable vaut 'mon texte'
maVariable = `mon nouveau texte`;
// => maVariable vaut désormais 'mon nouveau texte'

Vous remarquerez que :

• j'ai ajouté des espaces autour de l'opérateur d'affectation pour améliorer la lisibilité de mon code ;
• et j'ai terminé mes instructions par un point-virgule (;).

Afin d'améliorer la lisibilité de votre code, et d'éviter toute ambiguïté pouvant occasionner des erreurs, je compte sur vous pour appliquer ces règles.

En utilisant la console JavaScript :

1) Créez les variables suivantes :

• la variable monNombre avec une valeur de 4 ;
• la variable maChaine contenant 'bonjour ! :-)' ;
• la variable monBooleen valant false ;
• et une variable sansValeur à laquelle vous n'aurez affecté aucune valeur.

2) Pour confirmer que vos variables sont correctes, vérifiez que chaque instruction ci-dessous répond true : (copiez-collez-les une par une dans la console)

monNombre === 4;
maChaine === 'bonjour !  :-)';
monBooleen === false;
sansValeur === undefined;

Solution

// solution:
var monNombre = 4;
var maChaine = 'bonjour ! :-)'; // string => apostrophes, et respecter chaque caractère
var monBooleen = false;         // boolean => pas d'apostrophes
var sansValeur;                 // pas de valeur => pas d'affectation
// vérification:
monNombre === 4;               // => true
maChaine === 'bonjour ! :-)';  // => true
monBooleen === false;          // => true
sansValeur === undefined;      // => true