Les événements sont un pilier du langage JavaScript. Eh, oui, JavaScript est un langage basé sur la programmation événementielle.
Toutes les explications sur les événements disponibles avec JavaScript sont dans le cours vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Découvrez tous les événements JavaScript
Bonjour à tous et bienvenu sur Développement Facile.
Dans ce nouveau cours vous allez apprendre à utiliser les événements avec JavaScript, donc vous allez aborder en douceur la programmation orientée événementielle, il faut savoir que le JavaScript est un langage basé sur les événements. JavaScript renvoi des événements ne serait-ce que pour l’Ajax, quand il envoie un événement comme quoi il a reçu la requête, qu’il l’a traitée, que vous pouvez recharger, pas la page Web en entière, mais juste une partie de la page Web, ou un formulaire. Tout JavaScript est géré avec les événements, donc il est important que vous compreniez ce que c’est que ce concept d’événement comment on le met à profit dans son développement, et comment utiliser tous ses avantages.
Les événements
Donc les événements ça s’applique à tous les objets présents dans une page, que ce soit les boutons ou quand on clique sur un bouton, ça envoie un événement comme quoi l’utilisateur vient de cliquer sur ce bouton et pas sur un autre. Les champs, les barres de défilements, donc les événements, justement comme je vous le disais ça permet de rendre interactive une page avec les utilisateurs, si l’utilisateur appui sur un bouton pour recharger juste cette page, on récupère l’événement et on met à jour juste cette zone. Donc à chaque fois qu’un événement se produit, et que vous écoutez cet événement donc si vous écoutez l’élément clique sur le bouton, vous pouvez lancer des actions derrière, donc ce qui permet une interaction puissante avec l’internaute. Donc vous avez plusieurs événements déjà pré intégrés dans JavaScript donc je vais tout simplement vous les lister :
Vous avez onLoad lors du chargement d’un objet, vous afficher un formulaire sur le onLoad vous écoutez cet événement au chargement du formulaire, vous pouvez appeler des instructions JavaScript,
pareil onUnLoad sauf que là c’est lors du téléchargement d’un objet,
onAbort c’est lors de l’arrêt du chargement d’un objet,
onMove c’est pendant le déplacement d’une fenêtre, donc quand vous déplacez une fenêtre, vous pouvez récupérer les événements pour créer des instructions JavaScript, et faire des interactions avec l’internaute,
onResize c’est lors du redimensionnement de la fenêtre,
onScroll c’est lorsque la fenêtre défile,
onClick typiquement lors d’un clique de la souris vous pouvez couper un bouton, sur le bouton vous faites un onClik à chaque fois que l’utilisateur clique sur le bouton vous pouvez appeler des instructions JavaScript qui vont, par exemple, vérifier la validité d’une adresse e-mail, que les champs obligatoires sont bien remplis, et tout ça avant de lancer le chargement de la page, c’est vraiment génial, plutôt que de perdre du temps à recharger une page, vous vérifiez avec JavaScript que le formulaire est bien renseigné, et vous informez l’utilisateur si il y a des erreurs,
onDbClick lors du double clic de l’utilisateur sous la souris.
Vous avez plusieurs événements onMouseMove, lors du déplacement de la souris,
onMouseDown c’est lors du maintien sur le clic du bouton gauche de la souris,
onMouseUp lorsque l’utilisateur relâche le bouton de la souris,
onMouseOver c’est lorsque la souris passe au-dessus d’un objet, au-dessus d’un bouton, d’un formulaire, un champs de saisie d’un formulaire, vous pouvez lancer des actions,
onMouseOut c’est lorsque la souris n’est plus au-dessus d’un objet défini.
Vous avez encore d’autres événements, ils vous seront très utiles tous ces événements :
onFocus c’est lorsque vous cliquez dans un champs de saisie par exemple, c’est lors de la réception du curseur de la souris dans un des objets typiquement on utilise dans des champs de texte onFocus, par exemple ça peut permettre de mettre toutes les lettres automatiquement en majuscule, en minuscule, de vérifier que l’utilisateur tape bien des chiffres pour un numéro de téléphone, voilà le onFocus dès que l’utilisateur clique dans un champs, en captant le curseur on peut effectuer les instructions JavaScript.
onReset c’est typiquement lorsque l’utilisateur appuie sur le bouton reset, ça réinitialise tout un formulaire, vous pouvez appeler des fonctions JavaScript des instructions, des fonctions pour remettre dans l’état initial le contenu de vos formulaires, par exemple renseignez votre adresse mail, votre nom etc.
keydown c’est pour utiliser les touches du clavier, donc lorsque vous appuyez sur une touche, keydown, vous pouvez lancer des instructions JavaScript,
keypress c’est lorsque, keydown c’est pour maintenir la touche enfoncée, keypress c’est juste lors de l’appui sur une touche,
et keyup c’est lors du relâchement d’une touche du clavier.
dragdrop c’est le glisser déposer dans la fenêtre,
onChange c’est lors du changement d’état d’un objet donc clic sur un bouton, il y a un onChange, par exemple lorsque vous remplissez un formulaire, un champs de saisie, un formulaire il y a un onChange,
onError c’est lorsqu’il y a une erreur sur un objet.
Vous avez énormément d’événements dans ce cours, je vous ai donné une liste des événements disponibles avec JavaScript, après en fonction des interactions avec l’utilisateur que vous souhaitez créer, c’est à vous de piocher dans les événements dont vous avez besoin.
Donc là un exemple tout simple, ça s’affiche une boîte de dialogue lors du chargement de la page, donc vous remarquez il y a juste Windows.Documentonload, sur l’événement onLoad le chargement de l’objet, on affiche une boîte de dialogue, je m’affiche lors du chargement de la page, bien évidemment ça c’est un exemple très basique et je vous encourage à faire des exemples beaucoup plus évolués dans votre code.
Là un autre avec l’appel d’une fonction sur un événement, vous avez votre formulaire si on clique sur le bouton submit, qui est affiché, l’utilisateur clique sur afficher, donc sur le Onclic dès que l’utilisateur a cliqué sur le bouton, vous appelez la fonction AfficheAlert et ça va afficher une boîte de dialogue je m’affiche lors du clic sur le bouton valider. Là c’est un exemple typique d’utilisation des événements, sur le onclic, on aurait pu faire formulaire sur l’événement onLoad au chargement de l’objet formulaire, on appelle par exemple une fonction et initialise champs du formulaire et ça met des valeurs par défaut dans votre formulaire.
Donc encore un autre exemple pour afficher une alerte mais cette fois vous passez une valeur à votre événement, donc pareil il y a un bouton valider, l’utilisateur clique sur le bouton valider, onClic on affiche alerte, et on passe this.value, donc c’est la valeur du bouton, donc value contient le terme, le mot afficher, on passe this.value afficher à la fonction affiche alerte donc le nom du bouton, et dans la boîte de dialogue alerte qui va s’afficher, je m’affiche lors du clic sur le bouton afficher, vous pouvez mettre plusieurs le bouton et sur le onClick vous appeler exactement copier-coller onClick affiche alerte this.value et à chaque fois il y aura écrit je m’affiche lors du clique sur le bouton validé. Je m’affiche lors du clic sur le bouton afficher, je m’affiche lors du clic sur le bouton reset. Donc ça vous permet avec un événement de passer des paramètres en entrée de vos fonctions.
Votre plan d’actions !
Les événements c’est très puissants, vous allez pouvoir ajouter des interactions très poussées avec les utilisateurs de vos pages Web, donc retrouvez comme d’habitude un exemple simple de code source sous ce cours, si vous avez des questions posez-les directement sous la vidéo et je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez le code source JavaScript
Retrouvez le code source pour capturer l’événement onLoad sur l’objet window.document.
Téléchargement du code source Exemple JavaScript avec l'événement onLoad
