Bonjour,

alors la, j'ai moi aussi besoin d'un peu d'aide pour l'activité 2.

J'arrive à afficher le bouton, j'arrive à afficher le formulaire à la place du bouton, mais après je block,

j'ai tenté de faire une action sur submit, en utilisant en première ligne le e.prevent.default(); afin d'éviter de reload la page, mais pas moyen : GRRRRRR je craque !

Deuxième problème, comment récupérer les valeurs du formulaire, à chaque fois il me dit variable vide. ( enfin un truc du genre ).

( pour le shéma, dans ma tete j'avais pensé faire : afficher le bouton, remplacer le bouton par le formulaire, à l'appui sur le bouton submit, ajout des valeurs des input à la liste des liens et en dernier lieu, afficher le message et le bouton ajouter un lien. )

suis-je partie sur la bonne méthode, ou suis-je totalement à l'ouest !

je vous met juste un bon de code que j'utilise pour tester ( et c'est loin d'être la bonne méthode )

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

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

    var titreElt    = form.elements.titre.value;
    var auteurElt   = form.elements.auteur.value;
    var lienElt     = form.elements.lien.value;

    console.log("Le titre : " + titreElt + " l'auteur : " + auteurElt + " le lien : " + lienElt);
    e.preventDefault(); // Annulation de l'envoi des données

});

-
Edité par kennynou 15 juillet 2016 à 19:34:22

celineg a écrit:

Bonjour,

Quelqu'un pourrait m'expliquer pourquoi mes définitions ne s'affichent pas ? Chapitre 9

Merci beaucoup !!!

var lettreDivElt = document.getElementById("lettre");
var lexiqueElt = document.getElementById("lexique");

//creation de fonction pour la création du contenu
function contenu() {
    ajaxGet("http://oc-jswebsrv.herokuapp.com/api/lexique/" + lettre, function (reponse) {
        var defs = JSON.parse(reponse);
        
        defs.forEach(function (def) {
            var titreElt = document.createElement("h2");
            titreElt.textContent = def.term;
            var definition = document.createElement("p");
            definition.textContent = def.definition;
            lexiqueElt.appendChild(titreElt);
            lexiqueElt.appendChild(definition);
        })
        
    });           
}
// tableau lettres
var lettres = ["A", "B", "C", "D", "E"];

lettres.forEach(function (lettre) {
    var lettreElt = document.createElement("a");
    lettreElt.href = "#";
    lettreElt.textContent = lettre;
    lettreDivElt.appendChild(lettreElt);
    lettreDivElt.appendChild(document.createTextNode(" | ")); 
    lettreElt.addEventListener("click", function () {
        contenu(lettre);    
    });
});

-
Edité par celineg il y a environ 6 heures

Salut Celineg, il me semble qu'il y a une correction a cet exercice ici : 

https://github.com/oc-courses/javascript-web/tree/gh-pages/chapitre_9/js

C'est le mieux a faire de comparer si tu trouves vraiment pas.
Salut 

merci pour ton aide Bam92 j'ai refait mon code maintenant ca marche j'ai fini par creer une fonction maintenant je veux savoir comment je recupere la valeur d'un champ type number

nullegaltrue a écrit:

celineg a écrit:

Bonjour,

Quelqu'un pourrait m'expliquer pourquoi mes définitions ne s'affichent pas ? Chapitre 9

Merci beaucoup !!!

vSalut Celineg, il me semble qu'il y a une correction a cet exercice ici : 

https://github.com/oc-courses/javascript-web/tree/gh-pages/chapitre_9/js

C'est le mieux a faire de comparer si tu trouves vraiment pas.
Salut 

C'est ce que j'ai fait car au départ je n'y arrivais pas ;-) Mais en regardant à nouveau, j'ai trouvé de nouvelles pistes...

Erreur 1) je n'avais pas mis de paramètre à ma fonction

Erreur 2) le innerHTML (attention à le mettre au bon endroit)

