Apprenez à programmer avec JavaScript

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.

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 :

const entreesPremiereSemaine = 1000
const entreesDeuxiemeSemaine = 2000
const totalEntrees = entreesPremiereSemaine + entreesDeuxiemeSemaine

console.log(totalEntrees)

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 :

let placesDejaVendues = 150
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 :

let placesDejaVendues = 150
placesDejaVendues += 10

Et le résultat est strictement équivalent. 😉

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 :

let monTitre = "Le titre de mon article"
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.

Par exemple :

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

Comme pour les chiffres, vous pouvez également utiliser l’opérateur  +=  :

let punchline = "Mon nom est Bond"
punchline += ", James Bond."
// 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 :

let connexionOk = false

Récapitulons en vidéo

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

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 :

let placesDejaVendues = "150"
placesDejaVendues += "10"
console.log(placesDejaVendues)

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.

let placesDejaVendues = Number("150")
placesDejaVendues += Number("10")
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 :

À vous de jouer !

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

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é. 

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 : 

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 !