Le problème de communication serveur lié à Chrome, il faut placer ses fichiers sur son serveur apache (dans le dossier www) et ça suffit à faire fonctionner le code. J'ai eu le même soucis et par curiosité j'ai déplacé le chapitre de cours dans le www, et hop, ça marche nickel.

Bref, je viens de terminer le cours avec un magnifique 86% de réussite :

11/11 à l'activité 1

7/10 à l'activité 2 ( 2 notes à 9/10 et un ... 3/10)

8/8 à l'activité 3 

Je ne vais pas incriminer les noobs, chacun fait ce qu'il peut à son niveau . 

Par contre, chacun fait ce qu'il veut, c'est plus ennuyant. On est entre développeurs, notre taf, et ce qui est aussi demandé lors des corrections, c'est d'ouvrir le capot de l'appli pour voir comment ça fonctionne, et le cas échéant, pourquoi ça ne fonctionne pas. D'essayer de comprendre le code. Lire du code et essayer de comprendre la logique, ça fait aussi partie de la courbe de progression.

Du coup, quand je vois qu'un correcteur me met 3/10 parce qu'un bouton ne s'affiche pas, alors que le même code a fonctionné, les activités 2 et 3 confondues, pour les 5 autres . Il y a de quoi se poser des questions. 

Je me les suis posé les questions: 

- son navigateur a buggé ?

- un bout de code s'est fait la malle durant le dezippage ?

- il a mis la main devant l'écran et a donc caché le bouton ? 

-le bouton est parti défiler avec les cheminots ? 

Du coup, il est probable qu'il y ait une erreur logiciel à un moment ou un autre, et ce n'est pas vraiment prévisible. 

Par contre, il est aussi probable que j'eusse affaire à un correcteur pas impliqué, qui n'a fait que ce que le barème demande côté code, c'est à dire vérifier l'indentation... Parce que du coup, je ne sais pas pourquoi mon bouton ne s'affichait pas chez lui ! 

Noob ou pas noob, un mec qui n'est pas curieux face à une appli qui ne fonctionne pas, je lui donne peu de succès dans une carrière de dev ... 

Quand j'ai fait le cours php/mysql il y a 2 ans, j'ai passé près d'une heure sur 1 correction, car rien du code php ne fonctionnait. Le code était propre, bien indenté, complet. Mais rien qui ne sortait côté navigateur... ça m'ennuyait de mal noter une activité qui en théorie devait fonctionner... Jusqu'à ce que je découvre que dans wamp, il y a une option dans les paramètres php pour accepter les balises php abrégées ... <? à la place de <?php ... Et que c'est justement cette option non cochée chez moi qui empêchait l'exécution du code. 

Voilà, tout ça pour dire que if ( !bol || !(bonne personne)) {return "c'est moche :/ ";} 

Yep, moi jme suis pris une sale note parce que j'ai oublié le "Child" sur mon appendChild() final du coup rien ne s'affichait ... mais uniquement sur IE. Etonnament append() fonctionne pour Firefox et Chrome, et comme je teste généralement sur Chrome ... XD

Le correcteur devait utiliser IE, m'a fallu du temps pour trouver le pourquoi du comment.

Sinon merci pour l'astuce de déplacer le dossier des cours sur APIs sur le serveur apache, j'avais évidement le même soucis avec Chrome!

Après relecture, la seule chose qui pourrait avoir fait planter mon code chez ce correcteur, c'est que je viens de remarquer que j'ai mis des guillemets simples, au lieu de doubles, pour la valeur de l'id du bouton ... Ah ah la boulette

/

-
Edité par p-e-b 16 avril 2018 à 3:00:07

Hello, j'ai un petit soucis sur l'activité 2, j'arrive à mettre le nouveau lien dans mon tableau listeLiens mais  à partir de la je n'arrive pas à afficher son contenu :s

voici mon code :

/* 
Activité 2
*/

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

];

//AFFICHAGE STATIQUE DES LIENS
//Creation de l'élément UL on ajoute un enfant nommé liste à l'Id contenu
var contenu=document.getElementById('contenu');
liste=document.createElement('ul');
contenu.appendChild(liste);
//On boucle dans le tableau de lien affin d'afficher tout son contenu
for(i=0;i<listeLiens.length;i++){
    var listeContent= document.getElementsByTagName('ul')[0];//on selectionne la 1ere liste de la page
    //Creation des li chaque element représente chaque li
    var item=document.createElement('li');
    //On applique la classe .lien a nos éléments li
    item.className="lien";
    //Modification du style de la liste : suppression puces 
    item.style.listStyleType="none";
    //Insertion du titre hypertexte dans le li
    item.insertAdjacentHTML("afterBegin",'<a href='+listeLiens[i].url+'>'+'<h2>'+listeLiens[i].titre+'</h2>'+'</a>');
    
    //ajout des items a notre liste
    listeContent.appendChild(item);
    //coloration en bleu des titre des lien et suppression du underline
    var titreLien=document.getElementsByTagName('h2')[i];
    titreLien.style.color="#428bca"; 
    //passage du h2 en inline pour supprimer le saut de ligne
    titreLien.style.display="inline"; 
    // chargement des lien dans la variable lien
    var lien=document.getElementsByTagName('a')[i];
    //suppression des text decoration sur les liens
    lien.style.textDecoration="none";
    //insertion du lien text et des auteurs dans balise span après la fin du lien </a>
    lien.insertAdjacentHTML("afterend",'<span>'+' '+listeLiens[i].url+'</br>'+'Ajouté par: '+listeLiens[i].auteur+'</span>');
};
      

//AJOUT DYNAMIQUE DE LIEN
//creation du bouton d'ajout juste après le H1
titre=document.getElementsByTagName('h1')[0];
titre.insertAdjacentHTML("afterend",'<button>Ajouter un site</button');
//ajout d'un id au bouton
button=document.getElementsByTagName('button')[0];
button.setAttribute("id","ajoutBouton");

//Creation du formulaire après le h1
titre.insertAdjacentHTML("afterend",'<form></form>');
var form=document.getElementsByTagName('form')[0];
form.setAttribute("id","formulaire");

// Insertion du formulaire dans une div id="formulaire"
var parent = form.parentNode;
var div = document.createElement('div');
// set the wrapper as child (instead of the element)
parent.replaceChild(div, form);
// set element as child of wrapper
div.appendChild(form);
div.setAttribute("id","formulaire");

button.addEventListener("click", function(){
//creation des 3 input 
    var nomAuteur=document.createElement("input");
    nomAuteur.setAttribute("placeholder","Entrez votre nom");
    nomAuteur.setAttribute("required","required");

    var siteUrl=document.createElement("input");
    siteUrl.setAttribute("type","url");
    siteUrl.setAttribute("placeholder","Entrez l'adresse du site");
    siteUrl.setAttribute("required","required");

    var nomSite=document.createElement("input");
    nomSite.setAttribute("placeholder","Nom du site");
    nomSite.setAttribute("required","required");  
    
// creation du bouton d'envoi de lien
    var submit=document.createElement("input");
    submit.setAttribute("type","Submit");

//ajout de tous les élément comme enfant du formulaire
    form.appendChild(nomAuteur);
    form.appendChild(siteUrl);
    form.appendChild(nomSite);
    form.appendChild(submit);
//Suppression de l'affichage du bouton
    button.style.display="none";
//fonction ajout de liens
    var newLien={
            ajouter:function(titre,url,auteur){
                this.titre=nomSite.value;
                this.url=siteUrl.value;
                this.auteur=nomAuteur.value
            }

        };
//Au clic sur submit les champs sont inséré dans notre tableau de liens
    form.addEventListener("submit",function(e){
        //A FAIRE : verification du commencement de l'url
       
    newLien.ajouter(nomSite,siteUrl,nomAuteur);
    listeLiens.push(newLien);
    console.log(listeLiens);
    //A FAIRE : affichage du message de confirmation lien bien envoyé

    });
});

Si tu insères ton nouveau lien dans le tableau listeLiens il faut rafraîchir ton affichage par la suite pour le faire apparaître sur ta page. Il faut donc mettre cette partie de code (affichage des liens) dans une fonction que tu dois rappeler après l'insertion du lien dans le tableau.

