L'essentiel de JavaScript

Réagir à des évènements

Testez gratuitement nos 1270 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Découvrez trois manières de réagir aux évènements qui se produisent dans une application JavaScript.

Transcription

Dans le chapitre précédent, nous avons commencé a écrire du code un petit peu plus avancé mais il reste un gros problème, notre code ne s'exécute qu'une seule fois, lorsque la page est chargée. Dans la pratique, notre code s'exécutera, la plupart du temps, en réaction à un événement. C'est-à-dire, quand quelque chose se passe. Pour les débutants en JavaScript, les événements sont souvent quelque chose de difficile à comprendre. Et pourtant, vous allez le voir, l'idée est assez simple. En fait, dans votre application JavaScript, des événements se produisent en permanence. Je balade ma souris sur l'écran, c'est un événement. Ma souris entre sur le titre, c'est un événement. Ma souris sort du titre, c'est un autre événement. Ma souris survole un bouton, c'est un événement. Ma souris clique sur un bouton, c'est également un événement. Donc, il y a plein d’événements qui peuvent se produire avec la souris mais également avec le clavier, j'enfonce une touche du clavier, c'est un événement, je relâche cette touche, c'est un autre événement. Donc, des événements se produisent en permanence, en clair, vous n'avez pas à vous soucier du fait que ces événements se produisent ou pas. Vous n'avez pas à écrire vous-même les événements. Les événements se produisent quoiqu'il arrive. La seule chose que vous ayez à faire, c'est décider si vous voulez réagir à ces événements, ou pas. Vous allez, donc, uniquement écrire, ce qu'on appelle en anglais les « events handler ». C'est-à-dire les gestionnaires d’événements. Vous allez donc devoir lier votre code JavaScript à un ou plusieurs événements. La plupart du temps, les événements qui se produisent ne font absolument rien, ils tombent dans le vide parce qu'il n'y a pas de gestionnaire d’événement associé. Alors, pour associer du code JavaScript à un événement, il y a plusieurs techniques. Je vais retourner dans mon éditeur pour vous montrer la première d'entre elles. Alors, vous voyez, ici, que j'ai un bouton, eh bien je vais me placer sur ce bouton. Et, je vais utiliser l'attribut « onclick » de l'HTML. Alors, quand je tape « on », j'ai cette liste déroulante qui apparaît, et j'ai plein de choses qui commencent par « on » : « onabort », « onblur », « oncanplay », « oncanplaythrough » « onchange », « onclick », « oncontextmenu » c'est quand je fais un clic droit, par exemple. Donc tous ces événements qui commencent par « on », c'est des choses auxquelles je peux réagir. Alors celui qui m'intéresse, c'est le clic, « onclick », et, dans les guillemets, ici, je vais écrire du code JavaScript, je vais mettre une petite alerte, par exemple, « alert », avec un petit message : « Bonjour », comme ceci, et puis un « ; ». Donc, si je reviens sur mon navigateur, que je rafraîchis ma page et que je reclique sur mon bouton, vous voyez que l'alerte apparaît, donc, j'ai réussi à lier une instruction JavaScript à un événement, à exécuter du code au moment où je clique sur un bouton. Pour être franc, je vais retourner dans mon éditeur, on aime pas trop cette façon de faire. Vous voyez qu'ici, je mélange un peu les genres, c'est-à-dire que le JavaScript est mélangé à l'HTML, vous savez qu'on aime pas trop ce genre de choses, c'est un petit peu comme en CSS, on préfère avoir le CSS bien séparé de l'HTML, eh bien c'est la même chose avec le JavaScript. En plus de cela, vous voyez que j'ai mis un « ; », à la fin, donc je pourrais avoir une deuxième, une troisième instruction là-derrière, mais vraiment, avez-vous envie d'écrire du JavaScript comme cela, avec plein d'instructions à la queue leu leu, au milieu de l'HTML ? Moi pas. Et puis, en plus, il y a un autre inconvénient à cette technique, c'est que je ne peux pas réutiliser ce code. Si je veux refaire la même chose quand je cliquerai, par exemple, sur un autre bouton, eh bien je serai obligé de réécrire ce code. Donc on va oublier ceci, c'est quelque chose que vous allez rencontrer de nombreuses fois, cela dit, dans l'école JavaScript que vous rencontrerez dans votre carrière de développeur. Mais, on va essayer, nous, de ne pas tenir compte de cette méthode qui mélange un peu les choses. Je vais vous montrer une seconde méthode, pour cela j'ai besoin d'un bloc « script », que je vais mettre ici, alors, gardez en tête, évidemment, que ce bloc « script » peut être dans un fichier externe. Je ne suis pas obligé de le mettre dans la page HTML, c'est juste pour les besoins de la démonstration, pour être concis. Alors, la première chose que je vais faire, c'est créer une variable, je vais l'appeler, par exemple : « myButton », et je vais la rendre égale à « document.getElementById », donc je vais aller rechercher un bouton qui est ici dans le DOM, et je vais stocker cet objet dans la variable « myButton ». Puis, je vais tout simplement faire : « myButton .onclick », voyez que je retrouve tous les événements dont on a parlé tout à l'heure, et je vais associer à cet événement « onclick », une fonction, rappelez-vous de la signature de ces fonctions, avec les parenthèses et les accolades. Une fonction qui va faire une petite chose toute simple, donc je vais remettre, ici, mon alerte, « Bonjour ! », et un « ; » à la fin. Alors, la fonction qui est ici, c'est ce qu'on appelle une fonction anonyme. Vous voyez qu'elle n'a pas de nom. Alors, rappelez-vous plus tôt, dans ce cours, quand on a créé des fonctions, pourquoi devait-on donner des noms aux fonctions ? Eh bien, c'était pour être capable de les appeler plus tard. C'est-à-dire, pour être capable de les exécuter. Or, ici, vous voyez que je dis au JavaScript, très clairement, à quel moment je veux que ma fonction s'exécute : au moment du clic sur le bouton. Donc, cette fonction n'a plus besoin d'être nommée, elle peut rester anonyme, comme ceci. Remarquez aussi le « ; » qui est ici, dans le fond, alors j'ai deux « ; », ici, un « ; » qui se trouve après « alert », pour arrêter l'instruction « alert », pour dire que cette instruction est terminée, et puis le « ; » qui est ici, eh bien, c'est pour terminer l'instruction « onclick ». Donc, c'est pour terminer cette phrase qui associe cette fonction à l’événement du clic du bouton. Alors, je sauvegarde mon script, je retourne dans mon navigateur, je rafraîchis ma page, je reclique sur mon bouton et vous voyez que cela fonctionne toujours très bien, donc cette alerte apparaît sur l'écran, simplement, j'ai associé, ici un petit bout de code JavaScript à mon événement, mais avec une solution de méthode beaucoup plus propre, puisque j'ai une séparation bien claire entre l'HTML et le JavaScript. Alors, la méthode suivante pour lier un événement de code qui va gérer cet événement, eh bien je vais garder l'objet « myButton » et je vais utiliser une autre méthode du DOM, qui s'appelle « addEventListener », donc je vais ajouter un écouteur d’événement. Rappelez-vous que des événements se produisent en permanence dans mon application JavaScript, eh bien je vais demander à l'application d'écouter, d'attendre qu'un événement particulier se produise, en l'occurrence, ici, le clic sur un bouton, et quand l'application entendra cet événement se produire, elle va réagir avec un code que je vais écrire maintenant. Alors, « addEventListener » prend trois paramètres, le premier c'est l’événement auquel je veux réagir, ici, dans une chaîne de caractères, remarquez que je passe cet événement dans une chaîne de caractères, c'est pour cela que j'ai besoin des guillemets, et que je n'ai plus besoin du « on », ici, j'écris « click » et non plus « onclick ». La deuxième partie, ici, de « addEventListener», le deuxième paramètre, c'est la fonction que je vais exécuter au moment de ce clic. Je vais écrire ma fonction, toujours anonyme, et cette fonction est une alerte, qui dit toujours et encore : « Bonjour !» Et puis, le troisième paramètre de « addEventListener » est « true » ou « false », donc c'est une valeur booléenne. Je vais mettre « false ». Alors, je ne vais pas m'attarder sur ce troisième élément, ici, la plupart du temps, ce sera « false », cela vous permettrait de faire des choses très avancées, au niveau de la gestion de vos événements, nous n'allons pas couvrir cela dans ce cours, donc, nous, on va partir du principe que ce sera « false » tout le temps. Je sauvegarde, je reviens sur ma page HTML, je la rafraîchis, je clique sur le bouton et vous voyez que pas page me dit toujours : « Bonjour », donc « addEventListener » a bien fait son travail. Alors, si je reviens dans mon code, ici, alors voyez que je veux rendre ceci un petit peu plus lisible, donc je vais sortir cette fonction, ici de « addEventListener », je vais lui donner un nom, donc elle ne sera plus anonyme je vais l'appeler, par exemple « display alert », et ma fonction va toujours se contenter de dire : « Bonjour ! », n'oublions pas le « ; » et ici, je vais tout simplement mettre le nom de ma fonction « displayAlert », comme second paramètre de « addEventListener ». Alors, je sauvegarde, je reviens sur ma page, je rafraîchis, et cela fonctionne toujours très bien, simplement j'ai, ici, un code qui est peut-être un petit peu plus lisible et facile à comprendre. Voilà donc trois techniques différentes qui vous permettent d'associer un bout de code JavaScript à un événement qui se produit. Dans la suite de ce chapitre, nous allons aller plus loin dans ces concepts et explorer davantage les événements du JavaScript.

L'essentiel de JavaScript

​Ajoutez des fonctionnalités interactives à vos pages web avec JavaScript. Découvrez la syntaxe, le DOM, l'utilisation des bibliothèques JavaScript populaires, etc.

Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :26 avr. 2016
Durée :5h09 (47 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !