On repart de notre site de la semaine dernière, une page web interactive avec du javascript.
Étape 0 : Correction des questions pour aujourd’hui
Dans la fonction ajouterContenu()
, on crée quatre nouvelles lignes :
// 0. Corrigé du travail donné la dernière fois function ajouterContenu() { let contenu = prompt("Tape ici le contenu"); let articleElt = document.createElement("article"); let titreElt = document.createElement("h2"); titreElt.innerText = "Titre du nouveau contenu"; articleElt.appendChild(titreElt); let sectionElt = document.querySelector("section"); sectionElt.appendChild(articleElt); //créer un paragraphe let paraElt = document.createElement("p"); //y mettre le contenu paraElt.innerText = contenu; // mettre la classe "special" au paragraphe paraElt paraElt.setAttribute("class", "special"); // ou paraElt.className = "special"; //et ajouter le paragraphe dans l'article articleElt.appendChild(paraElt); }
Aujourd’hui, on voudrait que la page se souvienne de nos ajouts !
Une démo en cliquant ici.
Warning :
- les choix de structures et de boucles que j’ai fait ne sont pas optimaux en javascript, mais c’est un choix pédagogique assumé pour lier le truc avec python.
- D’autre part, l’idée, c’est de « comprendre un max de choses » sur le code proposé, et pas forcément de produire du code. On est borderline quant au programme, mais puisque vous avez accroché pour la plupart avec le javascript et les pages web dynamiques…
- on ne fait pas un stockage optimal : juste dans la mémoire du navigateur, et limité. Il y a mieux !
- au niveau local, des cookies,
- au niveau serveur, une base de données… mais là il nous faudra un langage serveur comme php. Et parler de sécurité…
- on en reparle d’ailleurs la semaine prochaine, c’est pleinement au programme.
On y va étape par étape !
Suivez le guide et la console de développement web !
Étape 1 : une fonction de chargement ?
// 1. A l'ouverture de la page,ou plutôt à la fin du chargement, // ce qui correspond à l'événement "load", appeler une fonction « charge() » function charge() { console.log("fonction charge() appelée"); } window.addEventListener("load", charge); // fin du 1. -> test
Étape 2 : que cette fonction cherche dans le « localStorage » !
// 2. DANS la fonction charge() : // Récupération de la valeur dans web storage var sauv = localStorage.getItem('sauv_users'); if(sauv != null) { console.log('On a trouvé une sauvegarde dans le localStorage'); console.log(sauv); } else { console.log("On n'a pas trouvé de sauvegarde dans le localStorage."); console.log("On l'initialiser pour notre utilisateur."); } // fin du 2. -> test
Étape 3 : un tableau d’utilisateurs qu’on remplit
// 3. a. Au tout début du script, on crée un tableau vide // qui sera rempli pour chaque utilisateur var tableauUtilisateurs = []; // 3. b. Au dessus de la fonction charge, // Une nouvelle fonction qui va rajouter un utilisateur inconnu dans notre liste function rajouteNouvelUtilisateur(nom) { // création d'un objet (un peu comme un dictionnaire) qui sera notre utilisateur let obj = {pseudo : nom, liste : []}; // on le rajoute à la liste d'utilisateurs tableauUtilisateurs.push(obj); // push un peu comme append en python // on vérifie dans la console console.log(tableauUtilisateurs); } // 3. c. Dans le else du test précédent dans la fonction charge(), // juste après le « console.log("On l'initialiser pour notre utilisateur."); », // l'initialisation en question pour le nouvel utilisateur : // on ajoute un nouvel utilisateur au tableau avec cette fonction rajouteNouvelUtilisateur(nom); // fin du 3. -> test et bien vérifier dans la console
Étape 4 : enregistrer le contenu qui a été saisi dans notre tableau
// 4. a. On crée une fonction qui va rajouter le contenu saisi // à une liste pour qu'on puisse le sauvegarder afin de le retrouver ensuite // au dessus de la fonction function rajouteDansLaBonneListe(contenu){ // On parcourt le tableau d'utilisateurs // for (let i = 0; i < tableauUtilisateurs.length; i++) { // On récupère l'objet en cours pour simplifier let obj = tableauUtilisateurs[i]; // si c'est le bon on rajoute le contenu if (obj.pseudo === nom) obj.liste.push(contenu); } // On vérifie dans la console console.log('On a rajouté « ' + contenu + " » à la liste de l'utilisateur " + nom); console.log(tableauUtilisateurs); } // 4. b. On modifie la fonction ajouterContenu() pour qu'elle rajoute aussi le contenu // dans le tableau « liste » du bon objet de la liste « tableauUtilisateurs » // c'est-à-dire celui dont le pseudo est le contenu de la variable nom // en appelant la fonction ci-dessous DANS la fonction ajouterContenu() : rajouteDansLaBonneListe(contenu); // fin du 4. -> test et bien vérifier dans la console
Étape 5 : sauvegarder quand on quitte …
// 5. a quand on quitte il faut enregistrer // On appelle donc une fonction enregistre // A la toute fin du code : function enregistre() { // on crée une sorte de texte qui sera sauvegardé à partir de notre liste let sauv = JSON.stringify(tableauUtilisateurs); // On le met dans le « localStorage » du navigateur localStorage.setItem('sauv_users', sauv); } // 5.b Gestion de la sauvegarde à la sortie, quand on sort de la page web // C'est l'évènement "unload" // A la toute fin du code : window.addEventListener("unload", enregistre); // fin du 5. -> test : recharge la page // si c'est bon le script a trouvé quelque chose dans le localStorage ! // vérifier dans l'onglet « stockage » des outils de développement web // il y a une variable 'sauv_users' dans le « Stockage Local » !
Étape 6 : … pour mieux retrouver le contenu !
// 6. a. Il faut que quand on revienne sur cette page, les utilisateurs enregistrés soient reconnus ! // Dans le « if(sauv != null) » de notre fonction « charge() », // après le « console.log(sauv); », rajouter : // On récupère notre tableau à partir de la sauvegarde tableauUtilisateurs = JSON.parse(sauv); // 6.b. Il faut tester si on a déjà l'utilisateur dont on a saisi le nom // On cherche donc si nom est dans les pseudos // et sinon on le rajoute (DANS LE MEME BLOC) // On ne l'a pas encore trouve let trouve = false; let liste =[]; // On parcourt le tableau d'utilisateurs for (let i = 0; i < tableauUtilisateurs.length; i++) { // On récupère l'objet en cours pour simplifier let obj = tableauUtilisateurs[i]; // si c'est le bon on rajoute le contenu if (obj.pseudo === nom) { trouve = true; liste = obj.liste; } } // A la fin de cette boucle si l'utilisateur dont on a saisi le nom // est dans le tableau, le booléen vaut true // sinon ... on le rajoute if (trouve === true) { console.log("On a trouvé l'utilisateur " + nom); // il faut rajouter le contenu encore ! console.log("rajout du contenu éventuel :"); } else { console.log("On n'a pas trouvé l'utilisateur " + nom); // on ajoute un nouvel utilisateur au tableau rajouteNouvelUtilisateur(nom); } // 6.c. C'est bien de l'annoncer mais il faut rajouter le contenu éventuel... // On fait un copier-coller de la fonction « ajouterContenu() » // et on l'appelle « ajouterContenuSansSauver(contenu) » // et on enlève simplement la ligne rajoutée au 4.b. dans cette copie // ainsi que la première ligne qui demande le contenu // car il a été envoyé en paramètre // ce qui donne : function ajouterContenuSansSauver(contenu) { let articleElt = document.createElement("article"); let titreElt = document.createElement("h2"); titreElt.innerText = "Titre du nouveau contenu"; articleElt.appendChild(titreElt); let sectionElt = document.querySelector("section"); sectionElt.appendChild(articleElt); //créer un paragraphe let paraElt = document.createElement("p"); //y mettre le contenu paraElt.innerText = contenu; paraElt.className = "special"; //et ajouter le paragraphe dans l'article articleElt.appendChild(paraElt); } // 6.d. Il reste à appeler cette fonction pour tous les éléments de // la liste récupérée // donc dans « charge() », après le « console.log("rajout du contenu éventuel :"); » // on rajoute pour finir : // on parcourt la liste trouvée pour rajouter le contenu for (let i = 0; i < liste.length; i++) { ajouterContenuSansSauver(liste[i]); console.log("Rajout de « " + liste[i] + " » réussi !"); } // fin du 6. -> test et je l'espère, satisfaction !