Parcours Cours Business AK

Accueil > Cours > Apprenez à programmer avec JavaScript > Déclarez des variables et modi ez leurs valeurs

Apprenez à programmer avec JavaScript

15 heures  Facile Licence 

Mis à jour le 16/10/2020

 

Utiliser les
Déclarez des variables et modi ez leurs valeurs données et les
 types de 
données dans
JavaScript

 1. Découvrez la
structure de ce
cours

2. Déclarez des
variables et
modi ez leurs
valeurs

3. Enregistrez vos
données avec des
types de données

4. Dé nissez des
objets et leurs
attributs avec des
classes

5. Gérez la complexité
Pour pouvoir coder dans de bonnes conditions, un certains nombre de notions de base avec la bonne
sont indispensables. Commençons par découvrir les variables et en modi er les valeurs. collection (array, set,
map)
Qu'est-ce qu'une variable ?


6. Résumé de la partie
1
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  Quiz : Véri ez ce
précisément, une variable est un contenant utilisé pour enregistrer une donnée que vous avez
spéci que dont votre programme a besoin pour travailler. Un nom d'utilisateur, le appris sur les
nombre de billets restants pour un vol, la disponibilité ou non d'un certain produit en données et les

stock, toutes ces données sont enregistrées dans des variables. types !

  

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 modi er 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 :
javascript

1 let numberOfCats = 2;
2
3 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 n de ligne !
2. Ensuite, créez une variable appelée numberOfEpisodes et assignez-lui la valeur 12.

J'ai utilisé mon éditeur de code, dont l'interface est légèrement différente de la
vôtre. Mais la démarche et la solution restent les mêmes ! J'utilise également des
lignes de code additionnelles ("export" par exemple) mais ne vous en préoccupez
pas, tout ce qu'il vous est nécessaire de modi er se trouve entre les "===".

Solution :

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

Attention : dans beaucoup de démonstrations JavaScript, vous pourrez croiser le

mot-clé   var   plutôt que   let . Bien qu'il y ait une différence subtile entre les
deux (que nous détaillerons dans le chapitre sur la portée), pour l'instant vous
pouvez simplement voir   var   comme l'ancienne version de   let  : c'est une
autre façon de créer une variable.

Modi ez la valeur d'une variable



La façon la plus simple de modi er la valeur d'une variable est simplement de la

réaffecter :
javascript

1 let numberOfCats = 3;
2
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 modi er 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   +   :

javascript

1 let totalCDs = 67;

2
3 let totalVinyls = 34;
4
5 let totalMusic = totalCDs + totalVinyls;

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

javascript

1 let cookiesInJar = 10;

2 let cookiesRemoved = 2;
3
4 let cookiesLeftInJar = cookiesInJar - cookiesRemoved;

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

1 let cookiesInJar = 10;

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

En n, vous pouvez utiliser   ++   ou   --   pour ajouter ou soustraire 1 (incrément ou

décrément) :
javascript

1 let numberOfLikes = 10;

2
3 numberOfLikes++; // cela fait 11
4
5 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   /   :

javascript

1 let costPerProduct = 20;

2 let numberOfProducts = 5;
3
4 let totalCost = costPerProduct * numberOfProducts;
5
6 let averageCostPerProduct = totalCost / numberOfProducts;

Comme pour l'addition et la soustraction, il existe aussi les opérateurs   *=   et   /=  pour

multiplier ou diviser un nombre :
javascript

1 let numberOfCats = 2;
2
3 numberOfCats *= 6; // numberOfCats vaut maintenant 2*6 = 12;
4
5 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 modi é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 = ;
modi er 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.

J'AI TERMINÉ CE CHAPITRE ET JE PASSE AU SUIVANT

DÉCOUVREZ LA STRUCTURE DE CE ENREGISTREZ VOS DONNÉES AVEC DES

 
COURS TYPES DE DONNÉES

Le professeur
Will Alexander
Scottish developer, teacher and musician based in Paris.

OPENCLASSROOMS ENTREPRISES EN PLUS Français

 
L'entreprise Employeurs Nous rejoindre

Financement Devenez mentor

CONTACT

Forum Conditions générales d'utilisation

Blog Politique de Protection des données

personnelles

Accessibilité