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 bienscript.js
, et que cela correspond bien à un fichier de votre site dans Repl.it. - Ajouter dans le fichier de script
script.js
un appelconsole.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ènementclick
... - 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'attributstyle
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 classecontenu
- 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:
- Encadrez chacune des valeurs qui devraient être dynamiques par une balise
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 classecontenant
(utilisez un style CSS par exemple). - Écrivez une fonction
montre()
qui prend en argument une liste destring
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'exemplevaleurCourantes.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:
- On accède au champ d'une table d'association avec la le point "
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 fichierconfig.html
, que nous traiterons plus tard. Il s'agit donc des valeurs qui seraient à placer dans la variable globalestatutSurLaPage
.
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
(oustatus
) vaut 0, on veut cacher le champ en question, le montrer sinon.
À faire
- Écrivez une fonction
litConfig()
qui lit le fichier json avecfetch()
, récupère les données, mets à jour la variable globalestatutSurLaPage
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
- Allez sur la page https://home.openweathermap.org/users/sign_up, créez-vous un compte et obtenez votre propre ID.
- 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.
- Changez la langue utilisée pour les réponses: par exemple, en français. La doc du service est là.
- Le serveur donne beaucoup d'informations: Pouvez-vous trouver la température, la pression, le vent, l'humidité, la couverture nuageuse ?
- Un champ "icon" pointe sur une icone résumant le temps : Voir la doc ici.
- Dans votre application météo, réalisez une fonction
litDonnees()
pour effectuer un appel AJAX avecfetch()
à 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
- la lecture de la configuration
- la lecture des données
- 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...