c'est pas compliqué, tant que l'utilisateur ne choisit pas "0" tu continue de boucler. sans code je peut pas t'aider plus.
si tu veut, tu a 57 pages de personnes qui ont été bloqué sur le même exercice, peut être qu'en lisant un peu tu trouvera quelque chose

Bonjour à tous !

J'ai terminé et envoyé mon activité. J'ai aussi corrigé les activités que je devais corriger mais je me pose une question. 

Personnellement j'ai choisi de créer une classe, le corrigé, "lui" utilise des objets. Pourtant mon code (et celui d'autres exercices) est plus court pour le même résultat. Y avait-il une contre-indication à choisir les classes plutôt que les objets ? Ou une raison qui ferait que les objets sont plus pertinents ? 

Par ailleurs je m'étonne de l'utilisation des var alors que le cours précise bien que let est préférable 🤔...

Merci d'avance pour vos réponses.

Si rien n'est précisé dans l'énoncé, alors tu est libre de faire comme tu veut. En revanche si ont t’enlève des points pour sa et que ça t’empêche de valider l'exercice, tu peut contacter OPC par mail (hello@openclassrooms.com) et ton cas sera vérifié(tu aura d'autre personne pour valider ton exercice je croit).
Juste pour dire, dans l'absolu plus court ne veut pas forcement dire plus optimisé. focalise toi sur l'énoncé et tu n'aura pas de soucis (tu voie bien comment les barème sont fait lorsque tu corrige).
Je ne peut pas te dire s'il y avait une contre indication ou pas puisque tu ne précise pas de quel exercice tu parle. L'utilisation d'une class est justifié quand plusieurs objets avec la même structure sont nécessaires.
Ce cours a besoin d’etre dépoussiérée c'est pour ça qu'il utilise var et non let. N’hésite pas a fouiller sur internet, ne te cantonne pas a Openclassrooms

Bonjour le js es un peu complique

julien chemin a écrit:

Si rien n'est précisé dans l'énoncé, alors tu est libre de faire comme tu veut. En revanche si ont t’enlève des points pour sa et que ça t’empêche de valider l'exercice, tu peut contacter OPC par mail (hello@openclassrooms.com) et ton cas sera vérifié(tu aura d'autre personne pour valider ton exercice je croit).
Juste pour dire, dans l'absolu plus court ne veut pas forcement dire plus optimisé. focalise toi sur l'énoncé et tu n'aura pas de soucis (tu voie bien comment les barème sont fait lorsque tu corrige).
Je ne peut pas te dire s'il y avait une contre indication ou pas puisque tu ne précise pas de quel exercice tu parle. L'utilisation d'une class est justifié quand plusieurs objets avec la même structure sont nécessaires.
Ce cours a besoin d’etre dépoussiérée c'est pour ça qu'il utilise var et non let. N’hésite pas a fouiller sur internet, ne te cantonne pas a Openclassrooms

Tout d'abord merci pour ta réponse. Effectivement je n'ai pas précisé l'activité 😅parce qu'il n'y en a qu'une, celle de la fin du cours où on doit faire un programme de gestion de contacts. Pour moi, vu ce qui a été expliqué dans le cours, les classes permettent d'optimiser la création de plusieurs objets "identiques", donc créer une classe plutôt qu'un objet est censé (sauf utilisation vraiment aberrante) optimiser, ce d'autant plus que ça m'a justement permis d'écrire moins de lignes. Je mettrais bien mon code, mais bon, ce serait donner un (gros) début de solution donc je préfère m'abstenir.

Je me suis effectivement focalisée sur l'ennoncé, mais j'ai déjà vu plusieurs activités où l'ennoncé du corrigé "incluait" des choses non mentionnées dans l'ennoncé de l'exercice donc je crains toujours d'avoir loupé quelque chose...

En tout cas, ta réponse m'a déjà donné un début d'explication, et merci pour le conseil.

Bonjour, j'ai un soucis et j’espère avoir de l'aide

// Liste des pays
var listePays = [
    "Afghanistan",
    "Afrique du Sud",
    "Albanie",
    "Algérie",
    "Allemagne",
    "Andorre",
    "Angola",
    "Anguilla",
    "Antarctique",
    "Antigua-et-Barbuda",
    "Antilles néerlandaises",
    "Arabie saoudite",
    "Argentine",
    "Arménie",
    "Aruba",
    "Australie",
    "Autriche",
    "Azerbaïdjan"
];
var texte=document.getElementById('pays');
var zoneSuggestion=document.getElementById('suggestions');
texte.addEventListener('keyup', function(lettre){
    zoneSuggestion.innerHTML = "";
    var mot=lettre.target.value;
    var myRegex2 = new RegExp("^" + mot, "i");
    
    for(var i=0; i<listePays.length; i++){
       if(myRegex2.test(listePays[i])){
           var span=document.createElement('span');
               span.textContent=listePays[i];
               span.setAttribute('class', 'suggestion');
           
           var saut=document.createElement('br');
           span.appendChild(saut);
           
           zoneSuggestion.addEventListener("click", function (e) {
                // Remplacement de la valeur saisie par la suggestion
                texte.value = e.target.textContent;
                // Vidage de la liste des suggestions
                zoneSuggestion.innerHTML = "";
            });
       }
       zoneSuggestion.appendChild(span);
    }
});

