2-VARIABLES ET CONSTANTES

1. Les variables

Une variable consiste en un espace de stockage, qui permet de garder en mémoire tout type de données. La variable est ensuite utilisée dans les scripts.

Les variables sont utilisées comme des noms symboliques désignant les valeurs utilisées dans l’application. Les noms des variables sont appelés identifiants.

Ces identifiants doivent respecter certaines règles.

Un identifiant JavaScript doit commencer par une lettre, un tiret bas (_) ou un symbole dollar ($). Les caractères qui suivent peuvent être des chiffres (0 à 9).

À noter: puisque JavaScript est sensible aux majuscules et minuscules: les lettres peuvent comprendre les caractères de « A » à « Z » (en majuscule) mais aussi les caractères de « a » à « z » (en minuscule).

Il existe trois types de déclarations en JavaScript

Var   : On déclare une variable, éventuellement en initialisant sa valeur.

Let    : On déclare une variable dont la portée est celle du bloc courant, éventuellement en initialisant sa valeur.

Const : On déclare une constante nommée, dont la portée est celle du bloc courant, accessible en lecture seule.

Exemples :

• En utilisant le mot-clé var, par exemple : var x = 42. Cette syntaxe peut être utilisée pour déclarer des variables locales ou globales selon le contexte d’exécution.

• En utilisant le mot-clé const ou le mot-clé let, par exemple avec let y = 13.

Cette syntaxe peut être utilisée pour déclarer une variable dont la portée sera celle du bloc. Voir le paragraphe sur les portées des variables ci-après.

• Initialiser une variable

Pour initialiser une variable, on utilise l’opérateur    <strong>=</strong>  qui est dans ce cas non pas un opérateur d’égalité mais un opérateur d’assignation ou d’affectation.

Ce point est un point très important à retenir pour éviter les confusions futures et donc je le répète :

le signe <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color">=</mark> ne possède pas du tout la même signification que le « égal » mathématique que vous utilisez dans la vie de tous les jours.

Ici, c’est un opérateur d’affectation. Il sert à indiquer qu’on affecte (ou « assigne » ou encore « stocke ») la valeur à droite du signe dans le conteneur à gauche de celui-ci. Encore une fois, la variable n’est pas « égale » à sa valeur.

La remontée ou « hoisting » des variables

Lorsqu’on utilise la syntaxe avec <strong>var</strong>, on n’est pas obligé de déclarer la variable avant de la manipuler dans le code, on peut très bien effectuer des manipulations en haut du code et la déclarer en fin de code.

Cela est possible car le JavaScript va traiter les déclarations de variables effectuées avec var avant le reste du code JavaScript. Ce comportement est appelé remontée ou hoisting.

Ce comportement a été jugé comme inadapté dans les versions récentes de JavaScript et a donc été corrigé dans la déclaration de variables avec let : les variables utilisant la syntaxe let doivent obligatoirement être déclarées avant de pouvoir être utilisées.

Le but de ce comportement est de pousser les développeurs à créer des scripts plus compréhensibles et plus clairs en apportant de la structure au code avec notamment la déclaration des différentes variables au début de chaque script.

• TYPES DE VARIABLES

Les variables JavaScript vont pouvoir stocker différents types de valeurs, comme du texte ou un nombre par exemple. Par abus de langage, nous parlerons souvent de « types de variables » JavaScript.

En JavaScript, contrairement à d’autres langages de programmation, nous n’avons pas besoin de préciser à priori le type de valeur qu’une variable va pouvoir stocker. Le JavaScript va en effet automatiquement détecter quel est le type de la valeur stockée dans telle ou telle variable, et nous allons ensuite pouvoir effectuer différentes opérations selon le type de la variable, ce qui va s’avérer très pratique pour nous !

En JavaScript, il existe 7 types de valeurs différents. Chaque valeur qu’on va pouvoir créer et manipuler en JavaScript va obligatoirement appartenir à l’un de ces types. Ces types sont les suivants :

1. Primitives
   • Number
   • String
   • Boolean
   • Undefined
   • Null
2. Références
   • Array
   • Objet

Pour connaitre le type d’une variable typeof

Console.log (typeof maVariable) ;

a-Le type chaîne de caractères ou String

Le premier type de données qu’une variable va pouvoir stocker est le type String ou chaîne de caractères. Une chaine de caractères est une séquence de caractères, ou ce qu’on appelle communément un texte.

Notez que toute valeur stockée dans une variable en utilisant des guillemets ou des apostrophes sera considérée comme une chaine de caractères, et ceci même dans le cas où nos caractères sont à priori des chiffres comme "29" par exemple.

Un point sur l’utilisation des guillemets et apostrophes droits et sur l’échappement

