Partage

Exercices interactifs pour le tutoriel de Javascript

Donnez votre avis

14 août 2017 à 20:28:07

Bon, j'ai fini par trouver, après avoir ouvert wamp, il fallait mettre les 2 fichiers (dsl_script.html et dsl_script.php) dans le fichier C/wamp/www, et ouvrir le fichier dsl_script.html dans le localhost.

Je pense qu'un simple rappel de cette procédure php ne serait pas superflu dans ce cours de Javascript.

-
Edité par Vincent FLORES 14 août 2017 à 20:37:22

15 août 2017 à 0:41:39

Vincent FLORES a écrit:

Bon, j'ai fini par trouver, après avoir ouvert wamp, il fallait mettre les 2 fichiers (dsl_script.html et dsl_script.php) dans le fichier C/wamp/www, et ouvrir le fichier dsl_script.html dans le localhost.

Je pense qu'un simple rappel de cette procédure php ne serait pas superflu dans ce cours de Javascript.

Bonjour,

En fait, il s'agissait d'un exemple qui repose sur deux connaissances supplémentaires qui ne peuvent faire partie du cours:

  • php: qui est un "langage" assez complexe
  • et l'utilisation d'un "serveur local"

Sans oublier aussi, la notion de chemin absolu et chemin relatif et le html...

Quant à Wamp (Xamp pour Windows) son utilisation n'est pas aussi "simple" que vous tentez de l'expliquer.

D'une part, parce que ce logiciel permet utilise divers "scripts" (PHP, SQL, Apache...) et permet d'"émuler", en local, un site comme s'il était en ligne.
D'autre part, parce ce logiciel permet pas mal de choses en modifiant certains fichiers d'initialisation, pour exemple l'"émulation" de plusieurs sites à partir de leur url écrite directement dans la barre de navigation du navigateur.
Par extension, pour ce dernier exemple, on comprendra que tout n'est pas à mettre dans le dossier www et tout ne doit pas (forcément) se lancer via localhost. Dès que cela devient complexe, il est important d'organiser les choses.

Mais ceci est une autre histoire, le but de l'exercice étant de faire comprendre le fonctionnement de javascript.

Bernard

-
Edité par nanart 15 août 2017 à 0:43:07

15 août 2017 à 15:11:15

Bonjour Bernard,

Je n'ai jamais dit que le langage php était simple.

C'est vrai que l'auteur nous prévient, avant d'entamer le chapitre "XMLhttprequest", qu'il nous faudra lire les 2 premières parties du cours de php de Mathieu Nebra (1 semaine de travail au bas mot pour les néophytes).

C'est une très bonne chose de faire interagir le Javascript et le php, mais je pense qu'un simple rappel sur l'utilisation du php et du fonctionnement d'un serveur local, ne serait pas de trop. D'autant plus que les exemples qui suivent le nécessite vraiment, alors autant essayer de faciliter les choses, cela reste malgré tout un cours de Javascript, et un très bon cours avec de nombreux exemples qui plus est.

-
Edité par Vincent FLORES 15 août 2017 à 16:00:46

15 septembre 2017 à 15:04:06

Merci beaucoup pour le tutoriel et les questions à la fin. 

-
Edité par Icandothat 15 septembre 2017 à 15:09:44

NKS
3 octobre 2017 à 14:56:04

Bonjour !

Sur certains exercices comme celui-ci :http://odyssey.sdlm.be/javascript/20/partie1/chapitre6/fonction-max.htm

La fenêtre indique dans tous les cas "Pas d'erreurs d'exécution ou de syntaxe"

Impossible de savoir si notre code est bon avant de regarder la solution! Sinon c'est génial !


19 octobre 2017 à 15:49:38

Salut !

Voilà, j'ai une question ?

Je suis actuellement en train d'effectuer l'exercice "Ecrire une boucle while qui execute un prompt" partie 1, chapitre 5.

J'ai fait :

var num;

prompt("Choisi un nombre entre 1 et 10");

while (num != 5){

prompt("Non ce nest pas cela ! essaye encore ?");

alert("Félicitation");

}

Ça fonctionne (en tt cas sur firefox) mais lorsque je regarde la solution, je me rends compte que "alert" se trouve en dehors de la boucle. Donc, je la sors, mais là mon code ne fonctionne plus !!! Pourquoi ?

Y aurait-il une bonne âme pour éclairer ma lanterne ?

Merci infiniment, d'avance ! 

30 novembre 2017 à 17:44:26

NancyHuot a écrit:

Salut !

Voilà, j'ai une question ?

