Leçon 02 : Les variables

Contenu :

Cette leçon présente le concept de variable. Les variables constituent le tout premier niveau d'abstraction dans un langage de programmation. C'est un concept simple et compliqué à la fois !

Objectifs :

Maitriser le concept de variable et savoir construire des expressions simples.

Déclaration de variables

Une variable est un emplacement nommé contenant une valeur. On peut imaginer une variable comme une boite contenant différentes valeurs. Avant de pouvoir utiliser une variable, il faut la déclarer. La déclaration est comme une annonce faite à JavaScript pour le prévenir de l'existence d'une nouvelle variable. Pour déclarer un variable on utilise le mot-clef var. Par exemple, on peut déclarer la variable nom de la façon suivante :

var nom;

Une variable ne peut être déclarée qu'une seule fois ! Par exemple, le code suivant est incorrect :

var x;
var y;
var x; /* double déclaration ! */

Une fois déclarée, une variable peut être utilisée.

L'affectation

L'affectation est l'opération qui consiste à mettre une (nouvelle) valeur dans une variable. Par exemple, le code suivant

var nom;          // déclaration
nom = "Superman"; // affectation

déclare d'abord la variable nom (définit un nouvel emplacement) et lui affecte ensuite la chaîne de caractères Superman (place à cet emplacement la valeur). Il est possible de combiner les deux opérations en une seule instruction :

var nom = "Superman"; // déclaration et affectation

Les expressions

Pour accéder (obtenir) la valeur placée dans une variable, il suffit d'utiliser la nom de la variable dans une expression, comme par exemple :

alert( nom );

La ligne précédente affiche une fenêtre avec la chaîne Superman dedans. Lorsque JavaScript évalue l'appel à la fonction alert, il commence par évaluer le paramètre (l'expression entre parenthèses). Ici, l'expression est la variable nom et l'évaluer signifie retourner sa valeur.

On peut former des expressions aussi complexes que possible en combinant des variables, des opérateurs et des expressions. Par exemple, le code suivant :

alert( "Je m'appelle " + nom );

va ouvrir une fenêtre contenant la chaîne Je m'appelle Superman. On peut obtenir le même résultat en stockant d'abord le résultat de la concaténation dans une nouvelle variable :

var phrase = "Je m'appelle " + nom;
alert( phrase );

On sait que JavaScript convertit au besoin un nombre en chaîne de caractères. L'opération inverse est possible via la fonction Number. Par exemple, le code suivant :

var x = "12";
var y = 28;
alert( x + y );
alert( Number( x ) + y );

affiche successivement deux fenêtres avec les messages 1228 et 40.

La fonction `prompt`

On dispose de la fonction alert pour afficher une information depuis le programme vers l'extérieur. La fonction prompt offre la fonctionnalité inverse et permet à l'utilisateur de fournir au programme une information depuis l'extérieur. Cette fonction ouvre une fenêtre contenant une zone de saisie dans laquelle l'utilisateur peut taper des caractères et après avoir cliqué sur le bouton Ok, la fonction retourne la chaîne des caractères tapés par l'utilisateur. Par exemple, le code suivant :

nom = prompt("Votre nom ?","");

ouvre une fenêtre qui ressemble à ça Prompt

Si l'utilisateur tape les caractères Batman et clique sur OK, alors la chaîne Batman est affectée à la variable nom.

La plupart du temps, on stocke le résultat de la fonction prompt dans une variable pour une utilisation ultérieure. Mais ce n'est pas une obligation, et on pourrait écrire par exemple :

alert( prompt( "Votre nom ?", "" ) );

Le code précédent combine les deux fonctions alert et prompt. Pour évaluer l'appel à la fonction alert, JavaScript évalue d'abord son paramètre qui est un appel à la fonction prompt. Remarquez que ces deux fonctions sont bloquantes : tant que l'utilisateur n'a pas cliqué sur OK, l'évaluation de la fonction est suspendue.

Remarquez que la fonction prompt prend deux paramètres, le message qui s'affiche dans la fenêtre, et une chaîne pour laquelle, dans les exemples précédents, on a fourni la chaîne vide "". Cette deuxième chaîne est la chaîne de caractères qui apparaît par défaut dans la zone de saisie de la fenêtre.

Exercice 1

Ecrivez un code qui demande à l'utilisateur son nom (à l'aide la fonction prompt) et qui affiche un message de bienvenue (à l'aide la fonction alert) du type Bonjour Superman, bonne journée ! (où Superman est le nom saisi par l'utilisateur).

Exercice 2

Ecrivez un code qui demande à l'utilisateur trois nombres (les uns après les autres) puis affiche la moyenne de ces nombres. Produisez deux versions de ce code, une première version qui utilise au moins quatre variables et une seconde version qui n'utilise aucune variable. Pensez à utiliser la fonction Number pour convertir le résultat de la fonction prompt.

Exercice 3

Ecrivez un code qui demande à l'utilisateur la largeur et la longueur d'un rectangle, et qui affiche le périmètre et la surface du rectange, chacun sur une ligne différente (vous pouvez utiliser le caractère newline '\n').

Exercice 4

Ecrivez un code qui demande à l'utilisateur la somme et la différence de deux entiers, et qui affiche ces deux entiers dans une fenêtre. Par exemple, si l'utilisateur saisit les valeurs 20 et 6, le programme affiche les nombres 13 et 7 (car 13 + 7 = 20 et 13 - 7 = 6). Votre code ne doit utiliser que deux variables.

Exercice 5

Ecrivez un code qui permet de préparer une soirée pizza. Le programme demande à l'utilisateur le nombre de parts prévu pour chaque convive, puis le nombre de convives et enfin le nombre de parts contenu dans une pizza, et affiche le nombre de pizza à commander pour la soirée.

Exercice 6

Le but de cet exercice est d'explorer les fonctions (on dit aussi les méthodes) disponibles sur les chaînes de caractères. Ecrivez un code qui demande à l'utilisateur son prénom, puis son nom (à l'aide de deux prompt séparés), et qui afiche un message de bienvenue dans lequel :

le prénom apparaît en minuscules, avec la première lettre en majuscule
le nom apparaît en majuscules

N'utilisez pas plus de trois variables pour écrire ce code.