Javascript (6) - Objet window

Bonjour à tous et bienvenue dans cette nouvelle leçon de JavaScript. Aujourd'hui, nous allons découvrir l'objet window. Dans la dernière vidéo consacrée à l'objet formulaire, nous avons vu que pour appeler celui-ci, il faut d'abord traverser l'objet document qui est son parent direct. Et l'objet document, lui aussi, possède un parent qui est l'objet window. Mais nous avons vu qu'il n'est pas toujours nécessaire de déclarer l'objet window car le navigateur est conscient de sa présence d'une manière implicite. Donc, l'objet window est pratiquement le parent de chaque objet qui constitue une page web. Mais lui aussi dispose de ses propres méthodes dont nous allons découvrir aujourd'hui les plus importantes. Considérons le code HTML suivant: nous allons déclarer un bouton qui permet de déclencher le JavaScript comme ceci: Nous avons ajouté onclick qui est l'événement qui va appeler la fonction f que nous n'avons pas encore déclarée. Donc maintenant ici on va intégrer le code JavaScript et la fonction f. Dans un premier temps, nous allons appeler la première méthode qui constitue l'objet window qui est la méthode alert. Jusqu'ici nous avons eu l'occasion d'utiliser cette méthode juste pour afficher des messages, mais en fait son rôle est un peu différent. Donc maintenant on va appeler directement la méthode alert et on va afficher Bonjour. C'est-à-dire que quand j'exécute, la fonction f sera appelée, celle-ci va tout simplement afficher le message Bonjour. Mais en fait alert est une méthode de l'objet window, c'est-à-dire que la syntaxe correcte ça devrait être comme ceci: window.alert Bonjour. Mais comme j'ai dit à la dernière vidéo, bon, pas la peine de déclarer l'objet window parce que le navigateur, il sait déjà qu'il est là. Maintenant, j'exécute le code pour voir le résultat. Donc ce que j'ai là, c'est tout simplement la boîte de dialogue conventionnelle alert qui affiche le message. Mais en réalité, le rôle de alert, ce n'est pas vraiment afficher le message, mais c'est surtout bloquer le navigateur. C'est-à-dire, imaginez que vous avez un autre code à exécuter par la suite. Aucun code ne sera exécuté tant que le client n'a pas libéré le navigateur en cliquant sur le bouton OK. Alors, le rôle de la boîte de dialogue alerte, c'est tout d'abord figer ou bien bloquer le navigateur en affichant un message. L'utilisateur doit cliquer sur OK afin de libérer le navigateur pour que l'exécution du code suivant se poursuive. Mais il n'y a pas que la méthode alerte, il y a aussi la méthode confirm. Bon, maintenant si je mets confirm, bon, même chose, c'est window.confirm. Dans ce cas, on affichera un message du genre, par exemple, voulez-vous Continuez. Bon, c'est une question, ça veut dire qu'on imagine que cette boîte va afficher maintenant 2 boutons. Bon, un pour confirmer le choix et l'autre pour annuler. Dans ce cas, quand j'actualise et que je clique sur JavaScript, j'ai maintenant une boîte qui ressemble tellement à la boîte alerte mais qui dispose cette fois de 2 boutons, un OK et l'autre annuler. Bon, maintenant cette boîte confirme, il va retourner un résultat booléen. Si vous cliquez sur OK, il retourne true, sinon il retourne false. Bon, pour mieux vérifier ceci, on va mettre ici par exemple if, voilà, if confirm, bon, ça veut dire si ça retourne true, on va mettre alerte, bon, vous avez accepté, else, vous avez refusé. Voilà, maintenant on imagine que si on clique sur le bouton OK, alors la boîte confirme retourne true, et dans ce cas on affiche le message vous avez accepté, sinon on affiche vous avez refusé. On refait le test, je clique, bon maintenant si je clique sur OK ça m'affiche vous avez accepté, et si je clique sur annuler ça m'affiche vous avez refusé. Alors vous avez constaté que confirme il retourne un résultat booléen et Il reste maintenant une dernière boîte, c'est la boîte plant. Comme ça, on va mettre par exemple ici saisissez votre nom s'il vous plaît. Et là on va mettre par exemple le nom. Vous avez remarqué qu'il y a 2 arguments que j'ai passés à la méthode plant. Bon d'ailleurs plant elle aussi elle appartient à l'objet window. Les 2 arguments sont des chaînes de caractères. Bon maintenant j'exécute pour voir à quoi ça va ressembler. Quand je clique, j'ai ici une boîte de dialogue qui ressemble à alerte et confirme, mais cette fois il dispose d'une zone de texte, une zone de saisie. Vous avez ici le message qui constitue le premier argument qui est saisissez votre nom s'il vous plaît, comme ça. Et le deuxième argument, c'est le texte par défaut que je peux remplacer d'ailleurs. Donc maintenant, si je mets un texte ici, que je clique sur OK, ce que je vais retourner, c'est la valeur du texte. Alors là, bon, pour récupérer cette valeur, je vais mettre par exemple alerte. Autrement dit, je vais afficher le résultat de retour de la boîte prompt. Bon, maintenant j'actualise. Donc quand je clique, je mettrai ici par exemple, voilà, mon nom. Maintenant quand je mets OK, bon, ça m'affiche mon nom. C'est tout simplement le texte que vous avez saisi. Bon, et si vous cliquez sur Annuler, bon, ça retourne null. Bon, ça veut dire vous n'avez rien donc mis en tant que valeur, et du coup JavaScript retourne automatiquement la valeur null. Donc ça, c'est ce qui concerne les boîtes de dialogue qui appartiennent à l'objet window. Bon, pour récapituler, donc il y a la boîte alert qui permet de figer navigateur et afficher un message. Il y a aussi la boîte confirm qui fige elle aussi le navigateur mais vous propose maintenant le choix, ça veut dire soit vous acceptez ou bien vous refusez. Et prompt, elle aussi va bloquer navigateur momentanément en attendant que vous écriviez un message et que vous poursuiviez l'exécution en cliquant sur l'un des deux boutons proposés. Donc maintenant on va voir une méthode qui est très célèbre en JavaScript, c'est ce qu'on appelle la méthode du temporisateur. Autrement dit, imaginez que vous voulez exécuter un code mais vous voulez quand même retarder cette exécution quelques secondes. Dans ce cas, on va tout simplement exécuter le code souhaité à travers la méthode setTimeout qui appartient à l'objet window. Pour mieux comprendre le principe, ici nous avons une fonction f qui va afficher un message bonjour. Quand je clique sur le bouton, bon, ça va appeler directement la fonction f. Mais au lieu d'appeler la fonction f, j'ai appelé une fonction qui s'appelle g, que je déclare ici. Donc maintenant, la fonction g, bon, si je fais ça, bon, ça veut dire c'est comme si j'appelle directement la fonction f. Bon, g va appeler f à son tour, et voilà, donc c'est comme si j'ai rien fait. Par contre, ce que je vais faire ici, c'est appeler f avec un retard grâce à la méthode setTimeout. SetTimeout. Vérifiez bien la syntaxe s'il vous plaît parce que JavaScript est très sensible à la casse. Donc là avec un T majuscule. Donc setTimeout possède 2 arguments. Le premier argument, c'est la fonction à appeler, donc la fonction souhaitée. Dans ce cas c'est f. Alors la fonction f sera appelée après un délai. Par exemple on va mettre 2000 millisecondes. Donc l'unité par défaut c'est millisecondes, donc ça, ça fait 2 secondes. Vous avez remarqué que j'ai déclaré la fonction f entre les doubles quotes. Vous n'êtes pas obligé de faire ça, mais il est préférable de mettre les doubles quotes comme étant une chaîne de caractères. Maintenant, quand j'exécute, c'est-à-dire quand je clique sur le bouton, j'appelle la fonction g. La fonction g va appeler la fonction f, mais après l'expiration des 2 secondes à travers la méthode setTimeout qui appartient aussi à l'objet window. Maintenant, j'exécute le code, je clique, il se passe rien, mais après 2 secondes j'aurai le message qui s'affiche. Voilà, donc il existe aussi la méthode clearTimeout. clearTimeout possède un argument, donc l'argument c'est rien d'autre que l'identifiant du temporisateur qui a été actionné. Bon, imaginez que de setTimeout qui est là, il m'a retourné l'identifiant T. Bon, maintenant je veux arrêter ce compteur, il suffit de mettre clearTimeout avec un T majuscule. Dans ce cas, ça va arrêter le compteur Mais quand est-ce que clearTimeout sera utile? C'est avant l'expiration des 2 secondes, c'est-à-dire si les 2 secondes se sont écoulées, dans ce cas clearTimeout ne sert vraiment à rien parce que déjà le temporisateur il a expiré. Mais si avant l'expiration des 2 secondes vous avez appelé la méthode clearTimeout en lui passant comme argument l'identifiant du temporisateur souhaité, dans ce cas le temporisateur sera systématiquement annulé et du coup donc la fonction f ne sera jamais exécutée. Bon, Pour mieux comprendre ceci, on va faire un exemple d'affichage d'un compteur à rebours, ce qu'on appelle un décompteur. Pour faire ça, bon, maintenant je vais éliminer ce code. Ici, je mettrai une zone de texte comme ça. Donc là, c'est une zone de texte qui a le nom CPT. Donc maintenant, au chargement de la page, je vais décrémenter une valeur qui est stockée dans cette zone de texte jusqu'à ce qu'elle atteigne la valeur 0. Donc Donc là je vais mettre onload, ça veut dire au chargement de la page, une fonction que je vais appeler f tout court. Voilà, fonction f que je vais déclarer ici comme ça. Maintenant la fonction f, ce qu'elle va faire, c'est afficher dans cette zone de texte une valeur numérique. Bon, je considère que la valeur initiale c'est 10. Bon, je vais déclarer une variable i avec la valeur 10. Vous avez imaginé que i est une variable globale, c'est-à-dire qu'elle sera reconnue aussi à l'intérieur de la fonction f. Mais avant, il faut pas oublier de déclarer l'objet formulaire. Pour assurer la hiérarchie, donc form name fo comme ça. Donc maintenant pour accéder à l'objet cpt, donc le nom complet sera document fo cpt. La fonction f maintenant il va écrire dans ce cpt la valeur de i grâce à document fo cpt point value égal à i. Maintenant quand j'actualise la page, la fonction f sera appelée, il affichera la valeur de i dans la zone de texte comme ça. Donc maintenant j'ai la valeur 10. Je vais agrandir un petit peu pour voir ça. Voilà. Maintenant ce que je vais faire c'est décrémenter i à chaque fois. Par exemple i--, ça veut dire que je décrémente i. Mais je voudrais quand même afficher la nouvelle valeur de i, ça veut dire il faut rappeler la fonction f, ce qui fait de f une fonction récursive. Bon, si j'appelle la fonction f comme ça, ça veut dire qu'il va se rappeler immédiatement et du coup on verra pas vraiment le changement de i, c'est-à-dire qu'il changera tellement vite comme dans une structure itérative, la boucle for par exemple, et du coup on verra pas vraiment l'effet du décompteur. Alors là, je vais appeler la fonction f à travers le temporisateur setTimeout comme ça. Le délai sera par exemple 1000 millisecondes, c'est-à-dire une seconde. Bon, maintenant le premier appel de la fonction est exécuté au chargement de la page. Le prochain appel sera effectué automatiquement depuis l'intérieur de la fonction puisque c'est une fonction récursive, mais après une seconde. En même temps, on affiche la valeur de i et on décrémente i de 1. Maintenant, on va voir ce que ça donne. Là, vous avez vu que la valeur se décrémente automatiquement. Voilà, donc ça descend, mais ça s'arrêtera jamais. Ça veut dire qu'il peut même passer au-dessous du 0 en donnant des valeurs négatives comme ça. Ce qu'on va faire maintenant, c'est juste établir une condition pour ne pas passer au-dessus de 0. Par exemple, if i est supérieur à 0, alors je décrémente i, c'est tout. Maintenant la condition est vraie. Donc voilà, maintenant ça se décrémente et quand il atteint 0, il s'arrête parce que la condition n'est pas vraie. Mais il faut noter une chose, c'est que même si la condition n'est pas vraie, la fonction f s'exécute toujours parce que c'est une fonction qui est récursive. Et du coup, c'est vrai qu'on voit pas l'effet de la fonction sur le navigateur, mais normalement il tourne toujours. Et si vous avez d'autres codes JavaScript à exécuter, vous imaginez que ça va un petit peu alourdir le navigateur, c'est-à-dire ça va mettre le navigateur en rude épreuve. La solution, c'est quoi? C'est qu'une fois on n'a plus besoin de la fonction f, on doit arrêter le temporisateur et on sort de la fonction. On met par exemple ici t= et là on mettra else, ça veut dire si la condition n'est plus vraie. Dans ce cas, j'arrête le compteur, donc clear. Timeout t. Donc là j'arrête le compteur t, ça veut dire il n'y a plus aucun appel à la fonction f et ça sera tout. J'exécute maintenant pour voir l'effet. Voilà, on arrête à 0, mais cette fois-ci le compteur ne s'exécute plus, c'est-à-dire qu'il n'y a plus aucun appel à la fonction f et Et du coup, navigateur maintenant il est libéré. Bon, on peut par exemple mettre des valeurs qui sont grandes. Par exemple, mettre ici la valeur 1000. On va accélérer le compteur, mettre 20 millisecondes pour voir l'effet. J'exécute. Bon, ça donne maintenant des valeurs qui changent tellement vite. Et quand on aura atteint la valeur 0, on s'arrête. Et voilà, donc l'effet c'est pratiquement le même avec des valeurs qui sont différentes. Bon, notez que cette méthode setTimeout est très sollicitée en JavaScript parce que ça permet de créer principalement des fonctions récursives que l'on peut appeler avec un retard. Et avec ça, on peut créer des animations, bien des effets d'interactivité évoluée. Merci pour votre attention et à la vidéo prochaine.