En JavaScript, on va pouvoir utiliser indifféremment des guillemets droits ou des apostrophes pour entourer une chaine de caractères et ces deux méthodes vont être strictement équivalentes à la différence d’autres langages comme le PHP par exemple.

Faites attention cependant à un point : si votre chaine contient un caractère qui est le même que le délimiteur de chaine choisi, il faudra neutraliser ce caractère en l’échappant au moyen d’un antislash ou changer de délimiteur.

b-Le type nombre ou Number

Les variables en JavaScript vont également pouvoir stocker des nombres. En JavaScript, et contrairement à la majorité des langages, il n’existe qu’un type prédéfini qui va regrouper tous les nombres qu’ils soient positifs, négatifs, entiers ou décimaux (à virgule) et qui est le type Number.

c-Le type de données booléen (Boolean)

Une variable en JavaScript peut encore stocker une valeur de type Boolean, c’est-à-dire un booléen.

Un booléen, en algèbre, est une valeur binaire (soit 0, soit 1). En informatique, le type booléen est un type qui ne contient que deux valeurs : les valeurs true (vrai) et false (faux).

d-Les types de valeurs Null et Undefined

Les types de valeurs <strong>Null</strong> et <strong>Undefined</strong> sont des types un peu particuliers car ils ne contiennent qu’une valeur chacun : les valeurs <strong>null</strong> et <strong>undefined</strong>.

La valeur null correspond à l’absence de valeur ou du moins à l’absence de valeur connue. Pour qu’une variable contienne null, il va falloir stocker cette valeur qui représente donc l’absence de valeur de manière explicite.

La valeur null va être utile dans certains cas où on souhaite explicitement indiquer une absence de valeur connue. Il va cependant falloir qu’on ait un peu plus d’expérience avec le JavaScript pour montrer de manière pratique l’intérêt de cette valeur.

La valeur undefined correspond à une variable « non définie », c’est-à-dire une variable à laquelle on n’a pas affecté de valeur.

Cette définition peut vous paraitre similaire à celle de null et pourtant ces deux valeurs ont une signification différente.

Si on déclare une variable sans lui attribuer de valeur, alors son type sera Undefined. Si on déclare une variable et qu’on lui passe null, alors son type sera Object.

e-Les types de valeurs Object (objet) et Symbol (symbole)

Les objets sont des structures complexes qui vont pouvoir stocker plusieurs valeurs en même temps et que nous étudierons plus tard dans ce cours car il s’agit là d’un sujet relativement complexe à appréhender pour un débutant.

Notez qu’en JavaScript, contrairement à d’autres langages, les tableaux sont avant tout des objets et sont des valeurs de type Object.

Finalement, nous parlerons du type de données Symbol après avoir vu les objets car ces deux types sont liés.

• Conversion de types de données

JavaScript est un langage à typage dynamique. Cela signifie qu’il n’est pas nécessaire de spécifier le type de données d’une variable lors de sa déclaration. Les types de données sont convertis automatiquement durant l’exécution du script. Ainsi, il est possible de définir une variable de cette façon :

TP :

Variables et type

//declaration et affectation

let prenom = "Mohamed"  // stringy

let age = 56  // Number

let enLigne = true // boolean

let choix = null //null

// type variables
console.log(typeof prenom)
console.log(typeof age)
console.log(typeof enLigne)
console.log(typeof choix)

// concatenation
console.log(prenom + ' '+ age + ' ans')

console.log(`le m'appelle ${prenom} ,j'ai ${age} `)

console.log('il fait beau aujourd\'hui');

// declaration constate

const VILLE = 'FES';

Type Tableau

// array

let tab = ['Mohamed',56,true,['bleu','rouge']]

// taille du tableau
console.log(tab.length)

console.log(tab[1])
console.log([tab[3][1]])

Type Objet

//type objet

let personne = {
    prenom : 'Mohamed',
    age : 59,
    adresse:{
        rue: 'bv mohamed V',
        ville: 'Fes'
    }
}

console.log(personnes.prenom)

Présentation des opérateurs arithmétiques et d’affectation JavaScript

Qu’est-ce qu’un opérateur ?

Un opérateur est un symbole qui va être utilisé pour effectuer certaines actions notamment sur les variables et leurs valeurs.

Par exemple, l’opérateur <strong>*</strong> va nous permettre de multiplier les valeurs de deux variables, tandis que l’opérateur <strong>=</strong> va nous permettre d’affecter une valeur à une variable.

Il existe différents types d’opérateurs qui vont nous servir à réaliser des opérations de types différents. Les plus fréquemment utilisés sont :

