Mis à jour le mercredi 31 août 2016
  • 40 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

Ce cours existe en eBook.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Les données numériques

Connectez-vous ou inscrivez-vous pour bénéficier de toutes les fonctionnalités de ce cours !

Après l'étude des chaînes de caractères et des regex, il est temps de passer aux données numériques !
La gestion des données numériques en JavaScript est assez limitée mais elle existe quand même et se fait essentiellement par le biais des objets Number et Math. Le premier est assez inintéressant mais il est bon de savoir à quoi il sert et ce qu'il permet de faire ; le deuxième est une véritable boîte à outils qui vous servira probablement un jour ou l'autre.

L'objet Number

L'objet Number est à la base de tout nombre et pourtant on ne s'en sert quasiment jamais de manière explicite, car on lui préfère (comme pour la plupart des objets) l'utilisation de son type primitif. Cet objet possède pourtant des fonctions intéressantes comme, par exemple, celle permettant de faire des conversions depuis une chaîne de caractères jusqu'à un nombre en instanciant un nouvel objet Number :

var myNumber = new Number('3'); // La chaîne de caractères « 3 » est convertie en un nombre de valeur 3

Cependant, cette conversion est imprécise dans le sens où on ne sait pas si on obtiendra un nombre entier ou flottant en retour. On lui préfère donc les fonctions parseInt() et parseFloat() qui permettent d'être sûr de ce que l'on obtiendra. De plus, parseInt() utilise un second argument permettant de spécifier la base (2 pour le système binaire, 10 pour le système décimal, etc.) du nombre écrit dans la chaîne de caractères, ce qui permet de lever tout soupçon sur le résultat obtenu.

Cet objet possède des propriétés accessibles directement sans aucune instanciation (on appelle cela des propriétés propres à l'objet constructeur). Elles sont au nombre de cinq, et sont données ici à titre informatif, car leur usage est peu courant :

  • NaN : vous connaissez déjà cette propriété qui signifie Not A Number et qui permet, généralement, d'identifier l'échec d'une conversion de chaîne de caractères en un nombre. À noter que cette propriété est aussi disponible dans l'espace global. Passer par l'objet Number pour y accéder n'a donc que peu d'intérêt, surtout qu'il est bien rare d'utiliser cette propriété, car on lui préfère la fonction isNaN(), plus fiable.

  • MAX_VALUE : cette propriété représente le nombre maximum pouvant être stocké dans une variable en JavaScript. Cette constante peut changer selon la version du JavaScript utilisée.

  • MIN_VALUE : identique à la constante MAX_VALUE sauf que là il s'agit de la valeur minimale.

  • POSITIVE_INFINITY : il s'agit ici d'une constante représentant l'infini positif. Vous pouvez l'obtenir en résultat d'un calcul si vous divisez une valeur positive par 0. Cependant, son utilisation est rare, car on lui préfère la fonction isFinite(), plus fiable.

  • NEGATIVE_INFINITY : identique à POSITIVE_INFINITY sauf que là il s'agit de l'infini négatif. Vous pouvez obtenir cette constante en résultat d'un calcul si vous divisez une valeur négative par 0.

Passons donc aux essais :

var max = Number.MAX_VALUE, // Comme vous pouvez le constater, nous n'instancions pas d'objet, comme pour un accès au « prototype »
    inf = Number.POSITIVE_INFINITY;

if (max < inf) {
    alert("La valeur maximum est inférieure à l'infini ! Surprenant, n'est-ce pas ?");
}

Essayer le code

Du côté des méthodes, l'objet Number n'est pas bien plus intéressant, car toutes les méthodes qu'il possède sont déjà supportées par l'objet Math. Nous allons donc faire l'impasse dessus.

L'objet Math

Après une première sous-partie assez peu intéressante, nous passons enfin à l'objet Math qui va réellement nous servir ! Tout d'abord, deux petites choses :

  • La liste des propriétés et méthodes ne sera pas exhaustive, consultez la documentation si vous souhaitez tout connaître ;

  • Toutes les propriétés et méthodes de cet objet sont accessibles directement sans aucune instanciation, on appelle cela des méthodes et des propriétés statiques. Considérez donc cet objet plutôt comme un namespace. ;)

Les propriétés

Les propriétés de l'objet Math sont des constantes qui définissent certaines valeurs mathématiques comme le nombre pi (π) ou le nombre d'Euler (e). Nous ne parlons que de ces deux constantes car les autres ne sont pas souvent utilisées en JavaScript. Pour les utiliser, rien de bien compliqué :

alert(Math.PI); // Affiche la valeur du nombre pi
alert(Math.E); // Affiche la valeur du nombre d'Euler

Voilà tout, les propriétés de l'objet Math ne sont pas bien dures à utiliser donc il n'y a pas grand-chose à vous apprendre dessus. En revanche, les méthodes sont nettement plus intéressantes !

Les méthodes

