Types de données

Créé le 10 Juin 2008, par Anis Safine

A ce stade du cours, vous savez que l'on peut afficher des données à l'écran avec la fonction document.write(). Vous savez également que les données à afficher doivent être placées entre les parenthèses.

Nous allons en terminer avec notre première instruction en étudiant les différentes types de données existants en JavaScript et comment les manipuler.

1. Les différents types

En JavaScript, il existe 3 types de données principales : les nombres, les chaînes de caractères et les booléens.

Pour commencer ce chapitre, nous allons les étudier un par un et voir comment les afficher à l'écran avec la fonction document.write().

Les nombres

En JavaScript, il existe deux types de nombres : les nombres entiers et les nombres à virgules flottantes (ou flottants). Voici quelques exemples de nombres (attention ce qui suit n'est pas un code JavaScript mais juste un exemple !) :

Attention à ne pas utiliser une virgule mais un point pour séparer la partie entière de la partie décimale d'un nombre à virgule flottante. Le nombre suivant n'est pas correct en JavaScript :

Les chaînes de caractères

On parle de chaîne de caractère en programmation pour désigner du texte, quel qu'il soit, et il existe une petite règle simple à connaître : on doit toujours placer le texte entre deux apostrophes ou deux guillemets pour former une chaîne de caractère .

Voici deux jolis exemples :

Pourquoi une telle règle ? Parce que sans ça, l'ordinateur est strictement incapable de faire la différence entre un texte et une instruction : oubliez d'encadrer votre texte par des guillemets ou des apostrophes et votre script plantera !

Faites attention à bien comprendre ceci : une chaîne de caractère n'est pas interprétée comme du code JavaScript par l'ordinateur mais bien comme du texte humain ! Il la saute, tout simplement !

Et comment je fais si mon texte contient une apostrophe ou un guillemet ?

C'est une excellente question ! En effet, supposons que l'on ai la chaîne de caractère suivante :

Comme vous pouvez le constater, il y a un apostrophe dans le texte. L'ordinateur voit le premier apostrophe et se dit "Tiens, je vais lire une chaîne de caractère", avance un peu et voit l'apostrophe contenu par notre phrase. Du coup l'ordinateur se dit "Ah ! Ca y est ! La chaîne se termine là !".

Il s'attend ensuite à du code JavaScript mais voit du texte humain qui ne signifie rien pour lui : et paf, vous avez gagné, il fait encore la gueule !

Pour éviter cette catastrophe, il faut "échapper" l'apostrophe avec un antislash "\". En gros, échapper un caractère c'est dire à l'ordinateur "ce caractère doit être considéré comme du texte et pas comme la fin d'une chaîne de caractère".

Voilà donc ce qu'il faudrait faire :

Une dernière chose à savoir, c'est que vous ne pouvez pas étaler une chaîne de caractère sur plusieurs lignes. La chaîne ci-dessous n'est pas correcte :

Les booléens

Un booléen est un type très particulier de variable qui n'accepte que deux valeurs : true (vrai) et false (faux).

En bref, vous l'avez compris, un booléen, c'est vrai ou faux et c'est tout. C'est une valeur logique et non un texte.

Mais c'est complètement inutile !

Je vous l'accorde, dit comme ça, ça semble complètement inutile mais nous verrons par la pratique un peu plus tard que c'est un type de variable extrêmement utilisé !

Fin du mystère document.write()

Voyons voir maintenant comment afficher chaque type de données à l'écran avec document.write(). Le contenu des parenthèses doit juste respecter toutes les règles que nous venons de voir. Voici une liste complète d'exemples :

Vous remarquerez que les différentes valeurs affichées ne sont pas séparées par des espaces... parce qu'on ne demande pas à en afficher ! Testez donc le code suivant :

Là, effectivement, on demande clairement à afficher un espace et cela sépare le true et le false.

Une dernière chose à savoir, c'est que document.write interprète les chaînes de caractère comme du (x)HTML ! Pour finir cette sous-partie essayez donc ceci :

2. Opérations simples

En JavaScript comme dans tout les langages de programmation, il est possible d'esclavagiser un peu son ordinateur en profitant de ses dons en calcul. Vous allez voir, c'est tout ce qu'il y a de plus intuitif !

- Pour faire une addition, on utilise le signe plus "+"
- Pour faire une soustraction, on utilise le signe moins "-"
- Pour faire une multiplication, on utilise le signe étoile "*"
- Pour faire une division, on utilise le signe slash "/"
- Pour faire un modulo, on utilise le signe pourcentage "%"

Etudions tout ça d'un peu plus près !

Additionner, soustraire, multiplier et diviser

Pour effectuer ces opérations, la syntaxe est toute simple ! Voyez par vous-même avec l'exemple suivant :

Bon là c'est tout simple, il n'y a rien à dire de particulier sur ces exemples... La seule chose qui pourrait vous intriguer, c'est l'affichage des "<br/>" après chaque résultat : ils sont là pour séparer les résultats.

Mais quand vous programmerez, vous aurez sûrement des calculs plus complexes à faire. Regardez cet exemple :

Dur dur de deviner le résultat de ce calcul, non ? Heureusement, il existe ce que l'on appelle des priorités de calculs !

- d'abord les multiplications et les divisions
- ensuite les additions et les soustractions
- tous les calculs compris entre parenthèses sont prioritaires

Ce qui donne pour l'exemple 1 :
- (2 + 4) = 6
- 6 * 5 / 2 = 15
- 15 + 5 - 1 = 19

Et pour l'exemple 2, on commence par les parenthèses "les plus intérieures" :
- 5 + 3 = 8
- 8 / 2 = 4
- 4 * 5 = 20

Si vous n'êtes pas à l'aise avec les priorités de calcul (ce qui relève plus du cours de maths qu'autre chose, désolé ! ), je vous conseille vivement de vous inventer des calculs et d'essayer de deviner à l'avance ce qu'ils vont donner. Allez, voilà pour vous entraîner :

Si vous êtes au point sur les priorités de calcul, alors on peut continuer !

Ça fait quoi si j'additionne un entier et un flottant, ou si je fait une division qui ne donne pas un entier ?

Il n'y a absolument aucun piège quand on fait une opération : tous les calculs donnent ce qu'ils sont censés donner. Donc pour répondre à la question, la somme d'un entier et d'un flottant donne un flottant, et une division qui ne donne pas un entier donne un flottant...

Je dirais même plus ! La somme de deux flottants peut donner un entier ! Par exemple, 0.5 + 0.5 donne 1 !

Calculer un modulo

Si je fais une petite section simplement sur le modulo, ce n'est pas parce que c'est une opération particulièrement compliquée (malgré un nom plutôt inquiétant...) mais parce que c'est une opération un peu moins connue qu'une bête addition ou multiplication.

En fait, tout le monde sait (si si, même toi qui dormait en cours de maths !) que lorsque l'on fait une division, on obtient un quotient et un reste :

- pour 8 / 5, le quotient est 1 et le reste est 3
- pour 4 / 2, le quotient est 2 et le reste est 0

Si cela peut vous aider, sachez que :
nombre1 / nombre2 = quotient * nombre2 + reste

Quel rapport avec le modulo ? Et bien le modulo donne le reste d'une division et s'utilise comme ceci :

Ce bout de code affiche le reste de la division de 8 par 5, c'est à dire 3.

Opérations entre chaînes de caractère

Aussi surprenant que cela puisse paraître, il est également possible de faire des opérations entre des chaînes de caractère. En fait, il n'y en a qu'une, l'addition !

Lorsque l'on "additionne" deux chaînes de caractère, on parle de concaténer deux chaînes. Concaténer, cela revient à coller deux chaînes de caractère l'une à l'autre pour en obtenir une seule.

Par exemple, si vous concaténez "Bonjour !" et " Comment tu t'appelles ?", vous obtenez une seule chaîne de caractère : "Bonjour ! Comment tu t'appelles ?".

Voyez par vous-même :

Surprenant non ?

Et comme vous êtes abominablement tordus, vous allez me demander ce que ça fait d'additionner un nombre à une chaîne de caractère... Simple ! Cela transforme le nombre en une chaîne de caractère, et ça concatène le tout !

Vous n'avez qu'à essayer ceci :

Toujours aussi tordus, vous allez me dire :

Et ça fait quoi si je fais une autre opération qu'une addition entre 2 chaînes de caractères ?

Là, faut pas trop en demander à l'ordinateur, il ne sait rien faire d'autre qu'une addition avec une chaîne de caractère. Si vous tentez quoi que ce soit d'autre, il va vous retourner une valeur particulière : NaN.

NaN, ça veut dire Not a Number ("ce n'est pas un nombre", en français), c'est à dire que vous avez tenté de faire une opération réservée aux nombres.

Et un dernier exemple pour terminer ce chapitre :

Conclusion

Eh bien ce chapitre fût riche en nouveautés ! Nous en avons terminé avec la fonction document.write() et les types de données, et vous savez maintenant faire quelques calculs simples !

Au prochain chapitre, nous allons nous intéresser à une notion fondamentale : les variables !