Partage
  • Partager sur Facebook
  • Partager sur Twitter

Exercices interactifs pour le tutoriel de Javascript

Donnez votre avis

28 janvier 2016 à 19:19:18

Bon sang, mais c'est bien sûr, #Thunderseb !

Qui dit tableau dit items et j'aurais dû y penser tout de suite au premier item [0]...! Çà fait trois jours que je butte là-dessus et çà commençait à me prendre la tête. Merci beaucoup car je vais enfin pouvoir poursuivre avec les formulaires.

Bonsoir.

  • Partager sur Facebook
  • Partager sur Twitter
4 février 2016 à 13:40:18

Bonjour,

Sur le chapitre des events, la solution de l'exo demandant de changer un élément d'une liste numérique à l'aide d'un event click est, je trouve, relativement complexe alors qu'un principe clé a été pointé du doigt plusieurs fois dans le tuto, certains events peuvent se propager. Donc pourquoi ne pas profiter de ce principe pour ne créer qu'un event vu que "click" est propagé au sous elements.

var ol;
if(ol = document.getElementsByTagName('ol')[0]){
	ol.addEventListener('click', function(e){
		var target = e.target;
		if(target != e.currentTarget){ //if(target.tagName == "LI"){
			var text;
			 
			if(text = prompt("Modifier la valeur : ", target.innerHTML)){
				target.innerHTML = text;
			}
		}
	}, false);
}

Ainsi, avec un event créer (pas de boucle ou autre, c'est bon pour le processeur ;) ) on peut filtrer et exécuter. On peut modifier la condition pour que le résultat soit plus dur encore en utilisant tagName == "LI" (si jamais on a des balises dans les listes).

J'avais envie de proposer ma solution, je trouve qu'elle est pas mal foutu :p

-
Edité par AxelHuberty 4 février 2016 à 13:41:12

  • Partager sur Facebook
  • Partager sur Twitter
Un accès premium d'un mois avec le code AXEL-8RR3 C'est cadeau et c'est illimité !
21 février 2016 à 2:11:20

Salut,

Très bien ces petits exercices en ligne!

Petites interrogation et réflexion sur l'exercice Partie 2 / Chapitre 2 / Supprimer les balises <br /> ou plus précisément sur les retours des méthodes getElementsByTagName() et querySelectorAll().

D'abord ma solution à l'exercice avec une boucle for non inversée, qui a l'air de bien fonctionner (edit: du moins extérieurement) :

var brs = document.querySelectorAll('#output br');

for (var i = 0, l = brs.length; i < l; i++) {
	brs[i].parentNode.removeChild(brs[i]);	
}

Là pas de souci apparemment, avec querySelectorAll(), quand j'enlève une balise <br />, 'brs' n'est pas modifié donc le parcours continue normalement. J'en déduis que querySelectorAll() retourne un tableau de références à des éléments.

(edit1: mais ce n'est pas totalement clair, parce que les éléments n'apparaissent certes plus dans le HTML, mais restent accessibles dans le script même après le remove, alors que ce n'est pas le cas avec la solution getElementsByTagName()... tout ça devient de + en + confus o_O).

(edit2: Bon, après avoir lu ça et ça, je vois qu'il est aussi question de collection pour querySelectorAll() mais qu'en fait il y a une notion de collection directe ou non directe, bien qu'elle ne soit pas développée sur les pages en liens)

Par contre, dans les solutions proposées

var brs = output.getElementsByTagName('br');

avec l'utilisation de getElementsByTagName(), on voit qu'il faut faire le parcours en sens inverse sur un for, ou un while qui boucle sur le premier élément, parce que 'brs' se retrouve "modifié" à chaque suppression d'une balise <br />. J'en déduis que ici 'brs' ne peut pas être un tableau puisqu'il est modifié sans qu'on agisse directement dessus, et que getElementsByTagName() retourne quelque chose comme une référence à un tableau.

En relisant le chapitre précédent, je vois ça:

getElementsByTagName()

La méthode retourne une collection d'éléments (utilisable de la même manière qu'un tableau). Pour accéder à chaque élément, il est nécessaire de parcourir le tableau avec une petite boucle.

Hmm, donc une collection !

Et puis je lis Indexed collections et en fait je ne vois pas la différence entre tableau et collection. Est-ce dû à un abus de langage quelque part, qu'on aura tendance à utiliser le terme collection pour désigner une référence à un tableau ? ou bien je rate quelque chose ?

(edit2: je crois pouvoir répondre à ma propre question, au moins partiellement, à savoir qu'un tableau est une collection, mais qu'une collection n'est pas nécessairement un tableau, la structure "physique" est similaire, mais l'implémentation des méthodes est spécifique.)

-
Edité par DeiZ 21 février 2016 à 4:49:52

  • Partager sur Facebook
  • Partager sur Twitter
21 février 2016 à 11:51:06

Je viens de tester, et on dirait effectivement que le NodeList retourné par querySelectorAll n'est pas modifié automatiquement en fonction des modifications faites à l'arbre DOM, alors que c'est le cas avec getElementsByTagName. Je dois avouer que je ne m'étais pas trop posé la question, et ça me surprend un peu... En tout cas ça mérite que je clarifie les solutions proposées...

Il y a des infos ici, à propos du NodeList retourné : https://developer.mozilla.org/fr/docs/Web/API/NodeList . NodeList peut être une collection directe (getElementsByXXXXX) ou indirecte (querySelectorAll).

  • Partager sur Facebook
  • Partager sur Twitter
Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - Dynamisez vos sites avec JS - jQuery - Cheatsheet JS
21 février 2016 à 15:56:45

Oui j'avais mis ce lien dans mon edit2, de manière moins visible certes, je disais que ce n'est pas développé, au sens où ça mentionne cette notion directe (live) ou non directe (static) et décrit brièvement le comportement "externe", mais je cherchais à saisir un peu mieux la structure "interne". Enfin je crois que ça me viendra un peu mieux au fur et à mesure que j'avancerai sur les concepts de programmation objet.

  • Partager sur Facebook
  • Partager sur Twitter
24 février 2016 à 9:52:22

Hello :)

Quelqu'un m'a fait remonter un souci sur Twitter ici et ici.
Il dit que c'est un peu trop blanc. Il dit qu'on voit rien. Il dit qu'il a plus de genoux... Non pardon, ça c'est autre chose. :)