Il s'agit d'un système d’autocomplétion issue d'un cour sur JavaScript, que j'essaye humblement d’améliorer. 

Mon soucis viens du fait que ce code ne gère que les mots débutant par <a ou af>  le reste m'affiche des erreurs

Comment puis je procéder pour résoudre ce problème, s'il vous plait. 

ton erreur en console te dit ligne 45. "az" avec ton regex renvoie false, donc tu ne passe pas la condition, pourtant tu ajoute quand même le span (qui lui est crée seulement si la condition est remplit)
donc met ton appendchild dans le if, a la fin (tu doit ajouter le span seulement s'il a été crée).
Je te conseil d'utiliser "let" à la place de "var", et tu peut utiliser un event "input" à la place de l'event "keyup" (il ce déclenche a chaque modification de la valeur de l'input)

Merci beaucoup Julien, j'avais pas fais attention ça été résolu. Par curiosité pourquoi privilégier "let" au détriment de "var", alors qu'il n'est pas pris en charge par les anciennes versions de navigateur?

Bonjour,

Je viens juste de débuter le cours, mais il semblerait que les consoles de code du tout premier programme ne fonctionne pas... Ou bien je n'ai pas réussi à la faire fonctionner... Lorsque je clique sur l'environnement interactif situé juste sous la ligne "</> Console de code" , le curseur de frappe n'apparaît pas, rien ne se passe.

Que suis-je censée faire ? Ou y a-t-il un problème ?

Bonne journée ! 

Bonjour, 

Me revoici pour un problème avec l'activité 2 - Gérez l’ajout de nouveaux liens du cours Créez des pages web interactives avec JavaScript.

Je bug complet et j'ai beau avoir chercher je ne trouve pas de solutions/ne comprends pas ce que je fais de travers 😤

J'ai fait la première partie, créer le formulaire, et faire en sorte qu'il s'affiche après avoir cliqué sur le bouton concerné.

Il me manque donc cette partie à faire => Lorsque l’utilisateur valide le nouveau lien, celui-ci est ajouté en haut de la page, le formulaire d’ajout disparaît et un message d’information s’affiche pendant 2 secondes.

J'ai donc créé un événement sur le bouton du formulaire. J'ai fait le code pour créer le message. Si je mets l'événement sur "submit" le message ne fait qu'apparaître et disparaître instantanément, alors que si j'utilise l'événement "click" il s'affiche (si les champs ne sont pas complets du moins) et disparaît bien au bout de 2 secondes comme je l'ai programmé, mais normalement je devrais configurer l'événement avec "submit" et non "click" puisque ça n'est pas juste un bouton mais la soumission du formulaire. Donc il semblerait que ce que j'ai programmé soit à moitié bon mais il me manque une partie et je n'arrive pas à comprendre quoi. Quoi qu'il advienne quand je clique sur le bouton ("submit" ou "click" quand les champs sont remplis) le formulaire disparaît et le bouton pour ajouter un autre lien réapparaît, mais ce n'est pas "configuré" par moi, mais par défaut. Et je pense que c'est ça qui "vire" mon message 🤔...

L'autre porblème, c'est que je ne comprends pas comment récupérer les données des champs du formulaire, pour qu'ils soient ajoutés à la liste de liens. Je suis partie du principe qu'il fallait que je les ajoute au tableau pour qu'ils soient répurérés par la boucle forEach qui configure tout l'affichage de base, mais peut-être que je me trompe. En tout cas ce que j'ai fait ne fonctionne pas. J'ai même testé d'ajouter (avec "push" et "unshift") des données au tableau...ça m'ajoute bien un nouveau lien mais toutes les données sont en undefined ce que je ne comprends pas non plus...

J'espère avoir réussi à me faire comprendre 🙄et je vous remercie d'avance de votre aide, j'avoue que je suis un peut découragée 😕

Salut à tous!

C'est le premier cours que j'ai suivi sur openclassrooms du debut jusu'a la fin donc Je voudrais savoir si ce cours a une attestation a la fin???

J'attend vos reponses friends!!

Merci. 

@InoussaHarounaMahamadouSani 

Bonjour, si vous avez réussi ce cours avec plus de 70% vous pouvez devenir premium pour obtenir la certification => https://openclassrooms.com/fr/premium

@Eylyn quand tu utilise l'event submit, tu est redirigé vers l'adresse qui se trouve dans l'attribut "action" du formulaire, et s'il n'est pas renseigné la page ce recharge. tu doit utilisé e.preventDefault() dans l'event submit pour annuler sont comportement de base (il ne fera que ce qui est indiqué dans l'evenement) donc logiquement que tu utilise un event click ou submit(avec e.preventDefault()), ça ne changera pas grand chose a part la manière d'acceder au valeur des inputs du formulaire.

Sans ton code ont ne peut pas trop t'aider. Si ton probleme c'est les valeur undefined, console log ces variables apres chaque modification de celle ci pour voir ou ça bloque, au moins tu saura ou chercher.

-
Edité par julien chemin 31 juillet 2019 à 23:15:48

Même en mettant e.preventDefault() le msg ne s'affiche vraiment que quelques millisecondes (et pas 2000 millisecondes malheureusement). 😕

Et donc effectivement mon dernier problème est d'ajouter les valeurs des inputs du formulaire dans mon tableau afin que ces dernières soient ensuite ajoutées à la liste de liens. Je ne sais pas vraiment comment le coder (je sais comment ajouter du contenu à un tableau, mais c'est un peu plus complexe vu qu'il y a 3 valeurs pour une ligne, soit 3 colonnes et que je n'ai pas trouvé d'explications claires sur la procédure de base, et encore moins quand il s'agit de récupérer des valeurs pour les injecter ensuite à l'aide d'un événement 😅). Sachant qu'il faut que ces valeurs soient ajouter en premier donc normalement avec unshift dans le cas du tableau ou insertBefore dans le cas d'un noeud 🤔

Donc voila la première partie du code de lactivité précédente 

*/

// 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"
    }
];

