AA

Accueil > Cours > Apprenez à programmer avec JavaScript > Modifiez une variable

Apprenez à programmer avec JavaScript

12 heures  Facile

Mis à jour le 22/04/2024

 

Modifiez une variable

04:18

Dans le chapitre précédent, vous avez appris quelques mots du langage JavaScript. Découvrons
maintenant comment formuler des phrases en utilisant des opérateurs !

Découvrez les différents types de données



Comme nous l’avons vu précédemment, en JavaScript, il existe plusieurs types pour décrire la valeur
d’une variable. En fonction du type de données, les opérations qui permettent de manipuler ces données
sont différentes.

Dans ce chapitre, nous allons apprendre à manipuler les trois types de données basiques :

le type string : correspond à une chaîne de caractères, c’est-à-dire un texte ;

le type number : correspond à un chiffre ;
le type boolean : correspond à un booléen en mathématiques, c’est-à-dire une valeur qui est soit
vraie (true, en anglais) soit fausse (false, en anglais).

Utilisez des opérateurs


Pour modifier la valeur d’une variable, nous allons utiliser des opérateurs.

Un opérateur est un symbole qui permet d’effectuer des actions sur des variables ou des valeurs.
Ces actions peuvent être des opérations mathématiques, ou encore des comparaisons entre
valeurs.

Voyons ensemble les différents résultats que l’on obtient, selon le type de données que l’on manipule.

Manipulez des chiffres

Commençons par manipuler des chiffres avec une opération mathématique simple : l’addition.

Imaginons que vous souhaitiez connaître le nombre d’entrées qu’a fait le film Batman durant les deux
premières semaines suivant sa sortie dans un cinéma donné. Il vous faudra additionner le nombre
d’entrées de la première semaine avec celui de la deuxième semaine.

Écrivons cela en JavaScript :

javascript

1 const entreesPremiereSemaine = 1000

2 const entreesDeuxiemeSemaine = 2000
3 const totalEntrees = entreesPremiereSemaine + entreesDeuxiemeSemaine
4
5 console.log(totalEntrees)

Ici nous avons utilisé des instructions const, car les valeurs ne changeront pas dans la suite du
code. N’oubliez pas de vous poser la question chaque fois que vous devez définir une variable.

Et voilà ! Vous avez fait votre première addition en JavaScript, félicitations ! 🥳 Le principe est le même
pour les autres opérations mathématiques qui auront chacun un opérateur : les soustractions - , les
multiplications * , les divisions / .

Imaginez maintenant un autre cas de figure. Vous voulez connaître en direct le nombre de places
vendues dans la journée. Vous avez une variable qui contient le nombre actuel de places vendues, et
vous voulez lui ajouter le nombre de places vendues à l’instant dans le cinéma.

Vous écrivez donc :

javascript

1 let placesDejaVendues = 150

2 placesDejaVendues = placesDejaVendues + 10

Comme vous pouvez le constater, j’ai répété deux fois placesDejaVendues. Si j’avais écrit
placesDejaVendues = 10, cela aurait écrasé la valeur 150 au lieu de réaliser une addition. Comme ce
genre d’opération est très fréquent, JavaScript a créé des raccourcis pour les réaliser : les opérateurs
d’affectation.
On peut donc écrire plus simplement :
javascript

1 let placesDejaVendues = 150

2 placesDejaVendues += 10

Et le résultat est strictement équivalent. 😉

Lorsqu’on utilise += , on additionne la valeur à droite du signe = à notre variable. Les

variantes pour les autres opérations mathématiques existent également. On aura donc -=
pour une soustraction, *= pour une multiplication, /= pour une division.

Manipulez des chaînes de caractères

Pour déclarer une variable qui contient une chaîne de caractères, nous devons entourer notre texte avec
des guillemets simples ‘ ou doubles “ . Regardez l’exemple ci-dessous :
javascript

1 let monTitre = "Le titre de mon article"

2 let monContenu = 'Le contenu de mon article'

Si on utilise l’opérateur + entre deux chaînes de caractères, on réalise ce que l’on appelle en
programmation une concaténation.

La concaténation est le fait de mettre bout à bout deux chaînes de caractères. On utilise cette
opération quand la chaîne de caractères que l’on souhaite stocker dans une variable est dans
deux variables différentes.

Par exemple :
javascript

1 let premierePartie = "Mon nom est Bond"

2 let deuxiemePartie = ", James Bond."
3 let punchline = premierePartie + deuxiemePartie
4 // punchline vaut “Mon nom est Bond, James Bond.”

Les caractères // que vous apercevez à la fin de cet extrait de code me permettent d’insérer
des commentaires écrits sans qu’ils aient une incidence sur le code lui-même. C’est ainsi que je
pourrai vous donner des indications directement dans le code.

