Partage

Cours Créez des pages web interactives avec JS

<< 1 ... 21 22 23 24 >>

220A37

12 mai 2017 à 23:00:23

Bonsoir, pourriez vous indiquer un exemple de code où getElementsByClassName('any').forEach fonctionnait ?

Batayman

12 mai 2017 à 23:53:53

Je n'arrive pas à le reproduire. Peut-être avais-je fais d'autres modifications.

J'ai fait des tests :

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
</head>
<body>
    <div id="lettres">
        <a href="" class="test" >A</a>
        <a href="" class="test" >B</a>
    </div>
    <script src="../js/test.js"></script>
</body>
</html>

var test = document.querySelectorAll("a");
var test2 = document.getElementsByTagName("a");
var test3 = document.getElementsByClassName("test");

console.log(test); // affiche NodeList
console.log(test2); // affiche HTMLCollection
console.log(test3); // affiche HTMLCollection

test.forEach( function (lettreElt) {
    console.log("ok");
    });
test2.forEach( function (lettreElt) {
    console.log("ok");
    });
test3.forEach( function (lettreElt) {
    console.log("ok");
    });

Je constate que le forEach() ne fonctionne que sur le NodeList.

Pourtant j'ai l’impression que je récupère la même chose : un tableau d'élément.

Pour que mon code fonctionne je dois utiliser forEach() pour les NodeList et la boucle for pour les HTMLCollection:

var test = document.querySelectorAll("a");
var test2 = document.getElementsByTagName("a");
var test3 = document.getElementsByClassName("test");

console.log(test);
console.log(test2);
console.log(test3);

test.forEach( function (lettreElt) {
    console.log("ok");
    });
for ( i = 0 ; i < test2.length ; i++ ) {
    console.log("ok");
}
for ( i = 0 ; i < test3.length ; i++ ) {
    console.log("ok");
}

Une particularité du forEach()? Quelle est la logique à adopter ?

Dans mon idée pour l'exercice MINI-LEXIQUE, je voulais récupérer tous mes liens créé dans la page html et leur mettre un "addEventListener". Donc je pensais utiliser un .getElementsByTagName("a");

220A37

13 mai 2017 à 7:35:55

Le résultat de votre premier post est le comportement attendu :

```
getElementsBy[..]Name()
```
renvoie une HTMLCollection, qui ne possède pas de méthode 'forEach()'
```
queySelectorAll()
```
renvoie une NodeList qui possède cette méthode

