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

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