Je me suis un peu aider de code posté ici pour modifier le code du tp1 et j’obtiens ce code.

(edit) j'ai réussi a afficher mon nouveau lien mais celui ci se met à la fin de ma liste et je n'arrive pas à le mettre en tete :s

/* 
Activité 2
*/

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

];

//AFFICHAGE STATIQUE DES LIENS
function ajoutElement(liste) {
    var titreElt = document.createElement("a");
    titreElt.href = liste.url;
    titreElt.style.color = "#428bca";
    titreElt.style.textDecoration = "none";
    titreElt.style.marginRight = "7px";
    titreElt.appendChild(document.createTextNode(liste.titre));
   
    var urlElt = document.createElement("span");
    urlElt.appendChild(document.createTextNode(liste.url));
   
    // Ligne Titre + Url
    var ligneTitreElt = document.createElement("h4");
    ligneTitreElt.appendChild(titreElt);
    ligneTitreElt.appendChild(urlElt);
    ligneTitreElt.style.margin = "0px";
   
    // Ligne de l'auteur
    var ligneAuteurElt = document.createElement("span");
    ligneAuteurElt.appendChild(document.createTextNode("Ajouté par " + liste.auteur));
     
    // Création des Div pour les éléments
    var divListeElt = document.createElement("div");
    divListeElt.classList.add("liste");
    divListeElt.appendChild(ligneTitreElt);
    divListeElt.appendChild(ligneAuteurElt);
    //Apport du style voulu à nos Div
    divListeElt.style.backgroundColor = "white";
    divListeElt.style.paddingTop = "10px";
    divListeElt.style.paddingLeft = "10px";
    divListeElt.style.paddingBottom = "10px";
    divListeElt.style.marginTop = "10px";
     
    return divListeElt;
}
   
    var contenuElt = document.getElementById("contenu");
// Parcours de la liste des liens et ajout d'un élément au DOM pour chaque lien
    listeLiens.forEach(function (liste) {
        var listeElt = ajoutElement(liste);
        contenuElt.appendChild(listeElt);
    });
  

//AJOUT DYNAMIQUE DE LIEN
//creation du bouton d'ajout juste après le H1
titre=document.getElementsByTagName('h1')[0];
titre.insertAdjacentHTML("afterend",'<button>Ajouter un site</button');
//ajout d'un id au bouton
button=document.getElementsByTagName('button')[0];
button.setAttribute("id","ajoutBouton");

//Creation du formulaire après le h1
titre.insertAdjacentHTML("afterend",'<form></form>');
var formElt=document.getElementsByTagName('form')[0];
formElt.setAttribute("id","formulaire");

button.addEventListener("click", function(){
//creation des 3 input 
    var nomAuteur=document.createElement("input");
    nomAuteur.setAttribute("placeholder","Entrez votre nom");
    nomAuteur.setAttribute("required","required");

    var siteUrl=document.createElement("input");
    siteUrl.setAttribute("type","url");
    siteUrl.setAttribute("placeholder","Entrez l'adresse du site");
    siteUrl.setAttribute("required","required");

    var nomSite=document.createElement("input");
    nomSite.setAttribute("placeholder","Nom du site");
    nomSite.setAttribute("required","required");
// creation du bouton d'envoi de lien
    var submit=document.createElement("input");
    submit.setAttribute("type","Submit");

//ajout de tous les élément comme enfant du formulaire
    formElt.appendChild(nomAuteur);
    formElt.appendChild(siteUrl);
    formElt.appendChild(nomSite);
    formElt.appendChild(submit);
//Suppression de l'affichage du bouton
    button.style.display="none";  
    
// Création de l'event d'ajout du nouveau lien
formElt.addEventListener("submit", function(e) {
    e.preventDefault();
     //Création de l'objet contenant les info du nouveau lien
        var newLien = {
            titre: nomSite.value,
            url: siteUrl.value,
            auteur: nomAuteur.value
        };
    
            // Ajoute le nouveau lien dans notre tableau de liens
            var newLienElt = ajoutElement(newLien);
            contenuElt.appendChild(newLienElt);
        
    });
            

});

-
Edité par Julemane 16 avril 2018 à 16:59:03

hello

j'en suis à la partie gestion d'une API

