Mise en œuvre de Javascript Cette activité va vous permettre de vous initier à la programmation en utilisant le langage Javascript que vous aurez certainement l’occasion d’utiliser à plusieurs reprises durant votre formation. Ce langage a été rendu populaire par son utilisation intensive dans le codage des sites Web. Cependant, son utilisation ne se limite pas à cette application. Il a notamment été choisi comme langage pour une plateforme de développement de plus en plus populaire appelée Node.js. Même si Javascript possède des caractéristiques qui lui sont propres, il repose quand même sur les principes que l’on retrouve dans tous les langages de programmation et qui vous ont été présentés dans Bases sur la programmation. Sa popularité et sa facilité de mise en œuvre justifient son utilisation pour cette activité d’initiation à la programmation. Installation de l’environnement de développement Pour utiliser un langage de programmation, il est bien souvent nécessaire d’installer des outils de développement (compilateur/interpréteur, environnement de développement intégré (IDE), librairies…) Dans le cas de Javascript, le principal outil de développement est l’interpréteur qui aura la charge d’éxécuter le code source Javascript. La bonne nouvelle est qu’il est déjà présent dans chacun des navigateurs internet installés sur nos ordinateurs (Firefox, Chrome, Safari, Edge…). Par la suite, on utilisera Mozilla Firefox qui dispose en standard de fonctionnalités bien utiles dans le cadre de développement web. Google Chrome dispose aussi de ces fonctionnalités. C’est d’ailleurs ce navigateur que j’utilisais auparavant. Cependant, la crainte de l’ancien directeur technique de Mozilla Firefox de voir ce navigateur libre et gratuit mourir face à la concurrence plutôt déloyale de Google Chrome, m’a fait opter pour celui-ci. Ce modeste soutien est aussi motivé par le fait que la fondation Mozilla propose un excellent site de documentation sur les technologies du web : l’incontournable Mozilla Developer Network . Pour la saisie du code source, un éditeur de texte basique comme celui installé par défaut sur chacun des systèmes d’exploitation suffit (ex : le bloc notes de Windows, TextEdit sur OSX…). La seule nécessité est que celui-ci n’enregistre sur le disque que ce qui est vraiment saisi par l’utilisateur, c’est-à-dire le texte brut sans mise en forme. Ainsi, des logiciels comme Microsoft Word et LibreOffice ne conviennent pas car, sans précaution particulière lors de l’enregistrement du fichier sur le disque dur, ils ajoutent dans celui-ci du contenu supplémentaire pour la mise en forme du texte qui n’a aucun sens pour l’interpréteur et qui provoquera donc des erreurs. Au final, il n’y a donc rien à installer pour pouvoir commencer à développer en Javascript. Ceci étant dit, l’écriture de code informatique est quand même grandement facilité si on utilise un éditeur de texte orienté “programmation” et qui prend en charge le langage dans lequel on développe. Celui-ci doit, à mon sens, proposer au minimum la coloration syntaxique et la “completion” automatique. Ces 2 fonctionnalités consistent, pour l’une, à colorer de différentes manières, les mots clés du langage, les variables… présents dans le code source et, pour l’autre, à tenter de deviner ce que vous voulez taper en proposant une liste de possibilités. J’utilise pour ma part un éditeur gratuit appelé Visual Studio Code qui est plutôt bien adapté à l’écriture de code Javascript et qui est multiplateforme (Windows, OSX, Linux). C’est donc sur celui-là que je m’appuierai par la suite. Malgré tout, rien ne vous empêche d’utiliser un autre éditeur de texte comme, par exemple, le très populaire SublimeText ou aussi Notepad++ (disponible pour Windows uniquement). 🖮 Travail n° 1 : Installation des logiciels Vérifier que le navigateur Mozilla Firefox est présent sur l’ordinateur. L’installer dans le cas contraire. Installer si nécessaire un éditeur de texte orienté “programmation” ( Visual Studio Code recommandé) Découverte de l’interpréteur Javascript Javascript est un langage interprété et, en tant que tel, il va nous permettre d’exécuter d’une manière extrêmement simple nos premières instructions. Pour commencer, on va donc utiliser Javascript dans un mode dit interactif qui va nous permettre d’exécuter imédiatement les instructions que l’on va saisir les unes après les autres dans une fenêtre spéciale du navigateur internet appelée console Javascript. Cette fenêtre est accessible dans Firefox grâce au menu ☰ Développement Console web Dans ce mode interactif, la séquence suivante s’exécute en permanence : Affichage d’une invite de commande qui prend la forme du symbole >> dans le navigateur Firefox. Comme son nom l’indique, une invite de commande invite l’utilisateur à saisir, devinez quoi, … une commande . Cette commande peut être une instruction ou simplement une expression ; Attente de validation, par l’intermédiaire de la touche ENTRÉE du clavier, d’une commande saisie par l’utilisateur ; Évaluation de la commande saisie. Ceci signifie que l’interpréteur Javascript l’analyse puis l’exécute ; Affichage du résultat de l’exécution de la commande. Ce mode de fonctionnement interactif est désigné en anglais par l’acronyme REPL pour : Read → l’interpréteur lit une expression saisie par l’utilisateur Evaluate → il l’évalue Print → il affiche le résultat Loop → il recommence à l’infini cette séquence Les instructions Javascript doivent normalement se terminer par un ‘;’ de façon à pouvoir les distinguer lorsqu’il y en a plusieurs qui se suivent. Javascript pour faire des calculs Bien que ce ne soit pas sa vocation première, Javascript peut être utilisé comme une calculatrice. C’est ce que vous allez vérifier maintenant. 🖮 Travail n° 2 : Javascript en tant que calculette basique Lancez le navigateur Firefox Ouvrir la console Javascript : soit par les menus Cliquer sur l’image pour l’agrandir soit par le raccourci clavier : Ctrl+Maj+K sur Windows, ⌥ + ⌘ + K sur OsX. Saisir l’expression suivante 3 + 4; à la suite de l’invite de commande et valider avec la touche ENTRÉE. Vérifier que le résultat de cette somme apparaît dans le panneau d’affichage de la console. Trouver puis noter les expressions qui permettent de faire les calcul suivants en s’aidant de la rubrique Opérateurs arithmétiques sur le site Mozilla Developer Network (qui sera désigné par “MDN” par la suite): 5 moins 15 8 fois 7 9 divisé par 2 Noter qu’en Javascript la partie décimale d’un nombre est séparée de sa partie entière par un point et non une virgule. 9 modulo 2 (c-à-d le reste de la division euclidienne de 9 par 2) Cet opérateur est très souvent utilisé en informatique pour savoir si un nombre est multiple d’un autre ou pour effectuer des boucles. Il est donc recommandé de s’en souvenir. 2 élevé à la puissance 10 10 fois la somme de 4 et 3 (qui doit donner comme résultat 70 et non 43…) Noter les résultats des calculs suivants et donner leurs significations : 2 élevé à la puissance 1024 (-2) élevé à la puissance 2047 (-2) élevé à la puissance 2047 plus 2 élevé à la puissance 1024 1789 divisé par 0 0 divisé par 0 Dans le travail précédent, vous avez utilisé les opérateurs mathématiques classiques pour faire des calculs de base. Javascript dispose également d’un certain nombre de fonctionnalités mathématiques évoluées comme celles présentes sur une calculatrice scientifique : fonctions trigonométriques fonctions logarithmiques (népérien, base 10) fonction racine carrée valeur de PI … Ces fonctionnalités ne sont pas directement accessibles depuis un opérateur (+, -, %…) mais depuis des fonctions (ou plus exactement des méthodes mais on considèrera pour l’instant que c’est la même chose). Comme évoqué dans Constitution d’un programme, une fonction est un ensemble d’instructions regroupées ensemble qui vont permettre d’effectuer une action que l’on est souvent amené à faire dans un programme sans avoir à les retaper toutes à chaque fois. On se contentera alors de définir une fois pour toute une fonction que l’on appellera lorsque désiré. Cela rejoint un tout petit peu le principe d’une variable où on donne un nom à un emplacement mémoire sauf qu’ici on va donner un nom à un ensemble d’instructions. Un autre avantage des fonctions est qu’elles sont paramétrables. On va ainsi pouvoir généraliser leur comportement. Un comportement spécifique sera obtenu en leur fournissant des arguments. Ces arguments sont fournis à la fonction en les indiquant entre parenthèses à la suite du nom de la fonction. Ci-dessous figure un exemple d’appel de la fonction standard Javascript nommée parseInt pour qu’elle retourne la représentation en base 10 d’un nombre binaire. Exemple d’appel de la fonction parseInt() >> parseInt("0101", 2); (1) 5 1 on fournit 2 arguments à la fonction parseInt() : une chaîne de caractères représentant un nombre puis la base dans laquelle ce nombre est exprimé (binaire ⇒ base 2); Les fonctions mathématiques de Javascript sont toutes regroupées dans ce qu’on appelle un objet. Cette notion d’objet est vraiment très importante en programmation informatique. Cependant, il est un peu tôt pour approfondir cette notion. Malgré tout, il n’est pas vraiment nécessaire de savoir exactement comment cela fonctionne pour pouvoir l’utiliser. Il suffira de retenir que pour appeler les fonctions de l’objet Math, on se contente de précéder leur nom de Math. (noter le point après Math). Exemple d’appel de la fonction logarithme népérien >> Math.log(10); (1) 2.302585092994046 1 On demande le calcul du logarithme népérien de 10. Vous allez à présent explorer les différentes fonctions proposées par l’objet Math de Javascript. 🖮 Travail n° 3 : Javascript en tant que calculette scientifique Se rendre sur la page MDN de l’objet Math À partir de la documentation des fonctions mathématiques (voir notamment les exemples), donner les expressions qui permettent de : calculer la racine carrée de 81 retourner la valeur absolue de -100 retourner la valeur de PI calculer le cosinus de PI retourner l’arrondi de 9.75 retourner la partie entière de PI (2 possibilités) retourner un nombre au hasard — on dit aussi aléatoire — compris entre 0 et 1 retourner un nombre entier aléatoire compris entre 0 et 100 exclus Expliquer la différence entre les fonctions Math.floor(), Math.ceil() et Math.trunc(). Calculer, avec une seule expression Javascript, la période de révolution d’un satellite en orbite circulaire autour de la Terre évoluant à 100km d’altitude par rapport à sa surface en utilisant la formule suivante : avec : T, période de révolution du satellite (exprimée en secondes) RT, rayon de la Terre, exprimé en mètres (6,378.106m à l’équateur). h, altitude du satellite par rapport à la surface de la Terre, exprimée en mètres. G, la constante gravitationnelle universelle (6,67.10-11.m3.kg-1.s-2) MT, la masse de la Terre (5,98.1024kg) Vous devez obtenir T ≈ 5187s Utilisation de variables Dans les activités précédentes, des calculs ont été réalisés directement sur des valeurs numériques. Ces valeurs sont appelées valeurs littérales. Il faut éviter au maximum d’utiliser les valeur littérales dans les programmes. On doit au contraire privilégier l’utilisation de variables. Comme expliqué dans le paragraphe Constitution d’un programme, les variables sont des noms qui font référence à des emplacements de la mémoire où sont stockées des valeurs. Avant d’utiliser une variable, il faut la déclarer c’est-à-dire demander à Javascript de lui réserver un emplacement en mémoire. Dans la pratique, ceci consiste à saisir le mot clé var suivi d’un espace puis du nom désiré pour la variable. Ce nom ne doit contenir que des lettres (minuscules ou majuscules), des chiffres (‘0’ à ‘9’ ), des symboles de soulignement (‘_’) et des signes dollar (‘$’). Autres restrictions : il ne peut ni débuter par un chiffre ni être identique à un des mots clés du langage (→ var par exemple). var prixHT; // OK var prixht; // OK. Voir avertissement ci-dessous var _tva; // OK var tva$; // OK var up2you; // OK var 4me; // NOK : SyntaxError: identifier starts immediately after numeric literal (1) var var; // NOK : SyntaxError: missing variable name (2) 1 le nom de la variable commence par un chiffre 2 le nom de la variable est un mot clé du langage Javascript distingue les majuscules et le minuscules : on dit qu’il est sensible à la casse. Ainsi, var prixHT; et var prixht; déclarent 2 variables différentes et désignent donc 2 emplacements mémoire distincts. Lorsqu’on veut modifier le contenu d’un emplacement mémoire on réalise une affectation à l’aide de l’opérateur = dont la signification, on le rappelle, diffère de celle qu’on lui accorde en mathématique (→ égalité). Ainsi, en Javascript, x = 3 signifie “mettre la valeur 3 dans l’emplacement mémoire référencé par l’identificateur noté x”. En mathématique, x = 3 représente une égalité et peut également s’écrire 3 = x. Cette dernière écriture, n’a aucune signification en Javascript. La preuve: >> 3 = x; ReferenceError: invalid assignment left-hand side (1) 1 Javascript manifeste son mécontentement lorsqu’on essaye d’affecter une valeur littérale. Pour lire le contenu d’une variable, il suffit de saisir son nom. Pour affecter (assign en anglais) à la variable y le double de la variable x, on écrit alors : >> x = 3; 3 >> y = 2 * x; 6 Lorsque le nom d’une variable apparait à gauche d’un signe ‘=’ c’est qu’on veut y écrire dedans. Lorsqu’il apparait à droite, c’est qu’on veut lire son contenu. 🖮 Travail n° 4 : Mise en œuvre de variables Saisir les expressions suivantes dans la console Javascript. Celles-ci calculent le prix TTC d’un article dont le prix Hors Taxes est 45€ sachant que son taux de TVA vaut 5.5%: var prixHT = 45; var TVA = 5.5 / 100; var prixTTC; prixTTC = prixHT * (1 + TVA); Ici, on voit que l’on peut déclarer et affecter une variable en même temps. On peut même affecter la variable avec le résultat d’un calcul. Modifiez la valeur du taux de TVA pour qu’il prenne la valeur 20% et affichez immédiatement le prix TTC. TVA = 0.20; prixTTC; Celui-ci a-t-il été mis à jour ? Expliquer pourquoi. Donner l’expression Javascript qui permet d’évaluer le prix à payer par le client lorsqu’on lui accorde une réduction de 5% sur le prix hors taxes. Donner l’expression qui permettrait d’augmenter de 1% la TVA quel que soit son taux actuel. Les variables peuvent contenir des valeurs de nature vraiment différente. On a vu dans le chapitre Constitution d’un programme que les variables pouvaient notamment contenir des nombres ou du texte, Lors de l’affectation d’une variable, Javascript va déterminer automatiquement le type de celle-ci afin de déterminer les opérations qu’il est possible ou non de réaliser sur elle. Javascript dispose d’une fonction qui permet d’afficher le type qu’il a déterminé pour une variable. C’est la fonction typeof() à laquelle on fournit le nom de la variable entre les parenthèses. 🖮 Travail n° 5 : Types des variables Affecter le nombre 83 à une variable nommée age. Afficher et noter le type de cette variable en tapant typeof(age). Affecter le texte “1802” à une variable nommée anneeNaissance puis demander à Javascript d’afficher son type puis le noter sur le compte rendu. Pour affecter du texte à une variable, il faut l’entourer soit d’apostrophes (touche 4 du clavier) soit de guillemets doubles (touche 3 du clavier). Si le texte contient ", il faut délimiter le texte avec '. Si le texte contient ', il faut délimiter le texte avec ". Le choix est libre si le texte ne contient ni de ' ni de ". Exemple titreFilm = "Bienvenue chez les Ch'tis" intituleQuestion = 'Qui a dit : "Veni, vidi, vici" ?' Additionner les variables age et anneeNaissance puis expliquer le résultat obtenu. Quelle signification peut avoir l’opérateur + en Javascript lorsqu’un de ces opérandes est une variable de type texte ? Notre découverte de l’interpréteur Javascript en mode interactif touche à sa fin. Ce mode d’utilisation de Javascript est très pratique pour tester des commandes/fonctions de Javascript. Cependant, il n’est guère adapté pour rejouer une séquence de commandes à laquelle on désire apporter ne serait-ce qu’une seule petite modification car cela implique de saisir à nouveau toutes les commandes et les exécuter les unes après les autres. Un autre inconvénient du mode interactif est de perdre tout ce qui a été tapé lorsqu’on quitte l’interpréteur. Nous allons voir à présent comment écrire et exécuter des scripts Javascript. Premiers scripts Javascript Dans cette partie, vous allez utiliser Javascript dans le mode “conventionnel” et non plus dans le mode interactif. Ce mode offre l’avantage de pouvoir sauvegarder ou diffuser votre code source Javascript. Dans le mode conventionnel, vous lancez l’exécution de l’interpréteur en intégrant dans une page web du code Javascript. Ce code contient l’ensemble des instructions que vous souhaitez qu’il exécute automatiquement en séquence. Ce code s’appelle un script et peut être intégré soit directement dans la page web (fichier avec extension .html) soit inclus depuis cette même page web mais cette fois-ci à travers un 2ème fichier (portant une extension .js). L’exemple suivant montre les 2 possibilités : index.html <!DOCTYPE html> (1) <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page web</title> </head> <body> <h1>Exemple d'intégration de code Javascript dans une page web</h1> (2) <script type="text/javascript"> (3) var nom = "Vladimir"; (4) var p = document.createElement("p"); (4) p.textContent = "Bonjour " + nom; (4) document.body.appendChild(p); (4) </script> (5) <script src="first.js" type="text/javascript"></script> (6) </body> </html> 1 Début du fichier contenant la page web. Son contenu est décrit à l’aide de balises HTML (→ texte contenu entre ‘<’ et ‘>’). La syntaxe HTML (c-à-d la façon correcte de l’écrire) sera vue dans une prochaine séquence. 2 Balise HTML qui permet d’afficher un texte sous forme d’un titre. 3 On indique au navigateur, à l’aide de la balise <script …> que du code Javascript va suivre. Il doit alors lancer l’interpréteur Javascript pour exécuter ce code. 4 Ce code Javascript demande au navigateur d’ajouter un nouveau paragraphe dans la page web. Il y sera écrit “Bonjour Vladimir”. (inutile de chercher à comprendre le code : cela sera vu plus tard) 5 La balise </script> (noter le ‘/’ avant script) indique la fin du script. Le navigateur doit donc repasser en “mode HTML”. 6 La balise <script …> spécifie cette fois-ci par l’intermédiaire de cette sorte de variable nommée src (c’est ce qu’on appelle un attribut) le nom du fichier Javascript que le navigateur doit interpréter. Le contenu de ce fichier, ne devant contenir que du code Javascript, est affiché ci-dessous. first.js var dateAujourdhui = new Date(); (1) var p1 = document.createElement("p"); (1) p1.textContent = "Aujourd'hui, nous sommes le " + dateAujourdhui.toLocaleDateString(); (1) document.body.appendChild(p1); (1) 1 Ce code Javascript permet d’ajouter à la page web un texte qui indique la date du jour. Lorsqu’on charge le fichier html dans le navigateur, voilà ce que l’on obtient : Interactions avec l’utilisateur Il est souvent nécessaire que l’utilisateur puisse interagir avec le programme pour lui communiquer des informations ou confirmer quelque chose. De même, le programme peut parfois nécessiter d’alerter l’utilisateur. Dans le contexte de la fenêtre du navigateur internet où s’affiche une page web (→ objet window), Javascript met à disposition 3 fonctions utilitaires basiques destinées à cet usage et qui prendront la forme de fenêtres “pop-up” (→ nouvelles fenêtres qui s’affichent au dessus des précédentes) : window.alert() → permet au programme d’afficher un message à destination de l’utilisateur; window.confirm() → demande à l’utilisateur une confirmation (du genre “Oui/Non”, “Valider/Abandonner” …); window.prompt() → affiche une fenêtre dans laquelle l’utilisateur pourra saisir une chaîne de caractères. Cette chaîne de caractères sera disponible dans le script après appui sur la touche Entrée du clavier et pourra ensuite être convertie en valeur numérique si nécessaire. Exemple d’utilisation des fonctions de Javascript permettant l’interaction entre l’utilisateur et le programme var prenom = window.prompt("Saisir votre prénom"); (1) var anneeNaissanceTexte = window.prompt("Saisir votre année de naissance"); (2) var anneeNaissanceNombre = parseInt(anneeNaissanceTexte, 10); (3) var age = new Date().getFullYear() - anneeNaissanceNombre; (4) window.alert("Bonjour " + prenom + ". Vous avez ou allez avoir " + age + " ans cette année."); (5) window.confirm("Ces données sont-elles exactes ?"); (6) 1 demande à l’utilisateur de saisir son prénom depuis une boîte de dialogue 2 demande à l’utilisateur de saisir son année de naissance depuis une boîte de dialogue 3 convertit en nombre la date de naissance saisie de façon à pouvoir faire des calculs avec 4 calcul l’âge de l’utilisateur en soustrayant l’année courante et sa date de naissance 5 affiche un message texte contenant à la fois le prénom et l’âge de l’utilisateur. Noter que l’age est automatiquement converti en chaîne de caractères c-à-d sans avoir recours à une fonction. Ceci est toujours le cas lorsqu’une variable numérique est “ajoutée” à une variable texte. 6 demande confirmation à l’utilisateur 🖮 Travail n° 6 : Interactions utilisateur Reproduire chaque ligne de l’exemple ci-dessus dans la console Javascript pour observer son résultat En se basant sur l’exemple fourni en début de chapitre, exécuter ce même code depuis une page HTML qui sera décrite dans un fichier index.html. Celui-ci incluera le fichier script01.js dans lequel seront reportées toutes les instructions Javascript. Les structures conditionnelles (ou tests) Les structures conditionnelles sont des constructions disponibles dans tous les langages et qui vont permettre d’exécuter tel ou tel autre code selon qu’une condition est remplie ou non. Exemples de la vie courante : Remporter le jackpot du Loto (→ action qui représente le code à exécuter) nécessite d’avoir validé un ticket gagnant avec les les 6 bons numéros du tirage (→ condition). Voter nécessite d’avoir 18 ans ET d’être inscrit sur les listes électorales. → Ici la condition pour voter est constituée de 2 sous-conditions qui doivent être remplies toutes les 2 (on dit aussi vérifiées) Entrer en discothèque nécessite d’avoir 16 ans OU d’être accompagné → Ici, pour entrer dans la discothèque la vérification d’une seule des 2 sous-conditions suffit. Cela n’empêche pas de vérifier les 2 : l’entrée sera possible si vous avez 18 ans et que vous êtes accompagnés de vos parents. Je vous l’accorde, cela n’arrive sûrement jamais dans la vie courante . De manière générale, une condition est une expression Javascript qui peut prendre 2 valeurs : VRAI ou FAUX. C’est ce qu’on appelle une expression booléenne. En Javascript, les 2 valeurs VRAI et FAUX sont désignées respectivement par les mots clés true et false. Ces valeurs sont obtenues suite à des opérations de comparaison : age > 18 ?, inscritSurListeElectorale === VRAI ? … Javascript dispose des opérateurs de comparaison suivants : Opérateur Signification == égalité simple != inégalité simple === égalité stricte !== inégalité stricte > supérieur à >= supérieur ou égal à < inférieur à <= inférieur ou égal à Noter les symboles utilisés pour l’égalité de façon à les distinguer de l’opérateur d’affectation (← 1 seul signe =) 2 égalités (ou inégalités) existent en Javascript : la simple et la stricte. Pour l’instant, il est TRÈS FORTEMENT RECOMMANDÉ de n’utiliser que l’égalité stricte dont le résultat donne moins de surprises que l’égalité simple. Maintenant que nous avons évoqué ce qu’était une condition, revenons à la structure conditionnelle à proprement parlé. Celle-ci s’appuie sur la valeur de l’expression booléenne qui traduit la condition pour effectuer ou non une suite d’instructions. Plusieurs structures conditionnelles existent en Javascript mais celle qui est la plus utilisée est le if…else. Voici sa syntaxe générale : if( /* condition */ ) { (1) // Code a exécuter si la condition est remplie c-à-d si sa valeur est `true` } else { (2) // Code à exécuter si la condition N'est PAS remplie c-à-d si sa valeur est `false` } 1 On place dans les parenthèses qui suivent le if l’expression booléenne qui conditionnera l’exécution ou non du bloc d’instructions qui suit (→ suite d’instructions délimitées par des accolades) 2 Le else prècède le bloc d’instructions à exécuter si la condition n’est pas remplie. Cette partie est optionnelle et n’apparaît donc pas dans le cas où aucun code ne doit être exécuté si la condition n’est pas remplie. Cet exemple permet d’introduire une autre notion importante : les commentaires. En programmation, un commentaire est simplement un texte d’information destiné au lecteur humain qui parcoure le code source et non à l’interpréteur Javascript. Ce dernier doit donc l’ignorer. Ici, on utilise les 2 façons de faire des commentaires en Javascript : Le double caractère barre oblique ou double slash (→ // …) qui demande à l’interpréteur Javascript d’ignorer tout ce qui suit sur la ligne ; La syntaxe /* … */. Celle-ci diffère de la 1ère par le fait qu’elle permet de faire des commentaires au milieu d’une ligne comme ici ou, plus souvent, sur plusieurs lignes dans la mesure où Javascript va ignorer tout ce qu’il y a entre les 2 délimiteurs y compris les sauts de ligne qui sont eux aussi des caractères même s’ils nous semblent invisibles. Les commentaires sont INDISPENSABLES dans tout code source de façon à permettre leur maintenance ou simplement leur compréhension par autrui. Il est intéressant de noter qu’il est possible “d’emboîter” — on dit aussi imbriquer — plusieurs if…else. Ceci permet notamment d’augmenter le nombre d’alternatives possibles à l’exécution d’un code. Voyons à présent 3 exemples pour illustrer ce qui vient d’être dit. // Exemple n°1 : if...else simple var age = 19; if( age >= 18 ) { window.alert("Age >= 18ans => Accès autorisé"); } else { window.alert("Age < 18 => Accès interdit"); } // Exemple n°2 : if sans else var erreur = false; (1) if( erreur ) { window.alert("Oops ! Something went wrong"); } // Exemple n°3 : plusieurs if...else imbriqués var cuissonOeuf = "Mollet"; if( cuissonOeuf === "Coque") { window.alert("temps de cuisson pour oeuf à la coque : 3 à 4min"); } else { if( cuissonOeuf === "Mollet") { window.alert("temps de cuisson pour oeuf mollet : 4 à 5min"); } else { if( cuissonOeuf === "Dur") { window.alert("temps de cuisson pour oeuf dur : 8 à 10min"); } else { // type de cuisson inconnu window.alert("Le temps de cuisson pour le type de cuisson spécifié est inconnu !!"); } } } La présence des accolades n’étant pas indispensable lorsque qu’un bloc d’instructions n’en contient qu’une seule, le 3ème exemple pourra s’écrire de manière plus simple et, qui plus est, plus lisible de la manière suivante : var cuissonOeuf = "Mollet"; if( cuissonOeuf === "Coque") { window.alert("temps de cuisson pour oeuf à la coque : 3 à 4min"); } else if( cuissonOeuf === "Mollet") { (1) window.alert("temps de cuisson pour oeuf mollet : 4 à 5min"); } else if( cuissonOeuf === "Dur") { (2) window.alert("temps de cuisson pour oeuf dur : 8 à 10min"); } else { window.alert("Le type de cuisson spécifié est inconnu !!"); } 1 On supprime les accolades de la clause else associée au 1er if puisque celle-ci ne contient qu’une seule “instruction” qui se trouve être un 2ème if…else. On en profite pour réaligner le code (on dit aussi ré-indenter) pour donner la sensation d’avoir une structure conditionnelle de type if…else if…else. Noter que j’ai gardé les accolades qui englobent les window.alert() bien qu’elles ne soient pas nécessaires. Je vous encourage vivement à faire de même et donc, sauf dans le cas précis qui vient d’être vu, à toujours délimiter les blocs d’instructions avec des accolades même lorsqu’ils n’en contiennent qu’une seule. 2 On répète la simplification avec le 3ème if…else. 🖮 Travail n° 7 : Mise en œuvre de if…else Reproduire le code des 3 exemples dans un seul fichier script02.js, y faire appel depuis lefichier index.html et afficher la page web correspondante dans Firefox de façon à observer le résultat qu’ils produisent. Tester le code en modifiant le contenu des 3 variables age, erreur et cuissonOeuf de façon à afficher l’ensemble des messages possibles. Pour visualiser l’incidence de la modification, il suffit de rafraîchir la page dans le navigateur (touche F5). Modifier le 1er exemple pour que l’âge soit saisi par l’utilisateur via la fonction window.prompt() plutôt qu’affecté directement dans le code Coder dans le même fichier script02.js une structure conditionnelle if…else if…else qui permet, suite à la saisie d’une note de devoir, d’afficher une appréciation : “médiocre” si la note est inférieure à 8 “insuffisant” si elle est inférieure à 10. Comme l’interpréteur exécute le code au fur et à mesure, ce 2ème test revient à tester les notes comprises entre 8 et 10 puisque les notes inférieures à 8 auront été “interceptées” par le 1er if. Il faut cependant noter que cela ne fonctionne que si les tests sont dans le bon ordre. Une bien meilleure solution sera vue plus loin. “moyen” si elle est inférieure à 12, “bien” si elle est inférieure à 16, “excellent” si elle est supérieure à 16. Dans la dernière structure conditionnelle, vous avez pu tester des intervalles de valeurs (notes inférieures à 8, comprises entre 8 et 10 etc..) en s’appuyant sur l’ordre dans lequel les conditions était évaluées. Cependant, il aurait été plus intelligible d’écrire quelque chose du genre if (8 <= note < 10) {…} c’est-à-dire comme on fait en mathématiques. Or, cette écriture n’est pas possible en Javascript. Cependant, à y bien regarder, ce test d’appartenance à un intervalle de valeurs peut se décomposer comme suit : “SI (la note est supérieure ou égale à 8 ET inférieure strictement à 10) ALORS…”. On voit alors que la condition globale est composée de 2 sous-conditions combinées avec un “ET”. Ce “ET” est ce qu’on appelle un opérateur logique. Un opérateur logique va permettre de faire des opérations non pas sur des nombres mais sur des expressions booléennes. Le résultat d’une telle opération donnera toujours soit true soit false. Ainsi, pour le “ET” logique, l’unique façon d’obtenir true comme résultat est d’avoir l’ensemble des sous-conditions à true. Dès qu’une sous-condition est false, le résultat est false (Ceci englobe donc aussi le cas où les 2 sous-conditions sont false). Javascript dispose de 3 opérateurs logiques : Opérateur logique Usage Description && expr1 && expr2 “ET” logique. Retourne true uniquement si expr1 et expr2 valent true. Sinon retourne false. || expr1 || expr2 “OU” logique. Retourne false uniquement si expr1 et expr2 valent false. Sinon retourne true. ! !expr “NON” logique. Retourne true si exp vaut false. Retourne false si expr vaut true. 🖮 Travail n° 8 : Tests combinés Reprendre la structure conditionnelle qui permet de donner une appréciation en fonction d’une note en utilisant cette fois-ci des conditions combinées avec des opérateurs logiques qui vérifient clairement l’appartenance de la note à un intervalle (0 <= note < 8, 8<= note < 10, 10 <= note < 12, …). Traiter les cas où la note saisie est inférieure à 0 OU supérieure à 20 en affichant un message indiquant que la note n’est pas valide. ⚙ Coder un nouveau script qui devra déterminer si une année saisie par l’utilisateur est bissextile ou non sachant : qu’une année bissextile est une année qui est soit divisible par 400 soit divisible par 4 et non par 100 ; que l’opérateur “ET” est plus prioritaire que l’opérateur “OU” (comprendre qu’il faut éventuellement prévoir l’utilisation de parenthèses) Utilisez l’opérateur modulo (%) pour tester si un nombre est divisible par un autre. Pour clore cette présentation des structures conditionnelles, il reste à évoquer l’existence d’une 2ème structure conditionnelle de Javascript qui est bien utile lorsqu’on doit réaliser des actions différentes selon la valeur d’une expression qui peut prendre plus que 2 valeurs. Ceci est par exemple le cas du 3ème exemple sur la cuisson des oeufs où on doit adapter le temps de cuisson selon le type de cuisson désiré qui peut prendre 3 valeurs : “Coque”, “Mollet” ou “Dur”. Javascript dispose à cet effet de l’instruction switch. Vous allez découvrir cette instruction à travers l’activité suivante. 🖮 Travail n° 9 : Mise en œuvre du switch Se rendre sur la documentation MDN de l’instruction switch et se renseigner sur son fonctionnement ; Ajouter dans le fichier script02.js une nouvelle structure conditionnelle de type switch pour reprendre l’exemple de la cuisson de l’œuf. Les boucles En programmation, il est fréquent d’avoir à répéter les mêmes instructions plusieurs fois. Parfois il faut les répéter un nombre de fois connu à l’avance et, dans d’autres cas, il faut les répéter tant qu’une condition est remplie ou non. Exemples : Demander la date de naissance à CHACUN des étudiants d’une classe → On connait à l’avance le nombre de fois qu’il va falloir poser la question puisqu’on connait le nombre d’étudiants Inviter l’utilisateur à saisir son mot de passe TANT QUE celui-ci ne l’a pas saisi correctement → On NE connait PAS à l’avance le nombre de fois qu’il va falloir inviter l’utilisateur à saisir son mot de passe car cela dépend de nombreux facteurs : touche “Majuscules” du clavier activée par inadvertance, inversion de caractères, oubli du mot de passe, mauvaise configuration du clavier (“qwerty” vs. “azerty”), saisi du mot de passe avec des mouffles … Tous les langages, dont Javascript, proposent donc des constructions qui permettent de traiter ces différents cas. Celles-ci sont ce qu’on appelle des structures itératives ou plus simplement des instructions de boucle. La 1ère que nous allons découvrir est la structure while( cond ) {…}. Celle-ci est plutôt utilisée pour coder des boucles dont on ne connait pas à l’avance combien de fois il faut l’exécuter. Une connaissance minimale de l’anglais devrait suffire à comprendre que cette structure va permettre de répéter les instructions comprise dans le bloc délimité par les accolades tant que la condition cond est remplie. A contrario, pour exécuter un bloc d’instruction tant qu’une condition n’est pas remplie, on utilisera la structure suivante : while( !cond ) {…} (Noter le point d’exclamation devant la condition pour inverser sa signification) ou alors while( cond === false ) {…}. 🖮 Travail n° 10 : Mise en œuvre de la boucle while. Coder un script script03.js à intégrer dans une page html et dans lequel vous : déclarerez une variable de type chaîne de caractère mdp (pour “mot de passe”) et l’initialiserez à "yesUcan" déclarerez une variable booléenne isAuth (pour “Authentifié”. Le “is” n’est qu’une convention de nommage qui permet d’indiquer que c’est une variable booléenne) que vous initialiserez à false. coderez une boucle dans laquelle vous demanderez à l’utilisateur de saisir son mot de passe avec la fonction window.prompt() TANT QUE la variable isAuth est à false. Cette boucle devra également comprendre un test qui permettra de passer à true la variable isAuth si le mot de passe saisi est le bon (c-à-d vaut "yesUcan") Afficherez un message de bienvenue dans une fenêtre (→ window.prompt()) dès que l’utilisateur aura saisi le bon mot de passe. Améliorer le script pour qu’il affiche dans la fenêtre de saisie le numéro de la tentative Voir le commentaire “5” du 1er exemple de la partie qui présente les fonctions window.alert(), window.prompt() et window.confirm() pour afficher un texte devant contenir la valeur d’une variable numérique. La 2ème structure itérative qu’il est important de connaître est la boucle for(…) {…}. Celle-ci est souvent utilisée pour les boucles dont on connait à l’avance combien de fois il faut les répéter mais ce n’est pas sa seule utilisation. Plutôt que de donner sa syntaxe, voici directement un exemple : for( i = 0; i < 10; i = i + 1) { window.alert("Ceci fait " + (i+1) + " fois que la boucle est exécutée."); } Cet exemple, lors de son exécution, va afficher successivement 10 fenêtres dans lesquelles sera affiché un texte indiquant le nombre de fois que la boucle a été exécutée. Voyons maintenant à quoi correspond ce qui est contenu dans les parenthèses qui suivent le for : i = 0 → expression qui va permettre d’initialiser la variable qui va servir à contrôler le nombre de fois où la boucle doit s’exécuter. Cette instruction ne sera exécutée qu’une fois au 1er “lancement” de la boucle. i < 10 → expression qui sera évaluée avant tout passage dans la boucle et qui permettra de déterminer si elle doit être exécutée ou non. Autrement dit, dans notre exemple, la boucle sera exécutée TANT QUE la valeur de la variable i sera inférieure strictement à 10. i = i + 1 → expression qui sera exécutée implicitement juste avant la fin de CHAQUE boucle (c-à-d entre window.alert() et l’accolade fermante du bloc dans notre exemple). C’est elle qui va permettre de faire évoluer la variable qui permet de contrôler la boucle. L’expression i = i + 1 sera souvent codée sous la forme simplifiée i++ mais cela signifie EXACTEMENT la même chose. C’est simplement une autre façon d’écrire. Une autre façon d’écrire cette boucle serait d’uiliser la structure itérative while(){…} : var i = 0; while( i < 10 ) { window.alert("Ceci fait " + (i+1) + " fois que la boucle est exécutée."); i = i + 1; } Ceci aurait EXACTEMENT le même comportement que la boucle for mais nécessiterait 2 lignes de plus. Une chose reste à savoir pour les boucles : quel que soient leur type, il est toujours possible d’en forcer la sortie grâce à l’instruction break. Ci-dessous un exemple d’illustration. Celui-ci consiste à demander 3 fois au maximum la saisie d’un code PIN pour s’authentifier : var codePIN = 1789; for(nbTentatives = 0; nbTentatives < 3; nbTentatives++) { var saisie = window.prompt("Saisir le code PIN"); var code = parseInt(saisie, 10); if( code === codePIN ) { break; (1) } } if(nbTentatives < 3) { (2) window.alert("Authentification réussie après " + (nbTentatives+1) + " essais"); } else { window.alert("Nombre maximal de tentatives atteint. Mobile bloqué par code PUK."); } 1 Si le code PIN saisi est le bon, il est inutile de poursuivre la boucle donc on force son arrêt et le code continue son exécution à partir de la ligne qui suit la fin de boucle 2 En sortie de boucle, si la variable nbTentatives est strictement inférieure à 3 c’est qu’on est sorti à cause du break et donc que le code PIN a été trouvé avant l’atteinte du nombre maximal de tentatives autorisées. 🖮 Travail n° 11 : Mise en œuvre de la boucle for. Coder un script script04.js à intégrer dans une page web et dont l’objectif est de faire deviner à l’utilisateur en moins de 10 tentatives un nombre aléatoire compris entre 0 et 100 généré par l’ordinateur (c’est-à-dire choisi au hasard). Consignes Le nombre aléatoire sera généré avant la boucle avec le code suivant : var nombreMystere = Math.floor(Math.random() * 100); Vous utiliserez une boucle for pour contrôler les tentatives Vous indiquerez à l’utilisateur à chaque passage dans la boucle — on dit aussi itération — si le nombre qu’il a saisi est plus petit ou plus grand que le nombre aléatoire En cas de réussite, vous forcerez la sortie de la boucle et indiquerez en combien de tentatives l’utilisateur à trouvé le nombre aléatoire. En cas d’échec, vous informerez l’utilisateur du nombre qu’il aurait dû deviné. Les fonctions utilisateur Jusqu’à présent, vous avez utilisé des fonctions proposées par Javascript. Cependant, il est très fréquent et même recommandé de décomposer votre code source en fonctions renfermant les traitements de vos scripts : vous y gagnerez en lisibilité, modularité, réutilisabilité, maintenance de code. Pour distinguer ces fonctions qui vous sont propres des fonctions standard de Javascript, on les appelle parfois des fonctions utilisateur. Une fonction se définit dans un bloc introduit par le mot clé function suivi du nom de la fonction et de la liste de ses paramètres entre parenthèses séparés par des virgules. Les paramètres correspondent aux informations dont la fonction a besoin pour réaliser le traitement dont elle a la charge. Le déroulement d’une fonction se termine par une instruction return qui retourne le résultat du traitement attribué à cette fonction. Exemple d’un script qui utilise une fonction utilisateur pour calculer la circonférence d’un cercle dont le rayon est fourni par l’utilisateur : /** * Calcule la circonférence d'un cercle à partir de son rayon passé en paramètre */ function calculerCirconference(leRayon) { (1) var circ; // Calculer la circonférence à partir de la formule 2.π.R circ = 2 * Math.PI * leRayon; // Retourner la circonférence return circ; } var rayon; var perimetre; // Demander la saisie d'un nombre rayon = parseFloat( window.prompt("Saisir le rayon du cercle (cm)")); // Appeler la fonction qui calcule la circonférence à partir de son rayon circonference = calculerCirconference(rayon); (2) // Afficher le résultat window.alert("La circonférence d'un cercle de rayon " + rayon + "cm vaut " + circonference.toFixed(2) + "cm." (3) ); 1 On définit la fonction dont le rôle est de calculer la circonférence d’un cercle à partir de son rayon. Ce code ne sera exécuté que lorsque la fonction sera appelée. 2 On appelle la fonction en lui fournissant le rayon du cercle qui est contenu dans la variable rayon. La valeur retournée par la fonction sera stockée dans la variable circonference. 3 On affiche la circonférence du cercle. On voit ici qu’une variable, tout comme l’objet Math, dispose de ses propres fonctions. Ici, l’appel de la méthode toFixed(2) à partir de la variable circonference permet d’obtenir en retour un arrondi de sa valeur à 2 chiffres après la virgule (la variable elle-même n’est pas modifiée et garde donc toute sa précision). La variable leRayon utilisée dans la définition de la fonction est parfois appelée paramètre formel tandis que la variable rayon utilisée lors de l’appel de la fonction est appelée paramètre effectif ou argument. Même si c’est possible, interdisez-vous de nommer les variables qui servent de paramètres effectifs avec les mêmes noms que les paramètres formels. Vous auriez alors 2 variables qui portent le même nom mais qui ne désignent pas le même emplacement mémoire. Comme c’est toujours difficile de trouver un “bon nom” pour une variable ou un paramètre, une convention assez répandue consiste à préfixer le nom des paramètres formels par le/la/les en français ou simplement the en anglais (d’où le nom leRayon pour le pramètre formel de la fonction dans l’exemple). Le paramètre formel leRayon n’est connu que dans le bloc de définition de la fonction. Un paramètre formel doit être assimilé à une sorte de variable locale à la fonction qui est affectée automatiquement avec l’argument fourni au moment de l’appel. Ainsi, dans l’exemple précédent leRayon prend la valeur de rayon lorsque Javascript exécute calculerCirconference(rayon). L’exemple ne le montre pas mais une fonction peut prendre plusieurs arguments. Vous avez déjà rencontré ce cas de figure avec la fonction Javascript parseInt() qui prend en 1er argument un chaîne de caractères représentant un nombre et un 2ème argument qui spécifie la base dans laquelle ce nombre est exprimé (Ex. : parseInt('1789', 10)) Javascript propose une autre façon de définir une fonction (→ function expression). Cette 2ème méthode est d’ailleurs plus souvent utilisée que celle qui vient d’être vue. Cependant, elle présente l’inconvénient d’obliger à définir la fonction dans le script avant la ligne où elle est appelée. C’est ce qu’on a fait ici mais la définition de la fonction aurait aussi bien pu apparaître en fin de script sans en empêcher le fonctionnement. 🖮 Travail n° 12 : Fonctions utilisateur. Coder un script script05.js, à intégrer dans une page web, dans lequel sera définie un fonction utilisateur calculerPrixTTC() qui calcule le prix TTC d’un article dont le prix HT sera fourni en argument. La valeur de la TVA sera de 20% dans un 1er temps. Tester la fonction en l’appelant directement depuis la console avec différentes valeurs → voir notamment ce qui se passe lorsqu’on passe une valeur farfelue comme un prix HT négatif, un booléen (true ou false), une chaîne de caractères… Faire évoluer la fonction pour que le taux de TVA soit également fourni en argument sous forme d’un pourcentage. Veiller à tester la validité du taux de TVA dans la fonction (c-à-d compris entre 0% et 100%). Si le taux de TVA n’est pas valide, la fonction retournera une valeur qui n’a pas de sens pour un prix (par exemple, -1 ou NaN). Rendre la fonction plus robuste en testant la validité de tous les arguments. En plus de la valeur de la TVA, tester également son type ainsi que celui du prix HT pour s’assurer que ce sont bien des nombres. Faire évoluer la fonction pour que si le 2ème argument est une chaîne de caractère qui vaut 'normal', 'alimentaire', 'médicament… le taux de TVA est automatiquement sélectionné. Voir par exemple “Quels sont les taux de TVA en vigueur en France et dans l’Union européenne ?” Pour ceux qui connaitraient ce qu’est un tableau en programmation, ceci est bien adapté pour répondre à la question. (voir la documentation MDN sur les tableaux Javascript ). Conclusion Voilà qui termine cette activité de découverte des concepts fondamentaux de la programmation en Javascript. Des éléments de correction figurent dans ce document PDF protégé par mot de passe (demander le mot de passe à l’enseignant). Pour un rendu correct du fichier .adoc contenu dans cette archive, l’ouvrir dans un navigateur web auquel on a ajouté l’extension Asciidoc. Vous avez (re)découvert : instructions, opérateurs mathématiques, variables, instructions de test et de boucle, fonctions (créées par l’utilisateur ou mises à disposition par Javascript ou un de ces modules)… Ces même concepts seront largement développés au cours de votre formation dans d’autres langages comme le C et le C++ qui constituent le cœur de votre apprentissage en programmation. Il est donc important d’en comprendre l’usage. La syntaxe sera parfois différente mais le fonctionnement sous-jacent sera identique. Il y a bien sûr beaucoup de sujets qui n’ont pas été abordés mais les grandes lignes ont cependant été exposées. Vous êtes désormais capable de coder vos propres programmes. N’oubliez pas que la programmation est une activité qui nécessite énormément de pratique. N’hésitez donc surtout pas à refaire chez vous les exercices proposés et même à les compléter en proposant des alternatives ou des évolutions. Les outils utilisés au labo d’informatique sont majoritairement gratuits. Vous n’avez donc aucune excuse pour ne pas les installer chez vous ! De plus, la programmation informatique — du moins à notre niveau — n’occasionne pas de dégâts irréversibles. Donc, osez expérimenter même si cela n’aboutit pas toujours : échouer c’est apprendre à réussir ! Dans l’activite suivante de cette séquence sur l’initiation à la programmation, vous allez utiliser une librairie Javascript qui va vous permettre, par programmation, de dessiner, créer des animations, … dans la fenêtre du navigateur internet et ce, de manière assez simple. Cette librairie, nommée P5.js, devrait rappeler des souvenirs à certains d’entre vous puisqu’elle reprend les mêmes concepts qu’un autre logiciel appelé Processing parfois utilisé en STI2D (P5.js est en fait un portage de Processing en Javascript). 🞄 🞄 🞄 🎯 Fiche de séquence Applications graphiques avec P5.js