Bonjour,

je viens de terminer le cours "Apprenez à coder avec JavaScript". J'attaque donc le cours "Créez des pages interactives avec JS". Je lis qu'il faut

• L'éditeur de code Brackets avec l'extension Beautify installée."

Je travaille sur Sublime Text. N'y a t il pas une extension équivalente ?

Merci

-
Edité par jturpin 10 août 2016 à 16:07:21

Bonjour Muychkine87,

peux tu montrer ton code, sinon ca va être dur de t'aider.

bonjour à tous

je suis à la 3e partie (ajax), gestion basique des erreurs

lorsque j'essaye avec une url incorrecte j'obtiens avant le message "erreur réseau" un message 'brut' (GET http://localghost/javascript-web-srv/data/langages.txt net::ERR_NAME_NOT_RESOLVED(anonymous function) @ cours.js:17)

C'est normal ?

-
Edité par Ariane98 12 août 2016 à 17:47:59

Ariane98 a écrit:

bonjour à tous

je suis à la 3e partie (ajax), gestion basique des erreurs

lorsque j'essaye avec une url incorrecte je n'obtiens avant le message "erreur réseau" un message 'brut' (GET http://localghost/javascript-web-srv/data/langages.txt net::ERR_NAME_NOT_RESOLVED(anonymous function) @ cours.js:17)

C'est normal ?

-
Edité par Ariane98 il y a environ 1 heure

Bonjour Ariane,

A mon avis c'est parce que tu as modifié le nom du serveur (localghost) donc le serveur ne peut pas te répondre. Essaie en modifiant le nom du fichier pour qu'il arrive au moins au serveur. exemple ../langage.bad.

merci Maximus

l'erreur est volontaire, justement pour faire apparaitre le message d'erreur  ;-)

@Gracchus737: Sublime Text sans plugin donne déjà bien, il y a d'ailleurs beaucoup de thèmes. Je ne sais pas s'il existe un plugin semblable à Beauty de Brackets, je n'ai souvent pas besoin de plugin avec Sublime. De toutes les façons, l'essentiel est d'avoir un bon éditeur de code (avec des colorations syntaxiques, etc.) Bonne continuation!

-
Edité par Bam92 13 août 2016 à 12:48:43

Bonsoir à toutes et à tous,

J'ai un problème concernant le deuxième chapitre (les formulaires) de la deuxième partie (Jouez avec vous utilisateurs)

Mon problème c'est que je ne comprends pas la gestion de l'événement "change" pour un groupe de boutons radio.

Code HTML

<p>
            <input type="radio" name="abonnement" id="abonewspromo" value="abonewspromo">
            <label for="abonewspromo">M'abonner à la newsletter et aux promotions</label>
            <br>
            <input type="radio" name="abonnement" id="abonews" value="abonews">
            <label for="abonews">M'abonner uniquement à la newsletter</label>
            <br>
            <input type="radio" name="abonnement" id="aborien" value="aborien" checked>
            <label for="aborien">Ne pas m'abonner</label>
            <br>
        </p>

code JavaScript

// Affichage du type d'abonnement choisi
var aboElts = document.getElementsByName("abonnement");
for (var i = 0; i < aboElts.length; i++) {
    aboElts[i].addEventListener("change", function (e) {
        console.log("Formule d'abonnement choisie : " + e.target.value);
    });
}

Théoriquement,quand on sélectionne un bouton, l'événement "change" doit se déclencher 2 fois : l'ancien bouton est désélectionné (1) et nouveau bouton est sélectionné (2).

Mais en pratique, l'événement ne se déclenche qu'une seule fois et c'est lors de clic sur un nouveau bouton pour le sélectionner et l'objet Event ne contient que les informations sur celui-ci.

Donc je me demande s'il s'agit vraiment d'une gestion de l'événement "change" ou bien tout simplement de l'événement "click" pour récupérer les informations du bouton cliqué.Dans le cours il est clairement dit que e.target.value ne contient que  la valeur de l'attribut value de la nouvelle balise mais apparemment çà s'applique sur toutes les propriétés comme le montre mon projet sur JSFiddle.

Je remercie d'avance tous ceux qui me viendront en aide.

Bonjour,

je travaille sur l'activité 1 du Cours Créer des pages web interactives avec JS. Il s'agit de faire un site de partage de liens. Je n'arrive pas à faire mieux que le code ci-dessous. Qqun peut-il m'aider ? Merci

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


//on applique le style 'lien" à la div"contenu'
var x=document.getElementById("contenu");
x.classList.add("lien");


//la fonction est cré
function listingLiens(url,titre, auteur){

//on va créer une première span qui prend l'id du nom du lien
var spanElt=document.createElement("span");
spanElt.id=titre;
document.getElementById("contenu").appendChild(spanElt);


//On va créer un lien, on lui attribue une url, une ancre, un id et une classe
var lien=document.createElement("a");
lien.href=listeLiens[i].url;
lien.textContent=listeLiens[i].titre;
lien.id=listeLiens[i].titre;
lien.classList.add("lien");


//le lien est inséré
document.getElementById(lien.id).appendChild(lien);


//on va chercher le nom de l'auteur
var auteurElt=listeLiens[i].auteur;

//on crée une nouvelle span pour indiquer l'ancre du lien et le nom de l'auteur
var span2Elt=document.createElement("span");
span2Elt.id=listeLiens[i].titre;
span2Elt.textContent=(listeLiens[i].url+" ajouté par "+auteurElt);

//cette span est inserée
document.getElementById(span2Elt.id).appendChild(span2Elt);


//on saute une ligne
document.getElementById(span2Elt.id).innerHTML+='<br><br>';



}


//appel de fonction
for(var i=0;i<listeLiens.length;i++){
listingLiens(listeLiens[i].url,listeLiens[i].titre,listeLiens[i].auteur);
}

-
Edité par Gracchus737 16 août 2016 à 15:06:20

@Bam92

Je n'arrive pas à réaliser la mise en forme demandée dans la consigne de l'activité.

salut,

quelle est la différence entre "parentNode" et "offsetParent" quand on veut obtenir la position de l'élément par rapport à la page web(donc on doit remonter à travers les parents de cet élément, mais avec quelle propriété?) ?

do {

top += element.offsetTop;

left += element.offsetLeft;

} while (element = element.offsetParent);   

OU BIEN 

do {

top += element.offsetTop;

left += element.offsetLeft;

} while (element = element.parentNode); 

???

-
Edité par ColinLescarret 22 août 2016 à 20:36:55

-
Edité par MicaMac 29 août 2016 à 19:33:28

Bonjour,

Je galère dans l'activité 2.

En effet, je n'arrive pas à insérer le lien dans la liste et du coup il n'apparait pas.

Mon formulaire est bien visible à l'écran mais quand je fais "envoyer" il ne se passe rien!!!

Est ce que quelqu'un peut me venir en aide?

Merci 

Votre problème est apparemment un problème de code qui ne marche pas.

donc il serait plus intéressant si vous partagez votre code html et js.

MicaMac a écrit:

Bonjour,

dans le chapitre Envoyez des données à un serveur web,  les fichier post_form.log et post_json.log ne sont pas créés.

Quelqu'un peut m'aider svp ?

Merci

-
Edité par MicaMac 29 août 2016 à 19:33:28

Hello

pour les fichiers post_form.log et post_json.log, tu vas dans Bracket et tu les crées et tu les mets au m^me endroit que les php.

Ensuite pendant les exercices, tu cliqueras dessus et les infos appaitront dans une console (en tout cas sur mac ça fonctionne !).

Bon cours


-
Edité par HélèneL2 3 septembre 2016 à 20:38:18

Bonjour,

Dans l'exercice du chapitre 3 liste des journaux, je voudrai changer l'affichage du lien par un mot tel que " Le monde" a la place de "http://lemonde.fr"".

pour cela je veux utiliser 2 tableaux dans la meme boucle for. Est- ce possible?

Le code auquel je pense est le suivant : 

// Liste des journaux
var journaux = ["http://lemonde.fr", "http://lefigaro.fr", "http://liberation.fr"];
var noms = ["Le monde", "Le figaro", "liberation"];



for ((i = 0; i<journaux.length; i++) && (j=0; j<noms.length; j++)) {


    var ulElt = document.createElement("ul"); 
    var aElt = document.createElement("a");

    aElt.href = journaux[i];
    aElt.textContent = journaux[j];

    ulElt.appendChild(aElt);
 
    document.getElementById("contenu").appendChild(ulElt);

}

Bonsoir

Je suis sur mobile et je ne sais pas. Je te conseille de créer un tableau objet

@FlorianSouss

Oui tu peux utiliser deux tableaux différents dans une même boucle for. Mais le mieux est de créer un tableau objet.

Chaque lien aura 2 propriété. Son ancre et son url.

Tu peux aussi crée un tableau à deux dimension.

Merci Gracchus et Bam92.

le tableaux objet est bien la solution.

Mon code  devient le suivant :

function journaux(journal,website) {
    this.nom=journal;
    this.site=website;
    
}


    var leMonde=new journaux("Le monde","http://lemonde.fr")
    var leFigaro =new journaux ("Le figaro","http://lefigaro.fr")
    var liberation =new journaux ("Liberation","http://liberation.fr")


    var lesJournaux= Object.create(journaux);
        journaux[0]=leMonde;
        journaux[1]=leFigaro;
        journaux[2]=liberation;



for (i = 0; i <= journaux.length; i++)  {


    var ulElt = document.createElement("ul"); 
    var aElt = document.createElement("a");

    aElt.href = journaux[i].site;
    aElt.textContent = journaux[i].nom;

    ulElt.appendChild(aElt);
 
    document.getElementById("contenu").appendChild(ulElt);

}

Ca marche!!! 

-
Edité par Silkflo 5 septembre 2016 à 13:59:05

NicolasFD a écrit:

bonjour à tous,

je travail les exercices du chapitre 10 sur l'envoie de données au serveur, sur l'exercice d'envoie d'article.

voici le code Html

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Evnoyer des données</title>
</head>

<body>
    <h3>Qui est le plus fort ?</h3>
    <form id="data">
        <p>
            <label for="titre">titre</label>
            <input type="text" name="titre" id="titre" value="titre" >
        </p>
        <p>
            <label for="commentaire">commentaire</label></br>
            <textarea name="commentaire" id="commentaire" value="commentaire" required >computer</textarea>
        </p>

        <input type="submit" id="envoyer" value="envoyer">
    </form>

    <script src="../js/ajax.js"></script>
    <script src="../js/article.js"></script>
</body>

</html>

et le code javascript

var formElt = document.getElementById("data");

var envoyerElt = document.getElementById("envoyer");

console.log(formElt);

envoyerElt.addEventListener("click",function(e){
    
    e.preventDefault();
    
    data = new FormData(formElt);
    
    ajaxPost("http://oc-jswebsrv.herokuapp.com/article",data,function(){
        console.log("valeur envoyé");
    });
});

lors de la soumission du formulaire j'obtiens l'erreur

"400 Bad Request http://oc-jswebsrv.herokuapp.com/article"

je me demande si cela ne provient pas de mon code html, car j'ai tester la solution de l'exercice et j'obtiens la même erreur.

Est ce que quelqu'un pourrais me guider, pour que je comprenne d'ou vient le problème.

merci d'avance

Hello .

En fait, quand tu utilises formData(), le serveur attend des informations précises, renseignées par le name de ton champs ( input, ou autre), du coup quand tu fais le le formulaire, tu es obligé d'utiliser name=titre et name=contenu, sinon le serveur ne sait pas comment gérer les informations. C'est pas du tout explicité ni dans le cours ni dans l'exercice, mais c'est ça le souci. 

Utilise avec ton js, le code du formulaire HTML de la correction et tu verras ça rentre tout de suite ( j'ai passé deux heures à éplucher les réponses et faire des tests pour trouver .... )

Voilou

Hyphaene a écrit:

C'est pas du tout explicité ni dans le cours ni dans l'exercice, mais c'est ça le souci. 

Oui ce cours c'est pas mal, mais pour bien manier le sujet il faut vraiment approfondir derrière.

-
Edité par Gracchus737 6 septembre 2016 à 9:58:14

Bonjour,

J'ai un petit problème, au tout début du cours. Au moment où il faut faire ceci plus précisément :

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);

J'ai dans brackets l'erreur :

problème JSLint :

'console' was used before it was defined.

Dans ce topic :

https://openclassrooms.com/forum/sujet/cours-apprenez-a-coder-avec-javascript

le message de bpasquet du 15 oct 2015 22:56:30 explique que l'erreur peut être ignorée.

Je l'ai donc ignorée, et ai ouvert l'onglet console de firefox pour visualiser le résultat.

Du coup, j'ai comme résultats :

<head>

null

head veut bien s'afficher mais body renvoie null. Je ne sais pas si ça a un rapport avec l'erreur dont je parlais en début de message. Quelqu'un sait comment y remédier SVP ?

Si ça peut aider, voici mon code html

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>page web</title>
        <script src="../js/cours.js"></script>
    </head>
    <body>
        <h1>titre</h1>
        <p>paragraphe <a href="bing.com">lien</a></p>
    </body>
</html>

Merci d'avance.

-
Edité par frm2 7 septembre 2016 à 12:55:59

Si je charge ton code HTML, et que je lance tes instructions dans la console firebug j'obtiens: