Partage

Exercices interactifs pour le tutoriel de Javascript

Donnez votre avis

11 octobre 2016 à 16:54:43

Salut Thunderseb,

tout d'abord merci pour tes tutos/exos bien ficelés !

Je te signale juste une petite coquille insignifiante sur un exercice de JavaScript : tu as oublié un guillemet à " Au sein du <div id="output"> se trouve un <span id="mascot> ".

J'édite ce message pour poser une question : lorsque tu corriges les exercices de cette partie, tu ajoutes régulièrement (voire tout le temps) des conditions "if" pour tester l'existence des éléments. Cela dit, cette méthode n'est pas expliquée dans ton cours. Est-ce vraiment important ? Que risque-t-on si on ne le fait pas ?

Voilivoilou, merci beaucoup !

-
Edité par VuvuZahia 12 octobre 2016 à 16:02:54

12 octobre 2016 à 11:04:56

Bonjour,

Je suis actuellement le cours et j'en suis arriver a l'exercice intitulé "modifier une liste avec prompt"dans la partie 2 au chapitre 3

J'ai réfléchi de manière complètement différente des solutions proposer, j'ai utiliser a mon avantage les héritages.

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

var liste = output.getElementsByTagName("ol")[0];

liste.addEventListener("click", function(e) { 

if(e.target != liste){

e.target.innerHTML= prompt("modifier le texte", e.target.innerHTML);}

})

Ma méthode est telle déconseillée ou est ce une variante aux solutions proposer?

12 octobre 2016 à 16:04:22

Non, c'est correct ; il y a toujours énormément de raisonnements différents ;)
Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - Dynamisez vos sites avec JS - jQuery - Cheatsheet JS
15 octobre 2016 à 12:46:22

Salut, merci pour ces tutos ! J'ai l'impression de progresser c'est cool ! 

Une petite question, quand je prends un exercice, comme celui-là :

MODIFIER UN ELEMENT

Lorsque j'ai réussi à le faire avec la console, je souhaiterais m'entraîner directement sur une page html existante.

- sur la page html téléchargée depuis le net par mon navigateur chrome:

Pour l'instant j'ouvre tout simplement la partie développeur avec f12 sur Chrome et tape le code en ciblant un élément similaire (dans cet exercice, c'était un href). 

Par exemple, sur une page, je prends :

var x = document.getElementsByClassName('col-md-10 col-md-offset-1 intro-section');

x.p = "le texte que je remplace";

là, je vois le texte qui s'affiche dans ma section développeur:

"le texte que je remplace"

mais pas de changement sur la page.

Idem quand j'ai injecté ce script depuis un html stocké sur mon pc.

J'ai sûrement loupé un bout de leçon, mais je pense que ça pourrait être cool de trouver un moyen de permettre aux débutants de tenter ces exercices sur de vraies pages (une idée comme ça)

Bon we!

15 octobre 2016 à 20:59:25

Chrome et Firefox possèdent tous deux une console JS dans leurs outils (F12), mais le code n'est pas exécuté dans la page, ça reste dans la console. C'est pratique pour faire des tests de JS en vitesse.

Tu dois éditer toi-même les fichiers téléchargés, c'est la solution la plus facile.

Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - Dynamisez vos sites avec JS - jQuery - Cheatsheet JS
15 octobre 2016 à 21:34:37

Hello,

merci pour cette réponse rapide Seb !

Oui, comme tu l'avais dit dans un cours antérieur, ça permet de débugger plus facilement le code :)

Ok, donc si le code fonctionne bien, en injectant le script en fin de page html, je devrais constater ces changements.

J'ai essayé de le faire en injectant ce code vers la fin de page html, mais je n'ai pas eu de changement. Je pense que je n'ai pas assez précisé l'élément pour le modifier. Du coup, le code est correct syntaxiquement, mais ne fait pas son travail :)

jb

28 octobre 2016 à 13:52:03

Débutant dans l'apprentissage de ce cours, je code déjà en javascript mais j'essaye d'apprendre les bonnes manières à travers ce cours. Donc j'ai décidé de reprendre le cours à Zéro.

Juste une nouvelle solution pour un dans la partie 1, chapitre 6 : Déclarer une fonction qui demande un nombre à l'utilisateur ^^

function askNumber() {
	var proceder;
	do{
	   proceder = parseInt(prompt("Veuillez entrer un nombre: "));
	}while(isNaN(proceder));
	return proceder;
}

alert('Le nombre est : ' + askNumber());


Merci pour ce super tuto!

12 décembre 2016 à 10:37:36

Bonjour,

Une petite faute dans le QCM dédié aux fonctions JS : il manque un "n" à "fonctionement" !

-
Edité par Nanolight 12 décembre 2016 à 10:38:00

21 décembre 2016 à 10:06:05

bonjour,

merci pour les exos !!!

la solution ne fonctionne pas dans http://odyssey.sdlm.be/javascript/46/partie2/chapitre3/ondom.htm

dans

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

il manque [0]

on doit avoir

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

1 janvier 2017 à 13:36:31

Bonjour,

Il y a un truc que je ne comprends pas au chapitre "les conditions" à la question suivante :

"false" == false

Où le résultat de la condition selon l'exercice est true.

J'ai beau essayer, j'ai toujours false de mon côté.

Alors j'ai bien compris la différence entre == et ===. Le premier compare uniquement les valeurs alors que le deuxième compare aussi le type. Dans le cas où on compare un nombre et une chaîne de caractères (comme dans un exemple du cours avec 4 et "4"), cela me retourne bien true avec == et false avec ===. Mais à la question ouverte inscrite ci-dessus, que ce soit avec true ou false, == ou ===, j'ai toujours false en résultat sur JS Bin. 

Pourrais-je avoir une explication s'il vous plaît ?

-
Edité par Sstat 1 janvier 2017 à 13:42:23

8 janvier 2017 à 14:35:45

Effectivement, la réponse correcte est "false" et non "true". Je vais modifier ça.(ou alots je voulais mettre ===, je ne me souviens plus ^^ ).

