Partage
  • Partager sur Facebook
  • Partager sur Twitter

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.
  • 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 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 ;) .
  • Partager sur Facebook
  • Partager sur Twitter
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 ?
  • 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 novembre 2012 à 17:24:30

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

On en est à la version 22 (même 23 je pense) :-°
  • 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 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.
  • Partager sur Facebook
  • Partager sur Twitter
13 novembre 2012 à 23:37:40

Bonsoir,

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



Bonne continuation
  • Partager sur Facebook
  • Partager sur Twitter
14 novembre 2012 à 2:42:25

Humm vraiment bien foutu =) +1
  • Partager sur Facebook
  • Partager sur Twitter
Steve Jobs est un sacré magicien, avec une seule pomme, il a fait naître des millions de poires.
14 novembre 2012 à 9:30:16

C'est corrigé, merci :)
  • 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
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 ! :)
  • Partager sur Facebook
  • Partager sur Twitter
14 novembre 2012 à 12:30:30

Effectivement, je me suis gouré quelque part :p
  • 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
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).
  • Partager sur Facebook
  • Partager sur Twitter
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é ;)
  • Partager sur Facebook
  • Partager sur Twitter
14 novembre 2012 à 19:46:10

C'est corrigé, la regex n'était pas complète ^^
  • 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
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.
  • Partager sur Facebook
  • Partager sur Twitter
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 :)
  • 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
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*
  • Partager sur Facebook
  • Partager sur Twitter
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 !
  • Partager sur Facebook
  • Partager sur Twitter
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" />.
  • Partager sur Facebook
  • Partager sur Twitter
20 décembre 2012 à 18:20:33

merci beaucouppppppppppppppppp :)
  • Partager sur Facebook
  • Partager sur Twitter
20 décembre 2012 à 20:12:53

Tout simplissimement GENIAL.. :)
  • Partager sur Facebook
  • Partager sur Twitter
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);
  • Partager sur Facebook
  • Partager sur Twitter
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.
  • 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
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. 

  • Partager sur Facebook
  • Partager sur Twitter
2 février 2013 à 13:56:51

C'est corrigé, merci :)

  • 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
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

  • Partager sur Facebook
  • Partager sur Twitter
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

  • Partager sur Facebook
  • Partager sur Twitter
3 février 2013 à 15:20:38

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

  • 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
6 février 2013 à 12:23:52

merci beaucoup pour ces tutoriels :)
  • 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