Hello !

Je viens signaler un petit bug concernant ce QCM. Impossible de passer à la 2ème question et aucune correction n'est faite après choix de la réponse. Bref il ne se passe rien Je suis sur Chrome si jamais ça aide !

-
Edité par Zephyr88 8 décembre 2015 à 21:23:16

Il y a effectivement un souci . Je réglerai ça sous peu.

C'est corrigé

On nous dit de remplir le champs laisser blanc, mais celui ci est déjà remplie avec la bonne réponse et on n'a plus qu'à faire enter... Sinon c'est très bien fait !!

Salut,

Peux-tu me dire de quel exercice il s'agit ? Merci

Bonjour,

En fait ça vient du navigateur (IE) car j'ai essayer sur Mozilla et ça marche parfaitement.

Je crois que c'est une ancienne version en plus.

Sinon le problème est sur "Questions ouvertes" dans le chapitre 4, "Les conditions".

Bonne journée

Oui, les exercices ne fonctionnent pas avec les vieilles versions d'IE

Voici ma contribution à l'exercice 1 du Mini-TP : recréer une structure DOM

var PtrOutput=document.getElementById("output");
var PtrTP1=document.createElement("div");
PtrTP1.id="divTP1";
var PtrStrong1=document.createElement("strong");
var PtrStrong2=document.createElement("strong");
var PtrA1=document.createElement("a");
var PtrA2=document.createElement("a");
var PtrTxt1=document.createTextNode("Le ");
var PtrTxt2=document.createTextNode("World Wide Web Consortium");
var PtrTxt3=document.createTextNode(", abrégé par le sigle ");
var PtrTxt4=document.createTextNode("W3C");
var PtrTxt5=document.createTextNode(", est un ");
var PtrTxt6=document.createTextNode("organisme de standardisation");
var PtrTxt7=document.createTextNode("  à but non-lucratif chargé de promouvoir la compatibilité des technologies du ");
var PtrTxt8=document.createTextNode("World Wide Web");

PtrTP1.appendChild(PtrTxt1);
PtrStrong1.appendChild(PtrTxt2);
PtrTP1.appendChild(PtrStrong1);
PtrTP1.appendChild(PtrTxt3);
PtrStrong2.appendChild(PtrTxt4);
PtrTP1.appendChild(PtrStrong2);
PtrTP1.appendChild(PtrTxt5);
PtrA1.href="http://fr.wikipedia.org/wiki/Organisme_de_normalisation";
PtrA1.title="Organisme de normalisation";
PtrA1.appendChild(PtrTxt6);
PtrTP1.appendChild(PtrA1);
PtrTP1.appendChild(PtrTxt7);
PtrA2.href="http://fr.wikipedia.org/wiki/World_Wide_Web";
PtrA2.title="World Wide Web";
PtrA2.appendChild(PtrTxt8);
PtrTP1.appendChild(PtrA2);
PtrOutput.appendChild(PtrTP1);

dynamisez-vos-sites-web-avec-javascript/manipuler-le-code-html-partie-2-2

TP2

function doList(listType,listId,arr){
var ptrList=document.createElement(listType);
var ptrChild,ptrTxt;
	ptrList.id=listId;
	for(var i=0;i<arr.length;i++){
		ptrChild=document.createElement("li");
		ptrTxt=document.createTextNode(arr[i]);
		ptrChild.appendChild(ptrTxt);
		ptrList.appendChild(ptrChild);
	}
return ptrList;
}

var arr = ["JavaScript","JScript","ActionScript","EX4"];
var PtrOutput=document.getElementById("output");
var PtrTP2=document.createElement("div");
PtrTP2.id="divTP2";
var ptrA=document.createElement("a");
var ptrTxt=document.createTextNode("Langages basés sur ECMAScript :");
ptrA.appendChild(ptrTxt);
PtrTP2.appendChild(ptrA);
var ptrUL = doList("UL","ulId",arr);
PtrTP2.appendChild(ptrUL);
PtrOutput.appendChild(PtrTP2);

dynamisez-vos-sites-web-avec-javascript/manipuler-le-code-html-partie-2-2

TP3

function storeChild(dt,dd){
  this.key=dt;
  this.text=dd;
}

function doDataList(dataListId,arrDt,arrDl){
this.data=[];
this.id=dataListId;
var x;
for(var i=0;i<arrDt.length;i++){
    x = new storeChild(arrDt[i],arrDl[i]);
	this.data.push(x);
}
this.domIt=function(){
  var ptrDataList=document.createElement("dl");
  var ptrChild,ptrTxt;
  ptrDataList.id=dataListId;
	for(var i=0;i<this.data.length;i++){
	  ptrChild=document.createElement("dt");
	  ptrTxt=document.createTextNode(this.data[i].key);
	  ptrChild.appendChild(ptrTxt);
	  ptrDataList.appendChild(ptrChild);
	  ptrChild=document.createElement("dd");
	  ptrTxt=document.createTextNode(this.data[i].text);
	  ptrChild.appendChild(ptrTxt);
	  ptrDataList.appendChild(ptrChild);
	}
  return ptrDataList;
  }
}



var arrDt = ["JavaScript","JScript","ActionScript","EX4"];
var arrDd = [
"JavaScript est un langage de programmation de scripts principalement utilisé dans les pages web interactives mais aussi coté serveur.",
"JScript est le nom générique de plusieurs implémentations d'ECMAScript 3 créées par Microsoft.",
"ActionScript est le langage de programmation utilisé au sein d'applications clientes (Adobe Flash, Adobe Flex) et serveur (Flash media server, JRun, Macromedia Generator).",
"ECMAScript for XML (E4X) est une extension XML au langage ECMAScript."
];
var PtrOutput=document.getElementById("output");
var PtrTP3=document.createElement("div");
PtrTP3.id="divTP3";
var ptrA=document.createElement("a");
var ptrTxt=document.createTextNode("Langages basés sur ECMAScript :");
ptrA.appendChild(ptrTxt);
PtrTP3.appendChild(ptrA);
var obj = new doDataList("dataListId",arrDt,arrDd);
ptrDataList=obj.domIt();
PtrTP3.appendChild(ptrDataList);
PtrOutput.appendChild(PtrTP3);

dynamisez-vos-sites-web-avec-javascript/manipuler-le-code-html-partie-2-2

TP4

Mon nommage n'est pas très lisible...

var ptrOutput=document.getElementById("output");
var ptrTP4=document.createElement("div");
ptrTP4.id="divTP4";
var ptrForm=document.createElement("form");
ptrForm.enctype="multipart/form-data";
ptrForm.method="post";
ptrForm.action="upload.php";
var ptr1=document.createElement("fieldset");
var ptr2=document.createElement("legend");
var ptr3=document.createElement("div");
var ptr4=document.createElement("label");
var ptr4b=document.createElement("input");
var ptrBr=document.createElement("br");
var ptr4c=document.createElement("input");
var ptrText=document.createTextNode("Uploader une image");
ptr2.appendChild(ptrText);
ptrText=document.createTextNode("Image à uploader :");
ptr4.appendChild(ptrText);
ptr4.htmlfor="inputUpload";
ptr3.style.textAlign="center";
ptr4b.type="file";
ptr4b.name="inputUpload";
ptr4b.id="inputUpload";
ptr4c.type="submit";
ptr4c.value="Envoyer";

ptr3.appendChild(ptr4); //label
ptr3.appendChild(ptr4b); //input file
ptr3.appendChild(ptrBr);
ptr3.appendChild(ptrBr.cloneNode());
ptr3.appendChild(ptr4c); //submit
ptr1.appendChild(ptr2); // legend
ptr1.appendChild(ptr3); // div center
ptrForm.appendChild(ptr1); //fieldset
ptrTP4.appendChild(ptrForm); // on attache le noeud form au div
ptrOutput.appendChild(ptrTP4);

La il s'agit de retirer les <br /> du texte

dynamisez-vos-sites-web-avec-javascript/manipuler-le-code-html-partie-2-2

dans l'exercice interactif mais fonctionne dans mon navigateur (chrome)

POURQUOI ?

<!DOCTYPE html>



<html lang="en">

<head>

</head>

<body>



<div id="output">

<p>Bonjour à tous, je suis Zozor !<br>Je suis la mascotte officielle du Site du Zéro.<br>Je suis un âne, mais je suis capable de parler et d’apprendre.<br>Comme ça un jour, je gouvernerai le monde !</p>

</div>

  

<script>



var p = document.getElementsByTagName("p");

var arr = document.getElementsByTagName("br");

var len = arr.length;

for(var i = len - 1;i >=0;i--){

	p[0].removeChild(arr[i]);

}



</script>



</body>

</html>

-
Edité par Philippe MEYER 27 décembre 2015 à 0:50:46

Bonjour,

Petite erreur de frappe sans doute, dans le cours de Javascript dans la partie 1, chapitre 3, déclarer et initialiser une variable.    

      

Dans le questionnaire didactique de la partie 1, chapitre 3. On demande de mettre le code adéquat pour:

