Ce cours vous permettra de prendre en main le framework jQuery pour exploiter toute la puissance de JavaScript et rendre vos sites web encore plus dynamiques. À partir du 22 septembre, vous y trouverez des quiz et activités pour vous entraîner... et peut-être, vous décrocherez la certification du cours quand vous l'aurez terminé !
J'ai quelques remarques sur certains exemples de code au niveau du chapitre intitulé les bases de la gestion événementielle
Concernant le code ci-dessous sur notre :
$(function() {
// Dimensions de la fenêtre
var largeur = ($(window).width()) - 100;
var hauteur = ($(window).height()) - 100;
// Affichage de la première image en (100, 100)
var p = $('#target').offset();
p.top=100;
p.left=100;
$('#target').offset(p);
// Gestion du clic et déplacement de l'image
$("#target").click(function(event){
x = Math.floor(Math.random()*largeur);
y = Math.floor(Math.random()*hauteur);
var p = $('#target').offset();
p.top = y;
p.left = x;
$('#target').offset(p).css('width',Math.floor(Math.random()*200)+10);
$('#rapport').html('Événement : ' + event.type + '. Bouton pressé : ' + event.which);
});
});
Je ne comprend pas l'intérêt de la rédéclaration de la variable "p" au niveau de la fonction événementielle étant donné que nous l'avons déjà déclaré dans un espace plus grand et par conséquent cette dernière a droit de cité dans la fonction événementielle. D'ailleurs en commentaire chez moi le code fonctionne parfaitement
Au niveau de la méthode focusin() et focusout(),lorsque je clique sur le premier et après sur le deuxième controle d'un même fieldset, j'obtiens : Focus : premier et Perte de Focus : premier. Pareil pour le deuxième fieldset. Or d'après les explications je m'apprêtais à voir la perte de focus uniquement lorsque nous cliquons sur un contrôle n'appartenant pas au fieldset ayant le focus.
Le remplacement de focusin et focusout par focus et blur ne produit aucun effet chez moi. Est-ce que cela est le comportent attendu ?
Quelques explications seraient la bienvenue!!!!!!!!
Bonjour, je voudrais faire une petite remarque concernant le barême de l'activité de la partie 2. En effet à aucun moment il n'est précisé dans l'énoncé que les méthodes after() et append() doivent être utilisées. Du coup, j'ai systématiquement utilisé la méthode append() (et ça marche très bien comme ça. De plus, il est question d'avoir 1 point sur le code CSS modifié dans le <head>. Ayant pensé à faire une mise en forme pour le formulaire mais en jQuery et après calcul de ma note potentielle, je me retrouve avec l'attente d'une note autour de 4/7 alors que le résultat obtenu correspond parfaitement aux exemples montrés dans l'énoncé. Je ne cherche pas à revoir ma note si cela doit arriver, je voulais juste signaler que l'énoncé n'est pas très précis et qu'on se retrouve un peu piégé à la découverte du barême...
De plus, j'avais déjà lu votre cours il y a plusieurs mois. Je m'y suis inscrit lorsque ce cours est devenu certifiant. Du coup, je ne fais que relire en diagonale le cours afin de me rafraîchir la mémoire (après une grosse dose de PHP , j'ai un peu oublié comment JavaScript et jQuery fonctionnent). Là où je veux en venir c'est qu'il ne me semble pas que l'événement click est abordé avant la partie suivante. J'en parle dans le sens où je suis tombé sur une copie d'élève qui n'a pas du tout réussi le TP faute de connaitre l'événement. Peut-être que préciser son existence ne serait-ce que dans l'énoncé pourrait aider ceux qui partent de 0 et qui n'ont donc pas encore forcément le réflexe documentation, ou, pour ceux qui l'ont, n'ont pas encore les moyens de chercher correctement par eux-même (celui que j'ai corrigé a apparemment acheté jusqu'à 300€ de livres sur jQuery mais n'a pas réussi malgré des recherches supplémentaires sur Google à trouver de réponse, du coup je n'ai pas pu lui donner de note supérieur à 3/7... Bref, c'est un peu dommage.
A part ça le cours à quand même le mérite d'être vraiment bien écrit et on ne peut plus clair !
@patrickg : je vois où tu veux en venir. Je suis justement sur la lecture de ce chapitre, je reviens vers toi (si j'y pense) pour voir avec toi ce qui ne marche pas. Et effectivement, pour la variable p il me semble que ce n'est pas nécessaire de redéclarer celle-ci. Je vais faire une série de test...
@patrickg : Concernant ton problème avec focusin() et focusout() y'aurait possibilité d'avoir le code que tu a écrit ? Chez moi ça marche sans problème. La balise #resultat2 se remplit bien à la première perte de focus...
J'aurai une petite question que l'activité de la partie 4 AJAX. Faut-il faire le rendu en mettant les fichiers pour un fonctionnement sous serveur local (XAMP) et/ou avec le fichier des données à afficher en ligne ?
J'ignore la raison, mais sur le précédente exercice j’ai 2 correcteur sur 3 chez qui une des fonction n'a pas fonctionné du coup j’ai été démonté. je ne voudrai pas que quelque chose du même style se reproduise...
@patrickg : Concernant ton problème avec focusin() et focusout() y'aurait possibilité d'avoir le code que tu a écrit ? Chez moi ça marche sans problème. La balise #resultat2 se remplit bien à la première perte de focus...
@patrickg : Concernant ton problème avec focusin() et focusout() y'aurait possibilité d'avoir le code que tu a écrit ? Chez moi ça marche sans problème. La balise #resultat2 se remplit bien à la première perte de focus...
Je vais vérifier cela et je te ferai signe....
Ah mais attends, en relisant ton premier post, je viens de réaliser que c'est tout con à expliquer... (Je devais être ailleurs ) En fait c'est normal que le champ "Perte de focus" se remplisse même si tu changes le focus dans le même fieldset, puisque ce même fieldset a perdu un focus tout en en récupérant un autre. Je sais pas si c'est bien tourné, il commence à être tard...
Le code ci-dessous ne marche pas chez moi. Y a t-il quelqu'un chez qui ce code a fonctionné, pour m'expliquer comment faire pour obtenir les résultats escomptés
<span id="un"></span><br /><br />
<span id="deux"></span><br /><br />
<button id="filtre1">Après le cinquième</button>
<button id="filtre2">Différent de Mathis, Hugo et Yanis</button>
<button id="filtre3">Avant le cinquième</button>
<script src="jquery.js"></script>
<script>
$(function() {
var tableau = ['Luca', 'Emma', 'Mathis', 'Jade', 'Léa', 'Enzo', 'Chloé', 'Nathan', 'Manon', 'Noah', 'Sarah ', 'Louis', 'Luna', 'Kylian', 'Clara', 'Ethan', 'Camille', 'Hugo', 'Lylou', 'Théo', 'Zoé', 'Yanis', 'Maélys'];
var tableau2;
$('#un').text('Données originales : ' + tableau.join(', '));
$('#filtre1').click(function() {
tableau2 = $.grep(tableau, function(el,ind) {
return (ind > 4);
});
$('#deux').text('Après le cinquième : ' + tableau2.join(', '));
});
$('#filtre2').click(function() {
tableau2 = $.grep(tableau, function(el,ind) {
return (el != 'Mathis' && el != 'Hugo' && el !='Yanis');
});
$('#deux').text('Différent de Mathis, Hugo et Yanis : ' + tableau2.join(', '));
});
$('#filtre3').click(function() {
tableau2 = $.grep(tableau, function(el,ind) {
return (ind > 4);
}, true);
$('#deux').text('Avant le cinquième : ' + tableau2.join(', '));
});
});
</script>
Le code ci-dessous ne marche pas chez moi. Y a t-il quelqu'un chez qui ce code a fonctionné, pour m'expliquer comment faire pour obtenir les résultats escomptés
<span id="un"></span><br /><br />
<span id="deux"></span><br /><br />
<button id="filtre1">Après le cinquième</button>
<button id="filtre2">Différent de Mathis, Hugo et Yanis</button>
<button id="filtre3">Avant le cinquième</button>
<script src="jquery.js"></script>
<script>
$(function() {
var tableau = ['Luca', 'Emma', 'Mathis', 'Jade', 'Léa', 'Enzo', 'Chloé', 'Nathan', 'Manon', 'Noah', 'Sarah ', 'Louis', 'Luna', 'Kylian', 'Clara', 'Ethan', 'Camille', 'Hugo', 'Lylou', 'Théo', 'Zoé', 'Yanis', 'Maélys'];
var tableau2;
$('#un').text('Données originales : ' + tableau.join(', '));
$('#filtre1').click(function() {
tableau2 = $.grep(tableau, function(el,ind) {
return (ind > 4);
});
$('#deux').text('Après le cinquième : ' + tableau2.join(', '));
});
$('#filtre2').click(function() {
tableau2 = $.grep(tableau, function(el,ind) {
return (el != 'Mathis' && el != 'Hugo' && el !='Yanis');
});
$('#deux').text('Différent de Mathis, Hugo et Yanis : ' + tableau2.join(', '));
});
$('#filtre3').click(function() {
tableau2 = $.grep(tableau, function(el,ind) {
return (ind > 4);
}, true);
$('#deux').text('Avant le cinquième : ' + tableau2.join(', '));
});
});
</script>
Je voudrais faire un peu la même remarque que Francis_Maxence, l'énoncé de l'activité de la partie 2 n'est pas clair sur les objectifs et le barème est trop spécifique par rapport aux nombreuses possibilités de le faire. (par exemple, à aucun moment il n'est spécifié qu'il faut insérer le code html avec du jquery dans le div de droite, ça marche très bien (et entre nous c'est beaucoup plus lisible) en faisant show/hide sur des éléments écrits directement dans le fichier html (comme un système d'onglets basique). Hors cette manière de faire n'est pas correctement notable puisque pas "dans les clous", clous qui n'ont pas été spécifiés dans l'énoncé...
de même, la méthode click n'a pas été vu dans le cours quand on fait cette activité.
Bref, il serait utile de remanier ça si je puis me permettre.
Bien que je vous tire mon chapeau pour ce cours, que je le trouve clair et dense comme j'aime, je partage le sentiment d'alnomcys.
J'ai du relire plusieurs fois le barème pour essayer de comprendre ce qu'il fallait noter.
De plus il y a 1 point sur du CSS ce qui à mon sens n'a pas d’intérêt ici.
Il en va de même pour le quizz qui précède l'activité où pour moi une question 9 sur le replaceWith ne propose pas la bonne réponse. Du coup j'ai été induit en erreur par les propositions faites.
Bien que l'explication qui accompagne la correction est juste, la réponse apportée est fausse.
@MichelMartin si vous voulez en savoir plus contactez moi par MP.
Par ailleurs au niveau du cours dans la partie travailler avec les formulaires, le point ci-dessous est faux:
$(':radio#H:checked').val()
Lit l'état du bouton radio H. Renvoie true si le bouton est sélectionné, sinon false.
un petite boulette s'est glissé dans la partie "un jeu en Jquery, la partie sur la collision ne fonction que d'un coté car il y a une erreur dans le code, il faut remplacer la partie après le "||" par: ((vjX > vrX) && (vjX < (vrX+66)) && (vrY > (vjY+120)) && (vrY < (vjY+150)) && (ok == 1))
Dans le quizz n°2, il y a une coquille de syntaxe sur la question 5, il faut remplacer la ',' dans la seconde partie de l'expression par ':'. Sans cette ajustement de l’énoncé, la réponse apportée dans la correction est fausse.
C'est dommage car c'est frustrant surtout quand on sait que la réponse que l'on apporte est juste et que l'on perd des points.
- Edité par antrax_2013 30 octobre 2015 à 10:53:34
J'ai tout de même l'impression que l'auteur du MOOC ne vient pas trop sur le forum
Sinon, dans la partie Ajax, il y a des soucis dans tous les "essayer" qui ne marchent que partiellement voire pas du tout. (je suis sur mac et je teste avec safari et firefox)
Dans le quizz n°2, il y a une coquille de syntaxe sur la question 5, il faut remplacer la ',' dans la seconde partie de l'expression par ':'. Sans cette ajustement de l’énoncé, la réponse apportée dans la correction est fausse.
C'est dommage car c'est frustrant surtout quand on sait que la réponse que l'on apporte est juste et que l'on perd des points.
Comme on dit de nos jours: +1
C'est frustrant, parce que la syntaxe proposée dans l'énoncée est fausse, donc la dernière réponse est sensée être la bonne..
Bon, c'est peut-être moi qui suis neuneu mais j'aimerais un poil d'aide.
Dans l'activité de la partie 4 sur Ajax, j'ai de nouveau un problème avec les consignes et le barème de notation. Si quelqu'un a encore accès aux consignes et peut les poster ici ça m'arrangerait.
Dans mon souvenir, nulle-part il est écrit que les textes d'aide pour les trois boutons doivent impérativement être dans le même fichier. Et, c'est certes très con quand on y réfléchit bien, mais par défaut j'ai donc fait trois petits fichiers txt séparés. Or on est noté sur le fait qu'ils soient dans le même fichier.
Donc, est-ce moi qui ai mal lu, ou bien est-ce que l'auteur du cours a considéré que c'était tellement évident qu'il n'était pas la peine de le préciser?
C'est dommage ces "soucis" avec les quizz et activités, le cours en lui-même est très bon!
Bon, c'est peut-être moi qui suis neuneu mais j'aimerais un poil d'aide.
Dans l'activité de la partie 4 sur Ajax, j'ai de nouveau un problème avec les consignes et le barème de notation. Si quelqu'un a encore accès aux consignes et peut les poster ici ça m'arrangerait.
Dans mon souvenir, nulle-part il est écrit que les textes d'aide pour les trois boutons doivent impérativement être dans le même fichier. Et, c'est certes très con quand on y réfléchit bien, mais par défaut j'ai donc fait trois petits fichiers txt séparés. Or on est noté sur le fait qu'ils soient dans le même fichier.
Donc, est-ce moi qui ai mal lu, ou bien est-ce que l'auteur du cours a considéré que c'était tellement évident qu'il n'était pas la peine de le préciser?
C'est dommage ces "soucis" avec les quizz et activités, le cours en lui-même est très bon!
C'est écrit au début pour Label, voir la 1ère phrase en rouge ...
Et à la fin, il propose de faire l'équivalent pour les 2 autres contrôles, sans repréciser pour le fichier txt unique ...
C'est troublant car si ce n'est que pour Label, il n'y a aucune raison d'en faire plusieurs ; donc, disons que la consigne du fichier unique aurait dû être indiqué après la proposition de réitérer la fonctionnalité ...
Consigne de l'activité
Pour rendre l’IHM plus intuitive, vous allez afficher des informations d’aide dans la balise <div> de droite lorsque l’utilisateur cliquera sur le bouton Label. Ces informations devront apparaître et disparaître en utilisant un effet de fadeIn/fadeOut. Elles devront être placées dans un fichier texte unique, repérées par des identifiants et lues en utilisant AJAX.
Dans cet exercice, vous allez afficher un message d'aide dans la partie droite de la page lorsque l'utilisateur cliquera sur le bouton Label. Ce texte doit apparaître en-dessous des éléments affichés.
Voici ce que vous devez obtenir suite au clic sur Label :
Je vous propose de créer un fichier de données et d'y accéder en AJAX via la méthode load(). Le texte d'aide doit apparaître et disparaître avec un effet fadeIn/fadeOut, en même temps que les autres éléments affichés au clic sur Label.
Si vous voulez un point bonus, faites la même chose sur les boutons Zone de texte et Bouton.
- Edité par philippebeck 5 novembre 2015 à 20:48:23
Bonjour, je voudrais faire une petite remarque concernant le barême de l'activité de la partie 2. En effet à aucun moment il n'est précisé dans l'énoncé que les méthodes after() et append() doivent être utilisées. Du coup, j'ai systématiquement utilisé la méthode append() (et ça marche très bien comme ça. De plus, il est question d'avoir 1 point sur le code CSS modifié dans le <head>. Ayant pensé à faire une mise en forme pour le formulaire mais en jQuery et après calcul de ma note potentielle, je me retrouve avec l'attente d'une note autour de 4/7 alors que le résultat obtenu correspond parfaitement aux exemples montrés dans l'énoncé. Je ne cherche pas à revoir ma note si cela doit arriver, je voulais juste signaler que l'énoncé n'est pas très précis et qu'on se retrouve un peu piégé à la découverte du barême...
De plus, j'avais déjà lu votre cours il y a plusieurs mois. Je m'y suis inscrit lorsque ce cours est devenu certifiant. Du coup, je ne fais que relire en diagonale le cours afin de me rafraîchir la mémoire (après une grosse dose de PHP , j'ai un peu oublié comment JavaScript et jQuery fonctionnent). Là où je veux en venir c'est qu'il ne me semble pas que l'événement click est abordé avant la partie suivante. J'en parle dans le sens où je suis tombé sur une copie d'élève qui n'a pas du tout réussi le TP faute de connaitre l'événement. Peut-être que préciser son existence ne serait-ce que dans l'énoncé pourrait aider ceux qui partent de 0 et qui n'ont donc pas encore forcément le réflexe documentation, ou, pour ceux qui l'ont, n'ont pas encore les moyens de chercher correctement par eux-même (celui que j'ai corrigé a apparemment acheté jusqu'à 300€ de livres sur jQuery mais n'a pas réussi malgré des recherches supplémentaires sur Google à trouver de réponse, du coup je n'ai pas pu lui donner de note supérieur à 3/7... Bref, c'est un peu dommage.
A part ça le cours à quand même le mérite d'être vraiment bien écrit et on ne peut plus clair !
Bonjour,
Je remarque aussi que l'énoncé du sujet activité 2 n'est pas très clair.
Les possibilités de jQuery sont énormes.
Un petite vidéo comme celle proposée dans le cours "apprendre à coder avec JS" pour l'activité partie_2 aurait permis de bien saisir les étapes et les comportements. Une vidéo parle bien mieux qu'un long texte avec quelques screenshots.
Merci d'avance. Il n'est pas trop tard pour les autres…
je viens de corriger les activités d'un élève et après validation de la note, je me suis rendue compte que je n'étais pas sur le bon élève...
Il n'a pas été pénalisé, au contraire, j'étais sur la page d'un élève qui n'avait fourni aucun travail et je lui ai mis une note de 6/6 car je regardais le travail d'un autre!
J'attends les corrigés des derniers exercices pour valider le cours, une sacrée découverte qui doit absolument s'accompagner de successions de pratiques.
De mon côté je pense avoir assimilé la globalité mais une question me chiffonne car la méthode load() ne fonctionne pas de mon côté sur chrome, que ce soit en utilisant un serveur ou non, le problème est le même.
Si l'un(e) d'entre vous a rencontré le problème, merci de me tenir au courant
je suis entrain de faire l'activité partie 2 qui consiste à créé un générateur de formulaire.
j'ai peut-être une question bête mais la première partie elle ce fait où ?
merci de vos réponse.
cordialement
Quand tu cliques sur la barre de progression qui représente ta progression en fonction de l'ensemble des chapitres du cours, choisis un chapitre de la 1e partie puis jette un oeil à droite, tu verras un menu qui correspond à l'ensemble des chapitres, quiz, TP et activité.
Quand tu cliques sur la barre de progression qui représente ta progression en fonction de l'ensemble des chapitres du cours, choisis un chapitre de la 1e partie puis jette un oeil à droite, tu verras un menu qui correspond à l'ensemble des chapitres, quiz, TP et activité.
Quand je suis dans la partie 1 - introduction à JQuery, dans la colonne de droite il y a bien l'ensemble des chapitres 1 et 2, mai pas quiz et activité.
Par contre quiz et activité je l'ai dans la partie 2 - les bases de JQuery
Dans L'activité partie 2 créez un générateur de formulaires.
sur le bouton Zone de texte, je n'arrive pas à mettre la valeur saisie dans la zone de texte en id de l'élément qui sera créé dans la partie de gauche.
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Philippe