Partage
  • Partager sur Facebook
  • Partager sur Twitter

Cours Créez des pages web interactives avec JS

    25 septembre 2016 à 0:51:32

    Manu04 a écrit:

    Bonjour, je pense qu'on utilise cette méthode pour modifier le contenu d'une page par rapport aux actions qu'a fait l'utilisateur.

    Par exemple quand un utilisateur rempli un formulaire, si certains champs qu'il a rempli ne sont pas valides ou au bon format, on pourra lui afficher un message pour lui signaler. Ou quand un utilisateur fait une action(clique sur un bouton ou une zone, choix dans un bouton radio, checkbox... on peut modifier les informations de la page en fonction de son choix...

    Il faut savoir (à vérifier), que les moteurs de recherches n'indexeront pas les textes générés via javaScript, quand on affiche le code source de la page, ils n'apparaissent pas dedans.

    Je me permets de poser quelques questions sur l'envoie des données à un serveur. Je vous mets le code du chapitre 11 pour avoir quelques explications :

    // Exécute un appel AJAX POST
    // Prend en paramètres l'URL cible, la donnée à envoyer et la fonction callback appelée en cas de succès
    // Le paramètre isJson permet d'indiquer si l'envoi concerne des données JSON
    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);
    }
    // Création d'un objet représentant un film
    var film = {
        titre: "Zootopie",
        annee: "2016",
        realisateur: "Byron Howard et Rich Moore"
    };
    // Envoi de l'objet au serveur
    ajaxPost("http://localhost/javascript-web-srv/post_json.php", film,
        function (reponse) {
            // Le film est affiché dans la console en cas de succès
            console.log("Le film " + JSON.stringify(film) + " a été envoyé au serveur");
        },
        true // Valeur du paramètre isJson
    );

    Comment faire pour que  console.error(req.status + " " + req.statusText + " " + url); s'affiche? 

    Comment faire pour simuler un échec d'envoie des données au serveur(peut être lié à ma question précédente)? En modifiant l'url de la requête?

    Comment faire pour afficher un message informant que les données n'ont pas été envoyé au serveur? Dans req.addEventListener("error", function () { } ?


    Bonne journée 

    -
    Edité par Manu04 il y a environ 8 heures


    Bonjour,

    Merci de votre réponse, malheureusement je ne peux pas vous aidez car je suis pas encore à ce stade ^^. J'espère que vous allez d'ici là trouvez rapidement la solution à votre problème :)
    • Partager sur Facebook
    • Partager sur Twitter
      25 septembre 2016 à 6:32:34

      Manu04 a écrit:

      JulienZimmermann a écrit:

      Bonjour à tous,

      J'aurais une question sur la partie de la manipulation du DOM. J'ai donc fini cette partie (exercices, quizz et TP) mais je me pose toujours cette question:

      Dans l'usage quotidien à quel moment peut-on utiliser vraiment cette méthode

      -
      Edité par JulienZimmermann il y a environ 6 heures


      Bonjour, je pense qu'on utilise cette méthode pour modifier le contenu d'une page par rapport aux actions qu'a fait l'utilisateur.

      Par exemple quand un utilisateur rempli un formulaire, si certains champs qu'il a rempli ne sont pas valides ou au bon format, on pourra lui afficher un message pour lui signaler. Ou quand un utilisateur fait une action(clique sur un bouton ou une zone, choix dans un bouton radio, checkbox... on peut modifier les informations de la page en fonction de son choix...

      Il faut savoir (à vérifier), que les moteurs de recherches n'indexeront pas les textes générés via javaScript, quand on affiche le code source de la page, ils n'apparaissent pas dedans.

      Je me permets de poser quelques questions sur l'envoie des données à un serveur. Je vous mets le code du chapitre 11 pour avoir quelques explications :

      // Exécute un appel AJAX POST
      // Prend en paramètres l'URL cible, la donnée à envoyer et la fonction callback appelée en cas de succès
      // Le paramètre isJson permet d'indiquer si l'envoi concerne des données JSON
      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);
      }
      // Création d'un objet représentant un film
      var film = {
          titre: "Zootopie",
          annee: "2016",
          realisateur: "Byron Howard et Rich Moore"
      };
      // Envoi de l'objet au serveur
      ajaxPost("http://localhost/javascript-web-srv/post_json.php", film,
          function (reponse) {
              // Le film est affiché dans la console en cas de succès
              console.log("Le film " + JSON.stringify(film) + " a été envoyé au serveur");
          },
          true // Valeur du paramètre isJson
      );

      Comment faire pour que  console.error(req.status + " " + req.statusText + " " + url); s'affiche? 

      Comment faire pour simuler un échec d'envoie des données au serveur(peut être lié à ma question précédente)? En modifiant l'url de la requête?

      Comment faire pour afficher un message informant que les données n'ont pas été envoyé au serveur? Dans req.addEventListener("error", function () { } ?


      Bonne journée 

      -
      Edité par Manu04 il y a environ 14 heures


      Bonjour,

      Comment faire pour que  console.error(req.status + " " + req.statusText + " " + url); s'affiche?  

      il faut que req status ne soit pas compris entre 200 et 400. voir lien les differentes possibilite : https://fr.wikipedia.org/wiki/Liste_des_codes_HTTP

      Comment faire pour simuler un échec d'envoie des données au serveur(peut être lié à ma question précédente)? En modifiant l'url de la requête?

      modifier l'url avec une faute dedans, c'est comme ca qu'on a fait a un moment du cours. sinon regarde bien le lien wikipedia, tu peux peut etre essaye d'en similer quelques uns

      Comment faire pour afficher un message informant que les données n'ont pas été envoyé au serveur? Dans req.addEventListener("error", function () { } ?

      l'url n'a pas ete charge. J'ai eu cette erreur parfois en codant. Mon erreur etait une mauvaise syntaxe d'ajaxGet ou ajaxPost. Je ne me souvient plus trop du detail, mais cette erreur arrive dans la console facilement.


      • Partager sur Facebook
      • Partager sur Twitter
        25 septembre 2016 à 18:09:03

        Bonjour, merci pour vos réponses. J'ai trouvé juste après avoir posté, je savais que la solution était devant mes yeux, comme quoi prendre un peu de recule, peut aider parfois. :p

        Du coup je vous mets ce que j'ai fait pour y arriver, ce n'est peut être pas la méthode la plus propre.

        J'ai commenté la ligne de la condition qui vérifie le statut renvoyé par le serveur. J'ai créé une variable statu qui contient un nombre et j'ai modifié la ligne de la condition. Je vous mets un extrait du code.

        function ajaxPost(url, data, callback, isJson) {
            var req = new XMLHttpRequest();
            req.open("POST", url);
            req.addEventListener("load", function () {
            var statu = 401;
            if (statu >= 200 && statu < 400) {
            //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 {


        Bien évidement, les données sont envoyées au serveur et stockées, si ce dernier n'a eu aucun problème lors du traitement des données. Çà sert juste à simuler une erreur de ce dernier. Reste plus cas supprimer les deux lignes ajouter et à dé-commenter la ligne une foi les tests effectués.

        Pour l'activité 3, faut il laisser les messages d'erreurs dans la console ou les afficher sur la page?

        Une bonne fin de journée et de week-end à vous ^^

        • Partager sur Facebook
        • Partager sur Twitter
          26 septembre 2016 à 15:23:22

          Je suis dans la meme situation que nakou . avec firefox cela ne fonctionne pas alors que avec chrome c'est nickel ....

          une petite explication serait le bonheur absolu...


          Nakou66 a écrit:

          Oui c'est bien la le problème. Quand je test le code du cours qui s’exécute sur Apache en local :

          Commande envoyée au serveur                                                                                                                                       cours.js:20:9
          Le film {"titre":"Zootopie","annee":"2016","realisateur":"Byron Howard et Rich Moore"} a été envoyé au serveur       cours.js:45:9

          Et lorsque je test les deux exercices qui sont donnés à la fin du cours :

           Blocage d’une requête multi-origines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur http://oc-jswebsrv.herokuapp.com/api/temoignage. Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant.(source inconnue)
          "Erreur réseau avec l'URL http://oc-jswebsrv.herokuapp.com/api/temoignage"

          De toute façon, le serveur Apache local n'a pas d'incidence sur l'envoie de données au serveur web du cours il me semble.  Dans le doute , j'ai testé avec Apache allumé et Apache éteint et j’obtiens toujours la même chose pour le serveur web. Si quelqu'un d'autre pouvait tester savoir si je suis le seul a avoir ce problème ou si les autres ont aussi le même problème.

           **Edit : Problème résolu en testant avec Google Chrome. Du coup je ne sais pas si il y a des configurations a modifier sur Firefox , car même aprés redemarrage de Wamp et de Firefox ca ne fonctionne toujours pas alors qu'avec Chrome, les données sont bien envoyées

          -
          Edité par Nakou66 19 septembre 2016 à 17:43:56



          • Partager sur Facebook
          • Partager sur Twitter
            2 octobre 2016 à 12:11:16

            Bonjour,

            J'ai un souci avec le serveur apache dans la section "Envoyez des données à un serveur web" :

            le fichier de log "post_form.log" n'ai pas créé dans le répertoire du serveur web.

            J'ai bien modifier le fichier httpd.conf, stoppé puis redémarrer le serveur.

            J'ai "copier/coller" le code (pour eviter les erreurs de frappe ou d’inattention) dans cours.html et cours.js

            J'obtiens une réponse d'erreur dans le console :

            <br />
            <b>Warning</b>:  file_put_contents(post_form.log): failed to open stream: Permission non accordée in <b>/opt/lampp/htdocs/javascript-web-srv/post_form.php</b> on line <b>7</b><br />

            Quelqu'un peut m'aider ???

            Merci.

            • Partager sur Facebook
            • Partager sur Twitter
              7 octobre 2016 à 0:08:20

              Bonjour,

              Tout d'abord pour illustrer mes questions : elles font suite à un des exercices de ce cours, chapitre 1 "Réagissez à des événements" de la Partie II dont voici le code html (le quizz interactif) :

              <!doctype html>
              <html>
                  <head>
                      <meta charset="utf-8">
                      <title>Quiz interactif</title>
                  </head>
              
                  <body>
                      <div id="contenu"></div>
              
                      <script src="../js/quizz.js"></script>
                  </body>
              </html>

              Et le code javascript :

              // Liste des questions à afficher. Une question est définie par son énoncé et sa réponse
              
              var questions = [
              
                  {
                      enonce: "Combien font 2+2 ?",
                      reponse: "2+2 = 4"
                  },
              
                  {
                      enonce: "En quelle année Christophe Colomb a-t-il découvert l'Amérique ?",
                      reponse: "1492"
                  },
              
                  {
                      enonce: "On me trouve 2 fois dans l'année, 1 fois dans la semaine, mais pas du tout dans le jour... Qui suis-je ?",
                      reponse: "La lettre N"
                  }
              ];
              
              var contenuElt = document.getElementById("contenu");
              
              var i = 1;
              
              questions.forEach(function(question)
              {
                  var questionElt = document.createElement("p");
                  questionElt.textContent = "Question " + i + " : " + question.enonce;
                  
                  var boutonElt = document.createElement("button");
                  boutonElt.textContent = "Voir la reponse";
                  
                  var reponseElt = document.createElement("p");
                  reponseElt.textContent = question.reponse;
                  
                  contenuElt.appendChild(questionElt);
                  contenuElt.appendChild(boutonElt);
                  
                  boutonElt.addEventListener("click", function ()
                  {
                      contenuElt.insertBefore(reponseElt, boutonElt);
                      contenuElt.removeChild(boutonElt);
                  });
                  
                  i++;
              });

              Ce code fonctionne.

              Ma question concerne ce qui se passe au niveau du addEventListener.

              Déjà si j'ai bien compris, à chaque tour de boucle un "écouteur" va être placé sur mes balises représentées par l'objet "boutonElt" en attendant qui se passe un événement (ici un clic) pour déclencher la fonction anonyme passée en second argument de addEventListener. Est-ce que j'ai bon jusque là ?

              Là où je ne suis plus c'est : où sont inscrites les valeurs des variables de ma fonction anonyme "reponseElt" et "boutonElt" qui changent à chaque tour de boucle ?

              Pourquoi lorsque je clique sur le bouton n°2, c'est bien la valeur de la "reponseElt" n°2 qui apparaît plutôt que la valeur de la dernière "reponseElt" enregistrée en mémoire ?

              Où va JavaScript pour "piocher" la bonne valeur ?

              Voila, je pose à peu près la même question de différentes façons pour essayer de bien me faire comprendre.

              Merci d'avance pour vos lumières.

              -
              Edité par WhiteIndy 7 octobre 2016 à 0:13:27

              • Partager sur Facebook
              • Partager sur Twitter
                7 octobre 2016 à 16:08:32

                WhiteIndy a écrit:

                Bonjour,

                Tout d'abord pour illustrer mes questions : elles font suite à un des exercices de ce cours, chapitre 1 "Réagissez à des événements" de la Partie II dont voici le code html (le quizz interactif) :

                <!doctype html>
                <html>
                    <head>
                        <meta charset="utf-8">
                        <title>Quiz interactif</title>
                    </head>
                
                    <body>
                        <div id="contenu"></div>
                
                        <script src="../js/quizz.js"></script>
                    </body>
                </html>

                Et le code javascript :

                // Liste des questions à afficher. Une question est définie par son énoncé et sa réponse
                
                var questions = [
                
                    {
                        enonce: "Combien font 2+2 ?",
                        reponse: "2+2 = 4"
                    },
                
                    {
                        enonce: "En quelle année Christophe Colomb a-t-il découvert l'Amérique ?",
                        reponse: "1492"
                    },
                
                    {
                        enonce: "On me trouve 2 fois dans l'année, 1 fois dans la semaine, mais pas du tout dans le jour... Qui suis-je ?",
                        reponse: "La lettre N"
                    }
                ];
                
                var contenuElt = document.getElementById("contenu");
                
                var i = 1;
                
                questions.forEach(function(question)
                {
                    var questionElt = document.createElement("p");
                    questionElt.textContent = "Question " + i + " : " + question.enonce;
                    
                    var boutonElt = document.createElement("button");
                    boutonElt.textContent = "Voir la reponse";
                    
                    var reponseElt = document.createElement("p");
                    reponseElt.textContent = question.reponse;
                    
                    contenuElt.appendChild(questionElt);
                    contenuElt.appendChild(boutonElt);
                    
                    boutonElt.addEventListener("click", function ()
                    {
                        contenuElt.insertBefore(reponseElt, boutonElt);
                        contenuElt.removeChild(boutonElt);
                    });
                    
                    i++;
                });

                Ce code fonctionne.

                Ma question concerne ce qui se passe au niveau du addEventListener.

                Déjà si j'ai bien compris, à chaque tour de boucle un "écouteur" va être placé sur mes balises représentées par l'objet "boutonElt" en attendant qui se passe un événement (ici un clic) pour déclencher la fonction anonyme passée en second argument de addEventListener. Est-ce que j'ai bon jusque là ?

                Là où je ne suis plus c'est : où sont inscrites les valeurs des variables de ma fonction anonyme "reponseElt" et "boutonElt" qui changent à chaque tour de boucle ?

                Pourquoi lorsque je clique sur le bouton n°2, c'est bien la valeur de la "reponseElt" n°2 qui apparaît plutôt que la valeur de la dernière "reponseElt" enregistrée en mémoire ?

                Où va JavaScript pour "piocher" la bonne valeur ?

                Voila, je pose à peu près la même question de différentes façons pour essayer de bien me faire comprendre.

                Merci d'avance pour vos lumières.

                -
                Edité par WhiteIndy il y a environ 15 heures


                Je pense que dans l'objet "Event" tu as la methode "target" definissant ou est ton click. Pour cette raison javascript sait qu'elle bouton tu as clique.

                Ennonce du cours  : "Quel que soit le type d'événement, son déclenchement s'accompagne de la création d'un objetEvent qui peut être utilisé par la fonction qui gère l'événement. Cet objet dispose de propriétés qui fournissent des informations sur l'événement, et de méthodes qui permettent d'agir sur celui-ci. 

                La plupart des propriétés de l'objet Event dépendent du type d'événement déclenché. Parmi les propriétés présentes dans Event, quel que soit le type d'événement, type renvoie le type et target renvoie la cible de l'événement, c'est-à-dire l'élément du DOM auquel l'événement est destiné." 


                Essaies de faire des tests avec consoleLog et e.target.textcontent ou autres afin de t'afficher des indices dans la console pouvant t'aider a mieux comprendre.


                -
                Edité par Silkflo 7 octobre 2016 à 16:13:59

                • Partager sur Facebook
                • Partager sur Twitter
                  7 octobre 2016 à 20:19:38

                  Silkflo a écrit:


                  Je pense que dans l'objet "Event" tu as la methode "target" definissant ou est ton click. Pour cette raison javascript sait qu'elle bouton tu as clique.

                  Ennonce du cours  : "Quel que soit le type d'événement, son déclenchement s'accompagne de la création d'un objetEvent qui peut être utilisé par la fonction qui gère l'événement. Cet objet dispose de propriétés qui fournissent des informations sur l'événement, et de méthodes qui permettent d'agir sur celui-ci. 

                  La plupart des propriétés de l'objet Event dépendent du type d'événement déclenché. Parmi les propriétés présentes dans Event, quel que soit le type d'événement, type renvoie le type et target renvoie la cible de l'événement, c'est-à-dire l'élément du DOM auquel l'événement est destiné." 


                  Essaies de faire des tests avec consoleLog et e.target.textcontent ou autres afin de t'afficher des indices dans la console pouvant t'aider a mieux comprendre.

                  Merci pour ta réponse Silkflo, je devrais mieux chercher de ce côté là sous peu, ça m'a l'air d’être une bonne piste...

                  -
                  Edité par WhiteIndy 7 octobre 2016 à 20:21:56

                  • Partager sur Facebook
                  • Partager sur Twitter
                    9 octobre 2016 à 4:26:11

                    Bonjour, j'ai attaqué la partie du cours sur les formulaires, mais j'ai un peu de mal.

                    J'ai essayé avec ce code tout simple qui demande à un joueur son nom, et qui l'affiche ensuite dans une fenêtre d'alerte. Mais même un truc aussi simple, je n'y parviens pas. Il y a visiblement quelque chose qui m'échappe.

                    <!DOCTYPE>
                    <html>
                    	<head>
                    		<meta charset="utf-8" />
                    		<title>Les formulaires</title>
                    	</head>
                    	
                    	<body>
                    		<p>
                    			<form id="formulaire" method="post" action="formulaire.js"/>
                    				<label for="joueur1">Joueur 1 </label><input type="text" name="joueur1" id="joueur1" placeholder="Nom du joueur 1"/>
                    				<input type="submit" value="Valider" />
                    			</form>
                    			
                    		</p>
                    		<script type="text/javascript" src="formulaire.js"></script>
                    	</body>
                    </html>

                    Voilà pour mon code HTML.

                    var formulaire = document.getElementById("formulaire");
                    var joueur_1 = document.getElementById("joueur1").value;
                    
                    
                    formulaire.addEventListener('submit', function(e)
                    {
                    alert("Vous vous appelez" + joueur_1 );
                    });
                    





                    • Partager sur Facebook
                    • Partager sur Twitter
                      9 octobre 2016 à 7:53:22

                      Illirio a écrit:

                      Bonjour, j'ai attaqué la partie du cours sur les formulaires, mais j'ai un peu de mal.

                      J'ai essayé avec ce code tout simple qui demande à un joueur son nom, et qui l'affiche ensuite dans une fenêtre d'alerte. Mais même un truc aussi simple, je n'y parviens pas. Il y a visiblement quelque chose qui m'échappe.

                      <!DOCTYPE>
                      <html>
                      	<head>
                      		<meta charset="utf-8" />
                      		<title>Les formulaires</title>
                      	</head>
                      	
                      	<body>
                      		<p>
                      			<form id="formulaire" method="post" action="formulaire.js"/>
                      				<label for="joueur1">Joueur 1 </label><input type="text" name="joueur1" id="joueur1" placeholder="Nom du joueur 1"/>
                      				<input type="submit" value="Valider" />
                      			</form>
                      			
                      		</p>
                      		<script type="text/javascript" src="formulaire.js"></script>
                      	</body>
                      </html>

                      Voilà pour mon code HTML.

                      var formulaire = document.getElementById("formulaire");
                      var joueur_1 = document.getElementById("joueur1").value;
                      
                      
                      formulaire.addEventListener('submit', function(e)
                      {
                      alert("Vous vous appelez" + joueur_1 );
                      });
                      



                      Salut,

                      sur ton fichier html tu ne peux pas mettre une balise<form> a l'interieur d'une balise <p>.

                      J'ai modifie ton script pour que ca marche, inspires en toi ( j'utilise test.js au lieu de formulaire.js).

                      J'ai prefere creer la case input via js et y donner mes variables.

                      fichier HTML :

                      <!DOCTYPE>
                      <html>
                      <head>
                          <meta charset="utf-8" />
                          <title>Les formulaires</title>
                      </head>
                      
                      <body>
                          
                              <form id="formulaire">
                              <label for="joueur1" id="joueur1">Joueur 1 </label>
                                 
                              <input type="submit" value="Valider" />
                              </form>
                      
                          
                          <script src="../js/test.js"></script>
                      </body>
                      </html>

                       fichier js :

                      var formulaire = document.getElementById("formulaire");
                      var joueur_1 = document.getElementById("joueur1");
                      
                      var inputNomElt = document.createElement("input");
                      inputNomElt.type = "text";
                      inputNomElt.placeholder = "Nom du joueur 1";
                      
                      joueur_1.appendChild(inputNomElt);
                      
                      
                      
                      formulaire.addEventListener('submit', function (e) {
                          var nom = inputNomElt.value
                        
                          
                          alert("Vous vous appelez " + nom);
                      });







                      • Partager sur Facebook
                      • Partager sur Twitter
                        9 octobre 2016 à 8:56:18

                        Bonjour,

                        Visiblement, il y a un problème avec l'activité 2 du chapitre 9.

                        Pour le corrigé, Firefox me renvoie des erreurs :

                        https://oc-courses.github.io/javascript-web/chapitre_9/html/lexique.html#

                        Ça ne marche pas non plus sur Chrome :

                        Quelqu'un a-t-il le même problème que moi ?

                        Merci

                        • Partager sur Facebook
                        • Partager sur Twitter
                          9 octobre 2016 à 9:50:42

                          AlbB5 a écrit:

                          Bonjour,

                          Visiblement, il y a un problème avec l'activité 2 du chapitre 9.

                          Pour le corrigé, Firefox me renvoie des erreurs :

                          https://oc-courses.github.io/javascript-web/chapitre_9/html/lexique.html#

                          Ça ne marche pas non plus sur Chrome :

                          Quelqu'un a-t-il le même problème que moi ?

                          Merci

                          oui visiblement y a un soucis quelque part.

                          utilise le corrige telechargeable :

                          /*
                          Exercice : mini-lexique
                          */
                          
                          var motsElt = document.getElementById("mots");
                          
                          function afficherMots(lettre) {
                              ajaxGet("http://oc-jswebsrv.herokuapp.com/api/lexique/" + lettre, function (reponse) {
                                  var mots = JSON.parse(reponse);
                                  motsElt.innerHTML = "";
                                  if (mots.length > 0) {
                                      mots.forEach(function (mot) {
                                          var termeElt = document.createElement("h3");
                                          termeElt.textContent = mot.term;
                                          var definitionElt = document.createElement("div");
                                          definitionElt.textContent = mot.definition;
                                          motsElt.appendChild(termeElt);
                                          motsElt.appendChild(definitionElt);
                                      });
                                  } else {
                                      var msgElt = document.createElement("p");
                                      msgElt.textContent = "Aucun mot trouvé pour " + lettre;
                                      motsElt.appendChild(msgElt);
                                  }
                              });
                          }
                          
                          var lettresElt = document.getElementById("lettres");
                          
                          var lettres = ["A", "B", "C", "D", "E"];
                          lettres.forEach(function (lettre) {
                              var lettreElt = document.createElement("a");
                              lettreElt.textContent = lettre;
                              lettreElt.href = "#";
                              lettreElt.addEventListener("click", function () {
                                  afficherMots(lettre);
                              });
                              lettresElt.appendChild(lettreElt);
                              lettresElt.appendChild(document.createTextNode(" | "));
                          });
                          lettresElt.appendChild(document.createTextNode("..."));

                          il n'y a pas d'erreur remontant dans la console


                          • Partager sur Facebook
                          • Partager sur Twitter
                            9 octobre 2016 à 17:19:28

                            Merci beaucoup !

                            J'ai encore des erreurs sur Firefox mais ça passe sur Chrome.

                            • Partager sur Facebook
                            • Partager sur Twitter
                              11 octobre 2016 à 14:31:26

                              Bonjour,

                              Je travaille sur l'activité 2 et quand je clique sur ajouter, la page se recharge et on ne voit que les 3 liens d'origine... En clair, je ne vois jamais mon nouveau lien. Si je vais dans le debogueur, je vois que le lien supplémentaire est créé. Mais dès que'il est créé, la page entière se recharge et donc supprime mon nouveau lien.

                              Quelqu’un pourrait m'aider ?

                              • Partager sur Facebook
                              • Partager sur Twitter
                                14 octobre 2016 à 19:14:01

                                Bonjour, 

                                je viens de commencer ce cours, et je dois avouer que cela est légèrement déconcertant comparé aux premiers cours sur JS. Bref, je suis en train de faire les exercices du chap 2 : parcourez le DOM, plus spécifiquement l'exercice numéro 2 : je dois afficher le nombre total de liens wikipédia (fait), je dois afficher la valeur du premier lien, et enfin, je dois afficher la valeur du dernier lien.

                                La console me donne le résultat suivant : 

                                Ma question est la suivante : je voudrais simplement afficher le lien, et pas les différentes balises HTML. Et je voudrais savoir comment afficher la valeur d'un élément AUTRE QUE LE PREMIER (donné par querySelector), et l'occurence ici, le dernier élément.

                                Voici mon code: 

                                function infoLiens (balise) {
                                	// on crée deux variable: une pour afficher le nombre de liens et l'autre pour afficher la valeur du lien (par défaut)
                                	var nombreLiensWiki = document.getElementsByTagName(balise).length;
                                	var valeurLienWiki = document.querySelector(balise);
                                	
                                	// Ensuite on ajoute une condition if qui va conditionner ce que nous devrons afficher
                                	if (nombreLiensWiki > 0) { //tant que nous avons des liens qu iexistent...
                                		console.log(nombreLiensWiki); // ...on affiche le nombre de liens
                                		console.log(valeurLienWiki); // on affiche la valeur du premier lien
                                		console.log(valeurLienWiki[nombreLiensWiki - 1].getAttribute(balise)); // ... et celle du second lien
                                	}
                                	
                                	
                                }
                                
                                console.log(infoLiens("a"));



                                • Partager sur Facebook
                                • Partager sur Twitter
                                  14 octobre 2016 à 20:43:52

                                  Bonsoir KyssamaJeanMartin. Pour récupérer l'adresse du lien, il faut utiliser la propriété .href, qui va te renvoyer la valeur de l'attribut href du lien <a>. Ou bien deuxième solution que tu as utilisé, getAttribute(), mais il faut passer en paramètre le nom de l'attribut et pas le nom de la balise. Tu as deux erreurs ici :

                                  console.log(valeurLienWiki[nombreLiensWiki - 1].getAttribute(balise));

                                  La variable valeurLienWiki n'est pas un tableau d'objet mais seulement un objet représentant la première balise <a>, puisque tu as utilisé querySelector, tu ne récupères que le premier lien. Si tu veux récupérer tous les liens, il faut utiliser querySelectorAll() :

                                  var valeurLienWiki = document.querySelectorAll(balise);

                                  Ensuite, si tu veux accéder à un élément de valeurLienWiki, tu peut y accéder comme un tableau, par exemple pour récupérer l'attribut href du premier lien tu fait :

                                  console.log(valeurLienWiki[0].href);

                                  Dernière petite erreur :

                                  console.log(infoLiens("a"));

                                  Inutile d'utiliser console.log ici, puisque tu l'utilises déjà dans la fonction infoLiens(), sinon ça va te renvoyer "undefined" dans la console.

                                  -
                                  Edité par n1col4s 14 octobre 2016 à 20:44:59

                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                  "In chess, it's called Zugzwang, when the only viable move is not to move."
                                    15 octobre 2016 à 10:12:39

                                    n1col4s a écrit:

                                    Bonsoir KyssamaJeanMartin. Pour récupérer l'adresse du lien, il faut utiliser la propriété .href, qui va te renvoyer la valeur de l'attribut href du lien <a>. Ou bien deuxième solution que tu as utilisé, getAttribute(), mais il faut passer en paramètre le nom de l'attribut et pas le nom de la balise. Tu as deux erreurs ici :

                                    console.log(valeurLienWiki[nombreLiensWiki - 1].getAttribute(balise));

                                    La variable valeurLienWiki n'est pas un tableau d'objet mais seulement un objet représentant la première balise <a>, puisque tu as utilisé querySelector, tu ne récupères que le premier lien. Si tu veux récupérer tous les liens, il faut utiliser querySelectorAll() :

                                    var valeurLienWiki = document.querySelectorAll(balise);

                                    Ensuite, si tu veux accéder à un élément de valeurLienWiki, tu peut y accéder comme un tableau, par exemple pour récupérer l'attribut href du premier lien tu fait :

                                    console.log(valeurLienWiki[0].href);

                                    Dernière petite erreur :

                                    console.log(infoLiens("a"));

                                    Inutile d'utiliser console.log ici, puisque tu l'utilises déjà dans la fonction infoLiens(), sinon ça va te renvoyer "undefined" dans la console.

                                    -
                                    Edité par n1col4s il y a environ 13 heures

                                    Merci pour le feedback :) !

                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                      17 octobre 2016 à 6:40:46

                                      question Exercices chapitre 3 : modifier la structure de la page 

                                      Ma question porte sur l'exercice liste des journaux 

                                      Voici mon code : 

                                      var journaux = ["http://www.lefigaro.fr/", "http://www.liberation.fr/", "http://www.lemonde.fr/"];
                                      
                                      // On va à présent insérer les éléments de ce tableau dans le DOM
                                      
                                      // chaque lien aura une variable associée 
                                      // PS : FAIRE VRAIMENT ATTENTION A MA SYNTAXE !!!!!!
                                      
                                      var figaroElt = document.createElement("p"); // création d'un élément paragraphe 
                                      var lien1Elt = document.createElement("a");
                                      figaroElt.id = "lien1"; // info 1 : son identifiant 
                                      lien1Elt.textContent = "Le Figaro"; // ne pas oublier d'ajouter du contenu textuel, sinon rien ne sera visible sur la page web !
                                      lien1Elt.href = journaux[0]; // on ajoute comme lien le premier élément de la variable journaux
                                      figaroElt.appendChild(lien1Elt); // on ajoute le lien au paragraphe 
                                      
                                      // Variable 2
                                      var libeElt = document.createElement("p");
                                      var lien2Elt = document.createElement("a");
                                      libeElt.id = "lien2";
                                      lien2Elt.textContent = "Libération";
                                      lien2Elt.href = journaux[1];
                                      libeElt.appendChild(lien2Elt);
                                      
                                      // variable 3
                                      var mondeElt = document.createElement("p");
                                      var lien3Elt = document.createElement("a");
                                      mondeElt.id = "lien3";
                                      lien3Elt.textContent = "Le monde";
                                      lien3Elt.href = journaux[2];
                                      mondeElt.appendChild(lien3Elt);
                                      
                                      // ON INSERE ENFIN CES 3 ELEMENTS DANS LE DOM 
                                      document.getElementById("contenu").appendChild(figaroElt);
                                      docuement.getElementById("contenu").appendChild(libeElt);
                                      document.getElementById("contenu").appendChild(mondeElt);



                                      Le problème est que la console n'affiche rien du tout, donc je ne sais meme pas si mon code est valable ou pas. pouvez vous me dire si mon approche est censée ?

                                      PS : il s'agit d'un tableau (journaux) qui contient des liens de sites. le but est d'afficher les liens vers les 3 url du tableau.

                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        17 octobre 2016 à 10:42:07

                                        Bonjour,

                                        je suis sur l'activité 3 et je bloque... J'ai commencé par faire afficher au programme les liens qui sont sur l'api. Et quand je lance le fichier il ne se passe rien... Je mettrais bien le fichier js mais je ne sais pas comment l'insérer ?

                                        Merci de vos conseils et de votre aide

                                        Ronan

                                        -
                                        Edité par RonanLeRoy 17 octobre 2016 à 10:43:51

                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                          22 octobre 2016 à 15:46:05

                                          Bonjour à tous, 

                                          Je suis en train de faire l'activité 1 du cours: Créez un site de partage de liens.

                                          Malheureusement je suis un peu bloqué et je sais pas trop pas où commencer pour réaliser cette activité. 

                                          J'espère qu'une bonne âme pourra m'aider ;)

                                          Merci.

                                          Maxime

                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                            23 octobre 2016 à 14:58:11

                                            MaximeSanthonnax a écrit:

                                            Bonjour à tous, 

                                            Je suis en train de faire l'activité 1 du cours: Créez un site de partage de liens.

                                            Malheureusement je suis un peu bloqué et je sais pas trop pas où commencer pour réaliser cette activité. 

                                            J'espère qu'une bonne âme pourra m'aider ;)

                                            Merci.

                                            Maxime

                                            Tu crees une fonction forEach pour recuperer les elements de listeLiens,

                                            Ensuite tu crees touts tes elements (exemple : var pElt = document.createElement("p");

                                            Tu fais la mise en mage avec style.

                                            Et tu ordonnes bien tout tes enfants avec appenChild

                                            • Partager sur Facebook
                                            • Partager sur Twitter
                                              24 octobre 2016 à 18:49:30

                                              Bonjour,

                                              J'ai eu une drôle de surprise en corrigeant l'activité 1 de ce cours.

                                              Un des élèves avait exactement le corrigé-type fournit pour la correction.

                                              Je n'ai donc mis que 5/11 points car je pense qu'il y a eu tricherie.

                                              Qu'en pensez-vous ?

                                              Merci

                                              • Partager sur Facebook
                                              • Partager sur Twitter
                                                24 octobre 2016 à 19:26:06

                                                @JulienCarrier

                                                Je trouve que tu as été vraiment très ( trop ?) gentil ! C'est très souvent qu'il y a ce genre de foutage de g****e !!! Il y a d'un côté ceux qui t'envoient un fichier inapproprié et ceux qui t'envoient le corrigé type (généralement le même genre de personne, c'est la suite logique): de quoi décrédibiliser les certifications. C'est dommage pour tous ceux qui se donnent la peine de travailler dans le but d'avoir de meilleures connaissances pour obtenir un job! Avec 45 cours suivis dont 33 certifiants, je sais de quoi je parle et je trouve que ça arrive de plus en plus souvent. C'est un des travers de l'homme que de tricher ;-(

                                                Bien à toi et persévère dans ton apprentissage

                                                A+

                                                • Partager sur Facebook
                                                • Partager sur Twitter
                                                La chute n'est pas un échec, l'échec c'est de rester là où on est tombé!
                                                  24 octobre 2016 à 20:41:46

                                                  Philippe2463 a écrit:

                                                  @JulienCarrier

                                                  Je trouve que tu as été vraiment très ( trop ?) gentil ! C'est très souvent qu'il y a ce genre de foutage de g****e !!! Il y a d'un côté ceux qui t'envoient un fichier inapproprié et ceux qui t'envoient le corrigé type (généralement le même genre de personne, c'est la suite logique): de quoi décrédibiliser les certifications. C'est dommage pour tous ceux qui se donnent la peine de travailler dans le but d'avoir de meilleures connaissances pour obtenir un job! Avec 45 cours suivis dont 33 certifiants, je sais de quoi je parle et je trouve que ça arrive de plus en plus souvent. C'est un des travers de l'homme que de tricher ;-(

                                                  Bien à toi et persévère dans ton apprentissage

                                                  A+

                                                  Merci pour la réponse.

                                                  Effectivement je suis d'une nature un poil trop cool et c'était tellement énorme que j'aurais dû sanctionner par 0. 

                                                  Je n'avais pas assez de retour d'expérience sur ce genre de problème.

                                                  Maintenant que je sais que c'est courant, la prochaine fois le zéro va tomber.

                                                  • Partager sur Facebook
                                                  • Partager sur Twitter
                                                    24 octobre 2016 à 23:03:00

                                                    @Silkflo

                                                    Merci beaucoup pour tes explications !!  

                                                    A bientôt ;)

                                                    Maxime

                                                    • Partager sur Facebook
                                                    • Partager sur Twitter
                                                      26 octobre 2016 à 17:32:09

                                                      Bonsoir tout le monde,

                                                      Voilà je suis bloqué à l'Activité 2, je n'arrive pas à affiché mon nouveau lien :(, par contre j'arrive à l'afficher avec la fonction "alert". 
                                                      Es-ce que vous pouvez me dire si je suis sur la bonne voie et si je touche au but ou si je suis complètement à l'Ouest ^^.

                                                      Merci d'avance.
                                                      /* 
                                                      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
                                                      
                                                      var bigTitle = document.querySelector("h1");
                                                      bigTitle.textContent = "Activité 2"; //Changement du titre Activité 1 en Activité 2
                                                      
                                                          
                                                      //Création d'un nouvelle élément Div
                                                      var newDiv = document.createElement("div");
                                                      
                                                      //Création du bouton pour ajouter un lien
                                                      var button = document.createElement("button");
                                                      button.textContent = "Ajouter un lien";
                                                      button.style.marginLeft = "10px";
                                                      newDiv.appendChild(button);
                                                      
                                                      document.getElementById("contenu").appendChild(newDiv);
                                                      
                                                      //Création d'un formulaire au moment d'appuyer sur le bouton "Ajouter lien"
                                                      
                                                      button.addEventListener("click",function(){
                                                          var newForm = document.createElement("form");
                                                          newForm.id = "form";
                                                      
                                                          newDiv.innerHTML = "";//Au moment de cliquer sur "Ajouter lien" le bouton disparait
                                                          newDiv.appendChild(newForm);
                                                      
                                                          //Création du nom
                                                          var newName = document.createElement("input");
                                                          newName.type = "text";
                                                          newName.placeholder = "Entrez un nom";
                                                      
                                                          //Création du titre
                                                          var newTitle = document.createElement("input");
                                                          newTitle.type = "text";
                                                          newTitle.style.marginLeft =" 10px";
                                                          newTitle.placeholder ="Entrez le titre du lien";
                                                      
                                                          //Création du lien
                                                          var newLink = document.createElement("input");
                                                          newLink.id = "link";
                                                          newLink.type = "text";
                                                          newLink.style.marginLeft = "10px";
                                                          newLink.placeholder = "Entrez l'URL du lien";
                                                          newLink.required = true;
                                                          
                                                      
                                                          //Création du bouton ajouter
                                                          var newButton = document.createElement("button");
                                                          newButton.textContent = "Ajouter";
                                                          newButton.id = "newlink";
                                                          newButton.type = "submit";
                                                          newButton.style.marginLeft = "10px";
                                                      
                                                          //Ajout de tout les nouveaux éléments dans le formulaire
                                                          newForm.appendChild(newName);
                                                          newForm.appendChild(newTitle);
                                                          newForm.appendChild(newLink);
                                                          newForm.appendChild(newButton);
                                                      
                                                      document.getElementById("newlink").addEventListener("click", function(){
                                                      
                                                          var newObject = {
                                                              titre: newTitle.value,
                                                              url: newLink.value,
                                                              auteur: newName.value
                                                          };
                                                      
                                                          alert ("titre : "+newObject.titre+"\nurl : "+newObject.url+ "\nauteur : "+newObject.auteur);
                                                          
                                                          });
                                                          
                                                      });

                                                      • Partager sur Facebook
                                                      • Partager sur Twitter
                                                        26 octobre 2016 à 18:18:21

                                                        JulienZimmermann a écrit:

                                                        Bonsoir tout le monde,

                                                        Voilà je suis bloqué à l'Activité 2, je n'arrive pas à affiché mon nouveau lien :(, par contre j'arrive à l'afficher avec la fonction "alert". 
                                                        Es-ce que vous pouvez me dire si je suis sur la bonne voie et si je touche au but ou si je suis complètement à l'Ouest ^^.

                                                        Merci d'avance.

                                                        /* 
                                                        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
                                                        
                                                        var bigTitle = document.querySelector("h1");
                                                        bigTitle.textContent = "Activité 2"; //Changement du titre Activité 1 en Activité 2
                                                        
                                                            
                                                        //Création d'un nouvelle élément Div
                                                        var newDiv = document.createElement("div");
                                                        
                                                        //Création du bouton pour ajouter un lien
                                                        var button = document.createElement("button");
                                                        button.textContent = "Ajouter un lien";
                                                        button.style.marginLeft = "10px";
                                                        newDiv.appendChild(button);
                                                        
                                                        document.getElementById("contenu").appendChild(newDiv);
                                                        
                                                        //Création d'un formulaire au moment d'appuyer sur le bouton "Ajouter lien"
                                                        
                                                        button.addEventListener("click",function(){
                                                            var newForm = document.createElement("form");
                                                            newForm.id = "form";
                                                        
                                                            newDiv.innerHTML = "";//Au moment de cliquer sur "Ajouter lien" le bouton disparait
                                                            newDiv.appendChild(newForm);
                                                        
                                                            //Création du nom
                                                            var newName = document.createElement("input");
                                                            newName.type = "text";
                                                            newName.placeholder = "Entrez un nom";
                                                        
                                                            //Création du titre
                                                            var newTitle = document.createElement("input");
                                                            newTitle.type = "text";
                                                            newTitle.style.marginLeft =" 10px";
                                                            newTitle.placeholder ="Entrez le titre du lien";
                                                        
                                                            //Création du lien
                                                            var newLink = document.createElement("input");
                                                            newLink.id = "link";
                                                            newLink.type = "text";
                                                            newLink.style.marginLeft = "10px";
                                                            newLink.placeholder = "Entrez l'URL du lien";
                                                            newLink.required = true;
                                                            
                                                        
                                                            //Création du bouton ajouter
                                                            var newButton = document.createElement("button");
                                                            newButton.textContent = "Ajouter";
                                                            newButton.id = "newlink";
                                                            newButton.type = "submit";
                                                            newButton.style.marginLeft = "10px";
                                                        
                                                            //Ajout de tout les nouveaux éléments dans le formulaire
                                                            newForm.appendChild(newName);
                                                            newForm.appendChild(newTitle);
                                                            newForm.appendChild(newLink);
                                                            newForm.appendChild(newButton);
                                                        
                                                        document.getElementById("newlink").addEventListener("click", function(){
                                                        
                                                            var newObject = {
                                                                titre: newTitle.value,
                                                                url: newLink.value,
                                                                auteur: newName.value
                                                            };
                                                        
                                                            alert ("titre : "+newObject.titre+"\nurl : "+newObject.url+ "\nauteur : "+newObject.auteur);
                                                            
                                                            });
                                                            
                                                        });

                                                        Je pense que tu es dans la bonne direction, tu as realise la 1ere partie de l'activite 2.

                                                        Il te reste a affiche toutes les rentrers de tes input sur ta page apres avoir clique ton bouton.

                                                        je l'ai fais de la maniere suivante, meme si c'est un peu different de la correction ca marche :

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

                                                        tu cree de nouvaux elements

                                                        tu utilises ces nouveaux element et avec textcontent tu va chercher les value que tu a deja creer (newTitle.value)  pour les afficher .

                                                        un peu sur le meme modele que l'activite1

                                                        }

                                                         Attention mon raisonnement est different de la correction....

                                                        Bon courage!

                                                        • Partager sur Facebook
                                                        • Partager sur Twitter
                                                          26 octobre 2016 à 18:42:21

                                                          Merci du ton aide je vais regarder ça ^^

                                                          • Partager sur Facebook
                                                          • Partager sur Twitter
                                                            30 octobre 2016 à 5:32:38

                                                            Bonjour,

                                                            Je suis en train de caler complètement sur l'activité 2 ... Si quelqu’un peut m'aiguiller please ...

                                                            Pour info, ce qui ne marche pas chez moi c'est la dernière étape, celle ou une fois le formulaire remplis  son contenu est censé s'affiché à la suite ...

                                                            Le code que j'ai tapé en fonction de ma méthode .. :

                                                            /* 
                                                            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"
                                                                }
                                                            ];
                                                            
                                                            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));
                                                            
                                                                var ligneTitre = document.createElement("h4");
                                                                ligneTitre.style.margin = "0px";
                                                                ligneTitre.appendChild(titreLien);
                                                                ligneTitre.appendChild(urlLien);
                                                            
                                                                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;
                                                            }
                                                            function creerForm(){
                                                                var inputTitreAjoutLien = document.createElement("input");
                                                                inputTitreAjoutLien.type = "text";
                                                                inputTitreAjoutLien.name = "titre";
                                                                inputTitreAjoutLien.id = "titre";
                                                                inputTitreAjoutLien.placeholder = "Titre du lien";
                                                                inputTitreAjoutLien.required = "required"
                                                            
                                                                var inputUrlAjoutLien = document.createElement("input");
                                                                inputUrlAjoutLien.type = "text";
                                                                inputUrlAjoutLien.name = "Url";
                                                                inputUrlAjoutLien.id = "Url";
                                                                inputUrlAjoutLien.placeholder = "URL du lien";
                                                                inputUrlAjoutLien.required = "required";
                                                            
                                                                var inputAuteurAjoutLien = document.createElement("input");
                                                                inputAuteurAjoutLien.type = "text";
                                                                inputAuteurAjoutLien.name = "Auteur";
                                                                inputAuteurAjoutLien.id = "Auteur";
                                                                inputAuteurAjoutLien.placeholder = "Auteur du lien";
                                                                inputAuteurAjoutLien.required = "required";
                                                            
                                                                var inputSubmitAjoutLien = document.createElement("input");
                                                                inputSubmitAjoutLien.type = "submit";
                                                                inputSubmitAjoutLien.id = "ajouter";
                                                                inputSubmitAjoutLien.value = "Ajouter";
                                                            
                                                                var formAjoutLien = document.createElement("form");
                                                                formAjoutLien.appendChild(inputTitreAjoutLien);
                                                                formAjoutLien.appendChild(inputUrlAjoutLien);
                                                                formAjoutLien.appendChild(inputAuteurAjoutLien);
                                                                formAjoutLien.appendChild(inputSubmitAjoutLien);
                                                            
                                                                document.getElementById("para").appendChild(formAjoutLien);
                                                            
                                                                var ajouterBtn = document.getElementById("ajouter");
                                                                ajouterBtn.addEventListener("click", ajoutLien);
                                                            }
                                                            function verifUrl(){
                                                                document.getElementById("url").addEventListener("blur", function (e){
                                                                        var urlAjout = e.target.value
                                                                        if (urlAjout.indexOf("http://") === -1){
                                                                            urlAjout = "http://"+e.target.value;
                                                                        }
                                                                        else if (urlAjout.indexOf("https://") === -1){
                                                                            urlAjout = "http://"+e.target.value;
                                                                        }
                                                                });
                                                            }
                                                            function ajoutLien(){
                                                                var form = document.querySelector("form");
                                                                form.addEventListener("submit", function (e){
                                                                    verifUrl();
                                                                    var auteurAjout = form.input.auteur.value;
                                                                    var titreAjout = form.input.titre.value;
                                                                    var nouveauLien = {titre: titreAjout, url: urlAjout, auteur: auteurAjout};
                                                                    elementLienAjout = creerElementLien(nouveaulien);
                                                                    contenu.appendchild(elementLienAjout);
                                                                });
                                                            }
                                                            function clicUn(){
                                                                document.getElementById("bouton").remove();
                                                                creerForm();
                                                            }
                                                            
                                                            var boutonAjout = document.createElement("button");
                                                            boutonAjout.id = "bouton";
                                                            boutonAjout.textContent = "Ajouter un lien";
                                                            
                                                            var paraBoutonAjout = document.createElement("p");
                                                            paraBoutonAjout.id = "para";
                                                            
                                                            document.getElementById("contenu").appendChild(paraBoutonAjout);
                                                            document.getElementById("para").appendChild(boutonAjout);
                                                            
                                                            var boutonElt = document.getElementById("bouton");
                                                            boutonElt.addEventListener("click", clicUn);
                                                            
                                                            var contenu = document.getElementById("contenu");
                                                            
                                                            listeLiens.forEach(function (lien) {
                                                                var elementLien = creerElementLien(lien);
                                                                contenu.appendChild(elementLien);
                                                            });



                                                            • Partager sur Facebook
                                                            • Partager sur Twitter
                                                              30 octobre 2016 à 23:31:21

                                                              Bonjour à tous.
                                                              Tout d'abord je tiens à tous vous remercier d'être présent sur ce forum. Il m'as beaucoup aidé dans la résolutions de problèmes en tout genres.
                                                              Je viens vers vous car après plusieurs jours à chercher dans tout les sens, je n'arrive pas à resoudre mon problème :
                                                              Dans l'extrait de code si dessous ( qui correspond à l'activité 2 du cours ) je n'arrive pas à rentrer dans la fonction qui est censé s'effectuer apres le submit., comme si mon:
                                                              e.preventDefault(); 
                                                              ne fonctionne pas quel que soit l'endroit ou je le place...
                                                              bref je vous donne ce que j'ai, si vous voulez bien eclairer ma lanterne :)
                                                              Merci à tous. 
                                                              Voici le code :
                                                              /*
                                                              Activité 2
                                                              */
                                                              
                                                              function creationForm(){
                                                              // création du formulaire
                                                                  var formulaireAjout = document.createElement("form");
                                                                  var auteurUtilisateur = document.createElement("input");
                                                                      auteurUtilisateur.type = "text";
                                                                      auteurUtilisateur.name = "auteurForm";
                                                                      auteurUtilisateur.id = "auteurForm";
                                                                      auteurUtilisateur.focus();
                                                                      auteurUtilisateur.style.marginRight = "10px";
                                                                      auteurUtilisateur.placeholder = "Entrez votre nom";
                                                                      auteurUtilisateur.required = true;
                                                                   
                                                                  var titreUtilisateur = document.createElement("input");
                                                                      titreUtilisateur.type = "text";
                                                                      titreUtilisateur.name = "titreForm";
                                                                      titreUtilisateur.id = "titreForm";
                                                                      titreUtilisateur.focus();
                                                                      titreUtilisateur.style.marginRight = "10px";
                                                                      titreUtilisateur.placeholder = "Entrez le titre du lien";
                                                                      titreUtilisateur.required = true;
                                                                   
                                                                  var urlUtilisateur = document.createElement("input");
                                                                      urlUtilisateur.type = "text";
                                                                      urlUtilisateur.name = "urlForm";
                                                                      urlUtilisateur.id = "urlForm";
                                                                      urlUtilisateur.focus();
                                                                      urlUtilisateur.style.marginRight = "10px";
                                                                      urlUtilisateur.placeholder = "Entrez l'url du lien";
                                                                      urlUtilisateur.required = true;
                                                                   
                                                              
                                                                   
                                                                  formulaireAjout.appendChild(auteurUtilisateur);
                                                                  formulaireAjout.appendChild(titreUtilisateur);
                                                                  formulaireAjout.appendChild(urlUtilisateur);
                                                              
                                                              
                                                                  return(formulaireAjout)
                                                              }
                                                              
                                                              
                                                              //création du bouton pour ajouter un nouveau lien
                                                              var zoneAjout = document.createElement("div");
                                                              var boutonAjout = document.createElement("button");
                                                              boutonAjout.id = "Ajouter";
                                                              boutonAjout.textContent = "Ajouter un lien";
                                                              zoneAjout.appendChild(boutonAjout);
                                                              contenu.insertBefore(zoneAjout,contenu.firstChild);
                                                              
                                                              var newForm = creationForm();
                                                              
                                                              var boutonUtilisateur = document.createElement("input");
                                                              boutonUtilisateur.id = "boutonValid";
                                                              boutonUtilisateur.type = "submit";
                                                              boutonUtilisateur.value = "Envoyer";
                                                              newForm.appendChild(boutonUtilisateur);
                                                              
                                                              
                                                              // Création du message d'information
                                                              function creerMessage(lien){
                                                                  var infoElt = document.createElement("div");
                                                                  infoElt.style.backgroundColor= "#ccedf0";
                                                                  infoElt.style.height = "50px";
                                                                  infoElt.style.width = "100%";
                                                                  infoElt.style.textAlign = "center";
                                                                  infoElt.style.fontSize = "20px";
                                                                  infoElt.style.fontWeight = "bold";  
                                                                  infoElt.style.color = "#428bca";
                                                                  infoElt.textContent = "Le lien \"" + lien.titre + "\" a bien été ajouté.";
                                                              
                                                                  return (infoElt)
                                                              }
                                                              
                                                              boutonAjout.addEventListener("click", function disparaitreBouton() {
                                                                  boutonAjout.style.visibility = "collapse";
                                                                  zoneAjout.appendChild(newForm);
                                                              
                                                                  document.getElementById("boutonValid").addEventListener("submit", function (e) {
                                                                          // Annulation de l'envoi des données
                                                                      console.log("coucou2") ;
                                                                      
                                                                      var url = urlUtilisateur.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 lien2 = {
                                                                          titre: titreUtilisateur.value,
                                                                          url: urlUtilisateur.value,
                                                                          auteur: auteurUtilisateur.value
                                                                      };
                                                                          var lienElt = creerElementLien(lien2);
                                                                          // Ajoute le nouveau lien en haut de la liste
                                                                          contenu.insertBefore(lienElt, contenu.firstChild);
                                                              
                                                                          var divInfoElt = document.createElement("div");
                                                                          var divInfoContent =creerMessage(lien2);
                                                                          divInfoElt.appendChild(divInfoContent)
                                                                          contenu.insertBefore(divInfoElt,contenu.firstChild);
                                                                            
                                                                          // Suppression du message après 2 secondes
                                                                          setTimeout(function () {
                                                                          contenu.removeChild(divInfoElt);
                                                                          }, 2000);
                                                                          
                                                                          e.preventDefault(); // Annulation de l'envoi des données
                                                                      });
                                                                   
                                                              });
                                                              
                                                              


                                                              -
                                                              Edité par JulienSolario 30 octobre 2016 à 23:32:02

                                                              • Partager sur Facebook
                                                              • Partager sur Twitter

                                                              Cours Créez des pages web interactives avec JS

                                                              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                                              × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                                              • Editeur
                                                              • Markdown