• 15 hours
  • Easy

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 6/30/20

Déclarez des variables et modifiez leurs valeurs

Log in or subscribe for free to enjoy all this course has to offer!

Pour pouvoir coder dans de bonnes conditions, un certains nombre de notions de base sont indispensables. Commençons par découvrir les variables et en modifier les valeurs.

Qu'est-ce qu'une variable ?

L'objectif d'un programme informatique est de faire quelque chose avec des données. Votre programme utilise des variables pour enregistrer et manipuler ces données. Plus précisément, une variable est un contenant utilisé pour enregistrer une donnée spécifique dont votre programme a besoin pour travailler. Un nom d'utilisateur, le nombre de billets restants pour un vol, la disponibilité ou non d'un certain produit en stock, toutes ces données sont enregistrées dans des variables.

Une variable est un contenant
Une variable est comme un entrepôt dans lequel on stocke des éléments

Une donnée placée dans une variable s'appelle une valeur. Si on reprend l'analogie du "carton dans un entrepôt", des cartons différents peuvent enregistrer des valeurs différentes. Vous pouvez par exemple utiliser un carton pour stocker de l'argent pour des dépenses courantes, et un autre pour des économies pour une occasion particulière, par exemple un voyage. Vous pouvez aussi vider les cartons ou modifier leur contenu, en ajoutant par exemple de l'argent ou en en prélevant.

Pour savoir à quoi sert chaque carton, vous devez les étiqueter. En programmation, c'est la même chose : vous attribuez un nom à votre variable. Le nom d'une variable doit indiquer ce qui se trouve  à l'intérieur, tout comme les étiquettes sur les cartons. Voici quelques règles générales pour la création de noms :

  • utilisez des noms descriptifs dans l'ensemble de votre code.
    Avez-vous déjà eu à fouiller dans un ancien classeur, stocké dans un carton étiqueté "administratif" sur la couverture ? Vous rappelez-vous à quel point c'était frustrant ? En étant descriptif et précis dans les noms de variables, la vie devient bien plus facile : votre code devient plus facile à lire et à maintenir. Plutôt que  quantity  (ou encore pire,  qty), ajoutez des détails :  quantityInStock,  currentAccountBalance, etc. ;

  • mettez les points sur les i.
    Évitez d'utiliser des abréviations ou de raccourcir des mots à chaque fois que c'est possible, même si une version plus courte semble évidente. Par exemple,  annualRevenue  sera mieux que  annualRev  ;

  • suivez une convention de nommage constante.
    La convention de nommage la plus courante est camel case. Dans cette convention, les noms sont constitués de plusieurs mots dont l'initiale est en capitale. Par exemple  numberOfCats,  finalAnswer,  howLongCanThisVariableNameGet, etc.

Créez une variable en la déclarant

Pour utiliser une variable dans votre code, vous devez la créer. C'est ce qu'on appelle déclarer une variable.

En JavaScript, la déclaration d'une variable se limite au mot clé let, suivi du nom de variable choisi :

let numberOfCats = 2;

let numberOfDogs = 4;

Ici, nous déclarons (créons) et initialisons (donnons une valeur à) deux variables :  numberOfCats  et  numberOfDogs.

Pratiquez : créez des variables

Je vous propose un exercice, permettant de créer et d'initialiser deux variables. Rendez-vous sur cet exercice CodePen. Vous allez créer deux variables qui sont nécessaires pour le fonctionnement d'un composant créé par votre collègue. Ensemble, vous êtes en train de créer la page "Liste" des séries télé, et chaque série à besoin d'une variable pour son nombre de saisons, ainsi que pour le nombre d'épisodes par saison.

Votre collègue vous demande de nommer ces variables numberOfSeasons et numberOfEpisodes pour qu'elles soient compatibles avec son code. Suivez les étapes suivantes:

  1. Créez une variable appelée  numberOfSeasons  et assignez-lui la valeur 6 entre les lignes créées pour vous dans l'éditeur JavaScript (l'onglet appelé "JS"). Pensez à utiliser le mot-clé let, et n'oubliez pas le point-virgule en fin de ligne !

  2. Ensuite, créez une variable appelée numberOfEpisodes et assignez-lui la valeur 12.

Solution :

Vous avez terminé ? Voici un nouveau CodePen avec une solution à l’exercice.

Modifiez la valeur d'une variable

La façon la plus simple de modifier la valeur d'une variable est simplement de la réaffecter :

let numberOfCats = 3;

numberOfCats = 4;

Ici, nous déclarons la variable  numberOfCats  et l'initialisons à la valeur 3. Nous lui réaffectons ensuite la valeur 4 (sans le mot clé  let, parce que la variable a déjà été déclarée).

Néanmoins, si c'était la seule façon de modifier une valeur de variable, vous ne pourriez pas en faire grand-chose. Voyons maintenant quelques opérateurs.

Opérateurs arithmétiques - travail sur des nombres

