Apprendre Javascript pour rendre vos pages Web interactives

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

Page 4: Les bases du Javascript (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 a à 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. 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
  1. Dans le code suivant:
    a=10;
    // a+=5;
La variable a vaut 15
La variable a vaut 10
  1. Quelle est l'erreur dans ce code?
    alert("Le caractère " délimite une chaîne de caractères");
Le dernier caractère " ne doit pas figurer.
Le deuxième caractère " doit être précédé par le caractère /.
Le deuxième caractère " doit être précédé par le caractère \.