Nous continuons notre série de cours vidéo dédiés à l'apprentissage du langage jQuery.
👉 N'hésitez pas à suivre le premier volet qui est gratuit. Il est dédié à la philosophie de jQuery.
Pour ce second volet, nous allons passer en revue les méthodes d'événements liées à la souris.
Nous allons ainsi apprendre à capter les événements que fait l'utilisateur avec sa souris et en temps réel !
Nous pourrons ainsi déclencher des actions si l'utilisateur :
- clique ou double-clique sur sa souris,
- passe le pointeur de sa souris dans une zone donnée,
- retire le pointeur de sa souris d'une zone donnée.
Nous pourrons ainsi manipuler des éléments HTML, afin de rendre nos pages web encore plus attractives pour l'utilisateur.
Comme dans le premier volet, nous conserverons nos bonnes habitudes de développeurs, en mettant à jour notre documentation que nous enrichirons des nouvelles méthodes d'événements apprises dans ce cours.
Ensuite, nous mettrons en application concrète ce que nous aurons appris afin de vous exercer à utiliser efficacement ses méthodes.
Pour cet exercice pratique, nous ferons un classique du genre : la création d'une fenêtre modale.
L'utilisateur cliquera sur un bouton et une fenêtre modale apparaîtra à l'écran en grisant le fond de la page web.
L'utilisateur aura également la possibilité de fermer la modale par un simple clic sur une petite croix prévue à cet effet.
Je mets les codes de cet exercice à votre disposition.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Table des matières de cette formation jQuery (durée : 1h40m)
-
Les méthodes d'événement liées à la souris
- La méthode d'événement click 00:10:10
- La méthode d'événement dblclick 00:03:50
- Les méthodes d'événement mouseenter et mouseleave 00:05:01
- La méthode d'événement hover 00:05:06
- Les méthodes d'événement mousedown et mouseup 00:05:06
- La méthode d'événement mousemove 00:06:59
- Mettre à jour notre documentation 00:09:09
-
Exercice d'application
- Mettre en place le code HTML de la page web 00:04:22
- Mettre en forme le header 00:14:36
- Mettre en place le code HTML de la modale 00:04:27
- Mettre en forme la modale 00:15:49
- Ecrire le script jQuery 00:07:26
-
Pour la prochaine fois
- Pour la prochaine fois 00:08:26
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
On continue avec jQuery, on avance toujours aussi bien, la transition entre le volet 1 et 2 est claire et progressive, et l’exercice de la modale parfait pour travailler les notions vues dans le cours juste avant ( c'est tellement simple avec jQuery ;-) ). Encore un très bon point avec cette documentation qui s'enrichit a chaque tuto. Vous voulez mettre de l'interactivité dans vos pages web facilement? Alors jQuery est la libraire qu'il vous faut et cette suite de tutos vous rendra la vie encore plus facile ! Comme toujours avec vous Mr Brison un excellent tutoriel !
-
Excellent , je ne suis jamais déçu par vos tutos !
-
Très bon complément du volet 1. Le rythme de la courbe d'apprentissage proposé est très agréable à suivre et toujours agrémenté de petits rappels CSS (super l'info sur la box-sizing). Ayant dévoré ce volet 2, j'attends le 3 avec impatience.
-
Avec quelle version de logiciel ce tuto est-il compatible ?jQuery
-
Que contient le fichier source ?Le code source de l'exercice d'application ainsi que notre documentation jQuery.
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés