Informatique


Les variables

Aller à



Définition

Définition (Petit Robert)
Une variable est une information caractérisée par un nom et un type, le contenu de la variable pouvant être modifié par une instruction d' affectation.
Le JS étant faiblement typé il n'est pas nécessaire de déclarer le type, celui-ci dépendra de la valeur contenue dans la variable.

Les noms des variables

En JS (ce qui se vérifie dans la plupart des langages de programmation), pour nommer les variables on utilisera ma méthode camelCase.

  • les 26 lettres de l'alphabet en majuscules/minuscules;
  • les 10 chiffres de la numération décimale (sauf 1er caractère);
  • éventuellement le caractère _ (underscore).

Le JavaScript est sensible à la casse des caractères, un a n'est pas égale à un A.

Nous éviterons :
  • les caractères accentués;
  • un chiffre en tant que premier caractère du nom de la variable;
  • les espaces;
  • les caractères spéciaux (par ex: la ponctuation).
  • Les mots réservés du langage (while, for, array,etc.)

Déclaration et affectation des variables

Pour déclarer une variable on utilise les mots-clés let, const et var (à ne plus utiliser!).
Pour l'affectation interne l'opérateur = et pour l'affectation externe la méthode prompt() de l'objet window.
L'affectation se fait toujours de droite à gauche, l'expression située à droite du signe d'affectation est évaluée et le résultat de cette expression est affecté (chargé) dans la variable dont le nom est situé à gauche du signe d'affectation.
Affectation interne

	/*Déclaration des variables
	---------------------------------*/
	let valeur;		//déclaration simple
	let val1,val2,val3,val4; 	//déclaration multiple

	/*Affectation des variables
	--------------------------*/
	val1=5; 	//un entier en B10
	val1=5.4e-6; 	//un entier en B10 exprimé en exposant
	val1=0x5A; 	//un entier en B16
	val1=0b1101; 	//un entier en B2
	val2=65.298; 	//un réel (virgule flottante)
	val3="Agent D, le professeur Doofenshmirtz..."; 	//une chaîne
	val4=true; 	//un booléen
	valeur=null; 	//signifie une absence de valeur
		
Affectation externe

	/*Déclaration
	----------------*/
	let valeur;

	/*Affectation externe de la variable valeur
	------------------------------------------*/
	valeur=window.prompt("Entrer une valeur","--ici---");
		
Les déclarations des variables sont "remontées" au début du scope
Démo
	console.log(nomUtil);
	let nomUtil; //Déclaration de nomUtil;
		

On constate qu'on a accès à la variable nomUtil avant sa déclaration!
Ceci démontre que, discrètement, l'interpréteur remonte la déclaration avent l'exécution du code.


Les types des variables

Javascript est un langage faiblement typé.

Ce qui fait le type d'une variable est son contenu, une variable ne reçoit pas de type au moment de sa déclaration, celle-ci obtient son type de la valeur qui lui est affectée!
Une variable peut donc changer de type, il suffit pour cela de l'affecter avec une valeur du type désiré.

Une variable n'est pas typée lors de sa déclaration, elle reçoit le type de la valeur qui lui est affectée.

Il existe les types primitifs et non primitif:
Les types primitifs sont:
  • number: un seul type pour représenter les entiers et les flottants (nombres réels);
  • string: pouvant contenir un caractère ou une chaîne de caractères;
  • boolean: true ou false;
  • null; il n'existe qu'une seule valeur de ce type (qui est un objet): null
  • undefined; les variables non affectées seront de ce type
  • symbole; utilisé pour générer des clés car la variable de type symbole ne peut avoir qu'une valeur unique et immuable
Un seule type non primitif: object: les tableaux, les tableaux typés, les dates, les objets du programmeur.

Démo
	let t1,t2,t3,t4,t5,t6,t7,t8,t9;
	t1=5;
	t2="Super!";
	t3=true;
	t4=null;
	//On affecte pas t5
	t6=new Array();
	t7=new Date();
	t8=Symbol();
	t9=function(){};
	document.write(typeof t1+"<br>"+ typeof t2 +"<br>"+ typeof t3 +"<br>"+ typeof t4
	+"<br>"+ typeof t5 +"<br>"+ typeof t6 +"<br>"+ typeof t7 +"<br>"+ typeof t8
	+"<br>"+ typeoft9);
	
  • typeof t4 renvoie object au lieu de null, il s'agit d'un bug de JavaScript! Celui-ci n'est pas corrigé car le corriger maintenant entraînerait des bugs dans les applications qui ont évalué cette valeur à object!!!
  • typeof t9 renvoie function.
    On peut admettre que function puisse être un type qui "domine" le type object rien que par le fait que c'est une fonction qui construit un objet!
    Toutefois, il est aujourd'hui admis que les fonctions sont des objets qui ont "en quelque sorte" une proprété "Call" leur permettant d'être appellés.(K.Simpson Types & Grammar pg 4)
Undefined versus "undeclared"

Il ne faut pas confondre une variable déclarée qui n'a pas encore été affectée et une variable non déclarée.

Lorsqu'une variable a été déclarée elle est accessible (selon sa portée!) en lecture ou écriture, elle a une référence (son dresse mémoire) même si elle n'a pas encore été affectée.

Par contre, une variable non déclarée n'existe tout simplement pas, sa référence n'existe pas, il n'existe aucune adresse correspondant à son nom mnémonique.

Démo
	let t1;
	console.log(t1);
	console.log(t2);
	

L'affichage

Nous utiliserons la méthode write() de l'objet document.

Attention à l'aspect "bloquant" lors du chargement de la page!
En programmation web on préférera element.innerHTML=...;


