Projet | ​​​​​Mini projet - Web |  ​HTML & JS - Importer et afficher une donnée

Contexte

Nous construisons une page web. Elle importe et affiche dans le navigateur, une donnée enregistrée dans un autre fichier au format texte.
​Il importe que la page et le fichier soient enregistrés sur un même serveur. Nous pourrons utiliser celui-ci ou serveur local sous Xampp par exemple.

La composition de la page web nécessite l'usage d'un code javascript.

HTML & JS - Importation et affichage

  1. Construire une page html comportant un élément <p> et l'enregistrer sur le serveur.
  2. Construire un fichier texte contenant un nombre puis l'enregistrer sur le serveur également.
  3. Lire ce blog. Intégrer le script au code html et l'adapter. Le ​télécharger si difficulté.
  4. Réaliser l'essai et s'assurer de la conformité de la donnée affichée au nombre enregistré sur la page-web. Changer le nombre et s'assurer de la synchronisation entre les deux fichiers.

HTML - Affichage graphique

On affiche maintenant la donnée graphiquement. On pourra utiliser la balise <meter> détaillée sur le site w3Schools.com
  1. Compléter le code html afin d'ajouter l'indicateur graphique.
  2. AJouter le code Javascript document.getElementById("met").value=data; en bonne place et identifier l'élement <meter> avec l'attribut id afin de les relier.
  3. Réaliser l'essai et s'assurer de la cohérence de l'affichage au nombre de la page-web.

HTML - Affichage stylisé d'un chiffre

On édite l'unité du nombre enregistré dans le fichier le fichier texte, avec des chiffres stylisés empruntés au web. L'utilitaire Irfanview traite tous les formats d'images.

  1. Réaliser la recherche des images sur le web et les enregistrer dans un répertoire sous le nom d0.png pour le 0, d1.png pour 1, etc... On veillera à ce que les images mesurent la même hauteur ou construire les fichiers à partir à partir de cette image.
  2. Ajouter la déclaration de la fonction javascript jointe ci-contre, en fin de script. Cette fonction définira l'image du chiffre à afficher qui sera identifiée par l'attribut id="uni"
  3. AJouter l'intruction dispNum(); à la suite de la ligne 12 du segment javascript, afin d'appeler cette fonction périodiquement.
  4. Ajouter une image dans l'élément <body> et l'identifier avec l'attribut  id="uni"
  5. Réaliser l'essai dans le navigateur. L'unité du nombre du fichier distant sl.txt doit s'afficher en place de l'image.

HTML - Affichage stylisé d'un nombre

C'est le nombre enregistré dans le fichier texte que nous affichons maintenant sur la page web. 

  1. Ajouter une image pour les dizaines et compléter son attribut id.
  2. Compléter la fonction dispNum() afin que l'image des dizaines soit correcte. Note : l'instruction digit=Math.floor(data/10) % 10; affecte le chiffre des dizaines de la variable data à la variable digit.

élément <meter>

HTML offre une façon simple d'éditer graphiquement un nombre.

Fonction javascript

function dispNum() {
   var digit = data % 10;
   var adDigit= "./d" + digit + ".png";
   document.getElementById
           ("uni").src = adDigit;
 }