Merci beaucoup pour lui !

Anouck d'OC

  • Partager sur Facebook
  • Partager sur Twitter
Ancienne CM d'OpenClassrooms - Plus d'infos ici ! 
24 février 2016 à 12:45:34

Je vais voir ça.

Edit : c'est corrigé ;)

-
Edité par Thunderseb 24 février 2016 à 12:47:10

  • Partager sur Facebook
  • Partager sur Twitter
Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - Dynamisez vos sites avec JS - jQuery - Cheatsheet JS
24 février 2016 à 14:38:13

Merci à toi, Thunderseb, je lui dis :)

Bonne journée !

Anouck d'OC

  • Partager sur Facebook
  • Partager sur Twitter
Ancienne CM d'OpenClassrooms - Plus d'infos ici ! 
5 mars 2016 à 10:55:22

Bonjour,

Je viens de réaliser l'exercice "list-and-prompt.htm"

Je voudrais signaler une erreur de code dans certaines solutions proposées :

Solution 1 OK

Pour toutes les solutions suivantes résultat  KO : elles font appel à une variable "text" non définie... du coup ça ne fonctionne pas comme indiqué dans l'exemple sans apporter cette ajout dans le code.

Vous avez fait un travail remarquable, encore bravo.

Guillaume.

  • Partager sur Facebook
  • Partager sur Twitter
15 mars 2016 à 12:29:36

OpenClassrooms

Commentez directement dans le sujet dédié aux exerciSes

Voilà ce que j'ai découvert en voulant aller sur le forum dédié, faute d'inattention probablement :p

Bon courage !

  • Partager sur Facebook
  • Partager sur Twitter
15 mars 2016 à 19:50:34

C'est corrigé, merci. Plutôt une faute anglais vs français ^^
  • Partager sur Facebook
  • Partager sur Twitter
Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - Dynamisez vos sites avec JS - jQuery - Cheatsheet JS
16 mars 2016 à 10:56:06

Effectivement j'y avais pas pensé :o :D
  • Partager sur Facebook
  • Partager sur Twitter
30 mars 2016 à 10:46:43

Hello,

Tout d'abord je salue cette belle initiative des exercices après chaque chapitre, c'est méga pratique, je dirais même sublissime!!! thumps up ;).