https://openclassrooms.com/courses/creez-des-pages-web-interactives-avec-javascript/utilisez-des-api-web

le soucis c'est que l'api utilisé pour le cours ne répond pas :

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

Hello !
Même souci chez moi , les requêtes HTTP envoyées vers l'API renvoient une erreur 503 (Service temporairement indisponible ou en maintenance).

Bonjour à tous. J'ai également le problème de l'API qui ne répond pas... Heroku renvoi une erreur 503. Nous ne pouvons pas finir le cours, sur la dernière activité 'utilisez un serveur web externe'.

Bonjour à toutes et à tous,

J'ai un problème concernant la dernière activité du cours. Lors du chargement de ma page, il est noté :

Failed to load https://oc-jswebsrv.herokuapp.com/api/liens: The 'Access-Control-Allow-Origin' header has a value 'null' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access.

bonjours,

il n'existe pas de forum pour actionscript3.0 so... sorry

comment puis je écrire square_btn.addEventListener(MouseEvent.CLICK, trace("hello"));

Bonjour,

je remonte ce sujet en espérant avoir une réponse à ma question.
Au tout début du cours , on nous explique que la variable document est un objet qui contient les propriétés head et body. Jusque là pas de problème.

Ce que j'ai du mal à saisir ce que juste après, en s'appuyant sur ces lignes de code :

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

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

On nous explique désormais que head n'est plus une  simple propriété de l'objet document mais un objet. Ma question est simple : Est qu'une classe peut contenir comme propriété un objet ?

Je demande ça car dans le cours précédent, https://openclassrooms.com/fr/courses/2984401-apprenez-a-coder-avec-javascript
cela n'est absolument pas abordé.

Merci pour votre aide.

yoZencolere a écrit:

Bonjour,

je remonte ce sujet en espérant avoir une réponse à ma question.
Au tout début du cours , on nous explique que la variable document est un objet qui contient les propriétés head et body. Jusque là pas de problème.

Ce que j'ai du mal à saisir ce que juste après, en s'appuyant sur ces lignes de code :

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

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

On nous explique désormais que head n'est plus une  simple propriété de l'objet document mais un objet. Ma question est simple : Est qu'une classe peut contenir comme propriété un objet ?

Je demande ça car dans le cours précédent, https://openclassrooms.com/fr/courses/2984401-apprenez-a-coder-avec-javascript
cela n'est absolument pas abordé.

Merci pour votre aide.

Pour répondre tardivement à ta question : oui.

Une classe n'est qu'un modèle qui définit des attributs et des méthodes. et un type objet peut très bien faire partie des attributs d'une autre classe. Tout comme on peut très bien définir une méthode qui renvoie un objet ou déclarer un tableau qui contient des objets. 

Créer une classe c'est définir un nouveau type de variable Tu y imposes des contraintes, et des méthodes pour le manipuler. Je te conseille un cours sur un langage POO comme java, qui est un langage typé et orienté objet, pour mieux comprendre comment tout ceci fonctionne.

Bonjour,

J'aimerais bénéficier de vos lumières concernant l’exécution du code JS du premier chapitre (code solution)  : 

function afficherEnfant(noeud, indice) {
console.log("");
    if (noeud.nodeType === document.ELEMENT_NODE) {
        if ((indice >= 0) && (indice < noeud.childNodes.length)) {
            console.log(noeud.childNodes[indice]);
        } else {
            console.error("Indice incorrect");
        }
    } else {
        console.error("Type de noeud incorrect");
    }
}

// Doit afficher le noeud h1
afficherEnfant(document.body, 1);

// Doit afficher l'erreur "Indice incorrect"
// L'indice demandé est négatif
afficherEnfant(document.body, -1);

// Doit afficher l'erreur "Indice incorrect"
// Le noeud body a moins de 9 noeuds enfants
afficherEnfant(document.body, 8);

// Doit afficher l'erreur "Type de noeud incorrect"
// Le premier noeud enfant de body est textuel et n'a donc pas d'enfants
afficherEnfant(document.body.childNodes[0], 0);

J'ai un problème dans ma console qui n’exécute pas la fonction lorsque l'indice est négatif :