Aucun de ces deux objets n'est un tableau au sens usuel de Javascript ('Array'), et ne possède donc les méthodes habituelles d'un tableau (même si cela peut prêter à confusion devant l’accès par indice par exemple qui ressemble à celui d'un Array).

HTMLCollection et NodeListe sont tous les 2 des listes de noeuds du DOM, mais HTMLCollection ne peut contenir que des balises HTML (alors par exemple qu'un noeuds pourrait théoriquement être un 'textNode' ou un noeuds vide, sans balise HTML).

Cette distinction est assez théorique dans ce cas, et la vraie distinction en pratique est plus dans les méthode nativement implémentées sur chacun de ces objets, et le fait qu'une HTMLCollection est "live", modifiée avec la modification du DOM, alors que ce n'est pas forcément le cas d'une NodeList (et ce n'est pas le cas de la nodeListe renvoyée par querySelectorAll())

Batayman

13 mai 2017 à 10:56:11

Bonjour,

Merci de ta réponse.

Si je comprends bien :

- forEach() est une méthode des NodeList mais pas des HTMLCollection.

- Pour parcourir chaque élément des NodeList, je peux faire un forEach() ou une boucle for

- Pour parcourir chaque élément des HTMLCollection, je dois utiliser une boucle for

- Pour parcourir chaque élément d'un Array d'objets, je peux faire un forEach() ou une boucle for

220A37

13 mai 2017 à 11:18:55

Exact, et pour des travaux plus complexes, une "technique" habituelle est de convertir les listes de noeuds/collections en 'Array' classique (Array.from(), operateur spread...) de façon à pouvoir utiliser toutes les méthodes très utiles des Array (map,filter...)

-
Edité par 220A37 13 mai 2017 à 11:21:24

Batayman

13 mai 2017 à 13:20:32

Cool !

Merci pour les explications et pour l'astuce !

Bonne continuation.

tabouretBleu

13 mai 2017 à 13:25:32

Je me suis créé une fonction "loop" il y a longtemps qui itère sur toute sortes de choses. Il est ennuyeux de changer de technique à chaque fois.

Tu peux aussi appeler la méthode forEach de l'objet Array sur un objet qui n'est pas un array en utilisant la méthode call, comme ceci : Array.prototype.forEach.call(taListe, function (item, index) {});

Batayman

13 mai 2017 à 18:19:34

Ok merci à toi aussi. Je sauvegarde cette solution de côté.

JonathanDelaRosa

22 mai 2017 à 15:44:07

Bonjour à tous,

Je suis un peu coincé sur l'activité 3 de ce cours, concernant la récupération des liens depuis le serveur.

J'incorpore ces derniers dans mon tableau listeLiens via un unshift mais ils semblent y avoir un couac car lors de la création des éléments dans le DOM, ils ne me créé que les liens présents dans mon tableau de base.

Ce que j'ai du mal à comprendre, c'est que quand je passe en déboguage pour exécuter mon code petit à petit, là cela fonctionne bien.

Voici mon code, si vous pouviez m’aiguiller sur ce que je rate. Merci d'avance :).

/*
Activité 2
*/
 
// Liste des liens Web à afficher. Un lien est défini par :
// - son titre
// - son URL
// - son auteur (la personne qui l'a publié)
 
 
 
var listeLiens = [
    {
        titre: "So Foot",
        url: "http://sofoot.com",
        auteur: "yann.usaille"
    },
    {
        titre: "Guide d'autodéfense numérique",
        url: "http://guide.boum.org",
        auteur: "paulochon"
    },
    {
        titre: "L'encyclopédie en ligne Wikipedia",
        url: "http://Wikipedia.org",
        auteur: "annie.zette"
    }
];
 
function ajaxGetLien(url) { //recupération des liens depuis l'api
    var req = new XMLHttpRequest();
    req.open("GET", url);
    req.addEventListener("load", function () {
        if (req.status >= 200 && req.status < 400) {
             
            var recups = JSON.parse(req.responseText);
            recups.reverse(); // inversion des liens récupérés
            recups.forEach(function (recup) { //ajout des liens récupérés en tête du tableau
                listeLiens.unshift({
                    titre: recup.titre,
                    url: recup.url,
                    auteur: recup.url
                });
            })
 
        } else {
            console.error(req.status + " " + req.statusText + " " + url);
        }
    });
    req.addEventListener("error", function () {
        console.error("Erreur réseau avec l'URL " + url);
    });
    req.send(null);
}
 
 
 
 
ajaxGetLien("https://oc-jswebsrv.herokuapp.com/api/liens");
 
 
// Crée et renvoie un élément DOM affichant les données d'un lien
// Le paramètre lien est un objet JS représentant un lien
function creerElementLien(lien) {
    var titreElt = document.createElement("a");
    titreElt.href = lien.url;
    titreElt.style.color = "#428bca";
    titreElt.style.textDecoration = "none";
    titreElt.style.marginRight = "5px";
    titreElt.appendChild(document.createTextNode(lien.titre));
 
    var urlElt = document.createElement("span");
    urlElt.appendChild(document.createTextNode(lien.url));
 
    // Cette ligne contient le titre et l'URL du lien
    var ligneTitreElt = document.createElement("h4");
    ligneTitreElt.style.margin = "0px";
    ligneTitreElt.appendChild(titreElt);
    ligneTitreElt.appendChild(urlElt);
 
    // Cette ligne contient l'auteur
    var ligneDetailsElt = document.createElement("span");
    ligneDetailsElt.appendChild(document.createTextNode("Ajouté par " + lien.auteur));
 
    var divLienElt = document.createElement("div");
    divLienElt.classList.add("lien");
    divLienElt.appendChild(ligneTitreElt);
    divLienElt.appendChild(ligneDetailsElt);
 
    return divLienElt;
}
 
var contenuElt = document.getElementById("contenu");
// Parcours de la liste des liens et ajout d'un élément au DOM pour chaque lien
listeLiens.forEach(function (lien) {
    var lienElt = creerElementLien(lien);
    contenuElt.appendChild(lienElt);
});
 
// Crée et renvoie un élément DOM de type input
function creerElementInput(placeholder, taille) {
    var inputElt = document.createElement("input");
    inputElt.type = "text";
    inputElt.setAttribute("placeholder", placeholder);
    inputElt.setAttribute("size", taille);
    inputElt.setAttribute("required", "true");
    return inputElt;
}
 
var ajouterLienElt = document.getElementById("ajoutLien");
// Gère l'ajout d'un nouveau lien
ajouterLienElt.addEventListener("click", function () {
    var auteurElt = creerElementInput("Entrez votre nom", 20);
    var titreElt = creerElementInput("Entrez le titre du lien", 40);
    var urlElt = creerElementInput("Entrez l'URL du lien", 40);
 
     
     
 
    var ajoutElt = document.createElement("input");
    ajoutElt.type = "submit";
    ajoutElt.value = "Ajouter";
 
    var formAjoutElt = document.createElement("form");
    formAjoutElt.appendChild(auteurElt);
    formAjoutElt.appendChild(titreElt);
    formAjoutElt.appendChild(urlElt);
    formAjoutElt.appendChild(ajoutElt);
 
    var p = document.querySelector("p");
    // Remplace le bouton d'ajout par le formulaire d'ajout
    p.replaceChild(formAjoutElt, ajouterLienElt);
 
    // Ajoute le nouveau lien
    formAjoutElt.addEventListener("submit", function (e) {
        e.preventDefault(); // Annule la publication du formulaire
 
         
         
        var url = urlElt.value;
        // Si l'URL ne commence ni par "http://" ni par "https://"
        if ((url.indexOf("http://") !== 0) && (url.indexOf("https://") !== 0)) {
            // On la préfixe par "http://"
            url = "http://" + url;
        }
 
        // Création de l'objet contenant les données du nouveau lien
        var lien = {
            titre: titreElt.value,
            url: url,
            auteur: auteurElt.value
        };
 
        ajaxPost("https://oc-jswebsrv.herokuapp.com/api/lien", lien, function (reponse) {
        console.log("Le lien " + JSON.stringify(lien) + " a été envoyé au serveur")
        },
        true
        );
 
         
 
 
        var lienElt = creerElementLien(lien);
        // Ajoute le nouveau lien en haut de la liste
        contenuElt.insertBefore(lienElt, contenuElt.firstChild);
 
        // Remplace le formulaire d'ajout par le bouton d'ajout
        p.replaceChild(ajouterLienElt, formAjoutElt);
 
        // Création du message d'information
        var infoElt = document.createElement("div");
        infoElt.classList.add("info");
        infoElt.textContent = "Le lien \"" + lien.titre + "\" a bien été ajouté.";
        p.insertBefore(infoElt, ajouterLienElt);
        // Suppresion du message après 2 secondes
        setTimeout(function () {
            p.removeChild(infoElt);
        }, 2000);
    });
});

-
Edité par JonathanDelaRosa 22 mai 2017 à 15:48:00

n1col4s

22 mai 2017 à 17:19:18

JonathanDelaRosa a écrit:

Ce que j'ai du mal à comprendre, c'est que quand je passe en déboguage pour exécuter mon code petit à petit, là cela fonctionne bien.

En fait, les liens sont affichés alors que la requête n'est pas terminée. C'est pour ça que ça fonctionne quand tu l'exécute pas à pas. La requête est finie bien avant que les liens soient affichés.

Il faut que tu affiches les liens (ligne 93 à 98) dans la réponse de ta requête.

-
Edité par n1col4s 22 mai 2017 à 17:19:54

"In chess, it's called Zugzwang, when the only viable move is not to move."

JonathanDelaRosa

23 mai 2017 à 10:28:31

Merci beaucoup! Effectivement je n'avais pas pensé au temps d'attente de la requête.

Freddy_44

23 mai 2017 à 18:15:19

Bonjour à tous,

J'effectue le cours et je suis au chapitre 'Interrogez un serveur web' ... j'ai un pb avec le premier code donné à savoir:

// Création d'une requête HTTP
var req = new XMLHttpRequest();
// Requête HTTP GET synchrone vers le fichier langages.txt publié localement
req.open("GET", "http://localhost/data/langages.txt", false);
// Envoi de la requête
req.send(null);
// Affiche la réponse reçue pour la requête
console.log(req.responseText);

J'ai un message d'erreur dans la console:

NetworkError: A network error occurred.  cours.js:7
	<anonyme>

Lorsque je regarde les log d'apache coté error, je n'en ai aucun et coté access, j'ai

::1 - - [23/May/2017:17:48:32 +0200] "GET /data/langages.txt HTTP/1.1" 200 16

Pour info, j'accède bien depuis firefox au dossier dédié au cours depuis apache avec http://localhost, d'ou la modif du code donné au niveau de 'req.open'.

J'ajoute le résultat vu à travers l'outil de dev de firefox.

Resultat requete ajax

Quelqu'un aurait-il déjà eu se soucis ?

Merci

ps: j'ai vu page précédente le même pb, mais la personne ne dis pas comment elle a résolu son pb.

C'est résolu ... j'ai fais mon gros boulet ... j'avais mal écris:

Header always set Access-Control-Allow-Origin "*"

quel bouleeeeet je fais

-
Edité par Freddy_44 23 mai 2017 à 19:03:36

Mokhona

24 mai 2017 à 19:25:45

Bonjour

je suis le cours et je suis bloquée à l'activité 2 : Gérez l'ajout de nouveaux liens. J'ai réussi à créer le formulaire en cliquant sur le bouton. Je veux ensuite faire des tests au niveau de mon formulaire et j'ai mis un e.preventDefault() au niveau de mon évènement de submit sur le formulaire mais il ne fonctionne pas. Mon formulaire est quand même envoyé... Je ne vois pas où est mon erreur... Si quelqu'un pouvait m'aider avec mon erreur pour que je puisse avancer et finir l'activité.

Mon code :

/* 
Activité 1
*/

// Liste des liens Web à afficher. Un lien est défini par :
// - son titre
// - son URL
// - son auteur (la personne qui l'a publié)
var listeLiens = [
    {
        titre: "So Foot",
        url: "http://sofoot.com",
        auteur: "yann.usaille"
    },
    {
        titre: "Guide d'autodéfense numérique",
        url: "http://guide.boum.org",
        auteur: "paulochon"
    },
    {
        titre: "L'encyclopédie en ligne Wikipedia",
        url: "http://Wikipedia.org",
        auteur: "annie.zette"
    }
];

// TODO : compléter ce fichier pour ajouter les liens à la page web
listeLiens.forEach(function (lien) {
    var divElt = document.createElement("div");
    var aElt = document.createElement("a");
    var spanElt = document.createElement("span");
    var pElt = document.createElement("p");
    
    spanElt.classList.add("lienTxt");
    spanElt.textContent = lien.url;
    
    aElt.textContent = lien.titre;
    aElt.href = lien.url;
    
    pElt.textContent = lien.auteur;
    
    divElt.appendChild(aElt);
    divElt.appendChild(spanElt);
    divElt.appendChild(pElt);
    
    // Propriété CSS des divs créées
    divElt.style.backgroundColor = "white";
    divElt.style.margin = "10px";
    divElt.style.padding = "10px";
    divElt.style.width = "100%";
    
    // Propriété CSS des liens
    aElt.style.color = "#428bca";
    aElt.style.fontFamily = "arial";
    aElt.style.fontSize = "14px";
    aElt.style.fontWeight = "bold";
    aElt.style.textDecoration = "none";
    
    // Propriété CSS des spans
    spanElt.style.marginLeft = "5px";
    
    // Propriété CSS des paragraphes
    pElt.style.margin = "0px";
    pElt.style.fontFamily = "arial";
    pElt.style.fontSize = "12px";
    
    document.getElementById("contenu").appendChild(divElt);
});

var bouton = document.getElementById("ajoutLien");
var boutonElt = document.querySelector("button");

bouton.addEventListener("click", function () {
    var formElt = document.createElement("form");
    
    // Gestion de l'input nom de l'auteur
    var inputNom = document.createElement("input");
    inputNom.type = "text";
    inputNom.id = "nomAuteur";
    inputNom.name = "nomAuteur";
    //inputNom.required = true;
    inputNom.placeholder = "Entrez votre nom";
    
    // Gestion de l'input nom du site
    var inputSite = document.createElement("input");
    inputSite.type = "text";
    inputSite.id = "nomSite";
    inputSite.name = "nomSite";
    //inputSite.required = true;
    inputSite.placeholder = "Entrez le nom du site";

    // Gestion de l'input url du site
    var inputUrl = document.createElement("input");
    inputUrl.type = "text";
    inputUrl.id = "urlSite";
    inputUrl.name = "urlSite";
    //inputUrl.required = true;
    inputUrl.placeholder = "Entrez l'url du site";
    
    var btnSubmit = document.createElement("input");
    btnSubmit.type = "submit";
    btnSubmit.id = "btnAjout";
    btnSubmit.value = "Ajouter";
    
    // Propriété CSS du formulaire
    formElt.style.margin = "5px";
    
    inputNom.style.marginRight = "5px";
    inputSite.style.marginRight = "5px";
    inputUrl.style.marginRight = "5px";
    
    inputNom.style.width = "200px";
    inputSite.style.width = "200px";
    inputUrl.style.width = "400px";    
    
    formElt.appendChild(inputNom);
    formElt.appendChild(inputSite);
    formElt.appendChild(inputUrl);
    formElt.appendChild(btnSubmit);

    document.body.insertBefore(formElt, boutonElt);
    
});

var form = document.querySelector("form");

form.addEventListener("submit", function (e) {

    console.log("Toto"); // pour tester le e.preventDefault
    e.preventDefault();

});

Merci

n1col4s

24 mai 2017 à 19:43:49

@Mokhona

Le formulaire est envoyé parce qu'il n'y a aucun gestionnaire d'événement dessus.

Au chargement du script, il n'y a pas de formulaire, donc ligne 127 tu as mis en fait un gestionnaire d'événement sur un formulaire qui n'existe pas.

Il faut simplement mettre les dernières lignes (127 à 132) à l'intérieur de l'événement click du bouton qui va créer le formulaire.

"In chess, it's called Zugzwang, when the only viable move is not to move."

Mokhona

25 mai 2017 à 16:21:04

@n1col4s

Merci pour ta réponse logique je n'y avais pas pensé. J'ai pu finir mon exercice qu'y m'a posé pas mal de problèmes ^^'

Christophe13011

16 juin 2017 à 10:57:32

Bonjour,

je suis sur le dernier exo "Témoignage sur le cours" du chapitre "envoyer des données à un serveur web".

êtes vous sur que l'api https://oc-jswebsrv.herokuapp.com/api/temoignage attend du JSON (comme dit dans les instructions) ?

car j'envoi mes infos avec un simple formdata() avec le parametre isjson false et ça marche.

Si je les envoi en JSON ça ne marche pas, d'ailleurs la correction du cours ne marche pas non plus

merci pour votre aide

cdlt

Rennor974

27 juin 2017 à 16:14:51

Je ne sais pas si la question a deja ete pose, si c'est le cas, je m'en excuse mais que signifie : "Les fichiers liensweb.css et liensweb.html ne doivent pas être modifiés." et "Conformément aux bonnes pratiques vues dans le cours, les nouveaux éléments du DOM doivent être créés et modifiés avant d’être ajoutés à la page." qui sont dans le tp 1 ? Si le fichier html ne peut pas etre modifie alors on peut pas ajouter les liens a la page ? Et quelle bonne pratique a t'on vu dans le cours ? Merci d'avance

Je voudrais ajouter bootstrap, est-ce autorise ?

-
Edité par Rennor974 27 juin 2017 à 16:16:46

Mokhona

27 juin 2017 à 19:57:19

Bonjour

Il faut ajouter les nouveaux éléments uniquement en Javascript. Tu n'as pas droit de modifier le fichier .css et le .html. Tout doit se faire dans ton fichier .js.

Pour bootstrap je pense que c'est interdit.

Rennor974

27 juin 2017 à 20:30:14

Ah ok. Dommage pour bootstrap

f2buttet

28 juin 2017 à 9:53:12

Bonjour,

J'ai quelques question à poser sur l'activité 2 du cours "Créez des pages web interactives avec JS".

Mes questions:

- lors de l'execution du code, la premiere entrée se passe bien. mais la seconde déclenche une erreur: il ne reconnait plus newForm.elements.nom?? et d'ailleurs, le programme saute une étape (voir les tests dans la console). Ca fonctionne à l'écran mais je ne saisis pas cette erreur.

- Je m'interroge aussi (peut être ais je oublié un chapitre dans le cours...), sur la portée des variables dans les fonctions (anonymes) décrites dans les gestionnaires d'évennements. Je m'aperçois que des variables hors de ces fonctions sont reconnues et pas d'autres.

Pouvez vous me renseigner SVP?

Merci d'avance!

Ps:je suis partis de la correction de l'activité1.

/* 
Activité 1
*/

// Liste des liens Web à afficher. Un lien est défini par :
// - son titre
// - son URL
// - son auteur (la personne qui l'a publié)
var listeLiens = [
    {
        titre: "So Foot",
        url: "http://sofoot.com",
        auteur: "yann.usaille"
    },
    {
        titre: "Guide d'autodéfense numérique",
        url: "http://guide.boum.org",
        auteur: "paulochon"
    },
    {
        titre: "L'encyclopédie en ligne Wikipedia",
        url: "http://Wikipedia.org",
        auteur: "annie.zette"
    }
];

// Crée et renvoie un élément DOM affichant les données d'un lien
// Le paramètre lien est un objet JS représentant un lien
function creerElementLien(lien) {
    var titreLien = document.createElement("a");
    titreLien.href = lien.url;
    titreLien.style.color = "#428bca";
    titreLien.style.textDecoration = "none";
    titreLien.style.marginRight = "5px";
    titreLien.appendChild(document.createTextNode(lien.titre));

    var urlLien = document.createElement("span");
    urlLien.appendChild(document.createTextNode(lien.url));

    // Cette ligne contient le titre et l'URL du lien
    var ligneTitre = document.createElement("h4");
    ligneTitre.style.margin = "0px";
    ligneTitre.appendChild(titreLien);
    ligneTitre.appendChild(urlLien);

    // Cette ligne contient l'auteur
    var ligneDetails = document.createElement("span");
    ligneDetails.appendChild(document.createTextNode("Ajouté par " + lien.auteur));

    var divLien = document.createElement("div");
    divLien.classList.add("lien");
    divLien.appendChild(ligneTitre);
    divLien.appendChild(ligneDetails);

    return divLien;
}


//(TP2) Création d'un DIV pour mise en page (mep) du formulaire
var divMep = document.createElement("div");
divMep.id = "mep";
divMep.style.padding = "20px";
document.getElementById("contenu").appendChild(divMep);

//(TP2) Création d'un DIV pour mise en page (mepLiens) de l'affichage tab
var divTab = document.createElement("div");
divTab.id = "divTab";

var contenu = document.getElementById("contenu");
contenu.appendChild(divTab);

//création du bouton et attribution d'un Event
var boutonAjout = document.createElement("button");
boutonAjout.id = "bouton";
boutonAjout.textContent = "Ajouter un lien";
document.getElementById("mep").appendChild(boutonAjout);

//Création balise form dans "contenu"
    var form = document.createElement("form");
    form.id = "form";
    form.style.display = "flex";
    form.style.justifyContent = "space-around";
    document.getElementById("mep").insertBefore(form,document.getElementById("bouton"));

// Parcours de la liste des liens et ajout d'un élément au DOM pour chaque lien
listeLiens.forEach(function (lien) {
    var elementLien = creerElementLien(lien);
    divTab.appendChild(elementLien);
});

// ACTIVITE 2
boutonAjout.addEventListener("click", function () {
//si click sur 'Ajouter un lien' -> disparition du bouton   
    boutonAjout.style.display ="none";

//Création d'une zone de saisie "auteur" dans form
    var newAuteur = document.createElement("input");
    newAuteur.name = "auteur";
    newAuteur.type = "text";
    newAuteur.placeholder = "Entrez votre nom";  
    newAuteur.size = "30";
    newAuteur.required = "true"  ;
    document.getElementById("form").appendChild(newAuteur);

//Création d'une zone de saisie "nom" dans form
    var newNom = document.createElement("input");
    newNom.name = "nom";
    newNom.type = "text";
    newNom.placeholder = "Entrez le titre du lien";
    newNom.size = "30";
    newNom.required = "true";
    document.getElementById("form").appendChild(newNom);

//Création d'une zone de saisie "url" dans form
    var newUrl = document.createElement("input");
    newUrl.name = "url";
    newUrl.type = "text";
    newUrl.placeholder = "Entrez l'URL du lien";
    newUrl.size = "50";
    newUrl.required = "true";
    document.getElementById("form").appendChild(newUrl);

//Création d'un bouton type "submit" dans form
    var boutonValidationAjout = document.createElement("button");
    boutonValidationAjout.type = "submit";
    boutonValidationAjout.id = "boutonValidationAjout";
    boutonValidationAjout.textContent = "Ajouter";
    document.getElementById("form").appendChild(boutonValidationAjout);

//Attribution d'un EVENT a ce bouton
        var newForm = document.querySelector("form");

            console.log(typeof(newForm)+" 1");//test
        //FIN TEST
        newForm.addEventListener("submit", function (e) {  //click sur bouton(bug) ou submit sur form??
            e.preventDefault();

//Selection du form dans le DOM
            console.log(typeof(newForm)+" 2");//test
//Récupération des données
            var newTitre = newForm.elements.nom.value;
            var newUrl = newForm.elements.url.value;
            var newNom = newForm.elements.auteur.value;
            console.log("on arrive la"); //test
            console.log(typeof(newForm)+" 3");//test

            

            //creer Element Lien(newLien);
            var newLien = Object.create(listeLiens);

            newLien.titre = newTitre;
            newLien.url = newUrl;
            newLien.auteur = newNom; 
            //newLien inséré en premier dans le tableau
            listeLiens.unshift(newLien);

            newForm.innerHTML = "";


            //Effacer l'affichage tableau existant
            //var tableau = document.getElementsByClassName("lien");
            //for (i=0;i<tableau.length;i++) {
            //    tableau[i].innerHTML = "";
            //}// BUG sur affichage->place 3 ligne vide mise en page

            document.getElementById("divTab").innerHTML = "";
            

            //divTab.id = "divTab";
            var contenu = document.getElementById("contenu");
            contenu.appendChild(divTab);
            listeLiens.forEach(function (lien) {
            var elementLien = creerElementLien(lien);
            divTab.appendChild(elementLien);
            });
        
            //Le bouton 'Ajouter un lien' réapparait
            boutonAjout.style.display ="";    


        });
});

-
Edité par f2buttet 29 juin 2017 à 14:23:03

Papacito

26 juillet 2017 à 0:32:43

Bonjour à tous,

Pour l'activité 3 La fonction AjaxPost tel que donnée dans le cours ne fonctionne pas avec le lien

https://oc-jswebsrv.herokuapp.com/api/lien

Test tout simple, celà ne fonctionne pas. Je ne comprend pas pourtant celà marche bien dans l'autre sens et j'ai aussi réussi tout les exercices du cours.

var listeLiens = [
    {
        titre: "So Foot",
        url: "http://sofoot.com",
        auteur: "yann.usaille"
    },
    {
        titre: "Guide d'autodéfense numérique",
        url: "http://guide.boum.org",
        auteur: "paulochon"
    },
    {
        titre: "L'encyclopédie en ligne Wikipedia",
        url: "http://Wikipedia.org",
        auteur: "annie.zette"
    }
];


var urlApiPost = "https://oc-jswebsrv.herokuapp.com/api/lien";
ajaxPost(urlApiPost,listeLiens,function(reponse){
            reponse = reponse;
        },true);


    function ajaxPost(url, data, callback, isJson) {
        var req = new XMLHttpRequest();
        req.open("POST", url);
        req.addEventListener("load", function () {
            if (req.status >= 200 && req.status < 400) {
                // Appelle la fonction callback en lui passant la réponse de la requête
                callback(req.responseText);
            } else {
                console.error(req.status + " " + req.statusText + " " + url);
            }
        });
        req.addEventListener("error", function () {
            console.error("Erreur réseau avec l'URL " + url);
        });
        if (isJson) {
            // Définit le contenu de la requête comme étant du JSON
            req.setRequestHeader("Content-Type", "application/json");
            // Transforme la donnée du format JSON vers le format texte avant l'envoi
            data = JSON.stringify(data);
        }
        req.send(data);
    }

Le message d'erreur est:
POST https://oc-jswebsrv.herokuapp.com/api/lien 400 (Bad Request)
liensweb.js:139 400 Bad Request https://oc-jswebsrv.herokuapp.com/api/lien

-
Edité par Papacito 26 juillet 2017 à 0:39:09

csei

26 juillet 2017 à 9:58:10

Papacito a écrit: >

Hello,

dans l'URL c'est lien avec un 's' : https://oc-jswebsrv.herokuapp.com/api/liens

Bon courage

-
Edité par csei 26 juillet 2017 à 9:58:35

Papacito

26 juillet 2017 à 10:11:44

chrismuzikos a écrit:

Hello,

dans l'URL c'est lien avec un 's' : https://oc-jswebsrv.herokuapp.com/api/liens

Bon courage

-
Edité par chrismuzikos il y a 9 minutes

Salut, merci pour ta réponse rapide, mais le lien que tu donnes est pour la récupération des liens, pour les poster c'est sans le s:

Dans les consignes de l'activité il est écrit:

L’API de récupération des liens est https://oc-jswebsrv.herokuapp.com/api/liens. Elle renvoie les derniers liens ajoutés sous forme de tableau JSON.

L’API d’ajout d’un lien est https://oc-jswebsrv.herokuapp.com/api/lien. Elle attend un objet JSON représentant un lien.

csei

26 juillet 2017 à 11:34:23

Papacito a écrit: > Salut, merci pour ta réponse rapide, mais le lien que tu donnes est pour la récupération des liens, pour les poster c'est sans le s:

Ah ok au temps pour moi

-
Edité par csei 26 juillet 2017 à 11:35:08

Papacito

26 juillet 2017 à 23:23:08

J'ai trouvé, pour être posté sur le serveur les objets doivent être sous la forme:

nouvelObjet2={

titre:nouvelObjet.titre,

url:nouvelObjet.url,

auteur:nouvelObjet.auteur

};

nclsch

4 août 2017 à 17:58:09

Bonjour tout le monde !

J'ai une question à propos suite à un exercice du chapitre "Réagissez à des événement" (desserts.js)

Pourquoi le script fonctionne ainsi ?

document.getElementsByTagName("button")[0].addEventListener("click", function() {
    var liElement = document.createElement("li");
    liElement.textContent = prompt("Quel dessert ?");
    document.getElementById("desserts").appendChild(liElement);
});

Alors qu'ici, la fonction est lancée au chargement de la page et pas au clic sur le bouton ?

document.getElementsByTagName("button")[0].addEventListener("click", ajouterUnDessert());

function ajouterUnDessert() {
    var liElement = document.createElement("li");
    liElement.textContent = prompt("Quel dessert ?");
    document.getElementById("desserts").appendChild(liElement);
}

Merci !

Celousco

4 août 2017 à 18:20:02

Dans le cas du ajouterUnDessert, tu appelles la fonction (sans le faire exprès) alors qu'à la base tu voulais indiquer d'utiliser la fonction lorsqu'on clique, pour y palier il faut que tu retires les parenthèses à la ligne 1.

nclsch

5 août 2017 à 15:27:55

Celousco a écrit:

Dans le cas du ajouterUnDessert, tu appelles la fonction (sans le faire exprès) alors qu'à la base tu voulais indiquer d'utiliser la fonction lorsqu'on clique, pour y palier il faut que tu retires les parenthèses à la ligne 1.

Merci, c'est bien ça !

Lo_S

6 août 2017 à 16:44:44

Bonjour à tous,

J'ai un petit soucis sur le cours, je ne comprends pas le passage "comprendre la propagation des evenements" dans le chapitre 5.

Déjà, j'ai énormément de mal avec le chapitre entier, mais je vais le revoir petit à petit quand j'en aurais terminé avec ce passage.

Mon soucis est le suivant : lorsque je fais un bête copier / coller du cours, j'obtiens une erreur Uncaught TypeError: Cannot read property 'addEventListener' of null .

Voici mon code : cours.js

// Gestion du clic sur le document
document.addEventListener("click", function () {
    console.log("Gestionnaire document");
});
// Gestion du clic sur le paragraphe
document.getElementById("para").addEventListener("click", function () {
    console.log("Gestionnaire paragraphe");
});
// Gestion du clic sur le bouton
document.getElementById("propa").addEventListener("click", function (e) {
    console.log("Gestionnaire bouton");
});

Puis mon cours.html :

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Gestion des événements</title>
</head>

<body>
    <button id="bouton">Bouton 1</button>
    <button id="bouton2">Bouton 2</button>
    <script src="../js/cours.js"></script>

    <p id="para">Un paragraphe avec un
        <button id="propa">bouton</button> à l'intérieur
    </p>
</body>

</html>

Si je comprends bien l'exemple en un seul clic sur le bouton #propa, je devrais avoir 3 entrées dans la console. Mais visiblement il ne voit pas l'élément : <p id="para">.

Si vous avez une idée, merci de partager, j'ai vraiment du mal avec le chapitre et ça arrange pas mes affaires.

Loïc

csei

6 août 2017 à 18:51:43

Lo_S a écrit: >

Salut,

je viens de tester ton code et cela fonctionne. Lorsque tu cliques sur le bouton#propa, l'event se propage bien (bouton > paragraphe > document). Et lorsque tu cliques sur le paragraphe#para l'event se propage bien aussi (paragraphe > document).

Essaye de placer correctement ta balise script js en bas de ton body, avant la balise de fermeture car dans ton cas de figure le script se lance avant la création des 2 id. D'ou l'erreur 'Uncaught TypeError: Cannot read property 'addEventListener' of null '

-
Edité par csei 6 août 2017 à 19:42:27

<< 1 ... 21 22 23 24 >>