1. Les opérateurs arithmétiques ;
2. Les opérateurs d’affectation / d’assignation ;
3. Les opérateurs de comparaison ;
4. Les opérateurs d’incrémentation et décrémentation ;
5. Les opérateurs logiques ;
6. L’opérateur de concaténation ;
7. L’opérateur ternaire ;
8. l’opérateur virgule.

Pour le moment, nous allons nous concentrer particulièrement sur les opérateurs arithmétiques et d’affectation ou d’assignation. Nous étudierons les autres par la suite lorsqu’on devra les utiliser dans certaines structures JavaScript.

1-Les opérateurs arithmétiques

Les opérateurs arithmétiques vont nous permettre d’effectuer toutes sortes d’opérations mathématiques entre les valeurs de type Number contenues dans différentes variables.

Nous allons pouvoir utiliser les opérateurs arithmétiques suivants en JavaScript :

Opérateur	Nom de l’opération associée
+	Addition
–	Soustraction
*	Multiplication
/	Division
%	Modulo (reste d’une division euclidienne)
**	Exponentielle (élévation à la puissance d’un nombre par un autre)

2-Les opérateurs d’affectation

Les opérateurs d’affectation vont nous permettre, comme leur nom l’indique, d’affecter une certaine valeur à une variable.

Nous connaissons déjà bien l’opérateur d’affectation le plus utilisé qui est le signe =. Cependant, vous devez également savoir qu’il existe également des opérateurs « combinés » qui vont effectuer une opération d’un certain type (comme une opération arithmétique par exemple) et affecter en même temps.

Opérateur	Définition
+=	Additionne puis affecte le résultat
-=	Soustrait puis affecte le résultat
*=	Multiplie puis affecte le résultat
/=	Divise puis affecte le résultat
%=	Calcule le modulo puis affecte le résultat

La concaténation et les littéraux de gabarits en JavaScript

La concaténation en JavaScript

Concaténer signifie littéralement « mettre bout à bout ». La concaténation est un mot généralement utilisé pour désigner le fait de rassembler deux chaines de caractères pour en former une nouvelle.

En JavaScript, l’opérateur de concaténation est le signe +. Faites bien attention ici : lorsque le signe + est utilisé avec deux nombres, il sert à les additionner. Lorsqu’il est utilisé avec autre chose que deux nombres, il sert d’opérateur de concaténation.

Les littéraux de gabarits

On a vu plus tôt dans ce cours qu’il fallait en JavaScript toujours entourer nos chaines de caractères (nos textes) avec des apostrophes ou des guillemets droits.

Il existe en fait une troisième manière introduite récemment d’entourer des chaines de caractères en JavaScript qui va utiliser des accents graves `.

La grande différence entre l’utilisation d’accents graves ou l’utilisation d’apostrophes ou de guillemets est que toute expression placée entre les accents graves va être interprétée en JavaScript. Pour le dire simplement : tout ce qui renvoie une valeur va être remplacé par sa valeur.

Cela signifie notamment qu’on va pouvoir placer du texte et des variables ensemble sans avoir besoin d’utiliser d’opérateur de concaténation puisque les variables vont être interprétées, c’est-à-dire remplacées par leur valeur.

Pour que cela fonctionne bien, il va cependant falloir respecter une certaine syntaxe : il va falloir placer les expressions entre ${et}.

2-Les constantes en JavaScript

Définition et utilité des constantes en JavaScript

Une constante est similaire à une variable au sens où c’est également un conteneur pour une valeur. Cependant, à la différence des variables, on ne va pas pouvoir modifier la valeur d’une constante.

En effet, une fois qu’une valeur est attribuée à une constante, celle-ci est attribuée de façon définitive et ne va pas pouvoir être modifiée. C’est d’ailleurs de là que les constantes portent leur nom : car leur valeur est constante.

Les constantes vont être très utiles dans le cadre d’un script qui va réutiliser souvent la même valeur mais qui doit toujours utiliser cette valeur exactement. Dans ce cas-là, plutôt que de réécrire la valeur à chaque fois, nous allons stocker la valeur dans une constante et utiliser la constante.

Dans ce cas-là, utiliser une constante va rendre notre script plus clair car on pourra rapidement identifier la valeur utilisée et également plus facilement maintenable car dans le cas où l’on doive modifier le script et cette valeur en particulier un jour, on n’aura alors qu’à modifier la constante plutôt que de modifier toutes les occurrences de la valeur dans le script.

Déclarer une constante en JavaScript

Pour créer ou déclarer une constante en JavaScript, nous allons utiliser le mot clef <strong>const</strong>.

On va pouvoir déclarer une constante exactement de la même façon qu’une variable à la différence qu’on va utiliser <strong>const</strong> à la place de let.

Retour Plan cours