Je suis actuellement en train d'effectuer l'exercice "Ecrire une boucle while qui execute un prompt" partie 1, chapitre 5.

J'ai fait :

var num;

prompt("Choisi un nombre entre 1 et 10");

while (num != 5){

prompt("Non ce nest pas cela ! essaye encore ?");

alert("Félicitation");

}

Ça fonctionne (en tt cas sur firefox) mais lorsque je regarde la solution, je me rends compte que "alert" se trouve en dehors de la boucle. Donc, je la sors, mais là mon code ne fonctionne plus !!! Pourquoi ?

Y aurait-il une bonne âme pour éclairer ma lanterne ?

Merci infiniment, d'avance ! 


Bonjour nancy, alors là c'est juste un problème d'algo. Si j'interprete ton code en francais cela veut dire:
-soit un nombre quelconque;
-afficher le promt une 1èrer fois
-tant que ce nombre n'est pas egal à 5
->afficher le prompt
->afficher "felicitation"

Maintenant je vais te poser les questions: quand est ce que dans ton code recupères-tu le nombre entrer par l'utilisateur? quand est ce que sortira t'on de cette boucle comme ce nombre ne sera jamais égal à 5 (d'après ton code)?

-
Edité par 2boubacar10 30 novembre 2017 à 17:45:26

20 décembre 2017 à 7:05:11

Bonjour,

j ai un probleme avec l exercice suivant:

<!DOCTYPE html>
<html>
<head>
    <title>boeing!</title>
</head>
 
<body>
 <input type="radio" name="radiogroup" value="747"  /> Boeing 747
<input type="radio" name="radiogroup" value="737" /> Boeing 737
<input type="radio" name="radiogroup" value="757" /> Boeing 757
    <script>
        var radios = document.getElementsByName('radiogroup'),
            target = null;
 
        for (var i = 0, c= radios.lenght;i<c; i++) {
            if (radios[i].checked){
               target=radios[i];
                
               
            }
        }
        alert(target);
    </script>
     
</body>
</html>


a aucun moment je ne vois ce qu il faut ajouter apres  target=radios[i];

je vous remercie, car je suis bloqué, et je deteste sauter un truc que j n ai pas reussi a faire

http://odyssey.sdlm.be/javascript/62/partie2/chapitre4/questions.htm

27 décembre 2017 à 21:40:50

oumardiagne a écrit:

Bonjour,

j ai un probleme avec l exercice suivant:

<!DOCTYPE html>
<html>
<head>
    <title>boeing!</title>
</head>
 
<body>
 <input type="radio" name="radiogroup" value="747"  /> Boeing 747
<input type="radio" name="radiogroup" value="737" /> Boeing 737
<input type="radio" name="radiogroup" value="757" /> Boeing 757
    <script>
        var radios = document.getElementsByName('radiogroup'),
            target = null;
 
        for (var i = 0, c= radios.lenght;i<c; i++) {
            if (radios[i].checked){
               target=radios[i];
                
               
            }
        }
        alert(target);
    </script>
     
</body>
</html>


a aucun moment je ne vois ce qu il faut ajouter apres  target=radios[i];

je vous remercie, car je suis bloqué, et je deteste sauter un truc que j n ai pas reussi a faire

http://odyssey.sdlm.be/javascript/62/partie2/chapitre4/questions.htm


Bonjour,

Dans un premier temps, la cible est la valeur du bouton radio et non le bouton radio lui-même...

Ensuite, quand le bouton radio activé est trouvé, la boucle doit s'arrêter...

Sans spolier le résultat de l'exercice, j'espère que ces deux indices t'auront mis sur la voie.

Cdlt

4 janvier 2018 à 1:01:33

Bonjour,

Pour l'exercice ici, j'ai une solution alternative :

function askNumber() {
    var nbnb=parseInt(prompt('entrez un nombre :'));
	
	if (isNaN(nbnb)) {
		nbnb=askNumber();
	}
	return nbnb;
}

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

Je me doute que :

  • La récursivité sera vue plus tard
  • La récursivité est un puits de mémoire

Mais malgré tout si un nouveau découvreur de la programmation a cette idée, il peut être bon de le féliciter pour son esprit contre-intuitif (et puis les boucles, c'est pas beau).

5 janvier 2018 à 1:12:22

Pour l'exercice sur les objets et les tableaux (ici), dans la solution :

var family = {
    mother:  'Helga',
    father:  'Thierry',
    sister:  'Laurence',
    brother: 'Ludovic',
    cousin1: 'Guillaume',
    cousin2: 'Pauline',
    cousin3: 'Clarisse'		
}

for (var id in family) {
    alert(id + ' : ' + family[id]);
}

il n'y a pas de ";" après l'affectation, ce qui est valide mais incohérent avec les conseils fournis au début du court.

25 janvier 2018 à 18:21:22

Bonjour, 

Je viens vous demander un coup de main si possible pour un exercice où il faut remplir les blancs, en effet il n'y a pas de correction/solution sur celui-ci et je n'arrive pas à trouver la dernière case.

J'ai pourtant, je pense, compris comment fonctionnait le code mais je me trompe encore donc si quelqu'un aurait la solution svp, dans l’exercice ont doit vérifier si les inputs du formulaire ont été remplis : 

var myFramework = {};

myFramework["checkThisForm"] = function(form) {
    var inputs = form.querySelectorAll("{ICI}");

    for (var i=0, c=inputs.length; i<c; i++) {
        if (!inputs[i].value) {
            return false;
        }
    }

    return true;
};

Voilà au niveau de ICI que je ne trouve pas, j'ai essayer "input[text]" "input[type=text]" par exemple pour récupérer tout les inputs du form mais ce n'est pas ça.

Un input.text ne fonctionne pas aussi mais cela parait logique comme ce n'est pas une classname.

Merci à vous 

EDIT : Solution trouvé c'était bien "input[type=text]" mais comme ça "input[type='text']".

-
Edité par Artistho 25 janvier 2018 à 18:42:25

11 février 2018 à 14:24:56

Bonjour, pour l'exercice Partie 1 chapitre 6 : Déclarer une fonction qui demande un nombre à un utilisateur

Pour exemple l'utilisation d'un do while en solution me semble tout indiqué : 

function askNumber() {
    var number;
    do{
        number = prompt("Entrez un nombre : ");
    }while(isNaN(parseInt(number)));
	
    return number;
}

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

-
Edité par julienhermann 11 février 2018 à 14:26:59

23 mars 2018 à 12:49:42

Je ne comprends pas pourquoi on utilise des if dans l'exercice suivant ? : 
var output, button;
if(output = document.getElementById("output")){
if(button = output.getElementsByTagName("button")[0]){ button.addEventListener("click",function(){
this.innerHTML ="Vous m'avez cliqué";
},false);}}

J'ai utilisé cette solution mais elle ne doit pas être aussi performante ?

var divOut = document.getElementById("output");
var buttonC = divOut.getElementsByTagName("button")[0];

buttonC.addEventListener("click", function() {
buttonC.textContent = "Vous m'avez cliqué"; 
}, false);



-
Edité par maxou22 23 mars 2018 à 13:03:17

Ingénieur Environnement/Eau/Web passionné par la musique, le théâtre et l'éducation.
26 juillet 2018 à 16:12:11

Bonjour, 

Je suis sur l'exercice "Editer les cellules du tableau" du cours "Dynamisez vos sites web avec JavaScript". 

var chemin_td = document.getElementsByTagName('td');

for (var i = 0, c = chemin_td.length; i<c;i++){
        chemin_td[i].addEventListener('click', changeContent);
  }


function changeContent(){	
if (this.getAttribute("data-state")) return;
	var contenu = this.innerHTML;

	var newInput = document.createElement('input');
  newInput.type = 'text';
  newInput.value = contenu;
  
  this.innerHTML = '';
  this.appendChild(newInput);
  
this.setAttribute("data-state", "edit"); 

  newInput.focus();

 
  
  newInput.addEventListener('blur',function(){
  	this.parentNode.innerHTML = this.value;
    this.parentNode.removeChild(newInput);
  });
  
}
  

Il me manquait la ligne newInput.focus(). Celle-ci je l'ai comprise. Mais il me manquait aussi les lignes avec l'attribut data-state. Globalement, je vois bien que sans cet attribut, re-cliquer sur ma ligne crée des erreurs... mais je ne comprends pas du tout comment il s'utilise et à quoi il sert exactement. 

Est-ce que vous pourriez m'aider, svp? 

Merci!

Manu

28 juillet 2018 à 16:54:56

ManuelaTexier a écrit:

Bonjour, 

Je suis sur l'exercice "Editer les cellules du tableau" du cours "Dynamisez vos sites web avec JavaScript". 

var chemin_td = document.getElementsByTagName('td');

for (var i = 0, c = chemin_td.length; i<c;i++){
        chemin_td[i].addEventListener('click', changeContent);
  }


function changeContent(){	
if (this.getAttribute("data-state")) return;
	var contenu = this.innerHTML;

	var newInput = document.createElement('input');
  newInput.type = 'text';
  newInput.value = contenu;
  
  this.innerHTML = '';
  this.appendChild(newInput);
  
this.setAttribute("data-state", "edit"); 

  newInput.focus();

 
  
  newInput.addEventListener('blur',function(){
  	this.parentNode.innerHTML = this.value;
    this.parentNode.removeChild(newInput);
  });
  
}
  

Il me manquait la ligne newInput.focus(). Celle-ci je l'ai comprise. Mais il me manquait aussi les lignes avec l'attribut data-state. Globalement, je vois bien que sans cet attribut, re-cliquer sur ma ligne crée des erreurs... mais je ne comprends pas du tout comment il s'utilise et à quoi il sert exactement. 

Est-ce que vous pourriez m'aider, svp? 

Merci!

Manu

Bonjour Manu,

"Les attributs data-*, appelés « attributs de données personnalisés »,  permettent d'échanger des informations dans un format propriétaire entre le HTML et le DOM afin de pouvoir les manipuler via des langages de scripts." (https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels#attr-data-*)

Pour l'exercice concerné, je te poste le code, tel que je l'ai commenté, en espérant que tu comprendras mieux :

    <script>
		var output = document.getElementById('output'), cells;

		if (output) {
			cells = output.getElementsByTagName('td');

				for (var i=0, c=cells.length; i<c; i++) {
					cells[i].onclick = function() {
						if (this.getAttribute("data-state")) return; // Si data-state est présent, on ne fait rien
																// Car ça veut dire qu'on est déjà en train d'éditer la cellule
							
						var text  = this.innerHTML; // On récupère le contenu de la cellule
						var input = document.createElement("input"); // On crée un input
						input.value = text;
						input.type = "text";

						this.innerHTML = '';     // On efface le contenu de la cellule
						this.appendChild(input); // On place l'input dans la cellule, 
						this.setAttribute("data-state", "edit"); // On indique que la cellule est en cours d'édition

						input.focus(); // On place le curseur dans l'input (c'est important)
						input.onblur = function() { // Quand l'input perd le focus...
								this.parentNode.removeAttribute("data-state"); // On supprime l'attribut
								this.parentNode.innerHTML = this.value;	// Et on remplace la contenu de la cellule (et donc l'input) par la valeur de l'input
						};
					};
				}
		}
    </script>
Cdlt

-
Edité par Guettoudou 28 juillet 2018 à 16:58:38

31 juillet 2018 à 10:24:27

Merci Guettoudou j'ai compris!
14 octobre 2018 à 10:42:43

Bonjour,

Je ne sais pas si ce code n'a pas été mis volontairement, mais il est possible pour l'exercice "http://odyssey.sdlm.be/javascript/40/partie2/chapitre2/stripbr.htm" d'utiliser une boucle for qui ncrémente.

var divOut = document.getElementById("output");
var brElt = divOut.querySelectorAll("br");
for (var i = 0, c = brElt.length; i < c; i++) {
    brElt[i].parentNode.removeChild(brElt[i]);
}

Cordialement :)

Herouart
14 octobre 2018 à 15:44:07

C'est en dehors de votre discussion, mais j'ai vu que depuis quelques temps, on utilisait plutôt let que var pour définir les variables. Je me pose donc la question de savoir si les cours de Javascript d'Openclassroom ont bien été mis à jour pour tenir compte de ce genre de changement.

Comme je souhaite les revoir pour mieux structurer mon code sur un projet que j'ai commencé il y a longtemps, ça m'embêterait de faire encore du "vieux" code.

Sinon, auriez-vous des liens vers de tutoriels et des exercices plus à jour ?

-
Edité par doudoulolita 14 octobre 2018 à 15:44:23

30 novembre 2018 à 16:51:02

Bonjour,

Alors d'abord bravo pour ce cours, qui pour le moment (chapitre 2 :p ) est très bien réalisé. 

J'aimerais avoir vos avis concernant justement l'exercice cité plus haut sur l'édition d'un tableau.

ayant cru comprendre qu'on gagnait en performance en privilégiant la manipulation du DOM sur innerHTLM, et en ne connaissant pas l'usage de l'attribut datat-state, j'ai proposé ce code : 

function CreateNode(name, object){
	let node = document.createElement(name);
	if(object){
		for(let id in object){
			node.setAttribute(id,object[id]);
		}
	}
	return node;
}
let texte;
const node=CreateNode('input',{id:'Jules',type:'text',
							   onfocus:'select()',
							   size:10}),
	  tabletd=document.querySelectorAll('#output td'),
	  taille=tabletd.length;

for(let i=0;i<taille;i++){
	tabletd[i].addEventListener('click',function(e){
		texte=this.replaceChild(node,this.firstChild);
		node.value=texte.textContent;
		node.focus();
	});
}
node.addEventListener('click',function(e){
	e.stopPropagation;});
node.addEventListener('blur',function(e){
	texte.textContent=node.value;
	node.parentNode.replaceChild(texte,node);});

								
		

est-il efficace ?

14 décembre 2018 à 9:12:26

Bonjour à tous et à toutes,

dans l'exercice partie 2 Chapitre 3 Modifier une liste avec prompt, j'ai une solution qui fonctionne, mais je ne sais pas si c'est correct.

Je me mélange les pinceaux entre les notions de getElementsByTag ,et ById, je ne maîtrise pas l'objet Event encore, donc c'est en tâtonnant que j'ai trouvé ça, est ce que ça semble correct ?

var output, list;
output = document.getElementById('output');
list = output.getElementsByTagName('ol')[0];
list.addEventListener('click',function(e){
    var text = prompt('Modifier le texte :');
    e.target.innerHTML = text;
}, true);

 Merci !

28 décembre 2018 à 9:45:37

Bonjour Alain,

ton intuition me semble correct, tu devrais essayer maintenant d'appliquer un événement à chaque 'li'  !

Bon courage

4 janvier 2019 à 18:20:15

Bonjour à tous!

Je suis en train de suivre le cours "dynamisez vos sites web..". C'est excellent:  clair, progressif et super bien réalisé (les QCM et questionnaires en drag&drop !!). Mes débuts (un peu laborieux) dans l'univers du code :)

Je bloque sur un exercice dont n'arrive pas à saisir la logique du corrigé:
http://odyssey.sdlm.be/javascript/21/partie1/chapitre6/fonction-int.htm

L'exercice consiste à réaliser une fonction qui demande à l'utilisateur de rentrer un nombre avec une prompt(). Une fois le nombre rentré, la fonction va convertir la chaîne de caractères entrée un nombre, et elle vérifiera s'il s'agit bien un nombre. Si ce n'est pas un nombre, la fonction redemande à l'utilisateur d'en entrer un. Dès que le nombre est correct, la fonction le retourne avec return.

Le corrigé:

function askNumber(){var number;while(isNaN(number)){ number =parseInt(prompt('Entrez un nombre entier positif'));}return number;}

Ce que je ne saisi pas : en faisant "number = parseInt(prompt('Entrez un nombre entier positif'));"  la fonction parseInt converti une chaine de caractères en nombre (si j'ai bien compris), donc la valeur de la variable "number" devient forcément un nombre non ? donc il n'y a pas de sens à "vérifier qu'il s'il s'agit bien un nombre." ?

Soit je comprends mal l'énoncé soit un truc logique sur les variables m'échappe, j'avoue que je sèche sur la compréhension de cet exercice :( Peut être que l'un d'entre vous pourra m'éclairer :) Merci d'avance!

... et Excellente année 2019 à tous!!! :)