A part ça je n'arrive pas à comprendre pourquoi on doit faire ceci :

lettreElt.addEventListener("click", function (){
        contenu(lettre);

au lieu de ceci :

lettreElt.addEventListener("click", contenu (lettre);

-
Edité par Céline Grosjean 16 juillet 2016 à 10:09:52

Tu peux faire

lettreElt.addEventListener('click', maFonction);

si tu as pas de paramètres dans ta fonction. sinon tu dois rajouter une fonction anonyme :

maLettre.addEventListener('click',function(){ maFonction(Paramètre); });

Je pense que tu devrais suivre un cours de Javascript de base ça t'aiderai pas mal comme ça tu perdrai nettement moins de temps

-
Edité par CometBoy 16 juillet 2016 à 12:05:03

nullegaltrue a écrit:

Tu peux faire

lettreElt.addEventListener('click', maFonction);

si tu as pas de paramètres dans ta fonction. sinon tu dois rajouter une fonction anonyme :

maLettre.addEventListener('click',function(){ maFonction(Paramètre); });

Je pense que tu devrais suivre un cours de Javascript de base ça t'aiderai pas mal comme ça tu perdrai nettement moins de temps

-
Edité par nullegaltrue il y a environ 1 heure

J'ai suivi tous les cours OC depuis le début car je fais la gestion de projet multimédia. C'est juste que le code c'est pas mon truc et la concentration non plus. Mais je dois passer par là...

Merci

Bonsoir Celineg,

l'appel à une fonction contenu(lettre) nécessite que cette fonction reçoive ce paramètre ...

tentes avec : function contenu(lettre){ ...} et utilise la fonction de débogueur sur ton navigateur pour t'aider la prochaine fois.

Bon WE

Désolé, ne tenez pas compte de ma réponse. En fait j'arrive trop tard ... j'étais pas sur la dernière page ...

-
Edité par bug007 16 juillet 2016 à 20:49:57

Petit conseil pour l'activité 3 : utiliser bien le dernier ajaxPost(), celui modifié du chapitre 10, parce que sinon ça ne fonctionne pas et vous ne comprenez pas pourquoi ^^"

DamienROUSSEAUX a écrit:

Bonjour,

Je pense que dans le quizz 2 question 8, le code donné dans l'énoncé devrait être:

setTimeout(function(){
    setInterval(
        function () {
            console.log("Top");
        },
        1000)},
    2000);

et non:

setTimeout(setInterval(
        function () {
            console.log("Top");
        },
        1000),
    2000);

Exactement ! Je trouve ça dommage que cela ne soit toujours pas corrigé

Bonjour à tous 

Petite parenthèse pour vous rappeler de faire très attention à vérifier le dossier compressé que vous envoyé car malheureusement j'ai du mettre 2 fois la note de 1/10.

En effet le fichier .js ne contenais que la liste de départ (activité 2) et donc la page html s'affiche avec Activité 2 seulement... Ca ma fait mal au coeur car je pense que les personnes ont travailler mais j'ai suivi le barème et j'ai mis que le point du programme bien indenté.

Alors faite attention et si c'est une erreur essayer de contacter un admin pour refaire l'exercice.

Cordialement

PierreChnebierk a écrit:

DamienROUSSEAUX a écrit:

Bonjour,

Je pense que dans le quizz 2 question 8, le code donné dans l'énoncé devrait être:

setTimeout(function(){
    setInterval(
        function () {
            console.log("Top");
        },
        1000)},
    2000);

et non:

setTimeout(setInterval(
        function () {
            console.log("Top");
        },
        1000),
    2000);

Exactement ! Je trouve ça dommage que cela ne soit toujours pas corrigé

Au lieu d'appeler une fonction qui appelle setInterval, ils appellent setInterval (qui est une fonction) directement, c'est plus simple.

Mais si vous voulez que ce soit modifier, il faut contacter l'équipe (tout en bas de la page, première colonne).

Bah il y a une petite nuance, le code "corrigé" du dessus fonctionnera comme prévu ( "top" s'affichera après deux secondes pour ensuite être affiché toutes les secondes ), celui du dessous ( quizz ) non, il n y aura aucun délai

Merci pour l'info, j'avais déjà tenté de contacter le créateur du cours mais pas de nouvelles :S

PierreChnebierk a écrit:

Bah il y a une petite nuance, le code "corrigé" du dessus fonctionnera comme prévu ( "top" s'affichera après deux secondes pour ensuite être affiché toutes les secondes ), celui du dessous ( quizz ) non, il n y aura aucun délai

Merci pour l'info, j'avais déjà tenté de contacter le créateur du cours mais pas de nouvelles :S

Ah oui, effectivement, je ne l'avais même pas testée ^^"

C'est bizarre d'ailleurs qu'on ne puisse pas appeler une fonction déjà existante directement. Ça mériterait un éclaircissement.

Bonsoir tout le monde !

J'ai une question sur la partie "Utiliser des API".

Il est conseiller de suivre ce cour: https://openclassrooms.com/courses/utilisez-des-api-rest-dans-vos-projets-web

Mais le bémol est que ce cour utilise terminal: https://openclassrooms.com/courses/utilisez-des-api-rest-dans-vos-projets-web/pratiquer-avec-l-intelligence-artificielle

Comment faire si on utilise l'invite de commande de windows?

HervéBGD a écrit:

PierreChnebierk a écrit:

Bah il y a une petite nuance, le code "corrigé" du dessus fonctionnera comme prévu ( "top" s'affichera après deux secondes pour ensuite être affiché toutes les secondes ), celui du dessous ( quizz ) non, il n y aura aucun délai

Merci pour l'info, j'avais déjà tenté de contacter le créateur du cours mais pas de nouvelles :S

Ah oui, effectivement, je ne l'avais même pas testée ^^"

C'est bizarre d'ailleurs qu'on ne puisse pas appeler une fonction déjà existante directement. Ça mériterait un éclaircissement.

Je pense que setTimeout est configuré pour recevoir la référence d'une fonction ( anonyme ou non ) pour pouvoir l'invoquer ensuite genre comme ceci

fonction setTimeout(fn, delai) {

// code pour le délai

fn();

}

ça fonctionne très bien si on fait comme dans l'exemple suivant :

fonction consoleLogging() {

    setInterval(function() {

    }, 1000);

}

setTimeout(consoleLogging, 2000);    // à la différence de setTimeout(consoleLogging(), 2000);

Salut salut!

Pour la réalisation de l'activité 2 du cours, sommes-nous autorisés à modifier les codes HTML et CSS!

D'avance merci!

gflekk a écrit:

Salut salut!

Pour la réalisation de l'activité 2 du cours, sommes-nous autorisés à modifier les codes HTML et CSS!

D'avance merci!

Bonjour, je ne pense pas. Bien que ça ne soit pas précisé le mieux pour bien réalisé l'exercice est de ne pas y toucher.

Bon courage.

Bonjour,

Dans l'activité 3, j'ai deux petits soucis :

- je récupère le deuxième lien posté

- et quand je raffraichi, tout a disparu

Des idées pour m'aider ?

MErci

lienElt = creerElementLien(liens[0]);

celineg a écrit:

Bonjour,

Dans l'activité 3, j'ai deux petits soucis :

- je récupère le deuxième lien posté

- et quand je raffraichi, tout a disparu

Des idées pour m'aider ?

MErci

lienElt = creerElementLien(liens[0]);

Tu te casses la tête pour rien, il suffit de reprendre le code de l'activité 2 pour récupérer les liens du serveur

listeLiens.forEach(function (lien) {
    var lienElt = creerElementLien(lien);
    contenuElt.appendChild(lienElt);
});

En modifiant le nom de la variable sur laquelle est utilisée forEach() puisqu'elle correspond au tableau (listeLiens).

-
Edité par HervéBGD 25 juillet 2016 à 15:35:49

Ok j'ai compris mon problème, je mettais ajaxGet dans le submit alors que je devais le mettre tout en haut... Merci le forum !

-
Edité par Céline Grosjean 25 juillet 2016 à 17:15:44

kennynou a écrit:

Bonjour,

alors la, j'ai moi aussi besoin d'un peu d'aide pour l'activité 2.

J'arrive à afficher le bouton, j'arrive à afficher le formulaire à la place du bouton, mais après je block,

j'ai tenté de faire une action sur submit, en utilisant en première ligne le e.prevent.default(); afin d'éviter de reload la page, mais pas moyen : GRRRRRR je craque !

Deuxième problème, comment récupérer les valeurs du formulaire, à chaque fois il me dit variable vide. ( enfin un truc du genre ).

( pour le shéma, dans ma tete j'avais pensé faire : afficher le bouton, remplacer le bouton par le formulaire, à l'appui sur le bouton submit, ajout des valeurs des input à la liste des liens et en dernier lieu, afficher le message et le bouton ajouter un lien. )

suis-je partie sur la bonne méthode, ou suis-je totalement à l'ouest !

je vous met juste un bon de code que j'utilise pour tester ( et c'est loin d'être la bonne méthode )

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

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

    var titreElt    = form.elements.titre.value;
    var auteurElt   = form.elements.auteur.value;
    var lienElt     = form.elements.lien.value;

    console.log("Le titre : " + titreElt + " l'auteur : " + auteurElt + " le lien : " + lienElt);
    e.preventDefault(); // Annulation de l'envoi des données

});

-
Edité par kennynou 15 juillet 2016 à 19:34:22

Bonjour,

Je pense que ton e.preventDefault() n'est pas placé au bon endroit dans ta fonction.

Bonsoir par ici!

Je prie ceux qui ont déjà fait l'exercice 2 de m'éclairer!

Dans la correction, l'ajout de nouveaux liens est-il entièrement et uniquement géré en Javascript ? Ou bien on peut modifier le html et le css pour la création du formulaire notamment!

Bonjour, je crois que tout est dit dans le titre du cours !

A+

Fcorinne a écrit:

Vous ne pouvez pas avoir les liens so foot et compagnie puisque ce sont des liens inventés par les autres élèves qui se trouvent sur le serveur et que donc vous récupérez.

Merci d'effacer vos codes, n'oubliez pas que c'est une activité solo

Bonjour, concernant l'activité 2 du cours, faut-il comme pour l'activité 1 ne pas toucher aux fichiers html et css ?

AntoineServeaux a écrit:

Bonjour, concernant l'activité 2 du cours, faut-il comme pour l'activité 1 ne pas toucher aux fichiers html et css ?

C'est la force de JavaScript : pouvoir modifier le HTML et le CSS...!

Cordialement

D'après le corrigé le html n'est pas modifié. Par contre le css est modifiable.

Pour l'activité 2

Rien ne vous empêche de créer des nouveaux noeuds à partir de javascript, idem pour le style ... Perso j'ai rajouté une div contenant le bouton d'ajout, les champs de formulaire et  le message confirmant l'ajout avec la tempo qui va bien ;-)

Pour l'activité 2, le barème ne tient pas compte des modifications du HTML et du CSS. D'ailleurs dans le corrigé-type, HTML et CSS sont modifiés sans passer par JS.

Après c'est une question de bon sens, soit on modifie directement les fichiers, soit on joue le jeu en modifiant uniquement le JavaScript... Personnellement c'est ce que j'ai fait, et je trouve que c'est beaucoup plus gratifiant !

Créer un objet dans le DOM c'est le côté sympa de JS  ;-)

La je suis sur jquery et d'avoir mis les mains à la pâte .... c'est super cool d'avoir fait cette démarche !