TP javascript distanciel : encore plus loin

On vous propose ici de réaliser une page dynamique qui va en inspirer plus d’un pour leurs projets !

Ce TP a été concocté en formation NSI avec l’aide de Louise Martens et d’Olivier Elophe , que je remercie encore !

Télécharger ici les fichiers de base pour l’activité.

Essayer de finir pour demain, ou au moins de refaire les codes des deux dernières séances en JS !

Finir ?

  • « écouter » le formulaire ainsi créé,
  • créer un objet (comme ceux du tableaux) avec ce qui a été envoyé,
  • créer un div de classe lien avec notre fonction creerElementLien
  • le rajouter (au début si possible, mais à la fin, déjà bien) !

Cliquer sur « lire la suite » pour voir le code JavaScript produit en classe.

/*
TP - Introduction à Javascript pour le Web
*/
// Liste des liens Youtube à afficher. Un lien est défini par :
// - son titre
// - son URL
// - Le proriétaire de la chaine
let listeLiens = [
    // les éléments sont des objets = des instances de classe en python
    {
        titre: "Science étonnante",
        url: "https://www.youtube.com/scienceetonnante",
        auteur: "David Louapre"
    },
    {
        titre: "Grain de philo",
        url: "https://www.youtube.com/channel/UCqA8H22FwgBVcF3GJpp0MQw",
        auteur: " Thibaut Giraud"
    },
    {
        titre: "Grafikart.fr",
        url: "https://www.youtube.com/channel/UCj_iGliGCkLcHSZ8eqVNPDQ",
        auteur: "Grafikart"
    }
];


// Crée et renvoie un élément DOM affichant les données d'un lien
function creerElementLien(lien) {
    // ici lien est objet envoyé en argument 
    // comme ceux du tableau listeLiens

    // une balise de typa a
    let titreLienOrangeElt = document.createElement('a');
    
    // dans laquelle on met l'attribut href
    titreLienOrangeElt.setAttribute('href', lien.url);
    // ou titreLienOrangeElt.href = lien.url;

    // du css
    titreLienOrangeElt.style.color = "#FF8000"; //orange
    titreLienOrangeElt.style.marginRight = "5px"; // espace à droite
    titreLienOrangeElt.style.fontWeight = "bolder"; // en gras
    //pas souligné le lien
    titreLienOrangeElt.style.textDecoration = 'none';
    titreLienOrangeElt.innerText = lien.titre;

    // une ligne avec le titre cliquable et l'url
    let ligneElt = document.createElement('p');
    ligneElt.style.margin = "0px";
    ligneElt.appendChild(titreLienOrangeElt);

    // une balise span
    let spanUrlElt = document.createElement('span');    
    spanUrlElt.innerText = lien.url;

    // je la rajoute à ma ligne
    ligneElt.appendChild(spanUrlElt);

    // Je crée un span (pour les 80% du css) pour spécifier l'auteur
    let spanAuteurElt = document.createElement('span');    
    spanAuteurElt.innerText = "Présenté par " + lien.auteur;


    let divLienElt = document.createElement('div');
    divLienElt.setAttribute('class','lien');
    divLienElt.appendChild(ligneElt);
    divLienElt.appendChild(spanAuteurElt);

    return divLienElt;
}

// je récupère le div que je veux peupler
let contenuElt = document.getElementById("contenu");

// Le paramètre lien est un objet JS, éleément du tableau
// Parcours de la liste des liens et ajout d'un élément au DOM pour chaque lien
// comme un for lien in listeLiens en Python

listeLiens.forEach(lien => {
    let lienElt = creerElementLien(lien);
    contenuElt.appendChild(lienElt);
});

/* pareil que

for (let i = 0; i < listeLiens.length; i++){
   let lienElt = creerElementLien(listeLiens[i]);
    contenuElt.appendChild(lienElt); 
}*/

//DEUXIEME PARTIE : LE BOUTON CREE UN FORMULAIRE

// je le récupère
let ajoutLienElt = document.getElementById("ajoutLien");

// je crée une fonction qui renvoie un élément
// input pour l'utiliser plusieurs fois

function creerElementInput(texteDefaut, taille) {

    let inputElt = document.createElement('input');
    inputElt.type = "text";
    inputElt.setAttribute("placeholder", texteDefaut);
    inputElt.setAttribute("size", taille);
    inputElt.setAttribute("required", "true");

    return inputElt;
};

    

// on écoute le bouton et on agit au clic
ajoutLienElt.addEventListener("click", function () {
    // on crée les trois champs de saisie
    let auteurElt = creerElementInput("Entrez le présentateur", 20);
    let titreElt = creerElementInput("Entrez le lien du titre", 40);
    let urlElt = creerElementInput("Entrez l'URL du lien", 40);
    
    // le nouveau bouton
    let ajouterElt = document.createElement('input');
    ajouterElt.type = "submit";
    ajouterElt.value = "Ajouter";

    // le formulaire
    let formAjoutElt = document.createElement('form');
    formAjoutElt.appendChild(auteurElt);
    formAjoutElt.appendChild(titreElt);
    formAjoutElt.appendChild(urlElt);
    formAjoutElt.appendChild(ajouterElt);

    // On récupère le paragraphe 
    let paraElt = document.getElementsByTagName('p')[0];
    // Je remplace mon bouton par mon formulaire
    paraElt.replaceChild(formAjoutElt, ajoutLienElt);

    // écouter le formulaire ainsi créé
    // créer un objet (comme lien) avec ce qui a été envoyé
    // créer un div de classe lien avec notre fonction creerElementLien
    // le rajouter (au début si possible)
});

3 réflexions au sujet de « TP javascript distanciel : encore plus loin »

  1. Bonjour monsieur, pour la première partie du travail ou l’on doit faire un code qui écoute le formulaire, comment peut on faire? Que ce que l’on peut mettre pour qu’il récupère les élément des différents input?
    Bonne journée

      • Plus précis :

        // écouter le formulaire ainsi créé
        formAjoutElt.addEventListener('submit', function (e) {
            e.preventDefault(); // Annule la publication du formulaire
            // créer un objet (comme lien) avec ce qui a été envoyé
            // créer un div de classe lien avec notre fonction creerElementLien
            // le rajouter (au début si possible)
            // Remplace le formulaire d'ajout par le bouton d'ajout
        });

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.