On utilise les guillemets, les quotes ou l'accent grave pour délimiter une chaîne de caractères.
Pour cette méthode la virgule sépare les paramètres, l'opérateur "+" concatène et le caractère "\" permet d'échapper un caractère.
Un caractère d'échappement permet d'empêcher qu'un caractère réservé du langage soit interprété.
On peut y intégrer des balises html et du code css.

Tout doit se trouver sur la même ligne, sans quoi la console renvoie une erreur!

Les guillemets

Les guillemets permettent d'afficher des chaînes de caractères à l'écran.

Démo
		document.write("Le prix s'oublie, la qualité reste!");
	
Les quotes

Les quotes permettent d'afficher des chaînes de caractères à l'écran.

Démo
	document.write('Toujours balayer devant sa porte avant de balayer devant la porte des autres!');
	
Le caractère \

Le caractère d'échappement \ pour empêcher l'interprétation d'un caractère réservé.

Démo
	document.write("Avec son pseudo \"Super brol\" il en impose");
	document.write("<br>");
	document.write('Avec son pseudo "Super brol" il en impose');
	document.write("<br>");
	document.write("Avec son pseudo 'Super brol' il en impose");
	document.write("<br>");
	document.write("Avec son pseudo \\Super brol\\ il en impose");
	
  • Pour éviter un conflit entre les guillemets on "échappe" les guillemets qui doivent apparaître à l'affichage.
  • Une balise html est une chaîne de caractère, rien empêche d'intégrer des balises dans le document.write.
  • Si on encadre la chaîne avec des quotes on a pas besoin du caractère d'échappement.
  • L'inverse est vrai si on veut utiliser des quotes autour d'une chaîne.
  • On peut bien sûr échapper le caractère d'échappement.
Afficher le contenu d'une variable

La variable ne peut pas être prise entre les guillemets ou les quoutes.

Démo
	let nomUtil = "Jean-François";
	document.write("Bonjour ",nomUtil,"."); //Avec le séparateur de paramètres
	document.write("<br>");
	document.write("Bonjour "+nomUtil+"."); //Avec l'opérateur de concaténation
	
  • Dans le premier cas on utilise la virgule, on a donc 3 paramètres.
  • Dans le deuxième cas on utilise l'opérateur de concaténation, on a donc 1 paramètre.
Le caractère ` (accent grave)

L'accent grave fonctionne exactement comme les guillemets et les quotes, à part...

Démo
	let nomUtil = "Jean-François";
	document.write(`Bonjour `,nomUtil,`.`); 
	document.write(`<br>`); 
	document.write(`Bonjour ${nomUtil}.`);
	document.write(`<br>`); 
	document.write(`Bonjour 	
		${nomUtil}.`);	//... sur plusieurs lignes!

	

L'accent grave permet de déréférencer une variable au sein de la chaîne de caractères pour peu qu'on utilise la syntaxe ${nom_variable}, très pratique pour éviter les concaténations.

L'accent grave permet aussi d'écrire un document.write sur plusieurs lignes!

Un exemple général
Démo
	/*Déclaration
	---------------*/
	let valeur;

	/*Affectation externe de la variable valeur
	-------------------------------------------*/
	valeur=window.prompt("Entrer une valeur","--ici---");

	/*Affichage du contenu de la variable valeur
	-------------------------------------------*/
	document.write("Votre valeur:",valeur,".","<br>")

	/*Avec l'échappement
	-------------------------*/
	document.write("Votre valeur \"personnelle\":",valeur,".","<br>");

	/*Avec la concaténation
	----------------------------*/
	document.write("Votre valeur \"personnelle\":"+valeur+"."+"<br>");
		
	/*Avec l'accent grave
	----------------------------*/
	document.write(`Votre valeur 
			"personnelle": ${valeur}.
			<br>`);

		

Afficher le type d'une variable

L'opérateur typeof permet de renvoyer le type d'une variable.
Démo
	/*Déclaration
	--------------*/
	let valeur;

	/*Affectation externe de la variable valeur
	------------------------------------------*/
	valeur=window.prompt("Entrer une valeur","--ici---");

	/*Affichage du type de la variable valeur
	-----------------------------------------*/
	document.write("Type de votre variable: ",typeof valeur);
		

Notion d'accumulateur

Un accumulateur (ou décumulateur) est une variable permettant d'accumuler des valeurs.

Pour ce faire, et parce que l'affectation écrase le contenu d'une variable, la variable où l'on veut accumuler des valeurs doit être présente des 2 côtés du signe d'affectation

Démo
	let res=0;
		for(let i=1;i < 11; i++)	{
		res = res + i;
		document.write("Contenu au tour "+i+": "+res+"<br>");
		}
	document.write("<br>Contenu final de res:",res,"<br>");

		

Equivalent ASCII du contenu d'une variable

La méthode charCodeAt() permet de convertir un caractère en son équivalent ASCII. La méthode accepte un paramètre représentant la place du caractère dans la chaîne de caractère.
Exemple pour la variable carac:
Démo
	let carac,valascii;
	carac="b";
	valascii=carac.charCodeAt();
	document.write("Equivalent ASCII de "+carac+" = "+valascii);
La méthode String.fromCharCode() permet de passer du code ASCII au caractère. La méthode peut accepter plusieurs paramètres, correspondant chacun à un caractère, on peut donc créer une chaîne de caractères complète.
Exemple pour la variable carac:
Démo
		let valascii,carac;
		valascii=98;
		carac=String.fromCharCode(valascii);
		document.write("Equivalent alphanumérique de "+valascii+" = "+carac);

		

Quiz

Le vocabulaire 1

Le vocabulaire 2

Les variables en Javascript

L'affichage 1