tete du loic

 Loïc YON [KIUX]

  • Enseignant-chercheur
  • Référent Formation Continue et alternance ingénieur
  • Responsable de la filière F2 ingénieur
  • Secouriste Sauveteur du Travail
mail
loic.yon@isima.fr
phone
(+33 / 0) 4 73 40 50 42
location_on
Institut d'informatique ISIMA
  • twitter
  • linkedin
  • viadeo

HTML5 / Tout doux

Date de première publication : 2016/05/03

Le but de cet exercice est de faire une liste de choses à faire. La liste doit être sauvegardée en local par le navigateur.

La liste contient

Une liste éditable

Pour l'exercice, il faut une page avec les composants suivants :

Voici un peu d'aide si vous voulez que la touche ENTREE soit prise en compte et que vous ne voyez pas comment faire :

Pour pouvoir ajouter un élément en appuyant sur la touche ENTREE, il faut mettre un formulaire sur la page et que le bouton d'ajout soit un bouton de type submit. Bien entendu, il faudra désactiver le comportement par défaut car on ne veut pas de rechargement de page.

Pour ajouter un élément, il suffit de le taper dans le champ texte mais il est aussi possible d'appuyer sur entree dans la liste.

Pour compter le nombre d'éléments de la liste, il est possible de compter le nombre d'enfant(s) ou de jouer avec les sélecteurs comme par exemple :

document.querySelectorAll("#liste > li").length
document.getElementById("liste").childNodes.length

Ajout de la persistance

HTML5 propose l'objet localStorage. Si l'objet est disponible, voilà les méthodes qui vous intéresseront :

clear()
Effacer la zone mémoire locale
getItem(clé)
Récupère la valeur locale associée à la clé donnée en paramètres
setItem(clé, valeur)
Changer la valeur locale associée à la clé

Pour la sauvegarde, je vous propose d'y aller franchement avec le innerHTML de la liste. Une autre possibilité est d'utiliser l'objet JSON et la méthode stringify()

L'appel à localStorage se fait naturellement :

Interaction avec un "web service"

Ajouter un bouton pour aller chercher en AJAX une action à faire disponible à l'adresse https://perso.isima.fr/loic/html/afaire.php. La page renvoie du texte simple (plain text). Cela ne devrait pas marcher pour une erreur de limitation de domaine (afaire_cors.php va marcher)

Voici le bout de code que j'avais donné dans le cours jQuery et que je vous laisse adapter :

function texte_a_recuperer() {
   $.ajax({
   url : "html.php",
   complete : function (xhr, result) {
     if (result!= "success") return;
     var response = xhr.responseText;
     $(response).appendTo("body");
     }
   });
}

Je laisse tomber XMLHttpRequest() à cause de la détection du navigateur que l'utilisation de cette fonction induit. Voici un morceau de code de la fonctionnalité Fetch

function texte_a_recuperer() {
	fetch("https://perso.isima.fr/loic/html/afaire_cors.php")
    .then(function(response) {
 		if(response.ok) {
 		 	return response.text();
  		} else
  		    throw new Error('Network response was not ok.');
	})
	.then(function(texte) {
     		console.log(texte);
	});

Cette fonctionnalité utilise des "promesses" (Promises).

Aller plus loin ...

Pour éviter les bogues, on peut enlever le caractère d'éditabilité de la liste quand elle est vide !