<-

Retour

2/ Javascript: Les variables

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

Partager sur twitterPartager sur FacebookPartager sur LinkdinPartager sur Telegram

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.


En informatique les variables sont comme des boîtes étiquetées et contenant une valeur.

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:


  1. Déclarer une variable nommée salutation contenant la valeur:

    Salut et bienvenue!.

  2. Déclarer une variable nommée presentation contenant 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:


  1. Déclarer trois variables de type String:
    • firstName avec la valeur John.
    • lastName avec la valeur Doe.
    • langage avec la valeur Javascript.
  2. 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:


  1. Déclarer trois variables de type String et utiliser la fonction prompt pour leurs affecter les entrées de l'utilisateur en valeur:
    • nomUtilisateur avec la valeur donnée par l'utilisateur.
    • prenomUtilisateur avec la valeur donnée par l'utilisateur.
    • metierUtilisateur avec la valeur donnée par l'utilisateur.
  2. 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

JCVD: Ou peut-être que 1 + 1 = 11, et ça c'est beau!

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:


  1. Déclarer trois variables de type Number:
    • noteMath avec la valeur 12.
    • noteScience avec la valeur 14.
    • noteInformatique avec la valeur 16.
  2. Utilisez les opérateurs arithmétiques pour calculer la moyenne des notes et la stocker dans une variable nommée moyenne.
  3. 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:


  1. Déclarer deux variables de type Number:
    • largeurRectangle valeur donnée par l'utilisateur.
    • hauteurRectangle valeur donnée par l'utilisateur.
  2. Utilisez les opérateurs arithmétiques pour calculer le périmètre et la surface.
  3. 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

IsLoading