Partage

Exercices interactifs pour le tutoriel de Javascript

Donnez votre avis

13 novembre 2012 à 16:32:41

Bonjour à tous,


Sur base des exercices interactifs introduits avec le tutoriel HTML5 / CSS3, j'ai entrepris de fournir des exercices similaires pour le tutoriel Javascript de Nesquik69 et moi-même.



L'intérêt est de fournir, à la fin de chaque chapitre (dans la conclusion, après le QCM), quelques exercices pour soit approfondir, soit s’entraîner pour les TPs, soit juste pour pratiquer un peu. Il y a souvent plusieurs solutions proposées, pour découvrir d'autres méthodes et façons de coder. Des exercices plus ludiques comme des mots croisés portent sur l'ensemble du cours.

Les exercices par chapitre ne sont disponibles que pour la partie I. Des exercices pour la partie II sont en cours de réalisation, avec la possibilité de faire joujou avec le DOM, et les éléments de la page !



Ce topic a pour but de récolter vos avis et critiques quant aux exercices proposés : difficulté, incompatibilités, améliorations... bref, ce topic est là pour en discuter.
Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - Dynamisez vos sites avec JS - jQuery - Cheatsheet JS
13 novembre 2012 à 16:50:23

Je suis désolé de commencer ces avis sur un bug, mais le premier exercice bug sur Chromium. Les éléments disparraissent une fois sur deux quand on les places dans les rectangles correspondant.

Sinon ça semble vraiment intéressant mais ça ne remplace pas la pratique à mes yeux ;) .
Mon blog • I <3 Ge0 | nohar | Shig was here -> .
13 novembre 2012 à 17:18:17

Pas de soucis avec Chromium pour ma part (sous Windows). Il y a d'autres types d'exercices qui buggent ?
Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - Dynamisez vos sites avec JS - jQuery - Cheatsheet JS
13 novembre 2012 à 17:24:30

C'est une vieille version (6.0) car je suis à la FAC
Mon blog • I <3 Ge0 | nohar | Shig was here -> .
13 novembre 2012 à 17:28:19

On en est à la version 22 (même 23 je pense) :-°
Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - Dynamisez vos sites avec JS - jQuery - Cheatsheet JS
13 novembre 2012 à 17:47:20

salut

C'est vraiment excellent, j’étais complètement passé à coté de ceux de HTML/CSS.
Excellente idée de faire ça :) en plus c'est très bien fait, en espèrent en avoir pour d'autre cours :D

J'adore les mots croisés vraiment sympa tout ça. Merci

ps: pas de problème chrome version 24.
13 novembre 2012 à 23:37:40

Bonsoir,

Petite faute de frappe en bas de la page :
Image utilisateur



Bonne continuation
14 novembre 2012 à 2:42:25

Humm vraiment bien foutu =) +1
14 novembre 2012 à 9:30:16

C'est corrigé, merci :)
Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - Dynamisez vos sites avec JS - jQuery - Cheatsheet JS
14 novembre 2012 à 11:37:42

Image utilisateur


N'est-ce pas censé être previousSibling ?

Très bons exercices en tout cas, c'est bien fun pour tester ses compétences ! :)
14 novembre 2012 à 12:30:30

Effectivement, je me suis gouré quelque part :p
Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - Dynamisez vos sites avec JS - jQuery - Cheatsheet JS
14 novembre 2012 à 17:32:51

Je n'ai pas encore tout fait, mais c'est une très bonne idée.

Pour l'apprentissage, ça change un peu de d'habitude et ça rajoute un petit côté sympa, plus didactique ^^

Si ça pouvait se généraliser aux autres tutos majeurs, ce serait surement bien d'ailleurs.

Quoiqu'il en soit, merci (pour le tuto et les exo bonus).
14 novembre 2012 à 18:41:29

Très bonne idée ces exercices, j'aime beaucoup pouvoir pratiquer un peu après avoir ingurgité tout plein d'informations nouvelles.
Encore du très bon boulot sur le Zéro.
Juste une chose sur le correcteur, apparemment celui-ci n’aime pas les guillemets ;)

mon script:
var myNumber = 15;

if(myNumber>10);{
alert("La variable est supérieur à 10!")
}

Le corrigé:
1. var myNumber = 42;
2.
3. if (myNumber > 10) {
4. alert('Le nombre est supérieur');
5. }

rien de bien grave donc, c’était juste pour le signalé ;)
14 novembre 2012 à 19:46:10

C'est corrigé, la regex n'était pas complète ^^
Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - Dynamisez vos sites avec JS - jQuery - Cheatsheet JS
15 novembre 2012 à 19:46:22

Bonsoir à tous,
L'idée des exos en js est géniale, merci pour cette initiative.
Néanmoins, le premier exercice sur JavaScript comporte un bug (exercice drag and drop). Il me semble que l'erreur vient du fait que 2 draggable items ont le même Id ...
Du coup, la réponse est forcément fausse.

En tous cas, merci encore.
1 décembre 2012 à 16:25:14

J'ai ajouté des exercices pour les chapitres 1 et 2 de la partie II. Ils sont d'un nouveau type, puisqu'ils proposent de modifier le DOM de la page pour les réaliser.

