L'essentiel de JavaScript

Travailler avec des nombres

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Prenez en main les nombres et apprenez à travailler facilement avec. Vous allez découvrir notamment la différence entre une addition et une concaténation.

Transcription

Poursuivons notre étude des types de données en JavaScript, en nous penchant, dans cette vidéo, sur les nombres. On a déjà travaillé avec des nombres comme vous pouvez le voir dans le Script qui est à l'écran. J'ai donc deux variables : « a » qui est égal à « 1 », « b » qui est égal à « 7 », je fais un « console.log » de l'addition de « a » et de « b ». Voilà pourquoi j'ai « 9 » qui est inscrit ici dans ma console. Vous savez également que je peux stocker ces nombres sous forme de chaînes de caractères. Pour ça il me suffit de mettre des guillemets autour des nombres. Ça peut être de simples guillemets ou des doubles guillemets, peu importe. Dans ce cas-là, quand je rafraîchis ma page, j'obtiens dans ma console deux « 7 ». En effet, maintenant le « + » n'est plus l'opérateur d'addition mais l'opérateur de concaténation. Alors c'est quoi la concaténation ? C'est tout simplement prendre des chaînes de caractères et les joindre ensemble pour former une chaîne de caractères plus longue. Ici le « + » va prendre la chaîne de caractère « deux », va prendre la chaîne de caractère « sept » et va former une chaîne de caractères plus longue avec un « 2 », suivi d'un « 7 ». C'est pour ça que j'ai « 2 » « 7 », « 27 » qui apparaît ici, dans ma console. Maintenant que se passe-t-il si l'un des deux membres est un nombre et l'autre est une chaîne de caractères ? Dans ce cas-là, vous voyez que j'ai de nouveau « 2 » « 7 » puisque quand l'un des deux membres est une chaîne de caractères, JavaScript considère que l'ensemble doit être considéré comme une chaîne de caractères et donc le « + » ici est toujours l'opérateur de concaténation et non pas l'opérateur d'addition. Or ceci peut être tout à fait utile dans JavaScript. Prenez par exemple, un cas de figure où vous avez différentes parties d'un numéro de téléphone. Vous avez le code régional dans une variable, le numéro de téléphone dans une autre variable et l'extension dans une troisième variable. Vous voulez joindre le tout pour reformer le numéro de téléphone complet. Ce dont vous avez besoin dans ce cas-là, c'est bel et bien d'une concaténation et non pas d'une addition. Tout cela est donc très utile dans JavaScript. Maintenant, si ce que vous vouliez était une addition, vous devez vous assurer que « a » et « b » sont bien des nombres au moment de l'addition. On va donc convertir ces deux données, en nombre. Pour faire ça, je vais créer d'autres variables. Je vais créer une variable que je vais appeler «a Num », la version numérique de la variable « a ». Je vais rendre ça égal à « Number » de « a », comme ceci. « Number » c'est une fonction qui est native dans JavaScript, vous pouvez l'utiliser telle quelle, il n'y a pas besoin de déclarer des objets ou des variables pour pouvoir avoir accès à cette fonction « Number ». Elle va essayer de convertir la donnée qu'on lui envoie dans les parenthèses en un nombre. Ici, ça va marcher puisque « deux » est déjà un nombre au départ. Je vais faire la même chose avec « b num » donc la version numérique de la variable « b» et je vais rendre ça égal à « Number » de « b ». Dans ce cas-ci, la chaîne de caractères « 7 » va être convertie en nombre « 7 ». et quand je fais maintenant l'addition de « aNum » et de « bNum », j'obtiens de nouveau « 9 », puisque la chaîne de caractères « 7 » a, préalablement à l'addition, été convertie en nombre « 7 ». Maintenant parfois, ça ne marchera pas, imaginez ceci, je vais faire par exemple, « a, b, c ». Là, « number b » ne va pas réussir à convertir « a, b, c » en un nombre, puisqu'il n'est pas possible de convertir cette chaîne de caractère « a, b, c » en un nombre. Quand je vais faire l'addition, qu'est-ce que ça va donner? Ça va donner, non pas une erreur comme on aurait pu s'y attendre mais une valeur spéciale dans JavaScript qui est la valeur « NaN ». Remarquez que c'est un « N » majuscule, un « a » minuscule et puis de nouveau un « N » majuscule. « NaN » signifie « Note » et « Number ». Donc ici, bien que je tente une conversion de ces données en nombres avant l'addition, l'addition ne peut avoir lieu. Je vais donc avoir besoin d'une logique un petit peu plus sophistiquée pour pouvoir traiter ce cas de figure. Je vais préparer un « if » ici (Rappelez-vous la syntaxe du « if » avec ses parenthèses et ses accolades) et, dans les parenthèses, je vais utiliser une autre fonction native du JavaScript qui est la fonction « isNaN ». Attention à la casse ici, c'est un petit peu particulier : grand « N », petit « a » puis, de nouveau, grand « N » et je vais regarder si « aNum » me renvoie « isNaN », c'est-à-dire si la conversion de cette donnée en un nombre, renvoie « isNaN » ou pas. Je vais aussi vérifier si « isNaN » de « b num » et puis je vais joindre ces deux conditions ici par un « ou » logique. (Rappelez-vous ces deux barres verticales que l'on utilise pour signifier « ou »). Donc je dis au « if » que, si l'une de ces deux données renvoie « isNaN », c'est-à-dire ne peut pas être convertie en un nombre alors je vais faire un « console point log » d'un petit message et ce petit message ce sera tout simplement « l'addition est impossible ». Voilà. Par contre dans l'autre cas de figure-- je tape ici la clause « else » -- je peux faire l'addition de « a num » et de « b num » sans problème puisque je suis certain que ce sont des nombres. Alors, ça donne quoi si je rafraîchis ? J'ai mon message : j'ai « l'addition est impossible », par contre, si je remets ici un nombre dans la chaîne de caractères qui peut donc être convertie en nombre par la fonction « number », là, je refais mon addition sans problème et j'obtiens le nombre « 9 ». Voici donc pour « isNaN » et si vous avez envie non pas de vérifier si quelque chose n'est pas un nombre mais si quelque chose est un nombre, malheureusement dans JavaScript, on n'a pas de fonction «is number », comme on a une fonction « isNaN ». Dans ce cas-là, vous allez non pas vérifier que quelque chose est un nombre mais vous allez vérifier que quelque chose n'est pas pas un nombre. Vous aurez besoin d'une double négation ici. Alors, pour ça, vous avez envie d'utiliser le point d'exclamation. Le point d'exclamation, dans le « if », va avoir pour effet d'inverser les « true » en « false » et les « false » en « true ». Si « isNaN » me renvoie « true », c'est-à-dire si la valeur « aNum » ne peut pas être convertie en un nombre, le point d'exclamation va m' inverser et va faire en sorte que le « true » devient « false » et vice-versa, si « isNaN » me renvoie « false », le point d'exclamation inverse et transforme ce « false » en « true ». Je vais faire, ici, la logique inverse, je dois aussi joindre ces deux conditions par un « et » logique. Rappelez-vous, ce sont ces deux esperluettes, puis, comme la logique est complètement inverse ici, je dois également inverser la partie « if » et la partie « else », voilà, qui est fait. Et si je rafraîchis, ça fonctionne exactement comme avant : quand les deux données peuvent être converties en nombre, je fais l'addition et puis quand l'une des deux données, au moins, ne peut pas être convertie en nombre, j'ai mon message « l'addition est impossible » qui apparaît. Donc vous voyez ici, plusieurs façon de détecter si les données sont des nombres ou ne sont pas des nombres.

L'essentiel de JavaScript

​Ajoutez des fonctionnalités interactives à vos pages web avec JavaScript. Découvrez la syntaxe, le DOM, l'utilisation des bibliothèques JavaScript populaires, etc.

Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :26 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !