CentraleSupélecDépartement informatique
Gâteau du Glouton
3 rue Joliot-Curie
F-91192 Gif-sur-Yvette cedex
TD 3 — jQuery

Ce TD utilise la page de présentation de l'appli web météo du TD1. Dans le premier exercice, vous allez simplement expérimenter avec jQuery. Dans le deuxième exercice, vous allez fabriquer des fichiers javascript pour des actions particulières.

1 - Sélecteurs et navigation

Vous allez pour cet exercice travailler sur la page principale de votre application meteo, directement avec le scratchpad ou dans la console: il s'agit simplement de jouer avec les concepts.

À l'aide de jQuery, donc, répondez aux questions suivantes :

  • Affichez le texte du titre de la page (balise <title>).
  • Combien y a-t-il de listes non ordonnées (éléments <ul>) dans votre page (demandez à jQuery) ? Et de balises <p> ? Et de balises <h1> ? Et de balises <h2> ?
  • Combien de listes non ordonnées portent un attribut "class" ?
  • En principe, vous devez avoir fait une page structurée. Elle est donc sensée contenir des balises de titres (headers) pour séparer vos sections. Typiquement, il doit s'agir de balises <h1> ou <h2>. À l'aide de jQuery, affichez les textes des titres en question.
    • Obtenez d'abord un objet jQuery qui liste les balises en question.
    • Utilisez la méthode .each() pour appliquer une fonction à chacun de ces éléments.
    • La fonction travaille avec l'objet this qui correspond à un élément de la collection. Il s'agit d'un objet DOM (et non pas jQuery). Le but de la fonction est d'afficher dans la console le texte de la balise.
    • Mais rappelez-vous que l'on ne peut pas directement utiliser .text() sur un élément DOM: il faut d'abord l'encapsuler en un objet jQuery.
  • Modifiez la couleur des titres de vos sections lorsque le curseur passe dessus.
    • Refabriquez un objet jQuery qui liste les balises en question.
    • Les événements souris sont présentés ici. Vous pouvez par exemple utiliser la méthode .mouseenter().
    • Donnez-lui à manger une fonction qui change le style de l'éléments, avec .css().
    • Si vous voulez rechanger le style quand la souris quitte l'élément, utilisez soit .mouseleave(), soit en un seul coup .hover() (allez voir la doc).

2 - Montrer et cacher des éléments.

Dans cet exercice, nous allons compléter l'application météo commencée au TD1. L'objectif à terme est d'avoir les valeurs que vous avez entrées à la main directement envoyées par le serveur.

Dans un premier temps, et c'est l'objectif de ce TD, 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 jQuery. Nous allons commencer par éditer le fichier html pour cela.
    • Encadrez les chacune des valeurs qui devraient être dynamiques par une balise <span>. Donnez à ces balises la classe contenu
    • Encadrez les unités par une autre balise <span>. Donnez à ces balises la classe unite
    • 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:
<ul>
  <li>Température: -42 C</li>
  <li>Pression: 1 bar</li>
  <li>Vent: 100 km/h</li>
</ul>

On souhaite avoir cela:

<ul>
  <li class="contenant" id="temp">Température: <span class="contenu">-42</span> <span class="unite">C</span></li>
  <li class="contenant" id="pression">Pression: <span class="contenu">1</span> <span class="unite">bar</span></li>
  <li class="contenant" id="vent">Vent: <span class="contenu">100</span> <span class="unite">km/h</span></li>
</ul>
  • Ajoutez dans l'entête de votre fichier html une balise <script> qui pointe 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
cacheTout();

