Partage

Cours Créez des pages web interactives avec JS

<< 1 ... 17 18 19 ... 24 >>

10 janvier 2017 à 15:12:42

RomainRiffault a écrit:

Oui, quand je passe e.preventDefault(), ça fonctionne. Mon lien s'affiche correctement. Par contre, le soucis, c'est que ça annule du même coup l'effet de l'attribut "required"... ! Et donc la vérification du contenu des champs du formulaire...

Étrange, peux tu poster ton code (ici ou par MP) pour que je jete un oeil ? Ca ne devrait pas avoir de lien ou de conséquences.

-
Edité par csei 10 janvier 2017 à 15:25:42

ApkarLeTsar

11 janvier 2017 à 9:55:36

Bonjour à tous, je n'arrive pas à résoudre un problème et je demande donc de l'aide de la part de communauté.

Voici mon problème je cherche à cliquer sur des liens ayant comme id=".A-playlist-i" avec i variant de 1 à n qui m'affiche le contenu associé à cette playlist qui a pour id="S-section-i" (A car cela est contenu dans un aside et S car c'est contenu dans une section).

Dans un premier temps j'ai donc créer une liste Li qui parcourt mon "aside" et ma "section" et qui me donne toutes les playlists existantes.

Dans un second temps j'utilise l'évenement clique; quand je clique sur n'importe quelle playlist je veux qu'il affiche le contenu correspondant dans la section. Par exemple si je clique sur playlist 1 (id="A-section-2") il cache toutes les playlists "S-section-k" avec k=!i et m'affiche uniquement "S-section-2" (cad k==i).

Cependant lorsque le programme s’exécute et que je clique sur un lien, il parcourt toute la boucle for (k variant de 1 à n) sans executer le script. du coup k=n+1 et le contenu de la section est logiquement inchangé.

Comment puis je faire pour que la fonction s'éxécute dans la boucle?

Merci infiniment de votre coopération!

<script>
	
	var Li=function(){
		var size=document.querySelectorAll('aside .A-playlist').length;

		
		var L=new Array();
		var M=new Array();
		for (var i = 0; i < size; i++) {
			 var A_nom_playlist=document.querySelectorAll('aside .A-playlist')[i].id;
			 var S_nom_playlist=document.querySelectorAll('section .S-playlist')[i].id;
			 L=L.concat('#'+A_nom_playlist);
			 M=M.concat('#'+S_nom_playlist);
			 
		
		};
		return([L,M]);
		
	};
		
		
	var L=Li()[0];
	var M=Li()[1];
	
        var taille=L.length;
	for(var j=0;j<taille;j++){
		$(L[j]).click(function(){
			for(var k=0;k<taille;k++){
				if(k==j){
					$(M[k]).show();
					
				}
				else{
					$(M[k]).hide();
				}
				
			}
			
			

		});
	}
	
	
	
	
	
</script>

-
Edité par ApkarLeTsar 11 janvier 2017 à 10:18:06

csei

11 janvier 2017 à 20:55:06

RomainRiffault a écrit:

Je te remercie de venir à mon secours ! Je suis en pleine détresse la...

Hello,

attention à l’événement utilisé pour envoyer ton formulaire ligne 150. Pour la validation d'un formulaire il est impératif d'utiliser l'evenement submit, et non click. (https://openclassrooms.com/courses/dynamisez-vos-sites-web-avec-javascript/les-evenements-24#/id/r-1924867)
N'oublie pas les paranthèses () à la méthode e.preventDefault; ligne 163 (e.preventDefault; => e.preventDefault();)

Après ca devrait rouler

RomainRiffault

11 janvier 2017 à 22:04:04

chrismuzikos a écrit:

RomainRiffault a écrit:

Je te remercie de venir à mon secours ! Je suis en pleine détresse la...

Hello,

attention à l’événement utilisé pour envoyer ton formulaire ligne 150. Pour la validation d'un formulaire il est impératif d'utiliser l'evenement submit, et non click. (https://openclassrooms.com/courses/dynamisez-vos-sites-web-avec-javascript/les-evenements-24#/id/r-1924867)

N'oublie pas les paranthèses () à la méthode e.preventDefault; ligne 163 (e.preventDefault; => e.preventDefault()

Après ca devrait rouler

C'est vrai pour le "submit" ! Merci beaucoup ! la vérification des champs "required" fonctionne tout à fait maintenant. Et oui effectivement, je m'étais rendu compte de mon erreyr pour le e.preventDefault(). Seulement voila, maintenant que la vérification fonctionne, c'est l'ajout du lien avec les autres qui déconne... Alors que ça fonctionnait avant...

csei

12 janvier 2017 à 9:51:13

RomainRiffault a écrit:

Seulement voila, maintenant que la vérification fonctionne, c'est l'ajout du lien avec les autres qui déconne... Alors que ça fonctionnait avant...

C'est un comportement bizarre. L’événement submit est obligatoire. Lorsque tu utilises le Débogueur de Firefox, tu remarqueras que tu ne rentres jamais dans la boucle. Étrange. J'ai vu aussi que dans ta démarche de création de liens tu ajoutais le nouvel élément en début du array listeLiens puis tu recréais tous les éléments un par un au lieu d'ajouter seulement le dernier. C'est pas génant, sauf que :

je pense que tu ne respectes pas totalement l'énoncé de l'exercice (possible baisse de note à la correction)
ici il n'y a que 3 éléments à créer. Seulement à chaque fois tu recharges tout le DOM, et ca peut devenir plus lourd en terme de perf dans tes futures app.