soustrait 5 à un nombre et la réponse est myNumber -=5

Mais d'après moi la réponse exacte est myNumber - 5 puisque l'on demande juste de soustraire, on ne parle pas de résultat.

Soustraire dans le vide n'a pas beaucoup d'intérêt Mais c'est vrai que ça porte à confusion.

LaurentGravez a écrit:

Bonjour,

Petite erreur de frappe sans doute, dans le cours de Javascript dans la partie 1, chapitre 3, déclarer et initialiser une variable.    

      

Je ne vois pas la faute, tu es sûr que c'est dans le chapitre sur les variables ?

Bonjour,
J'ai constaté un Bug.
En effet, lorsque l'on tape la réponse correcte, l'exercice nous dit que ce n'est pas la réponse attendue (même si c'est à la virgule près, la même chose que la correction).
Si on fait un copier/coller de la correction, il nous dit que c'est OK.

Peux-tu m'indiquer l'exercice problématique ? (le lien si possible)

Bonjour,

J'ai une question par rapport au TP pour faire un formulaire interactif. Je ne comprend pas comment fonctionne le tout dernier évènement 'reset'.

En effet pourquoi lorsqu'on fait inputs[i].className = ' ', ça vide les champs des inputs ? Je pensais que le propriété className servait à renommer la propriété class d'une balise html ...

En plus nos inputs n'ont pas de propriété class....

Merci pour vos réponses

Bonjour,

Tout d'abord, bravo aux auteurs pour ces petits exercices interactifs qui permettent de mettre en pratique le cours de façon intelligente et pratique, afin de "fixer les connaissances", comme on dit en jargon pédagogique (c'est un ancien prof, et ancien élève d'IUFM qui vous le dit).

Il y a quelque chose qui m'échappe concernant la fonction cloneNode().

En effet, dans l'exercice intitulé "Retirer un gestionnaire par clonage", je ne comprends pas pourquoi le code suivant :

var o,btn;

if(o=document.getElementById('output')){
	if(btn=o.getElementsByTagName('button')){
		var btn2 = btn.cloneNode(false);
		btn.parentNode.removeChild(btn);
		btn.parentNode.appendChild(btn2);
	}
}

Me renvoie l'erreur suivante : btn.cloneNode is not a function.

Merci de votre aide.

-
Edité par Markos 12 janvier 2016 à 10:24:12

Personne ?...

Bon. J'ai trouvé un début de réponse : la première erreur était grossière, et je m'en excuse : si JavaScript affiche ce message d'erreur, c'est parce que la fonction cloneNode() ne peut être appliquée à un tableau. En effet, btn est un tableau qui comprend toutes les balises <button> du document. Il fallait écrire :