Néanmoins j'ai des 2 préoccupations sur la Partie 1, Chapitre7, Exercices JavaScript interactifs "Ecrire une boucle for pour parcourir un tableau".

1- sur le bloc de la prémière solution, il manque un ";" au lieu de ","

erreur_virgule_au_lieu_de_point_virgule

2- Mon code est correct mais le message écrit en bas dit qu'il manque une parenthèse fermante de la boucle for. C'est une erreur? J'ai un 'a' au lieu de 'c' comme vous , est-ce la raison pour laquelle mon code n'est pas correct? alors qu'on a la même syntaxe. Je suggère d'utiliser une regex pour gérer cette partie.

parenthèse_fermante_absente_alors_quelle_est_bien_presente

Voilà pour le moment, et merci pour ce super tutoriel. :)

-
Edité par xfactoria 30 mars 2016 à 10:48:38

  • Partager sur Facebook
  • Partager sur Twitter
30 mars 2016 à 11:48:49

Fausse erreur ;) . Tout est bon, y compris la virgule. Elle permet de déclarer plusieurs variables AVANT le premier point-virgule (ce qui explique l'erreur de syntaxe retournée par l'interpréteur dans ton code).
  • Partager sur Facebook
  • Partager sur Twitter
Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - Dynamisez vos sites avec JS - jQuery - Cheatsheet JS
30 mars 2016 à 14:49:15

Hello,

Ah oui tu as tout à fait raison. C'est vrai que les variables "a" et "c" viennent d'être déclarées. On doit mettre la virgule entre les variables et donc un point virgule à la fin de la déclaration des variables :euh:. Merci pour ce rappel, je pense que c'est barré collé dans mon cerveau :honte:.

  • Partager sur Facebook
  • Partager sur Twitter
18 avril 2016 à 20:05:17

Bonjour, Bonsoir

J'ai écris ce code pour l'exercice 3. du chapite Manipuler le code HTML (partie 2/2) :

// Création des éléments
    var ol = document.getElementById('zozor-books') ;
    var li6 = document.createElement('li') ;
    var li7 = document.getElementsByTagName('li')[5] ;
    var li8 = document.createElement('li') ;
    var text6 = document.createTextNode('Zozor à Pôle emploi') ;
    var text8 = document.createTextNode('Zozor fait fortune') ; 
// Ajouts
    // Niveau 2
        li6.appendChild(text6) ;
	li8.appendChild(text8) ;
    // Niveau 1
	ol.insertBefore(li6, li7) ;
	ol.appendChild(li8) ;



Ce code fonctionne en local mais pas avec la page interactive, es-ce-que j'ai écrit quelque chose incorrectement ?

 L'erreur que j'ai est : "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node."

Pourtant la variable li7 est bien un enfant de la variable ol ?

Merci

-
Edité par NicolasMarafetti 18 avril 2016 à 20:13:46

  • Partager sur Facebook
  • Partager sur Twitter
19 avril 2016 à 0:11:57

Salut,

C'est parce que ton getElementsByTagName("li") ne trouve pas que les li dans la zone d'output, il trouve aussi les autres de la page. Tu dois donc cibler les li qui se trouvent dans #output ;) .

  • Partager sur Facebook
  • Partager sur Twitter
Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - Dynamisez vos sites avec JS - jQuery - Cheatsheet JS
19 avril 2016 à 23:05:26

Salut Thunder, merci pour ton aide !
  • Partager sur Facebook
  • Partager sur Twitter
3 mai 2016 à 8:56:20

function askNumber() {
    var result=" ";
    while (isNaN(result)){
        result=parseInt(prompt('entrez un nombre'));
    }
    return result;
}
alert('Le nombre est : ' + askNumber());

Dans ce cas il rentre pas dans le while....?  Pourquoi ?

Alors que là ça marche bien

function askNumber() {
    var result;
    while (isNaN(result)){
        result=parseInt(prompt('entrez un nombre'));
    }
    return result;
}
alert('Le nombre est : ' + askNumber());

......  Pourquoi ?  j'ai pas bien compris... Y a quelque chose que j'ai dû sauter ?

  • Partager sur Facebook
  • Partager sur Twitter
3 mai 2016 à 9:03:13

Peut-être que parseInt(result) s'impose avant le while ? isNaN ne teste que la présence de NaN dans la variable en fait... J'suis un peu pommé... je crois. Merci de m'éclairer, SVP.
  • Partager sur Facebook
  • Partager sur Twitter