L'objet Math comporte de nombreuses méthodes permettant de faire divers calculs un peu plus évolués qu'une simple division. Il existe des méthodes pour le calcul des cosinus et sinus, des méthodes d'arrondi et de troncature, etc. Elles sont assez nombreuses pour faire bon nombre d'applications pratiques.

Arrondir et tronquer

Vous aurez souvent besoin d'arrondir vos nombres en JavaScript, notamment si vous faites des animations. Il est par exemple impossible de dire à un élément HTML qu'il fait 23,33 pixels de largeur, il faut un nombre entier. C'est pourquoi nous allons aborder les méthodes floor(), ceil() et round().

La méthode floor() retourne le plus grand entier inférieur ou égal à la valeur que vous avez passée en paramètre :

Math.floor(33.15); // Retourne : 33
Math.floor(33.95); // Retourne : 33
Math.floor(34); // Retourne : 34

Concernant la méthode ceil(), celle-ci retourne le plus petit entier supérieur ou égal à la valeur que vous avez passée en paramètre :

Math.ceil(33.15); // Retourne : 34
Math.ceil(33.95); // Retourne : 34
Math.ceil(34); // Retourne : 34

Et pour finir, la méthode round() qui fait un arrondi tout bête :

Math.round(33.15); // Retourne : 33
Math.round(33.95); // Retourne : 34
Math.round(34); // Retourne : 34
Calculs de puissance et de racine carrée

Bien que le calcul d'une puissance puisse paraître bien simple à coder, il existe une méthode permettant d'aller plus rapidement, celle-ci se nomme pow() et s'utilise de cette manière :

Math.pow(3, 2); // Le premier paramètre est la base, le deuxième est l'exposant
// Ce calcul donne donc : 3 * 3 = 9

Concernant le calcul de la racine carrée d'un nombre, il existe aussi une méthode prévue pour cela, elle se nomme sqrt() (abréviation de square root) :

Math.sqrt(9); // Retourne : 3
Les cosinus et sinus

Lorsqu'on souhaite faire des calculs en rapport avec les angles, on a souvent recours aux fonctions cosinus et sinus. L'objet Math possède des méthodes qui remplissent exactement le même rôle : cos() et sin() (il existe bien entendu les méthodes acos() et asin()). Leur utilisation est, encore une fois, très simple :

Math.cos(Math.PI); // Retourne : -1
Math.sin(Math.PI); // Retourne : environ 0

Les résultats obtenus sont exprimés en radians.

Retrouver les valeurs maximum ou minimum

Voici deux méthodes qui peuvent se révéler bien utiles : max() et min(). Elles permettent respectivement de retrouver les valeurs maximum et minimum dans une liste de nombres, qu'importe si les nombres sont dans un ordre croissant, décroissant ou aléatoire. Ces deux méthodes prennent autant de paramètres que de nombres à comparer :

Math.max(42, 4, 38, 1337, 105); // Retourne : 1337
Math.min(42, 4, 38, 1337, 105); // Retourne : 4
Choisir un nombre aléatoire

Il est toujours intéressant de savoir comment choisir un nombre aléatoire pour chaque langage que l'on utilise, cela finit toujours par servir un jour où l'autre. En JavaScript, la méthode qui s'occupe de ça est nommée random() (pour faire original). Cette fonction est utile mais n'est malheureusement pas très pratique à utiliser comparativement à celle présente, par exemple, en PHP.

En PHP, il est possible de définir entre quels nombres doit être choisi le nombre aléatoire. En JavaScript, un nombre décimal aléatoire est choisi entre 0 (inclus) et 1 (exclu), ce qui nous oblige à faire de petits calculs par la suite pour obtenir un nombre entre une valeur minimum et maximum.

Venons-en à l'exemple :

alert(Math.random()); // Retourne un nombre compris entre 0 et 1

Essayer le code

Là, notre script est un peu limité du coup, la solution est donc de créer notre propre fonction qui va gérer les nombres minimum (inclus) et maximum (exclu) :

function rand(min, max, integer) {

    if (!integer) {
        return Math.random() * (max - min) + min;
    } else {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }

}

Et voilà une fonction prête à être utilisée ! Le troisième paramètre sert à définir si l'on souhaite obtenir un nombre entier ou non.

Essayer une adaptation de ce code

Cette fonction est assez simple en terme de réflexion : on prend le nombre minimum que l'on soustrait au maximum, on obtient alors l'intervalle de valeur qui n'a plus qu'à être multiplié au nombre aléatoire (qui est compris entre 0 et 1), le résultat obtenu sera alors compris entre 0 et la valeur de l'intervalle, il ne reste alors plus qu'à lui ajouter le nombre minimum pour obtenir une valeur comprise entre notre minimum et notre maximum !

Les inclassables

Bien que les objets Number et Math implémentent l'essentiel des méthodes de gestion des données numériques qui existent en JavaScript, certaines fonctions globales permettent de faire quelques conversions et contrôles de données un peu plus poussés.

