L'objectif de ce TD est de se familiariser avec le langage javascript.

Pour commencer:

• Les slides du cours sont ici : Javascript, JSclient, XML&JSON et AJAX
• Consulter les tutos Javascript, JSclient, DOM, XML&JSON, Validation XML et AJAX
• Ayez à portée de main la documentation de JavaScript sur Mozilla Developper Network

Pour réaliser les exercices

Il vous faut au minimum une console javascript. Tous les navigateurs en proposent une avec les outils de développement.

Avec Firefox, puisque c'est notre outil par défaut, pour ouvrir la console javascript: Control-Shift-K, ou dans le menu: "outils de développement web" puis "console".

Sinon, avec Repl.it, la zone noire en bas à droite est la console javascript de la page. Cela peut être pratique... ou pas. Je vous conseille d'ouvrir votre site dans une vraie fenêtre de votre navigateur et d'utiliser la console du navigateur.

1 - Prise en main de Javascript

1.1 - JavaScript dans une page web

Nous allons utiliser JavaScript pour interragir avec la page web index.html de votre application.

Si vous pensez que votre page n'ira pas pour l'exercice

Vous trouverez en bas de cette page un exemple de fichier HTML. Vous pouvez bien sûr l'incorporer à votre page le cas échéant.

1.1.1 - Premiers pas

• Dans la page HTML (index.html), vérifier que la source de la balise de script est bien script.js, et que cela correspond bien à un fichier de votre site dans Repl.it.
• Ajouter dans le fichier de script script.js un appel console.log("le code javascript s'exécute"); et assurez vous que lorsque la page se charge cela apparait dans la console du navigateur.
  • Félicitation, vous avez une page dynamique !

1.1.2 - Interception d'un événement

Quelque part dans votre page index.html, vous avec mis une phrase en rapport avec la température. Cette phrase doit se trouver entre deux balises : <li>, <dl>, <p> (cela dépend de votre code!)

Déclenchez l'affichage de la phrase "Le paragraphe a été cliqué" dans la console web lorsque l'utilisateur clique sur le paragraphe en question

• Utilisez l'attribut onclick qui capture l'évènement click...
• Ensuite, essayez de le faire en javascript pur.
  • Allez voir la slide du cours

Note

Vous pouvez faire cela dans la console du navigateur: ce ne sera pas pérenne: au rechargement de la page cela sera perdu. Si vous le faites plutôt dans script.js, cela sera pérenne et fonctionnera même après rechargement de la page.

1.1.3 - Accès au document

Afficher dans la console web l'objet document de la page web "index.html". Pour que ce soit intéressant, ouvrez bien la page index.html de votre repl dans une fenêtre dédiée, et ouvrez la console javascript de firefox.

Attention

On ne peut manipuler le contenu d'une page que lorsque cette page est entièrement chargée, ce qui n'est pas le cas lorsque le JavaScript commence à s'exécuter si la balise script est en début de page. En revanche la fonction désignée par onload est justement appelée lorsque le chargement de la page est terminé... Ou il faut bien mettre la balise de script à la fin.

1.2 - Utiliser DOM avec JavaScript

1.2.1 - Accès au contenu du document

Afficher dans la console web la valeur de l'élément <title> de la page web "index.html".

• Vous pouvez aller le chercher "à la main" en parcourant l'arbre
• Ou directement avec getElementsByTagName (sachant que cette fonction renvoie une collection)

1.2.2 - Modifions la page !

Plutôt que de juste afficher un message dans la question 1.1.2, changer le style de la balise en question.

• Utilisez par exemple setAttribute pour définir l'attribut style des éléments qui vous intéressent.
• N'oubliez pas les points-virgules à la fin. Par exemple, voila un style potentiel:

2 - Montrer et cacher des éléments.

Comme dit plus haut : Si vous pensez que votre page n'ira pas pour l'exercice

Vous trouverez en bas de cette page un exemple de fichier HTML. Vous pouvez bien sûr l'incorporer à votre page le cas échéant.

À faire

On va ici commencer à rendre le site dynamique: Certains éléments doivent pouvoir être cachés ou montrés, et les valeurs telles que la température doivent pouvoir être changées.

Dans un premier temps, et c'est l'objectif de cet exercice, nous allons simplement les faire modifier par des fonctions javascript en local.

• Tout d'abord, les valeurs (températures, pression, etc) que vous avec entrées à la main ne sont peut-être pas facilement accessible avec javascript. Nous allons commencer par éditer le fichier html pour cela.
  • Encadrez chacune des valeurs qui devraient être dynamiques par une balise <span>. Donnez à ces balises la classe contenu
  • Les valeurs peuvent être affichées, ou pas (c'est l'objectif de la page de configuration). Pour chaque balise qui contient la donnée et sa description, donnez la classe contenant et un identifiant unique.
  • Par exemple, si vous aviez cela:

On souhaite avoir cela:

• Vérifiez qu'une balise <script> se trouve à la fin du fichier html et pointe bien sur un fichier javascript (avec l'extension .js) dans le même répertoire.
• Le reste de l'exercice se fait en éditant ce fichier javascript.
• Écrivez une fonction cacheTout() qui cache toutes les balises de la classe contenant (utilisez un style CSS par exemple).
• Écrivez une fonction montre() qui prend en argument une liste de string et qui affiche les balises qui ont les identifiants en question.
• Testez vos fonctions dans la console de votre navigateur.
  • Par exemple, si vous faites