cela doit tout enlever. Puis (dans le cas de l'exemple qui précède) si vous faisiez

montre(["temp", "vent"])

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 les unités. On se restreint ici à la température et au vent pour simplifier, mais dans un deuxième temps vous pouvez faire plus !

  • Dans votre fichier javascript, créez une table d'association comme dans l'exemple suivant:
var unitesPossibles = {
  temp : ["C", "F", "K"],
  vent : ["km/h", "m/s"],
}

Cette table va contenir les choix possibles pour les unités. Évidemment, je donne une table pour l'exemple du dessus. Faites pour votre cas de figure.

  • Ajoutez une autre table, qui contient les indices des unités choisies. Par exemple:
var unitesChoisies = {
  temp : 0,
  vent : 1
}

Donc on veut des températures en Celsius et un vent en mètres/seconde.

  • Finalement, il faut une dernière table qui contient les valeurs courantes des mesures. On prend la convention que la valeur est dans l'unité indiquée par l'indice 0 (donc ici: Celsius et km/h).
var valeursCourantes = {
  temp : -42,
  vent : 100
}
  • 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.
    • Pour passer de Celsius en Fahrenheit, la formule est TF = TC x 9/5 + 32
    • Pour passer de Celsius en Kelvin, la formule est TK = TC + 273,15
    • Pour passer de km/h en m/s... Voyons, vous devriez savoir faire.
    • Il faut donc changer les textes (avec la fonction .text("nouveau texte")) des balises <span>, charactérisées par le nom de leur classe. Par exemple, pour changer le texte "km/h", il faut accéder à la balise <span> dans la classe "unite" qui est fille (.children()) de la balise avec l'identifiant "vent".
    • En principe, si dans la console vous modifiez les valeurs, par exemple:
valeursCourantes.temp = 23
valeursCourantes.vent = 15
unitesChoisies.vent = 0
afficher()

cela doit changer les unités et les valeurs en conséquence.

Conclusion

On peut donc maintenant "à la main" dans la console javascript changer ce qui est afficher sur la page. Pour aller plus loin, il faut pouvoir

  • Interpreter un format lisible qui contiendrait les valeurs à mettre : Dans le TD4, nous verrons des formats standards.
  • En obtenir des à jour depuis un site de service météo : c'est ce que nous ferons lors du TD5.
  • Finalement, il faut pouvoir récupérer depuis la page de configuration ce qu'il faut afficher (ou pas), et dans quel format: c'est l'objectif du TD6, en créant un "vrai" serveur avec NodeJS.

4 - Optionnel: construisez un menu

Toujours dans la même page web, et à l'aide de jQuery :

  • Juste avant la première balise header (donc soit h1, soit h2, suivant votre cas), créez une nouvelle balise header avec comme texte Sommaire, suivie d'un élément de type liste ("ul") ayant pour identifiant "jQuery".
    • Pour pouvoir s'assurer que tout se passe bien, ajoutez un item (<li>) à la liste (<ul>), avec du texte: on doit donc avoir un nouveau titre h1 "Sommaire", une liste avec un seul item, puis le titre h1 "Introduction".
    • Utilisez la commande $("<nombalise>") pour créer des nouveaux noeuds: placez les bons attributs, les bons fils... Puis seulement quand vous avez fini ajoutez-la à l'arbre.
    • Éventuellement si vous avez une feuille de style CSS compliquée, assurez-vous que cela soit lisible en ajustant le style CSS de l'ensemble -- et en l'incluant dans un <div> éventuellement.
    • Utilisez les commandes d'insertion de noeuds .before() et .after() pour placer des noeuds au même niveau qu'une balise donnée.
  • Dans la liste que vous venez de créer, créez des items ("li") contenant le texte de chacun des titres de niveau 1 de la page.
    • Que se passe-t-il si vous appliquez plusieurs fois la génération du sommaire ?
  • Ajoutez à la main des identifiants (uniques !) à chacun des titres "h1".
  • Comment peut-on obtenir les identifiants de chacun des titres "h1" de la page avec jQuery?
  • Transformez chaque item du menu que vous venez de créer en lien hypertexte vers la section correspondante.
  • Plutôt que d'ajouter les identifiants à la main, auriez-vous pu le faire automatiquement avec jQuery ?

Attention

Un identifiant ne peut pas commencer par un chiffre.

Rappel

Pour qu'un lien hypertexte pointe vers un élément à l'intérieur d'une page web, il suffit de donner un identifiant à l'élément en question. La référence du lien doit alors être "#identifiantElement". Par exemple, pour l'élément

<p id="monPara">Voici mon paragraphe.</p>

on utilisera le lien suivant :

<a href="#monPara">Lien vers mon paragraphe</a>.

Encore une fois, assurez-vous de générer des nom d'identifiants uniques...

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...

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Météo</title>
  </head>
  <body>
    <header>
      <h1>La météo de Gif-Sur-Yvette</h1>
    </header>
    <div id="menu">
      <ul>
        <li><a href="config.html">Configuration</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>
    <div id="main">
      <section>
        <h2>La ville</h2>
        <p>Gif-sur-Yvette (prononcé [ ʒif syʁ ivɛt̪] ) est une commune
          française située à vingt-quatre kilomètres au sud-ouest de
          Paris dans le département de l’Essonne en région
          Île-de-France. Elle est le chef-lieu du canton de
          Gif-sur-Yvette. Du village celte installé sur le plateau du
          Moulon au VIe siècle av. J.-C. à l’abbaye bénédictine fondée
          au XIIe siècle, Gif fut très tôt un site agricole et
          spirituel important du Hurepoix. Implantée dans une vallée
          de Chevreuse verdoyante et reliée dès le milieu du XIXe
          siècle à la capitale par le chemin de fer, la commune devint
          un lieu de villégiature pour les bourgeois et les artistes,
          tels Juliette Adam, Fernand Léger ou le duc de Windsor. La
          seconde moitié du XXe siècle vit l’évolution rapide de la
          commune avec l’implantation d’importants centres de
          recherche et de formation scientifique, au nombre desquels
          le CNRS ou Supélec, et le lotissement « à l’américaine » du
          plateau sud avec la création du nouveau quartier de Chevry,
          multipliant par trois sa population. Celle-ci devrait encore
          s'accroître dans les années à venir avec la réalisation
          d'une opération d'aménagement dans le quartier de Moulon,
          qui prévoit la construction de logements et de grandes
          écoles dans le cadre du projet de pôle technologique
          Paris-Saclay. Ses habitants sont appelés les Giffois. </p>
      </section>  
      <section>
        <h2>Une carte</h2>
        <img width="200px" src="http://www.cartes-de-france.fr/carte/carte_de_france_relief.gif">
      </section>
      <section>
        <h2>Les données actuelles</h2>
        <ul>
          <li>Température : 12 degrés</li>
          <li>Couverture nuageuse : gris foncé</li>
          <li>Vent : 40 km/h</li>
          <li>Visibilité : 5 mètres </li>
          <li>Pression : 4 bars</li>
        </ul>
      </section>
    </div>
    <footer>
      <address>Gateau du Glouton Inc. Corp.</address>
    </footer>
  </body>
</html>