Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de JavaScript

Découvrir les opérateurs

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Faites un bref tour d'horizon des opérateurs JavaScript. Découvrez des trucs et astuces pour bien les utiliser et quelques pièges à éviter.

Transcription

Les instructions javascript que nous écrirons impliquent une opération. Elles peuvent être simples, des additions, des soustractions, des multiplications ou complexes comme des transformations, des comparaisons. Il y a plein d'opérations possibles. Pour les réaliser, vous aurez besoin d'opérateurs. Je vous propose de découvrir les principaux opérateurs du javascript. Pour cela j'ai déclaré deux variables "a=2", "b=4" et une variable supplémentaire "result". Je vais faire "result= a + b" et faire un console.log de cette variable "result". Je sauvegarde et je rafraichis ma page. Dans ma console j'ai 6, 2 + 4. Cette ligne de code n°4 deux opérations se passent sur la même ligne de code. Premièrement l'opération d'addition "a + b, 2 + 4" et l'opération d'assignation correspondant au "=" en javascript. Je prends le résultat de cette opération d'addition et j'assigne le résultat comme valeur de la variable "result". J'ai une opération d'addition et opération d'assignation avec le "=". Ceci pour la ligne de code 4. J'ai d'autres opérateurs arithmétiques le "-" "a - b = -2", "2 - 4 = -2". J'ai l'opérateur de multiplication " * ", "2 * 4 = 8". J'ai aussi l'opérateur de division " / " "2 / 4 = 0,5". Pour certaines opérations courantes le javascript propose des raccourcis. Par exemple " a = a + 10". Très courant en javascript, qu'est-ce que cela signifie ? Je prens la valeur actuelle de "a", c'est-à-dire "2" puis j'additionne le "10", cela devient "12" et je réassigne le résultat de cette addition comme nouvelle valeur de la variable "a". "a" devient "12", je fais un console.log de "a" pour que "a = 12". Je peux utiliser un raccourci pour faire la même chose je peux faire "a += 10". Ce raccourci est similaire à "a = a + 10". Il est très courant de le faire avec le nombre 1 pour incrémenter la variable 1. Je peux faire "a += 1", cela fait "3" exactement comme si j'écrivais "a = a + 1" ce raccourci est plus courant avec 1 qu'avec d'autres nombres. Un raccourci supplémentaire serait d'écrire "a++" l'opérateur d'incrémentation permet d'ajouter 1 à une variable. Je peux faire "a++" ou "++a" cela revient au même. Le console.log me donne 3 également. J'incrémente la variable "a" de "1", je prends sa valeur actuelle "2 + 1 = 3". Si cela fonctionne avec "++", cela fonctionne aussi avec "--". Opérateur de décrémentation, je pars de "2", je retire "1" Il me reste "1" dans la console, je mets "-- 1" ou "1 --", puisque "2- 1 = 1". Notons une différence entre mettre le "++" ou le "--" devant ou derrière. Si je fais cette opération en une ligne avec console.log console.log de "a++" j'obtiens "2" plutôt que "3", comme nous aurions pu nous y attendre. Pourquoi ? Parce qu'il y a deux opérations : le console.log je vais loguer la valeur actuelle de "a", c'est-à-dire "2" pour ensuite incrémenter cette variable de "1". Le console.log a lieu avant l'incrémentation de la variable. Par contre si j'écris "++a", "3" arrive dans ma console car l'incrémentation a lieu avant d'envoyer la valeur de la variable dans la console. Il y a une différence entre "++a" et "a++" dans l'ordre d'exécution des opérations. Par habitude je mets tout sur des lignes différentes ainsi pas de différence. Même si mes lignes de code sont distinctes, que je fasse en ligne 3 "++a" ou "a++" lorsque je fais mon console.log "a" vaudra "3" quelque soit l'ordre dans lequel j'aurais écrit mes opérateurs. Voyons maintenant une autre expérience. Je crée une variable appelée "result" que je rend égal à "3 + 2 * 5". Combien cela fait-il ? "3 + 2 = 5 * 5 = 25" ? Ou "2 * 5 = 10 + 3 = 13" ? Prenons les paris pendant que je copie-colle result dans le console.log. Cela fait "13" puisque les opérations de division et de multiplication ont priorité sur les opérations d'addition et de soustraction. Pour que le résultat soit "25" vous auriez eu besoin de parenthèse pour grouper le "3 + 2", qui devient prioritaire ainsi égale 25. "3 + 2 = 5 * 5 = 25". Voilà donc pour les opérateurs d'incrémentation et de décrémentation. En javascript il existe aussi la possibilité de comparer des choses si je fais un console.log de "a = b", je compare simplement "a" et "b" je vérifie que ce soit la même chose. Je renvoie "false" dans la console puisque "a" n'égale pas "b". J'utilise "==" pour comparer deux choses et vérifier que cela soit égal j'ai besoin du double "=" qui est l'opérateur d'égalité. Le simple "=" est l'opérateur d'assignation et non d'égalité. Cela est une erreur très courante que font beaucoup de débutants. Pour vérifier l'égalité de deux valeurs nous écrivons souvent "a = b". Si je fais cela, le résultat est "4". Je m'attendais à avoir "true" ou "false" en cas d'égalité ou non. Le chiffre "4" signifie que j'utilise l'opérateur d'assignation. J'assigne à la variable "a" la valeur de "b" cela signifie qu'après cette opération "a" et "b" égalent tous les deux "4". Cependant j'avais envie de comparer ces choses. J'ai besoin de l'opérateur de comparaison, du "==" et si cela est "false" je change la valeur de "b" en "2" cela me renvoie "true" puisque les deux valeurs sont égales. Il existe aussi en javascript le "===" l'opérateur de stricte égalité. Dans ce cas "a = 2", "b = 2", je viens de le modifier "a === b" fait "true" aussi. Quelle est la différence entre l'égalité simple et l'égalité stricte ? Je rajoute des guillemets autour du 2 "2" pour que "b" soit une chaine de caractère. L'opérateur "typeof" permet de vérifier ce type de donnée. Si je fais "typeof a", il est dit que c'est un nombre et si je fais "typeof b" il est dit que c'est un string, une chaine de caractère. Si je fais "a == b" l'opérateur de comparaison est "==" javascript dira "true" même si l'un est un nombre et l'autre chaine de caractère javascript comprendra qu'il s'agit de la même valeur. Par contre si je fais une stricte égalité : "===" javascript émet "false" car ce n'est pas strictement égal. L'un est nombre et l'autre est chaine de caractère. C'est une subtilité de javascript à ne pas oublier. Pour dire quelque chose nous utilisons "=", l'opérateur d'assignation pour signifier la valeur particulière d'une variable. Nous posons une question avec l'opérateur de comparaison simple "==". Enfin, l'opérateur d'égalité stricte est une variante "===". D'autres comparaisons sont possibles. Je reviens à la valeur initiale de "b", il y a les habituelles, à savoir si "a b" est "False", "a < b" est "True". Vous avez aussi "a = b" ou "a = b" et il y a la négation, c'est-à-dire la différence qui s'exprime avec "a != b" et que l'opérateur vérifie. "a != b" est "True". Nous avons des opérateurs supplémentaires dont nous pouvons parfois avoir besoin. Je vais déclarer deux variables en plus "c = 5" et "d = 5" également. Je vérifie si "a == b" et si "c == 5". Je dois décider si l'ensemble de la condition est vrai lorsque les deux conditions sont vraies ou quand l'une est vraie. Je peux utiliser le ET logique, j'ai besoin de "&&". Alors "a == b" est faux puisque "a = 2" et "b = 4". Par contre "c == d" est vrai, puisque "c = 5" et "d = 5". Une condition est fausse tandis que l'autre est vraie. Elles sont unies par un ET logique "&&" donc l'ensemble de la condition déclarée est fausse car l'un des membres est faux. Il y a aussi le OR, le ou logique, représenté par deux lignes verticales. Cela me renvoie "True" puisque l'une des deux conditions est vraie en l'occurence "c == d". L'ensemble de la condition est donc considéré vrai. Vous pourrez utiliser cette série d'opérateurs dans vos javascript. Il y a plein d'astuces, de nuances, de raccourcis. Il vous faudra du temps pour vous y habituer. Vous avez ainsi des outils indispensables à tout développeur javascript.

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 !