Une page web interactive

On repart grosso-modo de la base du dernier cours sur le sujet, intitulé « Structure html5 et premier script » du 8 avril dernier.

Pour simplifier, j’ai redonné ce fichier à décompresser pour retrouver la structure de départ :

structure_de_base

Ce qu’on a fait

(avec Max & Cyril au partage d’écran, merci 😉 )

Dans le sous-dossier pages, on a modifié page1.html ainsi :

cm 2020-04-29 NSI intéraction page web 0

et dans le sous dossier js, on a modifié monscript.js ainsi :

console.log("Je fais de la prog web");

let nom = prompt("Ton nom ?", "John");

var titre_a_changer  =  document.querySelector("h1");
titre_a_changer.innerText = "La page spéciale pour " + nom;

let italique_a_changer = document.getElementsByClassName('special');
italique_a_changer[0].innerText = "On te change aussi l'italique, " + nom ;
italique_a_changer[1].innerText += " pour " + nom ; 

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
    //y mettre le contenu
    //et ajouter le paragraphe dans l'article

}

Ce qui a donné …

cm 2020-04-29 NSI intéraction page web 1

cm 2020-04-29 NSI intéraction page web 2

cm 2020-04-29 NSI intéraction page web 3

cm 2020-04-29 NSI intéraction page web 4

Reste à faire pour mercredi prochain :

  • pour que mon contenu « Du contenu 😉 » que j’ai tapé dans la fenêtre de saisie (« prompt ») s’affiche, dans la fonction ajouterContenu() :
    • créer un paragraphe,
    • y mettre le contenu,
    • et ajouter le paragraphe dans l’article.
  • pour les plus motivé.e.s, rechercher comment rajouter une classe css à ce paragraphe pour lui donner comme attribut « class = "special" ».

 

N'hésitez-pas à poser une question, ou faire avancer le schmilblick

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l’aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur la façon dont les données de vos commentaires sont traitées.