Les commentaires sont d’une manière générale très utiles si vous devez vous relire par la suite,
ou partager votre code avec d’autres.

Comme pour les chiffres, vous pouvez également utiliser l’opérateur += : javascript
 1 let punchline = "Mon nom est Bond"
2 punchline += ", James Bond."
3 // punchline vaut “Mon nom est Bond, James Bond.”

Manipulez des booléens

Très souvent, en programmation, vous aurez besoin d'un type de données qui ne peut avoir que
2 possibilités : oui/non, vrai/faux, allumé/éteint. Ainsi, une variable qui contient un booléen ne peut avoir
que deux valeurs : true ou false. On utilise ce type de données pour savoir si un état est vrai ou faux
dans notre code.

Par exemple, pour savoir si un utilisateur d’un site web est connecté ou pas, on écrira :
javascript

1 let connexionOk = false

Il existe de nombreux autres opérateurs, n’hésitez pas à aller consulter la documentation pour
les découvrir.

Récapitulons en vidéo
Je vous propose de revenir sur ces différentes opérations dans la vidéo ci-dessous :

02:09

Différenciez les types de données



Lorsque vous utilisez des opérateurs, ne mélangez pas les types de données entre eux. Assurez-vous
que vos variables ont des types cohérents.

Reprenons l’exemple des places de cinéma, mais avec des guillemets autour des chiffres.

Si on écrit ceci :
javascript

1 let placesDejaVendues = "150"

2 placesDejaVendues += "10"
3 console.log(placesDejaVendues)
 La variable placesDejaVendues va contenir “15010” et pas “160”, car la présence des guillemets
indique à JavaScript que le type de données est “String”, c'est-à-dire du texte. Par conséquent, le
+ n’est plus un opérateur d’addition. Il devient un opérateur de concaténation, qui colle deux
morceaux de texte.

Pour résoudre ce problème, nous pouvons soit enlever les guillemets autour des chiffres, soit préciser à
JavaScript que nous voulons vraiment utiliser des chiffres, grâce à l’instruction Number. Cette dernière
permet de convertir le texte “150” en chiffre 150.
javascript

1 let placesDejaVendues = Number("150")

2 placesDejaVendues += Number("10")
3 console.log(placesDejaVendues)

Cette fois-ci, le résultat est correct !

Je vous propose de revenir sur cette opération dans la vidéo ci-dessous :

01:13

À vous de jouer !


Et maintenant, entraînez-vous à manipuler des variables avec CodePen.

Vous gérez une bibliothèque qui contient 500 livres. Vous décidez de faire les opérations
suivantes :

acheter 50 livres de plus ;

en jeter 10 ;
racheter 5 des livres jetés.

1. Créez une variable totalLivres initialisée à 500 et dans laquelle vous réaliserez ces opérations une par
une, jusqu’à avoir le nombre final de livres.

2. Vérifiez le résultat grâce à l’instruction console.log.

3. Créez une nouvelle variable appelée affichageTotalLivres, en utilisant le résultat total précédemment
calculé.
 Cette variable devra contenir la chaîne de caractères ci-dessous :

“Notre bibliothèque possède TOTAL livres”

Avec TOTAL qui sera remplacé par le contenu de la variable totalLivres.

4. Affichez cette phrase grâce à l’instruction console.log.

Corrigé
Vous pouvez vérifier votre travail en consultant le corrigé et la vidéo ci-dessous :

02:11

En résumé


Vous connaissez les types de données : string, number, boolean.
Vous pouvez modifier une variable en utilisant des opérateurs qui seront différents en fonction du
type de données que vous manipulez.
Vous obtiendrez alors des résultats différents, comme une opération mathématique entre deux
chiffres, ou une concaténation entre deux chaînes de caractères.

Vous connaissez les différents types de données et comment les manipuler en JavaScript. Suivez-moi
dans le prochain chapitre pour passer à la vitesse supérieure : structurer des données !

J'ai terminé ce chapitre et je passe au suivant

Et si vous obteniez un diplôme OpenClassrooms ?

Formations jusqu’à 100 % financées

Date de début flexible

Projets professionnalisants

Mentorat individuel

Trouvez la formation et le financement faits pour vous

 Être orienté Comparez nos types de formation

 Déclarez une variable Structurez des données grâce aux objets 

Le professeur
David Pierru
Mentor chez OpenClassrooms (spécialisé dans les parcours web), Ingénieur IT et freelance.

POUR LES ÉTUDIANTS

POUR LES EMPLOYEURS

OPENCLASSROOMS

AIDE

LANGUE

Français

NOUS SUIVRE
Mentions légales Conditions générales d'utilisation Politique de protection des données personnelles

Cookies Accessibilité