JavaScript-Projekt für Dummies: Anagram-Checker

1. Anagram-Checker-Einführung: Dies ist das zweite Projekt, das wir in JavaScript erstellen werden, und in diesem Projekt geht es um den Anagramm-Checker. Die Konzepte, die wir in diesen Projekten implementieren werden , sind Dom-Manipulation, Zeichenkettenverarbeitung, anhand derer wir die verschiedenen Zeichenkettenmethoden untersuchen können , und dann werden wir Event Listener verwenden Und im letzten Fall werden wir den lokalen Speicher des Browsers verwenden lokalen Speicher des Browsers auf dem wir lernen werden, wie wir die Daten speichern und aus dem lokalen Speicher des Browsers abrufen können . 2. Aufbau von Anagram-Checker: In diesem Projekt geht es um den Anagramm-Checker, und wenn Sie nicht wissen, was das Anagramm ist, ist es Anagramme sind also einfach die Wörter oder Phrasen oder der Satz, der dieselben Zeichen in derselben Häufigkeit, aber in unterschiedlicher Reihenfolge enthält dieselben Zeichen in derselben Häufigkeit, aber in der Satz, der dieselben Zeichen in derselben Häufigkeit, aber in unterschiedlicher Reihenfolge enthält. Okay? Und das einfache Beispiel , das wir hier haben können, besteht zwei Worten: Zuhören und Schweigen Wenn Sie also beide Wörter beachten, haben wir hier dieselben Zeichen und in derselben Frequenz Okay? Aber die Reihenfolge ist eigentlich anders. Also das ist eigentlich das Anagramm. Was wir in unserem Projekt machen, ist also ziemlich einfach. Wir werden hier zwei Wörter hinzufügen, und Sie können auch Phrasen oder Sätze aufschreiben, was auch immer Sie aufschreiben möchten. Also werde ich hier, sagen wir, still aufschreiben. Und im zweiten Wort werde ich tatsächlich Listen verwenden. Und wenn ich hier auf die Schaltfläche klicke, wird im Grunde geprüft, ob diese beiden Wörter zueinander stehen oder nicht Wenn ich also einfach auf das Häkchen klicke, kannst du hier sehen, dass es sich bei beiden Wörtern um Anagramme handelt Aber wenn ich hier mit etwas anderem hingehe, also wenn ich Kate aufschreiben kann und wenn ich einfach Hund hier aufschreibe und auf unseren Button klicke, kannst du jetzt hier sehen, dass unsere Worte kein Anagramm sind Ordnung. Und wir haben auch einige Bedingungen in unserem Programm. Wenn ich hier keine Eingaben hinzufüge, wird mir das im Grunde eine Art Botschaft geben, okay? Und wenn ich auch das zweite Wort entferne , erhalten wir hier auch eine andere Warnung. Sie können es also hier sehen. So funktioniert unser Projekt also. Eine Sache, die wir bei unserem Projekt noch nicht gesehen haben, ist das Modell. Wenn Sie also zum ersten Mal auf die Website kommen , können Sie die Definition des Anagramms auf diesem Modell sehen des Anagramms auf diesem Modell Aber im Moment, da ich unsere Website hier bereits besucht habe , werden Sie hier kein Modell sehen können, selbst wenn ich die Seite umformuliere Aber wenn ich zur Inspektion gehe und wenn ich in das Lager gehe, und hier werde ich in den lokalen Speicher gehen, können Sie die Immobilie hier sehen die besucht wurde, und deren Wert stimmt Okay? Also im Grunde genommen, wenn Sie die Website zum ersten Mal besuchen, werden diese Eigenschaft und dieser Wert hinzugefügt. Und danach werden Sie dieses Modell nicht mehr sehen können. Wenn ich also diesen Wert von hier entferne, der zweite perfekt. Und wenn ich das offenlege und wenn ich die Seite jetzt einfach umformuliere, werdet ihr hier eine Art Willkommensnachricht sehen können, die wir zu unserem Projekt haben Okay? Also, wenn ich einfach auf Get here klicke, kannst du dir jetzt unser Projekt ansehen. Das war also eine Demonstration unseres Projekts, und jetzt gehen wir in unseren Code-Editor und fangen an, das zu erstellen, okay? Wie Sie hier sehen können , habe ich in unserem Projekt bereits unseren EstimL-Code und auch unser CSS geschrieben unseren EstimL-Code und auch unser CSS Okay. Also jetzt werde ich Ihnen zunächst erklären, was wir in unserer Schätzstruktur haben , weil das wichtig ist Bei der Schätzung ist die Struktur also ziemlich einfach. Wir haben hier die beiden Eingaben für das erste Wort und den zweiten Modus, die wir in der Vorschau gesehen haben, und dann haben wir unsere Schaltfläche, die Anagramm überprüfen ist Und danach haben wir hier die Struktur unseres Modells. Okay? Die Modellstruktur ist also standardmäßig unsichtbar. Aber wann immer wir es zum ersten Mal besuchen, werden wir es auf der ersten Seite sehen können. Okay? In Ordnung. Also, was ich hier tun müsste, ich mache einfach die rechte Maustaste hier und klicke auf Mit Life-Server öffnen. Und jetzt können Sie nur unsere Schätzstruktur sehen. Wir haben hier also die beiden Eingaben, wie Sie hier und die Schaltfläche sehen können, und dann haben wir hier unsere Modellstruktur. Okay? Okay, jetzt gehen wir zurück zu unserem VS-Code. Und hier müsste ich mein CSS verlinken, was ich bereits getan habe, aber ich muss das von hier aus kommentieren Kommentieren Sie das und klicken Sie erneut auf Speichern Jetzt kehren wir zu unserem Projekt zurück, und jetzt können Sie unser Projekt hier sehen Im Moment haben wir nur den eSTIml- und den CSS-Teil davon, und jetzt werden wir anfangen, unseren Javascript-Teil zu schreiben Wir wissen also, dass sich unsere Projekte ausschließlich auf JavaScript konzentrieren Deshalb habe ich hier bereits Stimul- und CSS-Code hinzugefügt Okay. Also gehen wir jetzt zurück zu unserem Browser. Und jetzt gehen wir hier in die Excel-Verlosung ein. Und was ist das Schlüsselkonzept , das wir in diesem Projekt lernen werden? Also die erste ist die Kuppelmanipulation. Wir sind also bereits mit Get Element by ID und dem Textinhalt vertraut , da wir das in unserem ersten Projekt behandelt haben, das eigentlich der Altersrechner war. Aber wir haben immer noch die Eigenschaft der Punktanzeige im Stil , die wir in diesem Projekt untersuchen können. Und das Wichtigste , was wir hier untersuchen müssen, ist die Zeichenkettenverarbeitung. Bei der Zeichenkettenverarbeitung werden wir also im Grunde verschiedene Methoden behandeln , die wir für unsere Zeichenketten verwenden. Und wir können auch die Ereignisbehandlung untersuchen und im letzten Schritt werden wir auch die State-Persistenz mit dem lokalen Speicher durchgehen mit dem lokalen Speicher Im Moment werde ich Ihnen hier eine kurze Definition dieser Zeichenkettenmethoden geben hier eine kurze Definition dieser Zeichenkettenmethoden Also die erste, die wir haben, ist die Trim-Methode. Die Trim-Methode entfernt also im Grunde den Leerraum an beiden Enden einer Zeichenfolge, wie vom vorderen Ende und vom Speck. Und danach müssen wir die Kleinbuchstabenmethode verwenden, die einfach alle Zeichen in einer Zeichenfolge in Kleinbuchstaben umwandelt in einer Zeichenfolge in Kleinbuchstaben Danach haben wir die Replace-Methode. Das wird uns tatsächlich helfen, ein Muster in unserer Zeichenfolge zu finden, und es wird den Ersatz dort drüben übernehmen. Und danach haben wir die Split-Methode. Was ist also die Funktion der Split-Methode? Im Grunde konvertiert sie unsere Zeichenfolge in aufsteigender Reihenfolge in die Arrays des Elements, das wir die Arrays des Elements, das wir in unserer Zeichenfolge haben, und danach haben wir die Join-Methode Die Joint-Methode würde also tatsächlich alle Elemente , die wir im Array haben, in einer einzigen Zeichenfolge zusammenfassen , die wir im Array haben, in einer einzigen Zeichenfolge Okay? Das sind also die Definitionen der Methoden, die wir in unserem Projekt verwenden werden. Nun, eine Sache, die wir tun müssen , bevor wir mit unserem Code beginnen, müssen wir unsere Dokumentation, die wir erstellt haben , Schritt für Schritt durchgehen . Genau wie bei unserem ersten Projekt. Im Grunde genommen haben wir in unserer Dokumentation als Erstes den Zweck dieses Codes hinzugefügt, und danach werden wir unsere Schätzstruktur aufschreiben, dann das CSS-Styling , das bereits fertig ist und danach werden wir unsere Schätzstruktur aufschreiben, dann das CSS-Styling , , und dann den JavaScript-Code Im JavaScript-Code habe ich das also in mehrere verschiedene Schritte unterteilt Der erste Schritt wäre, die Schätzelemente mit Hilfe von JavaScript auszuwählen , und dann definieren wir unsere Funktion, und dann müssen wir unseren Event-Listener zur Schaltfläche hinzufügen, und dann haben wir die Modelllogik Dann werden wir unseren Modelcheck beim Laden der Seite durchführen. Das sind also die Dinge, die wir in unserem Projekt tun müssen. Und ich werde diese Dokumentation auch in unsere Projektressourcen aufnehmen. In Ordnung. Lassen Sie uns jetzt einfach in unseren VS-Code springen und wir müssen hier eine JavaScript-Datei erstellen, die MindTJS sein wird . In Ordnung, also muss ich hier hineinzoomen Perfekt. Das erste, was wir tun müssen, ist auf die erforderlichen Elemente zuzugreifen, also werden wir die Asse-Elemente aufschreiben. Also muss ich zurück zu unserer Schätzungsdatei gehen und sehen, welche Elemente ich in meinem Javascript benötigen würde. Also würde ich diese beiden Eingaben benötigen. Also werden wir die Eingabe hier haben. Also die ID ist das erste Wort, und dann haben wir auch das zweite Wort, und dann haben wir das Modell hier. Dann brauchen wir auch diesen Absatz mit der Ergebnis-ID, auch die Schaltfläche hier, und dann brauchen wir auch die Asse dieser Schaltfläche, alles klar. Also werden wir mit unseren Eingaben beginnen. Also gehen wir hier zurück zu unserer JavaScript-Datei und ich werde let aufschreiben , also werde ich es als erstes Wort benennen. Also lass uns einfach das Dokument aufschreiben. Element anhand der ID abrufen. Und jetzt muss ich hier die ID hinzufügen, die eigentlich das erste Wort ist . Perfekt. Lass mich das nochmal verifizieren. Ja, wir haben das erste Wort, und auf ähnliche Weise werden wir die Achse über der zweiten Eingabe haben. Also lasst uns das kopieren und wir fügen es einfach hier ein, und das wird das letzte Wort sein, und wir müssen den ID-Wert hier noch einmal überprüfen , das ist das zweite Wort. Sec nach innen. Perfekt. Und danach brauchen wir den überschüssigen Teil des Knopfes. Also werde ich das Anagramm-Button-Dokument aufschreiben, Element für ID abrufen, und jetzt müssen wir die ID hier hinzufügen Das D unseres Buttons ist also Check-Button. Also müssen wir das jetzt hinzufügen. Perfekt. Danach müssen wir auf den Absatz mit der Ergebnis-ID zugreifen. Lassen Sie mich diesen Code einfach noch einmal kopieren und hier einfügen. Lassen Sie uns einfach den Wert hier ändern, und das wird von selbst sein. Und danach brauchen wir den Überschuss unserer Modellelemente. Das erste wäre also das Modell. Also werde ich das Dokument aufschreiben, das Element abruft, und ich denke, die ID ist Modell. Lassen Sie uns das einfach noch einmal überprüfen. Ja, wir haben dieses Modell. Und danach brauchen wir das D dieser Taste. Also lass uns das von hier kopieren. Und lassen Sie uns einfach das nahe Modell aufschreiben. Schreiben Sie Get Element nach ID auf. Jetzt müssen wir hier unseren ID-Wert hinzufügen. Perfekt. Jetzt haben wir also Zugriff auf alle Elemente, die wir möglicherweise in unserem JS-Code benötigen. Also, was wir jetzt tun müssen, müssen wir noch einmal überprüfen , ob wir hier zu viele Elemente bekommen . Also was ich hier tun muss, ich werde einfach das Konsolenprotokoll mit jeder dieser Variablen erstellen. Also das wird das erste Wort sein. Lass uns das einfach kopieren und das wird das letzte Wort sein oder wir können es in das zweite Wort ändern. Das wird die bessere Benennung sein. Okay? Und danach, was wir tun müssen, gehen wir hier mit der Anagramm-Schaltfläche, dann gehen wir mit dem Ergebnis, dann gehen wir hier mit dem Modell, dann mit der geschlossenen Modelltaste Also speichern wir das und jetzt müssen wir zurück in unseren Browser gehen, und wir müssen zurück zu unserem Projekt gehen, den Inspect hier öffnen Okay, jetzt muss ich das in den Vollbildmodus bringen. Lass uns jetzt auf Konsole klicken, und jetzt wirst du sehen können , dass wir hier mehr als sechs Elemente haben. Wir haben also die Eingaben, wir haben die Schaltfläche, wir haben das Ergebnis, dann haben wir das Modell und auch das Schließmodul. Wir haben also erfolgreich den Überschuss an Eles. Was wir nun tun müssen, wir müssen unsere Funktion aufbauen. Jetzt werden wir unsere Funktion hier erstellen. Im Moment muss ich nur unsere Check-Anagramm-Funktion aufschreiben unsere Check-Anagramm-Funktion Also werde ich das im Pfeilfunktionsformat machen. Das wird also ein Check-Anagramm sein. Und hier benötigen wir die Eingabe von zwei Werten. Also werde ich das erste Wort, den Text, aufschreiben. Perfekt. Okay, ich werde das auf das zweite Wort ändern. In Ordnung. Okay, also eigentlich müssen wir dasselbe mit dem ersten Worttext und dem zweiten Worttext machen dasselbe mit dem ersten Worttext . Okay? Also, wie ich dich schon definiert habe , was müssen wir in dem Anagramm hier machen? Anagramme sind also im Grunde Wörter, die dieselben Zeichen haben, also haben sie dieselben Zeichen und auch dieselbe Anzahl von Zahlen, aber Ordnung. Also das Beispiel war , wenn ich hier schweige, und dann haben wir auch das Wort hören. Also sind diese beiden Wörter eigentlich ein Anagramm zueinander Aber woher weiß ich das? Oder wie können wir das überprüfen, um unsere Funktion aufzubauen? Okay. Also wir haben hier einen Trick , den wir hier machen können. Nehmen wir an, wenn wir ein einfaches Wort haben , ist hier nichts Verrücktes. Also, was wir hier tun werden, wir werden hier einfach die Reihenfolge des Textes ändern. Also werden wir das so anordnen, dass sie alphabetisch in aufsteigender Reihenfolge sein sollten Ordnung. Also kopiere ich das einfach von hier und gehe zum Browser und dann gehe ich hier zum Ha GPT. Ich werde einfach fragen, das aufsteigend zu setzen Also muss ich das mit den Charakteren hinzufügen, okay? Also gut. Wir haben die Zeichen unseres Wortes in aufsteigender Reihenfolge alphabetisch sortiert Okay? Also gehen wir jetzt zurück. Also die aufsteigende Reihenfolge dieses Wortes , das wir verschweigen, ist eigentlich diese Und wenn Sie versuchen, die aufsteigende Reihenfolge dieses Wortes zu überprüfen, werden wir zu den gleichen Ergebnissen kommen. Okay? Aber wie wir das im Javascript machen werden, ist ziemlich einfach. Das Erste , was wir tun müssen, die Eingabe unseres Wortes. Also werde ich das erste Wort aufschreiben. Und da es sich um den Eingabewert handelt, müssen wir hier die Eigenschaft des Punktwerts aufschreiben. Perfekt. Gut, also zuerst muss ich überprüfen, ob das funktioniert oder nicht Also gehe ich in das Konsolenprotokoll und schreibe es zuerst auf Worttext hier. Und jetzt, was ich tun muss, da wir wissen, dass wir den Event-Listener hinzufügen müssen . Okay? Also müssen wir den Event-Listener zu unserer Schaltfläche hinzufügen , der Anagramm-Schaltfläche Also werde ich hier eine Anagramm-Schaltfläche hinzufügen und lassen Sie uns einfach den Event-Listener hinzufügen Also werden wir hier den Event-Listener hinzufügen. Das wird also ein Klickereignis sein, und was wir jetzt tun müssen, müssen wir unsere Funktion übergeben Das ist ein Chat-Anagramm. Okay. Also, falls du auch nicht mit den Event-Zuhörern und all dem Zeug vertraut bist, kannst du dir mein Edge Calculator-Projekt das ich alles auf der Kuppel ab Pay Six definiert habe alles auf der Kuppel ab Pay Okay? Also im Moment werden wir das einfach weitergeben und es einfach speichern und wir gehen zurück zu unserem Projekt. Und jetzt müssen wir die Inspektion wieder öffnen. Perfekt. Also, wenn ich hier etwas aufschreibe, dann lass mich hier einfach still aufschreiben. Okay, wir haben also das Konsolenprotokoll unserer Eingabe. Also, wenn ich hier irgendeinen Satz hinzufüge, habe ich eine Katze, die wir haben werden. Also werden wir das auch in unserem Konsolen-Lob haben . Okay. In Ordnung. Nach dem Wert verwenden wir also die Trim-Methode. Und warum wir die Trim-Methode hauptsächlich verwenden, um die Leerzeichen vor dem Schlechten und nach dem Schlechten zu entfernen die Leerzeichen vor dem Schlechten und nach dem Schlechten , wenn ich versuche, das hinzuzufügen. Okay. Also jetzt, wenn ich einfach zurück gehe und diese Methode von hier entferne, und ich muss hier eine Sache tun. Ich werde auch die Punktlänge aufschreiben. Und füge einfach auch das Wort für den Text hinzu, und wir werden das hier einfügen. Also können wir auch das Wort und auch seine Länge haben. Wenn ich hier also ein Wort hinzufüge, lassen Sie mich hier einfach ein Leerzeichen vor dem Wort hinzufügen, und ich werde das K hinzufügen, und ich werde hier auch etwas Leerzeichen hinzufügen. Okay? Ich lass uns auf Anagramm überprüfen klicken Und jetzt können Sie hier sehen, dass wir die 12 Charaktere hier haben Aber im Grunde habe ich die vier Charaktere hier schon geschrieben . In Ordnung. Um also diesen zusätzlichen Ersatz zu entfernen , den wir möglicherweise haben oder den wir versehentlich in unserer Eingabe haben können, werden wir die Methode trim verwenden. Wenn ich hier also einfach die Trim-Methode hinzufüge, werden wir diesen weißen Bereich tatsächlich von der Vorderseite und auch von der Rückseite entfernen diesen weißen Bereich tatsächlich von . Wenn ich jetzt einfach hierher zurückgehe und einfach auf das Häkchen-Anagramm mit derselben Art von Eingabe klicke, können Sie jetzt sehen, dass wir kein Leerzeichen von der Vorderseite haben und auch auf der Rückseite und bei den Zeichen, wir haben nur vier Zeichen Deshalb verwenden wir hier die Trim-Methode. Nach der Trim-Methode müssen wir also noch etwas tun, um die Werte in Kleinbuchstaben umzuwandeln Okay? Also, wie wir wissen , wenn ich versuche , hier zwei Dinge zu vergleichen, lassen Sie uns das einfach aufschreiben. Okay. Ich werde hier auch die zweite Eingabe hinzufügen. Also lass uns das von hier kopieren. Und lassen Sie uns das einfach auf das zweite Wort setzen. Ordnung. Und lassen Sie uns auch den zweiten hier platzieren. Perfekt. Und wir führen auch das Konsolenprotokoll unseres zweiten Worttextes durch, und wir werden hier auch einen Vergleich mit unserem ersten Wort, Text und dem zweiten Wort durchführen . Das wird also der Text mit dem ersten Wort sein, entspricht er dem Text mit dem zweiten Wort? In Ordnung. Also, was wir jetzt tun müssen, wir gehen zurück zu Word-Projekt. Schreiben wir einfach die gleiche Eingabe hier in unserer zweiten Eingabe auf. Nur die Änderung, die ich hier vornehmen würde, das C in Großbuchstaben ändern. Lass uns jetzt auf Anagramm überprüfen klicken. Sie können sehen, dass wir den Fallwert haben, obwohl wir hier dieselben Charaktere haben Der einzige Unterschied besteht darin, dass Groß- und Kleinschreibung verwendet Deshalb müssen wir jede Eingabe in Klein- oder Großbuchstaben umwandeln, wie umwandeln jede Eingabe in Klein- oder Großbuchstaben umwandeln, Sie es vorziehen Aber ich werde hier zur Kleinschreibung übergehen. Also, was wir hier tun werden, wir nach unserer ersten Methode aufschreiben und es werden zwei Kleinbuchstaben sein . In Ordnung. Und ich werde dasselbe auch bei unserer zweiten Eingabe tun. Also lass uns das speichern. Wenn ich hier die gleiche Art von Eingabe gebe, haben wir hier die Wahrheit, und das funktioniert einwandfrei. Deshalb müssen wir unseren Text in Kleinbuchstaben ändern , damit wir nicht nur aufgrund der Groß- und Kleinschreibung eine negative Antwort erhalten . Ordnung, also nach dem Kleinbuchstaben müssen wir eine weitere Methode hinzufügen , die unsere Zeichenfolge tatsächlich in das Array aufteilen würde. Okay? Also der Name der Methode ist Split-Methode. Und in der Split-Methode haben wir ein Argument, das als Trennzeichen behandelt wird. Es bedeutet also einfach , welches Zeichen Sie als Trennzeichen in dieser Zeichenfolge verwenden möchten. Nehmen wir an, ich füge hier ein Zeichen hinzu und füge dann den Schrägstrich hinzu, okay? Und ich werde dasselbe auch bei der zweiten Methode tun. Also lass uns das hier zusammenfügen und speichern und lass uns einfach zurück in unseren Browser gehen. Ich werde das Scheck-Anagramm noch einmal aufschreiben. Und jetzt können Sie hier sehen, dass wir nur ein einziges Zeichen in unserem Array haben , weil wir hier keinen Trennwert haben Wenn ich also das Trennzeichen hinzufüge, das wir verwendet haben, und wenn ich den Hund hier hinzufüge, okay , lass uns das einfach kopieren , lass uns auch den Hund hier hinzufügen, und ich werde diesen Leerraum von hier entfernen. Also lass uns das entfernen In Ordnung. Also, wenn ich einfach nochmal auf das Häkchen-Anagramm klicke. Wie Sie hier sehen können, wird dieser FOV-Slash als Trennzeichen in einer Zeichenfolge verwendet Was auch immer ich nach dem Foo-Slash hinzufüge wird als separates Array-Element betrachtet Also, wenn ich hier, sagen wir, Adler hinzufüge. Und wenn ich das auch bei der zweiten Eingabe wiederhole, haben wir hier drei verschiedene Eingänge. Okay? So funktionieren also die Split-Methoden, und so können Sie das Trennzeichen hier hinzufügen. Sie können also grundsätzlich ein beliebiges Trennzeichen hinzufügen. Okay? Also werde ich wieder hierher gehen. Nehmen wir an, ich füge das Trennzeichen als A-Zeichen hinzu. Also wird alles, was nach dem A kommt , als ein weiteres A-Element betrachtet . Also, wenn ich das nochmal speichere und zurückgehe und einfach auf die Schaltfläche hier klicke, kannst du jetzt hier sehen, dass wir immer dann eine Aufteilung in unserer Zeichenfolge haben , wenn wir hier den Wert A haben. Also ähnlich, wenn ich jedes Zeichen in meiner Zeichenfolge ausspucken muss , was ich tatsächlich verwenden werde, werde ich hier tatsächlich eine leere Zeichenfolge ohne das Leerzeichen hinzufügen Okay? Also, wenn ich das jetzt einfach speichere und jetzt einfach auf Check Nagram klicke, kannst du hier sehen , dass jedes Zeichen, das wir in der Zeichenfolge hatten , als separates Array-Element betrachtet wird So werden wir hier also unseren Wert trennen. Okay? Also, was ich jetzt tun muss, werde ich einfach aufschreiben. Nehmen wir an, ich schreibe „Hier hören und füge „Stille“ hinzu. Wenn ich auf Anagramm überprüfen klicke, kannst du hier sehen , dass wir unsere Zeichenfolge in den Bereich der Zeichen aufgeteilt haben unsere Zeichenfolge in den Bereich der Zeichen Aber im Moment können Sie sehen, dass wir hier den falschen Wert haben Der Grund dafür ist, dass wir dieselben Zeichen in derselben Frequenz haben , aber wir haben hier immer noch die unterschiedliche Reihenfolge. Was wir also tun müssen, ist die Reihenfolge zu ändern. Um also die Reihenfolge zu ändern, müssen wir hier die Methode verwenden, die eigentlich Sortiermethode genannt wird. Aber vorher muss ich hier noch eine weitere Methode verwenden, und das wird die gemeinsame Methode sein. Join-Methode verbindet also im Grunde Die Join-Methode verbindet also im Grunde alle Elemente, die wir in unserem Array haben, zu einer Zeichenfolge. Okay? Also hier habe ich auch ein Argument, das auch ein Trennzeichen ist. Wenn ich also jedes Element, das ich in meinem Array habe, durch ein beliebiges Zeichen trennen möchte, kann ich dieses Trennzeichen einfach hinzufügen. Nehmen wir an, ich wollte jedes Array-Element durch ein Komma trennen Also kann ich hier einfach das Komma hinzufügen und es wird jeden einzelnen Wert, den wir in unserem Array haben, in unserer Zeichenfolge Also lass uns zurückgehen. Und hier , was du tun musst, wenn ich einfach auf unseren Button klicke. Jetzt kannst du das sehen, es trennt tatsächlich alles mit diesem Komma Aber ich will das Komma hier nicht haben , okay? Also kann ich hier einfach nichts aufschreiben. Das wird also auch die leere Zeichenfolge sein. Wenn ich jetzt einfach zurückgehe und erneut darauf klicke, können Sie sehen, dass wir wieder unseren Zeichenkettenwert haben, aber wir haben hier eine Sache übersehen, nämlich unseren Wert zu sortieren. Wie können wir also unseren Wert sortieren? Wir gehen zurück. Und vor dem Zusammenfügen, nach dem Teilen, werden wir eine weitere Methode hinzufügen, nämlich die Sortiermethode. Und das würde unseren Artikelbereich tatsächlich in aufsteigender Reihenfolge alphabetisch sortieren Okay? Also, wenn ich hier die SAR hinzufüge und wenn ich hier auch die Methode Odd hinzufüge , funktionieren die Sortiermethoden standardmäßig mit der Zeichenfolge, nicht mit der Zahl. Für die Zahlen müssen Sie also Colbck-Funktion hinzufügen Okay? Im Moment speichere ich das einfach und jetzt werden wir unsere Charaktere sortieren lassen. Jetzt können Sie sehen, dass wir hier dieselben Zeichen in derselben Reihenfolge und in derselben Anzahl haben hier dieselben Zeichen . Jetzt sind diese beiden Wörter tatsächlich das Anagramm. Aber wenn ich den Wert hier einfach auf das Ass und sagen wir den Hund ändere , wäre das falsch Okay, also noch eine Methode , die wir hier hinzufügen können. Also, wenn ich zur Hexe BT zurückkehren kann und eine Sache kopieren muss also hatten wir diese Phrasen, und Sie können das sehen, wir haben die beiden Wörter hier. Ich werde mit diesem hier hingehen, und ich werde das einfach hier hinstellen Ich werde auch den zweiten kopieren. Ordnung, also werde ich wieder zu unserem Projekt zurückkehren . Geben wir das einfach als zweiten Wert an. Wenn ich jetzt einfach auf die Schaltfläche klicke, kannst du das sehen. Wir haben tatsächlich dieselben Zeichen in denselben Zahlen und sogar in derselben Reihenfolge, aber wir haben hier immer noch den falschen Wert. Der Grund dafür ist, dass wir hier dieses zusätzliche Leerzeichen haben, wenn Sie hier sehen können, dass wir dieses Leerzeichen hier haben, und wir haben dieses Leerzeichen auch hier für das zweite Mal, und im ersten Wort, wir haben das Leerzeichen für das eine Mal. Das kann also zu Problemen führen, wenn Sie nach den Sätzen oder Ausdrücken suchen möchten . Dafür haben wir also eine Methode, die als Ersetzen bezeichnet wird, okay? Also werden wir hier eine weitere Methode hinzufügen nachdem wir unsere Buchstaben in Kleinbuchstaben umgewandelt haben, nämlich die Replace-Methode In den Ersetzungsmethoden haben wir also die beiden Argumente erste wäre das Muster, das wir abgleichen müssen , um den Wert zu ersetzen, und das zweite wäre der Ersetzungswert. Nehmen wir an, ich möchte das Leerzeichen, das wir haben, durch ein Komma oder etwas anderes oder vielleicht durch den Schrägstrich ersetzen Leerzeichen, das wir haben, durch ein Komma oder etwas anderes oder vielleicht , etwa so Also kann ich es so ausdrücken, okay? Und ich kann dasselbe auch mit dem zweiten machen. Also lass uns das speichern und wir werden tatsächlich zurückkehren. Und wenn ich auf unseren Button klicke, kannst du jetzt sehen, dass wir diesen Schrägstrich haben Okay. Aber offensichtlich wird das nicht funktionieren. Wir müssen dort ein Muster hinzufügen. Um nun das Muster hinzuzufügen, haben wir ein wirklich leistungsstarkes Konzept. Sie haben vielleicht schon davon gehört, was ein regulärer Ausdruck ist. Also werde ich hier reguläre Ausdrücke aufschreiben. Also, was ist der reguläre Ausdruck hier? Wenn ich es also vergrößern kann, können Sie sehen , dass ein regulärer Ausdruck eine Abfolge von Zeichen ist , die ein Suchmuster bilden. Okay? Wir können also im Grunde lernen, wie wir diese regulären Ausdrücke in unseren Code einfügen können. Aber im Moment müssen wir das nicht lernen. Wir können einfach zur Gewohnheit übergehen und ich werde ihn fragen, ob ich ein Muster für reguläre Ausdrücke haben möchte . Okay, lass es mich einfach vergrößern. Ich möchte ein Muster für reguläre Ausdrücke haben, das mit allem außer Kleinbuchstaben übereinstimmt mit allem außer , oder? Also kann ich diesen Prompter einfach in Ordnung ausführen. Wir haben hier also unseren regulären Ausdruck und wir haben auch den Modifikator, sodass wir hier nicht ins Detail gehen müssen Was wir tun können, können Sie hier sehen, wir können das einfach von hier kopieren und wir werden es in unseren Code aufnehmen In Ordnung, also muss ich das entfernen. Perfekt. Und ich muss das auch hier hinstellen. Perfekt. Gut, also ich muss das auf Okay setzen, also habe ich hier einen Fehler gemacht. Also das wird von hier entfernt und wir fügen eine Aufteilung hinzu. Wir müssen hier wieder die Ersetzungsmethode hinzufügen. Und in unserer Ersetzungsmethode müssen wir das einfügen. Perfekt. Und ich möchte das durch nichts ersetzen. Ich möchte das durch eine leere Zeichenfolge ersetzen. Okay? Wenn du also immer noch nicht verstehst , was mit dieser Methode hier passiert , kannst du das einfach von hier kopieren und du kannst wieder zum Cha JBT gehen und ihn einfach fragen, wie das funktioniert, wie das funktioniert In JavaScript. Und es wird dir tatsächlich zu jedem einzelnen Schritt eine Erklärung geben, okay? Ich kann Schritt für Schritt eine Erklärung aufschreiben. Okay? Also ich glaube, ich habe da drüben einen Rechtschreibfehler gemacht, aber das ist okay. Ordnung, hier kann es Ihnen einfach zuerst zeigen , dass dieser Ausdruck bei unserer ersten Antwort ein JavaScript-Methodenaufruf ist , der eine Zeichenfolge verarbeitet, um alle Zeichen außer den Kleinbuchstaben zu entfernen alle Zeichen außer den Kleinbuchstaben Okay? Also im Grunde wird es alles außer den Kleinbuchstaben entfernen alles außer den Kleinbuchstaben Okay? Und wie wir wissen , haben wir in unserem Code nur Kleinbuchstaben Es werden also nur die Leerzeichen entfernt, die wir haben, und auch die räumlichen Zeichen, die wir haben können Wenn ich hier also irgendein Dollarzeichen hinzufüge, also sagen wir dieses, und wenn ich es hier einfach hinzufüge, wird es auch gelöscht. Klicken Sie erneut auf den Button. In Ordnung, also ich muss zurück und ich glaube, ich habe hier einen Fehler gemacht. Ordnung, also muss ich das vor diese Plattenmethode stellen . Ordnung. In Ordnung, ich denke, jetzt funktioniert das gut. Also lass uns das nochmal speichern und zurück gehen, auf unseren Button klicken. Perfekt. Sie können das sehen, wir haben diese Leerzeichen entfernt, die wir hatten, und auch unsere Sonderzeichen. Ordnung. Und das ist die Logik, die wir entwickeln mussten, um zu überprüfen, ob unsere Worte Anagramm sind oder nicht Okay? Also, was wir jetzt tun müssen, wir gehen zurück zu einem Code. Lass uns hier einfach die Größe ändern. Nun, das funktioniert gut. Okay? Alles, was wir in unserem Anagramm-Checker haben, funktioniert einwandfrei Jetzt müssen wir das in das bedingte Format bringen. Okay? Wir haben also unsere Logik, die für unsere Check-Anagramm-Funktion bereit ist Was wir hier tun müssen, ist, dass, wenn der erste Eckpunkt und der zweite Scheitelpunkt einander gleich sind , was sie tun müssen Es wird tatsächlich den Text in einem Wortergebnis-Absatz hinzufügen. Ich werde hier die Eigenschaft Textinhalt hinzufügen. Also, was hier falsch sein wird, Worte sind Anagramme. Also lass uns das einfach speichern. Und wenn Sie zu unserem Browser zurückkehren, wenn Sie auf eine Schaltfläche klicken, können Sie jetzt Folgendes sehen, die Wörter sind Anagramm, und wir haben unsere Ergebnisse hier. Wir können hier aber auch die zusätzlichen Bedingungen hinzufügen. Was auch immer wir hier tun müssen, ich werde hier eine weitere Bedingung stellen: Wenn das erste Wort und das zweite Wort einander nicht gleich sind, dann werden sie im Grunde dasselbe tun. Ich werde das einfach kopieren und hier einfügen, das wird kein Anagramm sein Perfekt. Ich kann das auch eintragen, wenn L das staatliche Mittel ist, und das würde gut funktionieren. Ich habe das einfach hier hingestellt. Perfekt. Gehen wir nun zurück zu unserem Projekt und klicken auf Check nagram Wir haben das Anagramm. Aber wenn ich, sagen wir, die Katze und den Hund hinzufüge, sind die Worte kein Anagramm Es funktioniert perfekt. Ordnung, also die Hauptfunktionalität unserer Funktion ist tatsächlich erledigt, weil sie das Wort überprüft, ob es ein Anagramm ist oder nicht Aber jetzt müssen wir einige H-Fälle hinzufügen. Also gehe ich zurück zum Browser. Und hier, sagen wir, wenn ich hier keine Eingabe mache, wenn ich auf unsere Schaltfläche klicke, würde uns das tatsächlich eine Art Fehler geben. Also muss ich das zuerst umformulieren. Okay. Also muss ich das Projekt erneut ausführen. Und lassen Sie uns das einfach in die Spezifikation aufnehmen, in die Konsole gehen und sagen wir, ob ich das Wort in der ersten Eingabe hinzufüge und ob ich in der zweiten Eingabe kein Wort hinzufüge Sie können das sehen, es gibt mir immer noch kein Anagramm, aber das ist nicht die richtige Botschaft für diese Art von Fällen Also muss ich hier in unserem Code die Bedingungen hinzufügen , dass ich zu den Hauptdoes zurückkehren werde Das erste wäre also, wenn der erste Worttext falsch ist. Es bedeutet einfach, dass, wenn Sie keinen Text für das erste Wort haben, und ich werde den Endoperator hinzufügen, und wir werden dasselbe mit dem zweiten Wort Text machen . Und was ich hier tun kann, ist, dass wir den Text einfach zu unserem Ergebnis hinzufügen können. Bitte fügen Sie beide Eingaben hinzu. Und ich kann hier auch eine zweite Bedingung hinzufügen, sicher, und ich kopiere sie einfach. Und jetzt füge ich das einfach hier ein. Aber hier ändere ich einfach den Endoperator in den Operator OR. Ordnung. Und hier werde ich auch die Nachricht ändern. Bitte fügen Sie hier die restlichen Eingaben hinzu. Also hier werde ich Text hinzufügen, und hier werde ich Text Perfect hinzufügen. Also lass uns das jetzt speichern. Und jetzt, wenn ich einfach zu unserem Browser zurückkehre und in meine zweite Eingabe nichts schreibe. Rechts kannst du hier sehen, dass wir immer noch kein Anagramm haben Dafür gibt es einen Grund , denn da es diese Bedingungen und auch diese Bedingungen durchmacht diese Bedingungen und auch diese Bedingungen , okay? Deshalb haben wir kein Anagramm. Aber was ich hier tun möchte, ist, dass wird, wenn eine dieser Bedingungen zutrifft meine Funktion immer dann beendet Also was ich tun kann, ich kann die Rücksendeerklärung einfach hier und auch hier hinzufügen . Und wenn nun eine der Bedingungen , die wir hier haben, erfüllt wäre, würde unsere Funktion diesen Teil des Codes nicht lesen. Okay. Gehen wir jetzt zurück und klicken erneut auf die Schaltfläche. Jetzt kannst du das sehen. müssen bitte den restlichen Text hinzufügen. Also muss ich das Leerzeichen hier hinzufügen. Und wenn ich in beiden Eingaben keinen Text hinzufüge, haben wir das , fügen Sie bitte beide Eingaben hinzu. Also, das sind jetzt die entsprechenden Nachrichten. Also, jetzt gehen wir wieder hierher und was müssen wir tun? Ich werde hier die Bedingung ändern , dass, wenn die Länge des Kraftwortes und die Länge des zweiten Wortes nicht übereinstimmen, sie einfach kein Anagramm sind, okay? Und dann können wir der Bedingung den gleichen Code hinzufügen. Also lass uns das von hier kopieren und hier platzieren. Perfekt. Jetzt wird das gut funktionieren. Also, wenn ich hier die Stille hinzufüge und wenn ich hier die Lektion hinzufüge, wird das perfekt funktionieren. Also haben wir unsere Funktionalität in unserer Hauptfunktion umgesetzt. Also jetzt, was wir tun müssen. Okay, jetzt gehen wir zurück zu einem Dokument. Schauen wir uns also an, was wir nächstes Jahr tun müssen. Also haben wir die EstimL-Elemente gemacht. Wir haben hier unsere Funktion definiert. Wir haben den Event-Listener für die Schaltfläche erstellt. Jetzt müssen wir die Modelllogik hinzufügen. Alles klar? Also, was ich dafür tun muss, muss ich hier eine Funktion erstellen , die das Prüfmodell sein wird, und das wird auch die Fehlerfunktion sein. Also, was wir hier verwenden werden , wir werden tatsächlich unseren lokalen Speicher verwenden. Ordnung. Also, wie du das machen wirst, ist ziemlich einfach. Im lokalen Speicher haben wir also zwei Methoden. Okay. Man hilft uns also tatsächlich dabei die Werte zu sehen , die wir in unserem lokalen Speicher haben , siehe Werte. In unserem lokalen Speicher. Und der zweite hilft uns tatsächlich dabei, Werte in unserem lokalen Speicher festzulegen . Werte setzen. Die Methode, die wir hier verwenden, um die Werte zu sehen oder um nach dem Wert zu suchen, ist also , Items abzurufen. Okay? Und hier werden wir den Namen der Immobilie hier aufschreiben. Okay? Und bei der Methode für festgelegte Werte handelt es sich tatsächlich um die Methode der Mengenelemente. Und hier müssen wir zwei Dinge hinzufügen. erste ist der Name der Immobilie, und dann haben wir hier den Wert. Sie können ihm hier also auch einen Namen geben, und dann haben wir den Wert hier. Sie können also den Namen hier und den Wert hier eingeben. Und um darauf zuzugreifen, müssen Sie hier nur den Namen hinzufügen. Ordnung, jetzt werden wir unsere erste Methode verwenden, nämlich GT-Artikel Also werde ich hier unseren Zustand aufschreiben falls wir nichts finden Also lass mich einfach den lokalen Speicher aufschreiben. Jetzt können wir hier auf diese Elemente zugreifen. Sie können hier also sehen , dass wir diese verschiedenen Methoden und die Eigenschaft haben . Länge ist also eigentlich die Eigenschaft, und abgesehen davon haben wir hier diese Methoden. Im Moment müssen wir also GD-Item-Methoden verwenden, und ich werde die Klammern verwenden Und jetzt müssen wir nach dem Namen der Immobilie suchen. Also sagen wir, ich will nur sehen, ob alles klar ist. Also heißt es einfach , dass ich den Wert der besuchten Immobilie in meinem lokalen Speicher zurückerhalte den Wert der besuchten Immobilie . Aber wenn ich diese Bedingung umkehren muss, zum Beispiel wenn ich diese Eigenschaft nicht finden möchte, dann kann ich hier einfach den Not-Operator hinzufügen. Diese Bedingung würde jetzt also einfach bedeuten, dass der Code ausgeführt wird. Wenn Sie den Artikel nicht in der lokalen Historie finden . Das wird also, sagen wir, das besuchte Objekt sein. Also gut, jetzt müssen wir hier unseren Codeblock hinzufügen. Also, wenn ich die Immobilie hier in meinem lokalen Speicher nicht sehe, führe ich hier nur das Konsolenprotokoll durch, okay? Wir haben den Artikel nicht in unserem lokalen Lager besucht.