//...   
if(btn=o.getElementsByTagName('button')[0]){
//...

En outre, il fallait mettre l'argument de cloneNode() à true, sinon, le libellé du bouton disparaît.

Mais une erreur persiste alors, signalée de la façon suivante : btn.parentNode is null

Pour que le code fonctionne, il faut mettre le parent du noeud <button> dans une variable, comme ceci :

var o,btn;
 
if(o=document.getElementById('output')){
    if(btn=o.getElementsByTagName('button')[0]){
        var btn2 = btn.cloneNode(true),
			dad=btn.parentNode;
		
        dad.removeChild(btn);
        dad.appendChild(btn2);
    }
}

Mais pourquoi diable faut-il mettre le noeud parent dans une variable ? Merci d'avance pour vos explications.

A bientôt !

Bon, je crois que je tiens l'explication. J'ai mis le temps, mais je crois que j'ai trouvé, car le code suivant fonctionne : 

var o,btn;
 
if(o=document.getElementById('output')){
    if(btn=o.getElementsByTagName('button')[0]){
        var btn2 = btn.cloneNode(true);
		
		btn.parentNode.appendChild(btn2);
		btn2.parentNode.removeChild(btn);
    }
}

En fait, contrairement à ce que j'ai cru comprendre, l'utilisation de removeChild() élimine complètement le noeud, de sorte qu'il est impossible de réutiliser btn.parentNode après avoir éliminé le noeud btn.

Quant au noeud btn2, son attribut parentNode est null tant qu'il n'a pas été rattaché à un élément parent avec la fonction appendChild()

CQFD

En espérant que ces questions pourront aider certains d'entre vous,

A bientôt...

C'est en forgeant qu'on devient forgeron

Cela dit, je pourrais inclure ces petits rappels dans la correction de l'exercice

-
Edité par Thunderseb 12 janvier 2016 à 17:11:35

Bonjour,

Dans l'exercice Partie II - Chapitre 3 - Utilisation du DOM-0 avec onclick, si on met dans la tabbox ce code :

var output, button;

if (output = document.getElementById("output")) {
   if (button = output.getElementsByTagName("button")) {
	button.onclick = function() { 
	     this.innerHTML = "Vous m'avez cliqué"; 
	};
   }
}

rien ne fonctionne; et si je joue dans mon navigateur (Firefox 44.0) le fichier html suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Partie II - Chapitre 3 - Utilisation du DOM-0 avec onclick</title>
  </head>
  
  <body>
    <div id="output">
      <form>
	<p class="center">
	  <button type="button">Cliquez-moi</button>  
	</p>
     </form>
    </div>
  </body>
  
  <script>
     var output, button;

     if (output = document.getElementById("output")) {
       if (button = output.getElementsByTagName("button")) {
	  button.onclick = function() { 
	     this.innerHTML = "Vous m'avez cliqué"; 
	  };
	}
      }
  </script>
	
</html>

je n'obtiens rien, non plus...

Je ne vois vraiment pas ce qui cloche, alors que le même code en DOM-2, avec addEventListener, fonctionne parfaitement...??

Merci de vos réponses

bonjour

déjà ton script se trouve après la fin de body, donc ça ne peux pas marcher

ensuite moi j'aurais comme ceci pour le DOM mais le DOM2 c'est mieux avec un button[i].addEventListener.....

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>Partie II - Chapitre 3 - Utilisation du DOM-0 avec onclick</title>

  </head>

     <body>

    <div id="output">

    <p id="center">

      <button type="button">Cliquez-moi</button> 

    </p>

    </div>

  <script>

    var center= document.getElementById("center");

    var button=center.getElementsByTagName('button');

    var buttonLen=button.length;

   for (var i=0;i<buttonLen;i++){

      button[i].onclick= function(){

        this.innerHTML="vous m'avez cliqué";

      }

    }  

  </script>

</body>

</html>

désolé je viens de tester avec un script après body, ça marche aussi, mais pour le reste c'est bon

Merci #SandrineSuire,

Je confirme qu'un script fonctionne en dehors du <body> et que ton code fait bien le taf.

Le mien, toujours pas...

en fait dans ton code tu écrit

var button...;

if(button=document.getElement....)

mais button c'est une variable que tu viens de créer et tu ne l'attribue nulle part à button du document, donc rien ne se passe 

idem pour output

tu dois en fait définir output comme ceci

    var output=document.getElementById('output');

var button=output.getElementsByTagName('button');

de plus si tu ne fais pas une boucle for, il ne sait pas à quel bouton attribuer ta fonction, 

si tu ne passe pas par une boucle for, alors tu dois mettre un id dans ton input button et t'en servir pour lui attribuer ta fonction

ex:

<body>

    <div id="output">

      <form>

    <p class="center">

      <button type="button" id="button1">Cliquez-moi</button> 

    </p>

     </form>

    </div>

  </body>

  <script>

     var output= document.getElementById("output"), button1= document.getElementById("button1");

      button1.onclick = function() {

         this.innerHTML = "Vous m'avez cliqué";

      };

 </script>

Là, #SandrineSuire, j'avoue que tu m'as complètement perdu...!

Je déclare d'abord mes variables; en quoi le fait de les définir ensuite dans les conditions est-il une faute ?

Dans la première condition, je définis la variable output en récupérant l'id de l'élément du même nom. Dans la deuxième, j’appelle les éléments de type button contenus dans output; comme je n'en ai qu'un, pourquoi devrais-je boucler puisque la seule variable button peut accueillir le résultat de getElementsByTagName ? Et pourquoi devrais-je lui attribuer un id, alors que s'il y avait plusieurs boutons, ce ne serait pas nécessaire ?

Les solutions que tu me proposes fonctionnent très bien mais j'ai l'impression qu'elles contournent mon problème sans pointer mes erreurs...

Merci, tout de même de ta disponibilité.

@Guettoudou : Il n'y a rien qui cloche vraiment dans ton script. Tu fais juste une "erreur" dans :

if (button = output.getElementsByTagName("button")) {

getElementsByTagName retourne un  objet NodeList (semblable à un tableau). Donc ta variable button est un "tableau", et non un élément ! Tu dois donc cibler l'item que tu veux en spécifiant son index :

if (button = output.getElementsByTagName("button")[0]) {

-
Edité par Thunderseb 28 janvier 2016 à 13:16:20