cela doit tout enlever. Puis (dans le cas de l'exemple qui précède) si vous faisiez cela devrait réafficher uniquement la température et le vent.

3 - Modifier l'arbre de la page à la volée.

Nous allons maintenant parametrer ce qui doit être affiché. On se restreint ici à la température et au vent pour simplifier, mais dans un deuxième temps vous pouvez faire plus !

• Créez une table qui stocke ce qui doit être montré, comme ceci:

La valeur 1 indique que la température sera montrée, et 0 que le vent et la pression seront cachés.

• Créez une table qui contient les valeurs courantes des mesures. On part du principe que les unités de mesure sont correctes par rapport à l'affichage.

• On veut maintenant une fonction afficher() qui prend ces différents éléments et qui change les valeurs de la page en conséquence.
  • On accède au champ d'une table d'association avec la le point ".", par exemple dans l'exemple valeurCourantes.vent vaut -42.
  • Il faut donc changer les textes (avec element.innerHTML = "nouveau texte") des balises <span>, charactérisées par le nom de leur classe.
  • En principe, si dans la console vous modifiez les valeurs, par exemple:

cela doit changer les valeurs en conséquence.

4 - AJAX

Dans l'exercice précédant, vous aviez deux variables javascript locales à la page pour savoir ce qui devait être affiché, et quel était la valeur en question. La page était ensuite modifiée à l'aide d'une fonction afficher() qui utilisait ces variables.

Nous allons voir comment récupérer ces valeurs depuis des sources externes.

4.1 - Accès à des données JSON statiques avec JavaScript

• On fournit la donnée JSON suivante, à mettre dans un fichier pref.json et qui contient les préférences qui sont sensées correspondre au fichier config.html, que nous traiterons plus tard. Il s'agit donc des valeurs qui seraient à placer dans la variable globale statutSurLaPage.

L'objectif est de récupérer ce fichier à l'aide de la fonction fetch, de changer les valeurs de la variable globale statutSurLaPage et d'afficher ou de cacher ce qu'il faut.

• Si state (ou status) vaut 0, on veut cacher le champ en question, le montrer sinon.

À faire

• Écrivez une fonction litConfig() qui lit le fichier json avec fetch(), récupère les données, mets à jour la variable globale statutSurLaPage et affiche/cache les champs ad-hoc.
• Testez votre fonction dans la console:
  • Modifiez le fichier JSON avec un éditeur de texte
  • Lancez votre fonction
  • Affichez la variable et vérifiez que cela s'est mis à jour

4.2 - De la météo en direct.

Dans cet exercice, nous allons récupérer les informations depuis internet, en utilisant un service météo.

Voici un code minimal faisant un appel à un service météo (essayez-le!) Vous allez essentiellement vous en inspirer pour compléter votre application météo. .

L'objectif est de réaliser une variant de la fonction litConfig() pour récupérer les données en faisant un appel à openweathermap, comme dans l'exemple.

À faire

1. Allez sur la page https://home.openweathermap.org/users/sign_up, créez-vous un compte et obtenez votre propre ID.
2. Changez l'ID pour la votre dans le repl exemple. Assurez-vous que cela marche toujours. Note: l'ID peut mettre un certain temps avant d'être utilisable. Dans l'interval, vous pouvez utiliser celui de l'exemple.
3. Changez la langue utilisée pour les réponses: par exemple, en français. La doc du service est là.
4. Le serveur donne beaucoup d'informations: Pouvez-vous trouver la température, la pression, le vent, l'humidité, la couverture nuageuse ?
5. Un champ "icon" pointe sur une icone résumant le temps : Voir la doc ici.
6. Dans votre application météo, réalisez une fonction litDonnees() pour effectuer un appel AJAX avec fetch() à openweathermap. Quid des unités des valeurs numériques ?

4.3 - Utilisons les deux informations à la fois

L'idée maintenant est d'avoir les deux fichiers en même temps. Problème : on veut s'assurer que la variable statutSurLaPage a bien été mise à jour avant d'envisager d'appeler la fonction affichage(). Mettre cote à cote les deux appels à fetch ne résoudra pas le problème: chacun des appels est asynchrone. C'est le propre de la programmation événementielle: Il faut donc forcer la séquencialité des choses.

Une manière de faire est d'utiliser la compositionalité de la méthode .then() des promesses.

À faire

Réalisez une fonction litConfigDonnee() fait en séquence

1. la lecture de la configuration
2. la lecture des données
3. l'affichage

Il s'agit simplement de chainer les fonctions à l'aide de .then().

Attention

La méthode .then() prend nécéssairement une fonction en argument... Par exemple, si on définit qui attend le temps demandé avant de faire le contenu du .then() qui suivrait, les deux choses suivantes n'ont pas le même comportement: et

Conclusion

Nous avons donc (presque) une application complète: il ne manque plus qu'à mettre en fonctionnement la page de configuration. Ce sera l'objectif du TD de jeudi, avec la mise en oeuvre d'un micro-service web.

Appendix - Exemple de page à utiliser

Si vous n'êtes pas sûr de la page principale de votre application météo, ou si vous pensez qu'elle ne correspond pas à l'exercice, en voici une particulièrement simple (sans CSS) mais qui devrait faire l'affaire. Évidemment, les liens ne marcheront pas...