Les événements sont fondamentaux avec JavaScript, un langage événementiel !
Apprenez comment utiliser l’objet event dans vos applications.
Tout est dans le cours vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Profitez de la puissance des événements JavaScript avec Event
Bonjour à tous et bienvenu sur Développement Facile.
Dans ce nouveau cours vous allez apprendre à utiliser l’objet event, rappelez-vous, le langage JavaScript c’est plutôt un langage orienté programmation événementiel, il y a des événements qui sont envoyés entre différents objets, vous avez l’objet event pour utiliser tout ça.
L’objet event : les propriétés
Vous avez plusieurs propriétés altKey, crtlKey, et shiftKey, ça permet de vérifier si des touches sont enfoncées en même temps, par exemple, vous faites alt+une autre touche, ça va vous permettre de faire des combinaisons de touches, ctrlKey avec une autre touche, shiftKey avec une autre touche.
C’est très pratique pour les combinaisons alt, ctrl, supp, avec d’autres touches. clientX, clientY ça va vous renvoyer l’abscisse ou l’ordonnée de l’événement par rapport au document pour savoir où est apparu l’événement.
keyCode ça vous renvoie le code de la touche qui vient d’être enfoncée par l’internaute, bien évidemment, height et width c’est la hauteur et la largeur, ça permet de vérifier si les dimensions de la fenêtre de la page HTML ont été modifiées.
layerX et layerY, c’est la position horizontale et verticale de la souris, ça permet de détecter quand l’utilisateur déplace la souris,
offsetX et offsetY c’est la position horizontale et verticale de la souris,
pageX et pageY ça renvoie à la position horizontale et verticale de la souris par rapport à la fenêtre qui est dans la page HTML,
screenX, screenY c’est la position horizontale ou verticale dans la fenêtre du navigateur.
Tout ça, ça concerne la souris, il y a des petites subtilités, moi, ce que je vous propose c’est de tester dans votre code ce qui correspond le mieux à votre application, entre layer, offset, page, screen, il y a des différences, évidemment, entre ces propriétés et ça, ça dépend de l’usage que vous avez, de l’application que vous êtes en train de développer.
Wich ça renvoie la touche ou le bouton qui a généré un événement,
type c’est le nom l’événement qui vient de se produire,
x et y, encore, les coordonnées de la souris, ou la nouvelle position de la fenêtre lorsqu’elle a été redimensionnée par l’internaute.
L’objet event
Là un petit exemple pour afficher les coordonnées de la souris dans la barre de statut qui se situe tout en bas du navigateur, il y a l’heure et au-dessus il y a la barre de statut, vous récupérez les coordonnées de la souris en faisant event.clientx et .clienty et vous les affichés dans Window.statut. Rappelez-vous le cours sur l’objet Window, si ça ne vous parle pas, sur le coté dans les catégories, il y a un champ JavaScript qui va vous lister tous les cours JavaScript, il y en a un qui est dédié à l’objet window, window.statut, vous mettez une nouvelle chaîne de caractères, coordonnés la souris actuelle, nPosX et nPosY. Les coordonnées de la souris sont mises à jour en directe grâce aux événements, rappelez-vous les événements, la cours JavaScript dédié aussi, vous pouvez aller le consulter directement, donc body.onmousemove, à chaque fois que l’utilisateur déplace sa souris on appelle la fonction souris, avec en paramètres l’objet event, qui permet de récupérer les coordonnées de la souris et de les afficher dans la barre de statut du navigateur de l’internaute.
C’est un exemple tout simple d’utilisation de l’objet event qui vous sera certainement très utile.
Votre plan d’actions !
Comme je vous l’ai dit, les événements c’est vraiment la clé pour créer des applications performantes avec JavaScript, JavaScript c’est un langage qui repose sur les événements, entièrement sur les événements, apprenez à les utiliser, il y a plusieurs cours sur l’objet event, sur les événements disponibles sur Développement Facile, vraiment maitrisez les événements pour passer au niveau supérieur. Retrouvez comme d’habitude un exemple de code source sous ce cours vidéo, si vous avez des questions posez-les directement sous ce cours vidéo et moi je vous dis à très bientôt pour le prochain cours sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez le code source JavaScript
Voici un exemple d’utilisation des événements JavaScript.
Téléchargement du code source Exemple utilisation des événements JavaScript
