JavaScript-Funktionen: Master-Funktionen, Pfeilfunktionen mit Projekten

1. Einführung in den Kurs: Hallo, da. Willkommen zu den Ergebnissen JavaScript-Funktionen durch die Erstellung realer Projekte. Mein Name ist Wessel und ich freue mich, Sie auf dieser aufregenden Reise in die Welt der JavaScript-Funktionen begleiten dieser aufregenden Reise in die Welt der JavaScript-Funktionen Funktionen sind das Rückgrat von JavaScript oder jeder Programmiersprache, die Sie lernen Es ermöglicht effizienten und modularen Code , den Entwickler schreiben können. Und in diesem Kurs werden wir uns mit diesem Funktionskonzept befassen, von den Grundlagen der Definition und des Aufrufs von Funktionen bis hin zum Verständnis von Parametern und Argumenten. Wir werden auch über die Grundlagen wie das Aufrufen Funktionen bis hin zu fortgeschrittenen Themen wie Ausdrücken, Pfeilfunktionen und sogar Methoden innerhalb von Objekten und Arrays sprechen. Nun, hier ist, was wir behandeln werden Wir werden über Funktionen in JavaScript sprechen. Wir werden auch über Parameter und Argumente sprechen. Was sind Parameter und wie unterscheiden sich diese beiden Begriffe voneinander Wie können Sie Werte aus einer Funktion zurückgeben? Hier werden wir darüber sprechen, wie Funktion Daten verarbeitet und die Werte zurückgibt. Wir werden über Funktionsausdrücke und Pfeilfunktionen sprechen. Dies ist eines der entscheidenden Themen bei denen Lernende häufig auf Schwierigkeiten stoßen Wir werden auch über Funktionen innerhalb von Objekten und Array-Methoden sprechen Objekten und Array-Methoden Hier dreht sich also alles um den Kurs, und in diesem Kurs gibt es auch praktische Projekte, in denen wir alles , was wir gelernt haben, in diesem speziellen Kurs anwenden werden alles , was wir gelernt haben, in diesem speziellen Kurs anwenden in diesem speziellen Kurs , um etwas Sinnvolles aufzubauen. Am Ende werden Sie ein fundiertes Verständnis dafür haben, was Funktionen sind, und dieses Wissen wird Sie in die Lage versetzen, interaktive und erstaunliche Jaw-Script-Programme zu erstellen interaktive und erstaunliche Jaw-Script-Programme Dieser Kurs ist für Entwickler aller Niveaus geeignet. Egal, ob Sie ein Anfänger, ein fortgeschrittener Lerner oder jemand sind , der fortgeschritten ist und seine JavaScript-Fähigkeiten auffrischen möchte, dieser Kurs kann Sie mit erstaunlichem Wissen und einigen Praktiken ausstatten erstaunlichem Wissen und einigen Praktiken , die Sie noch nie zuvor gehört haben Nachdem das geklärt ist, sind Sie bereit, die Kunst der Ja Script-Funktionen zu beherrschen und Ihre Schreibweise zu verändern, lassen Sie uns eintauchen und gemeinsam beginnen Ich sehe dich auf der anderen Seite. 2. JavaScript-Funktionen freischalten: Die Grundlagen: Hallo, jetzt ist es an der Zeit, dass wir anfangen über Funktionen in JavaScript zu sprechen Nun, was ist zuallererst eine Funktion? Nun, eine Funktion ist im Wesentlichen ein Codeblock. Es handelt sich also um mehrere Codezeilen, die zusammen gruppiert sind, und sie wurden entwickelt, um eine bestimmte Aufgabe auszuführen. Das Beste an der Funktion ist, dass sie im gesamten Programm mehrfach wiederverwendet werden kann gesamten Programm mehrfach wiederverwendet werden Lassen Sie mich Ihnen nun zeigen, wie Sie Funktionen schreiben würden und warum Sie so schreiben würden Okay? Nehmen wir an, wir haben eine sehr einfache Aufgabe , einen Benutzer zu begrüßen. Okay? Also sage ich Hallo und lassen Sie uns sagen, ich begrüße einen Benutzer. Ein Benutzername ist Alice Awa. Okay? Ich mache das. Nehmen wir an, ich möchte diese Begrüßung dreimal machen. Okay? Also kopiere ich P natürlich dreimal. Also begrüße ich es dreimal, richtig? Ich begrüße den Benutzer dreimal. Nehmen wir an, ich möchte eine Nachricht hier in der Begrüßung ändern , richtig? Und das sollte sich in allen Nachrichten widerspiegeln. Nehmen wir an, die Änderung, die ich vornehmen möchte, besteht darin, einen weiteren Ausruf hinzuzufügen Okay? Jetzt muss ich sicherstellen, dass ich das an allen Stellen aktualisiere das an allen Stellen wo ich dieses Gitter verwende Und wenn ich das speichere, sehe ich die Ausgabe hier oben. In Ordnung. Aber jetzt ist es okay, wenn die Gruppe von Aussagen wie hier drüben die Aufgabe nur darin besteht, zu grüßen, oder? Es ist nur eine einzige Aussage, und jede Änderung hier ist überschaubar, weil die Codebasis nicht so riesig ist Nun, was ich tun möchte, ist zur Bequemlichkeit überzugehen, oder? Und das können wir mit Hilfe der Funktion erleichtern. Lassen Sie mich Ihnen nun zeigen, wie Funktionen Ihnen das Leben erleichtern können. Zuallererst muss ich hier eine Funktion erstellen , damit wir sie verwenden können. Also kann ich dieses Funktionsschlüsselwort verwenden. Du kannst sehen. Und Sie haben hier zwei Optionen, Funktionsanweisung und Funktion. Wenn du Funktion auswählst, wird dir die Funktion angezeigt , das Schlüsselwort. Aber ich hätte gerne die Funktionsanweisung. Sie können also sehen, dass das erschienen ist. Jetzt wird automatisch ein Platzhalter für Namensparameter hinzugefügt, und es wurden diese geschweiften Klammern hinzugefügt, oder? Also werde ich den Namen hier aktualisieren, um zu grüßen, okay? Also statt der Parameter entferne ich das erstmal und ich bin im Körper Also diese lockige Zahnspange, okay? In dieser lockigen Zahnspange kannst du den Funktionskörper haben, kannst du den Funktionskörper haben Ich verwende diesen Begriff Funktionskörper. Nun, was ist Funktionskörper? Funktionskörper ist der Codeblock , der ausgeführt werden kann , wenn diese Funktion aufgerufen wird, okay? Nehmen wir an, ich verschiebe diesen Code hierher. Okay. Und jetzt muss ich die Begrüßung nicht mehr so nennen oder den Benutzer auf diese Weise begrüßen Okay. Stattdessen kann ich diese Funktion aufrufen, oder? Jetzt habe ich diese Funktion „Begrüßen“, okay? Der Name der Funktion ist Greet. Also muss jede Funktion, die du erstellst, einen Namen haben, okay? Und Sie weisen ihr einen Namen zu , weil Sie diese Funktion später aufrufen müssen, oder? Wenn ich diese Funktion jetzt aufrufen möchte, sage ich „Greet“ und öffne und schließe mit runden Klammern Wenn ich das speichere, wirst du sehen, dass Hello Alice jetzt hier gedruckt wird, okay? Wenn ich den Benutzer dreimal begrüßen möchte, wie es meine ursprüngliche Anforderung war, kann ich das dreimal aufrufen und Sie werden sehen, dass es dreimal und Sie werden sehen, dass es Wenn ich nun die Nachricht ändern möchte, also sagen wir, wenn ich diesen zusätzlichen Ausruf loswerden möchte, der hinzugefügt wurde , muss ich diese Änderung nur an einer Stelle vornehmen, richtig? Und es spiegelt sich überall wider, und es spiegelt sich überall wider, im Grunde überall, wo diese Funktion aufgerufen wird, o weil es der einzelne Codeblock ist, der wiederverwendet und mehrfach aufgerufen wird Bei diesem Ansatz duplizieren Sie den Sie duplizieren das Konsolenprotokoll dreimal , damit diese Aufgabe dreimal ausgeführt wird, oder? Aber hier duplizierst du den Code nicht. Sie haben das Konsolen-Punktprotokoll einmal geschrieben. Wenn Sie diese Aufgabe jedoch dreimal ausführen möchten, rufen Sie die Funktion zweimal auf, da diese Dotlog-Anweisung für die Konsole jetzt in einer Funktion befindet. In Ordnung? Kommen wir also zurück zur Definition. Eine Funktion ist ein Codeblock. Sie können sehen, dass dies ein Codeblock ist. Jetzt können Sie hier mehrere Anweisungen haben. Nehmen wir an, ich möchte den Benutzer auch begrüßen und sagen, dass Sie jetzt angemeldet sind Okay, so etwas. Ich zeige diese Art von Nachrichten an. Okay? Du kannst Hello Alice sehen, du bist jetzt eingeloggt. Hallo Alice, du bist jetzt eingeloggt. Hallo Alice, du bist jetzt eingesperrt. Es kommt dreimal pro Nachricht rein. Okay? Also ist es ein Codeblock. Nun können Sie innerhalb der geschweiften Klammern mehrere Zeilen mit Anweisungen, mehrere Zeilen JavaScript-Code haben , der Teil dieser Funktion ist und immer dann aufgerufen oder aufgerufen wird , wenn diese Funktion aufgerufen wird Und im nächsten Teil heißt es, dass es eine bestimmte Aufgabe konzipiert ist Sie gruppieren im Wesentlichen mehrere Anweisungen zusammen und benennen sie als Funktion und diese dient dazu, eine bestimmte Aufgabe auszuführen Zum Beispiel ist es hier so konzipiert, dass es den Benutzer begrüßt, oder? Und Sie verwenden dieses Funktionsschlüsselwort hier. Das sollten Sie sich nicht entgehen lassen, wenn Sie Funktionen auf diese Weise erstellen, okay? Und es kann mehrfach wiederverwendet werden. Also rufst du diesen Codeblock hier jetzt dreimal auf, oder? Nicht einmal, zweimal Und Sie können es so oft anrufen, wie oft Sie es anrufen möchten oder die Anforderung ist. Stimmt das? Das ist also eine Funktion für dich in JavaScript. Wenn Sie nun aus einer anderen Programmiersprache wie Python oder Java kommen , müssen Sie sich dieses Funktions- oder Methodenkonzepts bewusst sein , richtig. In JavaScript funktioniert es also genauso, aber die Syntax ist ein bisschen anders. Ordnung? Also ich hoffe, das war nützlich 3. Dynamischer Datenfluss: Parameter und Argumente meistern: Im Moment habe ich eine Funktion namens GET , mit der Benutzer begrüßt werden Und hier in diesem Codeblock habe ich die gesamte Operation, die Benutzer zu begrüßen Und die Operation besteht darin, dass es ein paar Print-Anweisungen gibt ein paar Print-Anweisungen wie z. B. Konsolen-Log-Anweisungen , wie z. B. Konsolen-Log-Anweisungen, die zwei Nachrichten ausgeben, zwei verschiedene Nachrichten auf die Konsole. Ich rufe diese Funktion dreimal auf. Und als Ergebnis sehen Sie, dass sechs Nachrichten auf die Konsole gedruckt werden, oder? Nun, hier drüben ist die Nachricht , die Sie sehen, ziemlich statisch. Was ist, wenn ich später oder in Zukunft die Nachricht für jeden Benutzer anpassen möchte, und was ist, wenn ich jeden Benutzer bei seinem Namen nennen möchte? Weil diese Funktion momentan nur verwendet wird, um Alice zu begrüßen und keinen anderen Benutzer In diesem Fall können Sie mit JavaScript Funktionsparameter wie mit jeder anderen Programmiersprache übergeben wie mit jeder anderen Programmiersprache Nehmen wir an, ich möchte, dass der Name dynamisch ist, okay? Also kann ich den Namen hier akzeptieren. Also gut. Ich spezifiziere den Datentyp nicht, bitte notieren Sie sich das hier. Und dann hier drüben statt Alice, was ich mache, ist, dass ich 1$ habe, also muss ich 1$ hinzufügen und sage Alice Entschuldigung, nicht Alice, ich werde einen Namen haben. Und dann wird das eine Seitenvorlage sein, wie diese. In Ordnung. Und wenn ich das speichere, erhalte ich die Fehlermeldung undefiniert, weil dieser Name noch nicht initialisiert wurde, oder Also werden wir das in Kürze tun. Aber der Punkt, den ich hier erwähnen möchte ist die Sache, die Sie hier übergeben, Name ist ein Funktionsparameter. Okay? Nun, um die Funktion auf die richtige Weise mit Parametern aufzurufen, müssen Sie etwas übergeben, das als Argumente bezeichnet wird, oder? Also hier drüben müssen wir jetzt die Funktionsargumente übergeben , weil der Name als undefiniert gilt. Sie können undefiniert sehen Es wird dreimal gedruckt und alle drei Male ist es undefiniert, Also gebe ich den Namen hier drüben weiter, damit ich einmal Alice sagen kann, dann kann ich John sagen und dann kann ich Lucy sagen, und dann kann ich Lucy sagen Und wenn ich das speichere, siehst du Hello Alice, Hello John und Hello Lucy, richtig? Also diese Sache hier drüben ist Streit, okay? Das sind Funktionsargumente, die ich an die Funktionsparameter übergebe. Warum übergeben wir also die Argumente? Weil die Funktion Parameter akzeptiert. Und hier können Sie sehen, dass Name der Name des Parameters ist , den wir hier initialisieren möchten, okay? Und dann wird das innerhalb der Funktion so verwendet , wie die Funktion es nutzen möchte Deshalb möchte ich, dass Sie sich alle an den Unterschied zwischen Parametern und Argumenten erinnern zwischen Parametern und Argumenten Sie sind nicht beide dasselbe, richtig. Die meisten Programmierer sind verwirrt und ich weiß nicht, was der Unterschied zwischen einem Parameter und dem Argument ist zwischen einem Parameter und dem Argument Sie denken, sie sind gleich, oder? Also dieses Ding hier drüben ist ein Parameter. Wenn Sie mit der Maus darauf zeigen, wird der Parametername angezeigt. Und das Ding hier ist ein Argument, denn das ist ein Wert, den Sie übergeben und verwenden, der Parameter ist tatsächlich initialisiert Das ist also ein Argument. In Ordnung. Also dieses Funktionsargument wird verwendet, und das sind Funktionsparameter , die deklariert werden. Alles klar? Also, das ist eine Funktion mit einem Parameter. Es wird Szenarien geben, in denen Sie mehrere Werte, mehrere Argumente an eine Funktion übergeben möchten geben, in denen Sie mehrere Werte, mehrere , oder? In diesem Fall können Sie natürlich mehrere Parameter haben. Hier kann ich H hinzufügen, und ich kann hier ein weiteres Konsolenprotokoll hinzufügen. Okay. Du bist von oder, ich sage, wir drucken das Ho. Okay, so etwas in der Art, und ich werde die Anführungszeichen hier loswerden und Bac-Häkchen hinzufügen. In Ordnung. Jetzt kann ich sie retten. Okay. Sobald Sie das gespeichert haben, werden Sie sehen, dass undefined gedruckt wird Nun, diese Funktion akzeptiert zwei Parameter, aber wir übergeben nur einen, richtig? Also müssen wir auch den zweiten Parameter übergeben. Also ich kann hier 22 sagen. Das könnten 21 sein, und du kannst hier in jedem Alter bestehen. Das könnten 29 sein, so etwas in der Art. Das speicherst du, du wirst sehen, Hallo Alice, du bist 22 Jahre alt Du bist jetzt eingesperrt. Hallo, John, du bist 21 Jahre alt. Du bist jetzt eingesperrt Hallo, Lucy, du bist 29 Jahre alt und jetzt eingesperrt Was sagt uns das also, dass die Funktion mehrere Parameter haben kann , sodass sie eine Funktion definieren kann Okay? Sie können also eine Funktion mit mehreren Parametern definieren, und wenn Sie eine Funktion mit mehreren Parametern haben , müssen Sie auch mehrere Argumente übergeben , damit sie sie wirklich gut initialisieren kann Ordnung. Nun, eine Sache hier drüben möchte ich mir notieren, ich möchte, dass ihr euch alle notiert, ist dieser Teil des Parameters, der erste Parameter hier drüben, Name ist eine Zeichenfolge, und das ist eine Zahl. Okay? Am Ende kann ich hier einen Typ hinzufügen, Typ von und ich kann hier einfach Alter sagen. Okay. Und ich kann dasselbe auch für den Namen tun. Ordnung. Also geben wir den Namen ein, tippen ab und ich speichere den Namen. Und sobald ich es gespeichert habe, siehst du, Hello Alice string, du bist 22 Jahre alt Okay? Also ein Funktionsparameter hier ist eine Zahl und der andere ist eine Zeichenfolge. In Ordnung. Nun, was ist, wenn ich das in eine Zeichenfolge ändere? Lass mich das speichern. Hoppla. Also lass mich das speichern Jetzt wirst du nach Lousy suchen. Hallo, Lucy. Also Lucy ist eine Schnur, und 29 Jahre alt ist hier auch Okay. Aber im übrigen ist der erste Parameter eine Zeichenfolge und der zweite Parameter ist hier eine Zahl. Okay? Also, was ich mache, ist, der Typ dass der Typ für jeden Funktionsaufruf hier geändert wird. Ordnung, Sie können es hier sehen, und das ist möglich, weil Ja Script dynamisch typisiert ist Sie müssen also keinen Datentyp deklarieren oder definieren, wenn Sie Variablen erstellen Und diese Parameter sind im Wesentlichen Variablen, oder? Dies sind Variablen, die nur innerhalb des Funktionsblocks existieren. Also das ist ein Funktionsblock hier drüben, okay? Diese geschweiften Klammern, dass Sie zwei CRY-Klammern sehen, das ist ein Funktionsblock, und dieser Name und dieses Alter existieren nur darin und dieser Name und dieses Alter existieren nur Also, wenn du versuchst, hier einen Namen zu benutzen, okay? Sorry, nicht das. Also kann ich Console Dot Log sagen und mich hier den Namen sagen lassen. Wenn ich das versuche, sehe ich keine Ausgabe. Selbst für H werde ich keine Ausgabe sehen. Du kannst alles sehen, okay? Name und Alter existieren also nur innerhalb des Funktionsblocks und nicht außerhalb, oder? Und diese beiden sind Variablen, die Parameter für diese Funktion sind, okay? Und Sie können den Typ der Parameter dynamisch ändern den Typ der Parameter Das können Sie hier sehen, oder? Also ja, das ist komplett dynamisch typisiert. Nun, eine weitere Sache , die ich hier hervorheben möchte , ist die Reihenfolge Von den Parametern und Argumenten kommt es an. Okay? Also zum Beispiel, wenn ich dieses Alter hier ändere und wenn ich den Namen hier ändere. Okay? Also Alter habe ich zuerst erreicht. Wenn ich das speichere, wirst du sehen, hallo Nummer 22, du bist Alice Jahre alt, was absolut falsch ist, oder? Weil wir uns austauschen, tauschen wir hier die Bestellung aus, richtig? Also wenn ich die Kontrollseite hier drüben mache, kannst du sehen, dass jetzt alles in Ordnung ist. Okay? Und das muss auch in der Bestellung übergeben werden. Okay, es wird also der Reihe nach initialisiert. Dieser erste Parameter wird also mit Ale initialisiert, 22 werden mit jedem initialisiert Ordnung ist also sehr wichtig. Okay? Also, wenn Sie zehn Parameter haben, können Sie als Zahl mehrere Parameter haben. Hier gebe ich nur ein Beispiel für eins und zwei, aber Sie können drei, vier, fünf, zehn Parameter haben. Das ist absolut okay, oder? Aber wenn Sie so viele Parameter haben , Sie sicher, dass Sie die Werte der Reihe nach übergeben und dass Sie die Reihenfolge nicht durcheinander bringen, weil die Ausgabe, die Sie erhalten, völlig durcheinander Also ich hoffe, das ist soweit so gut. In Ordnung. Jetzt möchte ich über Standardparameter sprechen, und dafür werde ich diese Funktion einfach duplizieren. Ich kopiere und füge einfach ein, okay? Und du siehst, ich werde diese Funktion einfach umbenennen, okay? Ich sage hier „Person begrüßen“, und ich werde hier nur einen Parameter angeben , nur zur Veranschaulichung Ordnung, ich werde alle anderen Aussagen hier loswerden . Wir werden die Dinge einfach halten. Ordnung? Also das ist meine Funktion, die Greet-Funktion Entschuldigung, Greet Person, es heißt, richtig, keine tolle Funktion Eine weitere Sache hier drüben , die Ihnen auffallen kann, ist natürlich, dass ein einzelnes Jaw-Skriptprogramm mehrere Funktionen für verschiedene Zwecke definieren kann mehrere Funktionen für verschiedene Zwecke definieren ein einzelnes Jaw-Skriptprogramm mehrere Funktionen für verschiedene Zwecke definieren kann, oder? Also hier erstelle ich eine andere Art von Begrüßung, richtig. Lassen Sie mich das hier nennen. Okay? Wenn ich das speichere, wirst du keinen Fehler sehen. Okay? Lassen Sie mich diese Begrüßungsperson anrufen, und ich habe diese Funktion aufgerufen Okay? In dem Moment, in dem Sie diese Funktion ohne Argument aufrufen, sehen Sie , dass Sie Hello undefined sehen Warum siehst du Hello undefined? Da dieser Name noch nicht definiert ist, hat er keinen Wert, weil Sie das Argument nicht übergeben haben , okay Nun wird es Szenarien geben, denen Sie irgendwelche Standardwerte oder Parameter festlegen möchten , weil das Halsband oder wer auch immer die Funktion aufruft, die Werte möglicherweise nicht immer weitergibt. Und in diesem Fall möchten Sie vielleicht einen Satz von Standardwerten haben , mit denen der Parameter initialisiert wird Nun, eine Möglichkeit besteht darin, hier einen Standardwert zu haben, okay? Aber das ist nicht gut. In Ordnung. Ich kann hier einen Standardwert wie Gast haben. Okay. Und ich kann diesen Hallo-Gast retten. Aber das ist keine gute Art, Dinge zu tun. Wenn ich tatsächlich einen Wert übergebe , wird dieser Wert überschrieben Und wenn ich nicht möchte , dass das überschrieben wird, muss ich hier unnötige Prüfungen hinzufügen Okay? Aber das Ja-Skript bietet eine einfache Möglichkeit, dies zu tun. In Ordnung. Was Sie tun können, ist wenn Sie den Parameter hier deklarieren, Sie können den Parameter tatsächlich mit einem Standardwert initialisieren , etwa so Okay, so etwas. Wenn du es speicherst, wirst du sehen Hello Guest hier gedruckt wird. In Ordnung. Nun, wenn Sie keinen Parameter übergeben, sehen Sie diese Ausgabe. Wenn Sie irgendeinen Parameter übergeben. Wenn ich also Hallo Ron sage, okay, wenn ich das speichere, wirst du sehen, dass Hello Ron gedruckt wird. Okay? Wenn Sie also irgendeinen Parameter übergeben , werden Sie feststellen, dass dieser Parameter, tut mir leid, wenn Sie irgendein Argument übergeben, keinen Parameter, wenn Sie irgendein Argument übergeben, werden Sie sehen, dass dieses Argument verwendet wird. Aber wenn Sie kein Argument übergeben , wird der Standardwert verwendet, vorausgesetzt, Sie haben hier einen Standardwert definiert , okay? Das ist also ein Beispiel für eine Funktion mit Standardparametern. Wert, richtig? So ist das also sehr hilfreich, Leute. Es wird Szenarien geben. Das ist zum Beispiel eine Begrüßungsperson, oder? Also, wenn du den Namen des Benutzers hier nicht hast , okay? Wir können den Namen hier auf Gast initialisieren lassen, oder? Und dann kann es passieren, dass ein Gast verwendet wird. Wenn der Name nicht verfügbar ist, Gast, wenn Sie Gast nicht verwenden möchten, müssen Sie den Namen, den tatsächlichen Namen des Benutzers, angeben. Okay? Unabhängig davon wird der Benutzer eine ordentliche Ausgabe sehen. Er wird Hello undefined nicht sehen. Richtig. Es wird also eine ordentliche Leistung sein, oder? Nun, das ist eine Funktion mit einem Standardparameterwert. In Ordnung. Ich möchte über Funktion mit Restparametern sprechen. Okay? Also mit dem Restparameter funktionieren. Ordnung. Was bedeutet nun eine Funktion mit einem Restparameter? In Ordnung. Nehmen wir an, ich habe eine Funktion namens Summe berechnen. In Ordnung, sagen wir mal. Und hier, an der Stelle des Parameters, habe ich A P, zwei Parameter, richtig. Und was diese Funktion macht, ist, dass sie Console Dot Log sagt. Es wird hier einfach A plus B machen. Ordnung. Die Sache ist die, ich möchte diese Funktion aufrufen, richtig? Also werde ich die Summe berechnen. Ich werde 1020 bestehen. Ziemlich einfach Es wird also wie erwartet 30 als Ausgabe drucken, oder? Nun, das Szenario oder die Problemstellung ist, das wird gut funktionieren oder es wird funktionieren, wenn Sie wissen, wie viele Argumente Sie bestehen werden, oder? Nun, wenn Sie sich nicht sicher sind, wie viele Argumente Sie an die Funktion übergeben werden, dann können Sie in diesem Fall eine variable Anzahl von Argumenten verwenden, oder? Sie müssen dafür also die Syntax hier ändern, und Sie müssen drei Punkte wie diesen hinzufügen, und Sie können Zahlen sagen, oder? Das sagt uns, dass Numbers der Name des Parameters ist. Okay. Aber es hat eine variable Zahl, oder? Die Anzahl ist nicht festgelegt. In Ordnung. Nun ist die Frage, wie werden Sie das in der Funktion verwenden , wenn die Anzahl nicht festgelegt ist? Ordnung. Also dafür müssen wir vier Schleifen verwenden. Okay, also ich sage, lass die Summe gleich Null sein. Und ich sage vier. Wenn Sie also aus einer anderen Programmiersprache kommen, in anderen Programmiersprache kommen, Ordnung, wie Java, C plus oder einer anderen Programmiersprache, dann ist es wahrscheinlich, dass Sie wissen , was Loops sind, oder? Wenn Sie sich dessen nicht bewusst sind, ist das völlig okay. Bleib einfach bei mir. Wir werden alles besprechen, während wir gehen. Alles klar. Vorerst füge ich diese vier Schleifen hinzu und sage Summe plus gleich, und ich sage hier drüben. Okay. Und am Ende kann ich hier die Konsolenprotokollierung machen. Okay. Und ich kann einiges sagen, okay. Etwas in der Art, oder? Nun, ich habe 1020 bestanden, was mir 30 als Ergebnis Okay, ich kann 1020 und dann 30 bestehen. Als Ergebnis gebe ich 60. Ich kann das noch einmal kopieren und zehn, 20, 30 und 80 weitergeben. Sie können sehen, dass das Ergebnis 140 ergibt, richtig. Das wird also weitergehen, richtig, weil die Anzahl der Parameter, die diese Funktion akzeptiert, aufgrund dieser Syntax variabel ist , oder? Sie können also beliebig viele Argumente übergeben. Abhängig von Ihren Anforderungen, oder? Das ist also etwas, dessen Sie sich bewusst sein sollten. Dies wird als Restparameter bezeichnet. Sie können hier sehen, das ist der Rest-Parameter. Ordnung. Also ja, das ist erledigt. Ein Beispiel, das ich Ihnen zeigen möchte, ist ein boolescher Wert, oder? Sie können also sogar boolesche Parameter übergeben , und wie können Sie boolesche Parameter verwenden, okay ? Lassen Sie uns nun sagen, ob ich überprüfen möchte , ob ein Mitglied Anspruch auf einen Rabatt hat oder nicht, oder? Und ein Benutzer hat Anspruch auf einen Rabatt, wenn er Mitglied ist. Okay? Also ich kann hier Funktion sagen, überprüfen Sie die Eignung hier. Okay. Parameter ist, sagen wir, äh, ich kann sagen, ich kann sagen, es ist Mitglied hier drüben. Okay. Ich werde es einfach halten und hier Console Dot Log sagen. Und innerhalb dessen werde ich einen ternären Operator-Check durchführen lassen. Okay? Also sage ich mal, ist Mitglied. Wenn das Mitglied ist, dann in diesem Fall berechtigt, sonst ausdrucken, was gedruckt wird? Nicht berechtigt. Etwas in der Art. Okay. Und ja. Okay, ich habe also einen Fehler in der Syntax gemacht. Es wäre so etwas, und hier drüben wäre es Colin Okay. Also ja, das ist erledigt. Okay. Also, was Sie tun, ist hier, lassen Sie mich diese zwei neuen Zeilen nehmen , damit es besser lesbar Sie können sehen, was ich getan habe. Ich überprüfe mit Hilfe dieser booleschen Variablen, ob ich Anspruch auf einen Rabatt Wenn er also Mitglied ist, ist er berechtigt, sonst nicht. Okay. Und ganz einfach, du kannst das nennen. Es ist ein Eignungsscheck, das kann man sagen, stimmt. Okay. Sie können also sehen, dass er berechtigt ist, und wenn Sie das auf Falsch ändern, ist er nicht berechtigt. In Ordnung. Also das ist es, was Sie als Ergebnis sehen. In Ordnung. Nun, das waren Funktionen, die auf Variablen basierten. Ordnung. Sie können sogar Funktionen mit Objekten haben. Okay? Funktioniert also mit Objekten als Parameter. Ordnung. In diesem Fall erstelle ich hier eine Funktion. Und nehmen wir an, wir möchten die Adresse ausdrucken. Okay, die Adresse kann also kompliziert sein, oder? In diesem Fall nehmen wir an, sagen wir, wir wollen Street hier drüben haben, ich nehme City und ich nehme SEP. Okay, diese Dinge nehme ich. Okay. Und ich sage hier Console Dot Log. Und mit den Backticks sage ich Adresse. Okay. Und dann drucke ich die Adresse aus. Entschuldigung, das wird Street sein, dann wird das hier After Street sein. Es gibt Stadt und PLZ. Okay, also ich sage Stadt. Und dann wird das PLZ sein. In Ordnung. Also ich habe diese Funktion, okay, das heißt, sie hat drei Parameter oder es gibt ein einzelnes Objekt mit diesen drei Eigenschaften hier drüben. Okay. Also, wie würdest du das hier kühlen? Okay. Also, um das zu klären, kann ich einfach die Adresse ausdrucken anrufen, okay? Und ich hätte die Adresse hier drüben vermieten können. Und ich kann Street Street wie Straße eins sagen , okay, so etwas in der Art. Sie können jede beliebige Scheinadresse haben. Ich kann eine Stadt haben, eine Stadt. Okay, ich füge alle Scheinadressen hinzu. Du kannst PLZ sagen und du kannst hier drüben so etwas sagen Okay. Also ja, das ist es hier drüben. Und ich schließe, mache ein Semikolon und gebe dann Adresse a ein. Wenn Sie nun die Ausgabe sehen, können Sie Adresse Straße eins, Stadt eins sehen, und Sie können sehen, wie das hier gedruckt wird Ich erhalte die Ausgabe also tatsächlich in mehreren Zeilen, weil ich die mehreren Zeilen, weil Zeilentrennung hinzugefügt habe Also gehe ich einfach zurück und verschiebe alles auf eine einzelne Zeile, und Sie können die Ausgabe jetzt sehen, oder? So können Sie also die Objekte übergeben bekommen. Ordnung. Sie können hier sogar eine gedruckte Adresse haben. Dies ist auch eine andere Syntax, und Sie können das Objekt direkt hier erstellen. Du kannst also Street Colin ABC sagen. Okay. Auf diese Weise kannst du auch reingehen. Richtig. Sie können sehen, dass Street jetzt übergeben wird und die anderen beiden undefiniert sind, oder? Es ist also wichtig , dass der Schlüssel für alle Schlüssel-Wert-Paare richtig ist für alle Schlüssel-Wert-Paare richtig Ordnung. Also hier kannst du sagen Stadt zwei, zwei, speichern. Sie können die Ausgabe sehen, ja. Okay. Sie können also auch hier ein Objekt wie dieses dynamisch übergeben oder erstellen. In Ordnung. Und eine weitere Sache, die ich hier hervorheben möchte, sind Arrays, okay? Funktionen können also auch mit Arrays als Parameter verwendet werden. Ordnung. Also, in diesem Fall werden wir funktionieren. Ich sage Zahlen drucken und habe Zahlen als Parameter, und ich kann Console Dot Log sagen und ich kann Zahlen sagen, ungefähr so. Ordnung. Und ich kann diese Funktion aufrufen. Also lass mich das nennen. Ich sage Zahlen drucken und lass mich das anrufen. Ich sage eins, zwei, drei, vier, fünf, sechs. Alles klar? Wenn ich das speichere, wirst du sehen, dass das Array an die Funktion übergeben wird. Das ist also auch ein Beispiel für eine Funktion mit Array. In Ordnung. Also das ist alles, was ich hatte, um über verschiedene Parameter zu sprechen. Ich meine, die Funktionsparameter und die Funktionsargumente. In Ordnung. Ich hoffe, dieses Konzept ist klar. Die Unterscheidung zwischen Parametern und Argumenten ist ebenfalls geklärt, und ich hoffe, Sie haben Klarheit darüber, wie Sie Funktionen erstellen können die verschiedene Argumente akzeptieren, und Sie können sie in JavaScript verwenden . Ordnung? Also ich hoffe, das war nützlich 4. Funktionsausgaben enthüllt: Rückgabewerte erklärt: Nehmen wir an, ich habe eine Funktion, die mir helfen kann, ein Quadrat mit einem Wert zu ermitteln, okay? Nun, SQUA ist in Ordnung. Und dafür akzeptiere ich eine Zahl hier drüben. Ordnung. Und was ist ein Quadrat? Die Zahl eines Quadrats wird mit sich selbst multipliziert. Also sage ich lass Ergebnis und ich sage Zahl zu Zahl. Okay. Jetzt ist das erledigt. Ich kann hier ein Konsolenprotokoll erstellen. Okay, Console Dot Log, ich kann das Ergebnis sagen. In Ordnung. Jetzt rufe ich diese Funktion auf. Ich sage „Get Square und ich rufe Four an. Was ist nun ein Quadrat aus vier? Es ist 16. Sie werden also 16 als Ausgabe sehen. In Ordnung. Nun, was hier passiert, ist, dass wir dieses Argument vier an diesen Parameter an diese Funktion übergeben , und dieser Parameter wird mit vier initialisiert, und dann findet die Berechnung statt, bei der das Ergebnis mit vier zu vier initialisiert wird, was 16 ist, und dann erhalten Sie 16 als Ergebnis, richtig Nun, diese 16 oder das Ergebnis sind außerhalb dieser Funktion nicht zugänglich, Nun, es wird Szenarien geben, in denen Sie vielleicht eine bestimmte Art von Verarbeitung durchführen möchten eine bestimmte Art von Verarbeitung , in der Sie einige Daten, einige Informationen verarbeiten und dann diesen verarbeiteten Wert erhalten möchten. Hier bekommen wir den verarbeiteten Wert nicht von dem Ort zurück, an dem wir angerufen haben, oder? Also hier bitten wir die Funktion, das Quadrat von Vier zu ermitteln. Aber was ist, wenn ich hier das Quadrat verwenden möchte? Ich kann nicht. Ich kann hier nicht auf das Ergebnis zugreifen. Okay? Also, wenn ich diese Aussage einfach von hier nach hier verschiebe, wird es nicht funktionieren, oder? Sie können sehen, dass das Ergebnis nicht definiert ist. Und der Grund dafür ist, dass das Ergebnis innerhalb dieses Funktionsblocks erzeugt wird , also existiert es dort selbst, oder? Sie können außerhalb des Funktionsblocks nicht darauf zugreifen. Wie komme ich also an die Prozessdaten? Aus der Funktion. Nun, hier können Sie die Werte zurückgeben, oder? Also hier, was ich mache, ist anstatt es hier zu drucken, kann ich einfach „Zurück“ sagen. Ich kann dieses Return-Schlüsselwort hier verwenden. Sie können diese Rückgabe sehen, und ich kann das Ergebnis sagen. Okay? Nun, was als Folge davon passieren wird das Ergebnis würde zurückgegeben werden. Okay? Und woher wird es zurückgegeben wo auch immer Sie die Funktion aufrufen. Also, von wo auch immer, von welcher Position Sie die Funktion aufrufen, dort wird dieses Ergebnis zurückgegeben Aber die Sache ist, du siehst es hier nicht, oder? Also, um das Ergebnis zu bekommen, muss man es fangen, und wie fängt man es ein? Du kannst hier quadratisch taub sagen. Sie können eine Variable erstellen und sie auf diese Weise abfangen, o und Sie können diese Variable drucken Jetzt siehst du also 16 als Ausgabe. Was wir hier also im Wesentlichen tun, ist, dass wir eine Funktion G als Quadrat erstellen , um das Quadrat einer Zahl zu verarbeiten oder zu ermitteln, und es kann eine beliebige Zahl sein, und wir erhalten das Ergebnis hier, und wir protokollieren es hier. Richtig? Nun, diese Art, Dinge zu tun, wird als Rückgabe des Werts von einer Funktion bezeichnet . Und hier erhalten wir diesen Wert und führen eine weitere Verarbeitung durch, richtig? Also ja, so können Sie die Werte einer bestimmten Funktion zurückgeben und verwenden. Nun, die Sache hier drüben ist hier dass wir nur einen einzelnen Wert zurückgeben. Natürlich können Sie auch Funktionen haben, die mehrere Werte zurückgeben. Wie würdest du das machen? Also ich kann die Funktion Okay, hier drüben haben und ich kann sagen, Benutzerinformationen abrufen. Okay? Und ich kann Name sagen, Komma H. Okay. Ich kann Rückkehr sagen. Ich kann hier Benutzername und Colden-Name sagen . Okay. Und ich kann Benutzer H sagen und ich kann hier G sagen. Okay. Also das ist erledigt und okay. Also das ist erledigt, und anstatt das hinzuzufügen, kann ich es loswerden und ich kann es auf diese Weise initialisieren lassen Okay. Also mache ich einen Namenstest und ich werde H als Test machen. Okay. Also, wie kriege ich diesen Wert an den Ort, wo auch immer ich das nenne? Okay? Also was ich tun kann, ist das Punktprotokoll der Konsole zu sehen. Okay. Ich kann sofort hier drüben sagen, ich kann G sagen. Tut mir leid, ich verstehe nicht Oh ja, es fängt eigentlich mit G an, G-Benutzerinformation, und ich kann es einfach so nennen Und Sie werden sehen, dass die Benutzerinformationen hier gedruckt werden, oder? Anstatt es auf die Konsole zu drucken , können Sie es auch auspacken, oder? Hier kommen also zwei Eigenschaften rein, username und user H. Sie können das also entpacken und separaten Variablen zuweisen. Wie machst du das? Also kannst du hier links sagen. Du kannst sagen, benutze einen Namen. Und du kannst hier Benutzer G sagen. Okay? Ist das, okay, du kreierst hier drüben und rufst Get User Info an. In Ordnung. Und jetzt, wenn Sie hier die Punktprotokollierung für die Konsole machen, Benutzername, Komma, Benutzer H. Sie können sehen, dass Name das ist und H das ist. Okay? Also, was wir tun, ist, wenn wir den Wert bekommen. Wenn der Wert also von get user info zurückgegeben wird, wird er in Form eines Objekts zurückgegeben. Also das ist hier tatsächlich ein Objekt, Schlüssel-Wert-Paare, richtig? Und so können Sie mehrere Werte aus einer Funktion zurückgeben . Und wir erhalten ein Objekt als Rückgabetyp. Wir können es also entweder auf die Konsole drucken, okay, wir wollen es nicht drucken. Wir wollen es auf benutzerdefinierte Weise handhaben. Was Sie also tun können, ist, diese Werte zu entpacken und sie mithilfe der Syntax separaten Variablen zuzuweisen. Okay? Also haben Sie die Liste der Variablen hier drüben und stellen Sie sicher, dass sie mit dem Namen hier übereinstimmen , denn wenn ich Benutzername eins sage und wenn ich es speichere, werden Sie sehen Benutzername nicht okay ist, hier drüben. Ich werde den ersten Benutzernamen lieben und den werde ich speichern. Sie werden sehen, dass der erste Benutzername jetzt undefiniert ist. Warum? Weil der Name der Eigenschaft username ist und Sie ihn hier in eine Variable mit einem anderen Namen entpacken ihn hier in eine Variable mit einem anderen Namen Okay? Also der Name wurde gefunden, du kannst es sehen, oder? Also das sollte funktionieren. Und diese Syntax, bei der wir Variablen auf diese Weise aus einem Objekt erstellen , wird als Destrukturierung bezeichnet Okay? Und Sie werden diesen Begriff Objektdestrukturierung oft lesen Wir destrukturieren die Objekte. Was ist Destrukturierung? Einfach ausgedrückt, wir packen die Objekte aus, okay? Das Objekt hat diese Syntax, oder? Es hat das Benutzernamen-Attribut und den Benutzer H. Sie entpacken es und erstellen eine Variable namens username, Sie weisen ihr diesen Wert zu, richtig? Dieser Wert, ja. Und dann erstellen Sie Benutzer He und weisen ihm diesen Wert Ziemlich einfach. Wir packen es aus, und das ist die Destrukturierung von Objekten Und hier, eigentlich im Nachhinein, nicht im Nachhinein, es ist ziemlich klar, dass diese spezielle Synta oder dieses spezielle Konzept hier benutzt wird benutzt In Ordnung. So können Sie die Funktion mehrere Werte zurückgeben lassen, natürlich als Objekte. Okay? Nun, so können Sie ein Objekt zurückgeben, richtig. Und ich habe dir auch gezeigt, wie du ein Objekt von dem Ort aus verwenden kannst , an dem du es nennst. Nun, eine andere Möglichkeit , Dinge zu tun oder mehrere Werte zurückzugeben, ist, dass Sie eine Funktion haben können , die ein Array zurückgibt, oder? Das kannst du also auch tun. Also, wie würdest du das machen? Also lass mich dir das zeigen. Also, du kannst die Funktion sehen und du kannst sagen, Dimension holen hier drüben. Okay. Ich akzeptiere keinen Parameter. Nehmen wir an, wir erstellen eine Funktion, um die Dimension zu ermitteln. Ich sage zurück und wir können sofort ein Array hier drüben haben Ich kann 200, 300, 500 sagen. Okay. Und ich kann hier einfach Console Dot Log Get Dimension aufrufen. Okay. Und Sie können die Ausgabe hier sehen. Okay, das ist also auch machbar, okay? Jetzt können Sie das Array hier sogar in einzelne Variablen destrukturieren das Array hier sogar in einzelne Okay? Wie würdest du das machen? Okay? Wir wissen übrigens bereits, wie Destrukturierung funktioniert Also werde ich sagen, hier gebe ich 200300500 zurück, richtig? Also kann ich sagen, Breite okay. Ich kann hier Höhe sagen, ich kann Tiefe sagen. Okay. Ich werde das loswerden und ich werde das bekommen. Ich würde sagen, es ist gleich , Dimensionen zu bekommen. Okay. Und ich kann sagen, Konsole, Punkt, logge dich hier ein. Ich sage Breite, Höhe und Tiefe, ungefähr so. Okay. Hoppla. Also das ist undefiniert Lassen Sie mich sehen, wo das Problem liegt. Die Syntax ist hier also ein bisschen anders. Anstelle von geschweiften Klammern wird es runde Klammern geben Okay? Oh, tut mir leid, keine runden, eckigen Klammern. Das tut mir leid. Okay. Also, wenn du das speicherst, kannst du 200300500 sehen Das hat funktioniert, oder? Es geht hier also um Gehaltserhöhung. Okay? Ich möchte, dass du über eine Sache sprichst zwar hier in dieser Funktion. Okay? Lass mich das hier drüben kopieren. Okay. Ich werde das kommentieren. Ich werde diesen Code nicht entfernen , damit Sie sehen können, welche Änderungen wir vornehmen. Das ist also der Code, okay? Hier, was ich mache, ist, dass ich tatsächlich eine Variable erstelle. Wir müssen diese Variable hier nicht erstellen. Ich kann das einfach ausschneiden und die Berechnung zurückgeben, ungefähr so. Das ist auch in Ordnung. Es gibt eine andere Art, Dinge zu tun. Du kannst 16 sehen. Kurzschrift heißt das, oder Also ja, so können Sie die Funktion zurückgeben. Es tut uns leid. Auf diese Weise können Sie Werte und verschiedene Arten von Werten tatsächlich aus der Funktion zurückgeben. Jetzt können Sie hier auch Function ohne Rückgabe verwenden. Okay? Also kann ich eine Funktion namens Sag Hallo haben. Das ist Ihnen bereits bewusst oder Sie müssen dessen bereits bewusst sein, und Sie können sagen, ich möchte Ihnen zeigen, wie die Dinge funktionieren, wenn Sie versuchen , den Wert einer Funktion zu akzeptieren , die nichts zurückgibt. Okay? Also habe ich Hallo gesagt. Das ist keine Rückgabe. Okay? Ich kann hier Hallo sagen. Okay. Du wirst „Hallo“ gedruckt sehen. Okay? Also, wenn ich Console Dot sage, logge dich hier ein und wenn ich Nachricht sage Okay. Und wenn ich versuche, eine Nachricht als Rückkehr zu dieser bestimmten Funktion zu akzeptieren . Diese Funktion gibt nichts zurück, aber ich erstelle trotzdem eine Nachricht und versuche zu akzeptieren, was auch immer sie zurückgibt, Sie werden undefiniert Es gibt nichts zurück, oder? Also wirst du natürlich undefiniert bleiben, oder? Also ja, es geht darum, richtig. kannst du auch haben also möchte ich dir hier noch einen Koffer zeigen. Also hier setze ich Zahl in Zahl um, okay? Lassen Sie mich danach noch etwas hinzufügen, okay? Ich sage Hallo. Lass uns sehen, was passiert. Wenn ich das speichere, wirst du sehen, dass diese Anweisung nie ausgeführt wird. Sie werden auch sehen, dass es in der Klasse ausgezeichnet ist. Kannst du das sehen? Das ist kein erstklassiges Ergebnis, und das ist ein erstklassiges Ergebnis. Wenn Sie mit der Maus darauf zeigen, wird ein Code erkannt, nicht erreichbar ist Was bedeutet unerreichbarer Code ? Okay? Also was passiert ist, wenn Sie nach der Rückmeldung irgendeine Art von Aussage haben, ich wiederhole, wenn Sie nach der Rückmeldung irgendeine Anweisung haben, dann wird diese Anweisung niemals ausgeführt, oder? Wie wird sie ausgeführt? Weil du tatsächlich von hier zurückkehrst. Du sagtest, kehre zurück. Rückkehr bedeutet, dass du an den Ort kommst, von dem aus du die Funktion genannt wirst, richtig? Sie kommen zu dem Ort, von dem aus Sie die Funktion aufrufen. Das wird also niemals ausgeführt werden. Also das ist natürlich unerreichbarer Code, oder? Das wird niemals ausgeführt werden, oder? Lassen Sie mich die Dinge jetzt ein bisschen interessant machen, oder? Damit du eine Funktion haben kannst. Mit mehreren Rückgabewerten oder Rückgabeanweisungen. Keine Werte. Ich sollte Rückgabeanweisungen sagen, weil wir bereits gesehen haben, wie Sie mehrere Werte in Form von Objekten und Arrays zurückgeben können , oder? Nehmen wir an, ich habe eine Funktion, mit der ich jeden Benutzer überprüfen möchte Ich überprüfe das Alter und akzeptiere das Alter hier. Okay. Jetzt kann ich das Alter angeben, wenn das Alter älter als 18 ist, okay? Dann verwende ich den ternären Operator. Ich sage okay, komm als Erwachsener zurück. Etwas wie das hier. Also ist es ein zurückkehrender Erwachsener, wenn das Alter tatsächlich über 18 ist, okay? Und Hoppla, das erlaubt uns nicht , hierher zurückzukehren, ternärer Ich werde meine Behandlung hier in Anspruch nehmen müssen. Okay, ich sage, ich bin älter als 18, dann ist das in dem Fall okay? Ich werde als Erwachsener zurückkehren wollen, oder? Ich kehre als Erwachsener zurück. Okay? Sonst ist das, was ich zurückgeben werde, unbedeutend. Sagen wir mal. Okay. Also ja, das ist erledigt und ich nehme Semikolons Okay. Also, was hier passiert ist, das genau zu beobachten, Leute, okay? Ich habe eine Veranstaltung, bei ich zwei Steuererklärungen habe, Rückgabe für Erwachsene, Rückgabe für Minderjährige, okay? Das ist also absolut gültig, okay, weil diese beiden Return-Anweisungen nicht gleichzeitig ausgeführt werden. Beides wird je nach Bedingung ausgeführt , oder? Wenn die Bedingung also wahr ist, wird sie ausgeführt. Wenn die Bedingung falsch ist, wird sie ausgeführt, oder? Und so funktioniert die if-Anweisung. Also überprüfen wir zuerst diese Bedingung und dann führen wir sie aus, richtig? Sie können also mehrere Rückmeldungen haben. Das ist absolut okay hier drüben. Alles klar. Und wenn ich versuche, das hier laufen zu lassen , kann ich Console Dot Log hier drüben sagen. Okay, und ich kann sagen: Check, Alter, lass mich hier 14 weitergeben. Okay, ich kopiere das und speichere es. Als Ausgabe werden Sie „Minor“ sehen. Wenn ich das mit 24 Jahren noch einmal durchführe, wirst du als Erwachsener angezeigt. In Ordnung. Also hier verwenden wir Return-with-If-Anweisungen, und das ist absolut gültig. Es gibt kein Problem als solches, okay? Ich hoffe also, dass dies jetzt Sinn macht, wenn es darum geht, wie Function Werte in mehreren und unterschiedlichen Szenarien zurückgeben kann . Ordnung. Also hoffe ich, dass das nützlich ist. 5. Code erstellen: Function Expressions in JavaScript erkunden: Jetzt ist es an der Zeit, über Funktionsausdrücke zu sprechen. Nehmen wir an, ich habe eine sehr einfache Funktion, die verwendet wird, um Hallo zu sagen, oder? Und ich kann es so nennen. Nichts Magisches hier drüben. Wir werden die Ausgabe als Hallo sehen. Okay? Nun, eine weitere Sache, die ich hier hervorheben möchte, ist ganz oben Wenn Sie einen Funktionsaufruf wie diesen hinzufügen, werden Sie die Ausgabe sehen noch bevor die Funktion deklariert wird. also schon vor der Deklaration der Funktion versuchen, Wenn Sie also schon vor der Deklaration der Funktion versuchen, die Funktion, die Sie deklarieren möchten, „ Sag Hallo“ oder „Call“ hinzuzufügen Funktion, die Sie deklarieren möchten, , wird sie immer noch funktionieren. Sie werden keine Fehler bekommen. In Ordnung? Kommen wir nun zum Thema Funktionsausdrücke Was sind Funktionsausdrücke? Sie können also eine Variable wie diese erstellen lassen. Du kannst hier „Lass erstellen“ sagen. Und du kannst ihm eine Funktion zuweisen, oder? Das ist also etwas, das Sie tun können. In Ordnung. Also, was ich tun werde, ist, das zu schneiden. Ich werde keine neue Funktion erstellen. Stattdessen schneide ich das und füge das Ding hier hinzu, okay? Und a, das ist absolut gültig hier drüben. Okay? Das können Sie in JavaScript tun. Okay? Du kannst Greet so etwas nennen und du kannst sehen, okay, C hallo Okay. Also das muss hier weg. Der Name C Hello muss verschwinden, oder? Und sobald S hello weg ist, musst du das mit „Gefällt mir“ kommentieren. Okay. Und Sie können sehen, dass Sie diese spezielle Funktion jetzt mit Greet aufrufen können diese spezielle Funktion jetzt mit Greet aufrufen Okay? Also, was wir hier machen, ist, eine Art Variable haben dass wir eigentlich eine Art Variable haben, die jetzt auf diese Funktionsdefinition zeigt. Und wenn Sie sich auf diese Variable beziehen, können Sie die Funktion mit dieser Variablen selbst aufrufen. Okay? Das ist also ein Beispiel für einen Funktionsausdruck. Das Ganze funktioniert nun so, dass zuerst eine anonyme Funktion erstellt wird. Okay? Anonyme Funktion, was bedeutet, eine Funktion ohne Namen erstellt wird, weil wir hier keinen Namen hinzufügen, okay? Also wird eine Funktion ohne Namen erstellt und sie wird dieser Variablen namens Grit zugewiesen, okay? Und dann können Sie Gier nutzen, um die Funktion aufzurufen. Wenn ich nun diesen Funktionsaufruf kopiere und ihn oben hinzufüge, werden Sie sehen , dass Grit noch nicht initialisiert ist oder Grit In Ordnung. Im Gegensatz zu Say Hello, wo wir die Funktion mit ihrem Funktionsnamen aufrufen konnten, können wir die Funktion nicht mit Greet aufrufen weil Grit im Grunde eine Referenz ist , die wir erstellt haben die auf diese Funktion verweist Okay? Also das ist etwas, dass du dir bewusst sein musst, okay? Sie können Grit nicht vor seiner Definition im Code aufrufen. Sie müssen es definieren, bevor Sie es verwenden können. Alles klar? Also ja, hier geht es um den Funktionsausdruck. Nun, diese Sache hier drüben, was wir tun, wenn wir die Funktion auf diese Weise zuweisen, wir erstellen tatsächlich einen Ausdruck Okay? Also das ist ein Beispiel für einen Funktionsausdruck. Sie können sogar eine Funktion hinzufügen, richtig, die etwas zurückgibt. Okay? Also lass mich auch sagen, lass dich multiplizieren. Okay. Nehmen wir an, wir wollen eine Funktion haben , um etwas zu multiplizieren. Ich füge hier eine Funktion hinzu. Der Parameter ist E P hier, und ich sage, gib A in B zurück, weil diese Funktion die beiden Zahlen multipliziert und zurückgibt. Okay? Jetzt kannst du hier multiplizieren , zehn, 20 sagen. Okay. Und wenn ich das speichere. Okay, es kehrt einfach zurück. Wir müssen den Wert ausdrucken, wenn wir ihn verwenden oder den Benutzern anzeigen möchten . die Ausgabe immer noch nicht Aufgrund dieser Zeile oben wird die Ausgabe immer noch nicht ausgegeben. Dort wird eine Fehlermeldung angezeigt. Also wenn du das speicherst, nachdem du das kommentiert hast, dann bekommst du den Multiplikator hier drüben, du kannst es sehen, und du kannst das Multiplikationsergebnis hier sehen das Multiplikationsergebnis Okay? Das ist also auch machbar , wenn Sie eine Funktion haben, die etwas zurückgibt, und Sie diese Funktion einer Variablen zuweisen Das ist also eine anonyme Funktion oder unbenannte Funktion, die Sie einer Variablen zuweisen. In Ordnung. Nun, eine weitere Sache, die ich hier hervorheben möchte, ist, dass Funktionen in JavaScript Objekte sind. Okay? Es sind also Objekte, das heißt, wenn Sie eine Funktion haben, okay, lassen Sie mich hier eine Funktion erstellen. Okay? Also hier sage ich, Funktionen sind Objs Ordnung. Und ich werde eine Funktionsdefinition haben. Ich nenne das GET. Okay. Keine Parameter. Ich sage Console Dot Log und sage schnell Hallo hier drüben. Okay? Also ja, das ist eine Funktion. Was Sie jetzt tun können, ist, dass wir diese Funktion haben. Okay? Okay, GET wurde bereits definiert, also sag hallo oder sag hallo. Ordnung. Also, wenn du anrufst und hallo sagst, wird es natürlich funktionieren, nichts Magisches, oder? Also, hallo nochmal. Ich drucke etwas aus. Nochmals hallo, way. Damit wir wissen, dass es von dieser Funktion kommt. Hallo nochmal kommt von dieser Funktion. Ordnung. Alles, was Sie tun können, ist, eine Variable zu haben. Sie können hier A sagen, und Sie können hier Hallo sagen. Okay? Also, was hier passiert ist diese Funktion oder diese Variable, sollte ich sagen. In Ordnung. Diese Variable bezieht sich jetzt auch auf diese Funktion, oder? Und du kannst einfach A sagen und du wirst wieder Hallo sehen. In Ordnung. Sie können also sehen, dass Sie eine Funktion im Wesentlichen einer Variablen zuweisen Und das ist möglich , weil Funktionen Objekte in JavaScript sind Okay. Und Sie können A verwenden, um diese spezielle Funktion aufzurufen. Ordnung. Ich hoffe, das macht Sinn, oder? Das sind also einige Konzepte , auf die ich eingehen möchte. Ich hoffe, das war nützlich. 6. Grundlagen von JavaScript modern: Pfeilfunktionen meistern: Jetzt ist es an der Zeit, über Pfeilfunktionen zu sprechen. Was sind nun Pfeilfunktionen? Nun, Pfeilfunktionen sind Syntax, und die Syntax bietet eine präzisere Möglichkeit Funktionen in JavaScript zu erstellen und zu schreiben Alles klar? Also, wenn du eine Funktion erstellen müsstest, was würdest du tun, du würdest Funktion sagen, Hallo sagen, und ich würde hier einfach Hallo sagen. Okay? Also würde ich Console , Log und Hallo sagen. Okay? Das ist eine Funktion. Und wenn ich es anrufen muss, nenne ich es natürlich einfach so, sag Hallo. Dies ist eine grundlegende Methode zum Erstellen von Funktionen in JavaScript. Jetzt können Sie den Funktionsausdruck verwenden, oder? Und Sie können sagen, et greet ist gleich, und Sie können diese Art von Syntax hier loswerden. Okay? Oder lassen Sie mich diese Syntax hier oben behalten. Okay, damit wir sehen, wie wir vorankommen , und ich werde das hier loswerden. Ordnung. Und das ist auch eine andere Art, Funktionen zu schaffen. Aber hier verwenden wir den Funktionsausdruck , bei dem wir einer Variablen eine Funktion zuweisen. Okay? Jetzt zeigt diese Variable also auf diese spezielle Funktion. In JavaScript können Sie dies jetzt verbessern oder noch übersichtlicher gestalten. In Ordnung. Also was du tun kannst, ist hier drüben zu sagen, Cret, ich sage Greet Wir werden sehen, was eine Pfeilfunktion ist. Sie können dieses Funktionsschlüsselwort hier also zunächst überspringen . In Ordnung, damit Sie dieses Funktionsschlüsselwort loswerden können. Und da unsere Funktion nur eine einzige Anweisung hat, kann ich die Phrasen einfach loswerden und einfach sagen, oder ich kann einfach so etwas tun. Ordnung. Also verwende ich den Pfeil hier drüben , um den Hauptteil der Funktion oder die Definition der Funktion zu definieren . Jetzt kann ich hier drüben Greet Arrow sagen. Und ich kann das speichern und du wirst sehen, wie Hallo auf der Konsole gedruckt wird. In Ordnung. Also diese Syntax hier ist eine Syntax der Pfeilfunktion. Und Sie können sehen, dass dies eine Funktionserstellung auf normale Weise ist , in Ordnung, mit nur der normalen Syntax. Dies ist ein Funktionsausdruck, bei dem Sie einer Variablen eine Funktion zuweisen Und hier, jetzt machen Sie diese Syntax oder diesen Funktionsausdruck noch prägnanter und verwenden hier den Pfeil. Das sind also Pfeilfunktionen, richtig, mit denen Sie Funktionen auf diese Weise erstellen können Nun, das ist natürlich viel übersichtlicher. Wenn Sie nur eine Funktion erstellen, um eine einzige Operation auszuführen, zum Beispiel eine einzelne Operation wie etwas drucken oder protokollieren oder etwas oder protokollieren oder in nur einer Zeile verarbeiten, dann ist die Pfeilfunktion auf diese Weise viel übersichtlicher, ist die Pfeilfunktion auf diese Weise viel übersichtlicher als Dinge auf diese oder diese Weise zu tun, oder dann ist die Pfeilfunktion auf diese Weise viel übersichtlicher, als Dinge auf diese oder diese Weise zu tun, oder? Es ist nur eine Option Alles klar. Und Sie werden da draußen eine Menge Code sehen, der Pfeilfunktionen verwendet. Alles klar? Nun, die Frage ist hier, diese Funktion ist einzeilig, oder? Ist es also so, als würde die Pfeilfunktion nur für eine einzelne Anweisungszeile verwendet ? Absolut nicht. Also, wenn der Funktionskörper mehrere Anweisungen hat. Also hier kann ich sagen, Pfeil erstellen, mehrere, okay? Und ich kann hier drüben sagen, okay? Also hier füge ich den Text hinzu, etwas in der Art, und ich kann sagen, hier drüben, ich kopiere das und füge Hallo hinzu. H zwei. Okay? Also das ist Hallo eins und so zwei. In Ordnung. Und ich muss das nur aufrufen, damit ich sagen kann: Create Arrow Multiple und äh, einfach hinzufügen, damit du Hallo eins, hallo zwei sehen kannst. Sie können also auch mehrere Codezeilen in den Pfeilfunktionen haben. In Ordnung. Lassen Sie uns nun schnell verschiedene Pfeilfunktionen in verschiedenen Szenarien erstellen und sehen , richtig. Wie würde sich die Pfeilfunktion also verhalten, wenn es Parameter gäbe, oder? Wir haben also gesehen wie man ohne Parameter etwas erstellen kann, oder? Bei Parametern fügen Sie hier einfach einen Parameter hinzu, in Ordnung Also zum Beispiel hier selbst, ich kann dieses Beispiel hier aktualisieren. Okay. Lass mich das hier duplizieren. Okay. Jetzt, hier, kann ich Param Eins sagen Okay. Also hat es einen Parameter, also kann ich hier drüben den Namen sagen, richtig. Und ich werde das einfach in Template-Literal umwandeln . Okay, weil das bequemer ist, und ich kann hier drüben „Größer“ und „ Name“ sagen, oder Und jetzt muss ich hier meinen Namen eingeben. Okay. Also sage ich Kreta-Pfeil und ich sage Param Eins Okay. Und ich kann John sagen. Okay. Und wenn ich das speichere, wirst du sehen, hallo, eins, John, richtig? So können Sie also die Parameter übergeben , okay. Sie können sogar mehrere Parameter übergeben, wenn Sie möchten. Ich kann also Parameter zwei sagen. Also hier übergeben wir zwei Parameter, also kann ich hier auch H sagen, in Ordnung Und hier kann ich diese Syntax einfach replizieren, okay? Hier. Ich werde Vorlagenliterale verwenden und hier sage ich H. Okay. Und hier kopiere ich das einfach. Also sagen wir Parameter zwei und ich überhole John, genauso wie 34 oder 32. Ich speichere das und du siehst Hallo eins, John, hallo zwei, 32, richtig? Sie übergeben also mehrere Parameter und haben auch einen Funktionskörper, richtig? Sie können diesen auch bekommen. Okay? Also lass mich das mit einer einzigen Aussage hier drüben klären. Okay, hol Arrow, ich sage eins, ich gebe den Namen hier weiter. Okay. Und ich kann hier einen Namen hinzufügen. Etwas wie das. Okay? Also, wenn ich diese Funktion aufrufe, nimm R eins oder grüße R eins, okay Also super R eins und ich kann nichts weitergeben, okay? Und wenn du das speicherst, kannst du Hello Nadar sehen, oder? Also hier ist das eigentlich eine einzeilige Funktion. Es geht nicht wie bei mehreren Zeilen. Diese Funktion hat nur eine Zeile, und Sie können hier sogar einen Parameter übergeben, oder? Sie können also einzelne Parameter haben, mehrere Parameter. Sie können sogar Werte zurückgeben, oder? Lassen Sie mich das Beispiel hier drüben eintragen. Okay? Also was ich tun kann ist sagen, lass die Summe, und ich würde sagen, das ist gleich, okay. Lassen Sie mich also zuerst mit normaler Syntax erstellen, sodass wir es dann auf Pfeilfunktionen ableiten. Okay. Also hier kann ich s sagen und Ups, ich kann s sagen, und hier kann ich E P sagen, und das kommt einfach zurück, E plus P. Okay. Das ist es. Ziemlich einfach. Und jetzt kann ich hier Summe sagen, richtig? Ich kann 1020 sagen, oder? Und ich werde das Ganze in das Konsolenprotokoll aufnehmen. Okay? Also, weil wir einfach zurückkehren und nichts drucken, oder? Also wird es nicht auf der Konsole angezeigt. Also du kannst sehen, dass wir hier 30 sehen, oder? Nun, wenn ich das in einen Funktionsausdruck umwandeln muss, kann ich let sagen und ich kann hier etwas sagen. Okay? Ich behalte den Namen bei. Lass uns das loswerden. Okay. Nun, das ist ein Funktionsausdruck. Sie können 30 sehen. Wenn ich das jetzt in eine Pfeilfunktion umwandeln müsste, wie würde ich das machen? Also hier kann ich zuerst die Funktion loswerden , okay. Und dann sehe ich hier drüben rote Markierungen, oder? Dann kannst du den erwarteten Pfeil sehen. Also hier kann ich den Pfeil sehen. Okay, und das ist es. Sie können sehen, dass das eine Pfeilfunktion ist. Und das brauche ich hier nicht mal. Okay, weil es nur eine einzige Codezeile hat, damit du sehen kannst, wie das ist. Und Sie benötigen übrigens nicht einmal das Schlüsselwort return, wenn Sie zurückkehren und es nur eine einzige Codezeile gibt, Sie können sehen, oder? Weißt du, das ist es. Ich füge einfach Platz hinzu. Weißt du, das ist es. Also, wie sauber ist das? Du meinst, lass uns zusammenzählen. Das ist ein Parameter, Pfeil, Sie sagen A plus B. Es gibt kein Return-Schlüsselwort, also wird es automatisch zurückgegeben. Es versteht sich, dass er zurückgegeben wird oder dass dieser Wert zurückgesetzt werden muss, oder? Wie prägnant ist das also im Vergleich dazu , Dinge auf die alte Art zu tun, oder? Es ist ziemlich einfach, ziemlich einfach, und es macht die Syntax viel lesbarer und prägnanter, als Sie sich hier vorstellen können, okay? Also Rückgabewerte werde ich hier schreiben. Ich hoffe, Sie konnten dem folgen, und ich hoffe, dass die Erklärung der Pfeilfunktionen hilfreich war. 7. Objekte stärken: Funktionen innerhalb nutzen: Lassen Sie uns also darüber sprechen, wie Sie Funktionen in Objekten nutzen können Objekten nutzen Nehmen wir an, ich habe dieses Objekt hier drüben namens Person, okay? Und ich werde hier ein paar Immobilien haben. Okay. Also werde ich hier Alice sagen. Okay. Und ich kann sagen, go, G ist 33. Okay, ich habe ein Komma vergessen. Okay, ich kann hier Console Dot Log sagen. Ups, und ich kann sagen, das ist die Person, die sich gedacht hat. Okay. Jetzt kann ich hier Taktiken hinzufügen. Ich kann das in ein Template-Literal umwandeln und sagen: Hi, das bin ich Okay. Und ich kann hier tatsächlich einen Ausdruck hinzufügen. Okay. Also, das wird der Name sein. In Ordnung, denn der Name macht Sinn. Und wenn ich das speichere, wirst du sehen, hi, ich bin Alice. In Ordnung. Also wir beziehen uns hier mit Punktnotation auf die Eigenschaften innerhalb der Objekte, richtig? Jetzt können Sie Funktionen innerhalb von Objekten haben. Wenn Sie nun Funktionen innerhalb von Objekten hinzufügen, werden sie als Methoden bezeichnet, oder? Also hier kann ich einfach weiter Aussagen hinzufügen, ich kann mein Alter hier angeben, ich kann hier den Punkt H für meine Altersperson eintragen. Okay? Aber das ist außerhalb des Objekts. Also kann ich dieses Ding mit Hilfe der Funktion in das Objekt einfügen , wie ich schon sagte, also schneide ich das hier einfach ab. Okay? Und ich füge zuerst ein Komma hinzu, weil Methoden, die Sie hinzufügen, wie gesagt, Funktionen innerhalb eines Objekts als Methode bezeichnet werden, oder? Also, wenn du jetzt hier eine Methode hinzufügst, okay, diese sollte durch Kommas getrennt sein, weil es ein Attribut, ein Recht oder eine Eigenschaft ist, würde ich sagen Also sage ich hier Grit. Ich sage Funktion wie diese und füge sie hier hinzu. Okay? Wenn ich das speichere, passiert nichts, weil ich es abkühlen muss. Also sage ich: Oh, ich werde nicht gegrüßt. Ich sage Person Punkt Greet Away. Okay? Ich muss Console Dot Log hier nicht aufrufen, weil ich schon Console Dot Log innerhalb dieser Methode mache hier schon Console Dot Log innerhalb dieser Methode mache, oder? Also sage ich Person Punkt Greg, und ich werde das sehen, du wirst sehen, hi, ich bin Alice, richtig? Ich werde das einfach auf eine Art loswerden. Okay? Also das ist machbar Jetzt nenne ich dieses Objekt als Person Alice. Ich werde Person Alice sowohl hier als auch hier ersetzen . Das funktioniert gut. Jetzt füge ich hier eine weitere Person hinzu, das ist die Nachbildung dieses Objekts hier drüben, und ich sage Person John hier drüben. Okay. Ich kopiere seinen Namen, Person, John, Person, John, und ich werde das hier duplizieren, und ich sage Person John. Kannst du sehen? Hi, ich bin Alice. Hi, ich bin John. In Ordnung. Also das funktioniert gut, so weit, so gut Ordnung. Nun, die Art und Weise, wie wir Funktionen hier erstellt haben, ist mit Hilfe von Funktionsausdrücken, oder? Sie können also die Funktion hier, das Funktionsschlüsselwort, loswerden und dies in eine Pfeilfunktion umwandeln. Okay? Also, was ich hier tun kann, ist, dass ich einfach loswerden und ich kann diese Art von Syntax hier hinzufügen. Okay. Ich kann das loswerden und ich kann diese Art von Syntax hier verwenden. Ups. Diese Art von Syntax, oder? Das wird also gut funktionieren. Und wenn du das speicherst, wird es gut funktionieren. Keine Änderung der Ausgabe. Also wurden diese Methoden erstellt. In Ordnung. Jetzt kann ich auch den Curl-Press loswerden und es noch übersichtlicher aussehen lassen, weil ich jetzt die Pfeilfunktionen verwende, oder? Also werde ich zu dieser Syntax übergehen. Okay. Und am Ende entferne ich das Semikolon. Okay. Wenn ich das speichere, ändert sich nichts an der Ausgabe. Alles klar? Nun möchte ich auch über ein existierendes Schlüsselwort sprechen, nämlich dieses Schlüsselwort. Jetzt sehe ich hier personalis, was dieser spezielle Objektname ist, oder? Aber was ich eigentlich mache, ist, dass ich mich beziehe mit diesem Objektnamen auf das Namensattribut oder die Namenseigenschaft . Das ist nicht erforderlich. Was ich tun kann, ist, dass ich das hier einfach nutzen kann. Dies ist ein Schlüsselwort in JavaScript, das verwendet wird, um auf das aktuelle Objekt zu verweisen, oder? Wenn Sie also mit der Maus darüber fahren, okay, Sie werden diesen globalen Test vom Typ eines Schlüsselworts sehen Wenn ich das speichere, okay? Ordnung, es funktioniert nicht, weil beide in Pfeilfunktionen umgewandelt wurden. In Ordnung. Also eine Sache, an die Sie denken müssen, ist, wenn Sie dieses Schlüsselwort verwenden, funktioniert es nicht in Pfeilfunktionen, also müssen Sie hier Funktion sagen und Sie müssen es speichern. Okay, und ich muss das loswerden. Also muss ich ein bisschen umkehren, weil dieses Schlüsselwort in dieser speziellen Syntax hier nicht funktioniert in dieser speziellen Syntax hier Okay. Also werde ich wieder zu dieser Art von Syntax wechseln. Okay. Also du kannst sehen, hi, ich bin Alice und arbeite hier drüben. Also machst du dir das jetzt zunutze. Wenn Sie mit der Maus darüber fahren, werden Sie sehen, dass sich dies auf Name, G und Greet bezieht Wenn Sie das hier ändern, wird es natürlich nicht funktionieren, weil Sie gerade gesehen haben es innerhalb der Pfeilfunktionen nicht funktioniert Und wenn Sie mit der Maus darüber fahren, sehen Sie, als ob es sich um ein globales Problem handelt Okay? Aber dieser bezieht sich auf das hier drüben, auf die anderen Attribute im Objekt. Ordnung. So können Sie die Ausgabe sehen. Die Ausgabe ist nicht korrekt. Okay? Also bleibe ich bei Person John hier drüben. Also eine Sache, die Sie hier mitnehmen können , ist, wenn Sie davon Gebrauch machen oder wenn Ihre Methode innerhalb des Objekts darin besteht, dies zu verwenden, dann sollten Sie die Pfeilfunktion innerhalb des Objekts hier drüben nicht verwenden , oder? Die Syntax sollte nicht verwendet werden. Sie sollten diese Art von Syntax verwenden. Ordnung. Also hoffe ich, dass das nützlich ist. Nun, Sie können mit den Methoden innerhalb der Objekte viel anfangen, okay? Also, wenn du herkommst, werde ich hier ein Gegenbeispiel haben. Okay. Was wird der Zähler jetzt tun? Es wird dir beibringen, wie du die Parameter übergeben kannst und wie du sie vom Objekt zurückgeben kannst, richtig? Also werde ich Const sagen, oder ich kann hier drüben einfach Let, Counter sagen Okay. Und ich sage Wert. Dieser Zähler hat also einen Anfangswert von Null. Okay. Und ich kann hier Inkrement sagen. Das ist also eine Funktion, für die ich eine Inkrementfunktion erstelle, und ich sage Rückgabewert Jetzt muss der Wert erhöht werden. Sie können also sehen, dass dieser Punktwert hinzugefügt wurde , und Sie können den Wert hier erhöhen. Ich kann also sagen, dass dieser Punktwert plus gleich ist, und ich kann hier eins sagen. Okay? Und heb dir das so weit, so gut. Wenn ich jetzt nach unten scrolle, muss ich das hier aufrufen, damit ich Console, Dot Log hier drüben sagen kann , und ich muss Zähler, Punkt, ich muss Inkrement sagen Sie können sehen, wie es um eins erhöht wird, ich kann das kopieren. Okay, ich kann es um zwei erhöhen, um drei erhöhen, um vier erhöhen und so weiter, richtig Nun, das ist ein Beispiel dafür, wie Sie Werte von einer Methode zurückgeben können , die innerhalb des, ich sollte sagen, Objekts definiert ist innerhalb des, ich sollte sagen, Objekts definiert Ich zeige Ihnen noch ein Beispiel, bei dem Sie den Parameter akzeptieren und auch zurückgeben können. Nehmen wir an, ich möchte den Wert um einen bestimmten Betrag erhöhen Also werde ich das duplizieren. Ich füge ein Komma Hier kann ich Inkrement B sagen und ich akzeptiere hier einen Wert als Zahl und füge den Wert Num hier hinzu Okay? Und ich gebe den Wert zurück. Also, was ich tun sollte, ist hier, wenn ich komme, kann ich sagen, inkrementieren Sie Pi und ich kann hier zehn hinzufügen Im Idealfall sollte die Ausgabe also 14 sein. Wenn ich das speichere, können Sie sehen, dass die Ausgabe 14 ist. Sie übergeben also diesen Parameter und Sie erhalten ihn als Ausgabe. In Ordnung. So können Sie also die Parameter übergeben und Sie können auch die Rückgabewerte von den Methoden abrufen, so wie Funktionen innerhalb der Objekte als Methoden bezeichnet werden. Also bezeichne ich sie als Methoden. Okay. Aber wenn Sie Methoden innerhalb von Counter erstellen, funktionieren sie so. In Ordnung. Nun, ein weiteres Beispiel, das ich Ihnen hier geben möchte , sind dynamische Objekte hier drüben. Entschuldigung, keine dynamischen Objekte, aber ich würde das als eine Möglichkeit bezeichnen , Methoden dynamisch zu definieren. Okay? Also Methoden dynamisch definieren. In Ordnung. Nehmen wir an, ich habe eine Methode. Okay, ich nenne das dynamische Methode. Okay. Ist ein Beispiel dafür wie Sie dynamische Methoden erstellen können. Also ich habe das, und sagen wir, es hat ein Attribut, ich füge einfach so ein Attribut hinzu. Ich nenne es Wert Null. Okay. Was Sie tun können, ist , Console Log zu erstellen und den Punktwert der dynamischen Methode zu sehen. Acht. Also das wird dir natürlich Null geben. Jetzt habe ich keine Methode hinzugefügt . Sie können die Methode dynamisch hinzufügen , nachdem das Objekt erstellt wurde. können Sie tun. Ja. Wie würdest du das machen? Also hier, du kannst kommen. Du kannst dynamische Methode sagen, tot. Okay. Lass mich nach oben scrollen, damit es sichtbar ist. Also dynamische Methode, tot, ich kann sagen, sagen wir hier hoch und ich kann Funktion sagen. Okay. Und ich benötige keinerlei Parameter. Ich sage hier Console Dot Log und ich sage Hello Dynamic, richtig? Und Hoppla, ich komme runter und sage Dynamic Method Dot. Ich sage Chi, so etwas in der Art. Sie werden die Ausgabe Hello Dynamic hier sehen. Also diese Funktion oder die Methode, ich sollte sagen, Methode wurde dem Objekt dynamisch hinzugefügt , nachdem das Objekt erstellt wurde. Das ist also absolut möglich. Methoden können zu jedem Zeitpunkt im Programm zu Objekten hinzugefügt werden, nicht nur zum Zeitpunkt der Objekterstellung. Sie daran, in Ordnung, Sie könnten Code sehen, Sie könnten Code sehen dem die Dinge so sind, also lassen Sie sich nicht verwirren. Okay, das ist normal in JavaScript. Ordnung. Also, hier geht es um normale Objekte. Ich möchte auch ein bisschen über verschachtelte Objekte sprechen, okay, also wie würden Funktionen in verschachtelten Objekten funktionieren, oder Dafür nehmen wir ein Beispiel für ein Auto. Okay. Also werde ich schnell ein Autoobjekt erstellen. Nehmen wir an, das Auto hat ein Attribut namens Marke. Es hat die Marke Toyota, okay? Und dann sage ich , dass es hier ein verschachteltes Objekt namens Specs Ich nenne das Attribut innerhalb der Spezifikationen Geschwindigkeit. Und ich werde eine Funktion namens Display-Spezifikationen haben. Also das ist eigentlich eine Methode, keine Funktion. Es tut mir leid. Okay. Also Terminologien, verarsch dich nicht mit Terminologien Ich habe die Angewohnheit, das zu tun, aber ich hoffe, Sie würden es immer Methode nennen, weil sie Methoden innerhalb von Objekten genannt werden , oder Man kann also sagen, Geschwindigkeit ist oder man kann einfach Geschwindigkeit hier drüben anzeigen. Also ich kann Geschwindigkeit sagen und ich füge hinzu, dass du das auch sagen kannst. Okay. Jetzt ist das erledigt. Nun, wie würdest du das verschobene Spezifikationen nennen, richtig? Es ist also ein Objekt im Objekt, oder? Ich muss also kein Konsolenprotokoll erstellen. Ich werde das einfach loswerden. Aber ich kann sagen: Cartt Specs, Tot, Displaced Specs. Aber du kannst es sehen Sie werden also sehen, dass Geschwindigkeit 120 ist. So können Sie also auf Methoden verweisen , die in verschachtelten Objekten erstellt werden , auf Objekte innerhalb von Objekten So können Sie also Dinge tun. Ordnung. Ich hoffe, das ist nützlich und ich hoffe, Sie konnten nachvollziehen, wie die Dinge mit Methoden innerhalb der verschachtelten Objekte funktionieren mit Methoden innerhalb der verschachtelten Objekte Ordnung. Es gibt auch eine Kurzversion Okay. Lass mich dir das zeigen. Ein Recht? Also was ich tun würde, ist, ein vorhandenes Objekt hier drüben zu verwenden . Okay. Ich werde ein vorhandenes Objekt verwenden. Okay. Also Kurzversion hier drüben Also das ist, würde ich sagen, Person, Kurzschrift. Okay. Ich nenne diese Person Kurzschrift Ordnung. Und jetzt, was wir tun können, ist, anstatt diese Art von Syntax hier drüben zu haben, ich kann einfach eine solche Funktion haben. Okay. Also verwende ich hier nicht die Pfeilfunktionen. Behalte das im Hinterkopf, richtig. Aber ich füge ein Semikolon und das hinzu. Okay. Und ja, das ist es. Und du kannst hier die Personenkürzel benutzen. Ordnung. Und das sollte absolut gut funktionieren. Das kannst du sehen. Okay, ich sage Hallo, ich bin John, weil sich das auf Person John bezieht. Du kannst das hier sehen. Okay. Also du kannst sehen, hi, ich bin Stenografie. In Ordnung Und das ist eine Kurzversion. Möglicherweise sehen Sie diese Art von Syntax auch, Möglicherweise sehen Sie diese Art von Syntax auch wenn Sie mit Objekten arbeiten Okay? Also Methoden, die auf diese Weise geschaffen wurden. Ordnung. Also das ist ein Weg, okay. Eine andere Möglichkeit ist die Verwendung von Pfeilfunktionen, und dann haben Sie auch Funktionsausdrücke wie diese Art von Syntax, oder? Diese sind also alle gültig, und sie würden absolut gut funktionieren. In Ordnung. Also ich hoffe, es ist euch allen klar, und ich hoffe, das war nützlich. 8. Supercharging Arrays: Fortgeschrittene Methoden in JavaScript: Wenn Sie nun mit Arrays arbeiten, gibt es viele eingebaute Methoden, die Ja Script zur Verfügung stellt Und Sie können diese Methoden verwenden, um besser zu arbeiten oder viele Aufgaben zu erledigen, wenn Sie mit Arrays arbeiten. In Ordnung. Nun werden wir uns einige Methoden ansehen, die es gibt, und Sie werden ein besseres Verständnis dafür bekommen, was diese Methoden sind und wie Sie sie in Ihrer täglichen Programmierung verwenden können . Also hier können Sie diese Liste sehen, richtig. Also, da ist diese Karte, filtere, reduziere das Futter. Wir werden sie alle durchgehen, richtig, und ich werde alles eins nach dem anderen erklären, richtig? Also zuerst werden wir hier über die Karte sprechen. Ordnung. Ich nehme das einfach runter und ich nehme es einfach mit auf die neue Leitung Hier drüben und ich zoome ein bisschen rein. Ordnung. Also, was ist Karte? Jetzt transformiert die Map-Methode jedes Element in einem Array und gibt einfach ein neues Array zurück . Wie funktioniert das? Nun, diese Transformation kann eine beliebige Operation oder eine beliebige Transformation sein, die Sie an jedem Element des Arrays durchführen möchten , und Sie möchten alle transformierten Elemente wieder in einem Array sammeln . Lassen Sie mich Ihnen nun ein Beispiel geben , wie Sie Map verwenden können . Nehmen wir nun an, ich habe ein Array namens Zahlen. In Ordnung. Nehmen wir an, es ist ein einfaches Array, es enthält Elemente wie eins, zwei, drei, vier und fünf. Ordnung. Nehmen wir an, ich habe eine Anforderung, bei der ich jedes Element in diesem Array verdoppeln möchte. Okay? Es gibt also so viele Elemente und ich möchte jedes existierende Element verdoppeln. Also zwei werden vier, eins bleibt eins oder eins wird zwei, okay? Aus vier wird vier, aus drei wird sechs, vier wird acht und aus fünf wird zehn. In Ordnung. Also was ich tun kann ist, dass ich hier drüben eine Veranstaltung haben kann , okay? Also kann ich hier drüben eine Funktion namens Double haben. Okay. Und der Parameter kann hier Num sein. Okay. Und ich kann sagen, gib die Zahl auf zwei zurück. Nun, das ist eine Funktion , die mir helfen wird, jedes Element zu verdoppeln. Nun, wie werde ich diese Funktion auf jedes Element des Arrays anwenden ? Okay? Also, was ich dafür tun werde ist Zahlen zu sagen, was hier ein Array ist. Ich werde Punkt sagen. Sobald du Punkt sagst, wirst du sehen, dass das alles Methoden sind , auf die du Zugriff hast, oder? Und Sie haben hier eine Methode, nämlich die Karte. Also sagen wir hier Karte. Okay? Wenn Sie mit der Maus darüber fahren, werden Sie sehen, dass es eine definierte Callback-Funktion für jedes Element eines Arrays aufruft Callback-Funktion für jedes Element eines Arrays aufruft und ein Array zurückgibt , das das Ergebnis enthält Okay? Also sage ich Karte und übergebe die Funktion hier drüben, okay? Ich sage einfach Okay. Richtig? Was das nun tun wird, ist diese Funktion auf jedes Element des Arrays anzuwenden. Alles klar? Also, die Rückkehr hier drüben ist wieder ein Array. Was ich also tun muss, ist, die doppelten Elemente wieder in einem Array zu sammeln . Also muss ich doppelte oder doppelte Zahlen sagen , ungefähr so. Okay? Und dann kann ich hier Console Dot Log sagen. Okay. Ups, also muss ich Console Dot Log sagen und ich muss Double sagen Zahlen, so etwas. In Ordnung. Und sie sollten das Ergebnis liefern. Jetzt kannst du hier drüben zwei, vier, sechs, acht, zehn sehen , richtig? Also wurde jedes Element verdoppelt. Wie hat es funktioniert? Es hat mit Hilfe der Map-Funktion funktioniert, sorry, Map-Methode innerhalb von Arrays Also haben wir diese spezielle Funktion namens Double, die wir hier erstellt haben, auf jedes Element des Arrays angewendet namens Double, die wir hier erstellt haben, auf jedes Element des Arrays Okay? Also kannst du hier sogar ein Konsolen-Logbuch haben. Sag Console Dot Log, und du kannst hier drüben sagen, du kannst Nummer hier drüben drucken. Okay. Sie werden also wissen, unter welcher Nummer das angerufen wird. Sie können also sehen, dass es auf eins, zwei, drei, vier und fünf angerufen wurde . Wenn ich das hier auf 14 ändere. Und wenn ich das speichere, wirst du sehen, dass daraus 14 wird. Es wird also für jedes Element aufgerufen , das im Array existiert. Okay? Wir benötigen dieses Konsolenprotokoll nicht. Okay, wir haben gerade damit angefangen, um zusätzliche Informationen zu erhalten, aber so wird es funktionieren. In Ordnung. Also ich hoffe, das ist ziemlich klar, wie das funktioniert und wie die Karte nützlich sein kann. Nun, hier haben wir hier eine separate Funktion, oder? Das ist eine benannte Funktion. Sie können dies tatsächlich in eine namenlose Funktion oder eine anonyme Funktion umwandeln in eine namenlose Funktion oder eine anonyme Funktion Okay, Sie benötigen dafür keine separate Funktionsdeklaration Nun, was sage ich damit, wie würdest du das machen? Okay? Also ich werde das nicht löschen, aber eigentlich würde ich das Ding hierher kopieren. Okay? Nun, das ist ein Beispiel für die Verwendung von Anonym, oder? Anonyme Funktion, genau hier drüben. So haben wir also die doppelten Zahlen erhalten, bei denen wir diese Funktion mit Map auf jedes Element im Array angewendet haben, richtig? Also sage ich doppelt anonym. Okay. Und hier, anstatt diese Funktion hier zu übergeben, kann ich die gesamte Definition hier abrufen. Ich kann das kopieren und ich kann es hier einfügen. Und statt doppelt wird das eine Funktion sein. Okay. Ich werde das Funktionsschlüsselwort sein. Okay. Also lass mich ein bisschen nach unten scrollen und lass mich ein bisschen herauszoomen. Sie können diese Syntax also hier sehen. Ich sage, lass doppelt anonym bleiben. Das kann also jede Variable sein, die Sie haben, die die Aufgabe des Sammelns von Arrays übernehmen kann, okay? Arrays, wie bei diesem Ding, diese ganze Operation wird ein Array zurückgeben, richtig? Du brauchst also etwas , um es zu sammeln, oder? Also ich sage Zahlen auf der Landkarte. Und anstatt den Namen der Funktion einzugeben, erstelle ich die Funktion direkt hier. Also sage ich Funktion, Zahl, gib Zahl zwei zurück. Das mache ich sofort. In Ordnung. Und dann kann ich mir das Konsolenprotokoll einfach hier rüber holen. Und ich kann einfach doppelt anonym sagen , und ich kann mir das sparen. Die Ausgabe, die Sie erhalten, wird dieselbe sein. Sie können sehen, dass dies die Ausgabe des vorherigen Codeteils ist, und dies ist die Ausgabe des aktuellen Codes. Okay? Es gibt keine Änderung an der Ausgabe, aber es gibt so etwas wie die Syntax, die wir in dieser Ausgabe geschrieben haben. Okay? Das ist sehr prägnant Okay, kurz, dann der erste. Okay? Also ja, das ist ein Beispiel für eine anonyme Funktion, bei der wir eine namenlose Funktion nur für diese Operation erstellen eine namenlose Funktion nur für diese Operation Also, wann würden Sie diese Art von Syntax verwenden und wann würden Sie diese Art von Syntax verwenden Wenn Sie also möchten, dass die Funktion an mehreren anderen Stellen als diesem Array wiederverwendet wird , sollten Sie eine separate Funktion haben und Sie können diese Art von Syntax verwenden Aber nehmen wir an, wenn Sie eine Funktion nur zum Zweck der Array-Transformation erstellen eine Funktion nur zum Zweck der , dann können Sie diese Funktion so haben Das ist viel übersichtlicher und viel lesbarer. Sie können hier noch einen Schritt weiter gehen. Ich werde das Ganze einfach hier duplizieren. Okay. Du kannst noch einen Schritt weiter gehen und statt wie hier drüben, anonyme Funktion, sehe ich die Pfeilfunktion. Also hier zeige ich Ihnen ein Beispiel mit der Pfeilfunktion. Okay? Also hier kannst du Pfeil sagen, okay, Kartenfunktion, und hier drüben sehen wir Num, richtig? Also wird diese gesamte Syntax in eine Pfeilfunktion umgewandelt. Also dieses Funktionsschlüsselwort wird nicht benötigt, okay? Und dann wird das zu einer Art Syntax für Pfeilfunktionen. Okay? Und anstatt doppelt anonym zu drucken, drucke ich Doppelpfeil. Okay? Sie können sehen, dass die Ausgabe dieselbe ist, oder? Jetzt kann diese Syntax noch weiter reduziert werden. Okay? Wir brauchen keine geschweiften Zahnspangen, weil es nur eine Aussage gibt, Es gibt nur eine Aussage. Es werden also lockige Zahnspangen benötigt? Nein, es wird nicht benötigt, oder? Also werde ich herkommen, lockige Zahnspangen loswerden und das Ganze wird zu einer einzigen Linie, Eine Rückgabe ist jetzt auch nicht erforderlich. Okay. Also werde ich Return loswerden. kannst du sehen. Und diese Klammern, runde Klammern werden auch nicht benötigt Ich werde sie auch loswerden. Sie können sehen, wie präzise das ist, richtig. Sie können also allein in diesem Ausdruck oder nur in dieser Aussage sehen , dass wir hier tatsächlich das gesamte Array transformieren Wenn Sie das speichern, ändert sich die Ausgabe nicht. Sie erhalten dieselbe Ausgabe, aber schauen Sie sich die Syntax der Leute an, richtig? Dies ist die erste Syntax. Beobachten Sie genau. Separate Funktion. Sie übergeben hier den Funktionsnamen, Sie wenden diese Funktion für jedes Element im Array an, oder? Sie erhalten das transformierte Element, Sie drucken es aus. Sie verwenden eine anonyme Funktion, bei der Sie diese Funktion tatsächlich hier übergeben. Dies ist eine anonyme Funktion ohne Namen. Sie wenden diese Funktion für jedes Element in DRA an. Und wenn Sie dann endlich die Pfeilfunktionen verwenden, können Sie sehen, dass die Syntax viel einfacher, übersichtlicher und leichter lesbar ist übersichtlicher und leichter lesbar Okay. Sie werden also sehen, dass diese Art von Syntax häufig verwendet wird. Okay, und viele Leute sind verwirrt und verstehen nicht, was hier passiert, besonders Leute, die neu in JavaScript sind. Ordnung? Wenn du gute Erfahrung mit JavaScript hast, dann weißt du vielleicht, was das ist. Aber Leute, die neu in JavaScript sind und aus verschiedenen Programmiersprachen wie Java, C plus Plus, Python kommen , okay? Es ist oft schwierig für sie, weil, weißt du, diese ganze Sache, weißt du, diese ganze Sache hier auf einen so kleinen Ausdruck reduziert wurde . Stimmt. Also ich hoffe, das ist ziemlich klar. Ich bin bewusst Schritt für Schritt gegangen. Ich habe dir zuerst gezeigt, wie das gemacht wird, wie du hier eine benannte Funktion übergeben kannst Sie können sehen, wie Sie eine anonyme Funktion haben können und wie Sie direkt eine Pfeilfunktion haben können. Die meisten Tutorials behandeln direkt die Pfeilfunktionen. Okay. Wenn Sie also zufällig etwas über die Kartenmethode in RAS erfahren, werden sie sich direkt mit der Verwendung dieser Syntax befassen, oder? Aber ich wollte, dass ihr es alle versteht und Schritt für Schritt vorgeht, richtig? Nun, wir können diese Art von Syntax auf alle anderen Methoden anwenden , richtig, weil Sie eine verstanden haben, also werden Sie es wirklich leicht finden , den Rest zu verstehen, oder? Es geht also um die Landkarte. Sie können jede Art von Transformation durchführen, Menschen, jede Art von Transformation Wenn du zum Beispiel drei X oder diese zehn X machen willst , bekommst du zehn, 20, 30, 40, 50, okay? Irgendeine Art von Transformation, oder? Also hier geht es um die Landkarte. Jetzt ist der nächste in der Zeile oder der nächste in der Warteschlange Filter. Okay? Also, was ist Filter? Ich nehme das einfach runter. Okay? Der Filter kehrt also in einem neuen Array mit Elementen zurück , die eine Bedingung erfüllen. Nun wird es Szenarien geben, in denen Sie Elemente in einem Array basierend auf einer bestimmten Bedingung herausfiltern möchten Elemente in einem Array basierend auf einer bestimmten Bedingung herausfiltern , oder? In diesem Fall möchten Sie vielleicht herausfiltern, oder? Und hier kommt der Filter ins Spiel. Nun, Filter ist eine Methode , die eine sehr präzise Methode bietet, dies zu tun Okay? Nehmen wir an, wir haben diese Array-Nummer okay mit zwei, vier, tut mir leid. Das ist nicht das Element. Es ist eins, zwei, drei, vier, fünf. Stimmt? Das ist das Array. Nehmen wir an, ich möchte die Liste der geraden Zahlen haben. Also ich kann hier konstante gerade Zahlen sagen, und ich kann Zahlen Punkt sagen. Ich kann Filter sagen, so etwas. Und hier kann ich Num sagen. Ich kann sagen, dass Num Modulo Zwei hier gleich Null ist. Okay. Und dann kannst du einfach im Oops drucken Dann kannst du hier einfach die geraden Zahlen eindrucken Also ist es so etwas. Okay? Also erhalte ich die Fehlermeldung, dass N nicht definiert ist. Okay, es sollte nicht N sein, es ist Num. Miss Printing. Ich vermisse es, Num einzugeben. Okay. Du siehst also, das ist eine Liste mit geraden Zahlen. Also was passiert ist, das ist ein Test , den wir hier erwähnt haben, richtig? Das ist ein Test. Also, welches Element diesen Test besteht, wird zurückgegeben und zu diesem neuen Array hinzugefügt, oder es gefiltert und zu diesem neuen Array hinzugefügt, richtig? Und Sie drucken in diesem neuen Array, richtig? Das gesamte Array wird also gefiltert und Sie haben ein gefiltertes Array, das dieser Bedingung entspricht, richtig? Nehmen wir an, Sie haben hier drei, so erhalten Sie nur Zahlen, die durch drei teilbar sind Sie können drei hier drüben sehen. Okay. Also so funktioniert der Filter, okay. Bei der nächsten Methode geht es um Reduzieren. Was ist nun reduzieren? Reduce wird die Aufgabe erledigen das Array auf einen einzigen Wert zu reduzieren, oder? Nun, das macht es, indem eine Funktion angewendet wird, okay? Und es kann viele Anwendungsfälle geben, wenn Sie , sagen wir, die Summe hinzufügen möchten, wenn Sie die Summe aller Elemente in einem Array erhalten möchten, dann können Sie Reduce hier verwenden . Ich bleibe also bei unserem Array-Beispiel und nehmen wir an, wir wollen die Summe aller Elemente im Array ermitteln, oder? Also kann ich hier Zahlen sagen. Ich kann sagen, das ist es, was unsere Arrays hier reduzieren. Also möchte ich dieses Array reduzieren. Okay. Jetzt muss ich den Akkumulator übergeben Okay. Also sage ich Akkumulator. Sie können die Syntax hier sehen. Sie können den vorherigen Wert abrufen, okay, und Sie können die tatsächliche Zahl abrufen. Also rufe ich hier den Akkumulator an und sehe mir den aktuellen Wert an Okay. Also das werde ich sagen, okay? Und Sie können die Dokumentation der Funktion sehen , die bis zu vier Argumente akzeptiert Die Meta mit der reduzierten Summe ruft die Callback-Funktion einmal für jedes Element im Array auf, oder? Also sage ich jetzt Akkumulator, was ist ein Akkumulator? Der Akkumulator akkumuliert also den Rückgabewert des Callbacks Okay? Also mit jeder Iteration, okay? Bei jeder Iteration werden wir Zugriff auf den aktuellen Wert haben, oder? Also, wenn ja, lass mich nach oben scrollen. Also, wenn die Iteration mit einem ist, okay, es wird einer ins Bild aufgenommen Es wird es der Summe hinzufügen. Bei der nächsten Iteration werden dann zwei zur Summe hinzugefügt Und was auch immer die Summe bei jeder Iteration ist , sie wird vom Akkumulator gespeichert, oder? Hier drüben. Also sagen wir Akkumulator, aktueller Wert, und hier sage ich Akkumulator plus aktueller Okay, das ist es. Und dann sage ich hier Konsolenprotokoll. Ich werde mich in die Konsole einloggen, und ich muss das einsammeln . Ich muss das sammeln, Hoppla Also muss ich das in einer Variablen sammeln, sagen wir, lass uns summieren Und ich werde hier welche haben. Wenn ich jetzt Speichern sage, werden Sie 15 SD-Ausgaben sehen. Ordnung. Also ich hoffe, das macht Sinn in Bezug darauf, wie das funktioniert, oder? Und Sie haben hier eine gute Klarheit. Okay, also habe ich das auf eine neue Zeile gebracht und nur damit es tatsächlich für euch alle sichtbar ist, aber das war es nicht. Ordnung. Aber ja, das ist die gesamte Methode zur Reduzierung. Ordnung. Also, dann haben wir für jeden. Jetzt ist es für jeden. Also für jedes wird die bereitgestellte Funktion einmal für jedes Array-Element ausgeführt . Okay. Also, was ich hier tun kann, ist, einfach zur neuen Leitung zu wechseln. Okay. Etwas wie das hier. Und jetzt kann ich Nummer sagen. Okay, Zahlen werden jedem beigebracht , kann ich sagen. Also, ich möchte es für jedes Element in der Reihe drucken, sagen wir. Ich schicke die Ausgabe auf die Konsole und hier drucke ich das aus. Ups, ich vermisse es, das zu entfernen, ich werde das speichern. Sie können eins, zwei, drei, vier, fünf sehen , also das ist ein Array, oder? So funktionieren also jeweils vier. Jede Art von Funktion können Sie auf jedes Element im Array anwenden . Alles klar? Wir haben hier etwas, das als Fund bezeichnet wird. Fine gibt hier das erste Element zurück , das eine bestimmte Bedingung erfüllt. Okay? Also das ist es, was Find ist. Okay? Und wie kannst du es nutzen? Nehmen wir an, wir wollen die erste gerade Zahl im Array bekommen , oder? Nehmen wir an, das ist die Anforderung. Ich kann also sagen, dass hier Zahlen Punkt finden, und ich kann Zahl hier drüben sagen, und es wird sein, dass Num Prozent zwei gleich Null ist, ungefähr so. Okay. Und ich muss das sammeln, also muss ich es tatsächlich sammeln, direkt in einer Variablen, damit ich sagen kann, zuerst lassen, ich nenne das als erste Steven-Nummer. Und ich sage Log hier drüben, Konsolen-Log, und ich sage für Steven. Speichere das und du wirst sehen, dass die erste gerade hier zwei ist, oder? Dadurch wird das erste Element abgerufen , das eine bestimmte Bedingung erfüllt Ordnung. Ich hoffe, das ist klar. Wir haben welche hier drüben. Einige werden also prüfen, ob mindestens ein Element einen bestimmten Test besteht, oder? Das ist es also, wonach es suchen wird. Und hier drüben werde ich es einfach nutzen. Nun, die Definition für Summe besagt, dass geprüft wird, ob mindestens ein Element einen bestimmten Test besteht. Nun, das sind Tests , die Sie hier als Funktion definieren müssen. Und wenn der Test von mindestens einem Element im Array bestanden wird , erhalten Sie einen booleschen Wert vom Typ true, oder? Das gibt also einen booleschen Wert zurück. Also kann ich hier Zahlen sagen, Punkt, und wir können hier die Summe verwenden. Okay. Und ich sage Num. Okay. Und die Bedingung , nach der ich suchen möchte , ist Zahl kleiner als Null, sagen wir zum Beispiel. Okay? Also das wird einen booleschen Wert zurückgeben, also kann ich sagen, let und hat negativ Okay, also wenn es negativ ist, wird es mir eine boolesche Reihe von Stürzen geben Ich kann das protokollieren und sage dann, dass es negativ ist. Wenn ich das speichere, wirst du Stürze sehen. Dieses Array hat also keinerlei negative Zahlen. Okay. Sie können das tatsächlich ersetzen , um eine Reihe negativer Zahlen zu erhalten. Sie können also sagen minus eins, zwei, drei, ups, drei, vier und so weiter, richtig? Das hat also negative Zahlen, oder? Ich begrüße ein Array im Handumdrehen. Wenn ich das speichere, bekommst du eine TruSC-Ausgabe. Das macht also Sinn, wie dies verwendet werden kann , um zu überprüfen, ob mindestens ein Element einen Test besteht Nun, das ist in Szenarien hilfreich, wenn Sie eine schnelle Überprüfung des Arrays durchführen und einen booleschen Wert erhalten möchten , ja oder nein, und basierend auf diesem booleschen Wert, ja oder nein, möchten Sie vielleicht etwas in der Anwendung tun Okay? Also genau da ist es nützlich hier drüben. Okay. Jeder. Jetzt ist alles nur eine Umgehung der Summe Einige werden also prüfen, ob mindestens ein Element einen Test besteht, aber jedes wird prüfen, ob alle Elemente einen Test bestehen Also ich kann das hier drüben duplizieren und ich kann sagen, hat oder ich sage einfach alles, okay. Und ich werde das hier überall ausdrucken. Und statt Summe nehme ich alle. Also ist jedes Element jedes Element kleiner als Null? Die Ausgabe ist falsch? Nein, denn ein Element ist eigentlich jedes Element. Die Bedingung ist also, dass jedes Element kleiner als Null ist? Das ist also falsch. Entschuldigung, ich war ein bisschen verwirrt. Weil wir also drei Elemente haben , die nicht kleiner als Null sind , ist eins kleiner als Null, oder? Also das ist absolut in Ordnung. Also, wenn ich das Negative herausnehme, okay, du wirst sehen, dass das hier falsch ist. Und das liegt daran, dass nicht alle Elemente kleiner als Null sind. Um hier wahr zu werden, muss ich sie alle negativ machen. Und wenn ich speichere, wirst du wahr, denn jetzt sind alle Elemente hier negativ, okay? Also kannst du diese Art von Prüfung mit Hilfe von jedem durchführen . Du hast Concat. Ordnung. Also das ist eine weitere interessante Sache, okay? Wenn Sie zwei Arrays zu einem kombinieren möchten , können Sie dies nutzen Nehmen wir an, ich habe hier mehr Zahlen. Okay. sind eher sechs, Hier drüben sind eher sechs, sieben und acht, oder? Ich kann also Zahlen sagen oder sagen , okay, Zahlen, ich sage Zahlen hier drüben und ich kann mehr Zahlen sagen, richtig Und ich kann das einem neuen Array zuweisen, oder? Also kann ich sagen, lass ein neues Array, so etwas. Ich werde in einem neuen Array drucken. Okay. Ich sage hier Konsolenprotokoll und ich sage neues Array. Ich speichere das und du siehst eins, zwei, drei, vier, fünf, sechs, 79. Ordnung. Ich kann hier auch acht hinzufügen. Ich weiß nicht, warum ich es verpasst habe. Also ja, du hast das, oder? Also ja, das ist Concat. Es wird sich mit Arrays verbinden, schneiden. Slice gibt also einen Teil eines Arrays zurück, okay. Lass mich dir das zeigen. Ich kann also sagen, lass uns hier drüben in Scheiben schneiden Okay. Und ich kann hier Zahlen sagen. Uh, numbers, tot, slice, und ich kann hier angeben , dass ich den Anfangsindex von Index eins bis zum Index drei Teile des Arrays haben möchte den Anfangsindex von Index . Okay. Jetzt kann ich sie protokollieren, hier drüben protokollieren, damit ich Slice Numb sagen kann . Jetzt kannst du zwei und drei sehen Okay? Also zwei und drei hier drüben. Also zerschneidest du nur das Array. Okay. Spleißen jetzt, was ist Schneiden? Dies wird Ihnen helfen, die Elemente zu entfernen oder zu ersetzen. Okay. Also, wie funktioniert das? Also lass mich dir das zeigen. Nehmen wir an, ich habe ARE von Früchten. Also gut, lass mich nach unten scrollen. Also kann ich sagen, lasst Früchte hier drüben. Okay, ich kann Apple sagen. Ich kann Hoppla, ich kann Banane haben Okay, und ich nehme, sagen wir Orange. Okay. Okay. Das ist erledigt. Und sagen wir, ich möchte, ich möchte Banane entfernen und Mango hinzufügen. Also sage ich Obst, Tot, Spleiß. Okay. Ich sage in einem Index. Okay? Also gebe ich bei einem Index an, lösche einen. Okay. Sie können die Anzahl der gelöschten Dateien sehen. Starten Sie also einen Index, löschen Sie ein Element und fügen Sie Mango hinzu. Etwas wie das. Okay? Und wenn Sie dann Obst eindrucken, sehen Sie die Ausgabe als Apfel, Mango und Orange, das können Sie sehen. Also ja, so funktioniert es. Treten Sie bei. Was bedeutet jetzt beitreten? Manchmal gibt es also eine Anforderung, bei der Sie alle Elemente innerhalb eines Arrays verbinden und in eine Zeichenfolge umwandeln möchten Sie alle Elemente innerhalb eines Arrays verbinden und . Das kannst du also absolut tun. Also kann ich sagen, lasst alle Früchte. Okay, ich kann sagen, Früchte, die sich verbinden, und wie möchte ich mitmachen? Also das ist ein Separator, den ich hier hinzufügen möchte. Okay. Also füge ich ein Komma Ich möchte, dass alle Fruchtnamen getrennt werden, und ich kann hier alle Früchte sagen. Du kannst Apfel, Mango, Orange sehen. Nun, was auch immer ich hier drüben hinzufüge, wenn ich Ausrufezeichen hinzufüge, werden Sie sehen, dass Ausrufezeichen für alle Elemente hinzugefügt werden, oder? Also bleibe ich im Koma, weil das ganz natürlich aussieht Umgekehrt. Jetzt ist Rückwärts ziemlich einfach, ziemlich unkompliziert. können Sie eine Zahl umkehren Mit Hilfe dieser Methode können Sie eine Zahl umkehren. Ich kann also sagen, dass die Zahlen umgekehrt sind. So etwas wie das hier. Okay. Und hier drüben kann ich Console Dot Log sagen und ich kann Reverse Number sagen. Du bekommst 54321. In Ordnung? Natürlich, wie der Name schon sagt, auch ziemlich leicht zu identifizieren und zu verstehen. Okay? Du kannst die Elemente in einem Array sortieren, oder? Du kannst also sagen, sortiere es. Und du kannst hier Zahlen sagen, T, sortieren. Okay. Und das kannst du hier genau spezifizieren. Also beende ich das einfach hier drüben. Okay. Ich werde keine Logik hinzufügen, dann fügen wir die Logik hinzu und wir werden sehen , welche Probleme wir lösen. Okay? Also, wenn du Sortierung auf diese Weise verwendest. Okay? Eigentlich ist die Funktion, die wir erstellt haben, schon sortiert, oder? Lassen Sie mich die Zahlen hier aktualisieren. Okay. Also werde ich die Zahlen aktualisieren. Ich sage drei, eins, und ich füge hier zehn und zum Beispiel zwei hinzu. Okay. Und ich werde mir das ansehen. Jetzt werden Sie sehen, dass es nicht wirklich in aufsteigender Reihenfolge sortiert Okay? Nun, das liegt daran, dass es standardmäßig als Zeichenfolge ist. Also dieser Vergleich, denn was passiert, ist, dass der Vergleich in Form einer Zeichenfolge stattfindet. Die Zahlen sind also nicht richtig sortiert. Um das richtig zu sortieren, können wir hier zwei Argumente hinzufügen, indem wir die Pfeilfunktionen verwenden, die Pfeilfunktionen verwenden, sodass ich hier A und B sagen kann, und ich verwende zwei Argumente, und ich sage hier A minus B. Okay, hier entlang. Und wenn ich das speichere, siehst du eins, zwei, drei und zehn. Also ist es jetzt hier geklärt. Aber welche Magie hat diese Logik dieser Sortier-Sache hier drüben gemacht? Okay? Und wie hat es funktioniert? Ordnung. Also, was passiert ist A und B die beiden Elemente der Arrays sind dass A und B die beiden Elemente der Arrays sind, die zu einem bestimmten Zeitpunkt verglichen werden , richtig Und dieser Vergleich wird hier mit der Sortiermethode durchgeführt. Okay. Also werden diese beiden Argumente zuerst übergeben. Okay, zwei Argumente werden in diesen Parametern übergeben. Und was dann passiert ist, ist, dass A minus B berechnet wird. Nun, wenn A minus B, sagen wir jetzt, ob das bei Drei und Eins funktioniert, oder? A ist drei und eins ist B. Okay? Also, A minus B ist zwei. Die Zahl ist positiv. Stimmt? B wird also vor A sortiert, denn wenn die Zahl positiv ist, bedeutet das, dass B kleiner als A ist Also wird B an erster Stelle stehen. Wenn die Zahl negativ ist, passiert dann, dass A vor B verschoben wird, in diesem Fall, oder? Und wenn die Rendite hier Null ist, dann werden beide als gleichwertig betrachtet und gleich behandelt. Okay, darum kümmert sich SOT hier drüben. Sie müssen das nur weitergeben denn mit Hilfe von Minus hier werden sie als Zahlen und nicht als Zeichenketten behandelt. Ordnung. Also so funktioniert die Sortierung, wenn Sie hier SOT verwenden . In Ordnung. Also das ist über die Funktionen oder ich sollte sagen Methoden in JavaScript in Bezug auf Arrays, oder? Und so können Sie es nutzen. So können Sie sehen, wie wir ursprünglich angefangen haben. Wir haben mit den Grundlagen begonnen, z. B. wie Sie hier eine Funktionsreferenz an die Map-Methode übergeben können . Und dann haben wir das in Anonym umgewandelt, und dann haben wir das Anonym hier in Map umgewandelt. Entschuldigung, keine Karte, Pfeilfunktionen, sollte ich sagen, oder? Und dann haben wir all die Funktionen gesehen, all die Methoden, die es mit Arrays gibt, richtig Sie können also Sortieren, Umkehren sehen. All dies ist zu einem bestimmten Zeitpunkt nützlich, wenn Sie mit Arrays programmieren und arbeiten, um Ihnen viel Zeit und auch viel Code zu sparen . Dadurch wird Ihr Code viel lesbarer, aber sie helfen Ihnen, die Dinge viel übersichtlicher und lesbarer zu machen . In Ordnung Ich hoffe, Sie konnten dieser Anleitung Schritt für Schritt folgen, und ich hoffe, sie war sehr nützlich. 9. Projektspotlight: Erstelle deinen eigenen Unit-Converter: In Ordnung, also wie geht es euch allen? Also ist es an der Zeit, dass wir einen Einheitenumrechner bauen , jede Aufgabe der Umrechnung eines Wertes in verschiedene Einheiten übernimmt Es wird also von einer Einheit in eine andere umgerechnet. Wenn ich hier zum Beispiel 100 eingebe oder 110 lasse. Und sagen wir, ich möchte von Meter in Fuß umrechnen, ich kann das umrechnen lassen und Sie können sehen, dass 110 Meter so viele Feeds sind. Jetzt kann ich hier 150 sagen. Ich kann das von Kilogramm in Pfund umrechnen lassen. Sie können sehen, dass das jetzt in Pfund angegeben ist, und ich kann es sogar von Selsius in Fahrenheit umrechnen lassen von Selsius in Fahrenheit umrechnen Sie können also sehen, dass 50 Grad Celsius 302 Fahrenheit sind. Das ist also ein einfacher Einheitenumrechner und auch eine ziemlich einfache Oberfläche, nichts allzu ausgefallenes oder chassiges Ordnung. Also lass uns gehen und das ausbauen. Also hier bin ich schnell beim VS-Code, und wir haben diese HTML-Datei, die CSS-Datei und die Index-JS-Datei in einem Ordner. Diese drei Dateien befinden sich im selben Ordner. Ich habe diesen HTML-Code hier und ich werde anfangen, diesen Code hier zu ändern. Der Titel dieser speziellen Seite wird hier Unit Converter lauten. Ich werde das einfach los und ich werde den gleichen Einheitenumrechner-Text hier oben haben wie das H-One-Tag. Ordnung. Also, was ich hier brauche, ist als Erstes, ich brauche einen Input. Alles klar. Also sage ich Eingabe, von wo aus ich den Wert eingeben werde , den ich konvertieren möchte. Diese Eingabe wird hier eine Zahl sein. Der Typ ist Zahl. ID ist ein Eingabewert , weil ich darauf von JavaScript verweisen muss , damit ich die Eingabewerte abrufen kann , die der Benutzer eingegeben hat. Ich brauche hier eine ID. Ich brauche einen Platzhalter namens Wert eingeben. Ups, so etwas in der Art, oder? Und ich werde das einfach schließen. Die Eingabe ist also erfolgt. Jetzt brauche ich acht Drop-down-Menüs, und dafür verwende ich Select hier, und ich werde ID als Konvertierungstyp hier sehen. Also, welche Art von Konvertierung möchte ich durchführen. In diesem Fall werde ich die Option Okay haben. Nun, die Option sind Meter , die hier drüben passen. Der Wert, also werde ich hier einen Wert haben. Der Wert ist M bis FT, richtig? Also werde ich dafür individuelle Werte haben, die ich nutzen kann. Also hier sage ich Meter in Fuß. Das werden Kilogramm zu Pfund, Kilogramm zu Pfund Okay, das wird von KG zu LP abgerechnet. Okay. Und, äh, dann wird es C Celsius sein. Okay. Was ich meine ist Celsius bis Fahrhöhe. Etwas wie das hier. Okay? Hoppla. Also, ja, ich habe die Schreibweise korrigiert und ja, das ist es Also wird es hier C bis F sein. Okay. Das ist erledigt. Wir haben diesen Einheitenumrechner, das Textfeld und dieses Drop-down-Menü hier, das Sie zur Auswahl von Werten sehen können, oder? Sobald das erledigt ist, nach Auswahl und alles erledigt ist, brauche ich hier drüben ein Muster, oder? Ich kann also sagen, dass die Muster-ID konvertieren ist. Okay? Das wird der Ausweis sein. Und ich kann hier einen Text namens Convert haben. Okay? Also das ist eine Schaltfläche , die angezeigt wird. Und danach muss ich auch den konvertierten Wert anzeigen. Also werde ich ein P-Tag haben, das sagen wird, Hoppla, ich werde es haben, also brauche ich hier keine ID, aber ich kann einfach sagen, konvertiere es Der Wert ist o Ich werde den Wert innerhalb einer Spanne hier drüben anzeigen Okay? Am Anfang habe ich Null, kann ich die ID so konvertieren lassen. Wert, so etwas in der Art. Okay. Das ist also erledigt, Sie können sehen, der umgerechnete Wert ist Null. In Ordnung. Also das ist es im HTML. Okay. Im HTML-Code werden wir nicht viel tun. Stellen Sie einfach sicher, dass Sie die Ja Script-Datei so verlinkt haben und Sie können die CSS-Datei auch hier verknüpfen lassen. Also werde ich nur die Verlinkung für CSS haben und ich werde es oben machen. Okay. Also im Kopf, ich werde einfach den Link hier drüben haben. Also, ich sage Stylesheet. Okay. Und ich sage href, styles dot css Ordnung. Das ist erledigt. Okay, ja, das ist es. Also das ist es aus dem HTML-Teil. Gehen wir nun zum JavaScript-Teil über und schauen wir uns an, wie Sie mit JavaScript einen Junit-Konverter erstellen und dieser Webseite etwas Leben einhauchen können einen Junit-Konverter erstellen JavaScript einen Junit-Konverter erstellen und dieser Webseite etwas Leben einhauchen Diese Webseite ist momentan ziemlich statisch. Nichts würde passieren, wenn Sie das Ende der Werte NC konvertieren würden, oder? Weil es kein Leben gibt. Also, wer wird Leben hinzufügen? Javascript natürlich Das Erste, was ich hier brauche, sind verschiedene Funktionen, oder? Also diese Konvertierungen , die ich machen werde, ich brauche eine Möglichkeit , diese Konvertierungen durchzuführen. Und was ich tun kann, ist , für jede Konvertierung, die ich machen möchte , eine Funktion erstellen zu lassen, oder? Also die erste Umrechnung , die ich hier mache, ist Meter in Fuß, dann habe ich Kilogramm in Pfund, Celsius in Fahrenheit Ich habe drei Funktionen, richtig, und ich brauche einen Zuhörer hier drüben, der sich den Klick auf die Schaltfläche Konvertieren anhört Das ist also etwas, was wir tun müssen. In Ordnung. Also werde ich nicht nur normale Funktionen haben. Natürlich können Sie normale Funktionen ausführen, aber ich werde ein Objekt haben, und ich werde es als Einheitenkonverter bezeichnen , und ich werde die Methoden innerhalb dieses Objekts erstellen lassen, richtig? Also werde ich M bis F T sagen, oder? Und ich werde hier Funktion sagen. Okay. Und ich werde das hier einfach loswerden, der Parameter wird so sein, wenn er Meter in Fuß ist, also wird der Parameter-Parameter in Metern angegeben, richtig? Und ich kann Rückkehr sagen. Ich kann Meter in die Tiefe sagen. Und wie würdest du einen Meter in Fuß umrechnen? Sie müssen also einen Meter mit 28084 multiplizieren, oder? Das ist also die Standardformel. Das ist nichts Besonderes hier. Okay? Also ja, das ist erledigt. Ich verstehe, dass ich einen Fehler richtig gemacht habe, das liegt daran, dass ich hier drüben einen Gleichwertigen verpasst habe. Okay. Also das ist erledigt. Das ist die erste Methode, bei der ich M habe, was Meter in Fuß ist. Ich werde hier von KG zu B wechseln. Okay? Das wird eine weitere Funktion hier sein, und das wird Kilogramm akzeptieren, weil wir Kilogramm in Pfund umrechnen , oder? Also sage ich zurück. Ich sage Kilogramm rein. Und wir werden diesen Wert mit 2,2 0462 multiplizieren. Das ist also ein Standardmultiplikator, wenn Sie Kilogramm in Pfund umrechnen wollen . Sie können einfach googeln, wie man Kilogramm in Pfund umrechnet und Sie werden eine beliebige Anzahl von Formeln finden, ich verwende diese. Okay? Also das ist ein Multiplikator dafür, dass du C F hast. Also das ist für Celsius bis Fahrenheit hier drüben Ich werde eine Funktion hinzufügen. Ich werde Celsius sagen, so etwas in der Art, und dann hier drüben werde ich Rückkehr sagen. Es gibt eine Formel, um Celsius in Fahrenit umzurechnen. Ich werde es hier erzwingen, es mit neun mal fünf zu multiplizieren und ich sage plus 32, ungefähr so Okay. Also das sind alle Funktionen, sollte ich sagen. Wir haben also Methoden innerhalb eines Objekts erstellt, und Sie können diese Methoden natürlich auch außerhalb von Funktionen erstellen lassen. Warum ich innerhalb eines Objekts erstellt habe , dient der logischen Gruppierung Wann immer Sie ein Jaw-Skriptprogramm haben, können Sie Objekte zu Gruppierungszwecken erstellen, oder? Also hier gruppiere ich diese Methoden zusammen, richtig? Das ist also erledigt. Also fange ich hier an, den Listener zu definieren, also sage ich hier Dokument. Ups. Das wurde in ein Dokument umgewandelt Okay. Ich sage Punkt und hole Element für ID hier drüben. Okay, und ich sage konvertieren. Warum konvertieren? Weil das die ID ist , die wir hier im HTML-For-Button definiert haben , oder? Darauf müssen wir uns also beziehen, wenn Sie sich hier auf die Schaltfläche beziehen , und ich sage, auf klicken Sie hier. Okay? Also, wenn wir darauf klicken, müssen wir die Pfeilfunktionen verwenden , und ich habe die Logik , was beim Klicken passiert. Okay? Nun kann Logik so einfach sein wie das Anzeigen einer Warnung. Okay? Wenn ich das speichere und konvertieren sage, okay? Es wird kein Warnfeld angezeigt. Es funktioniert also nicht, weil das C für Klick hier nicht in Großbuchstaben geschrieben werden darf. Es muss klein sein. Es ist ein kleines kleines Wort. Okay? Alles ist auf einen Klick klein. Wenn ich das jetzt ändere, wird es funktionieren. Du kannst es sehen. Jetzt müssen wir die Logik hier drüben haben. Okay? Das wird also beim Klicken auf die Schaltfläche ausgelöst. Okay. Also, was ist die Logik? Wie werden wir die Logik definieren? Als Erstes müssen wir also sehen, welche Option hier ausgewählt wurde. Okay. Also, welche Option ist aus dieser Drop-down-Liste ausgewählt, richtig? Sobald wir das auch haben, müssen wir den eingegebenen Textwert hierher holen , weil das ein Wert ist, den wir konvertieren werden Also der eingegebene Textwert und die Option aus dem Drop-down-Menü. Diese beiden Dinge müssen wir hier rüberbringen. Okay. Also ich sage hier „Lass den Wert eingeben“ und ich kann „Dokument Punkt“ sagen. Ich kann hier sagen, Element nach ID abrufen. Okay. Und ich sage Eingabewert. Okay. Was ist ein Eingabewert? Der Eingabewert ist die ID, die Sie hier zugewiesen haben. Das ist es, was wir hier bekommen. Okay? Das ist erledigt und wir sagen hier Punktwert. Okay. Wir haben das hier drüben. Nun, das wäre standardmäßig in einer Zeichenfolge, richtig? Sie müssen das für die Berechnung verwenden, oder? Weil Sie diesen Wert an diese Funktion übergeben werden. Wir können also hier eine explizite Konvertierung durchführen. Wir können sagen, Pass Float und Hoppla, du kannst hier und hier rüber kommen, du kannst das, so etwas in der Art, richtig Wir haben also einen Float-Wert von dem, was der Benutzer in den TextFX eingegeben hat Ordnung, das ist erledigt. Jetzt kann ich sagen, lasst die Konvertierung. Tippe hier drüben. Was ist die Art der Konvertierung? Welche Art von Konvertierung möchten Sie hier durchführen? Ich kann also sagen, dass Dokument Punkt für Element nach ID erhält. Und ich werde mich auf den Konvertierungstyp beziehen. Okay. Also, was ich empfehlen würde, ist hier drüben, du solltest es kopieren. Also hier kannst du sehen, das ist die ID. Sie können diese ID kopieren und hier hinzufügen. Okay, anstatt zu tippen. Denn wenn es einen einzigen Fehler gibt, erhalten Sie den Wert nicht korrekt. Und ich kann hier von Wert sprechen, oder? Und dann hier drüben, sobald wir das haben, kann ich es als Warnung anzeigen. Ich kann Eingabewert, Komma sagen, ich kann Cosion-Typ sagen. So etwas wie das Du kannst NN sehen, ich kann 100 eingeben. Sie sehen hier 100, lassen Sie mich diese beiden zusammenfassen. Damit ich so etwas sagen kann. Okay. Also, wenn du 200 hinzufügst, siehst du 200 und Meter bis Fuß, richtig? Wenn ich zu Kilogramm zu Pfund wechsle, siehst du KG zu LB, oder? Weil du den Wert verstehst. Hier drüben. Was ist der Wert? Der Wert ist etwas, das Sie hier für die Option definiert haben . Jede Option hat einen Wert und Sie beziehen sich auf den Wert hier in HTML. Sie können Celsis bis Fahrenit C F sehen . Sie erhalten also alles perfekt, auch wenn Sie, sagen wir, wenn ich einen Fließkommawert eingebe, erhalten Sie den gesamten Wert Okay? So weit, so gut, wir können also alles abrufen, was der Benutzer in das so genannte Formular hier eingibt , oder? Nun, was ich tun werde, ist, ich kann hinzufügen, ich kann hier eine Variable hinzufügen. Also kann ich sagen, konvertiere es. Wert. Also, womit ist der umgerechnete Wert? Okay? Also kann ich sagen, umgerechneter Wert. Okay, und der umgerechnete Wert ist gleich, also kann ich hier den Konvertierungstyp verwenden. Jetzt habe ich eine Bedingung, ob der Konvertierungstyp gleich M zwei FT ist . Okay? Wenn der Konvertierungstyp gleich M in FT ist, sage ich Einheitenumrechner FT, weil das eine Funktion oder der Methodenname ist Ich sollte sagen, ich übergebe den Eingabewert. Okay. Sonst würde ich das hier tun. Okay, sonst hätte ich noch einen Scheck hier drüben. Ich sage, der Konvertierungstyp ist gleich. Ich sage KG zu LP. Stellen Sie nur sicher, dass Sie diese Keywords richtig eingegeben haben. Wenn Sie möchten, können Sie es aus der HTML-Datei kopieren. Aber jeder Tippfehler führt dazu, dass die Bedingung falsch ist. Okay? Sie können also Einheitenkonverter-Tag sagen, Sie können hier KG in LB sagen und Sie können den Eingabewert übergeben. So etwas. Das ist erledigt. Ich nehme einen Doppelpunkt hier drüben. Hier, wenn beide falsch sind, wenn es keine Übereinstimmung für beide gibt, lasse ich den Einheitenumrechner C F beibringen, denn das ist es, was übrig bleibt, oder? Also muss es eindeutig ausgewählt werden. Also ist diese Formel fertig. Diese Bedingung ist erfüllt. Was wir hier machen, ist, dass wir hier überprüfen lassen, ob der Umrechnungstyp Meter ist, um zu passen. Wenn das stimmt, führen wir mit Hilfe des ternären Operators diesen Aufruf hier durch, diesen Methodenaufruf Wenn das nicht stimmt, dann haben wir hier einen anderen ternären Operator. Welches ist verschachtelt. Also haben wir noch einen Scheck Wenn das wahr ist, wenn das wahr ist, dann wird es ausgeführt, andernfalls wird es ausgeführt, weil es das ist, was übrig bleibt, oder? Also muss es einer dieser drei sein, oder? Was ich jetzt tun werde, ist Dokument, Punkt, Element nach ID abrufen und hier drüben sage ich konvertierter Wert. Okay? Warum umgerechneter Wert? Weil wir diese ID für Span haben. Also werden wir diesen umgerechneten Wert erhalten. Okay? Ich werde Punkttextinhalt sagen. Etwas wie das hier. Ich werde hier den umgerechneten Wert sagen. Okay? Weil das eine Variable ist , durch die dieser Wert geschaffen wird, oder? Das ist also erledigt. Was ich jetzt tun kann, ist, das zu speichern und es uns testen zu lassen. Also wenn ich 100 Meter in Fuß sage, umrechnen, du kannst sehen. Da ist die Ausgangsleistung von Kilogramm in Pfund. Da ist die Ausgabe. Wenn Sie Celsius in Fahrenheit umrechnen, ist da noch die Ausgabe. Du kannst es sehen Eine Verbesserung, die Sie vornehmen können, besteht darin, dass es drei Dezimalstellen gibt , oder es wird Anzahl von Dezimalstellen geben, weil es keine Einschränkung gibt Also kannst du hier tot zu fix hinzufügen und du kannst hier drüben so etwas sagen Jetzt wird es hier auf zwei Dezimalstellen festgelegt , 220,46 Okay? Sowas in der Art, hier drüben. Ordnung. Also ja, es geht darum , wie man eine Währung aufbauen kann, oder tut mir leid, keine Währung. Dieser Einheitenumrechner. Es tut mir leid. In Ordnung. Sie können hier eine Bestätigung durchführen lassen, damit Sie sagen können , ob das nicht gleich einer Zahl ist. Okay. Entschuldigung, ist AN. Dann muss ich den Eingabewert hierher übergeben, und dann würden Sie das ausführen, o. Dann würden Sie das ausführen , Sie werden diesen Schlusssatz am Ende hierher verschieben diesen Schlusssatz am Ende hierher , ungefähr so. Okay. Und ich füge das hier hinzu. Okay, das ist erledigt. Und wenn dieser Zustand fehlschlägt, können Sie eine Warnung anzeigen. Okay, bitte gib eine gültige Nummer ein. Also eine kleine Bestätigung hier, eine Gültigkeitsprüfung, die sicherstellt , dass der Benutzer , hier drüben eingibt, eine gültige Zahl ist. Okay? Das ist es, was dieser Scheck bewirken wird. Okay. Also sagen wir, wenn ich hier 100 eingebe, wird es gut funktionieren. Aber wenn ich hier 100 oder etwas anderes eingegeben habe, kann ich hier nichts eingeben , weil dieser Typ eine Zahl ist. Aber trotzdem habe ich diesen Scheck hier drüben hinzugefügt. Falls das zufällig keine Zahl, sondern eine Nian-Bedingung ist, wird ein boolescher Wert zurückgegeben, der angibt, ob es sich bei dem Wert um einen reservierten Wert Nian handelt, nicht um eine Wenn es eine ist, die nicht gleich ist, also wenn diese Bedingung wahr ist, dann wird nur diese ausgeführt, andernfalls erhalten Sie Hier drüben, was eine Warnung ist. In Ordnung. Also das ist soweit erledigt. Jetzt werden wir hier zu den Stilen wechseln. Wir werden einige grundlegende Stile hinzufügen und dafür sorgen, dass es hier anständig aussieht. Okay. Also fange ich einfach mit Body hier drüben an. Ich sage gleich Schriftfamilie. Ich wähle hier Sinef aus. Okay. Etwas wie das hier. Und dann habe ich den Text hier ausrichten lassen. Ich sage Mitte. Ich sage Marge, Marge wird Null sein. Lass mich sehen, ob das ist. Sie können sehen, dass jetzt alles zentriert ist. Margin ist auch Null Padding, ich sage hier 20 Pixel. Ich sage, die Hintergrundfarbe ist, dass ich dieses Alice Blue haben kann. Du kannst wählen, was du willst, okay? Ich habe ein bisschen bläuliches Thema. Wenn Sie Weiß wollen, können Sie weißen Rauch wählen. Es hängt ganz von deiner Wahl ab, richtig. Sie können hier auswählen , was Sie wollen. Okay. Das ist erledigt. Ich füge ein Leerzeichen hinzu. Ich komme jetzt nach der Leiche zu H. Eins. H-one zeigen wir die Einheit an . Umrechnen Sie hier eine Überschrift. Also sage ich Farbe und ich kann Schwarz haben. Ich sollte hier Schwarz haben. Ich bleibe einfach bei Schwarz. Sie können das anpassen, wenn Sie möchten, in Ordnung. Geben Sie nun zur Eingabe ein, wobei der Typtyp Zahl ist, okay. Also okay dafür und ich füge hier ein Komma für Select hinzu. Okay. Für beide muss ich, sagen wir, Polsterung hinzufügen Okay. Also gibt es keine Polsterung Wenn du hier also 100 eingibst, gibt es keinen Abstand, also sage ich Abstand, Doppelpunkt zehn Pixel Okay. Sie können eine ordentliche Menge an Polsterung sehen, Sie können hier einen Rand hinzufügen. Okay, Rand von zehn Pixeln. Okay, du kannst da jetzt ein bisschen Abstand erkennen. Okay. Und du kannst hier Grenze sagen. Grenze ist also ein Pixel, durchgehend, und ich kann sagen HtD also sehen , dass dieser eine Farbcode, den ich für den Rand verwende Sie können also sehen , dass dieser eine Farbcode, den ich für den Rand verwende, irgendwie ausgegraut ist Okay. Und ich kann Grenzradius sagen. Und ich gebe dem Ganzen ein rundes Gefühl. Okay, also füge ich einfach fünf Pixel hinzu. Also werden die Ränder jetzt ein wenig abgerundet, leicht um fünf Pixel abgerundet. Entschuldigung, hier etwas um fünf Pixel abgerundet . Es tut mir leid. Okay, das ist erledigt. Breite, ich füge hinzu. Die Breite kann hier 200 Pixel betragen. Okay. Also ist es für beide erledigt, okay? Für den Knopf. Okay, der Button sieht momentan roh aus. Lassen Sie mich hier etwas für Button tun. Ups. Für die Schaltfläche sage ich zuerst Abstand, Abstand von, ich sage zehn Pixel und 20 Pixel. Okay. Dann kann ich Rahmen mit Hintergrundfarben haben. Also muss das Semikolon sein, Hintergrundfarbe. Okay. Die Hintergrundfarbe kann, ich würde sagen, blau sein. Ich werde sehen, ob das, du siehst, blau, aber die Ränder sehen schlecht aus. Okay, ich sollte sagen. Vielleicht werde ich Border als Nonne haben. Mal sehen, ob ja. Boda ist Nonne Ich kann sagen, Farbe ist weiß. Weiß, wo es hier weiß ist. Sie können sehen, wie Weiß umgewandelt wird. Sie können den Grenzradius, den Grenzradius, ich kann Fi-Pixel sagen, weil ich das für die anderen Elemente angegeben habe . Okay. Nun, Curso, wenn du den Mauszeiger drüber bewegst, möchte ich, dass sich das ändert, also kann ich Cursorzeiger sagen Wenn ich jetzt hierher gehe, können Sie sehen, Cursor in einen Zeiger verwandelt Okay. Das ist erledigt. Ich kann auch einen Hover-Effekt hinzufügen Also Taste, Doppelpunkt, ich kann *** sagen und ich kann Hintergrundfarbe sagen Und ich kann Dunkelblau haben. Wenn Sie also mit der Maus darüber fahren, sehen Sie Dunkelblau. Eine Art Effekt, richtig. Jetzt ist das erledigt, und wir können E für das Display stylen lassen, was für ein P-Tag ist Das kann die Schriftgröße sein. Ich erhöhe einfach die Schriftgröße auf 18. Ich ändere es einfach auf 18 und ich habe einen Rand von sagen wir zehn Pixeln. Wenn du das speicherst, hast du das. Okay. Jetzt bin ich ein bisschen herangezoomt . Okay? Also bin ich ein bisschen herangezoomt. Sie können es hier sehen , damit die Schüler es richtig sehen können, aber Sie können die Ausgabe hier sehen. Okay, jetzt sieht es ziemlich anständig aus. Ich habe die Anwendung auch im Vollbildmodus geöffnet, damit Sie eine bessere Ansicht haben. Okay, 2.200 und du kannst die Konversionen hier sehen, oder? Also das wird gut funktionieren Okay? Sieht ziemlich anständig aus. Sie können das CSS an Ihre Anforderungen anpassen. Sie können die Farbe je nach Ihren Farbeinstellungen ändern . Ordnung? Also das ist ungefähr die Einheit Coto, die Jaw Script benutzt Ich hoffe, das hat super viel Spaß gemacht. 10. Projekt-Showcase: Erstelle eine dynamische To-Do-List-App mit JavaScript: Ordnung, es ist also an der Zeit , dass wir über eine Aufgabenlistenanwendung mit JavaScript, HTML und CSS sprechen eine Aufgabenlistenanwendung mit JavaScript, HTML Hier sehen Sie also diese Anwendung, die wir erstellen werden, und Sie können sehen, dass es eine zum Ausführen bereits hinzugefügte Ja-Script-Lernfunktionen gibt . In Ordnung. Ich kann weitere Aufgaben aus diesem Eingabefeld hier hinzufügen. Ich kann sagen, Spring Boot lernen und ich kann sagen, Aufgabe hinzufügen Ich kann Lebensmittel mitbringen. Okay. Etwas wie das hier. Und du kannst die Aufgaben hinzufügen. Sie können sie mit einem Loch markieren und sie auch als erledigt markieren. Ordnung, das ist also eine einfache Anwendung, die wir erstellen werden. Wir werden JavaScript, HTML und CSS verwenden. Alles klar? Aufgeregt, lass uns gleich loslegen. Hier bin ich also im Visual Studio-Code, dem Editor , den ich verwenden werde. Ich habe diesen Browser auch an der Seite mit Live Server geöffnet . Ich habe drei Dateien geöffnet: Indexpunkt im HTML-Stil , Punkt-CSS und Indexpunkt Gs. Stellen Sie nun sicher, dass sich diese drei Dateien im selben Ordner befinden, bevor Sie fortfahren diese drei Dateien im selben Ordner befinden Ordnung. Jetzt fange ich mit der HTML-Datei an. Zuerst füge ich einen Ausruf hinzu. Hoppla. Ich bin eigentlich in einer JavaScript-Datei, also komme ich zur HTML-Datei Ich füge ein Ausrufezeichen hinzu und erhalte hier einen Standardcode In Ordnung. Also hier drüben kann ich den Titel des Dokuments angeben, um die Anwendung aufzulisten, okay? So etwas in der Art. Ordnung. Und du kannst sogar E H one Tag hier drüben als Titel haben. Okay? Also kann ich H eins sagen. Und du kannst sagen, hier aufzulisten. Okay, so etwas in der Art. Ordnung. Also, wir werden hier zwei Dinge brauchen. Eins ist Input und das andere ist ePaton, okay? Also werde ich zuerst ein Div erstellen und ich werde hier eine Eingabe wie diese haben Ich nenne das als Hoppla, tut mir leid, tippe hier als Text ein. Okay. ID ist die ID ist Aufgabeneingabe. Ich muss ihr eine ID zuweisen, weil ich direkt aus dem Ja-Skript auf dieses Element verweisen werde , damit ich herausfinden kann was der Benutzer hier tatsächlich eingegeben hat. Ich werde sagen, gib deine Aufgabe ein, ungefähr so. Ordnung. In der nächsten Zeile nach der Eingabe werde ich hier einen Button haben, richtig? Auf der Schaltfläche steht also ID, und ich nenne das hier als Aufgabe hinzufügen, ungefähr so. Und dann heißt es Aufgabe hinzufügen, so etwas wie Okay. Das ist erledigt, und dann glaube ich, uns geht es hier allen gut. Okay. Lass mich sehen. sehen hier keinerlei Ergebnisse. Also ich sehe die Ausgabe jetzt nach der Aktualisierung, okay. Und ja, das sind die Eingabe und die Schaltfläche, wir werden HTML sehr einfach halten. Okay, ich habe eine Eingabe-Taste und ich werde hier eine ungeordnete Liste erstellen lassen, die zum Rendern der Aufgabenliste verwendet wird. Okay. Also nenne ich das eine Aufgabenliste, ungefähr so. Okay? Hier drüben, Script unter dem Script-Tag, ich werde SRC haben, und ich werde das so nennen, weil ich es mit Index Gs hier drüben verknüpfen werde Und ganz oben kann ich hier ein Stylesheet haben, also kann ich Link, RL, ich sage Stylesheet Okay. Und ich werde das schließen. Ich werde auch das F-Tag erwähnen und ich sage Styles Dot CSS. So weit, so gut. Okay, HTML ist also fertig. Wir haben es wirklich, wirklich einfach gehalten. Sie können sehen, das ist der Container hier , der den Eingabetyp und die Taste enthält. Okay? Ich kann dem hier eine ID zuweisen, damit wir sie später für das Styling verwenden können. Ich kann hier Task-Container sagen. Okay. Also das ist der Inhalt der Aufgabe hier drüben, wo ich Eingabe und Taste habe Hier passiert die ganze Aktion. Und dann habe ich eine ungeordnete Liste, in der ich die Liste der Elemente oder die Liste der Aufgaben anzeige. Das ist erledigt. Jetzt komme ich zu Index GS. Okay? Dies ist eine JavaScript-Datei , in der wir Code schreiben werden, der uns hilft diesem HTML etwas Leben einzuhauchen. Okay, das macht jetzt buchstäblich nichts, okay? Also als Erstes brauchen wir eine Möglichkeit, unsere To-Do-Liste zu speichern und zu verwalten, richtig? Und wir werden auch eine Möglichkeit brauchen, im Grunde genommen, uns dieses Ereignis anzuhören. Wann immer der Benutzer auf eine Aufgabe klickt, müssen wir sicherstellen, dass die Aufgabe Anwendung hinzugefügt wird. Sobald die Aufgabe zur Anwendung hinzugefügt wurde , müssen wir sie auch rendern. Okay. Also Dinge wie Rendern, Hinzufügen von Aufgaben, okay, das Markieren der Aufgabe als erledigt, all das wird in der Anwendung selbst verwaltet. Also werden wir ein Objekt haben, okay? Also fange ich damit an, ein Objekt zu erstellen. Ich werde sagen, ich mache die App hier drüben. Okay. Und so werde ich es erstellen. Hier drüben werde ich ein Array haben, weil die Anwendung mehrere Aufgaben haben kann, oder? Also werde ich ein Array haben, das verwendet wird, um Aufgaben hier zu speichern. Nun, ich werde hier ein paar Methoden haben. Einer ist bei der Arbeit, okay? Also das ist die erste Methode hier drüben. Okay. Dann werde ich eine andere Methode haben, nämlich Toggle Task Dies wird zum Umschalten verwendet. Wenn Sie also sagen, dass diese Aufgabe erledigt ist, wenn Sie auf die Aufgabe klicken, wird sie als erledigt markiert Wenn Sie erneut klicken und darauf klicken, wird sie als nicht als zehn markiert. Okay? Also hier geht es im Grunde um Umschalten Und hier wird diese Funktion oder diese Methode den Index hier akzeptieren. Das ist erledigt. Ich werde erledigte Aufgaben entfernen lassen, okay? Also das können wir auch tun, also ich kann sagen, erledigte Aufgaben entfernen. Okay. Und, äh, ich nehme das. Okay. Also das wird uns helfen, die erledigten Aufgaben zu entfernen, okay? Und ich werde hier eine Methode zum Rendern von Aufgaben haben . Okay? Also, ich sage Aufgaben rendern, so etwas, und hier drüben wird es so sein. Ordnung. Also das ist erledigt. Okay? So wird das Objekt sein. Dieses Objekt wird das Attribut für die Aufgabe zum Speichern von und alle Methoden zur Verwaltung von Aufgaben haben, richtig? Also, was ich tun werde, ist hier Dokument zu sagen, dachte ich , Hoppla, Dokument tot Ich werde hier Element für ID abrufen sagen und ich werde hier bei Aufgabe sagen. Was ist bei der Aufgabe? Bei der Aufgabe ist der Button hier drüben. Okay? Du kannst sehen, dass das ein Button ist. Wir bekommen also den Button, und zu dem Button werde ich sagen, auf Klick hier drüben. Okay. Ich werde Pfeilfunktionen verwenden , so wie sie sind. Und hier habe ich die Logik, was passieren soll , wenn ein Benutzer auf die Aufgabe hier drüben klickt. Okay, auf dem Button, ich meine, okay? Also hier kann ich zunächst eine Warnung anzeigen. Ich kann einfach testen, ob dieser Listener einwandfrei funktioniert. Das sollte es Wenn ich also sage, hinzufügen, okay, es wird nicht angezeigt, dann liegt das daran, dass das Kapital ist. Das tut mir leid. Okay. Also hier kannst du es sehen, hi. Okay, es funktioniert gut. Also das wird beim Klicken auf die Schaltfläche ausgelöst. So weit, so gut. Was sind nun die Aufgaben, die wir innerhalb dieses Zuhörers erledigen müssen Als Erstes müssen wir herausfinden, was in dieser Aufgabe eingegeben wurde. Wie werden wir das bekommen? Das werden wir aus diesem Input herausholen. Wir haben diese ID-Aufgabeneingabe, richtig? Sobald wir den Text haben , der hier eingegeben wurde, rufen wir bei der Aufgabe auf und lassen diese Aufgabe dem Aufgabenfeld hinzufügen, richtig? Und dann werden wir dieses Eingabefeld auf eine leere Zeichenfolge zurücksetzen , weil es gelöscht ist , weil die Aufgabe hinzugefügt wurde, oder? Also was ich tun werde, ist, Aufgabeneingabe hier drüben zu lassen. Okay, ich sage Dokument Punkt, Element für ID abrufen. Und lassen Sie mich die Aufgabeneingabe hier bekommen. Okay? Also werde ich Aufgabeneingabe sagen. Stellen Sie sicher, dass Sie diese ID-Referenz haben. Diese ID-Referenz sollte mit der identisch sein , die Sie hier im HTML definiert haben. Ordnung. Also das ist erledigt. Das kümmert sich hier drüben. Okay. Also, was ich hier tun muss, ist, okay, das ist erledigt. Ich werde herkommen. Ich sage, App Punkt bei Aufgabe zu machen, und ich werde Aufgabe, Eingabe, Punkt, Wert sagen. Okay. Also, was ich mache, ist Aufgabeneingabe. Also das ist das Element, das ich bekommen habe, und ich sage Punktwert. Ja. Okay. Und dann muss ich das hier zurücksetzen, dieses Feld hier drüben, richtig? Also füge ich eine leere Zeichenfolge hinzu, etwa so. Das wird das Eingabefeld löschen, oder? Ich kann also sagen, Test bei Aufgabe. Sie können sehen, dass es gelöscht wird, aber es wird gerade nicht hinzugefügt. Warum? Weil diese Funktion oder diese Methode buchstäblich nichts hat. Es ist eine leere Methode. Okay? Wir müssen das alles definieren. All das müssen wir noch definieren. Alles klar. Also, was ich jetzt tun werde, ist, ich werde mit der If-Therapie hier drüben beginnen. Okay. Wenn es eine Aufgabe gibt, oder ich kann, wenn Sie sie validieren möchten, können Sie hier eine Prüfung hinzufügen , bei der Sie überprüfen, ob die Aufgabe existiert. Oder Sie können sofort diese Punkt-Aufgabe sagen, tut mir leid, diese Punkt-Aufgaben sind hier drüben Also müssen wir diese spezielle Aufgabe zu dieser Aufgabe hier drüben verschieben oder hinzufügen diese spezielle Aufgabe zu dieser Aufgabe hier drüben Okay? Und hier werde ich Text sagen, Colin Okay, das ist die Aufgabe, und ich sage erledigt Ist sie abgeschlossen? Ich würde sagen, fällt um. Okay? Sowas in der Art. Okay. Und sobald das erledigt ist, muss ich Render aufrufen. Also dieser Punkt-Renderer. So etwas wie das. Sei es, dass die Benutzeroberfläche aktualisiert werden muss, die richtige Benutzeroberfläche, sobald die Aufgabe hinzugefügt wurde, sollte die Liste der Aufgaben aktualisiert werden, und deshalb nenne ich das hier Punkt-Rendern. Okay, das ist erledigt. Also grundsätzlich hat jede einzelne Aufgabe in diesem Array zwei Dinge. Zum einen die Aufgabe selbst und ob die Aufgabe als erledigt markiert ist oder nicht. So weit so gut. Wir müssen jetzt die Aufgaben umschalten Okay? Also, was wir tun werden, ist , diese Punktaufgaben zu sagen. Ich hole mir die Aufgabe aus dem Index hier drüben, weil wir Zugriff auf den Index haben. Ich sage Punkt abgeschlossen. Okay. Also das wird das Gegenteil davon sein , ob es abgeschlossen ist oder nicht. Ich sage diesen Punkt Aufgaben und ich sage Index, Punkt abgeschlossener Wert. Ich drehe diesen Wert hier gerade um. Der Wert, der im abgeschlossenen Attribut dieser bestimmten Aufgabe gespeichert ist , wird also der im abgeschlossenen Attribut dieser rückgängig gemacht und erneut zugewiesen Das ist es, was gerade passiert. Das ist es. Jetzt, nachdem ich diese Änderung vorgenommen habe, muss ich die Oberfläche rendern, oder? Also rendern Sie die Benutzeroberfläche hier drüben. Ich werde diese Punkt-Render-Aufgaben sagen. Etwas wie das. Das ist erledigt. Ich muss die abgeschlossenen Aufgaben entfernen. Okay. Also was ich tun würde ist, ich würde sagen, damit wir hier den Filter benutzen können, richtig? Also du kannst das hier für Aufgaben sagen. Okay? Und du kannst sagen: Punkt Aufgaben, Filter hier drüben, und ich sage Aufgabe hier, benutze die Pfeilfunktion und ich sage, ob die Aufgabe erledigt ist. Etwas in der Art. Okay. Also, welche Aufgabe auch immer abgeschlossen ist, wird entfernt und ich sage diesen Punkt Rendern von Aufgaben, ungefähr so Okay. Nun, wie würdest du die Aufgabe rendern, richtig? Dafür müssen wir die Aufgabe also hier in der Aufgabenliste rendern , oder? Also würde ich das einfach kopieren, um etwas Zeit zu sparen. Okay. Und hier drüben sage ich Aufgabenliste. Okay. Und die ID hier drüben ist die Aufgabenliste, richtig? Also füge ich hier eine Aufgabenliste hinzu. Okay. Die Aufgabenliste wurde hinzugefügt. Was wir jetzt tun müssen, ist Okay. Also hier, ich werde die aktuelle Liste löschen müssen. Okay? Zuerst müssen wir die aktuelle Liste löschen. Ich werde dir sagen, warum ich das mache, okay? Es wird dir in Kürze klar sein. HTML ist gleichwertig. Also lösche ich zuerst die aktuelle Liste , weil wir die Aufgabe erneut rendern, oder? Wenn Sie also den inneren HTML-Code nicht löschen, wenn Sie die aktuelle Aufgabenliste nicht löschen, wird die Liste dupliziert, oder? Ich hoffe das macht Sinn. Was wir jetzt tun müssen, ist, dass dieser Punkt das für jeden hier drüben aufgibt. Okay. Und darin werde ich eine Funktion haben, und ich werde Aufgabenindex sagen. Aufgabe und Index hier sind also etwas, das übergeben wird. Okay. Und ich werde die Pfeilfunktion haben. Okay. Und in diesem Zusammenhang sage ich Const Li Okay Und ich sage Dokument Punkt für Punkt, Element für ID. Entschuldigung, ich werde nicht Element für ID ermitteln , da wir LI nicht erstellt haben. Innerhalb von UL werden Sie also LI-Elemente haben, richtig? Also sage ich hier „ Element erstellen“. Ich sage, erschaffe Li hier drüben. Okay, weil du es als Liste rendern willst. Und dann sage ich Litt Textinhalt. Und dann sage ich hier Task Dot Text. Okay. Und dann sage ich, ich klicke hier drüben. Okay, wir müssen auch einen Klick zur Liste hier drüben hinzufügen , weil wenn man darauf klickt, die Aufgabe auslöst, also sage ich diese Punkt-Umschalt-Aufgabe, und ich gebe den Index des Klicks Das ist erledigt. Okay. Also, ich sage, wenn die Aufgabe erledigt ist, werden wir hier sein. Okay. Dann kannst du die I'll I Dot Klassenliste hinzufügen. Also füge ich die Klasse hier hinzu. Okay, füge nichts hinzu. Ich sage abgeschlossen. Ich füge diesem HTML-Element eine Klasse hinzu wenn die Aufgabe als erledigt markiert ist. Okay? Also hier fügst du hier eine Klasse wie ID-Klasse für CSS hinzu. Das füge ich hier aus dem Javascript hinzu. Sie können also Element Dot Class List sagen. Sie fügen dies der Klassenliste hinzu, abgeschlossen. Und dann können wir CSS dagegen haben . Das macht Sinn. Und dann hier drüben, du kannst Aufgabenliste hier drüben sagen, zusammenzählen und Kind. Etwas in der Art. Ich werde das an die Benutzeroberfläche anhängen. Okay. Lass uns das testen. Ich sage Test. Sie können sehen, dass der Test zu 100 gerendert wird. Dies wird auch gerendert. Okay. Also das wird hier zweimal gerendert. Da ist, dass das zweimal gerendert wurde. Es gibt also ein Problem. Okay? Das Problem ist also, dass der HTML-Code hier nicht gelöscht wird. Okay? Also ich hoffe, du verstehst jetzt, wie wichtig diese Aussage ist. Das funktioniert eigentlich nicht. Und Sie können sehen die gesamte Liste erneut gerendert wird. Wenn ich hier also 200 hinzufüge, siehst du Test, 100, 200. Es rendert alles neu. Okay, wann immer du die Aufgabe hinzufügst. Also wird es nicht dies.in HTML sein. Es wird Tasks Dot HTML sein. Wenn ich das speichere, kann ich Test sagen. Es wurde Test hinzugefügt. Wenn ich 100 sehe, werden 100 hinzugefügt. Sie können sehen, dass es jetzt gut funktioniert. Ordnung. Nun, die Aufgaben werden auch als erledigt markiert, aber die Sache mit der Erledigung müssen Sie in CSS erledigen weil eine Klasse hinzugefügt wird, oder hier drüben. Wenn du dir die Klasse ansiehst, okay, lass es mich dir zeigen. Also hier siehst du den Li hier drüben. Es sind 100, oder? Klicken Sie tatsächlich auf diese 100. Okay. Die Klasse wird hier noch nicht hinzugefügt. Okay? Es sollte hinzugefügt werden. Wenn Sie also darauf klicken, sollte Completed hier dynamisch als Klassenname hinzugefügt werden . Aber das passiert nicht. Mal sehen, was das Problem ist. Beim Klicken sehen wir, dass Aufgaben umgeschaltet werden, und für jede abgeschlossene Aufgabe sollte die Klassenliste hinzugefügt werden Das ist okay. Okay, ich sehe, das ist Hauptstadt C. Das ist nicht richtig. Das sollte klein sein. Okay. Nun wollen wir sehen, was passiert. Also hier gibt es hier keine Aufgabe. Lassen Sie mich eine Aufgabe hinzufügen. Ich füge einen Test hinzu. Okay. Ich habe eine Aufgabe. Wenn ich darauf klicke, siehst du, dass der Kurs dafür abgeschlossen ist. Du kannst es sehen. Wenn Sie nun ein beliebiges CSS für die abgeschlossene Klasse hinzufügen, können Sie das CSS von Strike Through hinzufügen. Es wird also als durchgestrichen angezeigt, weil Sie dieses CSS angewendet haben. Sie müssen nur Klasse für Elemente sagen, wenn die Klasse abgeschlossen ist. Okay, du musst diesen fertigen Effekt in das CSS einfügen . Okay, es wird also verwaltet. Okay? Also die Bewerbung ist fast fertig, okay? Wir sind mit der Bewerbung fertig. Sie können sehen, dass alles getan wird. Die gesamte Funktionalität funktioniert einwandfrei. Okay. Jetzt gehen wir zu CSS über und fügen unserer Anwendung einige grundlegende Stile hinzu. In Ordnung. Jetzt fangen wir mit dem Body-Tag hier drüben an. Okay? Natürlich, Schriftfamilie, und wir werden Ariel Helveta, Albatica und Sansa sehen Wenn das okay ist, okay, Text oder Zeile. Ich sage Cena hier drüben. Ich füge hier Ups hinzu, nicht maximale Auflösung, sondern Rand. Ich sage Null. Okay. Und lassen Sie mich Polsterung hinzufügen Ich sage 20 Pixel. Okay. Lass mich sehen und sehen, was passiert. Okay, ein bisschen Abwechslung. Oh, du kannst eine Hintergrundfarbe hinzufügen oder was auch immer du willst. Ich füge hinzu, es ist blau. Okay. Es sieht ein bisschen bläulich Wenn du etwas anderes willst, äh, wie hier drüben. Siehst du. So antik weiß. Sie können das auch hinzufügen. Okay. Abhängig von deiner Wahl, was auch immer du willst. Oder Display, ich lasse Display zu Flex hier drüben. Okay. Flex-Richtung ist, ich würde sagen, Spalte. Okay. Und dann die Objekte ausrichten, ich sage zentriert. Ich werde das speichern. Okay. Das ist erledigt. Jeder einzelne. Okay. Also, ich weise jedem explizit eine Farbe zu. Ich nenne diese Farbe Schwarz. Okay. Das ist erledigt. Alles klar. Nun, lass uns herkommen. Ich werde mir das ansehen. Wenn du herkommst, da ist dieser Aufgabencontainer. Ich hole mir diese Task-Container-ID hier drüben. Okay. Ich sage Hash. So verweisen Sie mit Hilfe von Hash auf jede Element-ID in CSS. Okay. Ich sage Display-Flex, und wir müssen hinzufügen, dass wir Inhalt begründen müssen. Ich sage Zentrum. Okay. Also das ist jetzt einzeilig, wie Sie hier sehen können. Und ich sage Marge Bottom. Okay. Und das werden 15 Pixel sein. Okay. Also das ist eigentlich keine Vollbildansicht, aber wenn du hier zur Vollbildansicht gehst und ich aktualisiere, kannst du sehen, wie sie gerade aussieht, und ich kann einfach eine Aufgabe hinzufügen. Du kannst es sehen. Okay? Also ja, so sieht es momentan aus, Marge unten. Okay, das ist jetzt erledigt. Ich kann hier etwas Styling für die Eingabe hinzufügen. Okay. Ich sage, der Typ entspricht Text, etwa so, und ich sage hier, mit einem Abstand von zehn Pixeln Mal sehen, ob das okay ist. Ich sage Breite hier, Breite ist 200 Pixel. Okay. Ich sage Grenze. Okay, der Rand kann ein Pixel sein. Okay, jetzt gibt es keine Grenze mehr, wie du sehen kannst. Okay. Nun, eine Sache ist noch, ich denke, ich sollte es auch für kleinere Bildschirmgrößen optimieren . Okay. Was ich tun werde, ist, Medienabfragen hier hinzuzufügen, Medien und Sagen hier drüben. Es wird also die maximale Breite sein. Okay, so etwas, und es wird also eine maximale Breite von 600 Pixeln haben. Okay. Also füge ich hier etwas Styling für dasselbe hinzu, oder? Also kann ich Hashtag Task Container sagen. Okay. Ich sage Flex Direction. Ich sage hier Spalte , sodass sie vertikal ausgerichtet wird , wenn die Bildschirmgröße im Grunde genommen kleiner ist. Schaltflächeneingabefeld ist also vertikal ausgerichtet, weil es nicht gut aussah, oder , horizontal, quasi Seite an Seite, oder? Also habe ich das gerade hinzugefügt. Also ist es hier horizontal ausgerichtet, tut mir leid, vertikal ausgerichtet, wenn die Bildschirmgröße klein ist, aber horizontal so, wenn die Bildschirmgröße breit ist. Okay? Also, wenn die Bildschirmgröße klein ist, ist dieses CSS anwendbar. Okay? Ich kann hier sogar CSS dafür hinzufügen. Okay. Also gebe ich den Typ Textbreite Polsterung ein, die ich nicht benötige Ich überspringe das Padding. Die Breite ist hier 100%. Die Marge hier drüben. Also sage ich, der Rand ist fünf Pixel und Null. Äh, so. Und ich kann UL sagen. Die ungeordnete Liste kann also eine Breite 90% haben. So etwas wie das Okay. Also das ist erledigt. Okay? Das ist für kleine Bildschirme. Ich komme wieder her. Okay. Also ich meinte Pulver mit einem Pixel. Okay. Ich sage solide hier drüben, und ich werde diese Grenze hier drüben haben. Das sieht im Moment gut aus, du kannst es sehen. Es sieht gut aus. Okay? Wir müssen noch mehr Dinge wie den Radius hinzufügen. Okay, zum Beispiel ein Radius von fünf Pixeln. Okay, fünf Pixel sehen meiner Meinung nach ganz gut aus, wenn du das speicherst, oder? Und ich füge hier Rand so Rand hinzu, Rand von, sagen wir, zehn Pixeln. Okay. Das ist wohl erledigt. Alles klar. Die Eingabe ist abgeschlossen. Wir werden den Button jetzt hier drüben stylen. Also, wie stylen wir den Button. Okay. Also, wir können sagen, ähm, Polsterung, ich sage zehn Pixel und 15 Pixel hier drüben und die Hintergrundfarbe ist blau Okay. Und dann Farbe Weiß. Wenn du das speicherst, kannst du es sehen. Aber der Körper sieht nicht gut aus, also wird Border keinen deaktivieren. Okay, die Grenze ist weg. Ich kann den Grenzradius hier drüben haben. Okay, F-Pixel, so. Und dann kann ich den Cursorzeiger haben. Im Moment verwandelt es sich also nicht in einen Zeiger. Aber wenn Sie jetzt mit der Maus darüber fahren, um zu sehen, dieser Cursor zu einem Zeiger wird Okay. Und ich kann sogar den Colin-Hov-Effekt mit der Button-Taste hinzufügen Okay, also ich sage Hintergrundfarbe . Ist dunkelblau. Okay? Also, wenn du mit der Maus darüber fährst, wird es dunkelblau erscheinen Unkompliziert. Jetzt füge ich etwas Styling für die Endured-Liste hinzu Ich werde das kopieren. Okay. Und hier haben wir eine Breite von 50% und ich sage hier für den Typ des Listenstils „Keine“. Okay, ich möchte also nicht, dass diese Punkte rüberkommen. Also sage ich Typ im Listenstil, keiner. Das sieht nicht gut aus. Ich sage Polsterung als Null Okay. Die Anpassung liegt bei 50% und die Marge bei Null. Automatisch. Okay, das ist erledigt. Und ja, ich glaube, das ist es. Wir müssen nur ein CSS für abgeschlossen hinzufügen. Okay. Also sage ich abgeschlossen. Artikel hier drüben. Ich füge diese Aufgabe hinzu und klicke darauf, sodass sie als erledigt markiert wird. Ordnung, also sage ich erledigt. Okay. Also ich beziehe mich auf einen abgeschlossenen Kurs wie diesen Punkt abgeschlossen. So beziehen Sie sich. Ich sage Textdekoration, also muss ich es durchstreichen, richtig? Also sage ich hier drüben, Linie durch. So lautet der Name der Immobilie. Okay, also beide werden durchgestrichen, ich schätze, beide sind als erledigt markiert. Also sage ich Test. Okay, das ist noch nicht abgeschlossen, und ich kann sagen, dass es abgeschlossen ist. Aufgabe okay. Dies sind einige Scheinaufgaben, die ich hinzufüge. Wenn ich darauf klicke, wirst du sehen, dass das erledigt ist. Okay? Wenn ich das als abgeschlossen markiere, siehst du, dass es abgeschlossen ist. Okay? Also das funktioniert gut. Die Textdekoration ist abgeschlossen. Ich sage Farbe wie Grau. Okay, so etwas, das sollte anständig aussehen, ja. Okay. Ich schätze, das sieht jetzt okay aus, oder? Ich kann mehr hinzufügen. Okay, die Aufgabe wird also hinzugefügt. Okay. Du kannst es sehen. Wir können hier auch ein Styling für jede Aufgabe hinzufügen. Okay. Also, was ich hier machen kann, ist, nach UL hier drüben LI hinzuzufügen. Okay. Ich kann mir vorstellen, dass das Styling für jede Aufgabe ein Abstand von zehn Pixeln sein könnte Okay. Ich kann hier einen Rand hinzufügen, Rand aus einem Pixel, einen festen Rahmen, und ich könnte das als weißen Rauch bezeichnen. Du kannst es sehen. Okay, das sieht eigentlich nicht so gut aus. Also habe ich einen Farbcode, TTT. Ich füge das hinzu. Okay? Aber das sieht im Hintergrund nicht gut aus, wenn du es dir ansiehst, okay? Also was ich tun kann, ist, hier nach oben zu scrollen und diesen Hintergrund in Hash zu ändern. Ich kann sagen, eine Vier, eine Vier, Vier, so etwas. Okay? Irgendwie weiße, bläuliche Farbe Das sieht jetzt anständig aus. Okay. Also hier drüben muss ich den Radius hinzufügen. Sieht für mich nicht zu quadratisch aus, zu quadratisch, oder? Ich kann also einen Radius von wahrscheinlich fünf Pixeln hinzufügen Lass uns sehen. Okay. Radius von fünf Pixeln. Speichern Sie das. Okay. Und dann kann ich hier Margin sagen. Fünf Pixel und Null hier drüben. Das sieht jetzt anständig aus. Das kannst du sehen. Wenn ich mit der Maus darüber fahre, möchte ich im Idealfall auch den Cursorzeiger haben Ich sage ich Cursor. Zeiger. Du kannst sehen, dass ein Zeiger reinkommt, oder? Es sieht jetzt also toll aus. Okay? Zumindest anständig, würde ich sagen. Okay. Ich aktualisiere das einfach und Sie können hier auch die Standardaufgabe hinzufügen, wenn Sie möchten. Also hier in JavaScript kann ich hinzufügen, dass ich die Methode aufrufen kann. Okay, also ich kann hier „Todo App Dot at Task“ sagen. Die Standardaufgabe ist JavaScript lernen. Etwas in der Art. Okay. Du kannst es sehen. Also ist es jetzt hinzugefügt. Wann immer Sie die Anwendung laden, dies die Standardaufgabe, die hinzugefügt wird. Okay? Und Sie können Aufgaben hinzufügen oder C Shop lernen, zum Beispiel Java lernen. Okay, du kannst sie als abgeschlossen markieren. Ich hoffe, das ist nützlich und ich hoffe, es hat Ihnen Spaß gemacht, diese Studo-Anwendung mit mir zu erstellen, natürlich mit Ja Script, HTML und CSS 11. Schlussbemerkung zum Kurs: Und damit sind wir am Ende dieses fantastischen Kurses angelangt , in dem wir endlose Möglichkeiten mit Jascript-Funktionen erkunden endlose Möglichkeiten mit Jascript-Funktionen In diesem Kurs tauchen wir tief in das Herz der JavaScript-Funktionen ein, wobei wir alle Funktionen untersuchen von den Grundlagen bis hin zu fortgeschritteneren Themen wie Parametern, Rückgabewerten, Funktionsausdrücken und Pfeilfunktionen Wir haben uns sogar in die Welt der Funktionen innerhalb von Objekten und Array-Methoden gewagt , um sicherzustellen, dass Sie ein umfassendes Verständnis dafür haben wie man modularen und effizienten Code schreibt Aber unsere Reise hat hier nicht aufgehört. Wir haben auch ein paar praktische Projekte durchgeführt , bei denen wir jedes Wissen oder alles, was wir in diesem Kurs gewonnen haben , in die Praxis umgesetzt haben. Und diese Projekte haben nicht nur Ihr Lernen gestärkt, sondern Sie auch mit praktischem Wissen und Verständnis ausgestattet. Und diese Projekte sind solche Projekte, dass Sie sie sogar in Ihrem Portfolio verwenden können. Denken Sie daran, dass die Beherrschung aller Programmierkenntnisse erst der Anfang ist Die wahre Stärke von JavaScript liegt im kontinuierlichen Experimentieren und Ich ermutige Sie, weiter zu entwickeln, Ihren Code weiter zu verfeinern und die Dinge, die Sie heute gelernt haben, in den Projekten, die Sie erstellen, weiter zu nutzen heute gelernt haben, in den Projekten, die Sie erstellen, Vielen Dank, dass Sie während des gesamten Kurses ein engagierter und begeisterter Lerner gesamten Ich hoffe, Sie haben genug Vertrauen in Ihre Fähigkeiten als Jobskript gewonnen genug Vertrauen in Ihre Fähigkeiten als Jobskript und freuen sich darauf, in Zukunft noch anspruchsvollere Projekte in Angriff zu nehmen Mit diesem Kurs haben Sie ein Klassenprojekt, das Sie im Projektbereich finden. Ich möchte Sie ermutigen , Ich möchte Sie ermutigen , abzuschließen und es dort mit der gesamten Klasse zu teilen. Das ist also das Ende unserer gemeinsamen Reise, viel Spaß beim Programmieren und alles Gute.