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.
