Apprenez à programmer avec JavaScript

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

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 la création de 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 a 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.

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 l'utilisation des opérateurs

Pour vous entraîner à créer des variables, 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.

Mutabilité des variables

Une variable est de base mutable c'est-à-dire qu’elle peut changer au cours du temps. On la déclare avec le mot clé  let  suivi d’un nom de variable et on lui affecte une valeur de départ. Par la suite, on va pouvoir changer la valeur de cette variable autant de fois que l’on souhaite.

On crée un compteur à 0. Et, à chaque fois qu’on clique sur un bouton on augmente la valeur de 1 pour connaître à tout instant le nombre de clics réalisés, depuis le début de l'exécution du code.

Exemple :

let compteur = 0;
compteur++;
compteur = 10;

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.

Ce sont simplement des variables qui ne seront pas mutables. On donnera une valeur de départ et on ne pourra plus changer la valeur par la suite. Ainsi s’il y a une erreur de logique dans votre code changeant la valeur du variable (constante) qui ne devait pas changer, javascript retournera une erreur.

Par exemple :

const nombrePostParPage = 20;
nombrePostParPage = 30; // Retournera une erreur dans la console car on ne peut plus changer sa valeur

Pratiquez les 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.

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.