Dites moi ce que vous en pensez :)
Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - Dynamisez vos sites avec JS - jQuery - Cheatsheet JS
2 décembre 2012 à 18:08:24

Bonsoir,

Perso, je trouve ces exercices interactifs supers ! C'est vraiment génial de pouvoir tester nos connaissances directement comme ça, voir ce qu'on a bien compris et ce qu'il nous reste à approfondir. En plus les solutions sont très claires.

Bref, si je devais donner des notes :
10 / 10 pour l'idée
10 / 10 pour la réalisation (aucun bug pour ma part)

Bon et j'en profite pour les éloges : 20 / 20 pour le tuto !!

Merci et continuez dans cette voie :)

Vive les exos interactifs !

*Jekia*
9 décembre 2012 à 0:45:53

Génial et super utile !

Un petit souci, c'est qu'on ne sait pas changer ses réponses une fois qu'on en a "déposé" une dans la case. Mais c'est un léger bémol !

Good job guys !
Anonyme
11 décembre 2012 à 16:10:47

Salut,

joli travail :)

Petit soucis, j'ai voulu tester le premier test ( http://www.sdz-files.com/cours/javascr [...] miers-pas.htm )
Lorsqu'on glisse la bonne réponse dans la première case (<script src="hello.js"></script>) on se retrouve avec la réponse <script src="hello.js" />.
20 décembre 2012 à 18:20:33

merci beaucouppppppppppppppppp :)
20 décembre 2012 à 20:12:53

Tout simplissimement GENIAL.. :)
28 décembre 2012 à 22:52:06

Hello, merci beaucoup pour ce tutoriel qui est vraiment excellent.

Par contre j'ai eu un bug enfin je me suis peut être trompé dans le code ;)

Partie 2 : Modeler vos pages Web => Manipuler le code HTML (partie 2/2)

Exercice JavaScript : Modifier un tableau.

Ici.

Quand j'insere le code suivant il me sort une erreur :

var elementTbodyCible = document.getElementsByTagName('tbody')[0];
var elementTrSuivant = document.getElementsByTagName('tr')[2];

var elementTrNew = document.createElement('tr');
var elementThNew = document.createElement('th');
var elementTdNew = document.createElement('td');
var elementTdNew2 = elementTdNew.cloneNode(false);

elementThNew.scope = 'row';

var elementThNewText = document.createTextNode('Firefox');
var elementTdNewText = document.createTextNode('Mozilla');
var elementTdNew2Text = document.createTextNode('27,8%');

elementTbodyCible.insertBefore(elementTrNew,elementTrSuivant);
elementTrNew.appendChild(elementThNew);
elementTrNew.appendChild(elementTdNew);
elementTrNew.appendChild(elementTdNew2);
elementThNew.appendChild(elementThNewText);
elementTdNew.appendChild(elementTdNewText);
elementTdNew2.appendChild(elementTdNew2Text);
29 décembre 2012 à 6:23:12

C'est la ligne elementTbodyCible.insertBefore(elementTrNew,elementTrSuivant); qui pose problème. Une des 32 références n'est pas bonne/n'existe pas.
Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - Dynamisez vos sites avec JS - jQuery - Cheatsheet JS
2 février 2013 à 10:25:04

super tuto, tres intructif et tres bien réalisé.

juste une toute petite remarque dans le questionnaire recap' partie 1, chap 6.

il faudrait corriger la 3e question: La fonction t() requiest 3 arguments , par: la fonction f() requiert...

merci pour ce cours que je m'empresse de continuer. 

2 février 2013 à 13:56:51

C'est corrigé, merci :)

Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - Dynamisez vos sites avec JS - jQuery - Cheatsheet JS
3 février 2013 à 14:10:42

Bonjour

Concernant l'exercice situé à cette page :

http://www.sdz-files.com/cours/javascript/exercices/syndnd/syndnd-partie1-chapitre5-boucles.htm#dragdrop

Le corrigé montre bien les erreurs commises mais malheureusement ne montre pas la solution finale...

Si je ne m'abuse ???

Bonne journée et merci encore pour ce superbe tutoriel.

-
Edité par goava 3 février 2013 à 14:33:20

3 février 2013 à 14:11:30

Bonjour

Concernant l'exercice situé à cette page :

http://www.sdz-files.com/cours/javascript/exercices/syndnd/syndnd-partie1-chapitre5-boucles.htm#dragdrop

Le corrigé montre bien les erreurs commises mais malheureusement ne montre pas la solution finale...

Si je ne m'abuse ???

Bonne journée et merci encore pour ce superbe tutoriel.

Milles excuses pour ce doublon...??? Le système m'a redemandé mon mot de passe après l'envoie et aussitôt à réaffiché le formulaire, du coup j'ai pensé que le message n'avait pas encore été envoyé...

Vraiment désolé.

Cordialement Goava

-
Edité par goava 3 février 2013 à 14:35:39

3 février 2013 à 15:20:38

Effectivement, il n'y a pas de corrigé, j'ai oublié de coder ça ^^

Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - Dynamisez vos sites avec JS - jQuery - Cheatsheet JS
6 février 2013 à 12:23:52

merci beaucoup pour ces tutoriels :)

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