Une mémoire pour notre site

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 !

cm 2020-05-06 NSI javascript avec localStorage

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 !

Lire la suite

Javascript : une appli de calcul de moyenne

cm 2020-04-30 ISN javascript calculateur de moyenne

Whaouh ! Le résultat de notre séance de deux heures avec Léa puis Zoé au partage d’écran était top. On peut :

  • le tester en cliquant ici.
  • Afficher le code html avec un « Ctrl – U »,
  • voir le code javascript en suivant le lien à la fin de la balise body du code source.

Reste à faire :

  • affecter la spécialité, et les changements dans le menu déroulant,
  • sauvegarder les données d’un utilisateur dans le localStorage…

Discussions sur javascript dans des pages web

Pour commencer, lire :

Commencer ce cours :

Premiers tests des 3-4 avril :

Les codes de la session discord du 9 avril :

Voir les commentaires pour plein d’autres trucs :

Le cours du 30 avril avec son calculateur de moyenne :