Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de JavaScript

Exploiter les timers

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Partez à la découverte des méthodes setTimeout() et setInterval(). Elles vont vous permettre de créer un diaporama simple.

Transcription

Dans cette vidéo, nous allons découvrir les « timers ». Alors, les « timers » ne sont pas, à proprement parler, des événements. Mais ils vont également vous permettre de gérer le moment où des fonctions JavaScript se déclenchent. Je vais me rendre dans le JavaScript qui est associé à la page que vous avez devant les yeux pour vous montrer qu'il y a, ici, une toute simple petite fonction, qui est définie, qui s'appelle « simpleMessage », et voyez qu'elle ne fait qu'une seule petite chose, elle envoie une alerte à l'écran. Alors, j'ai envie que cette alerte apparaisse à l'écran cinq secondes après le chargement de la page. Alors, pour cela, je vais utiliser un premier « timer » qui est la méthode « setTimeOut » du JavaScript. Alors, cette méthode va prendre deux paramètres, le premier paramètre, c'est la fonction que je désire déclencher, dans ce cas-ci, ce sera la fonction « simpleMessage », et le deuxième paramètre c'est le délai après lequel je veux déclencher cette fonction, un délai qui est exprimé en millisecondes, donc cinq secondes, cela fait, bel est bien, 5 000 millisecondes. Je sauvegarde, je retourne dans mon navigateur, je rafraîchis, et, au bout de cinq secondes, si tout se passe bien, mon alerte devrait apparaître, à l'écran, la voici, « Je suis une simple alerte », j'appuie sur OK, et voilà, c'est terminé. Je reviens dans mon JavaScript, vous avez vu que grâce à « setTimeOut », j'ai pu différer l'exécution d'une fonction de cinq secondes, mais la fonction en question ne s'exécute qu'une seule fois. C'est la différence entre setTimeOut et le second « timer » dont je vais vous parler maintenant, qui est la fonction « setInterval », du JavaScript. Alors, « setInterval » va me permettre de répéter une opération, tous les x temps. Je vais d'abord commenter, « setTimeOut », je n'en ai plus besoin pour cette vidéo, et vous montrer ce qu'il se passe dans le reste du code. Ici, je crée une variable qui s'appelle « myImage ». Cette variable va contenir un élément du DOM, que je vais rechercher par « getElementById », c'est l'élément « mainImage ». Alors, dans l'HTML, ce « mainImage » est une image qui se trouve ici, mais je vous rappelle qu'en HTML, c'est l'attribut SRC dont on se sert pour spécifier quelle image on veut afficher à ce moment-là. Gros avantage à utiliser Brackets, ici, quand je passe ma souris sur un chemin, comme cela, Brackets me montre l'image en question. Vous voyez que c'est l'image de la plage avec la mer et les montagnes. Alors, je vais retourner dans mon JavaScript pour vous montrer une deuxième variable que je crée, qui s'appelle « imageArray », alors, c'est une « array », on le repère facilement grâce aux crochets qui s'ouvrent, ici, et aux crochets qui se ferment à la fin. Cette « array », elle contient six éléments numérotés de 0 à 5. Alors, ces six éléments sont des adresses d'images. Quand je passe ma souris, dans Brackets, je vois ces images, donc, vous voyez, j'ai six images, ici, définies dans mon array, des images stockées dans le dossier Images qui se trouve associé à cette page HTML. Ensuite, je crée une troisième variable, qui s'appelle imageIndex et qui est initialisée, ici, à 0. Alors, tout va se passer dans cette fonction. Cette fonction s'appelle « changeImage ». Elle va rechercher l'élément «myImage», qui est l'image que je crée en ligne dix, et je vais utiliser la méthode « setAttribute », dont on a déjà parlé, plus tôt dans ce cours, pour aller changer la valeur de l'attribut SRC de mon image, et le rendre égal à quelque chose que je vais retrouver dans « imageArray ». Alors, quelle autre chose ? Eh bien, vous voyez, ici, « imageIndex », pour l'instant égal à 0. Donc, ce que je sélectionne, ici, sera « imageArray », avec 0 entre crochets. C'est-à-dire que je vais rechercher le premier élément, l'index 0, de mon « array ». Voilà, je vais rendre l'attribut SRC de mon image égal à l'image que vous voyez pour le moment à l'écran, donc une autre image va apparaître sur l'écran. Ensuite, je vais faire « imageIndex++ ». Alors, « ++ », rappelez-vous, c'est l'opérateur d'incrémentation. Donc, la variable « imageIndex » n'est plus égale à 0 mais à 1, j'ajoute 1, j'incrémente cette variable. Ensuite, je vérifie si « imageIndex » est plus grand ou égal à la longueur de l'« array », l'« array » a une longueur de six éléments, ce n'est pas le cas, donc la fonction est finie. Elle est finie, mais je vais la rappeler cinq secondes plus tard et, dans ce contexte-là, la deuxième fois que je la rappelle, « imageIndex » est maintenant égal à 1. Donc, je vais aller rechercher « imageArray » de 1, entre crochets, c'est-à-dire maintenant le deuxième élément de cette array, avec les tonneaux en avant-plan, et je vais rendre l'attribut SRC de mon image égal à cette image-ci, donc l'image va, de nouveau, changer sur la page web, et puis, « imageIndex++ », de nouveau, donc ne sera plus égal à 1, mais va être incrémenté de 1, il sera égal à 2. Et ainsi de suite. Alors, au bout d'un moment, « imageIndex » sera égal à six. C'est-à-dire sera égal à la longueur de l'« array ». À ce moment-là, la ligne de code 20 va s’exécuter, ici, pour remettre « imageIndex » à 0, et donc je recommencerai le cycle une deuxième fois. Pour démarrer cette mécanique, j'ai besoin du deuxième « timer » en JavaScript, ligne 25, c'est « setInterval », qui fonctionne très exactement comme « setTimeOut », c'est-à-dire je vais lui passer deux paramètres. Le premier est la fonction que je désire répéter et le deuxième est le délai, tous les combien de temps ? Toutes les 5 000 millisecondes, ici, je vais exécuter « changeImage ». Allons voir comment ça marche. Je sauvegarde, je retourne sur mon navigateur, je rafraîchis, et l'horloge est en route, toutes les cinq secondes, maintenant, je vais avoir une nouvelle image qui va apparaître, trois, quatre, cinq, nouvelle image, avec les tonneaux en avant-plan, etc. J'ai mes deux « timers », « setTimeOut » et « setInterval », mais le JavaScript me donne également deux autres méthodes qui sont les méthodes inverses, qui sont : « clearTimeOut » et « clearInterval ». Alors, pour utiliser cela, il faut savoir que « setInterval » me renvoie une valeur. « setTimeOut » aussi, d'ailleurs. Eh bien, ici, je vais stocker la valeur que me renvoie « setInterval » dans une variable, que je vais appeler, par exemple, « imageInterval », comme ceci, et maintenant que j'ai stocké « setInterval », ici, dans une variable, je vais pouvoir effacer « setInterval », en utilisant « clearInterval » quand un événement se produit. Donc, je vais, de nouveau, aller rechercher mon élément « myImage », qui est ici, rappelez-vous, l'élément que je crée en ligne 10, et je vais m'adresser à l'événement « onmouse », regardez, il y en a plein, « onmousedown », « onmousemove », « onmouseout»... Celui qui m'intéresse, c'est « onmouseover ». C'est-à-dire, quand la souris arrive au-dessus de l'image. Alors, « onmouseover », qu'est-ce que je vais faire ? Eh bien, je vais déclencher une fonction anonyme dont voici la signature, et cette fonction anonyme, elle va faire un « clearInterval », et, comme paramètres du « clearInterval », je vais passer la variable qui contient l'intervalle que je désire effacer. Je vais également faire un deuxième gestionnaire d'événements, ici, plus bas, pour, de nouveau, « myImage », cette fois-ci, je vais prendre l’événement « onmouseout », c'est-à-dire quand je retire ma souris de mon image, je vais déclencher une autre fonction anonyme dont voici la signature. Et, cette autre fonction anonyme va, tout simplement, remettre « setInterval » en place. Remarquez que je n'utilise pas le mot clé « var », d'abord parce que la variable existe déjà, et puis rappelez-vous que quand j'utilise « var » à l'intérieur d'une fonction, eh bien la variable n'est visible que dans cette fonction-là. Or, ici, je vais avoir besoin de cette variable dans une autre fonction donc j'ai envie qu'elle soit globale et non pas locale à la fonction, c'est pour ça que je ne mets pas « var ». Voyons comment cela fonctionne, je sauvegarde, je reviens dans mon navigateur, je rafraîchis, toutes les cinq secondes, mon image devrait changer, et puis, vous allez voir que quand je place ma souris sur cette image, l'intervalle va être arrêtée. Deux, trois, quatre, cinq, six, sept, huit. Plus rien ne se passe. L'intervalle est arrêtée parce que j'ai mis ma souris sur cette image. Alors, je vais la retirer, je remets l'intervalle en place et toutes les cinq secondes, mon image va de nouveau changer. Voilà, c'est reparti pour un tour, la mécanique est, de nouveau, en route. Donc je vais retourner dans mon JavaScript pour vous montrer ce que l'on a fait dans cette vidéo. On a parlé des deux « timers » : « setTimeOut » et « setInterval », on a également parlé de leurs méthodes jumelles : « clearTimeOut » et « clearInterval », et puis, on en a profité pour voir deux événements supplémentaires, « onmouseover » quand je mets ma souris sur un élément et « onmouseout », quand je retire ma souris d'un élément.

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 !