Retour
2/ Javascript: Les variables
Apprendre les bases pour développer en Javascript, pour construire des pages web dynamiques et interactives.
Dans cet article, nous revenons aux fondements réels en examinant comment travailler avec le bloc de construction le plus basique du JavaScript — les variables.
0
Prérequis
Il est conseillé d'avoir suivi les chapitres précédents:
Javascript: Introduction.
Qu'est ce qu'une variable ?
Une variable est un conteneur qui peut être vide dites undefined ou contenir une valeur qui peut être des types primitifs tel que les nombres, chaînes de caractères formant un phrase, les listes... Ou plus complexes comme les fonctions et des objets.
Ce conteneur possède un nom (référence), afin de pouvoir accéder à sa valeur quand nous en avons besoin.
Voici l'instruction Javascript pout déclarer une variable:
let uneVariable;
Maintenant que la variable est déclarée dans notre script, nous pouvons la lire et l'afficher dans la console:
console.log(uneVariable);
ce qui donne dans la console:
undefined
Il faut comprendre qu'une variable n'est accessible qu'après la ligne ou elle a été déclarée.
Appeler/lire une variable avant sa déclaration cause une erreur dans la plupart des cas:
Traduction: Ne peut pas accéder à "uneVariable" avant initialisation à script.js:1:13
De même, lire une variable qui n'a jamais été déclarée provoque une erreur.
Cela peut paraître évident, mais souvent, il arrive d'oublier ou d'ajouter une lettre ou de se tromper dans une majuscule ou minuscule.
Pour Javascript, une variable mal épelée n'existe tout simplement pas, voici un exemple ou nous causons une erreur en mettant le v du nom de la variable est en minuscule:
console.log(unevariable);
Ce qui provoquera cette erreur sur la console:
Traduction: unevariable n'est pas definie.
La valeur de la variable est ici, indéfinie. Voici l'instruction pour lui affecter la valeur 10 de type nombre:
uneVariable = 10;
A partir de cette instruction, la variable uneVariable à pour valeur 10:
//Déclarer une variable
let uneVariable;
//Afficher la valeur de la variable dans la console
console.log(uneVariable);// undefined
//Affecter une valeur à la variable
uneVariable = 10;
//Afficher la valeur de la variable dans la console
console.log(uneVariable);// 10
Résultat dans la console:
undefined
10
Il existe un raccourci pour déclarer une variable et lui affecter une valeur en une seule instruction:
let uneVariable = 10;
1/ Type: Boolean
Les booléens ne peuvent prendre que deux valeurs true/false (vrai/faux).
Elles sont généralement utilisées pour tester une condition, à la suite de laquelle le code est exécuté de manière appropriée. Nous verrons les conditions dans le chapitre suivant.
Voici comment déclarer une variable de type Boolean
let jeSuisVrai = true;
let jeSuisFaux = false;
1.1/ Opérateurs de logique
Ce type d’opérateurs va nous permettre d’effectuer plusieurs comparaisons dans nos conditions ou d’inverser la valeur du résultat.
OU logique
L'opérateur OU logique (||) (disjonction logique) renvoie vrai si et seulement si au moins un de ses opérandes est vrai:
true || true; // true
true || false; // true
false || true; // true
false || false; // false
ET logique
L'opérateur ET logique (&&) (conjonction logique) renvoie vrai si et uniquement si toutes les opérandes sont vrai:
true && true; // true
true && false; // false
false && true; // false
false && false; // false
NON logique
L'opérateur logique NON (!) prend l'opposé logique de la valeur fournie par son opérande. Vrai devient faux et vice versa.
!true; // false
!false; // true
Les booléens auront plus de sens quand nous aborderons les opérateurs de comparaisons et les conditions.
2/ Le type: String
Les chaînes de caractères ou strings, sont des mots ou des suites de mots.
Quand vous stockez dans une variable une valeur chaîne, vous devez la mettre entre guillemets simples ou doubles, sinon JavaScript va tenter de l'interpréter en tant qu'un autre nom de variable.
let salutation = 'Salut à vous!';
Si vous oubliez un des guillemets, vous déclenchez une erreur. Essayez d'entrer une de ces lignes :
let mauvaisString = Voici un test;
let mauvaisString = 'Voici un test;
let mauvaisString = Voici un test';
Vous pouvez utiliser les guillemets simple ou double selon votre préference.
Il faut juste noter, qu'on ne peut pas utiliser deirectement les guillemets simples dans une chaine de caractères déclarer avec des guillemets simples et inversement pour les double guillemets.
Cette instruction provoque une erreur:
let mauvaisString = 'J'ai provoqué une erreur!';
Pour pouvoir utiliser les guillemets simple dans une chaine de caractères déclarer avec des guillemets simples, nous devons échapper le caractère avec \:
let mauvaisString = 'Je n\'ai pas provoqué d\'erreur!';
Résultat dans la console:
Je n'ai pas provoqué d'erreur!
Exercice pratique:
-
Déclarer une variable nommée
salutationcontenant la valeur:Salut et bienvenue!. -
Déclarer une variable nommée
presentationcontenant la valeur:Je suis John Doe, et j'ai 27ans..
Solutions
// 1. Déclarer une variable nommée `salutation` contenant la valeur:
let salutation = 'Salut et bienvenue!';
// 2. Déclarer une variable nommée `presentation` contenant la valeur:
let presentation = "Je suis John Doe, et j'ai 27ans."
Quand Javascript est executé dans le navigateur, nous pouvons utiliser une instruction pour récuperer des données de l'utilisateur.
Nous aborderons les fonctions plus tard dans le cours, mais nous pouvons introduire la fonction prompt, qui permet de demander a l'utilisateur d'entrer du texte dans un boite de dialogue:
// Affiche une boite de dialogue sur la page avec le message fournit entre les parenthèse de la fonction
let texteUtilisateur= prompt('Veuillez entrer quelque chose.');
// Affiche le texte entré par l'utilisateur dans la boite de dialogue
console.log(texteUtilisateur);
2.1/ Concaténation de chaînes
Concaténer est un terme de programmation qui signifie « attacher ensemble ».
Pour attacher des chaînes en JavaScript, on utilise l'opérateur plus +.
Voyons un exemple dans la console:
let bonjour = 'Bonjour!';
let question = "Comment allez-vous?";
// Déclarer la variable 'phrase' ayant pour valeur la concaténation de
//'salutation', un espace et 'question'
let phrase = salutation + " " + question;
// Afficher 'phrase' dans la console
console.log(phrase); // Salut! Comment allez-vous?
Résultat sur la console:
Salut! Comment allez-vous?
Souvent en informatique, il existe plusieurs solutions pour répondre à un problème, les instructions suivantes auraient provoqué le même résultat:
let salutation = 'Salut! ';
let question = "Comment allez-vous?";
// Ici, l'espace entre les deux expressions et incorporé directement dans 'salutation'
let phrase = salutation + question;
console.log(phrase);// Salut! Comment allez-vous?
let salutation = 'Salut! ';
let question = "Comment allez-vous?";
// Ici, nous avons directement afficher la valeur de la concaténation,
// sans passer par une variable.
console.log(salutation + question);// Salut! Comment allez-vous?
2.2/ Littéraux de gabarits
Les littéraux de gabarits sont des littéraux de chaînes de caractères permettant d'intégrer des expressions.
Avec eux, on peut utiliser des chaînes de caractères multi-lignes et des fonctionnalités d'interpolation.
Les gabarits sont délimités par des caractères accent grave (` `) au lieu des apostrophes doubles ou simples.
let multiLigne = `Ligne de texte 1
Ligne de texte 2`;
console.log(multiLigne)
Résultat dans la console:
Ligne de texte 1
Ligne de texte 2
Les gabarits peuvent contenir des espaces réservés (placeholders). Ces espaces sont indiqués par le signe du dollar ($) et des accolades (${expression}).
Les expressions dans les espaces réservés et le texte compris dans ces espaces sont passés à une fonction.
Pour créer la chaîne finale, la fonction par défaut concatène simplement les différentes parties en une seule chaîne.
let nom = "Djemai";
let prenom = "Samy";
let presentation = `Bonjour,
je suis ${nom} ${prenom}.
Et vous?
`;
console.log(presentation)
Résultat dans la console:
Bonjour,
je suis Djemai Samy.
Et vous?
2.3/ Exercices
Exercice 1:
- Déclarer trois variables de type String:
firstNameavec la valeurJohn.lastNameavec la valeurDoe.langageavec la valeurJavascript.
- Afficher la phrase suivante dans la console en utilisant les variables déclarées:
Bonjour John Doe! Votre langage préféré est le Javascript.
Solutions
let firstName = "John";
let lastName = "Doe";
let langage = "Javascript"
// Solution 1: En utilisant la concaténation
let phrase1 = "Bonjour " + firstName + " " + lastName + " Votre langage préféré est le " + langage;
console.log(phrase1);
// Solution 2: En utilisant les litéraux de gabarits
let phrase2 = `Bonjour ${firstName} ${lastName}! Votre langage préféré est le ${langage}`;
console.log(phrase2)
Exercice 2:
- Déclarer trois variables de type String et utiliser la fonction
promptpour leurs affecter les entrées de l'utilisateur en valeur:nomUtilisateuravec la valeur donnée par l'utilisateur.prenomUtilisateuravec la valeur donnée par l'utilisateur.metierUtilisateuravec la valeur donnée par l'utilisateur.
- Afficher la phrase suivante dans la console en utilisant les variables déclarées à la place des placeholder
<>:Bonjour <prenomUtilisateur> <nomUtilisateur>! Votre métier est <metierUtilisateur>.
Solutions
let nomUtilisateur = prompt("Entrez votre prénom.");
let prenomUtilisateur = prompt("Entrez votre nom.");
let metierUtilisateur = prompt("Entrez votre métier.");
// Solution 1: En utilisant la concaténation
let phrase1 = "Bonjour " + prenomUtilisateur + " " + nomUtilisateur + " Votre métier est " + metierUtilisateur;
console.log(phrase1);
// Solution 2: En utilisant les litéraux de gabarits
let phrase2 = `Bonjour ${prenomUtilisateur} ${nomUtilisateur}! Votre métier est ${metierUtilisateur}`;
console.log(phrase2)
3/ Le type: Number
Vous pouvez stocker des nombres dans des variables, soit des nombres entiers comme 30 ou des nombres décimaux comme 2.456 (appelés aussi nombres à virgule flottante).
Il n'est pas nécessaire de déclarer le type de la variable dans JavaScript, contrairement à d'autres langages de programmation.
Lorsque vous donnez une valeur numérique à une variable, ne la mettez pas entre guillemets, sinon elle sera considérée comme une chaîne de caractère:
let rayon = 12;
const pi = 3.14;
3.1/ Opérateurs arithmétiques
Les opérateurs arithmétiques sont les opérateurs de base pour effectuer diverses opérations mathématiques :
Addition
Pour ajouter deux nombres, nous utilisons l'opérateur +:
let nombreA = 5;
let nombreB = 2;
let additionAB = nombreA + nombreB; // 7
Pour ajouter une quantité à une variable, nous pouvons lui affecter une nouvelle valeur en utilisant sa référence:
// Déclarer la variable avec la valeur 0
let nombreOeufs = 0;
console.log(nombreOeufs); // 0
// Ajouter deux au nombre d'oeufs
nombreOeufs = nombreOeufs + 2;
console.log(nombreOeufs); // 2
// Ajouter trois au nombre d'oeufs
nombreOeufs = nombreOeufs + 3;
console.log(nombreOeufs); // 5
Mais que se passe t-il si on essaye d'utiliser l'opérateur + entre un nombre et une chaîne de caractère?
console.log("1" + 1); // 11
Le résultat rendu est 11, car Javascript a automatiquement converti le nombre en chaîne de caractères.
Nous pouvons convertir une chaîne de caractères contenant un nombre en type Number:
console.log(Number("1") + 1); // 2
Soustraction
Pour soutraire deux nombres, nous utilisons l'opérateur -:
let additionAB = nombreA - nombreB; // 3
Division
Pour diviser deux nombres, nous utilisons l'opérateur /:
let additionAB = nombreA / nombreB; // 2.5
Reste (quelque fois nommé modulo)
Renvoie le reste de la division du nombre de gauche par celui de droite, on utilise %
let additionAB = nombreA % nombreB; // 1
Multiplication
Pour multiplier deux nombres, nous utilisons l'opérateur *:
let additionAB = nombreA * nombreB; // 10
Puissance
Élève un nombre à la puissance fournie par le deuxième nombre. Autrement dit, le nombre à gauche est multiplié par lui-même autant de fois que le nombre de droite, nous utlisons l'opérateur **:
let additionAB = nombreA ** nombreB;// 25
3.2/ Priorité des opérateurs
Nous pouvons bien sûr enchaîner les opérations sur une seule ligne.
console.log(50 + 10 - 2); // 58
Certaines opérations de cet ensemble ne vous renvoient peut-être pas le résultat attendu.
console.log(50 + 10 / 8 + 2); // 53.25
En tant qu'humain, vous pouvez lire « 50 plus 10 égale 60 », puis « 8 plus 2 égale 10 » et finalement « 60 divisé par 10 égale 6 ».
Mais le navigateur calcule « 10 sur 8 égale 1.25 », puis « 50 plus 1.25 plus 2 égale 53.25 ».
Cela est dû à la précédence des opérateurs. Certains sont appliqués avant d'autres dans une opération (on parle d'une expression en programmation).
En JavaScript, la précédence des opérateurs est identique à celle enseignée à l'école : multiplication et division sont toujours effectuées en premier, suivies de l'addition et de la soustraction (le calcul est toujours exécuté de la gauche vers la droite).
Si vous voulez contourner les règles de précédence des opérateurs, vous pouvez mettre entre parenthèses les parties que vous souhaitez voir calculées en premier.
Pour obtenir un résultat égal à 6, nous devons donc écrire :
console.log((50 + 10) / (8 + 2);)// 6
3.3/ Incrémentation et de décrémentation
Quelquefois vous aurez besoin d'ajouter ou retrancher 1 à la valeur d'une variable de manière répétitive.
nbOeufs = nbOeufs + 1
nbOeufs = nbOeufs + 1
nbOeufs = nbOeufs + 1
Ou
nbOeufs = nbOeufs - 1
nbOeufs = nbOeufs - 1
nbOeufs = nbOeufs - 1
On effectue commodément cette opération à l'aide des opérateurs d'incrémentation (++) ou de décrémentation (--):
nbOeufs++;
nbOeufs++;
nbOeufs++;
Ou
nbOeufs--;
nbOeufs--;
nbOeufs--;
3.4/ Opérateurs de comparaison
Parfois nous avons besoin d'exécuter des tests (vrai/faux), puis d'agir en fonction du résultat — pour ce faire, nous utilisons des opérateurs de comparaison.
Inférieur à
Teste si la valeur de gauche est plus petite que celle de droite avec <:
5 < 2 + 2;// true
5 < 2 + 3;// false
Inférieur ou égale à
Teste si la valeur de gauche est plus petite ou égale à celle de droite avec <=:
5 <= 2 + 2;// true
5 <= 2 + 3;// true
Supérieure à
Teste si la valeur de gauche est plus grande que celle de droite avec <:
5 > 5 + 2;// true
5 > 2 + 3;// false
Supérieure ou égale à
Teste si la valeur de gauche est plus grande ou égale à celle de droite avec <=:
5 >= 5 + 2;// true
5 >= 2 + 3;// true
3.5/ Exercices
Exercice 1:
- Déclarer trois variables de type Number:
noteMathavec la valeur12.noteScienceavec la valeur14.noteInformatiqueavec la valeur16.
- Utilisez les opérateurs arithmétiques pour calculer la moyenne des notes et la stocker dans une variable nommée
moyenne. - Afficher dans la console la phrase suivante en utilisant la valeur de la variable
moyenne:La moyenne des notes est de: <moyenne>
Solutions
// 1. Déclarer les variables
let noteMath = 12;
let noteScience = 14;
let noteInformatique = 16;
// 2. Calculer et afficher la moyenne sur la console
let moyenne = (noteMath + noteScience + noteInformatique) / 3;
// 3. Solution 1: Afficher la moyenne en utilisant la concaténation
console.log("La moyenne des notes est de: " + moyenne);
// 3. Solution 2: Afficher la moyenne en utilisant les litéraux de gabarits
console.log(`La moyenne des notes est de: ${moyenne}`);
// 3. Solution 3: Calculer et afficher la moyenne en utilisant les litéraux de gabarits
console.log(`La moyenne des notes est de: ${(noteMath + noteScience + noteInformatique) / 3}`);
Exercice 2:
- Déclarer deux variables de type Number:
largeurRectanglevaleur donnée par l'utilisateur.hauteurRectanglevaleur donnée par l'utilisateur.
- Utilisez les opérateurs arithmétiques pour calculer le périmètre et la surface.
- Affichez sur la console la phrase suivante en remplaçant les placeholders par la valeur du périmètre et de la surface du rectangle:
Le périmètre du rectangle est de: <perimetre>, et sa surface et de: <surface>.
Solutions
// 1. Déclaration des variables
let largeurRectangle = prompt('Entrez la largeur du rectangle');
let hauteurRectangle = prompt('Entrez la hauteur du rectangle');
// 2. Calculer le périmètre et la surface du rectangle
let perimetre = (Number(largeurRectangle) + Number(hauteurRectangle)) / 2;
let surface = largeurRectangle * hauteurRectangle;
// 3. Solution 1: Afficher la phrase en utilisant la concaténation
console.log("Le périmètre du rectangle est de " + perimetre + " ,et sa surface et de: " + surface);
// 3. Solution 2: Afficher la phrase en utilisant les litéraux de gabarits
console.log(`Le périmètre du rectangle est de ${perimetre} ,et sa surface et de: ${surface}`)
4/ Le type: Array
Les tableaux sont généralement décrits comme des objets de type liste, un tableau est une liste contenant plusieurs valeurs.
Les tableaux peuvent être stockés dans des variables et traités de la même manière que tout autre type de valeur, la différence étant que nous pouvons accéder à chaque valeur du tableau individuellement, et faire des choses utiles et efficaces avec la liste des valeurs, comme boucler et effectuer la même chose pour chaque valeur.
Par exemple, peut-être que nous avons une série d'articles et leurs prix stockés dans un tableau, et nous voulons les parcourir tous et les imprimer sur une facture.
Sans tableaux, nous devrions stocker chaque valeur dans une variable séparée, puis appeler le code qui effectue l'affichage ou l'impression, puis ajouter séparément chaque élément.
Ce serait plus long à écrire, moins efficace et cela comporterait plus de risques d'erreurs.
Si nous avions 10 articles à ajouter à la facture, ce serait déjà assez mauvais, mais qu'en serait-il de 100 articles ou de 1000 ? Nous reviendrons sur cet exemple plus loin dans la serie.
4.1/ Déclarer un tableau
On définit les valeurs d'un tableau par une liste d'éléments entre crochets droits, séparés par des virgules:
let produits = ['pain', 'lait', 'fromage', 'houmous', 'nouilles']
Dans ce cas, chaque élément du tableau est une chaîne, mais gardez en tête que vous pouvez stocker n'importe quel élément dans un tableau — chaîne, nombre, objet, autre variable et même d'autres tableaux.
Vous pouvez également mélanger et assortir les types d'articles — il n'est pas obligatoire que ce soient tous des nombres, des chaînes, etc.
4.2/ Lire un élément du tableau
Vous pouvez avoir accès isolément aux éléments dans un tableau en utilisant la notation crochet:
produits[0]; // pain
produits[1]; // lait
//...
produits[4]; // nouilles
Le premier élément du tableau est à la position 0, le dernier élément est donc à la position (tailleDuTableau - 1)
Essayer d'accéder à élément avec une position qui n'existe pas retourne undefined
produits[5]; // undefined
4.4/ Modifier un élément du tableau
Vous pouvez aussi modifier un élément dans un tableau en donnant simplement une nouvelle valeurà l'élément. Essayez ceci :
produits[0] = "crème de sésame"; // 'crème de sésame';
produits; // ['crème de sésame', 'lait', 'fromage', 'houmous', 'nouilles']
4.3/ tableau multidimensionnel
Notez qu'un tableau à l'intérieur d'un autre tableau est appelé un tableau multidimensionnel:
let multiTab = [["Djemai Samy", 28], ["John Doe", 60]]
Vous accédez à un des éléments de ce tableau interne en chaînant deux paires de crochets.
Par exemple, pour avoir accès à l'élément "John Doe":
multiTab[1][0]; // John Doe
Ceci n'est qu'une introduction au type Array, nous approfondirons le sujet dans les prochains chapitres.
Opérateurs d'égalité
Parfois nous avons besoin d'exécuter des tests vrai/faux, puis d'agir suivant si une variable est égale ou non à une autre.
Nous pouvons tester l'égalité entre deux valeurs en utilisant les opérateurs d'égalité dont le resultat est un de type Boolean
Égalité non stricte
Pour Tester si les valeurs de **droite et de gauche sont identiques, on utilise l'opérateur ==:
5 == 2 + 3; // true
5 == 6; // false
Quand on utilise cette opérateur, Javascript va essayer de convertir le type d'une des valeurs pour pouvoir les tester.
Par exemple tester un type Number et un type String peut être possible:
5 == "5"; // true
5 == "6"; // false
5 == "test"; // false
Ici, Javascript a converti la chaine de caractère en nombre.
Mais il faut faire attention, car cette manière de faire peut donner des résultats inatendus.
Par exemple tester si la valeur 0 est égale et la valeur chaine de caratères vide "" donne true comme résultat:
0 == ""; // true
0 == false; // true
"" == false; // true
[1, 2] == '1,2'; // true
null == undefined; // true
Égalité stricte
Pour Tester si les valeurs et le type de droite et de gauche sont identiques, on utilise l'opérateur ===:
5 === 2 + 3;// true
5 === 6;// false
5 === "5";// false
Non-égalité non stricte
Teste si les valeurs de droite et de gauche ne sont pas identiques avec !=:
5 != 2 + 3; // false
5 != 6; // true
5 != "5"; // false
Non-égalité stricte
Teste si les valeurs et le type de droite et de gauche ne sont pas identiques avec !==:
5 !== 2 + 3;// false
5 !== 6; // true
5 !== "5"; // true
Conclusion
Maintenant, nous en savons un peu plus à propos des variables JavaScript, en particulier comment les créer.
Nous pouvons passer a l'étape suivante ou nous allons voir l'ensemble des fonctionnalités clefs du JavaScript en nous concentrons plus particulièrement sur les structures les plus répandues telles que les conditions et les boucles.
Aller plus loin
Commentaires
3/ Javascript: Blocs structurels
Apprendre les bases pour développer en Javascript, pour construire des pages web dynamiques et interactives.
Dans ce module nous allons voir l'ensemble des fonctionnalités clefs du JavaScript en nous concentrant plus particulièrement sur les structures les plus répandues: les conditions et les boucles.
Web
JavaScript
Initiation
Bases
Conditions
Boucles
4/ Javascript: les fonctions
Apprendre les bases pour développer en Javascript, pour construire des pages web dynamiques et interactives.
Les fonctions sont un autre concept essentiel de la programmation, qui permettent de stocker dans un bloc défini une partie de code qui effectue une seule tâche afin de l'appeler plus tard.
Web
JavaScript
Initiation
Bases
Fonctions
5/ JavaScript: les objets
Apprendre les bases pour développer en JavaScript, pour construire des pages web dynamiques et interactives.
Dans ce premier article consacré aux objets en JavaScript, nous verrons les fondamentaux de la syntaxe objet en JavaScript et comment les manipuler.
Web
JavaScript
Initiation
Bases
Objets
