Les structures conditionnelles
Le if/else
Alors maintenant qu'est ce qu'on va faire en javascript?
On va voir les structures conditionnelles !
J'ai pas compris un mot...
Ne t'inquiète pas, c'est très simple. Le concept c'est d'exécuter différentes portions de code en fonction de conditions. Imaginons par exemple un petit programme qui dit bonjour, sauf qu'après 18h il va dire bonsoir. Il va nous falloir un moyen pour vérifier l'heure qu'il est actuellement, et en fonction nous ferons dire au programme l'un ou l'autre. Pour celà on va utiliser la structure if/else. Le if correspond à si la condition est respecté, et le else correspond à "sinon".
{"language":"application/json","content":"var date = new Date(); // crée un nouvel objet Date avec la date et l'heure courante\nvar hour = date.getHours(); // récupére l'heure de l'objet date de 0 à 23\n\nif(hour < 18){\n\tconsole.log(\"Bonjour\");\t\n}else{\n\tconsole.log(\"Bonsoir\");\t\n}","filename":""}
Les opérateurs de comparaison
Ok, donc si j'ai bien compris, on récupère l'heure, et le symbole "<" va vérifier si l'heure est bien inférieur à 18 pour afficher bonjour et sinon ça signifie que l'heure est supérieur à 18 et on affiche bonsoir?
C'est bien ça, ce symbole "<" est appelé un opérateur de comparaison, il en existe plusieurs :
{"language":"application/json","content":"var x = 10;\nvar y = 20;\n\n// opérateur d'égalité. Vérifie que les deux parties sont égales\nconsole.log(x == y); // false\n\n// opérateur d'inégalité. Vérifie que les deux parties ne sont pas égales\nconsole.log(x != y); // true\n\n// opérateur supérieur. Vérifie que la partie de gauche est supérieur à la partie de droite\nconsole.log(x > y); // false\n\n// opérateur inférieur. Vérifie que la partie de gauche est inférieur à la partie de droite\nconsole.log(x < y); // true\n\n// opérateur supérieur ou égal. Vérifie que la partie de gauche est supérieur ou égal à la partie de droite\nconsole.log(x >= y); // false\n\n// opérateur inférieur ou égal. Vérifie que la partie de gauche est inférieur ou égal à la partie de droite\nconsole.log(x <= y); // true","filename":""}
Mais pourquoi tu parles de partie de gauche et de droite? Ce ne sont pas simplement des variables?
Dans l'exemple ce sont effectivement des variables, mais ces expressions peuvent être faites avec des opérations, des retour de fonctions et bien d'autres choses, donc on préférera parler de partie de gauche et de droite pour bien distinguer ce qui se trouve d'un côté ou de l'autre de l'opérateur. Pour te donner un exemple :
{"language":"application/json","content":"var x = 10;\nvar y = 20;\n\nconsole.log(x + y < y + y);// true","filename":""}
Il y a deux opérateurs supplémentaires dont je ne t'ai pas parlé, qui sont les opérateurs de comparaisons stricte.
{"language":"application/json","content":"var x = 10;\nvar y = 20;\n\n// opérateur d'égalité stricte. Vérifie que les deux parties sont égales\nconsole.log(x === y); // false\n\n// opérateur d'inégalité stricte. Vérifie que les deux parties ne sont pas égales\nconsole.log(x !== y); // true\n","filename":""}
Mais ce sont les mêmes qu'avant avec juste un "=" en plus?
Tout à fait, la différence est qu'avec ce "=" en plus, la comparaison va se faire à la fois sur la valeur mais aussi sur le type de variable, par exemple, si je crée deux variables avec la même valeur, mais une en type number et l'autre en type string, la comparaison d'égalite simple et celle d'égalité stricte ne retourneront pas le même résultat !
{"language":"application/json","content":"var x = 10;\nvar y = \"10\";\n\nconsole.log(x == y);// true\nconsole.log(x === y);// false","filename":""}
Ahh ! Ok j'ai tout compris.
Les opérateurs booléen
Doucement, nous n'avons pas encore fait le tour, en plus des opérateurs de comparaison, il y a aussi les opérateurs booléen.
Est ce qu'il y a un rapport avec le type boolean que tu m'avais montré?
Bien vu ! En effet, ce n'est pas par hasard s'ils portent le même nom. Ce que l'on fait depuis tout à l'heure en comparant des valeur, c'est ce que l'on appelle des expressions booléennes, autrement dit, des expression qui vont retourner "true" ou "false", et si l'on souhaite stocker ce résultat dans une variable, et bien celle ci sera donc de type booléen.
Je vois, en effet ça parait logique dit comme ça.
Donc les opérateurs booléen, il en existe de nombreux, mais en js nous n'en utiliserons que trois qui sont :
- && : Et logique, dans ce cas la partie de gauche ET la partie de droite doivent être true pour retourner true
- || : Ou logique, dans ce cas la partie de gauche OU la partie de droite doivent être true pour retourner true
- ! : Négation, celui ci n'est pas à placer entre deux valeurs booléennes, mais devant une valeur boléenne, pour inverser sa valeur
Mais ça sert à quoi? Je ne comprend pas...
Et bien il peut arriver que pour executer un code, on doivent respecter plusieurs conditions et non pas une seule. Pour reprendre l'exemple de tout à l'heure, en france on dit bonjour et bonsoir, mais dans les pays anglophone, on va aussi souhaiter un bon matin avec "Good Morning". Si on veux gérer ce cas, il va falloir utiliser des opérateur booléen. En plus de ça j'en profite pour te montrer quelque chose en plus sur la structure if/else, on peut aussi utiliser un "else if" pour gérer plusieurs conditions de suite.
{"language":"application/json","content":"var date = new Date(); // crée un nouvel objet Date avec la date et l'heure courante\nvar hour = date.getHours(); // récupére l'heure de l'objet date de 0 à 23\nvar lang = \"fr\";\n\nif(lang == \"fr\" && hour < 18){ // si la langue est française ET qu'il est moins de 18h\n\tconsole.log(\"Bonjour\");\t\n}else if(lang == \"fr\" && hour > 18){ // si la langue est française ET qu'il est plus de 18h\n\tconsole.log(\"Bonsoir\");\t\n}else if(lang == \"en\" && hour < 12){ // si la langue est anglaise ET qu'il est moins de 12h\n\tconsole.log(\"Good morning\");\t\n}else if(lang == \"en\" && hour > 12 && hour < 18){ // si la langue est anglaise ET qu'il est plus de 12h ET moins de 18h\n\tconsole.log(\"Good afternoon\");\t\n}else if(lang == \"en\" && hour > 18){ // si la langue est anglaise ET qu'il est plus de 18h\n\tconsole.log(\"Good evening\");\t\n}","filename":""}
Whoa, ça fait beaucoup de else if tout ça...
Le switch
En effet, et j'en viens justement à une autre structure conditionnelle : le switch !
C'est quoi le switch? C'est comme la Nintendo?
Pas du tout, c'est une structure conditionnelle un peu particulière qui permet de gérer différents cas en fonction de la valeur d'une variable. Pour prendre un exemple très simple, imaginons que nous ayons juste une variable "lang" qui permet de définir la langue dans laquelle nous devons afficher le message bonjour. Le switch va permettre de gérer beaucoup de cas sans avoir à utiliser une structure if/elseif répétitive. Par exemple :
{"language":"application/json","content":"var lang = \"fr\";\n\nswitch(lang){\n\tcase \"fr\":\n\t\tconsole.log(\"Bonjour\");\n\t\tbreak;\n\tcase \"en\":\n\t\tconsole.log(\"Hello\");\n\t\tbreak;\n\tcase \"de\":\n\t\tconsole.log(\"Gutten tag\");\n\t\tbreak;\n\tcase \"it\":\n\t\tconsole.log(\"Buongiorno\");\n\t\tbreak;\n}","filename":""}
Alors si j'ai bien compris, le switch indique qu'on teste la valeur lang, les case permettent de définir chaque lang possible et en dessous le code à exécuter le cas échéant. Par contre le break je ne vois pas...
Tu as raison pour le switch et le case. Le break n'est pas obligatoire dans un switch, c'est une instruction pour dire "sort de la structure". En fait, on a trouver un cas qui correspond, on execute le code associé, et après on arrête de chercher pour les cas suivants. Pour certains cas particulier, on n'utilisera pas de break, car on voudra continuer à tester les cas suivants, mais je ne vais pas en parler aujourd'hui, ce sont pour des cas vraiment particulier.
Deux choses en plus que je ne t'ai pas montré, la première est que l'on peut préciser un default dans un switch, celui ci ne s'éxecutera que si aucun case ne correspondait à notre variable, Par exemple :
{"language":"application/json","content":"var lang = \"es\";\n\nswitch(lang){\n\tcase \"fr\":\n\t\tconsole.log(\"Bonjour\");\n\t\tbreak;\n\tcase \"en\":\n\t\tconsole.log(\"Hello\");\n\t\tbreak;\n\tcase \"de\":\n\t\tconsole.log(\"Gutten tag\");\n\t\tbreak;\n\tcase \"it\":\n\t\tconsole.log(\"Buongiorno\");\n\t\tbreak;\n\tdefault:\n\t\tconsole.log(\"Bonjour\");\n\t\tbreak;\n}","filename":""}
Dans ce cas, la langue espagnole (es) n'as pas été prévue dans notre code, le switch finira donc pas executer le default et affichera Bonjour par défaut.
Ah c'est pratique ça !
Oui, et il y a encore plus pratique. Imaginons que nous souhaitions aussi gérer la langue "us", ce serait pratique, mais ça va être la même chose que pour la langue "en", ce serait dommage de dupliquer le code. Et bien, on peut tout simplement créer plusieurs case les uns après les autres et ensuite écrire les instructions, et ces instructions se déclencheront pour tous les case !
{"language":"application/json","content":"var lang = \"us\";\n\nswitch(lang){\n\tcase \"fr\":\n\t\tconsole.log(\"Bonjour\");\n\t\tbreak;\n\tcase \"us\":\n\tcase \"en\":\n\t\tconsole.log(\"Hello\"); // Ce code affichera Hello si la lang est \"en\" ou \"us\"\n\t\tbreak;\n\tcase \"de\":\n\t\tconsole.log(\"Gutten tag\");\n\t\tbreak;\n\tcase \"it\":\n\t\tconsole.log(\"Buongiorno\");\n\t\tbreak;\n\tdefault:\n\t\tconsole.log(\"Bonjour\");\n\t\tbreak;\n}","filename":""}
C'est génial, je ne pensais pas qu'on pouvais faire ça.
Les structure itératives
Maintenant que tu as bien compris les structures conditionnelles, on va passer aux structures itératives.
Encore un gros mot pour quelque chose de simple j'imagine?
Je ne vais pas te donner tord là dessus. Tu te souviens hier nous avons parler des types de variables et entre autre les variables complexes comme les tableaux et les objets?
Oui tout à fait !
Les structures itératives permettent de parcourir ces objets complexe élément par élément. C'est ce que l'on appelle autrement des boucles.
Ah oui j'avais déjà entendu parler de boucles !
La boucle while
Et bien nous y voilà, en fait on parle de structure itérative, car chaque passage à l'intérieur de la boucle pour passer à l'élément suivant d'un tableau ou d'un objet s'appelle une itération. Mais je ne vais pas t'embêter plus avec le jargon technique, passons à la pratique avec une première boucle qui va mettre en pratique tes compétences booléennes : le while !
{"language":"application/json","content":"let n = 0;\n\nwhile(n<10){\n\tconsole.log(n);\n\tn = n+1;\n}","filename":""}
Alors si je comprend bien, on commence avec une valeur à 0 et tant que cette valeur est inférieur à 10 on continue la boucle. Et à chaque tour de la boucle on ajoute 1 à la valeur.
C'est exactement ça. J'en profite pour te parler d'autres opérateurs d'affectation.
Encore des opérateurs???
Oui je sais, ça fait beaucoup, mais c'est important de les connaitre, le premier c'est le += qui permet de dire, ajoute la partie de droite à la valeur courante de la partie de gauche. Par exemple, ces deux lignes de codes vont faire exactement la même chose :
{"language":"application/json","content":"n = n + 1;\nn += 1;","filename":""}
Ah c'est pratique aussi ça !
Oui et il y a aussi la même chose pour les principales opérations mathématiques :
{"language":"application/json","content":"n += 5; // ajoute 5 à n\nn -= 5; // retire 5 à n\nn *= 5; // multiplie n par 5\nn /= 5; // divise n par 5","filename":""}
Ok c'est génial !
Un détail tout de même, avec le +, qui est un opérateur d'addition si tes variables sont des number, mais c'est un opérateur de concaténation si ce sont des chaines de caractères.
Concaténaquoi?
Concaténation, c'est encore une fois un gros mot pour dire "mettre deux chaines de caractères l'une après l'autre", un petit exemple :
{"language":"application/json","content":"console.log(5+5);//affiche 10\nconsole.log(\"5\"+\"5\"); // affiche 55","filename":""}
Ok, donc pour revenir à l'opérateur += si jamais on l'utilise avec une chaine de caractères, ça va faire une concaténation au lieu d'une addition?
C'est bien ça. Un autre opérateur dont je voulais te parler est l'incrémentation.
Faut que tu arrêtes les gros mots !
C'est presque le dernier promis ! C'est simplement un opérateur pour dire "ajoute 1 à cette variable". Et c'est tout simplement un ++
{"language":"application/json","content":"var n = 5;\nn++;\nconsole.log(n);//affiche 6","filename":""}
Mais il y a aussi l'opérateur de décrémentation qui va retirer 1 à la valeur, je te laisse deviner.
c'est "--" ?
Tout à fait ! Donc pour en revenir à mon while on aurait aussi pu l'écrire de cette façon :
{"language":"application/json","content":"let n = 0;\n\nwhile(n<10){\n\tconsole.log(n);\n\tn += 1;\n}\n\n// OU\n\nwhile(n<10){\n\tconsole.log(n);\n\tn++;\n}","filename":""}
C'est clair pour moi, je maitrise les boucles maintenant !
La boucle do...while
Pas encore, il d'autres types de boucle, mais tu va voir ça va être rapide. La suivante c'est la boucle do...while.
C'est pas celle qu'on viens de faire?
Non, on a vu la boucle "while" là on parle de la boucle "do...while". C'est presque la même chose à une petite nuance près. Dans la boucle while on vérifie d'abord si la condition est respectée avant d'exécuter le code qu'elle contiens. Dans une boucle do...while, on fait le contraire, on execute d'abord le code, puis ensuite on vérifie la condition pour savoir si on répète ou non l'execution de ce code :
{"language":"application/json","content":"var n = 10;\n\nwhile(n<5){\n\tn++;\n\tconsole.log(n); // ne va jamais s'executer car n est déjà supérieur à 5 avant d'arriver au while\n}\n\ndo{\n\tn++;\n\tconsole.log(n); // va s'executer une fois, mais ne se répétera pas car la condition est fausse\n}while(n<5);","filename":""}
Ok je vois la nuance
La boucle for
Maintenant la boucle for, et ses trois variantes
Je suis sur que tu fait exprès d'en rajouter à chaque fois !
Non je garde juste un peu de suspens. Donc la boucle for, à l'origine il n'en existais qu'une seule syntaxe. Le but était de dire, je veux faire x tour dans cette boucle, pour celà je crée une variable i qui vaux 0, je boucle jusque 10, et à chaque tour de boucle j'incrémente de 1.
{"language":"application/json","content":"for(let i=0;i<10;i++){\n\t//ce code va s'executer 10 fois\t\n}","filename":""}
Ok, la syntaxe est un peu bizarre mais je crois comprendre
La syntaxe est assez simple, il suffit de faire :
{"language":"application/json","content":"for(/*création d'une variable*/;/*condition pour continuer la boucle*/;/*modification de la variable à chaque tour de boucle*/){\n\t//le code à executer\t\n}","filename":""}
Mais ce qui est pratique, c'est que la condition peut être gérer avec une variables aussi. Pour te donner un petit truc en plus, il y a une propriété sur toutes les variables de type tableau que tu crée qui s'appelle "lenght" et qui retourne la taille du tableau en question, ou si tu préfère, le nombre d'éléments que contiens ce tableau.
Donc on peut facilement parcourir un tableau avec cette boucle for, en utilisant la taille du tableau comme condition :
{"language":"application/json","content":"var tableau = [1,3,5,7,9];\nfor(let i = 0; i < tableau.length; i++){\n\tconsole.log(tableau[i]);// affiche la valeur courante du tableau donc 1 puis 3 puis 5 puis 7 puis 9\t\n}","filename":""}
Mais... On peut utiliser une variable pour indiquer la case du tableau que l'on veut récupérer?!?
Et oui on peut ! C'est très utile pour récupérer des données de tableau de façon générique. Mais bon on va passer à la suite.
La boucle for...of
Cette version de la boucle for est plus récente et permet de parcourir un tableau sans avoir à s'embêter avec un index comme on a pu le voir juste avant. En fait elle permet de définir une nouvelle variable qui représentera la case du tableau que la boucle est en train de parcourir. Par exemple si on a un tableau de prénom :
{"language":"application/json","content":"var listePrenom = [\"Jean\",\"Jacques\",\"Clémence\",\"Adrien\",\"Marie\"];\n\nfor(let prenom of listePrenom){\n\tconsole.log(prenom);// affichera les prénoms un par un\n}","filename":""}
Ah ouais c'est plus simple qu'avec le i effectivement !
La boucle for...in
Et la dernière boucle, le for...in, c'est un peu la même chose que le for...of, mais pour des objets au lieu des tableaux, et la variable créé contiendra le nom de la propriété parcourue mais pas sa valeur.
{"language":"application/json","content":"var objet = {\n\t\"Nom\": \"Vaast\",\n\t\"Prenom\": \"Aurélien\",\n\t\"Age\": 33\n};\n\nfor(let prop in objet){\n\tconsole.log(prop);//affichera le nom des propriétés de l'objet, c'est à dire : \"Nom\",\"Prenom\",\"Age\"\n}","filename":""}
Alors celui là par contre je ne comprend pas l'intérêt, ça nous sert à quoi le nom des propriétés, c'est la valeur qu'il nous faudrait non?
En effet, mais il y a deux façon de pouvoir gérer ça, la première est qu'il faut savoir c'est qu'en javascript un tableau est un objet, et un objet peut être utilisé comme un tableau. Autrement dit on peut accéder à la valeur d'une propriété d'un objet comme on le fait pour accéder à la case d'un tableau avec "[]". Sauf que dans le cas d'un objet, au lieu d'être indexé avec un entier qui commence à 0, et bien c'est un nom de propriété que l'on va utiliser :
{"language":"application/json","content":"var objet = {\n\t\"Nom\": \"Vaast\",\n\t\"Prenom\": \"Aurélien\",\n\t\"Age\": 33\n};\n\nfor(let prop in objet){\n\tconsole.log(objet[prop]);//affichera les valeurs des propriétés de l'objet, c'est à dire : \"Vaast\",\"Aurélien\",\"33\"\n}","filename":""}
Ah là je vois l'utilité, et tu m'avais parler d'une autre façon aussi?
Tout à fait, il y a la fonction Object.Entries qui permet en quelque sorte de transformer un objet en tableau complexe, et on peut l'utiliser avec la boucle for...of pour parcourir un objet et créer une variable pour les propriétés mais aussi une pour les valeurs, de cette façon :
{"language":"application/json","content":"var objet = {\n\t\"Nom\": \"Vaast\",\n\t\"Prenom\": \"Aurélien\",\n\t\"Age\": 33\n};\n\nfor(let [prop,value] of Object.entries(objet)){\n\tconsole.log(prop);//affichera les noms des propriétés de l'objet\n\tconsole.log(value);//affichera les valeurs des propriétés de l'objet\n}","filename":""}
Whaou, c'est puissant ça !
En effet, à utiliser sans modération !
Bon, il y a quoi d'autre comme boucle en js?
Et bien c'était la dernière, si tu as tout compris, tu sais tout sur les structures itératives et conditionnelles !
Ah je n'en voyais plus le bout ! Mais je pense que j'ai tout compris, je vais retourner pratiquer un peu tout ça. On se revoit demain pour la suite?
Avec plaisir, demain on parlera des fonctions et du passage de paramètres. Tu va voir ça va tout changer !
Ah non alors, tu ne va pas changer tout ce que je viens d'apprendre !
Non, ça ne changera rien à ce que tu viens d'apprendre, mais ça va t'apporter une autre vision du développement en javascript bien plus pratique.
Ah. Alors d'accord, à demain ! J'ai terminé cette partie