Les fonctions de conversion

Si vous avez lu tous les chapitres précédents (ce que vous devriez avoir fait), vous avez normalement déjà vu ces deux fonctions, mais nous allons revoir leur utilisation dans le doute.

Ces deux fonctions se nomment parseInt() et parseFloat(), elles permettent de convertir une chaîne de caractères en un nombre. La première possède deux arguments tandis que la seconde en possède un seul :

  • Le premier argument est obligatoire, il s'agit de la chaîne de caractère à convertir en nombre. Exemple : "303" donnera le nombre 303 en sortie.

  • Le deuxième argument est facultatif, mais il est très fortement conseillé de s'en servir avec la fonction parseInt() (puisque, de toute manière, il n'existe pas avec parseFloat()). Il permet de spécifier la base que le nombre utilise dans la chaîne de caractères. Exemple : 10 pour spécifier le système décimal, 2 pour le système binaire.

L'importance du deuxième argument est simple à démontrer avec un exemple :

var myString = '08';

alert(parseInt(myString)); // Affiche : 0
alert(parseInt(myString, 10)); // Affiche : 8

Alors pourquoi cette différence de résultat ? La solution est simple : en l'absence d'un second argument, les fonctions parseInt() et parseFloat() vont tenter de deviner la base utilisée — et donc le système de numération associé — par le nombre écrit dans la chaîne de caractères. Ici, la chaîne de caractères commence par un 0, ce qui est caractéristique du système octal, on obtient donc 0 en retour. Afin d'éviter d'éventuelles conversions hasardeuses, il est toujours bon de spécifier le système de numération de travail.

Les fonctions de contrôle

Vous souvenez-vous des valeurs NaN et Infinity ? Nous avions parlé de deux fonctions permettant de vérifier la présence de ces deux valeurs ; les voici : isNaN() qui permet de savoir si notre variable contient un nombre et isFinite() qui permet de déterminer si le nombre est fini.

isNaN() renvoie true si la variable ne contient pas de nombre, elle s'utilise de cette manière :

var myNumber = parseInt("test"); // Notre conversion sera un échec et renverra « NaN »

alert(isNaN(myNumber)); // Affiche « true », cette variable ne contient pas de nombre

Quant à isFinite(), cette fonction renvoie true si le nombre ne tend pas vers l'infini :

var myNumber = 1/0; // 1 divisé par 0 tend vers l'infini

alert(isFinite(myNumber)); // Affiche « false », ce nombre tend vers l'infini

Mais pourquoi utiliser ces deux fonctions ? Je n'ai qu'à vérifier si ma variable contient la valeur NaN ou Infinity

Admettons que vous fassiez cela ! Essayons le cas de NaN :

var myVar = "test";

if (myVar == NaN) {
    alert('Cette variable ne contient pas de nombre.');
} else {
    alert('Cette variable contient un nombre.');
}

Essayer le code

Voyez-vous le problème ? Cette variable ne contient pas de nombre, mais ce code croit pourtant que c'est le cas. Cela est dû au fait que l'on ne fait que tester la présence de la valeur NaN. Or elle est présente uniquement si la tentative d'écriture d'un nombre a échoué (une conversion loupée par exemple), elle ne sera jamais présente si la variable était destinée à contenir autre chose qu'un nombre.

Un autre facteur important aussi, c'est que la valeur NaN n'est pas égale à elle-même !

alert(NaN == NaN); // Affiche : « false »

Bref, la fonction isNaN() est utile car elle vérifie si votre variable était destinée à contenir un nombre et vérifie ensuite que ce nombre ne possède pas la valeur NaN.

Concernant isFinite(), un nombre peut tendre soit vers l'infini positif, soit vers l'infini négatif. Une condition de ce genre ne peut donc pas fonctionner :

var myNumber = -1 / 0;

if (myNumber == Number.POSITIVE_INFINITY) {
    alert("Ce nombre tend vers l'infini.");
} else {
    alert("Ce nombre ne tend pas vers l'infini.");
}

Essayer le code

Ce code est faux, on ne fait que tester si notre nombre tend vers l'infini positif, alors que la fonction isFinite() se charge de tester aussi si le nombre tend vers l'infini négatif.

En résumé
  • Un objet possède parfois des propriétés issues du constructeur. C'est le cas de l'objet Number, avec des propriétés comme Number.MAX_VALUE ou Number.NaN.

  • De même que Number, l'objet Math possède ce genre de propriétés. Utiliser π est alors simple : Math.PI.

  • Il faut privilégier parseInt() et parseFloat() pour convertir une chaîne de caractères en un nombre.

  • L'usage des propriétés de l'objet Number lors de tests est déconseillé : il vaut mieux utiliser les fonctions globales prévues à cet effet, comme par exemple isNaN() au lieu de NaN.

Exemple de certificat de réussite
Exemple de certificat de réussite