Projet JavaScript pour les nuls : vérificateur d'anagrammes

1. Introduction du vérificateur d'anagrammes: Il s'agit du deuxième projet que nous allons construire en JavaScript, et ce projet concerne le vérificateur d'anagrammes. Les concepts que nous allons implémenter dans ces projets sont la manipulation de Dom, traitement de chaînes sur lequel nous pouvons explorer les différentes méthodes de chaînes de caractères, puis nous allons utiliser Event Et dans le dernier cas, nous allons utiliser le stockage local du navigateur sur lequel nous allons apprendre comment stocker et obtenir les données à partir du stockage local du navigateur ? 2. Vérificateur d'anagramme de création d'un vérificateur: Ce projet concerne le vérificateur d'anagrammes, et si vous ne le savez pas, ce qu' est l'anagramme, c'est Les anagrammes sont donc simplement les mots, les phrases ou les phrases qui ont les mêmes caractères à la même fréquence, mais dans un ordre différent OK ? Et pour donner l'exemple simple que nous pouvons avoir ici, nous avons deux mots : écouter et se taire Donc, si vous observez ces deux mots, nous avons les mêmes caractères ici et à la même fréquence. OK ? Mais l'ordre est en fait différent. C'est donc en fait l'anagramme. Ce que nous faisons dans le cadre de notre projet est donc assez simple. Nous allons ajouter deux mots ici, et vous pouvez également écrire des phrases ou des phrases , comme vous le souhaitez. Je vais donc écrire, disons, en silence ici. Et dans le second mot, j' utiliserai Listen. Et lorsque je clique sur le bouton ici, il vérifie essentiellement si ces deux mots sont anagrammes ou non Donc, si je clique simplement sur le bouton de vérification, vous pouvez voir ici que ces deux mots sont des anagrammes Mais si je pars ici avec quelque chose de différent, donc si je peux écrire Kate et si j' écris simplement chien ici et que je clique sur notre bouton, maintenant tu peux voir ici que nos mots ne sont pas des anagrammes C'est bon. Et nous avons également certaines conditions dans notre programme. Si je ne parviens pas à ajouter une entrée ici, cela me donnera essentiellement une sorte de message ici, d'accord ? Et si je supprime également le deuxième mot, cela nous donnera également un avertissement différent ici. Vous pouvez donc le voir ici. C'est ainsi que fonctionne notre projet. Il y a donc une chose que nous n'avons pas vue dans notre projet, c'est en fait le modèle. Ainsi, chaque fois que vous visitez le site Web pour la première fois, vous pourrez voir la définition de l'anagramme sur ce modèle Mais pour le moment, comme j'ai déjà visité notre site Web ici, c'est pourquoi même si je reformule la page, vous ne pourrez voir aucun modèle ici Mais si je vais inspecter et si je vais dans l' entrepôt, et ici, je vais entrer dans le stockage local, vous pourrez voir la propriété qui est visitée et dont la valeur est vraie. OK ? Donc, en gros, chaque fois que vous visitez le site pour la première fois, cette propriété et cette valeur seront ajoutées. Et après cela, vous ne pourrez plus voir ce modèle. Donc, si je supprime cette valeur d'ici, la seconde est parfaite. Et si je divulgue cela et si je reformule simplement la page maintenant, vous pourrez voir ici une sorte de message de bienvenue que nous avons à propos de notre projet OK ? Donc, si je clique simplement sur le bouton « Get here », vous pourrez maintenant voir notre projet. C'était donc une démonstration de notre projet, et maintenant nous allons entrer dans notre éditeur de code et commencer à le construire, d'accord ? Dans notre projet, comme vous pouvez le voir ici, j'ai déjà écrit notre code eSTIML ainsi que notre CSS OK. Alors maintenant, tout d'abord, je vais vous expliquer ce que contient notre structure estimale, car c'est important Donc, dans l'estimation, la structure est assez simple. Nous avons ici les deux entrées pour le premier mot et le second mode que nous avons vus dans l'aperçu, puis nous avons notre bouton, qui est vérifier l'anagramme Ensuite, nous avons la structure de notre modèle ici. OK ? Par défaut, la structure du modèle est donc invisible. Mais chaque fois que nous le visiterons pour la première fois, nous pourrons le voir sur la première face. OK ? C'est bon. Maintenant, ce que je dois faire ici, je vais simplement faire un clic droit ici et cliquer sur le serveur Open with Life. Et maintenant, vous ne pourrez voir que notre structure estimative. Nous avons donc les deux entrées ici, comme vous pouvez le voir ici et le bouton, puis nous avons notre structure de modèle ici. OK ? Très bien, nous allons maintenant revenir à notre code VS. Et ici, j'aurais besoin de lier mon CSS, ce que j'ai déjà fait, mais je dois le décommenter à partir d'ici Décommentez ceci et cliquez à nouveau sur Enregistrer Nous allons maintenant revenir à notre projet, et maintenant vous pourrez voir notre projet ici Donc, pour le moment, nous n'avons que la partie eSTIML et la partie CSS, et nous allons maintenant commencer à écrire notre partie Javascript Nous savons donc que nos projets sont uniquement axés sur le JavaScript. C'est pourquoi j'ai déjà ajouté du code Stimul et CSS ici OK. Maintenant, nous allons revenir à notre navigateur. Et maintenant, nous allons entrer dans le dessin Excel ici. Et quels sont les principaux concepts que nous allons apprendre dans le cadre de ce projet ? La première est donc la manipulation du dôme. Nous connaissons donc déjà get element by ID et le contenu du texte, comme nous l'avons abordé dans notre premier projet, qui était en fait le calculateur d'âge. Mais nous avons toujours la propriété d'affichage des points de style que nous pouvons explorer dans ce projet. Et la principale chose que nous devons explorer ici est le traitement des chaînes. Donc, dans le traitement des chaînes, nous allons essentiellement couvrir les différentes méthodes que nous avons sur nos chaînes. Nous pouvons également explorer la gestion des événements. Enfin, nous aborderons également la persistance de l'état avec le stockage local. le moment, je vais vous donner la définition rapide de ces méthodes de chaîne ici. La première que nous avons est donc la méthode de découpage. La méthode de découpage supprime donc essentiellement les espaces blancs aux deux extrémités d'une ficelle , par exemple entre l'avant et le bacon. Et après cela, nous avons la méthode des minuscules, qui convertit simplement tous les caractères d'une chaîne en Ensuite, nous avons la méthode de remplacement. Cela nous aidera en fait à trouver un modèle dans notre chaîne, et il fera le remplacement là-bas. Et après cela, nous avons la méthode du split. Quelle est donc la fonction de la méthode du split ? En gros, il convertira notre chaîne en tableaux de l'élément que nous avons dans notre chaîne par ordre croissant, et après cela, nous aurons la méthode join Ainsi, la méthode conjointe prendrait en fait tous les éléments que nous avons dans le tableau dans une seule chaîne. OK ? Voici donc les définitions des méthodes que nous utiliserons dans notre projet. Maintenant, une chose que nous devons faire avant d'entrer dans notre code, parcourir la documentation étape par étape que nous avons construite. Tout comme notre premier projet. Donc, en gros, dans notre documentation, la première chose que nous avons faite est d'ajouter l' objectif de ce code, puis nous allons écrire notre structure estimale, puis le style CSS déjà créé, puis le code JavaScript Donc, dans le code JavaScript, je l'ai divisé en plusieurs étapes différentes. La première étape serait de sélectionner les éléments d'estimation à l'aide de JavaScript, puis nous définirons notre fonction, puis nous devrons ajouter notre écouteur d' événements au bouton, puis nous aurons la logique du modèle Ensuite, nous allons exécuter notre vérification du modèle lors du chargement de la page. Ce sont donc les choses que nous devons faire dans le cadre de notre projet. Et j'ajouterai également cette documentation dans les ressources de notre projet. C'est bon. Alors maintenant, passons simplement à notre code VS et nous devons créer un fichier JavaScript ici qui sera MindTJS D'accord, alors maintenant je dois zoomer Parfait. Donc, la première chose à faire est d'accéder aux éléments requis, nous allons donc noter les éléments aces. Je dois donc retourner dans notre fichier d'estimation et voir quels sont les éléments dont j' aurais besoin dans mon Javascript. J'aurais donc besoin de ces deux entrées. Nous allons donc avoir les informations nécessaires ici. L'identifiant est donc le premier mot, puis nous avons également le deuxième mot, et ensuite nous allons avoir le modèle ici. Ensuite, nous aurons également besoin de ce paragraphe avec l'identifiant du résultat, également du bouton ici, puis nous pouvons également avoir besoin des as de ce bouton, d'accord. Nous allons donc commencer par nos contributions. Nous allons donc revenir à notre fichier JavaScript ici et je vais écrire let, donc je vais le nommer comme premier mot. Alors écrivons simplement le document. Obtenez un élément par identifiant. Et maintenant, je dois ajouter l'identifiant qui est en fait le premier mot ici. Parfait. Permettez-moi de vérifier encore une fois. Oui, nous avons le premier mot, et de la même manière, nous allons avoir l'axe au-dessus de la deuxième entrée. Copions donc ceci et nous allons simplement le coller ici, et ce sera le dernier mot, et nous devons vérifier à nouveau la valeur de l'identifiant ici, c'est le deuxième mot. Sec vers l'intérieur. Parfait. Et après cela, nous avons besoin de l' excédent du bouton. Je vais donc écrire le document du bouton anagramme, obtenir l'élément par identifiant, et maintenant nous devons ajouter l'identifiant ici Le D de notre bouton est donc le bouton de vérification. Nous devons donc maintenant ajouter ceci. Parfait. Ensuite, nous devons accéder au paragraphe avec l'identifiant du résultat. Permettez-moi donc de copier à nouveau ce code et de le mettre ici. Changeons simplement la valeur ici, et ce sera elle-même. Ensuite, nous avons besoin de l'excédent d'éléments de notre modèle. Le premier serait donc le modèle. Je vais donc écrire l'élément document get, et je pense que l'ID est un modèle. Vérifions-le donc à nouveau. Oui, nous avons ce modèle. Et après cela, nous avons besoin du D de ce bouton. Copions donc ceci à partir d'ici. Et notons simplement le modèle détaillé. Notez l'élément get par ID. Nous devons maintenant ajouter notre valeur d'identification ici. Parfait. Nous avons donc maintenant accès à tous les éléments dont nous pourrions avoir besoin dans notre code JS. Donc, tout d'abord, ce que nous devons faire, nous devons vérifier à nouveau que nous obtenons un excès de tous les éléments présents ici. Donc, ce que je dois faire ici, simplement faire le journal de la console avec chacune de ces variables. Ce sera donc le premier mot. Copions simplement ceci et ce sera le dernier mot ou nous pouvons le remplacer par le deuxième mot. Ce sera le meilleur nom. OK ? Ensuite, ce que nous devons faire, c'est aller ici avec le bouton d'anagramme, puis nous allons utiliser le résultat, puis nous allons aller ici avec le modèle, puis le bouton de fermeture du modèle allons donc enregistrer ceci et maintenant nous devons retourner dans notre navigateur, et nous devons retourner dans notre projet, ouvrir l'inspection ici. OK, maintenant je dois le mettre en plein écran. Cliquez sur Console maintenant, et vous pourrez voir que nous avons plus de six éléments ici. Nous avons donc les entrées, le bouton, le résultat, puis le modèle et le module de fermeture. Nous avons donc réussi à éliminer l'excédent d'Eles. Maintenant, ce que nous devons faire, c'est construire notre fonction. Nous allons donc maintenant créer notre fonction ici. Donc pour le moment, je dois juste écrire notre fonction d'anagramme de vérification Je vais donc le faire au format de fonction flèche. Ce sera donc un anagramme de vérification. Et ici, nous avons besoin de l'entrée de deux valeurs. Je vais donc écrire le premier mot, le texte. Parfait. OK, je vais changer ça pour le deuxième mot. C'est bon. OK, donc en fait, nous devons faire la même chose sur le texte du premier mot et le texte du deuxième mot. OK ? Donc, comme je vous l'ai déjà défini, que devons-nous faire dans l'anagramme ici Les anagrammes sont donc essentiellement les mots qui ont les mêmes caractères, ils ont donc les mêmes caractères et le même nombre de nombres, mais dans un ordre différent C'est bon. Donc, par exemple si je garde le silence ici, nous avons également le mot « écouter Ces deux mots sont donc en fait des anagrammes l'un pour l'autre Mais comment puis-je le savoir ? Ou comment pouvons-nous vérifier cela pour créer notre fonction ? OK. Nous avons donc ici une astuce qui correspond à ce que nous pouvons faire ici. Disons donc que si nous avons un mot simple, il n'y a rien de fou ici. Donc, ce que nous allons faire ici, c'est simplement changer l'ordre du texte ici. Nous allons donc les classer de manière à ce qu' ils soient alphabétiquement par ordre croissant C'est bon. Je vais donc simplement le copier à partir d'ici et je vais aller dans le navigateur , puis je vais aller ici dans le ha GPT. Je vais simplement demander de le mettre en ordre croissant ou Je dois donc l'ajouter aux personnages, d'accord ? C'est bon. Nous avons trié les caractères de notre mot dans l' ordre alphabétique croissant OK ? Nous allons donc y retourner maintenant. Donc, l' ordre croissant de ce mot que nous taisons est en fait celui-ci Et si vous essayez de vérifier l'ordre croissant de celui-ci, nous obtiendrons les mêmes résultats. OK ? Mais la façon dont nous allons le faire dans le Javascript est assez simple. Donc, la première chose que nous devons faire, c'est de recueillir notre parole. Je vais donc écrire le premier mot. Et comme il s'agit de la valeur d'entrée, nous devrons écrire la propriété de la valeur du point ici. Parfait. D'accord, donc d'abord, je dois vérifier si cela fonctionne ou non Je vais donc aller dans le journal de la console , écrire d'abord. Texte Word ici. Et maintenant, ce que je dois faire, c'est que nous savons que nous devons ajouter l'écouteur d'événements. OK ? Nous devons donc ajouter l'écouteur d'événements sur notre bouton, le bouton anagramme Je vais donc ajouter un bouton d' anagramme ici, et ajoutons simplement l'écouteur d'événements Nous allons donc ajouter un écouteur d'événements ici. Ce sera donc un événement de clic, et maintenant ce que nous devons faire, nous devons transmettre notre fonction. C'est l'anagramme du chat. OK. Donc, si vous ne connaissez pas non plus les auditeurs d'événements et tout ce genre de choses, vous pouvez consulter mon projet Edge Calculator sur lequel j'ai défini tout ce qui concerne le dôme, à partir du pay six OK ? Donc, pour le moment, nous allons simplement le transmettre, l'enregistrer et nous allons revenir à notre projet. Et maintenant, nous devons rouvrir l'inspection. Parfait. Donc, si j' écris quelque chose ici, alors laissez-moi simplement écrire en silence ici. OK, nous avons donc le journal de nos entrées sur la console. Donc, si j'ajoute une phrase ici, j'ai un chat que nous allons avoir. Nous l'aurons donc également dans le lob de notre console. OK. C'est bon. Après la valeur, nous allons donc utiliser la méthode trim. Et pourquoi nous utilisons la méthode de découpage essentiellement pour supprimer les espaces blancs avant le pire et après le pire si j' essaie d'ajouter ceci. OK. Donc pour l'instant, si je reviens ici et que je supprime cette méthode d'ici, je dois faire une chose ici. Je vais également noter la longueur des points. Et ajoutez également le mot pour le copier, et nous allons le mettre ici. Nous pouvons donc également avoir le mot et sa longueur. Donc, si j'ajoute un mot ici, permettez-moi d'ajouter un espace ici avant le mot, et je vais ajouter le K, et je vais également ajouter de l'espace ici. OK ? Je clique sur vérifier l'anagramme Et maintenant, vous pouvez voir ici que nous avons les 12 personnages ici. Mais en gros, j' ai déjà écrit les quatre personnages ici. C'est bon. Donc, pour supprimer cette pièce de rechange supplémentaire que nous pouvons potentiellement avoir ou que nous pouvons avoir par erreur dans notre saisie, nous utiliserons la méthode trim. Donc, si j'ajoute simplement la méthode de découpe ici, nous supprimerons cet espace blanc à l'avant et aussi à l'arrière. Donc maintenant, si je reviens ici et que je clique simplement sur l'anagramme de vérification avec le même type de saisie, maintenant vous pouvez voir que nous n'avons pas d'espace le recto, mais aussi sur le verso et sur les caractères, nous n'avons que quatre caractères C'est pourquoi nous utilisons ici la méthode de découpage. Donc, après la méthode de découpage, nous devons faire encore une chose pour changer les valeurs en minuscules OK ? Donc, comme nous le savons, si j'essaie comparer deux choses ici, notons simplement. OK. Je vais également ajouter la deuxième entrée ici. Copions donc ceci à partir d'ici. Et mettons ça au deuxième mot. C'est bon. Et mettons également le second ici. Parfait. Nous enregistrons également dans la console notre texte du deuxième mot, et nous ferons également une comparaison ici avec notre premier mot, texte et le deuxième mot. Ce sera donc le texte du premier mot, est-il égal au texte du deuxième mot ? C'est bon. Maintenant, ce que nous devons faire, c'est revenir au projet Word. Écrivons simplement la même entrée ici dans notre deuxième entrée. Seule la modification que j'apporterais ici, changer le C en majuscule. Cliquons maintenant sur vérifier l'anagramme. Vous pouvez voir que nous avons une valeur décroissante, même si nous avons les mêmes personnages ici. La seule différence ici est celle entre les majuscules et les minuscules C'est pourquoi nous devons convertir nous devons convertir chaque entrée en minuscules ou en majuscules, comme vous préférez aller ici Mais je vais passer aux minuscules. Donc pour cela, ce que nous allons faire ici, nous allons écrire après notre première méthode et il y aura deux minuscules. C'est bon. Et je ferai la même chose lors notre deuxième entrée. Alors, sauvegardons ça. Maintenant, si je donne le même type d'entrée ici, nous aurons le vrai ici, et cela fonctionne parfaitement bien. C'est pourquoi nous devons changer notre texte en minuscules afin de ne pas avoir réponse négative simplement cause des majuscules et des minuscules. Bien, donc après les minuscules, nous devons ajouter une autre méthode qui diviserait notre chaîne en un tableau. OK ? Le nom de la méthode est donc méthode fractionnée. Et dans la méthode split, nous avons un argument qui est traité comme un séparateur. Cela signifie donc simplement quel caractère vous souhaitez utiliser comme séparateur dans cette chaîne. Supposons donc que j' ajoute un caractère ici et que j'ajoute la barre oblique, d'accord ? Et je ferai de même pour la deuxième méthode. Donc, reconstituons-le ici, enregistrons-le et retournons simplement dans notre navigateur. Je vais à nouveau noter l'anagramme de vérification. Et maintenant, vous pouvez voir ici que nous n'avons qu'un seul caractère dans notre tableau car nous n' avons aucune valeur de séparation ici. Donc, si j'ajoute le séparateur que nous avons utilisé, et si j'ajoute le chien ici, d'accord, copions-le, ajoutons simplement le chien ici également, et je vais supprimer cet espace blanc à partir d'ici. Supprimons donc ça. D'accord. Alors maintenant, si je clique à nouveau sur l'anagramme du chèque. Comme vous pouvez le voir ici, cette barre oblique fov est utilisée comme séparateur dans une chaîne Donc, tout ce que j'ajouterai après la barre oblique sera considéré comme un élément de tableau distinct Donc, si j'ajoute, disons, un aigle ici. Et si je le répète également sur la deuxième entrée, nous aurons trois entrées différentes ici. OK ? C'est ainsi que fonctionnent les méthodes de division, et c'est ainsi que vous pouvez ajouter le séparateur ici. Vous pouvez donc ajouter n'importe quel séparateur. OK ? Je vais donc y retourner. Disons donc si j'ajoute le séparateur en tant que caractère A. Alors maintenant, tout ce qui vient après le A sera considéré comme un autre élément. Donc, si je l'enregistre à nouveau, si je reviens en arrière et si je clique simplement sur le bouton ici, vous pouvez voir ici que nous avons une division sur notre chaîne chaque fois que nous avons la valeur A ici. Donc, de même, si je dois cracher chaque caractère de ma chaîne, ce que je vais réellement utiliser, j'ajouterai une chaîne vide ici sans espace OK ? Donc maintenant, si je sauvegarde ceci et que je clique simplement sur vérifier le nagramme, vous pouvez voir ici que chaque caractère que nous avions dans la chaîne est considéré comme un élément de tableau distinct C'est ainsi que nous allons séparer notre valeur ici. OK ? Maintenant, ce que je dois faire, c'est simplement écrire. Disons que je vais écrire Écoutez ici, et j'ajouterai le silence ici. Si je clique sur Vérifier l'anagramme, vous pouvez maintenant voir ici que nous avons divisé notre chaîne en une zone de Mais pour le moment, vous pouvez voir que nous avons une fausse valeur ici. La raison en est que nous avons les mêmes caractères à la même fréquence, mais nous avons quand même un ordre différent ici. Donc, ce que nous devons faire, c'est modifier la commande. Donc, pour changer l'ordre, nous devons utiliser la méthode ici, qui s'appelle en fait méthode de tri. Mais avant cela, je dois utiliser une autre méthode ici, et ce sera la méthode conjointe. Ainsi, la méthode join réunit essentiellement tous les éléments que nous avons dans notre tableau dans une chaîne. OK ? Donc, ici, j'ai aussi un argument qui est également un séparateur. Donc, si je voulais séparer chaque élément mon tableau par n'importe quel caractère, je peux simplement ajouter ce séparateur. Disons donc que je voulais séparer chaque élément du tableau par une virgule Je peux donc simplement ajouter la virgule ici et elle séparera chaque valeur que nous avons dans notre tableau dans notre chaîne Alors revenons en arrière. Et voici ce que tu dois faire si je clique simplement sur notre bouton. Maintenant que vous pouvez le voir , il s'agit en fait tout séparer par cette virgule Mais je ne veux pas avoir la virgule ici, d'accord ? Je ne peux donc simplement rien écrire ici. Ce sera donc également la chaîne vide. Maintenant, si je reviens en arrière, et si je clique à nouveau dessus, vous pouvez voir que nous avons à nouveau notre valeur de chaîne, mais nous avons oublié une chose ici, qui est de trier notre valeur. Alors, comment pouvons-nous trier notre valeur ? Nous allons y retourner. Et avant la jointure, après le split, nous ajouterons une autre méthode, qui sera la méthode de tri. Et cela permettrait en fait de trier notre zone d'articles par ordre croissant par ordre alphabétique OK ? Donc, si j'ajoute le SAR ici et si j'ajoute également la méthode Odd ici, et par défaut, les méthodes de tri fonctionnent sur la chaîne, pas sur le nombre. Donc, pour les nombres, vous devez y ajouter une fonction Colbck. OK ? Pour l'instant, je vais juste enregistrer ceci et maintenant nous allons trier nos personnages. Maintenant, vous pouvez le constater, nous avons les mêmes caractères ici dans le même ordre et avec le même numéro. Alors maintenant, ces deux mots sont en fait l'anagramme. Mais si je change simplement la valeur ici par « ate » et disons « chien », ce sera faux. OK, donc une autre méthode que nous pouvons ajouter ici. Donc, si je peux revenir à la sorcière BT et que je dois copier une chose nous avions ces phrases, et vous pouvez le voir, nous avons les deux mots ici Je vais y aller avec celui-ci, et je vais simplement le mettre ici. Je vais également copier le second. Très bien, je vais donc revenir sur notre projet. Mettons-le simplement comme deuxième valeur. Alors maintenant, si je clique simplement sur le bouton, vous pouvez le voir. Nous avons en fait les mêmes caractères dans les mêmes nombres et même dans le même ordre, mais nous avons quand même une fausse valeur ici. La raison en est que nous avons cet espace supplémentaire ici, si vous pouvez voir ici que nous avons cet espace ici, et que nous avons également cet espace ici pour les deux fois, et dans le premier mot, nous n'avons cet espace que pour une seule fois. Cela peut donc créer un problème lorsque vous souhaitez vérifier les phrases ou les phrases. Donc pour cela, nous avons une méthode qui s'appelle remplacer, d'accord ? Nous allons donc ajouter une autre méthode ici après avoir transformé nos lettres en minuscules, à savoir la remplacement Ainsi, dans les méthodes de remplacement, nous avons les deux arguments. premier serait le modèle que nous devons faire correspondre pour remplacer la valeur, et le second serait la valeur de remplacement. Disons donc que je voulais remplacer l'espace que nous avons une virgule ou quelque chose comme ça ou peut-être la barre oblique, quelque chose Donc je peux le dire comme ça, d'accord ? Et je peux faire la même chose pour le second. Alors, sauvegardons ça et nous y retournerons. Et si je clique sur notre bouton, vous pouvez maintenant voir que nous avons cette barre oblique OK. Mais évidemment, cela ne marchera pas. Nous devons y ajouter un modèle. Maintenant, pour ajouter le motif, nous avons un concept vraiment puissant. Vous en avez peut-être entendu parler, qui est une expression régulière. Je vais donc écrire une expression régulière ici. Alors, quelle est l' expression régulière ici ? Donc, si je peux zoomer, vous verrez qu' une expression régulière est une séquence de caractères qui forme un modèle de recherche. OK ? Nous pouvons donc essentiellement apprendre comment ajouter ces expressions régulières dans notre code. Mais pour le moment, nous n' avons pas besoin d'apprendre cela. Nous pouvons simplement prendre l'habitude, et je vais lui demander si je veux avoir un modèle d'expression régulière. OK, alors laisse-moi juste zoomer dessus. Je veux avoir un modèle d' expression régulière qui correspond tout sauf caractères minuscules, Je peux donc simplement exécuter ce prompteur correctement. Nous avons donc notre expression régulière ici, et nous avons également le modificateur, nous n'avons donc pas à entrer dans les détails ici. Ce que nous pouvons faire, vous pouvez le voir ici, nous pouvons simplement le copier d' ici et nous allons le mettre dans notre code. Très bien, je dois donc le supprimer. Parfait. Et je dois aussi le mettre ici. Parfait. Très bien, donc je dois le mettre dans Okay, donc j'ai fait une erreur ici. Cela sera donc supprimé d' ici et nous ajouterons une division. Nous devons à nouveau ajouter la méthode de remplacement ici. Et dans notre méthode de remplacement, nous devons mettre ceci. Parfait. Et je ne veux pas le remplacer par quoi que ce soit. Je veux le remplacer par une chaîne vide. OK ? Donc, si vous ne comprenez toujours pas ce qui se passe avec cette méthode ici, vous pouvez simplement la copier d' ici et vous pouvez retourner au Cha JBT et vous pouvez simplement lui demander comment cela fonctionne, comment cela fonctionne En JavaScript. Et cela vous donnera une explication sur chaque étape, d'accord ? Je peux écrire, écrire étape par étape, expliquer. OK ? Donc je pense que j'ai fait une faute d'orthographe là-bas, mais ça va. Très bien, ici, cela peut simplement vous montrer abord que lors de notre première réponse, cette expression est un appel de méthode JavaScript qui traite une chaîne pour supprimer tous les caractères sauf les minuscules OK ? Donc, en gros, cela supprimera tout sauf les caractères minuscules OK ? Et comme nous le savons, dans notre code, nous n'avons que des caractères minuscules Cela ne supprimera donc que les espaces que nous avons ainsi que les caractères spatiaux que nous pouvons avoir. Donc, si j'ajoute un signe dollar ici, disons celui-ci et si je l'ajoute simplement ici, il sera également supprimé. Cliquez à nouveau sur le bouton. Très bien, je dois y retourner, et je pense que j'ai fait une erreur ici. Très bien, je dois donc mettre ça avant cette méthode à l'assiette. C'est bon. Très bien, donc je pense que maintenant cela fonctionne bien. Alors sauvegardons cela à nouveau et revenons en arrière, cliquez sur notre bouton. Parfait. Vous pouvez le voir, nous avons supprimé les espaces que nous avions ainsi que nos caractères spéciaux. C'est bon. Et c'est cette logique que nous avons dû construire pour vérifier si nos mots étaient anagrammes ou non OK ? Maintenant, ce que nous devons faire, c'est revenir à un code. Changeons simplement la taille ici. Maintenant, cela fonctionne bien. OK ? Tout ce que nous avons dans notre vérificateur d'anagrammes fonctionne correctement Nous devons maintenant le mettre au format conditionnel. OK ? Nous avons donc notre logique prête pour notre fonction de vérification des anagrammes Maintenant, ce que nous devons faire ici, c'est que si le premier sommet et le second sommet sont égaux l'un à l'autre, ce que cela doit faire Il ajoutera en fait le texte dans un paragraphe de résultat Word. Je vais ajouter la propriété du contenu du texte ici. Donc, ce qui va être faux ici, c'est que les mots sont des anagrammes. Alors, sauvegardons ça. Et si vous revenez dans notre navigateur, si vous cliquez sur un bouton, vous pouvez maintenant le voir, les mots sont des anagrammes, et nous avons nos résultats ici Mais nous pouvons également ajouter les conditions supplémentaires ici. Donc, quoi que nous devions faire ici, je vais mettre une autre condition ici : si le premier mot et le deuxième mot ne sont pas égaux, alors en gros, ils feront la même chose. Je vais simplement copier ceci et le mettre ici, ce ne sera pas un anagramme Parfait. Je peux aussi le mettre si L est l'état signifie, et cela fonctionnerait bien. Je viens de le mettre ici. Parfait. Revenons maintenant à notre projet et cliquez sur Vérifier le nagramme Nous avons l'anagramme. Mais si j'ajoute, disons, le chat et le chien, les mots ne sont pas des anagrammes Cela fonctionne parfaitement. Très bien, la fonctionnalité principale de notre fonction est en fait terminée car elle vérifie si le mot est anagramme ou non Mais maintenant, nous devons ajouter quelques cas H. Je vais donc retourner au navigateur. Et ici, disons que si je ne donne aucune information ici, si je clique sur notre bouton, cela nous donnera en fait une sorte d'erreur. Je dois donc d'abord reformuler cela. OK. Je dois donc relancer le projet. Mettons-le simplement dans la spécification, allons dans la console, et disons si j'ajoute le mot dans la première et si je n'ajoute aucun mot dans la deuxième entrée Vous pouvez le constater, cela ne me donne toujours pas d'anagramme, mais ce n'est pas le message approprié pour ce genre de cas Je dois donc ajouter les conditions ici dans notre code selon lesquelles je vais revenir aux tâches principales. Donc, le premier serait si le texte du premier mot est faux. Cela signifie simplement que si vous n'avez pas de texte du premier mot, je vais ajouter l'opérateur final, et nous allons faire la même chose avec le texte du deuxième mot. Et ici, ce que je peux faire, simplement ajouter le texte dans notre résultat. Veuillez ajouter les deux entrées. Et je peux également ajouter une deuxième condition ici, sûre, et je vais simplement la copier. Et maintenant, je vais simplement le mettre ici. Mais ici, je vais simplement remplacer l'opérateur final par l'opérateur or. C'est bon. Et ici, je vais également modifier le message. Veuillez ajouter le reste des entrées ici. Je vais donc ajouter ici, et ici je vais ajouter du texte Perfect. Alors sauvegardons ça maintenant. Et maintenant, si je retourne dans notre navigateur, et si je n'écris rien dans ma deuxième entrée. A droite, vous pouvez voir ici que nous n'avons toujours pas d'anagramme Il y a une raison à cela, car puisqu'il passe par ces conditions et aussi par ces conditions, d'accord ? C'est pourquoi nous n'avons pas d'anagramme. Mais ce que je veux faire ici, c'est que chaque fois que l'une de ces conditions est vraie, ma fonction devrait en sortir. Donc, ce que je peux faire, c'est simplement ajouter la déclaration de retour ici et aussi ici. Et maintenant, si l'une des conditions que nous avons ici est remplie, notre fonction ne lira pas cette partie du code. OK. Maintenant, revenons en arrière et cliquons à nouveau sur le bouton. Maintenant tu peux le voir. Nous avons, s' il vous plaît, le texte restant à ajouter. Je dois donc ajouter de l'espace ici. Et si je n'ajoute aucun texte dans les deux entrées, nous allons avoir ceci, veuillez ajouter les deux entrées. Alors maintenant, ce sont les messages appropriés. Alors maintenant, nous allons retourner ici et que devons-nous faire ? Je vais changer la condition selon laquelle si la longueur du mot de force et celle du deuxième mot ne correspondent pas, il ne s'agit tout simplement pas d'une anagramme, d'accord ? Ensuite, nous pouvons ajouter le même code dans la condition. Copions donc ceci d' ici et mettons-le ici. Parfait. Maintenant, cela fonctionnera bien. Donc, si j'ajoute le silence ici et si j'ajoute la leçon ici, cela fonctionnera parfaitement. Nous avons donc intégré notre fonctionnalité dans notre fonction principale. Alors maintenant, ce qu'il nous reste à faire. OK, maintenant nous allons revenir à un document. Voyons donc ce que nous devons faire l'année prochaine. Nous avons donc créé les éléments EStiml. Nous avons défini notre fonction ici. Nous avons installé l' écouteur d'événements sur le bouton. Nous devons maintenant ajouter la logique du modèle. D'accord ? Donc, pour cela, je dois créer une fonction ici qui sera le modèle de vérification, et ce sera également la fonction d'erreur. Alors maintenant, ce que nous allons utiliser ici, nous allons réellement utiliser notre stockage local. C'est bon. Donc, la façon dont vous allez procéder est assez simple. Donc, dans le stockage local, nous avons deux méthodes. OK. Cela nous aide donc à voir les valeurs que nous avons dans notre stockage local, voir les valeurs. Dans notre entrepôt local. Et le second nous aide réellement à définir des valeurs dans notre stockage local. Définissez des valeurs. Donc, la méthode que nous utilisons ici pour voir les valeurs ou pour rechercher la valeur est en fait d'obtenir des éléments. OK ? Et ici, nous allons écrire le nom de la propriété ici. OK ? Et dans la méthode des valeurs définies, il s'agit en fait de la méthode des éléments définis. Et là, il faut ajouter deux choses. premier est le nom de la propriété, puis nous avons la valeur ici. Vous pouvez donc également lui donner un nom ici, puis nous aurons la valeur ici. Vous pouvez donc inscrire le nom ici et la valeur ici. Et pour y accéder, il suffit d'ajouter le nom ici. Très bien, nous allons maintenant utiliser notre première méthode, qui consiste à utiliser les objets GT Je vais donc noter notre état ici si nous ne le trouvons pas. Permettez-moi donc de noter le stockage local. Nous pouvons maintenant accéder à ces éléments ici. Vous pouvez donc voir ici que nous avons ces différentes méthodes et cette propriété. La longueur est donc en fait la propriété, et à part cela, nous avons ces méthodes ici. Donc, pour le moment, nous devons utiliser les méthodes des objets GD, et je vais utiliser les parenthèses Il faut maintenant chercher le nom de la propriété. Disons donc si je veux juste voir avec ça, d'accord. Cela signifie donc simplement qu'ils me renvoient la valeur de la propriété visitée, dans mon espace de stockage local. Mais si je dois inverser cette condition, exemple si je ne veux pas trouver cette propriété, je peux simplement ajouter l'opérateur not ici. Donc, cette condition maintenant signifierait simplement qu'il faut exécuter le code. Si vous ne trouvez pas l'objet dans l'histoire locale. Ce sera donc, disons, la propriété visitée. Très bien, nous devons maintenant ajouter notre bloc de code ici. Donc, si je ne vois pas la propriété ici dans mon stockage local, le moment, je fais juste le journal de la console ici, d'accord ? L'article visité n'est pas dans notre entrepôt local. Sauvegardons donc ceci et nous allons revenir à notre code. Je vais donc simplement rafraîchir cette page. Donc, je dois d'abord retourner ici dans le stockage. Revenons maintenant au stockage local. Maintenant, vous pouvez le voir, nous avons ce nom de clé ici, qui est visité. Donc, si vous avez cette clé visitée dans notre stockage local, cette condition ne sera pas vraie. Je vais donc revenir ici et je vais simplement supprimer d'ici pour le moment. Parfait. Maintenant, je vais simplement retourner dans le journal de la console. Reformulons simplement la page. D'accord, je dois donc également exécuter cette fonction. Nous allons donc exécuter cette fonction. Alors, comment pouvons-nous le faire ? Très bien, je dois donc ajouter les inconvénients du mot clé ici. Et oui, maintenant ce qu'il nous reste à faire. Très bien, je veux donc exécuter cette fonction chaque fois que je reformule la page