Pour ton problème je ne vois pas la solution pour le moment. Je te laisse chercher un peu (la solution viendra peut etre d'un autre membre du forum). Et puis il me semble que c'est l'activité 2, donc en cas de gros problèmes tu pourrais repartir de la correction de l'activité 1 .

natinho68

12 janvier 2017 à 13:17:09

Hello !

Je suis entrain de faire l'activité 2 et là je suis un peu pommé.

Je récupère bien les informations que j'entre dans le formulaire, mais maintenant je sais pas pq j'ai un black out. Comment dire à mon programme que ces infos sont à ajouter dans les liens déjà existant ?

RomainRiffault

12 janvier 2017 à 17:28:40

chrismuzikos a écrit:

RomainRiffault a écrit:

Seulement voila, maintenant que la vérification fonctionne, c'est l'ajout du lien avec les autres qui déconne... Alors que ça fonctionnait avant...

C'est un comportement bizarre. L’événement submit est obligatoire. Lorsque tu utilises le Débogueur de Firefox, tu remarqueras que tu ne rentres jamais dans la boucle. Étrange. J'ai vu aussi que dans ta démarche de création de liens tu ajoutais le nouvel élément en début du array listeLiens puis tu recréais tous les éléments un par un au lieu d'ajouter seulement le dernier. C'est pas génant, sauf que :

je pense que tu ne respectes pas totalement l'énoncé de l'exercice (possible baisse de note à la correction)

ici il n'y a que 3 éléments à créer. Seulement à chaque fois tu recharges tout le DOM, et ca peut devenir plus lourd en terme de perf dans tes futures app.

Pour ton problème je ne vois pas la solution pour le moment. Je te laisse chercher un peu (la solution viendra peut etre d'un autre membre du forum). Et puis il me semble que c'est l'activité 2, donc en cas de gros problèmes tu pourrais repartir de la correction de l'activité 1 .

C'est bon, j'ai trouvé d'ou vient l'erreur ! l'évènement de type "submit" doit être appliqué sur le formulaire, pas sur le bouton !!! Eureka !!! Tout fonctionne !! Merci beaucoup pour ton aide en tout cas ! à charge de revanche !

natinho68 a écrit:

Hello !

Je suis entrain de faire l'activité 2 et là je suis un peu pommé.

Je récupère bien les informations que j'entre dans le formulaire, mais maintenant je sais pas pq j'ai un black out. Comment dire à mon programme que ces infos sont à ajouter dans les liens déjà existant ?

Moi j'ai créer un objet, avec comme propriétés chaque valeur du formulaire, pour auteur, titre et url. Ensuite j'ai utilisé la méthode unshift() pour intégrer ce nouvel objet à listeLiens, en première position.

-
Edité par RomainRiffault 12 janvier 2017 à 17:31:21

natinho68

13 janvier 2017 à 10:00:53

RomainRiffault a écrit:

Moi j'ai créer un objet, avec comme propriétés chaque valeur du formulaire, pour auteur, titre et url. Ensuite j'ai utilisé la méthode unshift() pour intégrer ce nouvel objet à listeLiens, en première position.
-
Edité par RomainRiffault il y a environ 16 heures

Ok merci mais unshift() on a vu ça ?

csei

13 janvier 2017 à 10:22:17

natinho68

Ok merci mais unshift() on a vu ça ?

Hello, non pas vu dans le cours. Ça existe mais comme expliqué plus haut ça risque de poser des problèmes de notation lors de la correction (voir avec l'auteur) et des problèmes de performance dans les futures prod avec une logique de rechargement totale.

Sinon RomainRiffault a écrit:

C'est bon, j'ai trouvé d'ou vient l'erreur !

Bien joué

natinho68

13 janvier 2017 à 10:42:30

Bon je demande de l'aide. À la base c'est pas du tout ce que je voulais faire, mais je n'ai pas réussi à faire différemment. Je me répète de fou, c'est du spaghetti et ça fonctionne qu'à moitié.

J'aimerai un avis de quelqu'un de plus expérimenté que moi en js et si possible m'aiguiller. Merci à tous

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




// Créer un bouton "Ajouter un lien"
var bouton = document.createElement("button");
bouton.id = "boutonAjout";
bouton.textContent = "Ajouter un lien";
bouton.style.marginBottom = "10px";
document.getElementById("contenu").appendChild(bouton);




// Gestion du clic sur "Ajouter un lien"
document.getElementById("boutonAjout").addEventListener("click", function () {

    // Suppression du bouton "Ajouter un lien" en cliquant dessus
    document.getElementById("contenu").removeChild(bouton);

    // Créer un formulaire pour ajouter un lien
    var form = document.createElement("form");
    form.id = "formulaire";
    form.style.marginBottom = "10px";
    document.getElementById("contenu").insertBefore(form, document.getElementById("contenant"));

    // Créer un input pour le nom de l'auteur
    var formAuteur = document.createElement("input");
    formAuteur.id = "nomAuteur";
    formAuteur.textContent = "";
    formAuteur.setAttribute("placeholder", "Entrer votre nom");
    formAuteur.setAttribute("name", "auteur");
    formAuteur.setAttribute("required", "required");
    formAuteur.style.marginRight = "10px";
    document.getElementById("formulaire").appendChild(formAuteur);


    // Créer un input pour le titre du lien
    var formSite = document.createElement("input");
    formSite.id = "titreLien";
    formSite.textContent = "";
    formSite.setAttribute("placeholder", "Entrer le titre du lien");
    formSite.setAttribute("name", "titre");
    formSite.setAttribute("required", "required");
    formSite.style.marginRight = "10px";
    document.getElementById("formulaire").appendChild(formSite);


    // Créer un input pour le lien
    var lienSite = document.createElement("input");
    lienSite.id = "lien";
    lienSite.textContent = "";
    lienSite.setAttribute("placeholder", "Entrer le lien");
    lienSite.setAttribute("name", "lien");
    lienSite.setAttribute("required", "required");
    lienSite.style.marginRight = "10px";
    document.getElementById("formulaire").appendChild(lienSite);


    // Créer un bouton Ajouter à la fin du form
    var boutonAjoutLien = document.createElement("button");
    boutonAjoutLien.type = "submit"
    boutonAjoutLien.id = "boutonAjoutLien";
    boutonAjoutLien.textContent = "Ajouter";
    document.getElementById("formulaire").appendChild(boutonAjoutLien);

       
    // Ajouter les données dans le tableau
    document.getElementById("formulaire").addEventListener("submit", function (e) {
        var auteur = document.getElementById("formulaire").elements.auteur.value;
        var nomSite = document.getElementById("formulaire").elements.titre.value;
        var lien = document.getElementById("formulaire").elements.lien.value;

        // Créer une div class lien du lien ajouté
        var contenantAjoute = document.createElement("div");
        contenantAjoute.id = "contenantAjoute";
        contenantAjoute.classList.add("lien");

        // Créer un a href du lien ajouté
        var lienAjoute = document.createElement("a");
        lienAjoute.href = "http://" + lien;
        lienAjoute.textContent = nomSite;

        // Style du lien ajouté
        lienAjoute.style.color = "#428bca";
        lienAjoute.style.fontWeight = "bold";
        lienAjoute.style.textDecoration = "none";

        // Créer un span du lien ajouté en txt
        var textLienAjoute = document.createElement("span");

            // Le lien saisi ne contient pas les caractères http:// ou https://
            if ((lien.indexOf("http://") === -1) || (lien.indexOf("https://") === -1)) {   
                textLienAjoute.textContent = " http://" + lien;
                } else {
                textLienAjoute.textContent = " " + lien;
                }

        // Créer un saut de ligne entre le lien ajouté et l'auteur du lien
        var brElt = document.createElement("br");

        // Créer un span pour l'auteur
        var auteurAjoute = document.createElement("span");
        auteurAjoute.id = "auteur";
        auteurAjoute.textContent =  "Ajouté par " + auteur;

        // Intégration des éléments
        document.getElementById("contenu").insertBefore(contenantAjoute, document.getElementById("contenant"))
        contenantAjoute.appendChild(lienAjoute);
        contenantAjoute.appendChild(textLienAjoute);
        contenantAjoute.appendChild(brElt);
        contenantAjoute.appendChild(auteurAjoute);

        // Suppression du formulaire quand on clique sur "Ajouter"
        document.getElementById("contenu").removeChild(document.getElementById("formulaire"));

        // Ajout du succès
        var success = document.createElement("div");
        success.id = "success";
        success.style.backgroundColor = "#ddf6ff";
        success.style.paddingTop = "10px";
        success.style.paddingBottom = "10px";
        success.style.paddingLeft = "10px";
        success.style.marginBottom = "10px"


        var message = document.createElement("span");
        message.id = "message";
        message.textContent = "Le lien " + nomSite + " a bien été ajouté.";
        message.style.color = "#65838f";

        document.getElementById("contenu").insertBefore(success, document.getElementById("contenantAjoute"));
        success.appendChild(message);

        var successElt = document.getElementById("success");

        // Diminue le compteur jusqu'à 0
        function disparitionSuccess() {
            // Conversion en nombre du texte du compteur
            document.getElementById("contenu").removeChild(document.getElementById("success"));  
        }

        // Appelle la fonction diminuerCompteur toutes les secondes (1000 millisecondes)
        setInterval(disparitionSuccess, 2000);

        e.preventDefault(); // Annulation de l'envoi des données
    });


});



// Pour chaque lien
listeLiens.forEach(function (lien) {

    // Créer une div class lien
    var contenant = document.createElement("div");
    contenant.id = "contenant";
    contenant.classList.add("lien");

    // Créer un a href de l'url
    var lienElt = document.createElement("a");
    lienElt.href = lien.url;
    lienElt.textContent = lien.titre;

    // Style du lien
    lienElt.style.color = "#428bca";
    lienElt.style.fontWeight = "bold";
    lienElt.style.textDecoration = "none";

    // Créer un span du lien en txt
    var textLien = document.createElement("span");
    textLien.textContent = " " + lien.url;

    // Créer un saut de ligne entre le lien et l'auteur du lien
     var brElt = document.createElement("br");

    // Créer un span pour l'auteur
    var auteur = document.createElement("span");
    auteur.id = "auteur";
    auteur.textContent =  "Ajouté par " + lien.auteur;

    // Intégration des éléments
    document.getElementById("contenu").appendChild(contenant);
    contenant.appendChild(lienElt);
    contenant.appendChild(textLien);
    contenant.appendChild(brElt);
    contenant.appendChild(auteur);

});

220A37

15 janvier 2017 à 20:13:46

Salutations !

Juste un truc que je comprends pas : Qu'est-ce que c'est que cet Objet FormData en fait ?, Pourquoi on peut pas l'afficher dans la console, ni l'utiliser pour par exemple le convertir au format JSON comme un objet JS normal ?

VenanceKonan1

16 janvier 2017 à 4:10:03

Bonjour,

Cela fait un moment déjà que j'ai terminé le cours sur Javascript & web mais je suis encore confus quant à une question qui est la suivante: "les données d'un formulaire HTML, traitées en JS sont-elles sécurisées ?".

... j'ai commencé à faire des recherches traitant de cette question mais je n'ai malheureusement pas encore eu de reponses assez conv1cantes a ce propos.

Vos differentes réponses me seront dune grande aide

Merci

-
Edité par VenanceKonan1 16 janvier 2017 à 8:08:58

Erst die Arbeit, dann das Vergnügen _Venance:webmaster

csei

16 janvier 2017 à 10:44:52

VenanceKonan1 a écrit:

"les données d'un formulaire HTML, traitées en JS sont-elles sécurisées ?"

Ça dépend de ce que tu entends par sécurisé. Sécurisé lors de la transmission des données ? Il faut utiliser une transmission via une URL en HTTPS. Sécurisé par rapport aux données envoyées au server ? La validation JS n'est là que pour éviter d'envoyer des données pour rien. Mais la vraie vérification se fait sur le server.

220A37

16 janvier 2017 à 12:22:27

-
Edité par 220A37 16 janvier 2017 à 12:29:15

Paillenapple

17 janvier 2017 à 8:08:06

Bonjour,

Je me demandais pourquoi le code suivant fonctionnait :

var a = Number(document.getElementById("compteur_clics").textContent);
document.getElementById("clic").addEventListener("click", function() {
  document.getElementById("compteur_clics").textContent = ++a;
});

et celui-là, non :

var a = document.getElementById("compteur_clics").textContent;
var b = Number(document.getElementById("compteur_clics").textContent);
document.getElementById("clic").addEventListener("click", function() {
    a = ++b;
});

La réponse me paraîtra sans doute évidente, mais là, je vois pas du tout...

Merci à ceux qui pourront m'éclairer !

Paillenapple

Silvère MAZIERE

Total_Noob

17 janvier 2017 à 21:59:52

Paillenapple a écrit:

Bonjour,

Je me demandais pourquoi le code suivant fonctionnait :

var a = Number(document.getElementById("compteur_clics").textContent);
document.getElementById("clic").addEventListener("click", function() {
  document.getElementById("compteur_clics").textContent = ++a;
});

et celui-là, non :

var a = document.getElementById("compteur_clics").textContent;
var b = Number(document.getElementById("compteur_clics").textContent);
document.getElementById("clic").addEventListener("click", function() {
    a = ++b;
});

Dans ton deuxième bout de code, tu demandes à ta variable a de récupérer une chaîne de caractères, dans la variable b tu la forces à être convertie en nombre. Ce qui fait que quand tu es dans ta fonction, il s'attend a recevoir une chaîne, pas un nombre.

-
Edité par Total_Noob 17 janvier 2017 à 22:02:47

matos007

22 janvier 2017 à 15:51:48

Bonjour, pour la partie sur Ajax je ne parviens pas à configurer Apache comme décrit dans le cours. Je n'ai pas de fichier httpd.conf. Je suis sous Ubuntu avec Apache 2.4.18. Pouvez-vous me dire comment configurer le serveur Apache ? Merci.

AladjiMoussaKouadjo

22 janvier 2017 à 19:58:36

Salut les amis.

j'ai besoin de vos aides, j'ai un projet en main donc je dois fini avec février et je suis bloqué.

Dans ce projet j'ai deux tables qui sont la table contact( idcont, nomcont,mailcont et idgroup qui est etrangé) et la table groupe( idgroup,nomgroup et code_group). jai reussie a fait cela mais dans ma page "contact.php" je voudrai afficher le "code_group" en lieu et place de "idgroup" dans un champ combo(select)

csei

24 janvier 2017 à 18:12:41

matos007 a écrit:

Je n'ai pas de fichier httpd.conf

Bonjour, Sous Ubuntu tu peux faire une recherche en tapant dans un terminal la commande suivante :

locate httpd.conf

Sinon va à la page 3 de ce forum, et recherche le post de lvdesign qui parle du fichier .htaccess.

Ca pourra t'aider.

Tydresic

25 janvier 2017 à 22:17:12

Bonsoir,

Je viens de relever une toute petite coquille dans le dernier exercice du chapitre "Manipulez les Formulaires"
L'aide à la complétion ne fonctionne qu'à condition que la première lettre du mot soit une majuscule... est-ce volontaire ?

Ce qui se comprend aisément s'énonce clairement / DocPHP / DocHTML/CSS/JS

Sheasan

27 janvier 2017 à 21:27:56

Bonsoir,

Je suis actuellement entrain de suivre le module "Créez des pages web interactives avec JavaScript", plus exactement la "dernière" partie : interragisez avec des serveurs web.

J'ai remarqué un petit "dysfonctionnement", concernant le fichier langages.txt telechargeable ici : https://github.com/oc-courses/javascript-web-srv/tree/master/data

En effet, le contenu de ce dernier ne correspond à celui présenter dans le cours, voici le contenu effectif:


<!DOCTYPE html>
<html lang="en" class="">
  <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# object: http://ogp.me/ns/object# article: http://ogp.me/ns/article# profile: http://ogp.me/ns/profile#">
    <meta charset='utf-8'>
    

    <link crossorigin="anonymous" href="https://assets-cdn.github.com/assets/frameworks-298818692f75de57d67115ca5a0c1f983d1d5ad302774216c297495f46f0a3da.css" integrity="sha256-KYgYaS913lfWcRXKWgwfmD0dWtMCd0IWwpdJX0bwo9o=" media="all" rel="stylesheet" />
    <link crossorigin="anonymous" href="https://assets-cdn.github.com/assets/github-af26325cd1f74a051b780b08b16d1d6e14e783fc9ffc1dc07cf88b2962698d1e.css" integrity="sha256-ryYyXNH3SgUbeAsIsW0dbhTng/yf/B3AfPiLKWJpjR4=" media="all" rel="stylesheet" />
    
    
    <link crossorigin="anonymous" href="https://assets-cdn.github.com/assets/site-73b3dae8eb441c98982c7306f0e59decca409e87188e07bc1a961b8cea511aab.css" integrity="sha256-c7Pa6OtEHJiYLHMG8OWd7MpAnocYjge8GpYbjOpRGqs=" media="all" rel="stylesheet" />
    

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Language" content="en">
    <meta name="viewport" content="width=device-width">
    
    <title>javascript-web-srv/langages.txt at master · oc-courses/javascript-web-srv · GitHub</title>
    <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub">
    <link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
    <meta property="fb:app_id" content="1401488693436528">

      <meta content="https://avatars0.githubusercontent.com/u/14835279?v=3&amp;s=400" name="twitter:image:src" /><meta content="@github" name="twitter:site" /><meta content="summary" name="twitter:card" /><meta content="oc-courses/javascript-web-srv" name="twitter:title" /><meta content="javascript-web-srv - Code source du serveur web associé au cours OpenClassrooms &quot;Créez des pages web interactives avec JavaScript&quot;" name="twitter:description" />
      <meta content="https://avatars0.githubusercontent.com/u/14835279?v=3&amp;s=400" property="og:image" /><meta content="GitHub" property="og:site_name" /><meta content="object" property="og:type" /><meta content="oc-courses/javascript-web-srv" property="og:title" /><meta content="https://github.com/oc-courses/javascript-web-srv" property="og:url" /><meta content="javascript-web-srv - Code source du serveur web associé au cours OpenClassrooms &quot;Créez des pages web interactives avec JavaScript&quot;" property="og:description" />
      <meta name="browser-stats-url" content="https://api.github.com/_private/browser/stats">
    <meta name="browser-errors-url" content="https://api.github.com/_private/browser/errors">
    <link rel="assets" href="https://assets-cdn.github.com/">
    
    <meta name="pjax-timeout" content="1000">
    
    <meta name="request-id" content="E866:3AFE:DC16E8:1598A3B:588BA4C1" data-pjax-transient>

    <meta name="msapplication-TileImage" content="/windows-tile.png">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="selected-link" value="repo_source" data-pjax-transient>

    <meta name="google-site-verification" content="KT5gs8h0wvaagLKAVWq8bbeNwnZZK1r1XQysX3xurLU">
<meta name="google-site-verification" content="ZzhVyEFwb7w3e0-uOTltm8Jsck2F5StVihD0exw2fsA">
    <meta name="google-analytics" content="UA-3769691-2">

<meta content="collector.githubapp.com" name="octolytics-host" /><meta content="github" name="octolytics-app-id" /><meta content="E866:3AFE:DC16E8:1598A3B:588BA4C1" name="octolytics-dimension-request_id" />
<meta content="/&lt;user-name&gt;/&lt;repo-name&gt;/blob/show" data-pjax-transient="true" name="analytics-location" />



  <meta class="js-ga-set" name="dimension1" content="Logged Out">



        <meta name="hostname" content="github.com">
    <meta name="user-login" content="">

        <meta name="expected-hostname" content="github.com">
      <meta name="js-proxy-site-detection-payload" content="NTViN2VjYmE2OTk0YzBjNDY5OGE4ZGZjYTJlY2NlMDhkMTZhOTliMGFhODJlYzRiMmFmNzA1YWM0NDc3Njk3Mnx7InJlbW90ZV9hZGRyZXNzIjoiNzguMTkyLjE5Ny44MSIsInJlcXVlc3RfaWQiOiJFODY2OjNBRkU6REMxNkU4OjE1OThBM0I6NTg4QkE0QzEiLCJ0aW1lc3RhbXAiOjE0ODU1NDY2ODksImhvc3QiOiJnaXRodWIuY29tIn0=">


      <link rel="mask-icon" href="https://assets-cdn.github.com/pinned-octocat.svg" color="#000000">
      <link rel="icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico">

    <meta name="html-safe-nonce" content="3c09205eb6eb963b9da2230914798a6aec0d147f">

    <meta http-equiv="x-pjax-version" content="ef4a7b91595077e0cea4dfe480800686">
    

      
  <meta name="description" content="javascript-web-srv - Code source du serveur web associé au cours OpenClassrooms &quot;Créez des pages web interactives avec JavaScript&quot;">
  <meta name="go-import" content="github.com/oc-courses/javascript-web-srv git https://github.com/oc-courses/javascript-web-srv.git">

  <meta content="14835279" name="octolytics-dimension-user_id" /><meta content="oc-courses" name="octolytics-dimension-user_login" /><meta content="57594877" name="octolytics-dimension-repository_id" /><meta content="oc-courses/javascript-web-srv" name="octolytics-dimension-repository_nwo" /><meta content="true" name="octolytics-dimension-repository_public" /><meta content="false" name="octolytics-dimension-repository_is_fork" /><meta content="57594877" name="octolytics-dimension-repository_network_root_id" /><meta content="oc-courses/javascript-web-srv" name="octolytics-dimension-repository_network_root_nwo" />
  <link href="https://github.com/oc-courses/javascript-web-srv/commits/master.atom" rel="alternate" title="Recent Commits to javascript-web-srv:master" type="application/atom+xml">


      <link rel="canonical" href="https://github.com/oc-courses/javascript-web-srv/blob/master/data/langages.txt" data-pjax-transient>
  </head>


  <body class="logged-out  env-production linux vis-public page-blob">
    <div id="js-pjax-loader-bar" class="pjax-loader-bar"><div class="progress"></div></div>
    <a href="#start-of-content" tabindex="1" class="accessibility-aid js-skip-to-content">Skip to content</a>

    
    
    



          <header class="site-header js-details-container Details alt-body-font" role="banner">
  <div class="container-responsive">
    <a class="header-logo-invertocat" href="https://github.com/" aria-label="Homepage" data-ga-click="(Logged out) Header, go to homepage, icon:logo-wordmark">
      <svg aria-hidden="true" class="octicon octicon-mark-github" height="32" version="1.1" viewBox="0 0 16 16" width="32"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
    </a>

    <button class="btn-link float-right site-header-toggle js-details-target" type="button" aria-label="Toggle navigation">
      <svg aria-hidden="true" class="octicon octicon-three-bars" height="24" version="1.1" viewBox="0 0 12 16" width="18"><path fill-rule="evenodd" d="M11.41 9H.59C0 9 0 8.59 0 8c0-.59 0-1 .59-1H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zm0-4H.59C0 5 0 4.59 0 4c0-.59 0-1 .59-1H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zM.59 11H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1H.59C0 13 0 12.59 0 12c0-.59 0-1 .59-1z"/></svg>
    </button>

    <div class="site-header-menu">
      <nav class="site-header-nav site-header-nav-main">
        <a href="/personal" class="js-selected-navigation-item nav-item nav-item-personal" data-ga-click="Header, click, Nav menu - item:personal" data-selected-links="/personal /personal">
          Personal
</a>        <a href="/open-source" class="js-selected-navigation-item nav-item nav-item-opensource" data-ga-click="Header, click, Nav menu - item:opensource" data-selected-links="/open-source /open-source">
          Open source
</a>        <a href="/business" class="js-selected-navigation-item nav-item nav-item-business" data-ga-click="Header, click, Nav menu - item:business" data-selected-links="/business /business/partners /business/features /business/customers /business">
          Business
</a>        <a href="/explore" class="js-selected-navigation-item nav-item nav-item-explore" data-ga-click="Header, click, Nav menu - item:explore" data-selected-links="/explore /trending /trending/developers /integrations /integrations/feature/code /integrations/feature/collaborate /integrations/feature/ship /showcases /explore">
          Explore
</a>      </nav>

      <div class="site-header-actions">
            <a class="btn btn-primary site-header-actions-btn" href="/join?source=header-repo" data-ga-click="(Logged out) Header, clicked Sign up, text:sign-up">Sign up</a>
          <a class="btn site-header-actions-btn mr-1" href="/login?return_to=%2Foc-courses%2Fjavascript-web-srv%2Fblob%2Fmaster%2Fdata%2Flangages.txt" data-ga-click="(Logged out) Header, clicked Sign in, text:sign-in">Sign in</a>
      </div>

        <nav class="site-header-nav site-header-nav-secondary mr-md-3">
          <a class="nav-item" href="/pricing">Pricing</a>
          <a class="nav-item" href="/blog">Blog</a>
          <a class="nav-item" href="https://help.github.com">Support</a>
          <a class="nav-item header-search-link" href="https://github.com/search">Search GitHub</a>
              <div class="header-search scoped-search site-scoped-search js-site-search" role="search">
  <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="/oc-courses/javascript-web-srv/search" class="js-site-search-form" data-scoped-search-url="/oc-courses/javascript-web-srv/search" data-unscoped-search-url="/search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
    <label class="form-control header-search-wrapper js-chromeless-input-container">
      <div class="header-search-scope">This repository</div>
      <input type="text"
        class="form-control header-search-input js-site-search-focus js-site-search-field is-clearable"
        data-hotkey="s"
        name="q"
        placeholder="Search"
        aria-label="Search this repository"
        data-unscoped-placeholder="Search GitHub"
        data-scoped-placeholder="Search"
        autocapitalize="off">
    </label>
</form></div>

        </nav>
    </div>
  </div>
</header>



    <div id="start-of-content" class="accessibility-aid"></div>

      <div id="js-flash-container">
</div>


    <div role="main">
        <div itemscope itemtype="http://schema.org/SoftwareSourceCode">
    <div id="js-repo-pjax-container" data-pjax-container>
      
<div class="pagehead repohead instapaper_ignore readability-menu experiment-repo-nav">
  <div class="container repohead-details-container">

    

<ul class="pagehead-actions">

  <li>
      <a href="/login?return_to=%2Foc-courses%2Fjavascript-web-srv"
    class="btn btn-sm btn-with-count tooltipped tooltipped-n"
    aria-label="You must be signed in to watch a repository" rel="nofollow">
    <svg aria-hidden="true" class="octicon octicon-eye" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
    Watch
  </a>
  <a class="social-count" href="/oc-courses/javascript-web-srv/watchers"
     aria-label="3 users are watching this repository">
    3
  </a>

  </li>

  <li>
      <a href="/login?return_to=%2Foc-courses%2Fjavascript-web-srv"
    class="btn btn-sm btn-with-count tooltipped tooltipped-n"
    aria-label="You must be signed in to star a repository" rel="nofollow">
    <svg aria-hidden="true" class="octicon octicon-star" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74z"/></svg>
    Star
  </a>

    <a class="social-count js-social-count" href="/oc-courses/javascript-web-srv/stargazers"
      aria-label="0 users starred this repository">
      0
    </a>

  </li>

  <li>
      <a href="/login?return_to=%2Foc-courses%2Fjavascript-web-srv"
        class="btn btn-sm btn-with-count tooltipped tooltipped-n"
        aria-label="You must be signed in to fork a repository" rel="nofollow">
        <svg aria-hidden="true" class="octicon octicon-repo-forked" height="16" version="1.1" viewBox="0 0 10 16" width="10"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"/></svg>
        Fork
      </a>

    <a href="/oc-courses/javascript-web-srv/network" class="social-count"
       aria-label="34 users forked this repository">
      34
    </a>
  </li>
</ul>

    <h1 class="public ">
  <svg aria-hidden="true" class="octicon octicon-repo" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"/></svg>
  <span class="author" itemprop="author"><a href="/oc-courses" class="url fn" rel="author">oc-courses</a></span><!--
--><span class="path-divider">/</span><!--
--><strong itemprop="name"><a href="/oc-courses/javascript-web-srv" data-pjax="#js-repo-pjax-container">javascript-web-srv</a></strong>

</h1>

  </div>
  <div class="container">
    
<nav class="reponav js-repo-nav js-sidenav-container-pjax"
     itemscope
     itemtype="http://schema.org/BreadcrumbList"
     role="navigation"
     data-pjax="#js-repo-pjax-container">

  <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
    <a href="/oc-courses/javascript-web-srv" class="js-selected-navigation-item selected reponav-item" data-hotkey="g c" data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches /oc-courses/javascript-web-srv" itemprop="url">
      <svg aria-hidden="true" class="octicon octicon-code" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"/></svg>
      <span itemprop="name">Code</span>
      <meta itemprop="position" content="1">
</a>  </span>

    <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
      <a href="/oc-courses/javascript-web-srv/issues" class="js-selected-navigation-item reponav-item" data-hotkey="g i" data-selected-links="repo_issues repo_labels repo_milestones /oc-courses/javascript-web-srv/issues" itemprop="url">
        <svg aria-hidden="true" class="octicon octicon-issue-opened" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"/></svg>
        <span itemprop="name">Issues</span>
        <span class="counter">0</span>
        <meta itemprop="position" content="2">
</a>    </span>

  <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
    <a href="/oc-courses/javascript-web-srv/pulls" class="js-selected-navigation-item reponav-item" data-hotkey="g p" data-selected-links="repo_pulls /oc-courses/javascript-web-srv/pulls" itemprop="url">
      <svg aria-hidden="true" class="octicon octicon-git-pull-request" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 10 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v6.56A1.993 1.993 0 0 0 2 15a1.993 1.993 0 0 0 1-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"/></svg>
      <span itemprop="name">Pull requests</span>
      <span class="counter">0</span>
      <meta itemprop="position" content="3">
</a>  </span>

  <a href="/oc-courses/javascript-web-srv/projects" class="js-selected-navigation-item reponav-item" data-selected-links="repo_projects new_repo_project repo_project /oc-courses/javascript-web-srv/projects">
    <svg aria-hidden="true" class="octicon octicon-project" height="16" version="1.1" viewBox="0 0 15 16" width="15"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1z"/></svg>
    Projects
    <span class="counter">0</span>
</a>


  <a href="/oc-courses/javascript-web-srv/pulse" class="js-selected-navigation-item reponav-item" data-selected-links="pulse /oc-courses/javascript-web-srv/pulse">
    <svg aria-hidden="true" class="octicon octicon-pulse" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M11.5 8L8.8 5.4 6.6 8.5 5.5 1.6 2.38 8H0v2h3.6l.9-1.8.9 5.4L9 8.5l1.6 1.5H14V8z"/></svg>
    Pulse
</a>
  <a href="/oc-courses/javascript-web-srv/graphs" class="js-selected-navigation-item reponav-item" data-selected-links="repo_graphs repo_contributors /oc-courses/javascript-web-srv/graphs">
    <svg aria-hidden="true" class="octicon octicon-graph" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M16 14v1H0V0h1v14h15zM5 13H3V8h2v5zm4 0H7V3h2v10zm4 0h-2V6h2v7z"/></svg>
    Graphs
</a>

</nav>

  </div>
</div>

<div class="container new-discussion-timeline experiment-repo-nav">
  <div class="repository-content">

    

<a href="/oc-courses/javascript-web-srv/blob/6e4b5e53ee040ca46a294af51a7ada3060fe2306/data/langages.txt" class="d-none js-permalink-shortcut" data-hotkey="y">Permalink</a>

<!-- blob contrib key: blob_contributors:v21:4ead49f180a5a812c0f49e7be7bf42fd -->

<div class="file-navigation js-zeroclipboard-container">
  
<div class="select-menu branch-select-menu js-menu-container js-select-menu float-left">
  <button class="btn btn-sm select-menu-button js-menu-target css-truncate" data-hotkey="w"
    
    type="button" aria-label="Switch branches or tags" tabindex="0" aria-haspopup="true">
    <i>Branch:</i>
    <span class="js-select-button css-truncate-target">master</span>
  </button>

  <div class="select-menu-modal-holder js-menu-content js-navigation-container" data-pjax aria-hidden="true">

    <div class="select-menu-modal">
      <div class="select-menu-header">
        <svg aria-label="Close" class="octicon octicon-x js-menu-close" height="16" role="img" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>
        <span class="select-menu-title">Switch branches/tags</span>
      </div>

      <div class="select-menu-filters">
        <div class="select-menu-text-filter">
          <input type="text" aria-label="Filter branches/tags" id="context-commitish-filter-field" class="form-control js-filterable-field js-navigation-enable" placeholder="Filter branches/tags">
        </div>
        <div class="select-menu-tabs">
          <ul>
            <li class="select-menu-tab">
              <a href="#" data-tab-filter="branches" data-filter-placeholder="Filter branches/tags" class="js-select-menu-tab" role="tab">Branches</a>
            </li>
            <li class="select-menu-tab">
              <a href="#" data-tab-filter="tags" data-filter-placeholder="Find a tag…" class="js-select-menu-tab" role="tab">Tags</a>
            </li>
          </ul>
        </div>
      </div>

      <div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket" data-tab-filter="branches" role="menu">

        <div data-filterable-for="context-commitish-filter-field" data-filterable-type="substring">


            <a class="select-menu-item js-navigation-item js-navigation-open selected"
               href="/oc-courses/javascript-web-srv/blob/master/data/langages.txt"
               data-name="master"
               data-skip-pjax="true"
               rel="nofollow">
              <svg aria-hidden="true" class="octicon octicon-check select-menu-item-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5z"/></svg>
              <span class="select-menu-item-text css-truncate-target js-select-menu-filter-text">
                master
              </span>
            </a>
        </div>

          <div class="select-menu-no-results">Nothing to show</div>
      </div>

      <div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket" data-tab-filter="tags">
        <div data-filterable-for="context-commitish-filter-field" data-filterable-type="substring">


        </div>

        <div class="select-menu-no-results">Nothing to show</div>
      </div>

    </div>
  </div>
</div>

  <div class="BtnGroup float-right">
    <a href="/oc-courses/javascript-web-srv/find/master"
          class="js-pjax-capture-input btn btn-sm BtnGroup-item"
          data-pjax
          data-hotkey="t">
      Find file
    </a>
    <button aria-label="Copy file path to clipboard" class="js-zeroclipboard btn btn-sm BtnGroup-item tooltipped tooltipped-s" data-copied-hint="Copied!" type="button">Copy path</button>
  </div>
  <div class="breadcrumb js-zeroclipboard-target">
    <span class="repo-root js-repo-root"><span class="js-path-segment"><a href="/oc-courses/javascript-web-srv"><span>javascript-web-srv</span></a></span></span><span class="separator">/</span><span class="js-path-segment"><a href="/oc-courses/javascript-web-srv/tree/master/data"><span>data</span></a></span><span class="separator">/</span><strong class="final-path">langages.txt</strong>
  </div>
</div>


  <div class="commit-tease">
      <span class="float-right">
        <a class="commit-tease-sha" href="/oc-courses/javascript-web-srv/commit/21902689fe18d184b05bc33989ce1698ed6f113e" data-pjax>
          2190268
        </a>
        <relative-time datetime="2016-04-28T21:45:04Z">Apr 28, 2016</relative-time>
      </span>
      <div>
        <img alt="@bpesquet" class="avatar" height="20" src="https://avatars1.githubusercontent.com/u/1837749?v=3&amp;s=40" width="20" />
        <a href="/bpesquet" class="user-mention" rel="contributor">bpesquet</a>
          <a href="/oc-courses/javascript-web-srv/commit/21902689fe18d184b05bc33989ce1698ed6f113e" class="message" data-pjax="true" title="Add articles">Add articles</a>
      </div>

    <div class="commit-tease-contributors">
      <button type="button" class="btn-link muted-link contributors-toggle" data-facebox="#blob_contributors_box">
        <strong>1</strong>
         contributor
      </button>
      
    </div>

    <div id="blob_contributors_box" style="display:none">
      <h2 class="facebox-header" data-facebox-id="facebox-header">Users who have contributed to this file</h2>
      <ul class="facebox-user-list" data-facebox-id="facebox-description">
          <li class="facebox-user-list-item">
            <img alt="@bpesquet" height="24" src="https://avatars3.githubusercontent.com/u/1837749?v=3&amp;s=48" width="24" />
            <a href="/bpesquet">bpesquet</a>
          </li>
      </ul>
    </div>
  </div>


<div class="file">
  <div class="file-header">
  <div class="file-actions">

    <div class="BtnGroup">
      <a href="/oc-courses/javascript-web-srv/raw/master/data/langages.txt" class="btn btn-sm BtnGroup-item" id="raw-url">Raw</a>
        <a href="/oc-courses/javascript-web-srv/blame/master/data/langages.txt" class="btn btn-sm js-update-url-with-hash BtnGroup-item" data-hotkey="b">Blame</a>
      <a href="/oc-courses/javascript-web-srv/commits/master/data/langages.txt" class="btn btn-sm BtnGroup-item" rel="nofollow">History</a>
    </div>


        <button type="button" class="btn-octicon disabled tooltipped tooltipped-nw"
          aria-label="You must be signed in to make or propose changes">
          <svg aria-hidden="true" class="octicon octicon-pencil" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/></svg>
        </button>
        <button type="button" class="btn-octicon btn-octicon-danger disabled tooltipped tooltipped-nw"
          aria-label="You must be signed in to make or propose changes">
          <svg aria-hidden="true" class="octicon octicon-trashcan" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/></svg>
        </button>
  </div>

  <div class="file-info">
      2 lines (1 sloc)
      <span class="file-info-divider"></span>
    16 Bytes
  </div>
</div>

  

  <div itemprop="text" class="blob-wrapper data type-text">
      <table class="highlight tab-size js-file-line-container" data-tab-size="8">
      <tr>
        <td id="L1" class="blob-num js-line-number" data-line-number="1"></td>
        <td id="LC1" class="blob-code blob-code-inner js-file-line">C++;Java;C#;PHP</td>
      </tr>
</table>

  </div>

</div>

<button type="button" data-facebox="#jump-to-line" data-facebox-class="linejump" data-hotkey="l" class="d-none">Jump to Line</button>
<div id="jump-to-line" style="display:none">
  <!-- '"` --><!-- </textarea></xmp> --></option></form><form accept-charset="UTF-8" action="" class="js-jump-to-line-form" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
    <input class="form-control linejump-input js-jump-to-line-field" type="text" placeholder="Jump to line&hellip;" aria-label="Jump to line" autofocus>
    <button type="submit" class="btn">Go</button>
</form></div>

  </div>
  <div class="modal-backdrop js-touch-events"></div>
</div>


    </div>
  </div>

    </div>

        <div class="container site-footer-container">
  <div class="site-footer" role="contentinfo">
    <ul class="site-footer-links float-right">
        <li><a href="https://github.com/contact" data-ga-click="Footer, go to contact, text:contact">Contact GitHub</a></li>
      <li><a href="https://developer.github.com" data-ga-click="Footer, go to api, text:api">API</a></li>
      <li><a href="https://training.github.com" data-ga-click="Footer, go to training, text:training">Training</a></li>
      <li><a href="https://shop.github.com" data-ga-click="Footer, go to shop, text:shop">Shop</a></li>
        <li><a href="https://github.com/blog" data-ga-click="Footer, go to blog, text:blog">Blog</a></li>
        <li><a href="https://github.com/about" data-ga-click="Footer, go to about, text:about">About</a></li>

    </ul>

    <a href="https://github.com" aria-label="Homepage" class="site-footer-mark" title="GitHub">
      <svg aria-hidden="true" class="octicon octicon-mark-github" height="24" version="1.1" viewBox="0 0 16 16" width="24"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
</a>
    <ul class="site-footer-links">
      <li>&copy; 2017 <span title="0.06358s from github-fe-9d6fe79.cp1-iad.github.net">GitHub</span>, Inc.</li>
        <li><a href="https://github.com/site/terms" data-ga-click="Footer, go to terms, text:terms">Terms</a></li>
        <li><a href="https://github.com/site/privacy" data-ga-click="Footer, go to privacy, text:privacy">Privacy</a></li>
        <li><a href="https://github.com/security" data-ga-click="Footer, go to security, text:security">Security</a></li>
        <li><a href="https://status.github.com/" data-ga-click="Footer, go to status, text:status">Status</a></li>
        <li><a href="https://help.github.com" data-ga-click="Footer, go to help, text:help">Help</a></li>
    </ul>
  </div>
</div>



    

    <div id="ajax-error-message" class="ajax-error-message flash flash-error">
      <svg aria-hidden="true" class="octicon octicon-alert" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"/></svg>
      <button type="button" class="flash-close js-flash-close js-ajax-error-dismiss" aria-label="Dismiss error">
        <svg aria-hidden="true" class="octicon octicon-x" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>
      </button>
      You can't perform that action at this time.
    </div>


      
      <script crossorigin="anonymous" integrity="sha256-0j4y5IIRK6Xj6pvY3H5VVoARanTgAnRqyR9BpOWHWps=" src="https://assets-cdn.github.com/assets/frameworks-d23e32e482112ba5e3ea9bd8dc7e555680116a74e002746ac91f41a4e5875a9b.js"></script>
      <script async="async" crossorigin="anonymous" integrity="sha256-i+mF4E/0W1ttMm/OJaZAzhI7HfOlu7kXGVKHzN1hX84=" src="https://assets-cdn.github.com/assets/github-8be985e04ff45b5b6d326fce25a640ce123b1df3a5bbb917195287ccdd615fce.js"></script>
      
      
      
      
    <div class="js-stale-session-flash stale-session-flash flash flash-warn flash-banner d-none">
      <svg aria-hidden="true" class="octicon octicon-alert" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"/></svg>
      <span class="signed-in-tab-flash">You signed in with another tab or window. <a href="">Reload</a> to refresh your session.</span>
      <span class="signed-out-tab-flash">You signed out in another tab or window. <a href="">Reload</a> to refresh your session.</span>
    </div>
    <div class="facebox" id="facebox" style="display:none;">
  <div class="facebox-popup">
    <div class="facebox-content" role="dialog" aria-labelledby="facebox-header" aria-describedby="facebox-description">
    </div>
    <button type="button" class="facebox-close js-facebox-close" aria-label="Close modal">
      <svg aria-hidden="true" class="octicon octicon-x" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>
    </button>
  </div>
</div>

  </body>
</html>

Est-ce la même chose pour vous aussi?

C'est la même chose, pour le contenu du fichier films.json

Merci

Cordialement,

Sheasan

-
Edité par Sheasan 28 janvier 2017 à 12:45:39

CelineChapalain

1 février 2017 à 10:39:20

Bonjour,

J'ai fini le petit exercice sur la liste de journaux, dans le chapitre 1, partie 3 : "Modifiez la structure HTML".

Mon code fonctionne, mais je n'ai pas utilisé la boucle for, contrairement au correctif et à pas mal de monde apparemment

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

// TODO : ajouter la liste des journaux sur la page, dans la div "contenu"
journaux.forEach(function(elt){
	var link = document.createElement("a");
	var back = document.createElement("br");
	link.href = elt;	
	link.appendChild(document.createTextNode(elt));
	document.getElementById("contenu").appendChild(link);
	document.getElementById("contenu").appendChild(back);
});

Ma question est toute bête : le for est apparemment plus adapté pour l'exercice, mais pourquoi ?

Je vous remercie !

KyssamaJeanMartin

3 février 2017 à 20:20:49

bonjour,

J'ai une question sur l'activité 1. J'ai écris quasiment tout le code, mais je n'arrive toujours pas à rendre le lien cliquable.

J'ai décidé de partir d'un titre (h4) vide, et ensuite de créer une balise "span" elle aussi vide. Ensuite j'ai créé deux éléments "a" :

- un élément "a" contenant le lien href

- un élément "a" contenant l'url du lien

j'ai ensuite ajouté ces deux éléments à la balise "span", et j'ai ensuite ajouté la balise "span" au titre "h4".

Mon approche me parait bonne, mais je ne comprends toujours pas pourquoi le lien ne devient pas cliquable.

Voici mon bout de code.

/* 
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

// 

// ensuite une boucle forEach
listeLiens.forEach(function (listeLien) {
	
	//Ok en premier, nous allons créer une ne variable qui va comprendre l'ensemble des éléments que nous allons créer 
	var generalElt = document.createElement("div");
	// en premier, nous allons créer une variable h4
	var titreElt = document.createElement("h4");
	titreElt.appendChild(document.createTextNode(listeLien.titre));
	titreElt.style.fontWeight = "bold";
	titreElt.style.color = "rgb(0,128, 255)";
	
	// Ensuite une balise span qui va englober le href et le conten textuel additionnel sur la mm ligne que le titre
	var lienElt = document.createElement("span");
	
	// puis ne balise a avec le href 
	var lienCliquableElt = document.createElement("a");
	lienCliquableElt.href = listeLien.url;
	
	//ensuite une balise a avec l'intitulé du lien
	var urlElt = document.createElement("a");
	urlElt.appendChild(document.createTextNode(" " + listeLien.url)); // ps : ne pas oublier de mettre un espace
	urlElt.style.color = "black";
	
	// Enfin nous allons créer une variable p qui va comrpendre la légende 
	var texteElt = document.createElement("p");
	texteElt.appendChild(document.createTextNode("Ajouté par" + listeLien.auteur));
	
	// nous allons ajouter les balises enfants aux parents...
	
	// Les deux balises a au span
	lienElt.appendChild(lienCliquableElt);
	lienElt.appendChild(urlElt);
	
	// la balise span au titre 
	titreElt.appendChild(lienElt);
	
	// Les balises titres et contenu textuel a la balise div
	
	generalElt.appendChild(titreElt);
	generalElt.appendChild(texteElt);
	
	document.getElementById("contenu").appendChild(generalElt);
}); // Ne pas oublier le point virgule...

// Ensuite, ajouter la balise parent au DOM

dites moi au moins si l'approche est logique.

Merci

Paillenapple

5 février 2017 à 8:18:41

Bonjour,

Petite question du dimanche matin : pour l'activité 2, est-il possible de toucher aux codes HTML et CSS, ou tout doit-il être codé en JS ?

J'imagine que la deuxième possibilité est réalisable, mais ça change un peu la donne quand même...

Merci d'avance pour la (les) réponse(s) !

Silvère MAZIERE

Philippe2463

5 février 2017 à 11:48:13

Bonjour Paillenapple,

Tout doit être codé en js.

Courage, tu vas y arriver !

La chute n'est pas un échec, l'échec c'est de rester là où on est tombé!

DaBrain

6 février 2017 à 15:13:38

Bonjour à toutes et tous.

Je commence l'activité 1 du cours "Créez des pages Web interactives avec Javascript". Au passage merci à Baptiste Pesquet et tous les créateurs de cours aussi enrichissant.

Je débute donc et pour le moment j'aimerais juste ajouter les titres issus du tableau fournit pour l'activité (j'y vais pas à pas pour bien comprendre).

Voici donc ce que je code directement mais rien ne s'affiche...Un petit coup de main serait le bien venu.

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
for (var i=0; i<listeLiens.length; i++) {
    var titreElt = document.createElement("div"); //Création titre dans une <div>
    titreElt.textcontent = listeLiens[i].titre; // Création du texte 
    document.getElementById("contenu").appendChild(titreElt);
}

Merci par avance pour vos aides, j'imagine que cela ne doit pas être bien compliqué mais parfois quand on a le nez dessus, on ne voit rien.

DaBrain

Edit 10mn plus tard

Bon....fatigue quand tu nous tiens...camelCase sur textContent au lieu de textcontent et zou c'est reparti.

Bon courage à toutes et tous.

DaBrain

-
Edité par DaBrain 6 février 2017 à 15:22:52

Rolan65

9 février 2017 à 12:00:16

Bonjour,

Voilà cela fait quelques jours que je bloque sur le tout début du cours : quand je copie-colle des morceaux de codes du cours ou pour les exercices dans Brackets, j'obtiens de très nombreux messages d'erreur, et mon code JavaScript ne semble pas s'exécuter dans Firefox au chargement de la page (rien n'apparaît dans la console des outils de développement).

Capture du code JS et des messages d'erreur:

Capture du résultat dans la console Firefox (rien):

Ces problèmes empêchant toute progression dans le cours, j'ai donc testé en ouvrant ma page dans Google Chrome et là.... miracle!!! Tout s'affiche dans ma console Chrome...... (comme l'illustre la capture ci-dessous)

Je suis donc plutôt soulagé parce que je vais enfin pouvoir avancer dans mes cours en utilisant plutôt Google Chrome...

Par contre je suis un peu perplexe quant aux raisons de ces problèmes, et pour être tout à fait honnête préférant largement utiliser Mozilla Firefox pour tout un tas de raisons, j'aimerai bien savoir s'il existe un moyen de pallier à ce problème dans Firefox? (je pense que ce ne serait pas non plus du luxe de l'indiquer dans les cours, ça peut éviter à des étudiants de perdre des heures à chercher pourquoi rien ne fonctionne... )

Voilà en espérant que ça puisse servir à d'autres, et pourquoi pas avoir une solution définitive...

Bonne journée!

Roland

CelineChapalain

9 février 2017 à 16:07:23

Bonjour,

Je viens de faire l'exercice sur l'animation du ballon. Il fonctionne a 90% sauf sur un point : je n'arrive pas à stopper le ballon sur le bord gauche de l'écran.

Je me suis triturée la cervelle dans tous les sens, je ne trouve pas la solution.... Par ailleurs, quand je vois le code proposé en correction, je me rends compte que j'ai procédé de façon totalement différente, pas forcément très optimale :/

Si vous avez une idée de ce qui cloche, ça m'aiderait

ps : je n'ai pas joué sur la vitesse, seulement sur le déplacement

// On récupère les éléments par leur id
var start = document.getElementById("demarrer");
var end = document.getElementById("arreter");
var ballon = document.getElementById("ballon");

//On récupère la largeur de l'élément conteneur 
var cadre = document.querySelector('body');
var cadreWidth = parseFloat(getComputedStyle(cadre).width);

//On set les variables de déplacement et d'animation
var deplace = 1;
var animationID = null;


function animBallon(){
	// On récupère la position du ballon
	var posY = parseFloat(getComputedStyle(ballon).left);
	// Si la position du ballon + sa largeur sont inférieures a la largeur du cadre, on décrémente
	if((posY + 110 > cadreWidth ) || (posY < 0) ){
		deplace = -1;
	}
	ballon.style.left = (posY + deplace) + "px";
	animationID=requestAnimationFrame(animBallon);
}

//On joue l'animation au clic sur 'démarrer'
start.addEventListener("click",function(e){	
	end.removeAttribute("disabled");
	start.setAttribute("disabled", "disabled");
	// On joue l'animation
	animationID=requestAnimationFrame(animBallon);
});

//On joue l'animation au clic sur 'Arrêter'
end.addEventListener("click",function(e){
	end.setAttribute("disabled", "disabled");
	start.removeAttribute("disabled");
	// On arrête l'animation
	cancelAnimationFrame(animationID);
});

n1col4s

9 février 2017 à 22:03:27

Rolan65 a écrit:

Par contre je suis un peu perplexe quant aux raisons de ces problèmes, et pour être tout à fait honnête préférant largement utiliser Mozilla Firefox pour tout un tas de raisons, j'aimerai bien savoir s'il existe un moyen de pallier à ce problème dans Firefox? (je pense que ce ne serait pas non plus du luxe de l'indiquer dans les cours, ça peut éviter à des étudiants de perdre des heures à chercher pourquoi rien ne fonctionne... )

Voilà en espérant que ça puisse servir à d'autres, et pourquoi pas avoir une solution définitive...

Bonne journée!

Roland

C'est normal que les messages d'erreur ne s'affichent pas, il te suffit juste de cliquer sur la case JS, celle avec un rond orange.

CelineChapalain a écrit:

Bonjour,

Je viens de faire l'exercice sur l'animation du ballon. Il fonctionne a 90% sauf sur un point : je n'arrive pas à stopper le ballon sur le bord gauche de l'écran.

Tu peux essayer ça :

if ((posY + 110 > cadreWidth))
{        
     deplace = -10;    
}

if(posY == 0)
{
     deplace = 10;
}

Quand le ballon est sur le bord gauche, la propriété left est égal à 0, donc j'ai juste rajouté une condition là dessus.

J'ai augmenté un peu la vitesse pour tester parce que le ballon se déplaçait comme une tortue, c'était un peu long pour faire des essais

-
Edité par n1col4s 9 février 2017 à 22:16:33

"In chess, it's called Zugzwang, when the only viable move is not to move."

Rolan65

10 février 2017 à 11:04:42

n1col4s a écrit:

Rolan65 a écrit:

Par contre je suis un peu perplexe quant aux raisons de ces problèmes, et pour être tout à fait honnête préférant largement utiliser Mozilla Firefox pour tout un tas de raisons, j'aimerai bien savoir s'il existe un moyen de pallier à ce problème dans Firefox? (je pense que ce ne serait pas non plus du luxe de l'indiquer dans les cours, ça peut éviter à des étudiants de perdre des heures à chercher pourquoi rien ne fonctionne... )

Voilà en espérant que ça puisse servir à d'autres, et pourquoi pas avoir une solution définitive...

Bonne journée!

Roland

C'est normal que les messages d'erreur ne s'affichent pas, il te suffit juste de cliquer sur la case JS, celle avec un rond orange.

En fait ça ne marche pas non plus en sélectionnant le bouton JS, je l'avais tenté aussi mais ne l'avais pas précisé dans mon message, autant pour moi.

<< 1 ... 17 18 19 ... 24 >>