5 janvier 2019 à 20:13:12

Non, car parseInt() peut retourner la valeur NaN si la conversion échoue. Donc on teste avec isNaN() pour voir si la valeur est égale à NaN.
Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - Dynamisez vos sites avec JS - jQuery - Cheatsheet JS
7 janvier 2019 à 11:46:50

Merci beaucoup Seb ! :)

Thunderseb a écrit:

Non, car parseInt() peut retourner la valeur NaN si la conversion échoue. Donc on teste avec isNaN() pour voir si la valeur est égale à NaN.



10 janvier 2019 à 20:18:36

Bonjour à tous,

Tout d'abord je me dois de souligner la qualité du cours, merci à tous ceux qui y ont contribué.

J'ai juste une petite remarque concernant l'exercice de la boucle while en utilisant le prompt.

Voici la solution que je propose :

-

var result;

while(true){

    result = prompt("entrez du text svp!");
    if(result ) break;
}
alert(result);

-

Le code fonctionne mais ne passe pas la validation...

La seule différence que j'observe par rapport à la solution du site est la présence des {}

dans la structure du if. Puisqu'il n'y a qu'une seule instruction dans la bloc je n'en n'ai pas mis.

Peut être est ce une mauvaise pratique mais dans l'absolu je pense que ma solution devrait être validée.

Encore merci à vous,

Cédric.

-
Edité par Kkepler 10 janvier 2019 à 20:21:36

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