6 juin 2016 à 22:25:48

Hello,

C'était juste pour signaler une faute dans la réponse de la dernière question au QCM : http://odyssey.sdlm.be/javascript/17/partie1/chapitre6/qcm.htm

"La portée d'une variable déclarée avec var est locale à la fonctionne, et non au bloc if/else."
=> fonction, et pas fonctionne :)

  • Partager sur Facebook
  • Partager sur Twitter
7 juin 2016 à 13:23:54

Bonjour !

Je vais répondre à TonyCasaucau :

Dans le premier cas, tu définis :

var result = " "; 

Lorsque tu vas passer cette variable dans isNaN(), la fonction va tenter de convertir ta variable en nombre avant de faire des tests dessus, et une chaine avec des blancs sera convertie comme égale à 0 (et 0 ne vaut pas NaN).

Si tu veux plus d'explications : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/isNaN.

-
Edité par Zephyr88 7 juin 2016 à 13:24:43

  • Partager sur Facebook
  • Partager sur Twitter
11 juin 2016 à 14:54:51

Bonjour,

dans le http://odyssey.sdlm.be/javascript/40/partie2/chapitre2/stripbr.htm , où il faut supprimer les balises <br /> , il est précisé dans la correction:

"La solution n'est ici pas très évidente. La solution que je préfère est de faire une boucle for inversée (où l'on décrémente au lieu d'incrémenter). L'utilisation d'une boucle for incrémentée n'est pas possible, car en supprimant le premier élément <br />, le tableau d'éléments retourné par getElementsByTagName() est modifié, ce qui fait que l'itération suivante provoquera une erreur, car l'élément pointé par brs[i] n'existera plus. La solution consiste donc à parcourir le tableau à l'envers, et supprimer les éléments du dernier au premier :"

Alors effectivement, cela ne fonctionne pas avec une boucle for incrémentée (le premier et le dernier br sont supprimés mais pas le second), mais je ne comprend pas pourquoi le tableau d’éléments retourné serait "modifié". On a récupéré une fois les éléments dans un tableau et on n'y touche pas.

Serait-ce parce-que la référence (l'adresse) pointée par notre index courant du tableau (brs[i]) n'existe plus dans le DOM ?

c'est à dire avant le for on a :

br0 @0x1

br1 @0x2

br2 @0x3

après avoir supprimé le br0 dans le dom (post premier tour de boucle)

br1 @0x1

br2 @0x2

-
Edité par erebos007 11 juin 2016 à 15:04:35

  • Partager sur Facebook
  • Partager sur Twitter
12 juin 2016 à 21:36:23

Parce qu'avec getElementsByTagName, c'est une liste qui est retournée et non un "vrai" tableau. C'est une liste (NodeList live) qui change au fil des actions, MDN l'explique d'ailleurs aussi : https://developer.mozilla.org/fr/docs/Web/API/Element/getElementsByTagName . Ce n'est pas contre pas le cas de querySelectorAll() qui retourne une NodeList indirecte
  • Partager sur Facebook
  • Partager sur Twitter
Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - Dynamisez vos sites avec JS - jQuery - Cheatsheet JS
13 juin 2016 à 15:25:42

Thunderseb a écrit:

Parce qu'avec getElementsByTagName, c'est une liste qui est retournée et non un "vrai" tableau. C'est une liste (NodeList live) qui change au fil des actions, MDN l'explique d'ailleurs aussi : https://developer.mozilla.org/fr/docs/Web/API/Element/getElementsByTagName . Ce n'est pas contre pas le cas de querySelectorAll() qui retourne une NodeList indirecte


Ah ok je comprends mieux :)

j'avoue, je n'avais pas connaissance de ces listes "live", j'aimerai bien savoir comment le mécanisme fonctionne en interne.

  • Partager sur Facebook
  • Partager sur Twitter
1 juillet 2016 à 17:04:06

J'ai un petit souci concernant l'amélioration du TP : un système d'auto-complétion.

J'essaie de modifier le code pour faire en sorte que le premier résultat trouvé s'affiche dans le champ de recherche, mais cela ne fonctionne pas super bien, notamment lorsque j'efface des caractères avec la touche backspace et du coup je doute de ma technique pour realiser la chose.

Voici ce que j'ai modifié:

