Javascript - Pour rendre vos pages interactives

Auteur: Mohamed CHINY Durée necessaire pour le cours de Javascript - Pour rendre vos pages interactives Niveau recommandé pour le cours de Javascript - Pour rendre vos pages interactives Supports vidéo non disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Page 4: Les bases: la suite

Toutes les pages

Les chaines de caractères (String)

Une chaîne de caractères (célèbre sous le nom anglais String) est une suite de caractères quelconques. Il s'agit en fait d'un type de variables, d'ailleurs le plus utilisé en Javascript.

Nous allons traiter les chaînes de caractères en détail dans une page dédiée pour elles. Mais j'aimerais quand même que vous ayez une idée sur ce type de variables.

Création de la chaîne de caractères

Pour créer une variable de type chaîne de caractères, il existe plusieurs façons. La plus simple consiste à l'initialisation de celle ci par affectation.

Exemple:
str="Bonjour";
Nous disposons désormais d'une chaîne de caractères identifiée par le nom str et qui a la valeur "Bonjour".

Vous avez remarqué les guillemets qui entourent le mot "Bonjour"? En fait, elle sont obligatoires. A chaque fois que nous manipulons la valeur d'une chaîne de caractères directement, il faut la mettre dans des doubles quotes ou des simples quotes.

Exemple:
str="Bonjour"; // Correcte
str='Bonjour'; // Correcte
str=Bonjour; // Incorrecte (*)
Les deux première déclarations sont correctes. On a des doubles quotes pour la première ligne et des simples cotes pour la deuxième. Par contre la troisième déclaration est incorrecte. Cependant j'ai placé une astérisque dans le commentaire pour dire que si le mot Bonjour désigne la valeur que l'on veut affecter à la variable str, alors l'expression est incorrecte. Et si le mot Bonjour désigne un identifiant d'une autre variable (Exemple: Bonjour="abc") alors dans ce cas l'expression est correcte.

Concaténation des chaines

On désigne par concaténation le fait de regrouper plusieurs chaines de caractères dans une seule (soit pour l'affichage ou pour un autre traitement).

Pour concaténer deux chaînes de caractères on utilise l'opérateur +. Oui, c'est le même que l'opérateur arithmétique qui fait l'addition de deux nombres. En fait, l'opérateur + s'adapte automatiquement à la situation pour concaténer ou additionner.

Supposons que nous disposons de deux variables a et b:
  • Si a et b sont tous les deux des nombres (entier, ou à virgule) alors, l'opérateur + désigne l'addition et a+b calculera la somme des deux variables.
  • Si, au moins, l'un des deux variables a ou b est une chaîne de caractère, l'opérateur + désigne la concaténation et a+b mettra les valeurs des deux variables cote à cote.


Exemple:
a="Bonjour";
b=" a tous.";
c=a+b; // Donne "Bonjour à tous."

a="Bonjour";
b=10;
c=a+b; // Donne "Bonjour10";

a="12";
b=10;
c=a+b; // Donne "1210"

a=12;
b=10;
c=a+b; // Donne 22

Intéressons nous au troisième cas où a="12" et b=10, l'opération a+b concatène les deux variables et donne le résultat "1210". Même si "12" parait pour nous un entier, mais nous l'avons mis entre des guillemets, donc pour Javascript il s'agit d'une chaîne de caractères.

Supposons maintenant qu'on veut vraiment calculer la somme des deux nombres a et b même si a est en réalité une chaîne de caractères. La solution est la fonction parseInt().

La fonction parseInt() permet de parser (ou transformer) le type de la variable passée en paramètres en entier. Par exemple parseInt("12") retourne l'entier 12.

Pour que l'opération précédente s'effectue comme on le souhaite, le code devrait ressembler à ceci:
a="12";
b=10;
c=parseInt(a)+b; // Ce qui donne 22
Personnellement j'utilise une technique (peu orthodoxe) mais qui marche. Avant d'additionner deux nombres dont l'un d'entre eux peut être une chaîne de caractères, je les multiplie tous les deux par 1 (ce qui force le résultat à devenir un nombre) puis je les additionne, comme ceci:
a="12";
b=10;
c=a*1+b*1; // Ce qui donne aussi 22
Dans la dernière opération c=a*1+b*1, j'ai pas mis de parenthèses car la multiplication est prioritaire à l'addition. Cependant, pour ne pas se casser la tête avec les priorités des opérateurs, vaut mieux mettre les parenthèses pour regrouper les opérations élémentaires. Donc j'aurais pu écrire c=(a*1)+(b*1).
Il existe aussi la fonction parseFloat() qui permet de parser la variable passée en paramètre en nombre décimal.
Quiz (Pour tester vos connaissances)
  1. Que vaut la variable c à la fin de ce code?
    a=10;
    if(a%2==0){
       a+=10;
    }
10
5
20
15
  1. Dans ce code:
    var a=10;
La variable a est locale.
La variable a est globale.
  1. Dans le code suivant:
    var a=10;
    var b=20;
    c=a+b;
La variable c est locale.
La variable c est globale.
  1. Que vaut la variable c à la fin de ce code?
    a="2";
    b=10;
    c=a+b;
210
12
102
  1. Qu'affiche la boite de dialogue alert() dans ce code?
    salut="bonjour";
    alert("salut tout le monde");
bonjour tout le monde
salut tout le monde