Javascript (2) - Variables, opérateurs et structures de contrôle

Bonjour à tous et bienvenue dans cette nouvelle leçon de JavaScript. Aujourd'hui nous allons voir les bases du langage, à savoir comment intégrer du code JavaScript dans une page, les variables, les opérateurs et les structures de contrôle. Il faut savoir que le JavaScript n'est rien d'autre qu'un langage que l'on va ajouter à notre page web aux côtés du HTML et du CSS. C'est-à-dire que désormais il est possible d'avoir une page qui contient du HTML, du CSS et du JavaScript en même temps. Dans notre cas, nous avons créé une page qui s'appelle index.html et qui contient des balises de base. Maintenant ce qu'on va faire c'est intégrer du JavaScript à cette page. Il existe plusieurs manières d'intégrer du JavaScript à une page web. La plus connue d'ailleurs c'est l'utilisation du tag du script ou bien la balise script et /script comme ceci. Vous avez sans doute remarqué que j'ai intégré la balise script dans la balise head. En fait, il faut savoir que l'on peut intégrer le script JavaScript n'importe où dans notre page. Avant le DOCTYPE ou bien après même le /html. C'est-à-dire vous êtes vraiment libre de mettre le code JavaScript là où vous souhaitez. Mais il est de coutume de grouper ses scripts JavaScript soit dans la balise head ou bien juste avant la fermeture de la balise body. C'est-à-dire juste avant /body. Alors nous, nous allons essayer dans un premier temps d'intégrer notre script dans le head, mais sachez que le choix de l'emplacement d'intégration de son code JavaScript est justifié par des raisons que l'on va voir plus tard. Mais pour le moment, on va se contenter d'intégrer les scripts dans le head de cette manière. Alors, la balise script annonce un début de script JavaScript, c'est-à-dire que n'oubliez pas que le JavaScript est un langage de programmation. Autrement dit, s'il contient des erreurs ou bien une syntaxe étrangère au langage, ça sera considéré comme étant une erreur et le script ne sera pas pas exécuté. Alors là, entre script et /script, seule la syntaxe JavaScript est autorisée. Autrement dit, si vous voulez intégrer autre chose que la syntaxe JavaScript, il faut que ce soit un commentaire. Un commentaire JavaScript est déclaré de cette manière: avec double slash, on déclare un commentaire de fin de ligne comme ceci. Ça veut dire que c'est un commentaire qui va s'étaler jusqu'à la fin de la ligne courante. Et si vous voulez avoir un bloc de commentaires, vous faites comme le langage C, donc slash étoile, puis étoile slash. Et entre les deux, vous mettez un bloc de commentaires qui peut s'étaler sur plusieurs lignes, par exemple comme ceci. Maintenant, nous avons vu que le script sera embarqué directement dans la page HTML. Cependant, on peut faire exactement comme on fait pour le CSS. Ça veut dire, si on a un code qui est énorme et on veut pas que notre page soit encombrée de code HTML d'une part et JavaScript en plus, Alors il suffit tout simplement de mettre ce code quelque part et puis l'appeler grâce donc à la balise script. Bon, c'est-à-dire voilà, on peut faire ceci, on crée un nouveau fichier qu'on enregistre quelque part, par exemple juste à côté de index.html, je vais l'appeler script.js. Bon, js ça veut dire que c'est un fichier qui contient exclusivement du JavaScript. Et pour intégrer cette page à notre script, il suffit de déclarer du coup de cette manière, dans script vous mettez src égale et vous mettez le chemin vers le fichier script.js comme ça. Bon, c'est un chemin qui peut être soit relatif ou bien absolu. Dans ce cas, vous mettez tous vos codes JavaScript dans cette page, ils seront appelés systématiquement dans la page index.html, ils seront exécutés aussitôt. Voilà, mais pour simplifier, bon, on va maintenant éliminer cette page, on va se dire que le code va être intégré directement dans la page index.html. Cette manière. Maintenant on va s'attaquer aux variables en JavaScript. Les identifiants de variables peuvent contenir des caractères alphanumériques ou le symbole souligné et doivent commencer par un caractère alphabétique. Les identifiants peuvent aussi commencer par le symbole$. Les identifiants respectent la casse, donc la variable avec a minuscule est différente de son homologue avec A majuscule. Bien entendu, il existe une liste de noms réservés qu'il ne faut pas spécifier en tant qu'identifiant pour des variables comme les mots-clés de JavaScript, à savoir if, else, for, switch, etc. Autre chose c'est que JavaScript est un langage de programmation faiblement typé, c'est-à-dire que l'on peut assigner à une variable des valeurs dont le type est différent à chaque fois sans qu'une erreur ne soit soulevée. Cette notion nous épargne l'effort de déclarer la variable et son type à chaque fois, ça veut dire que l'on peut utiliser des variables à la volée dans notre code et en plus on peut lui assigner des valeurs avec des types différents. En gros, on peut manipuler des données de type nombre, chaîne de caractères, booléen et autres types primitifs que l'on verra plus tard. Donc pour créer une variable, il suffit tout simplement de la déclarer directement. Par exemple, la variable a= Bonjour. Alors vous constatez que a dans ce cas c'est une chaîne de caractères. Dans le même programme, je peux mettre a= 10, c'est-à-dire que la même variable a changé de type, maintenant c'est devenu un entier. Je peux aussi déclarer des variables de type réel, par exemple une autre variable b qui vaut 1.5. Voilà, je peux aussi mettre c égale à par exemple true. Dans ce cas, c'est un booléen. Comme j'ai dit tout à l'heure, les variables en JavaScript vérifient la casse. Alors si vous avez ça, donc a minuscule égal à bonjour et A majuscule égal à 10, sachez que ce sont deux variables qui sont totalement différentes, c'est-à-dire qu'on peut les manipuler comme étant des entités qui sont totalement indépendantes l'une de l'autre. Alors pour créer une variable, on fait tout simplement comme ceci, vous mettez le nom de la variable égale et vous lui assignez la valeur que vous souhaitez. On appelle ça une affectation, bien une assignation. On peut aussi mettre le mot-clé var juste avant la déclaration de la variable, mais on verra cette notion dans une autre vidéo où l'on va traiter les fonctions. Alors pour nous, on va se contenter de faire la déclaration de cette manière. En ce qui concerne les opérateurs en JavaScript, ce sont les mêmes opérateurs qui existent pratiquement dans la plupart des langages de programmation et principalement dans le langage C dont JavaScript est inspiré fortement. À savoir les opérateurs comme le plus, le moins, diviser avec un slash, le modulo, Voilà, donc multiplier donc avec une étoile, etc. Bon, il y a aussi le caractère d'affectation égal, donc il y a le caractère de comparaison. Bon, parce qu'en général, comme vous le savez, donc il y a beaucoup de types d'opérateurs. Il y a des opérateurs de calcul ou bien arithmétiques, il y a des opérateurs logiques, des opérateurs d'assignation ou bien d'affectation, et des opérateurs de comparaison. Bref, si vous avez déjà pratiqué un langage de programmation auparavant, alors les opérateurs c'est une notion qui vous sera pas nouvelle. Bon, pour nous bien sûr, on verra les opérateurs au fur et à mesure qu'on progresse. C'est juste qu'il y a des opérateurs qui sont un peu plus spéciaux comme par exemple le+. Le+ c'est un opérateur qui peut jouer 2 rôles, à savoir l'addition ou bien la concaténation. Dans ce cas-ci, les 2 opérandes sont des nombres comme par exemple on va mettre a= 10, b= 20. Bon, si on met c= a b, alors là on imagine que le c vaudra la valeur 30. Bon, d'ailleurs pour voir le résultat on va utiliser la console du navigateur comme ça, donc avec console.log On met entre parenthèses le script. La console est très utilisée par les développeurs pour faire des tests sur le navigateur. Bon, ça affiche tout simplement le résultat souhaité, pour voir même des erreurs éventuelles dans la console du navigateur. Alors, pour exécuter ou voir le résultat, on va charger la console avec Inspecter. Alors ici, nous avons la console. Bon, on va l'agrandir un petit peu comme ça. Donc quand j'exécute le code, ça affiche 30. Bon, là, le 30, c'est le résultat d'addition de a et de b. Alors dans ce cas, le symbole+ fait office d'opérateur arithmétique ou bien opérateur d'addition. Par contre, imaginez que maintenant a il vaut 10 et b vaut 20, mais en tant que chaîne de caractères, bien que ce sont des valeurs numériques, mais on les a délimitées avec des doubles quotes, alors ça devient des chaînes de caractères. Dans ce cas, le+ sera un opérateur de concaténation, il va concaténer les deux chaînes a et b. Quand j'exécute maintenant pour voir le résultat, ça affiche 1020. En fait, c'est 10 concaténé avec 20. Si vous voulez faire donc de l'incrémentation ou bien la décrémentation, mettez par exemple a dans ce cas on va éliminer les doubles quotes pour dire que ce sont des nombres et non pas des chaînes de caractères. Alors là on va incrémenter la variable a qui deviendra 11. Si on met maintenant a, ce qui sera affiché c'est 11. On peut faire ça autrement, donc a+= 1, ça veut dire on va incrémenter de 1, c'est une autre manière d'incrémenter. Ça affiche toujours 11, ou bien la méthode la plus classique c'est mettre a= a+ 1. Ça c'est une incrémentation toujours. Qui affiche la valeur 11. Bon, notez que les opérateurs, il y en a beaucoup, mais comme j'ai dit tout à l'heure, c'est presque les mêmes que pour les autres langages de programmation que vous avez déjà manipulés auparavant. Maintenant, nous allons voir les structures de contrôle utilisées en JavaScript, et ce sont les mêmes d'ailleurs qui sont utilisées en langage C. Alors, on commence par la structure if-else. Donc, pour la structure if-else, c'est une structure conditionnelle, c'est-à-dire qui permet d'évaluer une condition et voir si elle est vraie, il va faire un traitement, sinon il va faire un traitement Alternatif, par exemple on va mettre ici a= 10 comme tout à l'heure et ensuite on va mettre la condition if a< 100. Donc là c'est la condition, de préférence on mettra ça entre des parenthèses. Alors le traitement à faire c'est que par exemple console.log on va mettre inférieur, sinon on va mettre donc else toujours console.log supérieur. Notez que pour console.log, c'est une méthode que l'on va utiliser provisoirement en attendant de voir d'autres méthodes qui permettent d'imprimer des messages directement à l'écran. Alors là, si on exécute, on imagine qu'on aura le message inférieur parce que la condition a est inférieur à 100 est vraie. J'exécute et ça m'affiche inférieur. Bon, si je change maintenant la valeur de a, par exemple 101, dans ce cas c'est nettement supérieur à 100. Alors j'exécute, ça me donne supérieur. On peut aussi faire imbriquer les structures conditionnelles. Par exemple, on va mettre des if au sein d'autres if, etc. Voilà, donc dans ce cas-ci, par exemple, vous voulez évaluer un traitement supplémentaire, il suffit de mettre des accolades parce que ici c'est un bloc d'instructions qui contient plus d'une ligne. Là, vous avez remarqué que j'ai pas mis d'accolades parce qu'il y a une seule ligne à exécuter. Par contre, si vous avez beaucoup de lignes, dans ce cas on est obligé de mettre des accolades pour dire que c'est un bloc qui appartient donc soit à else ou bien à if. Là par exemple on mettra else, on mettra if a est strictement égal à 100, on va mettre ici un autre message, c'est console.log égal, voilà comme ça. Sinon alors else, on mettra supérieur. Ça veut dire on évalue si a est inférieur strictement à 100, c'est qu'on va afficher inférieur. Si c'est égal à 100, on affichera égal, sinon, c'est-à-dire si c'est supérieur strictement à 100, dans ce cas on affichera supérieur. Si on met la valeur 100, on imagine que ça va afficher égal. Alors là c'est une imbrication de if et de else. Bien sûr il ne faut pas oublier les accolades si vous avez un bloc qui contient plus d'une ligne. Il y a aussi la structure sélective switch case qu'on déclare de cette manière. Par exemple on veut évaluer la variable a pour voir les différentes valeurs qu'elle peut avoir. Et on mettra case, par exemple si a vaut 0, alors là le traitement à faire c'est on va mettre les accolades parce qu'on aura un bloc à exécuter et on affiche dans console.log par exemple 0, point-virgule, et on mettra un break, ça veut dire si la condition est vraie donc pas la peine de se propager dans la structure, on arrête automatiquement. Donc la même chose, ça nous rappelle d'ailleurs la syntaxe du langage C, c'est le même principe. Console.log. Voilà, alors là nous avons évalué 2 cas. Donc si a vaut 0, alors on affiche 0 et on met fin à la structure. Si c'est égal à 1, on affiche 1, etc. Mais imaginez que a est différent de 0 et de 1, alors il suffit de spécifier un cas par défaut qui est default. On mettra ici le traitement, par exemple console.log Autre. Voilà. Maintenant pour le 1, on va lui donner par exemple la valeur 0. On va voir ce que ça donne. Si on exécute, bon, ça affiche maintenant 0. Regardez. Bon, si on met 1, ça affiche 1. Bon, si on met une valeur différente de 0 et de 1, alors il y a une erreur. En fait, console.log, oui, non, parce que je me suis trompé de la syntaxe. Bon, c'est normal. Comme j'ai dit à la première vidéo, JavaScript est très sensible à la casse. Que ce soit au niveau des noms, c'est-à-dire des identifiants des variables, mais aussi les noms des méthodes et des fonctions que l'on verra plus loin. En fait, JavaScript est très rigoureux à ce point-là. Maintenant j'exécute, bon il s'affiche autre. Voilà, alors là c'était la structure sélective. Maintenant on va voir les structures itératives et on va commencer par la boucle while, donc la boucle tant que. On mettra par exemple i, on va initialiser la variable i à 0. Et ensuite on va déclarer la boucle while, par exemple i est inférieur à 5, c'est-à-dire tant que i est inférieur à 5, le traitement à faire on va le mettre entre des accolades parce que là aussi c'est un bloc qui contient beaucoup de lignes. On mettra console.log, on affichera par exemple bonjour concaténé avec i concaténé avec fois, pour dire que je vais afficher bonjour Et là, en préférence, je commence à 1 pour afficher bonjour une fois, bonjour 2 fois, et je peux aller jusqu'à 5. Ici, c'est inférieur ou égal à 5. Et n'oubliez pas d'incrémenter le i, bon, pour ne pas tomber dans une boucle infinie. Alors, mettre un i++ ou bien i+= 1. Alors, on est censé avoir les messages bonjour une fois, bonjour 2 fois, etc. Quand on exécute, bon, ça affiche 5 messages: bonjour une fois, bonjour 2 fois, jusqu'à bonjour 5 fois. On peut faire le même traitement avec la boucle for. C'est de la même manière. Bon, d'ailleurs, la boucle while et la boucle for, ils sont très similaires. La seule différence, c'est qu'on préfère généralement la boucle for parce qu'elle est plus facile à déclarer, d'autant plus si on connaît le nombre d'itérations à exécuter. Bon, si le nombre d'itérations n'est pas connu à l'avance, alors dans ce cas, il est préférable d'utiliser la structure while. Alors là, bon, pas la peine d'initialiser parce que tout ça, on va le mettre dans la structure elle-même. On va mettre ici for i= 1, i inférieur ou égal à 5, donc le pas d'incrémentation, et on exécute le traitement. Et là, pas la peine de mettre les accolades parce qu'on n'a qu'une seule ligne. Alors on affichera exactement la même chose que tout à l'heure. Donc quand j'exécute, ça affiche le même résultat de 1 jusqu'à 5. Je peux changer de valeur, par exemple jusqu'à 10, et ça exécute 10 fois, donc de 1 jusqu'à 10. Il existe aussi la structure do-while. Do-while est connue pour exécuter au moins une itération quelle que soit la condition, c'est-à-dire même si la condition de départ n'est pas vraie. On aura déjà exécuté une itération. Bon là on met par exemple a égal à 10 et on mettra ici do pour le traitement à faire, c'est par exemple console.log bonjour, puis on va incrémenter a, a++ ou bien a+= 1, voilà, tant que donc while a est inférieur à 5. Alors là, on constate que la condition n'est pas vraie depuis le début parce que 1 est nettement supérieur à 5. Et pourtant, on aura affiché bonjour au moins une fois parce que là, c'est la structure de while. Elle est caractérisée par cette propriété. C'est qu'elle exécute au moins une itération quelle que soit la condition. On exécute maintenant pour voir le résultat et ça affiche bonjour une fois. Maintenant, une fois que j'exécute la structure, je vais découvrir que 1 n'est pas inférieur à 5. Alors je sors carrément de la structure. Itérative. Là, c'était les bases du langage JavaScript. Alors, je vous recommande vivement de revoir un petit peu ces structures pour être à l'aise avec, bien que c'est pas trop différent de ce que vous avez déjà vu dans d'autres langages de programmation et particulièrement dans le langage C. Alors, on se contente de ça pour cette leçon. Merci pour votre attention et à la vidéo prochaine.