ajout de cette variable au niveau des declarations de la IIFE:

	var previouslength = 0; // variable contenant le nb de caracteres tapé dans le champs recherche par l'utilisateur

puis,

	function displayResults(response) { // Affiche les résultats d'une requête
	
    	results.style.display = response.length ? 'block' : 'none'; // On cache le conteneur si on n'a pas de résultats
	
	    if (response.length) { // On ne modifie les résultats que si on en a obtenu
	
	        response = response.split('|');
	        var responseLen = response.length;
	
	        results.innerHTML = ''; // On vide les résultats
	
	        for (var i = 0, div ; i < responseLen ; i++) {
	
            	div = results.appendChild(document.createElement('div'));
            	div.innerHTML = response[i];
	
            	div.addEventListener('click', function(e) {
                	chooseResult(e.target);
	            });
	
	        }
           //------Debut Ajout-----------------
	    searchElement.value = response[0];
	    searchElement.focus();
	    searchElement.setSelectionRange(previouslength, searchElement.value.length, 'forward');
          //------Fin Ajout-----------------
	    }
	
	}

 et dans le keyup listener:

    searchElement.addEventListener('keyup', function(e) {

    //---------- Debut modification  
    	if (e.keyCode == 8) { // Si la touche pressée est "backspace"
    		if (previouslength > 1) {previouslength --;}
	    }
    //---------- Fin modification
    	else if (searchElement.value != previousValue) { // Si le contenu du champ de recherche a changé
	
			//---- Debut Modification
			var sElength = searchElement.value.length;
			var pValuelength = previousValue.length;

			if (sElength > pValuelength) { 
				previouslength++;
			}
			else if (sElength < pValuelength) {
				previouslength--;
			}
			//---- fin modification

	        previousValue = searchElement.value;
	
	        if (previousRequest && previousRequest.readyState < XMLHttpRequest.DONE) {
	            previousRequest.abort(); // Si on a toujours une requête en cours, on l'arrête
        	}
			//---- Debut Modification
			console.log("keyup - previouslength: "+previouslength);
	        previousRequest = getResults(previousValue.substring(0,previouslength)); // On stocke la nouvelle requête
			//---- fin modification

	        selectedResult = -1; // On remet la sélection à "zéro" à chaque caractère écrit
	
    	}



-
Edité par erebos007 1 juillet 2016 à 17:17:08

  • Partager sur Facebook
  • Partager sur Twitter
21 juillet 2016 à 21:56:25

Hello, je me trompe peut-être mais il me semble qu'il y a une erreur dans un des codes de la page suivante :

https://openclassrooms.com/courses/dynamisez-vos-sites-web-avec-javascript/tp-convertir-un-nombre-en-toutes-lettres-1

D’après le site indiqué plus haut le chiffre 421 s'écrit quatre cent vingt et un, le code retourne quatre-cent-vingt-et-un.

je pense qu'il faudrait enlever les ternaires pour les tirets à la fin de l'algorithme !.

Désolé par avance si je fait erreur.

------------------

  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
8 août 2016 à 13:17:50

Bonjour,

J'écris pour signaler un bug dans l'exo suivant : http://odyssey.sdlm.be/javascript/36/partie2/chapitre2/questionnaire.htm

Quand on veut mettre une majuscule en appuyant sur la combinaison 'flèche en haut' + lettre, quand on relâche la touche 'flèche en haut' le système avance d'une case. (Il y a donc une case blanche).

Merci pour vos tutoriels et exercices.

Cordialement,

Sarye

  • Partager sur Facebook
  • Partager sur Twitter
29 septembre 2016 à 15:11:54

Bonjour

Je voudrais soumettre une suggestion, dans les exercices pratiques comme celui là:
http://odyssey.sdlm.be/javascript/16/prompt.htm

Pourquoi pas mettre une option "Tester le code"? Ça nous permettra de visualiser nos erreurs.

Cordialement

  • Partager sur Facebook
  • Partager sur Twitter
9 octobre 2016 à 12:33:10

Sur la page
On peut lire (lorsque la réponse est bonne) :
La portée d'une variable déclarée avec var est locale à la fonctionne, et non au bloc if/else
("fonctionne" au lieu de "fonction")
  • Partager sur Facebook
  • Partager sur Twitter

Exercices interactifs pour le tutoriel de Javascript

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown