L'essentiel de JavaScript

Comprendre onClick et onLoad

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous allez expérimenter les évènements onClick et onLoad. Il s'agit des deux évènements les plus utilisés en langage JavaScript.

Transcription

Les deux événements les plus courants auxquels on devra réagir sont les événements « onclick » et « onload ». Je vous propose de découvrir ces deux événements dans cette vidéo. Premièrement, on est habitué à devoir cliquer sur des liens, ou sur des boutons, mais, en JavaScript, on peut répondre au clic sur n'importe quel élément. J'ai une petite page web toute simple, en tout cas, le code HTML associé à cette page est très simple et ne devrait pas vous poser de problèmes. Remarquez qu'en fin de parcours, ici, juste avant la fermeture du « body », je charge un fichier JavaScript qui s'appelle « script.js » et qui se trouve ici. Alors, je vais dé-commenter les trois premières lignes de ce code, qu'est-ce que je fais dans ces trois premières lignes ? Eh bien, j'associe à l’événement « onclick » de l'objet « document » une fonction anonyme qui envoie une alerte à l'écran qui me dit que j'ai cliqué dans le document. Alors, je sauvegarde, je reviens dans mon navigateur, je rafraîchis ma page, et je vais aller cliquer dans mon document. Par exemple, sur le mot « mission » qui est ici. Si je clique ici, eh bien vous voyez que mon alerte apparaît sur l'écran, je clique sur le titre « Qui sommes-nous ? », mon alerte apparaît également. Un paragraphe ? Cela fait partie du document, donc j'ai cliqué dans le document, une image ? C'est également dans le document, rebelote, j'ai mon alerte qui apparaît, dans le vide, autour de la page, dans la zone bleue, ici, c'est également dans le document, donc j'ai mon alerte qui apparaît également. Vous voyez, ici, que je ne suis pas obligé de cliquer sur des liens ou sur des boutons, n'importe quel élément de ma page supporte cet événement « click », et si je le désire, je peux réagir à cet événement. Alors, je vais retourner dans mon JavaScript, je vais dé-commenter quelques lignes de code supplémentaires, tout d'abord, ici, en ligne 7, voyez que je crée une variable qui s'appelle « myImage », et je stocke, dans cette variable, l'élément de l'HTML qui porte l'identifiant « mainImage » je vais vous montrer cet élément tout de suite, il se trouve ici, au-dessus, le voici, « id=mainImage », et il s'agit, en réalité, de cette grande image carrée, qui est ici, avec la plage, la mer et la montagne, je reviens dans mon JavaScript, qu'est-ce que je fais, avec cet objet image ? Eh bien, j'associe à l’événement « onclick » de cette image, une autre fonction anonyme qui envoie une autre alerte à l'écran, qui me dit, maintenant, que j'ai cliqué sur l'image. Or, ça donne quoi, dans le navigateur. Je rafraîchis, si je clique sur mon image, j'ai une première alerte qui apparaît, qui me dit que j'ai cliqué sur l'image. Oui, mais l'image est également intégrée au document, donc, quand je clique sur OK, j'ai une deuxième alerte qui apparaît et qui me dit que j'ai cliqué, également, dans le document. Par contre, si je clique à l'extérieur de l'image, là, je n'ai cliqué que dans le document, donc je n'ai que cette première alerte, ici, qui apparaît. Je vais revenir dans mon code HTML. Rappelez-vous que le fichier, pour le moment, je le charge, ici, en fin de parcours, juste avant la fermeture du body. Rappelez-vous qu'il s'agit d'une meilleure pratique. Cela me permet d'être certain que le navigateur à déjà lu tout ce qui était avant, dans le code, et a donc déjà pris connaissance de tous les éléments de l'HTML qui précèdent, et a donc déjà connaissance de tous les éléments du DOM, avec lesquels j'aurais envie de travailler, ici, avec ce JavaScript. Mais, cela ne me garantit pas pour autant que cette page est complètement prête. En effet, cette page a besoin de ressources supplémentaires. Elle a besoin de fichiers CSS, d'images et peut-être même de son, de vidéo, etc., bref, je ne suis pas certain que le navigateur à déjà récupéré toutes ces ressources additionnelles du serveur au moment où cette ligne 83 est exécutée, et donc, au moment où mon JavaScript est chargé dans la mémoire de l'ordinateur et cela peut me poser certains problèmes. Alors, pour simuler les problèmes que cela peut poser, eh bien je vais déplacer cette balise « script », ici, dans le « head » de ma page, je vais sauvegarder, revenir sur ma page HTML, avant de faire mon expérience, ne pas oublier de commenter ce petit code, sinon je vais avoir un problème. Mais, je n'ai plus besoin de ces clics sur le document, donc je n'ai plus que le clic sur mon image. Je sauvegarde, je reviens sur ma page HTML, je rafraîchis, et maintenant, quand je clique sur mon image, vous voyez que rien ne se passe. Pourquoi ? Parce que, au moment où cette ligne 7 de mon JavaScript est exécutée, au moment où je vais rechercher l'élément qui s'appelle « mainImage », eh bien, je suis à cet endroit-ci, ligne 7 de mon code HTML, et donc, l'image, dessinée ici en ligne 27 du code HTML, eh bien, elle n'est, tout simplement, pas encore présente dans la mémoire de l'ordinateur. Que puis-je faire pour y remédier ? Je vais demander au JavaScript d'attendre que la page soit prête avant d'exécuter ce code. Pour cela, je vais me servir de l’événement « onload » de l'objet « window », que vous voyez ici. Alors, l'objet « window », on n'en a pas encore parlé du tout, dans ce cours, c'est l'objet le plus élevé, dans le JavaScript. Cela représente la fenêtre de votre navigateur, à l'intérieur de laquelle le document est chargé. Donc l'objet « document » fait lui-même partie de cet objet « window ». C'est vraiment ce qu'on appelle, en anglais, le « top level object ». C'est l'objet qui est tout au-dessus de la hiérarchie. Et donc, l’événement « onload », ici, de cet objet « window », il est déclenché quand la fenêtre est prête, quand la fenêtre est chargée et quand la fenêtre est chargée, je vais exécuter une fonction, alors, avant de vous montrer ce qu'elle va faire, je vais d'abord prendre le code, ici, et le mettre lui-même dans une fonction qui ne sera pas anonyme, elle s'appellera « prepareEventHandlers », préparer les gestionnaires d’événements, donc, j'ai besoin d'une accolade qui s'ouvre. Que va faire cette fonction ? Elle va aller rechercher mon image dans le DOM, et puis, elle va associer à l’événement « click » de cette image, la fonction qui envoie une alerte à l'écran. Et puis, la fonction « prepareEventHandlers » est terminée. A quel moment est-ce que je veux exécuter cette fonction « prepareEventHandlers » ? Eh bien, quand la page est prête, c'est-à-dire, au moment de l’événement « window.onload ». C'est à ce moment-là que je vais appeler la fonction « prepareEventHandlers » qui va associer, à l’événement « click » de mon image, ma fonction anonyme, puisque maintenant que la page est prête, mon image existe dans la mémoire de l'ordinateur. Donc, je vais revenir sur ma page, ici, rafraîchir ma page, cliquer sur mon image et vous voyez que cela fonctionne de nouveau, malgré le fait que mon script est chargé dans la section « head » du code HTML, grâce à l’événement « window.onload », j'ai pu attendre que la page soit complètement chargée et disponible avant d'associer cet événement « click » à l'image. Voilà deux événements très courants en JavaScript, l’événement « click » et l’événement « onload », des événements auxquels on aura de nouveau affaire dans la suite de ce cours, bien sûr.

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
Date de parution :26 avr. 2016

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 !