Mais ça montre bien le problème que peut engendrer ==. Ici, JS tente de convertir "false" en une valeur booléenne. or, fait new Boolean("false") déclare un booléen valant... true ( https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean#Cr%C3%A9ation_d%27objets_Boolean_avec_une_valeur_initiale_%C3%A0_vrai ).

Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - Dynamisez vos sites avec JS - jQuery - Cheatsheet JS
9 janvier 2017 à 14:16:19

Thunderseb a écrit:

Effectivement, la réponse correcte est "false" et non "true". Je vais modifier ça.(ou alots je voulais mettre ===, je ne me souviens plus ^^ ).

Mais ça montre bien le problème que peut engendrer ==. Ici, JS tente de convertir "false" en une valeur booléenne. or, fait new Boolean("false") déclare un booléen valant... true ( https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean#Cr%C3%A9ation_d%27objets_Boolean_avec_une_valeur_initiale_%C3%A0_vrai ).

Bonjour et merci pour votre réponse !

Je suis désolé mais il y a quelque chose que je n'ai pas du saisir :-°

Je dois avouer que je bute un peu sur cette question.

Une chaîne de caractères non vide comme "false" devrait retourner true ? 

Extrait du cours concernant la conversion des types:

Qu'est-ce qu'un contenu vrai ou faux ? Eh bien, il suffit simplement de lister les contenus faux pour le savoir : un nombre qui vaut zéro ou bien une chaîne de caractères vide. C'est tout, ces deux cas sont les seuls à être évalués comme étant à false

Si on reprend la question "false" == false devrait retourner true == false ? 

Par ailleurs, et comme indiqué dans mon premier message, j'ai beau essayer dans JSBin:

  • "false" == false
  • "false" === false
  • "false" == true
  • "false" === true

Au final, j'ai toujours false comme résultat.

-
Edité par Sstat 9 janvier 2017 à 14:17:49

10 janvier 2017 à 15:51:59

Bonjour,

Je viens de faire le tuto et je ne sais pas ma remarque a déjà été faite

J'ai testé la condition : "false"==false

if('false' == false)

dans votre tuto la réponse validé est true or mon test affiche false

if('false' == false)

// alert('Vrai');

 else

alert('Faux');//reponse affichée

Sauf si je me suis trompée dans mon code , il fallait répondre false et non true.

Autre question :

(song || album)&& singer
Si song et singer sont définis et que album vaut <var style="box-sizing: border-box; outline: 0px; color: #026873; font-family: Consolas, 'Lucida Console', 'Courier New', monospace; font-size: 14.4px; white-space: normal;">""</var>, que retourne cette condition ? 

dans votre tuto la réponse validé est true or mon test affiche false

var song, singer; //variable définies

var album = '"'; // variable initialisée

if((song || album) && singer)

alert('Vrai');

else

alert('Faux');//reponse affichée

Aurais-je fait une erreur quelque part ?

-
Edité par VéroniqueBay 10 janvier 2017 à 15:53:51

20 janvier 2017 à 3:12:42

Salut, merci pour les exercices ils sont géniaux.

Petit détail concernant l'exercice suivant : Partie 1 > Chapitre 7 > Écrire une boucle for pour parcourir un tableau (http://odyssey.sdlm.be/javascript/24/for.htm)

La correction est la suivante :

var array =[0,1,1,2,3,5,8,13,21,34];for(var i=0, c=array.length; i<c; i++){ alert(array[i]);}

Et personnellement j'avais écris la même chose, mais sans les espaces entres les opérateurs :

for(var i = 0, c = array.length; i < c; i++){ alert(array[i]);}

Et ma réponse n'était pas considéré comme correcte.

Ce n'est pas grand chose, je sais que j'ai bon quand même, mais voilà je tenais à le préciser.

-
Edité par DoudouPike 20 janvier 2017 à 3:13:02

11 mars 2017 à 16:48:28

Bonjour, 

Je suis désolé, je n'ai pas réellement de commentaires constructifs à émettre.

Je passais simplement pour remercier la personne ayant eu cette initiative, c'est super bien fait et vraiment utile :)

J'aurais au passage une petite question concernant l'exercice présent à cette page (http://odyssey.sdlm.be/javascript/16/partie1/chapitre5/prompt.htm).

La méthode que j'ai utilisée était relativement différente de celle proposée en correction, j'aimerais donc savoir si ce que j'ai fait était déconseillé.

var number=2;
var question=prompt('Entrez la valeur de 2 :');
while(question!=2){
var question=prompt('Entrez la valeur de 2 :');
}

Après test, cela fonctionne bien comme demander dans l'exercice.
 

-
Edité par UzorkNo 11 mars 2017 à 21:17:59

13 mars 2017 à 21:35:33

Bonour,

ayant décidé depuis ce soir de recommencer le cours de JS j'ai été perdu dans les exercices interactifs proposés à la fin des chapitres précisement sur le chapitre des variables on demande je cite "soustrait un nombre à 5" j'ai choisi la réponse myNumber - 5 techniquement cette instruction soustrait 5 à mynumber.

Donc je souhaiterais qu'on apporte un petit peu de précision aux questions

L'important ce n'est pas d'être grand mais c'est être à la hauteur
26 mars 2017 à 15:12:01

Bonjour, petit beug sur la page http://odyssey.sdlm.be/javascript/36/partie2/chapitre2/questionnaire.htm, en effet lorqu'on appuie sur la touche majuscule le curseur passe au champ suivant, la majuscule est comptée comme un caractère.
27 mars 2017 à 17:15:30

Désolée pour ma franchise si elle peut être un peu blessante au premier abord, mais je me dois de partager mon ressenti en tant que débutante dans le code.

Personnellement je trouve ce cours pas assez pédagogique et moins ludique car trop compliqué et pas assez guidé, à l'inverse du cours de Javascript de Baptiste Pesquet.

Heureusement que je l'avais fais en premier car je n'aurai pas pu suivre celui-ci. 

Merci tout de même pour ce cours complet,

-
Edité par EnRgie 27 mars 2017 à 17:15:43

2 avril 2017 à 16:26:34

EnRgie a écrit:

Désolée pour ma franchise si elle peut être un peu blessante au premier abord, mais je me dois de partager mon ressenti en tant que débutante dans le code.

Personnellement je trouve ce cours pas assez pédagogique et moins ludique car trop compliqué et pas assez guidé, à l'inverse du cours de Javascript de Baptiste Pesquet.

Heureusement que je l'avais fais en premier car je n'aurai pas pu suivre celui-ci. 

Merci tout de même pour ce cours complet,

-
Edité par EnRgie 27 mars 2017 à 17:15:43

C'est malheureusement le prix pour avoir un cours complet et exact. Il est clair qu'il n'est pas adapté aux grands débutants, la connaissance d'un autre langage de programmation est un plus non négligeable.

Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - Dynamisez vos sites avec JS - jQuery - Cheatsheet JS
26 avril 2017 à 17:20:04

Bonjour !

J'ai une question par rapport à l'exercice "Modifier une liste avec prompt" de la partie 2, chapitre 3.

Est-ce qu'une solution basée sur l'héritage est envisageable?

Exemple de code:

var ol = document.querySelector('#output ol');

if (ol){
	ol.addEventListener('click', function(e){
		e.target.innerHTML = prompt('Modifier le texte:');
	});
}

Qu'est-ce qui pourrait nous empêcher de faire ceci?

++

Edit: Oh je viens de voir que quelqu'un a proposé la même solution et la réponse a été donnée plus haut. Désolé pour le post inutile...

-
Edité par rocklee.gt 26 avril 2017 à 20:07:35

27 avril 2017 à 12:18:22

EnRgie ce cours est l'un des cours le plus bien fichu de la communauté des dev français(je veux parlé de tous les tutos parlant de JS) même s'il reste quelques trucs mais comme il est destiné au débutant je peux comprendre
L'important ce n'est pas d'être grand mais c'est être à la hauteur
16 mai 2017 à 15:55:45

Super bien fait, merci! ;-)
30 mai 2017 à 14:47:12

Merci beaucoup pour ces exercices !

Cependant il m'arrive souvent de faire des codes fonctionnels (d'après JSFiddle en tout cas) qui ne sont pas considérés comme réussis, je me permet donc de proposer le dernier en date :

Partie 1 - Chapitre 7 - Ecrire une boucle for pour parcourir un tableau

var array = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34];

for (var i = 0, c = array.length; i<c; i++)
{
	var number = array[i];
	alert(number);
}


(je me permettrais d'éditer ce message si d'aventure je tombais encore sur ce genre de "soucis")

-
Edité par Hettana 30 mai 2017 à 14:47:34

24 juin 2017 à 9:01:57

Bonjour, j'ai trouvé une autre solution pour l'exercice sur les conditions ternaires en js :

    var result, number = 42;

    (number > 10) ? result = 'Plus grand que 10' : result = 'Plus petit que 10';

J'ai testé le code, il marche bien.

27 juillet 2017 à 12:48:15

Bonjour,

J'ai un souci avec l'exercice de fin de chapitre sur les évènements "Utilisation du DOM-0 avec onclick".

Aucune des solutions proposées dans le corrigé ne fonctionne chez moi. Quelqu'un aurait il une solution qui fonctionne ? Merci d'avance ! 

29 juillet 2017 à 13:05:14

Désolé, je viens de voir que Saadi Boussad a donné la solution il y a 6 mois, il manque [0] à :

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


-
Edité par Vincent FLORES 29 juillet 2017 à 14:18:36

7 août 2017 à 20:02:33

Bonjour,

Je bloque dans une des questions ouvertes de la Partie 2, Chapitre 4:

"Complétez le code suivant. Le but est, qu'au cours de la frappe, le contenu du champ soit retranscrit dans l'élément <output>"

<inputtype="text"id="stuffInput"/>
<outputid="stuffOutput"></output>
var stuff = document.querySelector("#stuffInput");
var output = document.querySelector("#stuffOutput");

if (stuff && output) {
    stuff.addEventListener("    ", function() {
        output.innerHTML = stuff.value.trim();
    });
}

Si j'ai bien compris comment utiliser addEventListener, il faut que je lui donne en premier argument celui qui va le déclencher?

Mais là je ne trouve pas, lequel est-ce?

Bonne soirée,

Jérome.

Jérôme.
9 août 2017 à 17:04:15

Le but est que l'événement se déclenche au cours de la frappe ... Donc, c'est une commande qui se déclencherais quand tu appuie sur une touche ou que tu la relâches. Je te laisse la chercher, c'est dans le chapitre événement  ;)
9 août 2017 à 21:53:17

Merci!

J'avais essayé 'onkeyup' et 'onkeydown' mais après ton message j'ai finalement pensé au 'keyup' !

Jérôme.
13 août 2017 à 16:23:57

Bonjour,

j'ai un problème avec l'exemple donné dans la partie 4 "Echanges de données avec l'Ajax", chapitre 4 "Dynamic Script Loading".

Dans cet exemple, on appelle une page en php :

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Partie IV - Chapitre 4 - Exemple 2</title>
</head>

<body>
    <script>
        function sendDSL() {
            var scriptElement = document.createElement('script');
            scriptElement.src = 'dsl_script.php?nick=' + prompt('Quel est votre pseudo ?');
            document.body.appendChild(scriptElement);
        }

        function receiveMessage(message) {
            alert(message);
        }   

    </script>
    <p><button type="button" onclick="sendDSL()">Exécuter le script</button></p>

  
</body>

</html>

Puis, on introduit  la variable $_GET['nick'] au sein du script JavaScript :

<?php header("Content-type: text/javascript"); ?>
var string = 'Bonjour <?php echo $_GET['nick'] ?> !';
receiveMessage(string);

Je n'obtiens jamais de message affichant le pseudo entré par l'utilisateur, quelqu'un pourrait-il me dire pourquoi ?  

J'ai essayé d'insérer ce dernier morceau de code au sein d'un fichier JavaScript, mais je n'ai pas eu plus de résultat...

-
Edité par Vincent FLORES 14 août 2017 à 19:19:40

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