//-----------------------------------

listeLiens.unshift(["UCPA", "http://ucpa.com", "Elodie"]);
listeLiens.forEach(entrée =>{
    console.log(entrée);
})

//--------------------------------------------------------------

listeLiens.forEach(liens =>{
    let sectionsElts = document.createElement("section");
    sectionsElts.style.backgroundColor = "white";
    sectionsElts.style.padding = "5px";
    sectionsElts.style.margin = "5px";
    sectionsElts.style.marginLeft = "0px";

    let paragrapheElt = document.createElement("row");
    paragrapheElt.style.padding = "3px";

    let titleElt = document.createElement("a");
    let strongElt = document.createElement("strong")
    strongElt.style.color = '#428BCA';
    strongElt.textContent = liens.titre;
    titleElt.href = liens.url;
    titleElt.style.textDecoration = "none";
    titleElt.target = "_blank";

    let linkElt = document.createElement("p");
    linkElt.textContent = " " + liens.url;
    linkElt.style.fontSize = "0.8em";
    linkElt.style.display = "inline";
    let auteurElt = document.createElement("p");
    auteurElt.textContent = "Ajouté par " + liens.auteur;
    auteurElt.style.fontSize = "0.8em";
    auteurElt.style.margin = "5px";

    titleElt.appendChild(strongElt);
    paragrapheElt.appendChild(titleElt);
    paragrapheElt.appendChild(linkElt);
    sectionsElts.appendChild(paragrapheElt);
    sectionsElts.appendChild(auteurElt);

    document.getElementById("contenu").appendChild(sectionsElts);
})

Et la seconde. Si je laisse l'événement "submit" le formulaire disparait, le msg apparaît subrepticement et le bouton d'ajout de liens revient. Si je choisis "click" le msg apparaît bien, le formulaire ne disparaît pas. Mais dans tout les cas, les valeurs ne sont pas récupérées, et ajouter où il faudrait 😕😓(Je n'ai pas encore codé l'ajout de "http://", vu que je n'arrive, pour l'instant, pas à l'ajouter où il faut)

/*
Activité 2
*/
// - Le formulaire apparaît lors du clic sur le bouton “Ajouter un lien”.
// - La saisie des champs Titre, URL et Auteur du lien est obligatoire.
// -  Si l’URL saisie ne commence ni par “http://” ni par “https://”, on lui ajoute “http://” au début.
// - Lorsque l’utilisateur valide le nouveau lien, celui-ci est ajouté en haut de la page, le formulaire d’ajout disparaît et un message d’information s’affiche pendant 2 secondes.
// - Les variables JavaScript doivent respecter la norme camelCase et le fichier liensweb.js doit être correctement indenté.
// Remarque : les liens n’étant pas sauvegardés de manière persistante, le rechargement de la page web affiche uniquement les liens initiaux.


let form = document.createElement("form");
form.method = "post";
let formAuteur = document.createElement("input");
formAuteur.type = "text";
formAuteur.placeholder = "Entrez vote nom"
formAuteur.setAttribute("required", "");
formAuteur.style.padding = "5px";
formAuteur.style.width = "10%";
formAuteur.style.minWidth = "90px";
formAuteur.style.maxWidth = "110px";

let formTitre = document.createElement("input");
formTitre.type = "text";
formTitre.placeholder = "Entrez le titre du site"
formTitre.setAttribute("required", "");
formTitre.style.padding = "5px";
formTitre.style.width = "20%";
formTitre.style.minWidth = "120px";
formTitre.style.maxWidth = "200px";

let formUrl = document.createElement("input");
formUrl.type = "text";
formUrl.placeholder = "Entrez le lien du site"
formUrl.setAttribute("required", "");
formUrl.style.padding = "5px";
formUrl.style.width = "25%";
formUrl.style.minWidth = "120px";
formUrl.style.maxWidth = "250px";

let ajLien = document.createElement("button");
ajLien.textContent = "Ajouter un lien";

let ajouter = document.createElement("input");
ajouter.type = "submit";
ajouter.value = "Ajouter";



form.appendChild(ajLien);

document.getElementById("formu").appendChild(form);


ajLien.addEventListener("click", function(e){
    form.innerHTML = "";

    form.appendChild(formAuteur);
    form.appendChild(formTitre);
    form.appendChild(formUrl);
    form.appendChild(ajouter);

document.getElementById("formu").appendChild(form);
})



ajouter.addEventListener("submit", function (e) {
    e.preventDefault();
    listeLiens.unshift([formAuteur.value, formTitre.value, formUrl.value]);
    let msgInfoElt = document.createElement("p");
    msgInfoElt.textContent = "Le lien " + formTitre.value + " a bien été ajouté"
    msgInfoElt.style.color = "blue";
    msgInfoElt.style.backgroundColor = "#5ea2c7";
    document.getElementById("formu").insertBefore(msgInfoElt,form);
    setTimeout(function(){
        msgInfoElt.innerHTML = "";
    }, 2000);

Merci d'avance

les liens sont contenu sous forme d'un tableau qui contient des objets représentant chacun un lien, donc si tu ajoute un lien, tu ajoute un objet. quand tu affiche les liens, le but c'est que le dernier ajouté soit le premier de la liste, donc le premier lien du tableau doit etre le dernier lien de la page. le truc a faire c'est d'inserer les lien au dessus a chaque fois : tu insert le lien 1, puis le lien 2 au dessus, puis le lien 3 au dessus etc. au dessus sa sous entend au debut de la div qui contient les liens.

Pour faire apparaitre ou disparaitre un element, c'est mieux de juste changer le display plustot que de tout supprimer et de tout re-injecter. ton formulaire tu pourrait le mettre directement dans ton html, avec un display none, et au clic sur bouton "ajouter lien" tu change le display pour le faire apparaitre. et quand tu valide le formulaire tu le fait disparaitre.

ligne70 sur ton 2eme code, tu ajoute un tableau dans ton tableau d'objet. ajoute un objet plustot qu'un tableau et tu n'aura surement plus d'undefined.

c'est normal qu'a l'event click ton formulaire reste visible, tu le vide puis tu re-insert le formulaire. parcontre je ne comprend pas pourquoi le message d'info s'affiche, je voie rien dans ton code qui fait sa.

un conseil avant de faire un code passe par un brouillon pour noter toute les etapes, sa te permet de reflechir a l'avance a comment tu va t'y prendre, sa sert pas mal.

Bonjour,

Je suis absolument novice dans le domaine du code, et j'ai suivi 3 cours, "comprendre le Web", "HTML5 et CSS3", et enfin, "Apprenez à coder en JS".

J'ai plutôt était assidu sur le cours, j'ai pris énormément de note concernant la syntaxe, l'utilité des différents sujets abordés, tel que les fonctions, objets etc, etc...

Cependant, ça va paraître un peu bête, mais arrivé à l'activité en fin de chapitre, je ne sais absolument pas quoi faire... Je ne sais même pas ou, ni comment rentrer mon code JS, comment il est censé s'intégrer à mon code HTML etc...

Peut être y'a t'il un cours que j'aurai du suivre auparavant ?

Merci pour vos aides à venir.

-
Edité par BenoitRaymond2 3 août 2019 à 1:50:27

Salut, 

tu as ton code html dans un fichier  en .html

tu met ton code js dans un autre fichier en .js

et tu utilise la balise html <script> pour lier ton js à ton html (attribut src qui contient le path de ton fichier js)

-
Edité par lk77 3 août 2019 à 18:26:09

Bonjour,

Je voudrai savoir, s'il est possible de détecter l'appui du bouton retour d'un smartphone en JavaScript, car je voudrai pouvoir gérer l'historique en cas d'appel ajax sur un smartphone. Merci d'avance pour votre support.   

Salit,

Il y a déjà un historique dans le navigateur, il n'y a rien à gérer. Si tu fait back tu retourne sur la page précédente, qui réexecute tout ton js et toute tes requêtes ajax.

-
Edité par lk77 4 août 2019 à 13:17:09

Bonjour, je suis novice dans le code et je rencontre actuellement un petit problème dans le développement de l'annuaire de contact (dernière activité).

Voici mon code :

//liste de contacts
    	const nomsContacts = ["Levisse","Nelsonne"]
        const prenomsContacts =["Carole", "Melodie"]
    	// fonction : lister les contacts
        let listContactsFct = function listerContacts(nomsContacts){
            for (let i = 0; i > nomsContacts.length(); i++) {
                console.log("Nom :" + nomsContacts[i] + "Prenom :" + prenomsContacts[i]);
            };
        };
        function ajouterContact(nom,prenom){
            nomsContacts.push(this.nom);
            prenomsContacts.push(this.prenom);
        };


    	let utilisateur = 3;
		console.log(`Bienvenue dans le gestionnaire des contacts`);

		while (utilisateur != 0){ //Boucle principale
		    console.log("1 : Lister les contacts\n2 : Ajouter un contacts\n0 : Quitter");
		    utilisateur = prompt("Choisissez une option :");
            if (utilisateur == 1){
               let mesContacts = listContactsFct();
            };
            if (utilisateur == 2){
                ajouterContact(alert(prompt("Nom du nouveau contacts")),alert(prompt("Prenom du nouveau contacts")));
            };
        };

		console.log("Au revoir !");

J'ai procéder comme ceci : création de 2 liste (tableaux) : 1 pour les noms et l'autre pour les prénoms.

Une personne a donc un même indice dans les deux tableaux pour son nom et son prenom.

J'ai ensuite créé deux fonction : une pour ajouter un nouveau contact qui a l'air de fonctionner (car j'ai un problème sur le listing).

en effet, lorsque je demande a mon programme de me lister les contacts (condition / utilisateur == 1), le programme m'indique l'erreur suivant :

 Uncaught TypeError: Cannot read property 'length' of undefined

    at listerContacts (contacts.html:16)

    at contacts.html:33

Je crois qu'il a donc un problème avec le : nomsContacts.length() // dans la boucle for (de ma fonction listerContacts) mais je ne sais comment y remédier.

lk77 a écrit:

Salit,

Il y a déjà un historique dans le navigateur, il n'y a rien à gérer. Si tu fait back tu retourne sur la page précédente, qui réexecute tout ton js et toute tes requêtes ajax.

-
Edité par lk77 hier à 13:17

Merci pour ta réponse, mais je croit que ce tu souligne est vrai dans des pages HTML en dur. Quand il s'agit d'un appel d'une div caché grâce a un

display: none;

,et révélé en JS et ce de manière répété, en cas de retour dans le navigateur, elle ne rechargera pas les div appelé grâce au JS, mais uniquement les page HMTL ou PHP en dur. En fait je suis entrain de vouloir mettre en place une SPA, avec une impression de navigation sur plusieurs page. Du coup, c'est pour ça que je demande comment détecter l'appuie du bouton retour, pour pouvoir moi même géré l'historique, mais j'ai pas vraiment envie de passer par les framework type REACT ou VUE pour le faire, car il faudra encore passer par la case tuto, je veut essayé de le faire en JS pur.

julien chemin a écrit:

les liens sont contenu sous forme d'un tableau qui contient des objets représentant chacun un lien, donc si tu ajoute un lien, tu ajoute un objet. quand tu affiche les liens, le but c'est que le dernier ajouté soit le premier de la liste, donc le premier lien du tableau doit etre le dernier lien de la page. le truc a faire c'est d'inserer les lien au dessus a chaque fois : tu insert le lien 1, puis le lien 2 au dessus, puis le lien 3 au dessus etc. au dessus sa sous entend au debut de la div qui contient les liens.

Pour faire apparaitre ou disparaitre un element, c'est mieux de juste changer le display plustot que de tout supprimer et de tout re-injecter. ton formulaire tu pourrait le mettre directement dans ton html, avec un display none, et au clic sur bouton "ajouter lien" tu change le display pour le faire apparaitre. et quand tu valide le formulaire tu le fait disparaitre.

ligne70 sur ton 2eme code, tu ajoute un tableau dans ton tableau d'objet. ajoute un objet plustot qu'un tableau et tu n'aura surement plus d'undefined.

c'est normal qu'a l'event click ton formulaire reste visible, tu le vide puis tu re-insert le formulaire. parcontre je ne comprend pas pourquoi le message d'info s'affiche, je voie rien dans ton code qui fait sa.

un conseil avant de faire un code passe par un brouillon pour noter toute les etapes, sa te permet de reflechir a l'avance a comment tu va t'y prendre, sa sert pas mal.

Je n'ai pas mis le formulaire dans l'HTML parce que dans la précédente activité il ne fallait pas toucher l'HTML(j'ai juste créer une div pour me faciliter la vie). Mais je crois que l'objectif de cette activité est qu'on créer un maximum de choses avec JS. Donc j'ai effectivement utilisé display, pas de problème.

Pour ce qui est des premiers liens, il n'y a pas besoind 'y toucher, ils doivent rester en place. Ce que je dois réussir ç faire c'est récupérer les données du formulaire pour les insérer à leur tour dans le tableau à la place qui leur convient et c'est ce que je n'arrive pas à faire. Je dois récupérer les valeurs et ensuite injecter tout ça dans le tableau au moment où on appuie sur le bouton ajouter. 

Le undefined que j'ai, c'est du à une ligne écrite dans la première partie de code pour voir comment la page réagissait si j'injectais de nouvelles données (à priori, pas très bien) et pour essayer de comprendre comment je devais procéder, mais vu le résultat, il est clair que ma tentative a échoué. Ce que j'ai écrit pour injecter les données dans l'event n'a, malheureusement aucun effet. Et c'est dans ce même event que j'ai mis le msg d'info.

A quel moment je crée l'objet pour le tableau avant l'event ou pendant ? Mais surtout comment je le crée de façon à ce que chaque données soient ensuite injectée à sa place ?

-
Edité par Eylyn 5 août 2019 à 19:00:35

HenriCo1 a écrit:

Bonjour, je suis novice dans le code et je rencontre actuellement un petit problème dans le développement de l'annuaire de contact (dernière activité).

Voici mon code :

//liste de contacts
    	const nomsContacts = ["Levisse","Nelsonne"]
        const prenomsContacts =["Carole", "Melodie"]
    	// fonction : lister les contacts
        let listContactsFct = function listerContacts(nomsContacts){
            for (let i = 0; i > nomsContacts.length(); i++) {
                console.log("Nom :" + nomsContacts[i] + "Prenom :" + prenomsContacts[i]);
            };
        };
        function ajouterContact(nom,prenom){
            nomsContacts.push(this.nom);
            prenomsContacts.push(this.prenom);
        };


    	let utilisateur = 3;
		console.log(`Bienvenue dans le gestionnaire des contacts`);

		while (utilisateur != 0){ //Boucle principale
		    console.log("1 : Lister les contacts\n2 : Ajouter un contacts\n0 : Quitter");
		    utilisateur = prompt("Choisissez une option :");
            if (utilisateur == 1){
               let mesContacts = listContactsFct();
            };
            if (utilisateur == 2){
                ajouterContact(alert(prompt("Nom du nouveau contacts")),alert(prompt("Prenom du nouveau contacts")));
            };
        };

		console.log("Au revoir !");

J'ai procéder comme ceci : création de 2 liste (tableaux) : 1 pour les noms et l'autre pour les prénoms.

Une personne a donc un même indice dans les deux tableaux pour son nom et son prenom.

J'ai ensuite créé deux fonction : une pour ajouter un nouveau contact qui a l'air de fonctionner (car j'ai un problème sur le listing).

en effet, lorsque je demande a mon programme de me lister les contacts (condition / utilisateur == 1), le programme m'indique l'erreur suivant :

 Uncaught TypeError: Cannot read property 'length' of undefined

    at listerContacts (contacts.html:16)

    at contacts.html:33

Je crois qu'il a donc un problème avec le : nomsContacts.length() // dans la boucle for (de ma fonction listerContacts) mais je ne sais comment y remédier.

Salut

1.finis tes variables d'un point virgule.

2. tu nomme ta fonction deux fois faut choisir.

soit tu écrit

const listContactsFct = function(){};

 ou

function listerContacts(){}

3.utilise plutôt les objets que tu fera boucler dans ton for du style.

const contacts = [
      {noms : "Levisse", prenoms: "Carole"},
      {noms : "Nelsonne", prenoms: "Melodie"}
];

for (let i = 0; i < contacts.length(); i++) {
    console.log("Nom :" + contacts[i].noms  + "Prenom :" + contacts[i].prenoms);
}

  j’espère t'avoir aider moi même je suis novice

-
Edité par Ivou 5 août 2019 à 19:08:33

J'ai une erreur dans mon code que je n'arrive pas a résoudre, j'ai défini une méthode dans une classe et quand je veux utiliser cette méthode dans la condition suivante (if utilisateur == 1) ça me met Contacts.lister() is not a function.

//liste de contacts
        class Contacts{

            constructor(nom,prenom){
            this.nom = nom;
            this.prenom = prenom;
            };

            lister(){
                for (contact of Contacts){
                    console.log(`Nom : ${this.nom}, Prenom : ${this.prenom}`);
                };
            };
        };
    	
        const Levisse = new Contacts("Levisse","Carole");
        const Nelsonne = new Contacts("Nelsonne","Melodie");
        


    	let utilisateur = 3;
		console.log(`Bienvenue dans le gestionnaire des contacts`);

		while (utilisateur != 0){ //Boucle principale
		    console.log("1 : Lister les contacts\n2 : Ajouter un contacts\n0 : Quitter");
		    utilisateur = prompt("Choisissez une option :");
            if (utilisateur == 1){
               Contacts.lister();
            };
            if (utilisateur == 2){
                Contacts.constructor(alert(prompt("Nom du nouveau contacts")),alert(prompt("Prenom du nouveau contacts")));
            };
        };

		console.log("Au revoir !");

J'ai essayé beaucoup de choses, j'suis en train de devenir fou, aidez moi ! xD

-
Edité par iPerionn 7 août 2019 à 20:12:53

Dans ton code Contact est une class et non un objet, il faut que tu instancie un objet de la class Contact pour pouvoir l'utiliser. et le constructor s'utilise a l'instanciation, pas besoin de l'appeler.

relis les cours sur les objet dans le doute

iPerionn a écrit:

J'ai une erreur dans mon code que je n'arrive pas a résoudre, j'ai défini une méthode dans une classe et quand je veux utiliser cette méthode dans la condition suivante (if utilisateur == 1) ça me met Contacts.lister() is not a function.

//liste de contacts
        class Contacts{

            constructor(nom,prenom){
            this.nom = nom;
            this.prenom = prenom;
            };

            lister(){
                for (contact of Contacts){
                    console.log(`Nom : ${this.nom}, Prenom : ${this.prenom}`);
                };
            };
        };
    	
        const Levisse = new Contacts("Levisse","Carole");
        const Nelsonne = new Contacts("Nelsonne","Melodie");
        


    	let utilisateur = 3;
		console.log(`Bienvenue dans le gestionnaire des contacts`);

		while (utilisateur != 0){ //Boucle principale
		    console.log("1 : Lister les contacts\n2 : Ajouter un contacts\n0 : Quitter");
		    utilisateur = prompt("Choisissez une option :");
            if (utilisateur == 1){
               Contacts.lister();
            };
            if (utilisateur == 2){
                Contacts.constructor(alert(prompt("Nom du nouveau contacts")),alert(prompt("Prenom du nouveau contacts")));
            };
        };

		console.log("Au revoir !");

J'ai essayé beaucoup de choses, j'suis en train de devenir fou, aidez moi ! xD

-
Edité par iPerionn il y a environ 16 heures

Salut

Essai un peu d'enlever les points virgules a la fin de ton constructeur, de la fonction lister, de la boucle et la fin de ta classe je ne crois pas que ça soit nécessaire.

Bon me revoici, me revoilà. J'ai réussi à régler tous mes problèmes...sauf un (oui ce serait trop beau sinon 🙄) !!! Je suis toujours sur l'activité 2 Créez des pages web interactives avec JavaScript avec l'ennoncé suivant (et dont la première partie a été faite dans l'activité 1 du même cours) : 

Votre travail consiste à intégrer à l’application un formulaire permettant d’ajouter un nouveau lien en saisissant ses informations (titre, URL et auteur).

Voici quelques consignes supplémentaires :

• Le formulaire apparaît lors du clic sur le bouton “Ajouter un lien”.
• La saisie des champs Titre, URL et Auteur du lien est obligatoire.
• Si l’URL saisie ne commence ni par “http://” ni par “https://”, on lui ajoute “http://” au début.
• Lorsque l’utilisateur valide le nouveau lien, celui-ci est ajouté en haut de la page, le formulaire d’ajout disparaît et un message d’information s’affiche pendant 2 secondes.
• Les variables JavaScript doivent respecter la norme camelCase et le fichier liensweb.js doit être correctement indenté.

Remarque : les liens n’étant pas sauvegardés de manière persistante, le rechargement de la page web affiche uniquement les liens initiaux.

J'ai donc un problème avec la saisie obligatoire. J'ai bien mis l'attribut required aux champs obligatoires à remplir. Sauf qui si je mets l'eventListener sur l'event "click", cet attribut n'est pas pris encompte et donc il est possible de valider l'ajout et d'ajouter des champs vides. Mais si je le mets sur l'event "submit" l'attribut est bien pris en compte mais tout ce qui est programmé dans la fonction ne se passe pas. Je vous mets la première partie du code faite dans le première activité

/* 
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) {
    let sectionsElts = document.createElement("section");
    sectionsElts.style.backgroundColor = "white";
    sectionsElts.style.padding = "5px";
    sectionsElts.style.margin = "5px";
    sectionsElts.style.marginLeft = "0px";

    let paragrapheElt = document.createElement("row");
    paragrapheElt.style.padding = "3px";

    let titleElt = document.createElement("a");
    let strongElt = document.createElement("strong")
    strongElt.style.color = '#428BCA';
    strongElt.textContent = lien.titre;
    titleElt.href = lien.url;
    titleElt.style.textDecoration = "none";
    titleElt.target = "_blank";

    let linkElt = document.createElement("p");
    linkElt.textContent = " " + lien.url;
    linkElt.style.fontSize = "0.8em";
    linkElt.style.display = "inline";

    let auteurElt = document.createElement("p");
    auteurElt.textContent = "Ajouté par " + lien.auteur;
    auteurElt.style.fontSize = "0.8em";
    auteurElt.style.margin = "5px";
    auteurElt.style.textTransform = "capitalize";

    titleElt.appendChild(strongElt);
    paragrapheElt.appendChild(titleElt);
    paragrapheElt.appendChild(linkElt);
    sectionsElts.appendChild(paragrapheElt);
    sectionsElts.appendChild(auteurElt);

    return sectionsElts;
}

let contenu = document.getElementById("contenu");

listeLiens.forEach(lien =>{
    let elementLien = creerElementLien(lien)
    contenu.appendChild(elementLien);
})

ET la seconde partie pour cette 2ème activité. : 

/*
Activité 2
*/
// - Le formulaire apparaît lors du clic sur le bouton “ajouterElt un lien”.
// - La saisie des champs Titre, URL et Auteur du lien est obligatoire.
// -  Si l’URL saisie ne commence ni par “http://” ni par “https://”, on lui ajoute “http://” au début.
// - Lorsque l’utilisateur valide le nouveau lien, celui-ci est ajouté en haut de la page, le formulaire d’ajout disparaît et un message d’information s’affiche pendant 2 secondes.
// - Les variables JavaScript doivent respecter la norme camelCase et le fichier liensweb.js doit être correctement indenté.
// Remarque : les liens n’étant pas sauvegardés de manière persistante, le rechargement de la page web affiche uniquement les liens initiaux.


let formELt = document.createElement("form");
formELt.method = "post";

let formAuteurElt = document.createElement("input");
formAuteurElt.type = "text";
formAuteurElt.placeholder = "Entrez vote nom"
formAuteurElt.setAttribute("required", "");
formAuteurElt.style.padding = "5px";
formAuteurElt.style.width = "10%";
formAuteurElt.style.minWidth = "90px";
formAuteurElt.style.maxWidth = "110px";

let formTitreElt = document.createElement("input");
formTitreElt.type = "text";
formTitreElt.placeholder = "Entrez le titre du site"
formTitreElt.setAttribute("required", "");
formTitreElt.style.padding = "5px";
formTitreElt.style.width = "20%";
formTitreElt.style.minWidth = "120px";
formTitreElt.style.maxWidth = "200px";

let formUrlElt = document.createElement("input");
formUrlElt.type = "text";
formUrlElt.placeholder = "Entrez le lien du site"
formUrlElt.setAttribute("required", "");
formUrlElt.style.padding = "5px";
formUrlElt.style.width = "25%";
formUrlElt.style.minWidth = "120px";
formUrlElt.style.maxWidth = "250px";

let ajLienElt = document.createElement("button");
ajLienElt.textContent = "Ajouter un lien";

let ajouterElt = document.createElement("input");
ajouterElt.type = "submit";
ajouterElt.value = "Ajouter";


document.getElementById("formu").appendChild(ajLienElt);

formELt.appendChild(formAuteurElt);
formELt.appendChild(formTitreElt);
formELt.appendChild(formUrlElt);
formELt.appendChild(ajouterElt);
formELt.style.display = "none";
document.getElementById("formu").appendChild(formELt);




ajLienElt.addEventListener("click", function(e){
    ajLienElt.style.display = "none";
    formELt.style.display = "";
    formAuteurElt.value = "";
    formUrlElt.value = "";
    formTitreElt.value = "";
})



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

    if ((formUrlElt.value.indexOf("http://")===-1) && (formUrlElt.value.indexOf("https://")=== -1)) {
        formUrlElt.value = "http://"+formUrlElt.value;
    }
    let lienForm = {titre : formTitreElt.value, url : formUrlElt.value, auteur : formAuteurElt.value};
    let nvObjLien = Object.create(Object);
    listeLiens.unshift(lienForm);
    let newElt = creerElementLien(listeLiens[0]);
    document.getElementById("contenu").insertBefore(newElt, document.querySelector("section"));

    let msgInfoElt = document.createElement("p");
    msgInfoElt.textContent = "Le lien " + formTitreElt.value + " a bien été ajouté"
    msgInfoElt.style.color = "blue";
    msgInfoElt.style.backgroundColor = "#5ea2c7";
    document.getElementById("formu").insertBefore(msgInfoElt,ajLienElt);
    setTimeout(function(){
        msgInfoElt.innerHTML = "";
    }, 2000);

    ajLienElt.style.display = "";
    formELt.style.display = "none";    

    e.preventDefault();
})

Si je ne trouve pas comment faire, j'en viendrais à soumettre l'exercice comme ça. Ca fait 2 semaines que je suis dessus, et je ne vois pas comment je pourrais trouver la solutions toute seule. Je pense que je passe à côté de quelque chose, mais je ne sais pas quoi. 

En tout cas, merci d'avance.

-
Edité par Eylyn 12 août 2019 à 11:16:07

Bonjour,

Je suis actuellement le cour : Créer des sites web interqctif avec javascript, le petit soucis étant que je n'arrive pas a lier mon code javascript au code html, je n'ai d'ailleur jamais réussi. Le code js fonctionne si je l'insert directement sur le html

Voici mon code html :

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Ma page web</title>

</head>

<body>
    <h1>Ma page web</h1>
    <p>Bonjour, je m'appelle Baptiste.</p>
    <p>J'habite dans la belle ville de <a href="http://www.lyon.fr">Lyon</a>.</p>

    <script src="../js/cours.js"></script>
    
</body>

</html>

et mon code js :

let h = document.head; // La variable h contient l'objet head du DOM
console.log(h);

let b = document.body; // La variable b contient l'objet body du DOM
console.log(b);

et voici l'arborescence de mes fichiers:

javascript-web

        chapitre_1

                 html

                      cour.html

                 js

                      cour.js

(oui c'est fait maison xD)

@iPerionn bonjour, cour.js != cours.js