Mais il suffit que j'ajoute  """" console.error(""); """"    juste avant """" console.error(" Indice ncorrect"); """" pour que ça fonctionne.

function afficherEnfant(noeud, indice) {
    if (noeud.nodeType === document.ELEMENT_NODE) {
        if ((indice >= 0) && (indice < noeud.childNodes.length)) {
            console.log(noeud.childNodes[indice]);
        } else {
            console.error("");
            console.error("Indice incorrect");
        }
    } else {
        console.error("Type de noeud incorrect");
    }
}

Avez vous une explication ? Je travaille avec Mozzila firefox 65.0 qui est à jour.

Merci pour votre aide.

-
Edité par LucaPorte 11 février 2019 à 10:43:22

Bonjour à tous ;

Ce cours est le 4è que je suis sur Openclassroom, à la base je connais aucun langage Web.

Suis-je le seul à avoir l'impression que contrairement à d'autres cours, les exercices sont vraiment durs à réussir ? Ou bien je suis juste nul ?

À chaque fois je passe du temps à chercher, je fais des recherches sur le net, je passe pas une heure par exo non plus mais à chaque fois que je passe à la solution et que j'étudie le résultat, je m'aperçois que l'exercice fait appel à des lignes de codes qui n'ont pas encore été vu jusque là.

J'ai à chaque fois cette impression d'avoir le prof au dessus de l'épaule qui me dit "Hey oui ! pour trouver il fallait connaître XXX que nous n'avions pas vu jusque là".

Cela vient de moi ?

Cela est volontaire ?

À l'opposé, les quizs sont super simplistes par rapport aux exercices.

Bref grosse remise en question à mon 3è cours sur le Javascript xD

Salut,

Tu sais, il y aura toujours quelque chose que tu ne connais pas à propos d'un langage : une méthode, une syntaxe, une classe d'objet...
De mon point de vue, quand tu es sur un projet quel qu'il soit, tu vas avoir besoin à un moment donné d'aller fouiner dans les documentations adéquates. Que ce soit pour retrouver le fonctionnement d'une méthode, l'ordre des arguments de celle-ci, la compatibilité des navigateurs ou tout simplement pour trouver la fonction qu'il te manque.

Tu as besoin d'être en mesure de t'adapter et de rechercher dans ces documentations (et d'être capable de lire et comprendre efficacement l'anglais, car elles ne sont pas toujours en français).

Pour le javascript, ajoute https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference et https://nodejs.org/ (pour nodejs) dans tes favoris, et si tu as besoin de quelque chose, 80% du temps tu trouvera la réponse dans ces références.

A force d'expérience, tu auras moins souvent besoin d'y revenir, et tu te rendra compte que tu es devenu plus efficace.

Quelque part, ces exercices servent à ça aussi.

-
Edité par BrainError 22 février 2020 à 0:19:24

C'est aussi ce que je me dis.

J'ai un background scienfique fort donc l'habitude de faire des recherches. Je suis bilingue. De ce côté là je me fais pas de soucis.

Aussi j'ai mis du temps à comprendre que chaque élément de chaque cours de chaque chapitre était vraiment important...

Merci en tout cas.

Je continue ma route dans les cours openclassroom avant une formation intensive de 4 mois en présentiel. xD

Bonjour,

je suis au début de ce cours: il est proposé d'utiliser l'extension live-server ou toute autre extension équivalente, pour lancer avec le fichier index.html. Pouvez vous être spécifique ? De quelle applications parlez-vous? En cherchant une extension avec " live server" ou "live-server" je tombe sur plusieurs possibilités, j'ai tenté d'en installer quelques unes , mais sans succès.

Enfin, je ne peux utiliser la seconde option d'installer Node pour le moment pour des problèmes d'installation => soit on m'interdit d'installer les packages parce que je ne suis pas en mode administrator, soit on me dit le fichier package.json est inexistant ou la directory, des vérifications des chemins d'accès, vider le cache , le mode sudo n'y font rien... je suis bloqué. Je peux comprendre que c'est à moi de me débrouiller de ce côté là, puisque malgré tout, vous donnez les directives pour l'installer avec l'invit de commande/terminal.

Pouvez-vous m'aider?

Merci de votre attention