Les opérateurs arithmétiques vous permettent d'effectuer des opérations mathématiques de base telles que l'addition, la soustraction, la multiplication et la division. Toutes ces opérations peuvent être extrêmement utiles, même en dehors des contextes mathématiques.

Addition et soustraction

Pour ajouter deux variables, utilisez le signe  +  :

let totalCDs = 67;

let totalVinyls = 34;

let totalMusic = totalCDs + totalVinyls;

À l'inverse, la soustraction utilise le signe  -  :

let cookiesInJar = 10;
let cookiesRemoved = 2;
 
let cookiesLeftInJar = cookiesInJar - cookiesRemoved;

Pour ajouter ou soustraire un nombre d'une variable, vous pouvez utiliser les opérateurs  +=  et  -=  :

let cookiesInJar = 10;
 
/* manger deux cookies */
cookiesInJar -= 2;  //il reste 8 cookies
 
/* cuisson d'un nouveau lot de cookies */ 
cookiesInJar += 12; // il y a maintenant 20 cookies dans la boîte

Enfin, vous pouvez utiliser  ++  ou  --  pour ajouter ou soustraire 1 (incrément ou décrément) :

let numberOfLikes = 10;

numberOfLikes++;  // cela fait 11

numberOfLikes--; // et on revient à 10...qui n'a pas aimé mon article ?
Multiplication et division

Les opérations de multiplication et de division utilisent les opérateurs  *  et  /  :

let costPerProduct = 20;
let numberOfProducts = 5;
 
let totalCost = costPerProduct * numberOfProducts;
 
let averageCostPerProduct = totalCost / numberOfProducts;

Comme pour l'addition et la soustraction, il existe aussi les opérateurs  *=  et  /= pour multiplier ou diviser un nombre :

let numberOfCats = 2;

numberOfCats *= 6;  // numberOfCats vaut maintenant 2*6 = 12; 

numberOfCats /= 3;  // numberOfCats vaut maintenant 12/3 = 4;

Pratiquez : utilisez des opérateurs

Pour vous entraîner à créer des constantes, rendez-vous sur cet exercice CodePen.

Ajoutons maintenant un nouvel élément à notre composant de série : le temps total de visionnage d'une série (info essentielle pour les adeptes du binge-watching !).

  1. Dans l'éditeur JavaScript, créez deux variables, episodeTime et commercialTime ("temps de l'épisode" et "temps des pubs"), avec des valeurs appropriées (45 et 5, par exemple).

  2. À l'aide des deux variables de temps que vous venez de créer, ainsi que du nombre d'épisodes et du nombre de saisons (variables pré-existantes), créez une variable nommée totalShowTime qui contient le temps de visionnage total de cette série.

Les variables numberOfSeasons et numberOfEpisodes ont déjà été déclarées pour vous.

Solution :

Voici un nouveau CodePen avec une solution à l’exercice.

Sachez qu'il existe beaucoup d'autres façons de manipuler les variables, et vous en verrez beaucoup dans le reste de ce cours !

Découvrez les constantes

Dans de nombreux programmes, certaines données ne seront pas modifiées pendant l'exécution du programme. C'est le cas par exemple du nom d'une entreprise, de la date de naissance d'un utilisateur, ou du nombre d'heures dans une journée. Pour s'assurer de ne pas réaffecter par inadvertance de nouvelles valeurs à ces données, vous allez utiliser des constantes.

Pratiquez : constantes

C'est le moment de mettre en œuvre ce que vous avez appris sur les opérateurs ! Rendez-vous sur cet exercice CodePen.

Voici un composant qui déconstruit une journée en heures, minutes et secondes.

Tout ce que vous avez à faire, c'est de créer les trois constantes qui donnent le nombre d'heures par jour, le nombre de minutes par heure, et le nombre de secondes par minute.

Jouez un peu avec ces valeurs, et vous verrez vite l'importance d'avoir les bonnes valeurs constantes dans une application !

Dans l'espace alloué, créez les trois constantes suivantes :

  • hoursPerDay: heures par jour

  • minutesPerHour: minutes par heure

  • secondsPerMinute: secondes par minute

Initialisez-les avec les valeurs correctes.

Solution :

Voici un nouveau CodePen avec une solution à l’exercice.

En résumé

Dans ce chapitre, vous avez appris les bases des variables en JavaScript. Vous savez désormais :

  • déclarer les variables par le mot clé let et un nom en "camel case", et les initialiser avec l'opérateur = ;

  • modifier le contenu d'une variable en la réaffectant ; ou avec des opérateurs ;

  • utiliser des constantes pour éviter le remplacement d'éléments de données essentiels.
    Dans le chapitre qui suit, nous verrons un attribut important des variables : leur type.

Dans le chapitre suivant, vous découvrirez comment enregistrer vos données avec des types de données.

Example of certificate of achievement
Example of certificate of achievement