Modernes JavaScript für Anfänger: Teil 2

1. Einführung: [MUSIK] Hey, willkommen in dieser Klasse. Wie wir alle wissen, kann es schwierig sein, neue Fähigkeiten zu erlernen , und JavaScript ist keine Ausnahme. JavaScript verfügt über eine so breite Palette von Funktionen und Dingen, für die es verwendet werden kann, und dies kann Anfänger oft in einer schwierigen Situation dazu bringen, sich zu fragen, wo sie überhaupt anfangen sollen. Deshalb habe ich dies erstellt -Klasse. Dies ist Teil 2 der Klasse, die auf dem Fundament aufbaut , das Sie in Teil 1 gelernt haben. Wenn Sie Teil 1 nicht besucht haben, sollten Sie diese Klasse zuerst durchlaufen, es sei denn, Sie haben bereits eine JavaScript-Erfahrung und möchten die Themen in diesem Abschnitt behandeln. Wenn du noch nie an einem meiner Kurse teilgenommen hast, heiße ich Chris und ich baue seit über 20 Jahren Websites. Ich lehre diese Fähigkeiten auch seit über sieben Jahren, beide Videokurse neben führenden Bootcamps für Webentwicklung. Diese Klasse hat viele JavaScript-Themen, darunter Schleifen und bedingte Anweisungen, einen tiefen Blick auf Objekte, Mathematik, Datum und Timer sowie das Zeichnen auf die Leinwand. All diese Themen habe ich auf klare und strukturierte Weise behandelt klare und strukturierte Weise während ich dabei praktische Projekte erstellt habe, einschließlich realer Beispiel-Anwendungsfälle und auch einige kleine Herausforderungen , während ich dabei praktische Projekte erstellt habe, einschließlich realer Beispiel-Anwendungsfälle und auch einige kleine Herausforderungen mit dem Aufbau eines Pizzakoch-Spiels, um viele Teile dessen, was Sie gelernt haben, zu kombinieren . Dieses Projekt wird einigermaßen groß sein, aber wir werden es aufschlüsseln, damit Sie sehen können, wie alle Teile zusammenpassen. Später werden wir einige der schwierigeren Teile wie asynchrone JavaScript, Umfang, Heben und Schließungen entdecken der schwierigeren Teile wie asynchrone JavaScript, . Bevor wir mit zwei weiteren Abschlussprojekten abschließen , werden wir eine kleine Anwendung namens Leaving so bald, die ein Exit-Intent-Pop-up ist, das verwendet wird, um Besucher mit einem Angebot zu locken , wenn sie versuchen, Ihre Website zu verlassen. Wenn alle die Klasse getreu abschließen funktionierendes JavaScript-Bildkarussell. Es enthält einen Projektordner, wir hinzufügen werden, wenn wir in dieser Klasse vorankommen , und er wird sich auch in Zukunft als nützliche Referenz entwickeln . Vielen Dank für Ihr Interesse an diesem Kurs und wir sehen uns in der ersten Lektion. 2. Projektordner herunterladen: Wenn Sie den ersten Teil dieser Klasse bereits abgeschlossen haben, können Sie mit genau denselben Starterdateien fortfahren , die wir in Teil 1 verwendet haben. In diesem Teil 2 der Klasse beginnen wir bis zum Ende bei Abschnitt Nummer 6. Ich fange mit der ersten Lektion an, die for-Schleifen ist. Wenn Sie das haben, können Sie sich für die nächste Lektion begeben. Wenn Sie in Teil 2 springen, ohne Teil 1 zu nehmen, ist das auch völlig in Ordnung, aber Sie müssen zu github.com gehen und die Starterdateien herunterladen, die wir dabei verwenden werden -Klasse. Folgen Sie dem Link, den Sie hier auf dem Bildschirm sehen können. Sobald Sie auf dieser Seite gelandet sind, klicken Sie auf die Schaltfläche grüne Kohle und laden Sie diese dann als Zip-Datei herunter. Öffnen Sie diesen Projektordner in Ihrem bevorzugten Texteditor. Ich werde Visual Studio Code verwenden, aber Sie können jeden verwenden, was Sie bevorzugen. Das ist alles, was du brauchst, um loszulegen , und wir sehen uns als nächstes. Wir schauen uns zunächst for-loops an. 3. Teile deine Arbeit auf Skillshare!: Wenn Sie an einem Kurs teilnehmen, ist es wirklich wichtig, dass Sie sich nicht angewöhnen diesen Kurs zu verfolgen , nur um eine weitere Vorlesung abzuhaken. Nehmen Sie sich die Zeit, jede Lektion zu bearbeiten, den Code, den Sie schreiben, zu überprüfen und darüber nachzudenken, wie Sie diese Lösungen selbst angehen könnten . Vor diesem Hintergrund ist dieser Kurs projektbezogen und bietet Ihnen die Möglichkeit, wirklich etwas Persönliches und Einzigartiges zu schaffen. Sie müssen sich nicht zu sehr verirren und vom Unterricht ablenken . Sie können sogar einen Schritt zurücktreten, nachdem Sie den Kurs beendet haben, und danach zurückkommen und einige Projektänderungen vornehmen. Das gibt dir wirklich eine gute Gelegenheit, das Gelernte außerhalb des Unterrichts zu üben . Denken Sie auch daran, Ihr Projekt auch hier auf Skillshare zu teilen und nur ich werde es mir ansehen, aber es wird auch Kommilitonen inspirieren. Weitere Informationen zum Klassenprojekt findest du auf der Registerkarte Projekt und Ressourcen, wo du nicht nur dein Projekt hochladen kannst, sondern auch andere Klassenprojekte sehen kannst. In diesem Sinne freue ich mich darauf zu sehen, was Sie hier auf Skillshare erstellen und hochladen. 4. Für Schleifen: Willkommen zurück. In diesem Abschnitt dreht sich alles um Loops. Wir werden die Dinge mit einer for-Schleife beginnen. Als wir früher anfingen, mit Arrays zu arbeiten, haben wir uns verschiedene Möglichkeiten angesehen, bestimmte Aufgaben mit diesen Schleifen zu wiederholen. Die Arten von Schleife, die wir uns angeschaut haben, waren map und forEach, beide waren Array-Methoden. Loops bedeuten, dass wir Aufgaben viel einfacher wiederholen können. Obwohl es verschiedene Arten von Schleifen gibt, wiederholen sie eine Aufgabe in der Regel mehrmals. Oft besteht der Hauptunterschied darin, wie wir der Schleife anweisen , diese Map dann zu stoppen, und forEach-Schleifen waren Array-Methoden, aber Schleifen sind nicht ausschließlich für Arrays vorgesehen. Es gibt auch verschiedene Arten von Schleifen, die wir verwenden können , um so ziemlich alles, was wir brauchen, durchlaufen zu können. Dieses Video wird sich auf eine for-Schleife konzentrieren. So sieht eine grundlegende For-Loop aus. Es setzt sich ein bisschen wie eine Funktion oder eine if-Anweisung aus. Beachten Sie innerhalb der Klammern , die zwei Semikolons sind. Diese werden verwendet, um die freien Ausdrücke zu übergeben , die festlegen , wie unsere Schleife funktionieren wird. wirklich einfaches Beispiel ist , es zu verwenden, um die Zahl zu erhöhen , und wir werden uns in nur einem Moment einige bessere Beispiele ansehen . Für den ersten Ausdruck enthält er jedoch den Anfangs- oder Startwert für unsere Schleife. Wenn wir nur bei einer Zahl Null beginnen oder jedes Mal erhöhen wollen , richten wir eine Variable auf Null ein, genau wie diese. Zweitens haben wir eine Bedingung und hier werden wir sehen, dass die Nummer weniger als 10 ist. Diese Bedingung bestimmt, ob die Schleife weitergehen soll. Wenn dies der Fall ist, geht die Schleife weiter. Wenn falsch, endet die Schleife dann. Schließlich, wenn wir nicht in jeder Schleife etwas tun, wird die zweite Bedingung immer wahr sein. Hier erhöhen wir den Wert der Zahl in jeder Schleife um eins. Daher können wir den Zustand nach jeder dieser Änderungen überprüfen . Um dieses Beispiel zu durchlaufen, nachdem jede Schleife ausgeführt wurde, wird die Zahl um eins erhöht , bis sie Nummer 10 erreicht, was dazu führt, dass die zweite Anweisung dann zu „false“ führt, was dazu führt, dass die Schleife dann enden. In diesem speziellen Beispiel protokollieren wir 10 Werte, die von Null bis Nummer neun sind. Wenn Sie die Variable bereits außerhalb der for-Schleife deklariert haben , können Sie die zweite und dritte Anweisung auslassen und einfach einbeziehen , und die Dinge laufen immer noch wie zuvor. Es ist auch erwähnenswert, dass Sie viele Beispiele mit dem Variablennamen, dem Buchstaben i, sehen werden viele Beispiele mit dem Variablennamen, dem Buchstaben i, , der für den Initialisierer oder den Anfangswert kurz ist. Dies ist im Allgemeinen der Fall, wenn wir diese Variable nur für die Zwecke der Schleife verwenden und keine beschreibenden Variablennamen an anderer Stelle benötigen . Beachten Sie, dass wir die Semikolons immer noch an Ort und Stelle halten müssen , damit wir diese drei Werte klar auf einige Beispiele aufteilen können . Lasst uns in unsere Starter-Dateien springen. Springen Sie für diesen Abschnitt in Abschnitt Nummer 6, was Schleifen und Bedingungen sind. Die erste Lektion, die for-loops ist, springt auf die Indexseite, die vorerst ziemlich leer ist. Dann kopieren wir den Pfad dazu und fügen ihn dann in den Browser ein. Wir haben momentan keinen Inhalt, nur den for-loops-Titel und dann das leere Skript unten, und dann das leere Skript unten in dem wir arbeiten können. Springen wir in den Skriptbereich und wir können damit beginnen, unsere erste for-Schleife zu erstellen. Wie wir zuvor nachgeschlagen haben, verwenden wir das Schlüsselwort for, Bracket starten unsere kostenlosen Anweisungen und dann die geschweiften Klammern. In diesem Beispiel simulieren wir jemanden, der eine Pizza mit 10 verschiedenen Scheiben isst. Dann ziehen wir nach jeder dieser Schleifen eine Pizzascheibe ab. Zuallererst unser Initialisierer oder unsere Variable, die wir Slices nennen werden. Wir legen fest, dass dies der Anfangswert von 10 ist, und im nächsten halten wir die Schleife so lange wie diese Slices gleich oder größer als der Wert von einem Add a Semikolon sind. Dann ziehen wir den Wert von Slices jedes Mal um den Wert von eins ab. Jetzt, um es zusammenzufassen, beginnen wir mit 10 Slices oder dem Wert von 10. Nachdem die Schleife beendet ist, wird ein Slice abgezogen, um dann gleich neun zu sein, neun ist größer oder gleich eins, sodass die Schleife daher weiter läuft. Dann läuft es ein zweites Mal. Dann werden die Pizzascheiben auf acht und dann sieben, dann sechs abgezogen . Es läuft weiter, bis der Wert größer oder gleich eins ist. Innerhalb der geschweiften Klammern fügen wir den Code hinzu, den Sie ausführen möchten. Nehmen Sie ein einfaches Beispiel, wir können ein Konsolenprotokoll mit dem Wert von Slices erstellen. Dies wird von 10 bis zu eins abgezogen . Danach ein zweites Konsolenprotokoll mit dem Text jedes Slice. Wir können hier auch Dinge wie bedingte Aussagen hinzufügen . Diese bedingte Anweisung wird prüfen, ob die Slices dem Wert von eins entsprechen. Wenn ja, werden wir in einem Konsolenprotokoll mit dem Text ohne Scheiben vorhanden sein. Speichern wir das und springen wir in die Developer Tools. klicken Sie mit der rechten Maustaste und „Inspect“ in die Konsole. Wir sehen, dass der Wert von 10 der ersten Schleife jedes Mal vom Wert einer abgezogen wird . Wir kommen den ganzen Weg auf den Wert von eins und dann braucht es eine Notiz der übrig gebliebenen Scheiben. Etwas, das Sie vielleicht sehen, aber wahrscheinlich fehlt nicht so viel ein zweiter Wert, was diese Bedingung ist. Wir müssen jedoch das Semikolon an Ort und Stelle lassen , und bevor wir dies testen, Sie möglicherweise bereits ein Problem fest. Wenn Sie keine Bedingung haben. Wir haben keine Möglichkeit, eine Schleife zu stoppen. Das wird einfach unendlich weiterlaufen. Darauf müssen wir beim Erstellen von Schleifen achten . Wir müssen sicherstellen, dass die Loops-Bedingung schließlich falsch wird. Andernfalls würden wir in einer Endlosschleife landen, was daher zum Absturz des Browsers führen würde. Tun Sie das nicht und folgen Sie diesem Beispiel nicht. Aber ich zeige Ihnen, was im Browser passiert. Wenn wir das speichern, aktualisieren Sie es. Wir sehen, dass die Schleife tausende Male läuft, was alle Ressourcen des Browsers in Anspruch nimmt schließlich zum Absturz führt. Um dieses Zerkleinern oder diese Endlosschleife zu vermeiden, müssen wir das Schlüsselwort break innerhalb der Schleife manuell verwenden , wenn es dann stoppt. Wenn wir zum Beispiel zu diesem unteren Abschnitt gehen, wissen wir in der if-Anweisung, dass dies die letzte Schleife ist. Was wir tun können, ist, dass wir das Schlüsselwort break hinzufügen können. Dies bricht dann aus der Schleife aus und stoppt dann die Ausführung des Codes. Wir können dies testen, indem wir den Browser erneut öffnen. Öffnen Sie die Index-Seite und springen Sie dann in die Developer Tools und die Konsole und unsere Schleife, sie funktioniert jetzt wie erwartet. Eine weitere nützliche Sache, die wir mit for-loops tun können , ist das Erstellen mehrerer Elemente wie Listenelemente. Mit einer Schleife können wir sagen, 10 Elemente mit viel weniger Code erstellen, 10 Elemente mit viel weniger Code als wir es tun würden, wenn wir dies 10 Mal ausschreiben würden. Lassen Sie uns das nur innerhalb des Skripts machen, wird eine Konstante namens ul erstellen, wo wir eine neue ungeordnete Liste erstellen. Wir machen das mit document.createElement. Übergeben Sie die ul-Elemente , die Sie erstellen möchten. Kurz bevor wir mit der Erstellung der Listenelemente beginnen, hängen wir unsere ungeordnete Liste an den Körper an. Schnappen Sie sich den Körper mit document.body.appendChild geben Sie unsere ul Variable ein. nur zu dem zurückgehen, was wir uns vorher angeschaut haben, werden wir unser Pizza-Beispiel ändern und dies durch den Variablennamen i ersetzen. Denken Sie daran, dass ich eine übliche Benennungskonvention für eine Variable innerhalb von eine Schleife. Wir werden dies zunächst auf einen Wert von eins festlegen. Wir werden das von vorhin umgekehrt machen. Wir beginnen mit dem Anfangswert von eins und dann lassen wir die Schleife laufen, solange ich kleiner oder gleich dem Wert von 10 ist. Daher müssen wir dies um den Wert von eins in jeder Schleife erhöhen , wodurch die Schleife 10 Mal ausgeführt wird. Wir können alle Inhalte hier von innen verschieben und dann unsere Listenelemente erstellen. Lassen Sie uns unser Listenelement erstellen. Wir wählen den document.createElement-Pass im Listenelement aus. Bewahren Sie dies in einer Konstante namens Li auf. Dies gibt uns dann einen leeren Listeneintrag. Wir müssen den Inhalt dann in das öffnende und schließende Tag platzieren . Wir können dies mit Documents.createTextNode tun, und wir können in jedem Beispieltext platzieren wir hier verwenden möchten. Anstelle einer regulären Zeichenfolge füge ich eine Variable mit den Backticks ein. Wir sagen, dass Listenelement in unserer Variablen mit dem $ -Symbol und den geschweiften Klammern platziert ist. Wir wissen von oben, dass wir eine Variable namens i haben, die dem Wert von eins entspricht. Wenn Sie dann weiter um den Wert von eins für jede Schleife ansteigen . Wir können uns das ansehen, indem wir das hier hineinlegen. Dies sollte mit dem Wert von Listenelement eins, Listenelement zwei usw. beginnen . All das innerhalb einer Konstante, sagen wir Text. Dann können wir diese beiden zusammenführen , indem wir auf das übergeordnete Element zugreifen, das ist das Listenelement use AppendChild. Platzieren Sie dann unseren Text in das Listenelement. Wenn wir schließlich jedes dieser Listenelemente erstellen, möchten wir uns dann zu unserer ungeordneten Liste bringen. Auf die gleiche Weise wie bei unserem Listenelement. Wir wählen unsere ungeordnete Liste AppendChild aus, an die wir unseren Listeneintrag übergeben. Schauen wir uns das an, aktualisieren Sie den Browser. Das muss nur ich sein, um mit der variablen Aktualisierung übereinstimmen zu können. Jetzt sehen wir den Wert des Listenelements eins bis zur Liste von Punkt 10. Wie Sie sich vorstellen können, würde dies zu viel mehr Code führen , wenn wir diese 10 separate Male erstellen würden. Die Verwendung dieser Schleife macht es zu einem viel kürzeren Beispiel. 5. ...in & für...von: Wir werden jetzt zwei weitere Arten von Schleifen abdecken, die for-In und auch for-of genannt werden. Sie sehen ziemlich ähnlich aus und beide bewegen sich über etwas, wie Sie es erwarten würden, aber der Hauptunterschied ist, was sie durchlaufen können. Lasst uns die Starterdateien öffnen und sehen, was wir haben. die Seitenleiste springen zur Lektion Nummer 2 in diesem Abschnitt, die for-in und für-of ist, und öffnen Sie diese dann im Browser. Zunächst sehen wir einen For-In-Abschnitt, in dem ein Produktobjekt mit verschiedenen Eigenschaften verschachtelt ist. Wie Sie vielleicht erwarten, funktioniert eine For-In-Schleife auf diese Weise. Wir verwenden diese Art von Schleife, um die Eigenschaften innerhalb eines Objekts zu durchlaufen, z. B. den Namen und die Größe. Nun wird dies den for-of-Abschnitt haben, und dies wird verwendet, um iterierbare Objekte zu überlaufen. Ein iterierbares Objekt ist im Grunde einige von ihnen, die wir durchlaufen haben, z. B. ein Array oder eine Knotenliste. Beginnen wir ganz oben mit unserer For-In-Schleife, und wir werden diese verwenden, um unsere Produktobjekte zu durchlaufen. Wir können das direkt unten machen. Das sieht ein bisschen wie unsere for-Schleife aus dem vorherigen Video aus, wir haben das for-Schlüsselwort, die Klammern und dann die geschweiften Klammern eingerichtet . Springen Sie zum ersten Satz von Klammern, und so funktioniert eine For-In-Schleife. Wir richten eine Variable ein und rufen diese Eigenschaft auf, da wir alle Eigenschaften in diesem Objekt durchlaufen , das sich in unserem Produktobjekt befindet. Hier kommt der Begriff for-In, wir haben das Schlüsselwort for und dann das Schlüsselwort in den Klammern. Wir schleifen über dieses vollständige Produktobjekt und speichern dann den Wert der Eigenschaft innerhalb dieser Konstante. Mal sehen, wie es mit einem Konsolenprotokoll über den Wert unserer Variablen aussieht , nämlich Eigenschaft, Refresh, und wir sehen den Wert der SKU, den Namen, die Größe und die Farbe. Dies gibt uns den Wert des Schlüssels, aber was ist mit dem tatsächlichen Immobilienwert wie cooles Hemd, Medium und auch Blau? Nun, wir können dies auch tun, indem wir auf unser Produkt zugreifen und dann die eckigen Klammern verwenden. Werfen wir einen Blick darauf, wie das in einem Konsolenprotokoll aussieht. Wir können die Back-Ticks verwenden, um eine Variable einzufügen, und wir fügen zunächst den Wert der Eigenschaft ein. Dies sind nur die Schlüssel, die wir bereits in der Konsole sehen werden , aber fügen Sie danach einen Doppelpunkt hinzu, um dies zu trennen , und fügen Sie dann unsere zweite Variable ein. Die zweite Variable wird jedes dieser Produkte sein. Wir schnappen uns das Produkt und können dann die eckigen Klammern verwenden, um dies auf eine bestimmte Eigenschaft einzugrenzen. Wir geben den Wert von SKU, Name, Farbe oder Größe weiter. Wenn wir dies speichern und aktualisieren, haben wir jetzt für jede dieser Eigenschaften eine neue Zeichenfolge erstellt , die sowohl den Schlüssel als auch den Wert der Eigenschaft enthält . So funktioniert eine For-In-Schleife, um über ein Objekt zu schleifen. Werfen wir jetzt einen Blick auf for-of. Ich möchte diesen Abschnitt kommentieren und dann nach unten unter unseren Berechtigungen gehen. Dies beginnt auch mit dem Schlüsselwort for, den Klammern und den geschweiften Klammern, und es nimmt auch eine Variable auf. Nehmen wir an, const value , der auf jeden der Werte innerhalb des Arrays festgelegt wird . Dieses Mal, anstatt das Schlüsselwort in zu verwenden, das wir verwenden, und geben Sie dann genau das ein, was wir durchlaufen möchten. In unserem Fall ist es das Berechtigungs-Array von oben. Dies ist in Berechtigungen, und dann können wir innerhalb der geschweiften Klammern auf unseren Wert zugreifen. In der ersten Schleife ist der Wert user, die zweite Schleife ist Editor und dann Admin, Speichern und Aktualisieren, und es gibt unsere drei Werte in der Konsole. Wie Sie oben in seinen Kommentaren sehen können, können auch Dinge wie eine Knotenliste überlaufen werden. Denken Sie daran, wenn wir etwas wie den Abfrageselektor verwenden , um mehrere Elemente zu erhalten, erhalten wir eine Knotenliste zurück. Um dies auszuprobieren, brauchen wir auch einige Elemente, die Sie durchlaufen müssen. Ich springe aus diesen Skripten erstelle eine ungeordnete Liste mit einigen Beispiellistenelementen direkt darin. Lassen Sie uns dies noch zweimal duplizieren , anstatt Nummer 2 und 3 zu drehen, und dann können wir unsere drei Listenelemente durchlaufen, die dann eine Knotenliste zurückgeben, daher können wir die for-of-Schleife verwenden. Schritt 1 besteht darin, auf alle drei dieser Listenelemente zuzugreifen. Ich werde direkt über unserer for-Schleife einen konstanten Anruflink erstellen, einen konstanten Anruflink erstellen, diese mit document.QuerySelector abrufen, tatsächlich brauchen wir QuerySelectorAll, da wir auf mehrere Elemente zugreifen und sobald Sie unsere Liste aufrufen Gegenstände. Anstatt auf unsere Berechtigungen zuzugreifen, werden wir nun auf alle Links zugreifen, nämlich unsere drei Listenelemente , unsere drei Listenelemente , und dann den Variablennamen in den Link ändern. Der Wert von Link unserer ersten Schleife ist das erste Listenelement und das zweite Listenelement und dann das dritte. Mit diesen Links können wir alles tun, was wir wollen. In diesem Beispiel greife ich auf unsere Links zu und verwende dann addEventListener. Hören Sie sich einen Klick auf eines dieser Punkte an. Dies führt dann eine Funktion aus, wir geben die Ereignisinformationen erstellen eine Warnung. Um auf die Inhalte in jedem dieser Listenelemente wie 1, 2 und 3 zuzugreifen, können wir dies tun, indem wir auf die Ereignisinformationen zugreifen und e. target auswählen, das die Informationen darüber bestimmtes Listenelement, auf das geklickt wurde, und zeigt dann das innerHTML dieses Elements an. Probieren wir das mal aus. Wenn wir jetzt aktualisieren, haben Sie unsere kostenlosen Links oben, klicken wir auf Nummer 2, da ist das InnerHTML. Nummer 3 und auch Nummer 1 funktioniert auch richtig. Dies ist ein paar wirklich nützliche Varianz der for-Schleife , mit der wir Dinge wie Arrays, Knotenliste und auch Objekte durchlaufen können . 6. Während & do...: Meiner Meinung nach sehen Loops etwas einfacher aus als die vier Schleifen , die wir vorher nachgeschlagen haben. Das Basis-Setup ähnelt wieder vielen anderen Dingen in JavaScript, z. B. einer Basisfunktion und if-Anweisungen und sogar der for-Schleife. Eine While-Schleife läuft weiter, solange eine Bedingung auf „true“ gesetzt ist. In diesem Beispiel haben wir eine einfache Zahlenvariable und dann läuft die Schleife weiter während die Zahl kleiner als 30 ist. Diese Überprüfung wird durchgeführt , bevor der Code in der Schleife ausgeführt wird Wenn er also falsch ist, stoppt die Schleife. Wie bei der for-Schleife brauchen wir auch eine Möglichkeit, Dinge tatsächlich zu stoppen , damit es nicht zu einer Endlosschleife wird. Wir tun dies innerhalb der Schleife, indem wir den Wert der Zahl in jeder Schleife um eins erhöhen . Das heißt, es wird 30 Mal laufen, bevor es dann aufhört. Gehen wir zu unseren Starterdateien und probieren Sie es aus. Die nächste Lektion, die wir brauchen, ist Nummer 3. Es ist der While-Loop-Abschnitt. Öffnen Sie dies und auch innerhalb des Browsers. Wie Sie sehen können, haben wir eine leere Starterdatei mit dem Skript unten. Was wir hier machen werden ist ein paar Variablen einzurichten. Zuallererst eine Konstante namens StadiumCapacity, und setzen Sie diese auf einen Wert von 100. Dies ist die Stadionkapazität und als nächstes werden wir eine zweite Variable einrichten, die für die Anzahl der Fans gilt , die wir derzeit betreten haben. Da dies erhöht werden kann, müssen wir das Schlüsselwort verwenden und dieses auf einen Wert von currentlyEnted-Wert setzen, der mit dem Wert Null beginnt. Was wir tun wollen, ist, eine Schleife weiter auszuführen, während der Wert von currentlyEnted-Wert kleiner ist als der stadiumCapacity. Eine While-Schleife ist dafür ideal. Wir richten unser While-Schlüsselwort, die Klammern und dann die geschweiften Klammern kurz danach ein. Was wir tun werden, ist, diese Schleife am Laufen zu halten , während der Wert von CurrentlyEnted-Wert , der Null ist, kleiner ist als der StadiumCapacacity. Grundsätzlich wird der Code hier ausgeführt, wenn Null weniger als 100 ist. Platzieren Sie ein Konsolenprotokoll mit einem Eingabetext, und wir sollten in der Lage sein, zur Konsole zu gehen und dies zu überprüfen. Aber kurz bevor wir das tun, gehen wir einen Schritt zurück und schauen uns diese Schleife an. Wenn wir darüber nachdenken, möchten wir einen Blick auf unseren Zustand werfen in dem sie derzeit geringer ist als die stadiumCapacity. Im Moment haben wir keine Möglichkeit, diese beiden variablen Werte zu ändern. Im Grunde wird dies immer der Wert von true sein. Dies führt dann zu einer Endlosschleife und verursacht erneut einen Absturz im Browser. Um diese While-Schleife nur eine bestimmte Anzahl von Malen auszuführen, benötigen wir eine Möglichkeit, den Wert von CurrentlyEnted-In jeder Schleife zu erhöhen . Das ist ziemlich einfach. Wir greifen einfach auf unseren Wert zu und verwenden dann plus plus, was dies um den Wert einer in jeder Schleife bis zum Wert von 100 erhöht . Sobald dies den Wert 100 erreicht hat, wird diese Bedingung nicht mehr wahr sein, was bedeutet, dass unsere Schleife gestoppt wird. Schauen wir uns das im Browser an, aktualisieren und in die Konsole springen. Gut und wir sehen, dass unser Text der Eingabe 100 Mal wiederholt wurde. Die Varianz dieser While-Schleife ist Do-while. Dies ist eine umgeschaltete Version dieser While-Schleife. Bevor ich in den Folien bin, habe ich erwähnt, dass der Code in dieser Schleife immer ausgeführt wird, nachdem diese Bedingung überprüft wurde. Wenn dies zu „false“ führt, wird der Code in dieser Schleife grundsätzlich nie einmal ausgeführt. Wir können dies umdrehen und sicherstellen , dass der Code mindestens einmal ausgeführt wird , und dann den Check anschließend durchführen. Dies ist nützlich, wenn wir immer sicherstellen möchten , dass der Code mindestens einmal ausgeführt wird , bevor die Schleife beendet wurde. Um dies zu tun, erstellen wir direkt über unserem While-Abschnitt einen Do-Bereich. Wir sagen tun, öffnen Sie die geschweiften Klammern, und da wir immer wollen, dass dies einmal läuft, springen wir einfach direkt in die geschweiften Klammern, wir müssen keine Bedingung hinzufügen. Dann können wir unseren Code aus der While-Schleife abrufen . Schneide das fehl am Platz. Fügen Sie dies in den Abschnitt „Do“ hinzu. Ich entferne die geschweiften Klammern aus der While-Schleife. Wie Sie sehen können, befindet sich der Code jetzt im Abschnitt „do“, was bedeutet, dass dieser immer mindestens einmal ausgeführt wird , bevor wir unseren Check überhaupt durchführen. Unser Scheck ist immer noch wahr, dies wird in unserem Fall das zweite Mal bis zu 100 laufen . Schauen wir uns das an. Wir können dies speichern und den Browser aktualisieren. Wir haben immer noch genau die gleichen Ergebnisse wie zuvor erzielt. Wir können dies testen, indem wir den Wert von currentlyEnted-Wert auf 100 setzen, wodurch dies dann auf „false“ festgelegt wird. Wenn wir dies jetzt speichern und aktualisieren, sehen wir unseren Log-Wert für eine einzelne Konsole von enter, da unser Code zuerst ausgeführt wird und dann die Überprüfung innerhalb der While-Schleife durchführt. Dies ist nur eine Alternative, je nachdem , ob der Code immer zuerst ausgeführt wird oder zuerst die Bedingung testen soll, bevor wir zuerst ausgeführt wird oder zuerst die Bedingung testen soll einen Code in unserer Schleife ausführen. 7. Wenn / Sonstige Aussagen & Nesting: Springen Sie für dieses Video in den Abschnitt „If-else-Anweisungen“ und öffnen Sie dies auch im Browser. Sie können oben sehen, dass wir ein Benutzerobjekt bereits eingerichtet haben und auch die if-Anweisung direkt unten. Also haben wir if-Anweisungen schon einige Male in früheren Beispielen verwendet . Es gibt nicht viel mehr zu ergänzen als das, was wir bereits behandelt haben. Sie führen einfach etwas Code zwischen diesen geschweiften Klammern aus. Wenn die Bedingung in hier auf „wahr“ eingestellt ist. In diesem Beispiel haben wir oben ein Benutzerobjekt. Dies würde zur Folge haben, da wir ein Objekt vorhanden haben, was bedeutet, dass unser Konsolenprotokoll funktioniert. Wenn der Benutzer abgemeldet wäre, würde er möglicherweise unsere Variable auf Null setzen , genau wie folgt, so dass der Benutzer gleich null ist, was zu einem falschen Wert und dem Code innerhalb des if führen würde Anweisung würde nicht laufen. Also hier kümmern wir uns darum, ob die Bedingung wahr ist. Aber was ist, wenn wir auch damit umgehen wollen, wenn die Bedingung falsch ist? Nun, hier kommen andere Aussagen ins Spiel. Wir platzieren diese unmittelbar nach der if-Anweisung und dieser Codeblock wird in allen Fällen ausgeführt , die nicht durch den if-Abschnitt abgedeckt werden. Wir haben diese ähnlichen Beispiele innerhalb der Starterdateien eingerichtet innerhalb der Starterdateien und hier behandeln wir die Bedingung nur , wenn der Benutzer angemeldet ist. Vielleicht denken Sie darüber nach, warum nicht einfach mit der Abmeldebedingung darunter umgehen. Oder wir könnten so etwas machen. Wir könnten ein Konsolenprotokoll oder einen beliebigen Code erstellen, in dem wir sagen können, dass der Benutzer abgemeldet ist. Nun, lass uns das testen und sehen, was passiert, wenn wir aktualisieren und in die Konsole springen. Hier sehen wir, dass das Konsolenprotokoll zweimal ausgeführt wurde. Wir haben den Benutzer angemeldet und auch der Benutzer ist ausgeloggt. Für etwas sicherheitsempfindliches, z. B. wenn ein Benutzer ein- oder ausgeloggt ist, möchten wir natürlich sicherheitsempfindliches, z. B. wenn ein Benutzer ein- oder ausgeloggt ist, nur eine dieser Bedingungen ausführen. Dies können wir unsere if-Aussagen einrichten, die wir oben haben, gefolgt von der else-Aussage. Entfernen wir das Konsolenprotokoll. Ich platziere den anderen Abschnitt und füge unseren Code hier hinzu. Lassen Sie uns aktualisieren und wir sehen, dass der Benutzer angemeldet ist, da oben ein Benutzerobjekt vorhanden ist. Wenn wir dies auch ändern , um das Gegenteil zu sein, und setzen den Benutzer auf einen falschen Wert von null. Dies sollte dann sein, dass der Benutzer abgemeldet ist. Wenn wir wollten, könnten wir auch mehrere if-Anweisungen hinzufügen und lassen Sie uns unsere else-Aussage einfach nach unten schieben. Dann können wir dazwischen eine zweite if-Anweisung hinzufügen , genau wie oben. Wir können eine zweite Bedingung wie einen Benutzer oder eine Rolle überprüfen, die derzeit auf admin eingestellt ist. Wir können überprüfen, ob dies ein bestimmter Wert ist und ob es sich innerhalb der geschweiften Klammern befindet, führen wir ein Konsolenprotokoll durch, sagen wir, Hey admin, testen Sie dies, aktualisieren. Jetzt sehen wir, dass der Benutzer angemeldet ist und auch die Admin-Rolle ist. Das funktioniert, aber das stellt auch ein Problem dar, wir müssen bei dieser Art von Setup sehr vorsichtig sein. Denn diese sonste-Aussage, die wir unten haben werden folgt sofort der zweiten if-Anweisung. Dies bedeutet, dass der Abschnitt else jetzt nur ausgeführt wird , wenn die Rolle des Benutzers nicht auf admin eingestellt ist, was keinen Sinn ergibt. Wir hatten also einen Benutzer wie null, also sind wir mit dem nicht angemeldet. Aktualisieren. Dies wird nun einen Fehler auslösen, da wir versuchen, auf die Benutzerpunktrolle zuzugreifen, die nicht mehr verfügbar ist, da wir unsere Benutzerobjekte nicht mehr haben. dieses Beispiel zu verwenden , um es ein bisschen sinnvoller zu machen und praktikabler zu sein, möchten wir nur überprüfen, ob die Rolle des Benutzers dem Administrator entspricht, hat sich tatsächlich angemeldet. Um dies zu tun, können wir unsere if-Aussagen verschachteln indem wir die zweite if-Aussage ausschneiden. Wir können das in den ersten einfügen. Dies bringt uns zurück zum ersten Beispiel. Wir haben zwei Top-Level-Checks. Wir haben die if-Anweisung, der Benutzer ist angemeldet, gefolgt von dem anderen Abschnitt unten. Dann wird die if-Anweisung, die darin verschachtelt ist, immer nur ruiniert, wenn sich der Benutzer tatsächlich angemeldet hat. Wenn der Benutzer angemeldet ist, wird dieses Konsolenprotokoll ausgeführt. Wenn sie dann auch als Admin-Rolle angemeldet sind, wird auch das zweite Konsolenprotokoll ausgeführt. Probieren wir das mal aus. Aktualisieren, und der Fehler ist jetzt gelöscht. Wir sehen, dass der Benutzer abgemeldet ist , da der Benutzer auf null eingestellt ist. Lassen Sie uns dies wieder einsetzen, der Name entspricht allem in der Rolle zurück zum Admin. Da dies jetzt vorhanden ist, haben wir jetzt einen Benutzer. Das erste Konsolenprotokoll sollte also ausgeführt werden. Wir haben auch eine Benutzerrolle , die dem Administrator entspricht. Wir sollten jetzt zwei Konsolenprotokolle hier sehen. So können wir „if else“ -Anweisungen auf oberster Ebene verwenden und auch wie wir eine if-Anweisung auch darin verschachteln können. Wenn Sie möchten, könnten Sie auch kurz nach dem verschachtelten if-Abschnitt noch weiter enden, wir könnten auch in einen anderen Abschnitt platzieren damit wir ein Konsolenprotokoll erstellen können. Für diesen Abschnitt wissen wir, dass der Benutzer tatsächlich angemeldet ist, aber wir möchten auch prüfen, ob er nicht der Administrator ist. Also hier läuft das, wenn sie der Admin sind. Ansonsten sagen wir einfach: Hey user, aktualisieren. Wir sehen immer noch hey admin, da die Rolle darauf eingestellt ist. Wenn wir dies jedoch als Abonnent ändern, ist die verschachtelte if-Anweisung jetzt falsch, was bedeutet, dass der Abschnitt hey user jetzt ausgeführt wird. Wenn du willst. Sie könnten auch so tief gehen, wie wir wollten, indem Sie mehrere, wenn sonst auch Abschnitte innerhalb der verschachtelten Abschnitte verschachtelt haben. Aber wir müssen darauf achten, nicht über Bord zu gehen und den Code schwer zu lesen und auch für andere Entwickler zu verstehen. In der Regel können wir die meisten Anwendungsfälle in der Regel abdecken , ohne in die Tiefe gehen zu müssen. Wenn Sie also feststellen , dass Sie vielleicht drei oder vier Ebenen tief mit if-Anweisungen oder Schecks sind , gibt es normalerweise einen besseren Weg, Dinge zu tun. 8. Sonst wenn: Im Ordner dieser Lektion , der der andere if-Abschnitt ist, finden Sie direkt unten im Skript das gleiche Beispiel aus dem vorherigen Video. Hier kümmern wir uns um zwei Top-Level-Bedingungen, die wir einchecken. Zunächst einmal, wenn der Benutzer angemeldet ist und dann im Abschnitt erfassen, was passiert wenn der Benutzer nicht angemeldet ist. Innerhalb des angemeldeten Abschnitts haben wir auch einen verschachtelten Abschnitt, wenn sonst. Fügen Sie eine andere Begrüßung hinzu, wenn der Benutzer dem Administrator entspricht. Wir haben zwei Optionen auf der obersten Ebene und auch zwei verschachtelte Optionen. Aber was ist, wenn wir auch eine dritte Option wollten? Dafür haben wir auch anderes wenn. Werfen wir einen Blick darauf, wir werden dieses Beispiel vereinfachen , indem wir die verschachtelten Anweisungen entfernen. Im Inneren von hier entfernen wir das verschachtelte, wenn uns sonst ein einfaches eingeloggt oder ausgeloggt bleibt. Wenn Sie sich an das vorherige Video erinnern, haben wir uns angeschaut, wie Sie kurz mit einer dritten Bedingung umgehen können, indem wir eine zweite if-Anweisung hinzugefügt haben, genau wie diese. Aber das Problem, das uns verursacht, ist, dass der andere Abschnitt jetzt mit unserer zweiten if-Aussage verbunden ist. Im Wesentlichen bedeutet, dass unsere erste if-Anweisung jetzt getrennt ist. Wenn wir immer noch alle drei davon in Verbindung bringen wollen, können wir diese zweite in einen anderen Ort verwandeln , wenn, an einem anderen Ort. Kurz vor dem if-Abschnitt können wir hier eine zweite Bedingung hinzufügen. Zunächst möchten wir prüfen, ob der Benutzer angemeldet ist, und dann können wir mit dem doppelten kaufmännischen Und-Zeichen auch einen zweiten Check durchführen. Wir können überprüfen, ob die user.role gleich dem Abonnenten ist, und wenn ja, führen wir den Code hier aus. Jetzt platzieren wir einfach ein einfaches Konsolenprotokoll, das besagt , dass der Abschnitt sonst ausgeführt wurde , speichern Sie diesen und dann zum Browser und wir werden sehen, was hier passiert. Wir sehen den Text des angemeldeten Benutzers. Sie fragen sich vielleicht, warum wir den Text nur des angemeldeten Benutzers sehen und nicht auch den sonst, wenn der Abschnitt ausgeführt wurde, da der gesamte Benutzer anwesend ist und auch die user.role gleich dem Abonnenten ist. Nun, der Grund ist, dass nur einer dieser Abschnitte ausgeführt wird. Wenn die Bedingung erfüllt wurde, wird der Code im Inneren ausgeführt und der Rest dieser Abschnitte wird nicht weiter nach unten gehen . Effektiv wird nur das erste Match ausgeführt. Wenn wir möchten, dass es mit dem ersten Abschnitt genauer ist, können wir diesen user.role auch in den ersten Abschnitt kopieren in den ersten Abschnitt und wir können auch prüfen, ob dies dem Admin entspricht. Da unsere Benutzerrolle dem Abonnenten entspricht, sollten sie jetzt falsch sein. Denn nirgendwo sonst, wenn der Abschnitt jetzt laufen soll. Speichern wir das und testen Sie dies im Browser aus. Der sonst if-Abschnitt wird jetzt ausgeführt. Da dies unser erster Abschnitt ist , der dazu führt, können wir jetzt in jedem dieser Abschnitte tun, was wir wollen , können wir Inhalte je nach Rolle des Benutzers ein - und ausblenden . Wir können sie in einen Kontobereich umleiten. Wir können Funktionen deaktivieren die der Benutzer möglicherweise nicht zugreifen darf, oder irgendetwas anderes, was Sie sich vorstellen können. Wir können auch mehrere andere Abschnitte verwenden. Wenn wir mehr als diese drei Bedingungen überprüfen wollten, könnten wir das Gleiche auch gleich nach dem anderen if-Abschnitt tun , in einem zweiten platziert wurde. Es ist wahrscheinlich von oben konditioniert. Dieses Mal prüfen wir, ob die user.role gleich dem Autor ist. Wenn es in einem Konsolenprotokoll platziert wird, speichern Sie dies und wie erwartet, sollten wir das gleiche Ergebnis wie zuvor sehen da wir den Abonnenten festgelegt haben , der diesem Abschnitt entspricht . Aber wenn wir dies jetzt ändern, um das Angebot zu sein, ist der if-Abschnitt jetzt falsch und dann der erste andere, wenn der Abschnitt auch falsch ist und unser neues Konsolenprotokoll mit dem Text des Autors würde der erste andere, wenn der Abschnitt auch falsch ist und unser neues Konsolenprotokoll mit dem Text des Autors nun ausgeführt wird in der Konsole. Schließlich, wenn keine davon, wenn Abschnitte wahr sind, also ändern wir uns so etwas wie Benutzer, sollten wir nun zurückgreifen , um den anderen Abschnitt unten zu verwenden. 9. Die Switch-Anweisung: Switch-Anweisung ist eine Möglichkeit, basierend auf einer einzigen Bedingung so viele Ergebnisse zu liefern , wie wir benötigen. Wir können auch mehrere Ergebnisse mit if-Aussagen liefern und wenn sonst Aussagen, wie wir es zuvor gesehen haben. Aber wie wir herausgefunden haben, müssen wir für jede dieser Bedingungen etwas hinzufügen , das wir überprüfen können, z. B. wenn wir Dinge wie die Rolle des Benutzers für jede dieser Bedingungen überprüfen. Mit einer Switch-Anweisung testen wir jedoch nur für jede einzelne Bedingung. Gerade hier mit unserer Lieblingspizza-Variable. Die Switch-Anweisung direkt darunter sieht in ihrem Setup wieder ähnlich wie leere if-Anweisungen und auch for-loops. Wir geben dann ein, was wir überprüfen möchten, wie unsere Lieblingspizza-Variable. Dann haben wir drinnen die verschiedenen Fälle eingerichtet, um mit der Lieblingspizza umzugehen . Hier haben wir drei verschiedene Fälle, um zu behandeln, was für jeden Wert zu tun ist. Wir können so viele dieser Fälle haben, wie wir wollen. Schauen wir uns den ersten an. Wir prüfen, ob die Lieblingspizza Peperoni entspricht. Wenn ja, führen wir einen Code darin aus, wie dieses Konsolenprotokoll. Wir stellen dann das break-Schlüsselwort zur Verfügung, um aus der Switch-Anweisung auszubrechen , sobald wir eine Übereinstimmung haben, und dies verhindert, dass der Rest des Codes und der Rest der unten stehenden Schecks ausgeführt wird. Dies ist das gleiche Break-Schlüsselwort, das wir zuvor in diesem Abschnitt verwendet haben , um zu verhindern der Browser eine Endlosschleife erstellt. Dies wird so lange laufen, bis eine Übereinstimmung gefunden wird, aber wenn eine nicht gefunden werden kann, können wir auch eine Standardklausel hinzufügen. Dies wird immer laufen, wenn es keine anderen Übereinstimmungen gibt. Rüber zum Projekt und lasst uns das mal ausprobieren. Dieses Mal befinden wir uns im Abschnitt Switch-Anweisungen und innerhalb der Starterdatei haben wir nur ein einfaches Benutzerobjekt mit der Name-Eigenschaft und auch der Rolle. Wir können eine Switch-Anweisung einrichten, um die Rolle des Benutzers zu überprüfen und zu entscheiden, ob der Benutzer etwas auf unserer Website bearbeiten kann. Dies können wir in einer Variablen namens CanEdit starten. CanEdit wird also zunächst auf den Wert false festgelegt, sodass dem Benutzer standardmäßig keine Bearbeitungsberechtigungen zugewiesen werden . Dann können wir eine Switch-Anweisung verwenden, um die jeweilige Rolle des Benutzers zu überprüfen. Wenn die jeweilige Rolle des Benutzers einer höheren Ebene wie dem Administrator oder sogar einem Editor entspricht, können wir CanEdit so einstellen, dass CanEdit gleich true ist einer höheren Ebene wie dem Administrator oder sogar einem Editor entspricht, . Genau wie wir es in den Folien gesehen haben, richten Sie unsere Switch-Anweisungen ein und dann übergeben wir die Bedingung , die user.role ist. Öffne die geschweiften Klammern, dann können wir unsere Fälle hier hinzufügen. Der erste Fall wird der Benutzer sein. Dies ist nur ein regulärer angemeldeter Benutzer. Füge den Doppelpunkt hinzu. Danach fügen wir hinzu , was wir für diesen speziellen Fall tun wollen. Nun, in unserem Fall möchten wir CanEdit so lassen, dass er falsch ist, da sie weder über die Administratorberechtigungen noch den Editor verfügen. Wenn dieser spezielle Fall zutrifft, möchte ich das Schlüsselwort break nicht verwenden, um aus den restlichen dieser Switch-Anweisungen auszubrechen. Das ist der erste Abschnitt. Dann gehen wir zum zweiten Fall und dieser wird ein Abonnent sein. Dies würde einfach den gleichen Zustand widerspiegeln wie oben. Wir können festlegen, dass canEdit gleich false ist. Fügen Sie die Break-Schlüsselwörter hinzu. Das ist unser zweiter Fall, der jetzt abgeschlossen ist. Im nächsten Schritt fügen wir einen Fall für den Editor hinzu. Und wie es klingt, ist der Editor ein Fall, in dem wir dem Benutzer erlauben möchten , bearbeiten zu können. Dafür setzen wir unsere canEdit-Variable auf „true“ brechen dann aus der Switch-Anweisung aus. Schließlich wird der letzte Fall für den Admin sein. Im Admin möchten wir alle Berechtigungen erteilen, die sie benötigen, um dann unsere Website zu bearbeiten. Wie oben setzen wir CanEdit auch auf true und brechen dann aus der Switch-Anweisung aus. Wie wir in den Folien gesehen hätten, müssen wir auch einen Standardfall hinzufügen , der ausgeführt wird, wenn keiner der oben genannten Fälle übereinstimmt. Sehr einfaches Beispiel: Platzieren Sie einfach ein Konsolenprotokoll und wir sagen, dass die Benutzerrolle nicht gefunden werden kann. Wir setzen CanEdit auch auf „false“. Jetzt müssen wir das nur noch testen. Als wir hier angefangen haben, haben wir die Benutzerrolle, die dem Benutzer entspricht. Dies sollte darauf setzen , dass CanEdit gleich false ist. Testen wir das, indem wir nach unten gehen, wir werden in ein Konsolenprotokoll den Wert von CanEdit platzieren. Wir werden sehen, ob sich das für jeden unserer Fälle ändert. Wie wir wissen, wird kein CanEdit gleich false sein, da wir derzeit die Benutzerrolle haben, um dem Benutzer gleich zu sein. Lassen Sie uns in die Entwicklertools in die Konsole springen. Es ist falsch wie erwartet. Lassen Sie uns unsere zweite Bedingung überprüfen, indem die Rolle auf den Abonnenten umstellen, Sie die Rolle auf den Abonnenten umstellen, aktualisieren und wie erwartet, ist dies falsch. Der dritte ist der Herausgeber, das sollte jetzt stimmen. Schließlich können wir den Admin testen. Das stimmt auch. die Standardbedingung unten zu ermitteln, sollten wir das Konsolenprotokoll sehen und sie können Edit gleich false sein wenn wir keine dieser vier Bedingungen erfüllen. Lassen Sie uns dies zu etwas völlig Zufälligem machen. Wir geben einfach eine beliebige zufällige Rolle in hier ein. Aktualisieren. Dies ist falsch und das Konsolenprotokoll wird jetzt wie erwartet ausgeführt. Nur eine Sache, auf die Sie achten sollten, wenn wir mehrere passende Fälle haben. Wenn ich zwei oder mehr Fälle habe, die beide übereinstimmen, wird der erste passende Fall verwendet. Auch als Abkürzung, wenn wir mehrere Fälle haben, genau wie wir es hier haben, die denselben Code darin ausführen. Der Benutzer wird festlegen, CanEdit ist gleich false und auch der Abonnent. Dies ist ein doppelter Abschnitt, der für die letzten beiden Fälle gleich ist. Beide setzen CanEdit so , dass er gleich true ist. Wir können diesen Code ein wenig verkürzen , um ihn ein bisschen einfacher zu machen. Für die ersten beiden, die genau gleich sind, können wir den Code aus dem ersten entfernen. Beide Fälle folgen sofort aufeinander. Dann wird dieser Code kurz danach für jeden dieser Fälle ausgeführt. Genau das Gleiche für diese beiden unten unten. Wir können den CanEdit und auch die Pause verschieben. Diese beiden sind jetzt im Wesentlichen zusammengefasst. Wir können das einfach testen und wenn wir aktualisieren, sehen wir immer noch, dass die Standardklausel unten ausgeführt wird. Versuchen wir es mit dem Redakteur. Es sollte wahr sein. Der Admin stimmt auch. Der Benutzer sollte falsch sein. Endlich der Abonnent. Dies ist es für die Switch-Anweisungen. Nur eine kurze Sache, bevor wir weitermachen. Wenn wir vergessen, in einem dieser Fälle ein break-Schlüsselwort zu setzen , würden auch alle folgenden Fälle laufen würden auch alle folgenden Fälle laufen, bis eine Pause endgültig gefunden wurde. Wenn wir beispielsweise eine Break-Klausel innerhalb dieses Abschnitts verpasst hätten eine Break-Klausel innerhalb , können wir diese entfernen. Wenn wir eine Übereinstimmung mit dem Benutzer oder dem Abonnenten haben , ist CanEdit immer noch gleich false, aber es würde dann den Code direkt darunter ausführen und dann den CanEdit überschreiben, um „true“ zu sein. Probieren wir das mal aus. Wir haben die Rolle, die dem Abonnenten entspricht. Aktualisieren. Jetzt ist der Abonnent CanEdit wirksam geworden, aber das Programm ist immer wieder zum Editor und auch zum Admin-Bereich gegangen Editor und auch zum Admin-Bereich und hat eine Überschreibung verursacht, so dass CanEdit jetzt gleich true ist. 10. Bedingter Operator (ternary): Als Alternative zu den if-else-Anweisungen, die wir uns angesehen haben, verfügt Javascript auch über einen bedingten Operator, der oft als ternärer Operator bezeichnet wird, da er aus drei Teilen besteht. Da es funktioniert, genau wie wenn sonst, besteht der Hauptgrund dafür darin, eine einfache, einzeilige Alternative anzubieten . dieses Benutzerobjekt ansehen, möchten wir möglicherweise das Alter des Benutzers überprüfen bevor wir ihn einlassen. Der bedingte Operator kann dabei helfen. Es ist wie eine Frage dargelegt. Hier fragen wir, ob das Alter des Benutzers unter Verwendung des Fragezeichens größer oder gleich 18 ist . Vorher habe ich gesagt, dass das Ternär aus drei Teilen besteht. Die Frage ist nur dieser erste Teil. Der zweite und dritte Teil sind das, was wir tun wollen, wenn die Frage wahr oder falsch ist. Wenn das stimmt, können wir alles andere tun dieses einfache Beispiel nur den Text von Enter enthält. Wenn es falsch ist, was für dieses Beispiel korrekt ist, wird stattdessen der Code nach dem Doppelpunkt ausgeführt. Gehen wir nun zu den Starterdateien und wir können uns das Beispiel dort ansehen. Hier finden Sie ein Beispiel wie wir eine if-Anweisung verwenden können, um zu überprüfen, ob ein Benutzer Administrator ist , der etwas auf unserer Website bearbeiten kann. Das Benutzerobjekt hat die Rolle des Admins, und derzeit legen wir die CanEdit-Funktionalität auf „false“ fest. Die if-Anweisung prüft, ob die Rolle des Benutzers, die gerade hier ist, der Admin entspricht. In unserem Fall können wir die Variable canEdit auf true setzen, sodass der Benutzer etwas wie einen Blogbeitrag veröffentlichen kann. Wenn nicht, ist CanEdit gleich false und entfernt alle Berechtigungen, die sie möglicherweise haben. Was wir tun werden, ist, dieses Beispiel zu konvertieren , um den ternären Operator zu verwenden , der dieses Beispiel in eine einzige Zeile vereinfachen wird . Genau wie wir es in diesen Folien gesehen haben, der erste Teil darin, die Frage tatsächlich zu stellen. Die Frage, die wir stellen möchten, ist, ob die user.role der Admin-Zeichenfolge entspricht . Verwenden Sie ein Fragezeichen, gefolgt von unseren wahren und falschen Ergebnissen. Wenn der Benutzer dem Administrator entspricht, möchten wir festlegen, dass dieser CanEdit genauso wie im Abschnitt true in der if-else-Anweisung entspricht genauso wie im Abschnitt true in der . Setzen Sie canEdit auf „true“, dann getrennt durch einen Doppelpunkt. Wir fügen die falsche Anweisung hinzu, bei der wir sagen, dass CanEdit gleich false ist. Abhängig von den Einstellungen oder Plugins Ihres Texteditors können Sie diese beiden Anweisungen möglicherweise auch in die Klammern eingeschlossen sehen . Das ist vollkommen in Ordnung. Was ich jetzt tun möchte, ist, die ursprünglichen If-else-Anweisungen zu kommentieren oder zu entfernen, und dann können wir diese speichern und zum Browser gehen, aktualisieren, und wir sehen, dass dieses Beispiel auf true gesetzt ist. Dies ist der Fall, weil die user.role gleich admin ist. Aber wenn wir dies ändern, um etwas anderes zu sein, versuchen wir es mit dem Abonnenten, Sie sollten dies aktualisieren, um den Wert von false zu haben. Wir können dieses Beispiel auch noch weiter verkürzen, indem das Ergebnis dieses ternären Operators dieser Variablen direkt zuweisen . Was wir damit meinen, ist, dass CanEdit nicht gleich wahr oder falsch Wenn wir den vollständigen bedingten Operator hier herausschneiden, können wir dann die erste Zuweisung von false entfernen und diese einfügen. Anstatt unsere Variable festzulegen, setzen wir einfach den wahren Wert auf true“ und den falschen Wert auf „false“. Jetzt wird das Ergebnis „true“ oder „False direkt unserer canEdit-Variablen zugewiesen. Testen wir das noch einmal. Derzeit haben wir diese Einstellung auf false gesetzt, aber wenn wir dies wieder als Admin ändern, ist dies jetzt gleich wahr. Sowohl der bedingte Operator die if-else-Version sind beide vollkommen gültig. Der bedingte Operator ist, wie wir gerade gesehen haben, normalerweise kürzer und in einer einzigen Zeile platziert. Einige argumentieren, dass eine if-else-Anweisung klarer und lesbarer ist, aber am Ende ist es Ihre Wahl, die Sie verwenden möchten und welche Sie bevorzugen. 11. Typ Coersion & Umrechnung: In den kommenden paar Videos werden wir einige Typen und auch einige wahre oder falsch verwandte Dinge behandeln , die Ihnen seltsame oder unerwartete Ergebnisse liefern können. sich dessen bewusst sind, können Sie Dinge wie warum und wenn die Anweisung nicht korrekt ausgeführt wird, verstehen Dinge wie warum und wenn Anweisung nicht korrekt ausgeführt wird, und Ihnen auch viel Zeit beim Debuggen sparen. Der erste ist der Typ Zwang. Wir wissen bereits über Typen wie Objekte, Strings und Booleans Bescheid. Typ Zwang bezieht sich darauf , wie die Werte von Datentypen in andere Datentypen konvertiert werden. Wenn Sie in den Unterrichtsordner schauen, der Typ Zwang und Vergleich lautet , springen Sie in die index.html, wo wir ein einfaches Beispiel haben. Wir haben oben zwei Variablen mit Zahlen, und dann werden wir beide zusammen hinzufügen und innerhalb der Gesamtsumme speichern . Eine Sache, die zwischen diesen beiden Zahlen zu beachten ist, ist, dass die erste in diese Zitate eingeschlossen in diese Zitate also ist dies technisch gesehen eine Zeichenfolge. Die zweite ist eine Zahl, wie Sie erwarten würden. Aber was denkst du passiert, wenn wir beides zusammenfügen? Wenn wir Strings hinzufügen , wissen wir vielleicht, was zu erwarten ist, da dies zu einem Satz oder einem Wort kombiniert werden kann . Wenn wir auch zwei Zahlen addieren, würden diese beiden Zahlen addiert , um eine neue Summe zu erzielen. Aber da wir eine Zeichenfolge und eine Zahl hinzufügen, was glauben Sie, wird passieren? Nun, anstatt einen Fehler zu verursachen, soll JavaScript einen Datentyp auswählen , in den er automatisch konvertiert werden soll. Das nennt man Zwang. Aber in diesem Beispiel kann es konvertiert werden, damit es sich um beide Strings handelt oder beide Zahlen sind. Nun, raten wir nicht. Lasst uns das speichern und in die Konsole gehen und genau sehen, was passieren wird. Springen Sie in die Konsolenregisterkarte und aktualisieren Sie es und wir sehen den Wert von 72. Der Wert von 72 bedeutet, dass dies in eine Zeichenfolge konvertiert wird da wir den Wert sieben gefolgt vom Wert von zwei und nicht den Wert von neun haben sieben gefolgt vom Wert von zwei , was passieren würde, wenn dies wäre konvertiert für beide Zahlen. Diese Umwandlung hat für uns automatisch stattgefunden und dies kann als implizit bezeichnet werden , und diese implizite Umwandlung ist der Zwang. Nicht zu verwirren, aber etwas Ähnliches ist die Typkonvertierung. Dies funktioniert ähnlich wie Zwang, indem ein Wert von einem Datentyp in einen anderen konvertiert wird. können wir aber auch selbst manuell machen. Wenn wir möchten, dass dies manuell in eine Zahl konvertiert wird, uns eine Zahlenfunktion zur Verfügung. Wir können dies verwenden, besteht darin, unsere Nummer eins zu schneiden, nämlich eine Zeichenfolge. Wir können auf eine Zahlenfunktion zugreifen und dann in das platzieren , was wir in eine Zahl konvertieren möchten. Hier wandeln wir eine Zeichenfolge in eine Zahl um. Wenn wir das jetzt sparen, sollten wir den Wert von neun in der Konsole sehen , was bedeutet, dass beide sich als Zahlen anziehen. Um sich zusammenzufassen, geschieht der Zwang implizit oder automatisch. Typkonvertierung kann auch manuell erfolgen, genau wie wir es bei dieser Zahlenfunktion sehen. Manchmal werden diese Wörter synonym verwendet, aber dies ist die offizielle Zeile in beiden. Wenn du wolltest, könnten wir auch das Gegenteil tun. Anstatt diese in eine Zahl umzuwandeln, könnten wir die zweite in eine Zeichenfolge umwandeln. Wir machen das mit der String-Funktion. Geben Sie die Zahl ein, die Sie in eine Zeichenfolge konvertieren möchten , und diese würde dann wieder zum Zeichenfolgenwert von 72 zurückkehren . Aus diesem Grund kann es gut sein, eingehende Daten immer so zu konvertieren eingehende Daten immer so zu wie genau der Datentyp wir haben möchten. Wenn wir beispielsweise Daten von einem Dritten wie einem Server oder einer API erhalten, können wir Fehler und Fehler beseitigen, können wir Fehler und Fehler beseitigen indem wir sicherstellen, dass unser Datentyp korrekt ist. Aus diesem Grund haben Sie möglicherweise von Tools wie TypeScript gehört , die uns dazu zwingen, die Art der Daten zu deklarieren, die Sie im Voraus verwenden möchten , wodurch Fehler in unserem Code beseitigt werden Daten zu deklarieren, die Sie im Voraus verwenden möchten , können. So funktionieren die Dinge mit dem Plus-Operator, aber die anderen Betreiber können uns auch erwartete Ergebnisse liefern , nachdem der Zwang angewendet wurde. Wir können diesen Zwang auch mit dem größeren oder kleineren Betreiber in Aktion sehen . Sehen Sie, dass dies die Konsolenanmeldung mit dem Wert ändert oder die Ergebnisse von Nummer eins größer als Nummer zwei sind. Mal sehen, was passiert. Wir bekommen den Wert von true. Dies mag etwas seltsam erscheinen, da wir hier im Konsolenprotokoll immer noch eine Zeichenfolge mit einer Zahl vergleichen. In diesem Fall vergleicht JavaScript sie jedoch so, als wären sie beide Zahlen. Dies ist ein verrücktes Verhalten für Leute, die an andere Programmiersprachen gewöhnt sind , das stark typisiert ist. Das heißt, die Daten sind auf einen bestimmten Typ beschränkt und nicht konvertiert. Obwohl dieser Zwang hinter den Kulissen stattfindet, haben die Beispiele, die wir sehen werden, manchmal ein ziemlich vernünftiges oder vorhersehbares Verhalten. Aber oft sehen wir einige seltsame Ergebnisse wie diese. Wir können auch einige seltsame Ergebnisse sehen , wenn es um das Inkrementieren geht. Sehen Sie dies, anstatt eine Konstante für unsere Zeichenfolge zu haben, werden wir dies tun , um es zu lassen. Daher können wir diesen Wert von Nummer eins aktualisieren. Lass uns das gleich unten machen. Wir greifen auf unsere Variable Nummer eins zu und verwenden dann plus plus, um dies um den Wert eins zu erhöhen. Die Konsole protokolliert den Wert unserer Variablen und sehen wir uns an, was in der Konsole passiert. Aktualisieren Sie und wir sehen den Wert von acht. Dies mag seltsam erscheinen, weil wir wissen, dass Nummer eins anfänglich eine Zeichenfolge ist. Technisch gesehen sollten wir dies nicht um den Wert eines erhöhen können , wie wir es bei einer Zahl tun würden. Was hinter den Kulissen mit Zwang passiert ist, dass die Nummer eins in eine Zahl umgewandelt wird, daher können wir den Inkrementor verwenden. Ich glaube, du würdest den Wert von acht in der Konsole sehen. Stellen Sie sich als ein anderes Beispiel vor, dies sei auch ein Array. Wenn wir dies in den eckigen Klammern umgeben würden, die unsere Zeichenfolge enthalten, was würde Ihrer Meinung nach jetzt in der Konsole passieren? Wir erhöhen diesen Wert immer noch. Sagen wir das und sehen, was hier drin passiert. Aktualisieren. Auch dies ergibt keinen Sinn. Wir erhalten immer noch den Wert von acht, aber das ist die Welt von JavaScript. Was ist, wenn wir dieses Plus kommentieren und diesem Array direkt einen Wert hinzufügen würden. Sagen wir plus 2, speichern, aktualisieren und wir sehen den Wert von 72. Auch dies mag wie verrücktes Verhalten erscheinen, aber was hinter den Kulissen passiert ist, wie Sie vielleicht vermutet haben, ist, dass dies eine Zeichenfolge konvertiert wurde. Wenn Sie beweisen wollten, dass dies eine Zeichenfolge ist, oder wenn wir es noch einmal überprüfen wollten, könnten wir auch typeof innerhalb des Konsolenprotokolls verwenden. Ich gebe Saft vor unserer Nummer eins ein, speichere dies und dies wird dann den Datentyp ausgeben , der eine Zeichenfolge ist. Auch hier ist auch etwas ganz Seltsames. Dies ist eine Zeichenfolge, wie wir gerade gesehen haben, aber was glauben Sie , würde passieren, wenn wir die Inkremente erneut einführen? Nun, lasst uns das auskommentieren, speichern und aktualisieren, und wir sind jetzt wieder bei einer Nummer. Was ist, wenn wir auch den Typ entfernen und sehen können, was passiert, wenn wir die Sieben und die beiden zusammenfügen und dann auch das Inkrement verwenden. Lasst uns das aufheben. Dies gibt uns nun das Ergebnis des Zahlenwerts von 73. Das bedeutet, dass das, was ursprünglich für Nummer eins passiert , ist, dass wir 7 und 2 zusammengefügt werden, um eine Zeichenfolge von 72 zu erstellen, genau wie wir es zuvor gesehen haben. Dies ist immer noch eine Zeichenfolge, aber wenn es zur nächsten Zeile kommt, wie wir auch zuvor gesehen haben, wenn wir das Plus Plus verwenden, addiert es den Wert von 1 und gibt uns den Wert von 73 in der Konsole. Neben all dieser Verrücktheit führt der Gleichstellungsbetreiber auch eine ganz neue Welt von Dingen ein, auf die man achten muss. In unserem Konsolenprotokoll können wir beispielsweise prüfen, ob 1 gleich true ist. Das stimmt. Aber was ist, wenn wir dies in eine andere Zahl wie 11 umwandeln ? Dies gibt uns jetzt den Wert von false. Um es zusammenzufassen, war der Wert von eins gleich wahr, aber der Wert von 11 war gleich falsch. Versuchen wir eine weitere Zahl wie zwei, aktualisieren und dies ist auch der Wert von false. Aber das ist eine weitere Eigenart von JavaScript, aber kurz bevor wir es erklären, möchte ich unten nur ein paar Kommentare hinzufügen. Wahr ist also, dass Nummer 1 und 0 gleich falsch ist. Um dies besser zu verstehen, müssen wir verstehen, dass bei der Verwendung des Double Equals genau so die lockere Gleichheit ist, was bedeutet, dass wir nicht nach Datentypen suchen, die unwahrscheinlich sind dreifach gleich. was wir schon mal gesehen haben. Alles, was wir tun, ist zu prüfen, ob zwei Werte unabhängig vom Datentyp gleich sind . Da wir hier eine Zahl mit einem booleschen Wert auf der rechten Seite vergleichen , überprüfen wir sie nicht durch gleiche Typen. JavaScript wird mit Zwang konvertiert und in diesem Fall konvertiert es den booleschen Wert in eine Zahl. Genau wie wir zuvor geschrieben haben, ist die Nummer eins gleich wahr und JavaScript verwendet die Zahl Null, um falsch zu sein. Wir können dies im Konsolenprotokoll testen. Wir können prüfen, ob der Wert von eins gleich falsch ist, was nicht stimmt. Es sollte uns den Wert falsch in der Konsole geben. Wenn wir es jedoch in den Wert Null ändern, ist Null gleich falsch, genau wie wir es unten gesehen haben, und es sollte dann zu genau wie wir es unten gesehen haben, und es true führen. Das ist eine Menge Eigenartigkeit und es endet auch dort nicht. JavaScript hat so viele dieser Dinge, auf die Sie achten müssen. Ich erwarte nicht, dass du dich zu diesem Zeitpunkt an alle erinnerst. Aber wenn Sie wissen, dass dieses Verhalten existiert, und geben Sie einen guten Vorsprung zu wissen, wo Sie suchen müssen, wenn Sie Fehler in Ihrem Code stoßen. 12. Truthy & Falsey: In vielen dieser Beispiele in diesem Abschnitt und der JavaScript-Codierung im Allgemeinen prüfen wir, ob ein Wert wahr oder falsch ist. Wenn es stimmt, führen wir etwas Code aus, und wenn es falsch ist, machen wir etwas anderes. Aber es ist nicht nur ein boolescher Wert von true und false , den wir verwenden können, wie wir im letzten Video gesehen haben, dass andere Werte auch als wahr und falsch bewertet werden können. Wie Null wird in falsch ausgewertet, und die Zahl möchte gleich wahr sein. Es gibt auch viele weitere Beispiele, z. B. eine Textzeichenfolge ist wahr und eine leere Zeichenfolge ist das Gegenteil von false. Dies wird als wahrheitsgetreu oder falsey bezeichnet. Wahrhaftig ist, wenn ein Wert als wahr ausgewertet wird, z. B. dass unsere Textzeichenfolge vorhanden ist, und falsey ist, wenn ein Wert als falsch ausgewertet wird, z. B. unsere leere Zeichenfolge oder unsere Zahl Null. Springen Sie in unseren Editor, und wir können uns einige Beispiele in unserem leeren Skript ansehen. If-Anweisungen werden nicht nur für einen booleschen Wert von true ausgeführt , sondern auch für jeden anderen wahrheitsgemäßen Wert. Sagen wir dies, indem wir zuerst eine leere Wenn-else-Anweisung einrichten , dann drinnen von hier, werden wir einfach zu einfache Konsolenprotokolle einfügen. Für den ersten Abschnitt wir etwas als wahr bewerten, wir werden den Text von true V weitergeben . Im L-Abschnitt wird das Gegenteil tun. Fügen Sie den Text von falsey hinzu. Natürlich wird dies im Moment nicht laufen, da wir keine Bedingung innerhalb der if-Anweisung haben. Aber wir fangen mit dem an , was wir bereits wissen. Zuvor haben wir uns die Werte Null und eins angeschaut, wobei der Wert von Null gleich falsch ist. Dies würde zu Falsey ausgewertet werden, aber das Gegenteil gilt für den Wert von eins. Außerdem können wir die Zeichenfolge testen , die Sie kurz zuvor erwähnt haben. Wir haben eine Zeichenfolge mit etwas Inhalt darin, wie zum Beispiel den Text von hey. Dies wird auch als wahrheitsgemäß ausgewertet da wir einen Wert innerhalb der Zeichenfolge haben. Wenn wir dies jedoch entfernen und eine leere Zeichenfolge haben würden, würde dies in JavaScript auf den Wert von falsey ausgewertet. Der Zwang, über den wir gesprochen haben, geschieht hinter den Kulissen, und Werte wie unsere Zahlen Null und eins und auch dieser String-Wert werden hier in ein boolesches Äquivalent konvertiert. Wir können feststellen, ob solche Dinge nicht ausgeführt werden sollen. Falschlicherweise sind Werte, wie Sie erwarten würden, im Allgemeinen leere Werte wie Null, die wir uns gerade angesehen haben, und auch diese leeren Strings. Werfen wir einen Blick auf einige weitere Beispiele wie nein. Das ist auch Falsey. Undefiniert sollte dies auch falsch sein. Im Allgemeinen alles, was keinen Barwert hat, also das Wort falsch. Wie zu erwarten, würde dies auch auf Falsey ausgewertet werden. Notieren Sie sich abschließend die Zahl, die NaN ist. Das ist auch Falsey. Wir können so ziemlich alles andere als wahrheitsgemäß betrachten, wie z. B. die Strings, die wir uns gerade angesehen haben, Arrays, andere Zahlen als Null und tatsächlich jeden Objekttyp wie eine Funktion, Array oder ein Das tatsächliche Objekt wird dazu führen, dass es wahrheitsgemäß ist. Dies gilt auch unabhängig davon, ob wir den Konstruktor oder einen Literaltyp verwenden , genau so. Wir könnten den Konstruktor gebrauchen. Wir haben uns in der Vergangenheit Dinge wie neues Array und neues Objekt angeschaut . Das wird wahrheitsgemäß sein. Versuchen wir einen Funktionskonstruktor, der auch wahrheitsgemäß sein wird, und schließlich das Objekt. Genauso, wenn wir einen Konstruktor wie diesen verwenden wollen und dies buchstäblich so verwenden , wie wir es in diesen Videos häufiger getan haben , z. B. das Erstellen eines Arrays mit unterschiedlichen Werten im Inneren. Dies wäre wahrheitsgemäß wie der Konstruktor, zusammen mit dem Platzieren eines Objekts in einer wörtlichen Schriftart. Dieser Zwang, kombiniert mit dem Verständnis, wie Werte wahrheitsgetreu oder falsch umgewandelt werden, ist eine gute Sache, innerhalb von JavaScript zu verstehen , da er Ihnen wirklich helfen kann , Probleme zu vermeiden Zukunft und helfen auch bei Debugging-Problemen. 13. Optionale Verkettung: Dieses Video konzentriert sich auf etwas, das als optionale Verkettung bezeichnet wird, das in ES2020 in JavaScript eingeführt wurde. Wie wir bereits wissen, müssen wir Zugriff auf bestimmte Elemente eines Objekts haben , wie zum Beispiel unseren Namen und auch auf unsere Rolle als Administrator. Wie wir wissen, können wir auch noch tiefer gehen, indem wir auch auf Objekte zugreifen , die innerhalb eines Objekts verschachtelt sind. Was passiert, wenn Eigenschaften innerhalb dieser Kette nicht vorhanden sind? Sehen Sie sich einige Beispiele für Verkettung im Ereignisbereich an, dem wir auf das Ereignisobjekt zugreifen. Wir gingen dann tiefer in Eigenschaften wie das Ziel, den übergeordneten Knoten, die Kinder und dann in den inneren Textwert ein. Wenn zu irgendeinem Zeitpunkt in dieser Kette keine Eigenschaft existiert, würden wir einen Fehler erhalten. Das ist jedoch keine schlechte Sache, da wir Fehler bekommen sollten, wenn wir etwas falsch machen. Aber was ist, wenn die Immobilie nur manchmal da ist und manchmal nicht? Ein Beispiel dafür ist das, was wir bereits innerhalb des Skripts verwendet haben. Es wird den aktuellen Benutzer haben , der auf ein angemeldetes Benutzerobjekt eingestellt ist , und wir haben alle Informationen, die wir benötigen, wie den Namen und die Rolle. Wenn wir also zu den if-Anweisungen gehen und prüfen, ob die Rolle des Benutzers dem Administrator entspricht. Wir wissen, dass dies fehlerfrei funktionieren sollte, aber mit Benutzern, obwohl wir sie nicht immer eingeloggt sind. Der aktuelle Benutzer ist nicht immer so eingestellt, dass er ein Objekt wie dieses ist. Wenn der Benutzer beispielsweise nicht angemeldet ist, anstelle dieses Benutzerobjekts sehen wir anstelle dieses Benutzerobjekts möglicherweise den Wert null. Wenn wir nun versuchen, die if-Anweisung auszuführen, haben wir keinen Zugriff auf die Eigenschaft is.role. Gehen wir deshalb in die Konsole und sehen, was passiert. In der Konsole sehen wir diese rote Fehlermeldung, die uns sagt, dass es ein Problem beim Lesen unserer Rolle gibt. Dies geschieht, weil der aktuelle Benutzer kein Objekt mehr ist , das die rolleneigenschaft enthält und daher einen Fehler verursacht. Aber wir brauchen immer noch eine Möglichkeit, diese Rolle innerhalb der if-Aussage aktiv zu halten . Aber nachdem sich der Benutzer angemeldet hat. Hier kommt die optionale Verkettung ins Spiel. Was wir tun können, ist, dass wir ein Fragezeichen einfügen können, um zu erklären, dass die Eigenschaft möglicherweise nicht immer da ist. Wir fügen dies nur vor.role hinzu. Wenn wir dies jetzt speichern und anstelle des Fehlers in der Konsole aktualisieren, da er jetzt als false ausgewertet wird, wird der else Abschnitt jetzt in der Konsole ausgeführt. Was in hier passiert ist, dass wir zu den if-Aussagen kommen. JavaScript liest dann den aktuellen Benutzer, der der Wert von null ist. Deshalb weiß es, mit dem Rest unserer Kette nicht weiter zu gehen . Es überspringt jetzt den Fehler und gibt stattdessen Wert undefined zurück , den wir im Konsolenprotokoll überprüfen können. Derzeit wissen wir, dass der Abschnitt else läuft , weil wir den Wert von false gesehen haben. Stattdessen können wir auf den aktuellen Benutzer zugreifen, ein Fragezeichen, da dies nicht immer bei der optionalen Verkettung vorhanden sein wird . Dann können wir den Wert der Rolle erhöhen. Wenn wir dies speichern und aktualisieren, können wir nun bestätigen, dass wir den Wert von undefined zurückerhalten. Dies ist sehr nützlich, wenn wir wissen, dass eine bestimmte Objekteigenschaft im Voraus immer vorhanden sein kann oder auch nicht. Es ist üblich, dass solche Objekte im Laufe der Zeit wachsen und wir wissen nicht immer, wie sich unsere App in Zukunft entwickeln könnte. Möglicherweise müssen wir zusätzliche Funktionen hinzufügen oder weitere Informationen sammeln. Diese optionale Verkettung kann eventuelle Fehler vermeiden. Beispielsweise müssen wir in Zukunft möglicherweise weitere Informationen über die Anmeldequelle des Benutzers hinzufügen . Wir könnten ein verschachteltes Objekt hinzufügen, genau so kehren wir zum Benutzerobjekt zurück. Lassen Sie uns den Namen und die Rolle wieder einsetzen. Dann ein zweites verschachteltes Objekt , in dem ich die Anmeldedaten aufrufe, das wird ein verschachteltes Objekt darin sein . Wir werden das Datum eintragen. Aber jetzt ist eine leere Zeichenfolge in Ordnung. Es spielt keine Rolle und bestätigt, dass es gleich wahr ist. Dann, noch weiter unten, als sich unsere App noch weiter entwickelt hat, müssen wir möglicherweise noch tiefer auf dieses Objekt eingehen. Beispielsweise möchten wir möglicherweise weitere Details über die Anmeldequelle des Benutzers innerhalb dieses Objekts sammeln . Wir können auch die Quelle hinzufügen, bei der es sich auch um ein Objekt handelt, bei dem wir die URL der Anmeldequelle gesehen haben. Auch hier ist dies nur ein Beispiel, damit wir alles innerhalb der Zeichenfolge im Browser hinzufügen können , aus dem der Benutzer stammt. Jetzt müssen wir längere Ketten benötigen, um auf diese verschachtelten Informationen zugreifen zu können. Wenn wir diese if-else Anweisungen einfach entfernen, vereinfachen wir dies mit einem Konsolenprotokoll. Wir müssen zuerst auf die Benutzerobjekte zugreifen, bei denen es sich um den aktuellen Benutzer handelte. Das Objekt, in dem sich Anmeldedaten befanden, so.signupdata, Wenn wir beispielsweise auf den Browser zugreifen wollten, müssten wir auch kurz davor in die Quelle springen. Das Quellobjekt und dann der Browser aktualisieren und dies sollte jetzt der Wert von Chrome sein. Aber denken Sie daran, all dies zu einem späteren Zeitpunkt dem Objekt hinzugefügt wurde. Einige der früheren Anmeldebenutzer haben die Anmeldedaten nicht mit ihren Objekten verknüpft. Was wir tun können, können wir dies simulieren , indem wir diesen Abschnitt auskommentieren , der dann einen Fehler verursacht, genau wie wir es zuvor gesehen haben. Auch hier kann eine optionale Verkettung uns dabei helfen indem unser Code stillschweigend fehlschlägt, anstatt einen Fehler in der Konsole anzuzeigen. Innerhalb der Anmeldedaten hätten keinen Zugriff mehr auf die Quelle oder den Browser. Wir können die optionale Verkettung hier hinzufügen, aktualisieren und jetzt sehen wir die Ergebnisse von undefined. Allgemeine Fehler sind gut, um uns mitzuteilen , wann wir etwas falsch gemacht haben. Aber in Fällen wie diesem wissen wir, dass wir eine Immobilie haben die möglicherweise vorhanden ist oder auch nicht. Die optionale Verkettung kann uns wirklich helfen, indem wir still scheitern und uns daher erlauben , mit dem Irrtümer selbst. 14. Erstellen und Ändern neuer Objekte: So ziemlich alles, was wir uns vorstellen können, hat bestimmte Eigenschaften, kann ein guter Anwendungsfall für ein Objekt in JavaScript sein. Zum Beispiel kann eine Person ein Objekt sein, und die Eigenschaften könnten der Name, das Alter, die Größe und jede andere Information sein Alter, die Größe und jede andere Information , die wir einer Person geben möchten. Ein Computer könnte auch ein Objekt mit Eigenschaften wie der Marke, dem Modell, der CPU, dem Herstellungsjahr und auch dem Speicher sein. Wenn wir an solche Objekte denken, werden die Anwendungsfälle riesig. Wie bei Arrays gibt es verschiedene Möglichkeiten, ein Objekt zu konstruieren, und der Stil, den wir bisher betrachtet haben , wird Objektliteral genannt. Dies wird verwendet, um ein neues Objekt mit den geschweiften Klammern zu erstellen und zu definieren , das einige Eigenschaften enthält, genau wie wir es hier haben. Rüber zu den Startdateien. Springen Sie in die Datei dieser Lektion, die der Objektkonstruktor ist, und öffnen Sie diese im Browser. Wie bereits bei den Folien erwähnt, haben wir zwei verschiedene Möglichkeiten , ein Objekt zu erstellen. Wir haben den wörtlichen Ansatz, genau wie wir es zuvor verwendet haben, und wir haben auch einen Ansatz, der als Konstruktor bezeichnet wird. Der Konstruktor ist nichts Neues. Wir haben uns das vorher mit Arrays angeschaut. In der Regel haben wir Arrays mit einem wörtlichen Ansatz erstellt , z. B. ein Pizza-Array, und unsere Eigenschaften innerhalb dieser eckigen Klammern eingerichtet . Neben diesem wörtlichen Ansatz können wir auch ein Array mit dem Konstruktor erstellen. Wenn wir beispielsweise eine Reihe von Inhaltsstoffen wollten, können wir dies mit dem neuen Schlüsselwort gefolgt von einem Array einrichten . Dies ist ein wörtlicher Ansatz und so können wir mit dem Konstruktor ein leeres Array erstellen . Wir können dann auf unser leeres Array zugreifen und neue Werte mit Methoden wie Push hinzufügen , um diesem Array einen neuen Wert hinzuzufügen. Genau wie unsere Arrays hier können wir das Gleiche auch für andere Objekte tun. Was ich tun werde, ist, diesen wörtlichen Ansatz zu kommentieren und diesen mit dem Objektkonstruktor neu zu erstellen. Zunächst erstellen wir eine neue Variable namens user, um die obigen Objekte nachzuahmen und diese auf ein neues Objekt zu setzen. Dieses neue Objekt wird ein Objekt-Wrapper sein , der leer ist, und dann können wir neue Eigenschaften auf dieses Objekt übertragen . Wir tun dies, indem wir auf unsere Variable zugreifen. Dann können wir den Namen der Eigenschaft direkt auf unser Objekt setzen . Erstens wird es der Schlüssel sein, genau wie wir es hier haben. Dann weisen wir dies einem bestimmten Wert zu. Dies ist gleich einer Reihe von Chris. Dann ist der zweite für den Nachnamen, auch eine Zeichenfolge. Die dritte war die Besatzung. Als Nächstes haben wir den angemeldeten Boolean von true für user.logged.in. Dies ist ein boolescher Wert, daher brauchen wir die Zitate nicht. Schließlich können wir auch allen Food-Eigenschaften ein Array zuweisen . Ich kopiere dieses Array einfach von oben. Wir können testen, dass dies jetzt funktioniert, indem ein Konsolenprotokoll für den Wert des Benutzers erstellen und dann in die Entwicklertools in die Konsole springen. Es gibt unser Objekt, in dem alle unsere Eigenschaften darin verschachtelt sind. Wir können auch über eine Punktnotation auf einzelne Eigenschaften zugreifen . Das funktioniert genau wie bei der wörtlichen Herangehensweise. Wir können user.first verwenden. Dies druckt unseren Vornamen in der Konsole aus. Neben dieser Punktnotation können wir, wie wir es zuvor verwendet haben, wie wir es zuvor verwendet haben, auch mit der Bracket-Notation auf unsere Eigenschaften zugreifen . Was wir tun müssen, ist, unseren Eigenschaftsnamen in diesen eckigen Klammern zu umgeben und den Punkt zu entfernen. Dies muss auch eine Zeichenfolge sein. Beide ergeben genau das gleiche Ergebnis. Wenn wir wollten, könnten wir auch eine unserer Immobilien direkt aktualisieren , also user.first. Wir können dies dann neu zuweisen oder dies als neuer Wert aktualisieren. Dann können wir das auf der Konsole ausdrucken. Dies gibt uns unseren aktualisierten Wert. Als Randnotiz, wenn wir versehentlich mehr als eine Eigenschaft haben , die ein Duplikat ist, genau wie hier, wo wir den Vornamen zweimal in unserem Code haben , seit ES 2015, der letzte Das Auftreten wird verwendet, anstatt einen Fehler auszulößen. Darüber hinaus können wir eine dieser Eigenschaften auch mit dem JavaScript-Löschoperator löschen. Was wir tun müssen, ist delete hinzuzufügen, das auf unseren Vornamen verweist, diesen speichern und aktualisieren, und wir drucken einfach das vollständige Benutzerobjekt aus. Öffnen Sie dies, und dies wird nun den Vornamen aus unserem Use-Objekt entfernen . Dies sind zwei verschiedene Möglichkeiten, ein Objekt in JavaScript zu erstellen . Persönlich bevorzuge ich den wörtlichen Ansatz , den wir ganz oben hatten , da es mir sauberer und einfacher zu bedienen erscheint. Aber das liegt ganz an Ihrer persönlichen Präferenz. In kommenden Videos erläutern wir , wie Sie eine vorlagenähnliche Funktion zum Erstellen mehrerer Objekte einrichten . 15. Objektkonstruktorfunktion: Großartig. Wir kennen jetzt zwei verschiedene Möglichkeiten, Objekte innerhalb von JavaScript zu erstellen. Wenn Sie in die Datei dieser Lektion springen, bei der es sich um Objektkonstruktorfunktionen handelt, sehen wir, dass wir hier nur ein leeres Skript haben. Die zwei verschiedenen Möglichkeiten , wie wir Objekte erstellt haben besteht darin, eine neue Variable wie diese zu erstellen, und dann können wir unsere Eigenschaften direkt innerhalb der geschweiften Klammern hinzufügen . Alternativ können wir auch ein neues Objekt verwenden, das der Konstruktoransatz ist, und dies gibt uns auch ein leeres Objekt in unseren Eigenschaften. Beide Ansätze funktionieren einwandfrei, beschränken sich aber auch darauf nur ein einzelnes Objekt zu erstellen. Es wäre hilfreicher, wenn wir eine Objektvorlage haben könnten , damit wir mehrere darauf basierende Objekte erstellen können , die jeweils dieselben Eigenschaften und Methoden aufweisen. Wir können dies auch mit der Konstruktorfunktion machen. Was wir tun werden, ist, dass wir dies entfernen und eine neue Konstruktorfunktion erstellen. Es empfiehlt sich auch, diese Konstruktorfunktionen mit einem Großbuchstaben zu benennen . Wir verwenden in unserem Benutzerbeispiel, dass es sich um ein Großbuchstaben-U handelt, und erstellen dann den Rest unserer Funktion. Der Zweck dieser Konstruktorfunktion für unseren Benutzer besteht darin, mehrere Benutzer basierend auf dieser Vorlage zu erstellen . Innerhalb unserer Funktion werden wir auch einige Werte weitergeben , die wir hier brauchen werden. Die erste, wir werden das ziemlich einfach halten, wir sagen nur Vorname, Nachname und Beruf. Wir kommen in nur einem Moment wieder auf diese Funktion zurück. Aber bevor wir genau so ein neues Objekt erstellt haben, haben wir das neue Schlüsselwort und dann die Objektfunktion verwendet . Anstatt jedoch ein neues leeres Objekt zu erstellen, möchten wir jetzt eine neue Instanz unseres Benutzers erstellen. Anstelle eines neuen Objekts sagen wir neues User Capital U, wo wir die tatsächlichen Werte übergeben , die Sie für unsere Funktion verwenden möchten. Wir müssen den Vornamen, den letzten und den Beruf übergeben, und dies werden die tatsächlichen drei Werte sein , die wir für unseren Benutzer benötigen. Wir sagen Chris, den Nachnamen und schließlich die Besatzung. Wir können dies auch so oft ich möchte duplizieren, denn wie bereits erwähnt, Zweck der Erstellung dieser Konstruktorfunktion darin, als Vorlage zu fungieren, um so viele Objekte zu erstellen , wie wir möchten. Wir kreieren unseren zweiten, haben einen anderen Namen und auch acht verschiedene Beschäftigung. Bei diesen beiden neuen Benutzern können wir dies auch innerhalb von Konstanten oder Variablen speichern , damit wir später darauf zugreifen können. Sagen Sie also const Chris gleich unserem, und dann ist der zweite gleich Homer. Großartig. Was wir jetzt tun werden, ist, den Wert eines dieser neuen Benutzer zu protokollieren. Platzieren Sie ein Konsolenprotokoll, den Wert von Homer, und springen Sie dann in die Konsole. Wie Sie sehen können, haben wir ein Benutzerobjekt. Aber wenn wir das öffnen, haben wir keine Immobilien hier drin. Alles was wir haben ist ein leeres Benutzerobjekt. Dies ist zu erwarten, da unsere Konstruktorfunktion, die wir zuvor erstellt haben , leer ist. Wir haben keinen Code innerhalb der geschweiften Klammern. Wir erhalten in den Werten innerhalb der Funktion aber wir machen damit noch nichts. Um dies zu tun, müssen wir etwas festlegen, das diesen drei Werten entspricht. Wir müssen etwas so einstellen, dass es unserem ersten entspricht, einige Dinge, die unserem letzten entsprechen, und etwas, das unserem Beruf entspricht. Aber was machen wir, um diese in unsere Objekteigenschaften umzuwandeln ? Nun, um eine Eigenschaft festzulegen, müssen wir das Schlüsselwort dieses verwenden . Um das Schlüsselwort ein bisschen besser zu verstehen, möchte ich Sie schnell zu einer früheren Datei in diesem Projektordner zurückführen . Wenn wir zurück in Nummer drei springen, also Funktionen, und dann Nummer fünf, was eine Funktion oder eine Methode ist, springen Sie hier auf diese Indexseite. Darin erinnern Sie sich vielleicht daran, dass wir ein Objekt namens Check Recipes erstellt haben . Check Rezepte hatten einige Eigenschaften wie die aktuelle Anzahl von Rezepten, die maximalen Rezepte und auch eine Methode namens Rezepte übrig, die die aktuelle Anzahl von Rezepten abzog das Maximum. Denken Sie daran, dass eine Methode nur eine Funktion ist, die sich auf diesem Objekt befindet. Innerhalb dieser Methode haben wir das Schlüsselwort, dieses Schlüsselwort verwendet, um auf andere Eigenschaften dieses Objekts zuzugreifen. Wir greifen auf die maximalen Rezepte zu, die sich auf diesem Objekt befinden, und auch auf die aktuellen Rezepte. Das Schlüsselwort dieses kann in JavaScript eine komplexe Sache sein, die man verstehen kann, aber unter diesen Umständen wird es einfach auf das Objekt verweisen, das hier gehört. heißt, wir können auf jede der anderen Eigenschaften in diesem Objekt zugreifen . In diesem Sinne können wir zurück zu unserer aktuellen Datei alle Eigenschaften auf die gleiche Weise hinzufügen, indem wir das Schlüsselwort, gefolgt vom Eigenschaftsnamen, verwenden. Zum ersten wird dies.FirstName und auch das Gleiche für die anderen sagen , this.lastName, und schließlich this.occupation. Dies wird nun unsere beiden Benutzerobjekte mit den Eigenschaften konstruieren , die wir hineinführen. Speichern Sie dies und aktualisieren Sie mit unserem Konsolenprotokoll noch vorhanden. Unser Homer-Benutzer ist jetzt korrekt konstruiert und wir können dies auch für unseren ersten Benutzer duplizieren. Dies gibt uns jetzt zwei einzigartige Objekte, die beide auf derselben Vorlage basieren . Wenn wir zusätzliche Eigenschaften und Methoden hinzufügen müssen, haben wir auch einige Optionen. Wir können sie direkt zu einem unserer Objekte wie diesem hinzufügen. Genau wie wir es im vorherigen Video angesehen haben, können wir auf unsere Variable wie Homer zugreifen. Wir können Leben sagen und dies auf unseren Wert setzen. Wir können unseren Objekten auch Methoden hinzufügen. Wir können auf unser Objekt zugreifen, das Homer ist, und dann können wir diesem einen Eigenschaftsnamen geben , der den vollständigen Namen haben wird , und dies auf eine Funktion setzen wird. Die Verantwortung dieser Funktion besteht darin, eine neue Zeichenfolge zurückzugeben, die der Vorname ist, der dem zweiten Namen hinzugefügt also unsere Zeichenfolge zurück, die Homer.FirstName ist, fügen Sie einen hinzu Leerzeichen dazwischen und fügen Sie dann zum Ende homer.lastName hinzu. Probieren wir es mal aus. Zuallererst probieren wir das Liveseigentum aus. Fügen Sie dies der Konsole hinzu, aktualisieren Sie es und wir erhalten den Wert von Springfield. Dann können wir als nächstes unsere Methode ausprobieren, die der vollständige Name war. Aktualisieren Sie den Browser. Whoops, wir haben einen Wert von undefined, also schauen wir uns das an. Wir haben Homer.FirstName, das ist in Ordnung. Nur ein Rechtschreibfehler ganz oben in der Luft, also ändern wir das. Jetzt sehen wir, dass dies Homer Simpson ist, also funktioniert das völlig gut. Diese werden jedoch nur zu unseren einzelnen Objekten hinzugefügt. Diese werden nur große Homer-Variable hinzugefügt. Wenn wir versucht haben, auf unsere Chris Variable zuzugreifen und dies in der Konsole auszuprobieren, sehen wir hier einen Fehler. Dieser Ansatz ist nur nützlich, wenn Sie ein bestimmtes Objekt ändern möchten. Wenn wir diese auf alle erstellten Objekte anwenden möchten , müssen wir diese in der Konstruktorfunktion oben platzieren . Zunächst müssen wir also das Eigentum des Lebens an unsere Funktion weitergeben das Eigentum des Lebens und dann können wir diese unseren beiden Objekten unten hinzufügen. Chris, Wert von Großbritannien und Homer, der Wert von Springfield. Wir müssen auch unseren Funktionskörper modifizieren. Wir werden dies duplizieren und wir sagen, dass dies.lives dem Wert von Leben entspricht, an dem Sie weitergeben. Wir müssen die Methode auch weitergeben . Die Methode wird immer dieselbe sein, sie verwendet nur den vorhandenen Vor- und Nachnamen. Ich schneide das einfach aus und füge es in unsere Funktion ein. Schneide das aus, füge das in unsere Funktion ein. Dieses Mal entfernen wir Homer, ersetzen Homer durch das Schlüsselwort, dieses. Auch das Gleiche innerhalb unseres Funktionskörpers. Denken Sie daran, dass dieses Schlüsselwort genau wie im vorherigen Beispiel im früheren Video auf jede andere Eigenschaft dieser Benutzerfunktion verweist . Schließlich können wir auch homer.lives entfernen. Wir brauchen das nicht mehr, also können wir dies jetzt speichern und aktualisieren. Jetzt funktioniert die vollständige Namensmethode für unsere beiden Objekte. 16. Object: Wenn Sie die Rolle des Prototyps in den frühen Videos nicht ganz verstanden haben, es hoffentlich helfen, ihn jetzt mit unseren eigenen Objekten in Aktion zu sehen kann es hoffentlich helfen, ihn jetzt mit unseren eigenen Objekten in Aktion zu sehen, einige Dinge zum Klicken zu bringen. Im Starterprojekt beginnen wir mit dem Objektprototyp-Abschnitt mit dem gleichen Beispiel aus dem vorherigen Video. Wir haben eine Konstruktorfunktion zum Erstellen von Vorlagen oder Blueprints. Dies bedeutet, dass wir mehrere Objekte mit den gleichen verfügbaren Eigenschaften und Methoden erstellen können . Wir haben uns dann angeschaut, wie Eigenschaften und Methoden sowohl für einzelne Objekte als auch für die Funktion hinzugefügt sowohl für einzelne Objekte als auch werden, damit sie für alle neu erstellten Objekte gelten . Neben dem Hinzufügen zur Konstruktorfunktion können wir auch direkt zum Prototyp hinzufügen. Bevor wir dies tun, sollten wir zuerst auffrischen, was wir über den Prototyp wissen. Unten führen wir ein Konsolenprotokoll mit dem Wert Homer durch, das von unserem Konstruktor ein neues Benutzerobjekt erstellt hat. Wenn wir dies im Browser öffnen und in die Developer Tools in die Konsole springen , schauen wir uns an, was wir hier drinnen sehen. Aktualisieren Sie, und wir sehen unseren Benutzer. Lasst uns das aufmachen. Es enthält unsere Immobilien. Wir haben den Vornamen, den Nachnamen und alle Werte, die Sie unten sehen. Unten haben wir dann diesen Prototyp, der eine Verbindung zur Prototypkette darstellt. Mach das auf. Im Inneren können wir unseren eigenen Konstruktor sehen , der unser Benutzer ist. Daneben ist auch ein zweiter Prototyp Objekte. Das erste Protokoll, das hier oben oben steht , deutet auf unsere eigenen Prototyp-Ergänzungen hin, die wir uns bald ansehen werden. Dann die zweite, die wir gerade geöffnet haben, das hat jetzt viele Dinge drin, die wir selbst nicht hinzugefügt haben. Wir haben Dinge wie ValueOf, ToString. Dies sind keine Dinge, die wir selbst erschaffen haben. Denken Sie daran, dass JavaScript-Objekte von früher Zeit Eigenschaften und Methoden von übergeordneten Objekten erben. Ganz oben in dieser Vererbungskette steht das Objekt. Loggen wir dies nun zur Referenz an der Konsole an. Nur mit Homer mache ich ein zweites Konsolenprotokoll mit dem Wert von object. Speichern wir dies nun und aktualisieren den Browser, so dass wir den Hauptobjekttyp neben unserem eigenen Heimobjekt erhalten. Dieser erste Objektwert ist ein leeres Objekt, das Sie sehen können, wenn Sie dieses öffnen. Es ist leer, wenn es darum geht, keine Eigenschaften von Werten zu haben, wie wir es hier haben. Der Zweck dieses Objekts der obersten Ebene jedoch darin, die minimalen Eigenschaften und Methoden zu enthalten, die die Prototypkette an andere Objekte weitergegeben über die Prototypkette an andere Objekte weitergegeben werden. Wir können das sehen, wenn wir das öffnen. Dies enthält all diese Eigenschaften und Methoden, auf die wir jetzt über unsere eigenen erstellten Objekte zugreifen können . Wenn wir jetzt unser eigenes Heimobjekt eröffnen, gehen Sie zum Prototyp. Dann sehen Sie, dass der zweite Prototyp hier darin die gleichen Eigenschaften und Methoden von unseren Top-Level-Objekten geerbt hat die gleichen Eigenschaften und . Dies bedeutet jetzt, dass diese jetzt für unsere eigenen benutzerdefinierten Objekte verfügbar sind. Wie wir uns bereits angeschaut haben, Dinge wie benutzerdefinierte Arrays deshalb haben Dinge wie benutzerdefinierte Arrays deshalb Methoden zur Verfügung, z. B. für jeden Push und Pop. Wir haben diese Methoden nicht wirklich selbst entwickelt. Stattdessen werden sie von der Prototypkette geerbt. Alle Strahlen können sie nutzen. Wir sollten nicht unsere eigenen Eigenschaften und Methoden zu Objekten hinzufügen , die wir nicht selbst erstellt haben, aber wir können sie unserem eigenen benutzerdefinierten Konstruktor wie diesem Benutzer hinzufügen . Wir können dies tun, indem wir auf die Prototypeigenschaft dieses Benutzers zugreifen . Gleich darunter. Lasst uns etwas Platz schaffen. Greifen Sie auf unseren Benutzerkonstruktor zu. Dann der Prototyp. Wir können hier eine neue Eigenschaft festlegen, also jeden Wert. Dies können andere Datentypen wie Strings, Zahlen oder sogar Methoden sein. Wir können auch das erste Objekt entfernen unser zweites Homer-Objekt an Ort und Stelle lassen. Aktualisieren, öffnen Sie das, springen Sie in den Prototyp. Jetzt öffne ich dieses Prototyp-Objekt. Wir sehen auch die benutzerdefinierte Eigenschaft, die wir gerade festgelegt haben. Wir sehen, dass cool nicht neben dem Vornamen auf dem ursprünglichen Objekt platziert neben dem Vornamen auf dem ursprünglichen Objekt wird. Aber wenn wir versuchen, darauf zuzugreifen, cool, dann werden Sie in der Prototypkette nachgeschlagen. Wenn es nicht an unserer Prototypkette wäre, die Sie hier sehen, würde sie die Erbschaftskette noch weiter nach oben schauen . Wir können das ausprobieren. Springe in das Konsolenprotokoll. Jetzt, homer.cool. Denken Sie daran, dass .cool auf unserem ursprünglichen Konstruktor nicht verfügbar ist . Es wird dann die Prototypkette nach unten schauen , aktualisieren. Wir bekommen den Wert von true. Das Gleiche gilt auch für Methoden. Wir können dem Prototyp auch verschiedene Methoden hinzufügen. Anstatt diese Methode unserem Konstruktor verfügbar zu haben, werde ich diese kopieren und kommentieren. Fügen Sie dies außerhalb unseres Benutzers ein. Anstatt dieses Mal auf das Objekt zuzugreifen, greifen wir genau wie zuvor auf unseren user.prototype zu . Diesmal wird der vollständige Name unserer Funktion entsprechen. Testen wir das unten in unserem Konsolenprotokoll. Der Name war diesmal FullName. Da dies die Methode ist, müssen wir auch mit den Klammern darauf zugreifen. Dies sollte jetzt unseren FirstName zurückgeben zu unserem LastName hinzugefügt. Gut. Wenn Sie auch überprüfen möchten, ist dies auf dem Prototyp neben cool. Wir können FullName entfernen. Melden Sie sich bei der Konsole an, den Wert von Homer. Öffne das, springe in den Prototyp und unsere beiden neuen Editionen sind hier drin. Zu Beginn mag der Prototyp komplex erscheinen, aber es ist nur eine Möglichkeit, Eigenschaften und Methoden von einem Elternobjekt zu erben , sogar von einem Elternteil, das wie unser Benutzer oder vom Objekt der obersten Ebene erstellt wurde welches JavaScript zur Verfügung stellt. Um es zusammenzufassen, ist der Prototyp eine Eigenschaft für ein Objekt. Es wird zur Verfügung gestellt, um von anderen Objekten geerbt zu werden. Ein Beispiel dafür waren unser FullName und unsere coolen Ergänzungen. Beide wurden unserem Prototyp hinzugefügt, was bedeutet, dass diese nun anderen Objekten zum Erben zur Verfügung gestellt wurden , z. B. unseren Homer-Benutzer unten. 17. Erbliche Objekteigenschaften: Wir haben bisher ein wenig darüber gesprochen, wie wir dieses wichtigste übergeordnete JavaScript-Objekt haben , das einen Prototyp hat, und wie man neue erstellen würde, die automatisch bestimmte Dinge durch die Prototypkette erben. Aber was wäre, wenn wir auch zulassen wollten unsere eigenen Objekte vererbt werden? In einer Startdateien haben wir ein ähnliches Benutzerbeispiel aus dem vorherigen Video. Wir haben ein Benutzerobjekt, und wir können feststellen , dass dieses Benutzerobjekt einige Einschränkungen für unsere spezielle Verwendung aufweist. Hier erschaffen wir echte Menschen wie mich und auch knapp unter einer fiktiven Figur. Aber wenn wir darüber nachdenken, benötigen echte und fiktive Menschen möglicherweise unterschiedliche Eigenschaften. Wir können zum Beispiel den Namen der Show hinzufügen , aus der der fiktive Charakter stammt. Dies würde jedoch nicht für eine reale Person gelten. Dies erschwert es jetzt, dieses Objekt viel weiter zu erweitern. Was wir jedoch tun können, ist, dieses Benutzerobjekt als Basis zu verwenden, einschließlich der minimalen Eigenschaften einschließlich der minimalen Eigenschaften, die sowohl für den realen als auch für den fiktiven Benutzer gelten. Dann erstellen wir zwei weitere Objekte, die beide von diesem ursprünglichen Benutzer erben. Wir haben immer noch Zugang zu all den Dingen wie den Namen und den Berufen. Aber dann wird es auch spezifische Eigenschaften haben , die wir für jeden Anwendungsfall benötigen. Um dies zu tun, haben wir eine Objektmethode namens create. Kurz bevor wir dies zu unserem aktuellen Beispiel hinzufügen, schauen wir uns an, wie wir dies mit einem normalen Standalone-Objekt machen können . Fügen wir zunächst ein reguläres Objekt unten hinzu. Entfernen Sie vorerst unser Konsolenprotokoll erstellen Sie ein neues Objekt namens product1. Öffne die geschweiften Klammern und wir fügen unsere Eigenschaften hinzu. Der Titel ist wieder ziemlich generisch, also ein erstaunliches blaues Hemd. Auch die Beschreibung. Einfach alles blaue Shirt. Als eigenständiges Objekt handelt es sich ein generisches Objekt, das auf mehrere blaue Hemden gelten könnte. Der Titel und auch die Beschreibung passen zu anderen blauen Hemden. Wir könnten auch einige Details wie Marke oder Größe für andere Produkte ändern . Wir könnten dann diese Object.create-Methode verwenden, die wir zuvor erwähnt haben , um ein zweites Produkt auf dieser Grundlage zu erstellen , dieses innerhalb einer Variablen namens product2 zu installieren und dieses auf object.create zu setzen. Innerhalb von object.create geben wir unser Produkt1 ein, was bedeutet, dass es ein neues Produkt namens product2 erstellt , das auf unserem Originalprodukt1 basiert. Protokollieren wir dies auf dieser Konsole, Produkt2, und sehen Sie, was hier passiert. Aktualisieren. Aktualisieren wir diesen Link einfach im Browser. Anfangs sehen wir ein leeres Objekt. Wir haben keine Eigenschaften oder Methoden, die damit verbunden sind. Aber wenn wir den beigefügten Prototyp öffnen , haben wir Zugriff auf unseren Titel und auch auf unsere Beschreibung, die von unserem Produkt geerbt wurde1. So funktioniert die create-Methode. Es erstellt ein neues Objekt und verwendet das vorhandene Objekt, das wir übergeben, als Prototyp. Beachten Sie auch, dass wir auch einen zweiten Prototyp haben. Wir haben zuerst unser eigenes, das ist die Beschreibung und dann der Titel. Dann weiter oben in der Kette haben wir alle Eigenschaften und Methoden, die wir zuvor gesehen haben die von der Spitze der Kette vom Objekt geerbt werden. Wie wir bereits erfahren haben, können wir, obwohl unser eigenes Objekt leer ist, obwohl unser eigenes Objekt leer ist, weiterhin auf diese geerbten Eigenschaften von product1 mit ihrem Namen zugreifen . product2, denken Sie daran, dass dies komplett leer ist , wie wir es gerade in der Konsole gesehen haben. Wir können auf die geerbten Werte wie Titel zugreifen. Wir können auch unsere eigenen Eigenschaften und Methoden hinzufügen , wie Sie es erwarten würden. Direkt unter unserem Produkt2 können wir mit dem Namen darauf zugreifen und dann neue Eigenschaften wie die Größe festlegen , z. B. klein. Melden Sie dies in der Konsole an, die dann unser Objekt aktualisiert. Jetzt können wir all dieses Beispiel entfernen und wir können dieses Wissen verwenden , das wir gerade gelernt haben. Wir können nun versuchen, das gleiche Beispiel auf unseren Benutzer anzuwenden. Der Hauptunterschied besteht jedoch darin, dass wir eher eine Konstruktorfunktion als ein tatsächliches Objekt haben. Wenn wir dasselbe tun würden wie zuvor, erstellen wir eine Variable namens copy, die auf object.create festgelegt ist. Wenn wir dann versuchen, eine Kopie unseres Benutzers zu erstellen, schauen wir uns an, was in der Konsole passiert. Speichern und aktualisieren. Die Kopie ist eine Kopie der Funktion, die nicht das ist, was wir wollen. Was wir suchen, ist eine Möglichkeit, konstruktivere Funktionen zu erstellen , die alle die Eigenschaften dieses Benutzers erben. Fangen wir mit dem Charakter an. Erstellen Sie direkt unter unserem Benutzer unseren neuen Objektkonstruktor namens Charakter. Denken Sie daran, dass dieser Funktion darin besteht, alle Basiseigenschaften von unseren Benutzerobjekten zu erben . Wir werden auch einige zusätzliche Eigenschaften hinzufügen , die nur für unseren Charakter gelten. Diese zusätzlichen Informationen , die wir weitergeben ist die Show, aus der der Charakter stammt. Dann greifen wir wie oben auf this.show zu und setzen dies gleich dem Wert, der an diesen Konstruktor übergeben wird . Nun erstellen wir ein neues Zeichenobjekt mit der show -Eigenschaft und erben auch alle diese Eigenschaften. Aber das müssen wir auf unseren Charakter eingehen und zuerst auf unsere Benutzerkonstruktorfunktion zugreifen, die wir dann auf eine Aufruffunktion zugreifen können. Diese Aufrufmethode ist für den Prototyp einer Funktion verfügbar und ermöglicht eine Funktion, die zu einem Objekt gehört , das innerhalb eines anderen Objekts aufgerufen wird. heißt, wir können jetzt eine Benutzerfunktion aus unserer Charakterfunktion aufrufen . Diese Aufrufmethode ist nicht exklusiv für diesen Anwendungsfall. Es kann jederzeit verwendet werden, wenn ich auf eine Funktion oder eine Methode zugreifen möchte , die sich auf einem anderen Objekt befindet. Diese Benutzerfunktion nimmt auch diese vier Parameter auf. Wir können diese kopieren und dies auch unserem Charakter hinzufügen. Denken Sie daran, dass Homer ein Charakter ist Anstatt dies also auf den neuen Benutzer zu stützen, werden wir dies auf den neuen Charakter stützen. Wie die vierten Argumente, die ich zeigen werde, können wir kurz nach Springfield unseren letzten Wert, nämlich die Simpsons, weitergeben . Diese fünf Werte stimmen jetzt mit den fünf Zeichen übergebenen Werten überein, die an unseren Konstruktor übergeben wurden . Probieren wir das mal aus. Wir können unsere Kopie von vorher entfernen und stattdessen protokollieren wir den Wert von Homer. Dies zeigt jetzt, dass Homer ein Charakterobjekt ist. Es hat die Showeigenschaft mit dem Wert der Simpsons. Wir wissen, dass homer.show jetzt auch funktionieren sollte. Aber was ist mit den anderen geerbten Eigenschaften? Wir konnten vor dem Homer-Objekt sehen, dass es nur Zugriff auf die Showeigenschaft auf der obersten Ebene hatte. Wir hatten nichts anderes wie den FirstName und LastName, den Beruf oder das Leben. Nun, probieren wir das aus und sehen, was passiert. Versuchen Sie es zuerst mit dem Beruf. Aktualisieren Sie, und wir erhalten den Wert von undefined zurück . Versuchen wir es noch einmal. homer.lives und das ist auch undefiniert. Die geerbten Eigenschaften scheinen hier nicht zu funktionieren. Dies liegt daran, dass uns einige Details fehlen, wenn wir unsere Benutzerfunktion innerhalb unseres Charakters aufrufen. Zuallererst müssen wir alle diese übergebenen Parameter kopieren und diese auch zu unserer Aufrufmethode hinzufügen. Darüber hinaus müssen wir dieses Keyword auch weitergeben . Wir haben bereits erwähnt , dass dieses Schlüsselwort komplexe Sache sein kann , die es zu verstehen gilt. Wir werden später mehr dazu haben. Dies bedeutet jedoch im Grunde, dass beim Ausführen unserer Funktion wir beim Ausführen unserer Funktion auf die Werte zugreifen können. So wie wir oben waren. nach unten scrollen, versuchen wir immer noch homer.lives zu protokollieren. Lasst uns das aktualisieren und wir erhalten jetzt den Wert von Springfield. Wir können noch einen ausprobieren, den FirstName. Das funktioniert alles richtig. Genau als Zusammenfassung, da dies ziemlich verwirrend sein kann, erstellen wir ein neues Homer-Objekt unserem Charakter basiert. Diese Zeichenkonstruktorfunktion hat nur eine eigene Eigenschaft, nämlich die Show, zu der das Zeichen gehört. Aber es erbt auch alle Eigenschaften und Methoden von unseren Benutzerobjekten, die wir gerade hier weitergeben . Tatsächlich müssen wir diese Shows auch nicht hinzufügen, da sie zu dieser speziellen Funktion gehören. bei all dieser Komplexität überprüfen möchten, Wenn wir bei all dieser Komplexität überprüfen möchten, welcher unserer Konstruktoren ein bestimmtes Objekt wie Homer erstellt hat, können wir etwas verwenden, das als instanceof bezeichnet wird. Wir können dies im Konsolenprotokoll überprüfen. Wir können prüfen, ob das Homer-Objekt ein Instanceof Charakter ist. Sollte der Wert von wahr sein, da wir Grundlage unseres neuen Charakters sind. Aber wenn wir unseren Benutzer weitergeben würden, wird dieser falsch sein. So macht JavaScript Dinge. Es hat von Anfang an Objekte , von denen wir es erben können. Als Neuling wissen wir nicht einmal, dass dies hinter den Kulissen passiert. Aber wenn wir so etwas tiefer graben würden, können wir verstehen, dass dies so jedes neue Objekt ist , Objekte, die sich auch auf andere Typen wie Arrays und Funktionen beziehen und eine Menge haben von hilfreichen Eigenschaften und Methoden , die wir jedes Mal verwenden können, wenn wir unsere eigenen Objekte erstellen. Wie wir gerade besprochen haben, können wir diese Prototypvererbung bei Bedarf auch durch unsere eigenen Objekte nutzen . 18. Kopieren von Objekteigenschaften: In den vergangenen Videos sind wir ziemlich tief in Objekte mit Dingen wie Objektkonstruktoren und Kopieren und Prototypen eingedrungen. Aber manchmal möchten wir einfach nur die Eigenschaften von einem Objekt auf ein anderes kopieren . Es gibt ein paar verschiedene Möglichkeiten, dies zu tun. Zuallererst haben wir den Basischarakter mit Informationen, die für alle neuen Simpsons-Charaktere gelten könnten , die wir erstellen. Ziemlich generische Informationen, und unten haben wir auch ein Homer-Objekt mit einigen Eigenschaften, die nur für dieses eine Zeichen gelten. Für Homer und auch alle anderen Charaktere, die wir erstellen, müssen wir auch alle Eigenschaften aus dem Basiszeichen zusammenführen . Eine einfache Möglichkeit, dies zu tun, besteht darin, dieses Basiszeichen innerhalb des Homer-Objekts zu referenzieren . Wir haben dies als Eigenschaft hinzugefügt, es im Basiszeichen und dies in der Konsole testen. Wir haben bereits ein Konsolenprotokoll für den Wert von Homer. Wenn wir das öffnen, haben wir die vier ursprünglichen Eigenschaften und wir sehen auch unseren Basischarakter. Das funktioniert völlig gut, aber es erzeugt ein Basischarakterobjekt , das wir öffnen und in das wir eintauchen müssen. Unser Basischarakter ist eine Ebene tiefer verschachtelt als alle unsere anderen Immobilien. Aber es wäre besser, wenn wir all diese Eigenschaften des Basischarakters greifen und sie effektiv neben das stellen könnten diese Eigenschaften des Basischarakters greifen und , was wir bereits haben. Eine Möglichkeit, dies zu tun, besteht darin , Objekte zu verwenden, die wir uns früher angeschaut haben, nämlich die drei Punkte. Übergeben Sie die drei Punkte vor unserem Basischarakterobjekt. Jetzt sehen wir das Basischarakterobjekt nicht das wir eintauchen müssen. Stattdessen sehen wir alle Eigenschaften von Basischaraktern neben unseren Homer-Eigenschaften. Wir könnten diese Technik auch verwenden, um so viele verschiedene Objekte zu verbreiten , wie wir wollten. Wenn wir zum Beispiel einen Homer-Simpson-Charakter mit Superkräften für eine bestimmte Episode hätten einen Homer-Simpson-Charakter mit , könnten wir so etwas machen. Wir könnten ein neues Objekt namens SuperHomer erstellen. SuperHomer müsste auch das Basiszeichen und auch alle vorhandenen Informationen von Homer erben das Basiszeichen und auch . Wir können das auch entfernen. Wir können Spreads verwenden, die in diesen beiden Objekten passieren. Das Basischarakter und auch die vorhandenen Homer-Informationen. Darüber hinaus können wir auch unsere eigenen Eigenschaften übergeben , die für dieses einzelne Objekt spezifisch sind. Zum Beispiel könnten wir festlegen, dass die Kräfte gleich wahr sind, und dies sollte jetzt ein großes Objekt im Browser anzeigen . Lassen Sie uns einfach unser Konsolenprotokoll ändern, um SuperHomer zu sein. Aktualisieren und jetzt haben wir neun verschiedene Eigenschaften für dieses Objekt. Wir haben den Sturz vom Basischarakter, der Vorderseite des Homer-Objekts und auch die auf wahr gesetzten Kräfte. Wir könnten dieses Objekt entfernen oder kommentieren, und wir werden uns nun eine andere Möglichkeit ansehen, die Objekteigenschaften in ein neues Objekt zu kopieren . Dies geschieht mit einer Objektmethode namens assign. Greifen Sie auf unser Hauptobjekt zu, die Methode zuweisen Dies wird zwei Dinge in sich nehmen. Erstens das Zielobjekt , in das Sie kopieren möchten. Wir kopieren es in unser Homer-Objekt, und das zweite ist das Objekt, das Sie kopieren möchten. Verwenden Sie unser Originalbeispiel, um alle Eigenschaften von unserem Basischarakter in Homer zu verschieben . Geben Sie dies als zweiten Wert ein. Im Konsolenprotokoll soll Homer sein. Springe in die Konsole. Dies führt jetzt alle Eigenschaften aus dem Basischarakter in unser Homer-Objekt zusammen. Funktioniert effektiv genau wie der Spread-Operator, den wir vorher nachgeschlagen haben. Auch wenn nötig, können wir dieses neue Objekt in einer Variablen wie MergeDHomer speichern . Dies sollte auch genau genauso funktionieren. Diese zugewiesene Technik und auch die vorherigen sind sehr nützlich und etwas, das Sie oft in JavaScript verwenden können. Es gibt viele Anwendungsfälle, z. B. wenn wir einen Benutzer und eine Bestellung hätten Möglicherweise möchten wir ein Benutzerobjekt an unsere Bestellung anhängen , bevor wir in die Datenbank speichern , damit wir wissen, wer die Bestellung tatsächlich aufgegeben hat. Sie werden wahrscheinlich auch viele eigene Anwendungsfälle finden . 19. CSS Style Objekte: Im DOM-Bereich haben wir unsere eigenen HTML-Elemente erstellt. Dann haben wir uns angeschaut, wie man diesen Elementen mit JavaScript CSS-Styling hinzufügen kann. In der Datei des Styles haben wir unten ein Beispiel dafür, einen einfachen Header-Abschnitt mit einem Titel ohne Fleischburger. Darunter haben wir innerhalb unseres Skripts mehrere Stileigenschaften angewendet. Das funktioniert gut, wie wir im Browser sehen können, aber es kann eine ziemlich lange Art sein, Dinge zu tun. Es ist auch für andere Elemente nicht wiederverwendbar. Eine Lösung dafür besteht darin, ein Stilobjekt zu erstellen das alle CSS-Eigenschaften und -Werte enthält , die wir benötigen. Gehen wir nach unten und wir werden all diese vorhandenen Stile kommentieren und diese innerhalb eines Stilobjekts neu erstellen. Bewahren Sie dies innerhalb einer Variablen namens Styles auf. Sagen Sie, dass dies einem Objekt entspricht, und wir werden diese hier effektiv replizieren. Zuallererst ist das Display gleich dem Wert von flex. Da es sich um ein Objekt handelt, müssen wir dies durch ein Komma trennen und das nächste ist JustifyContent. Da es sich um JavaScript handelt, müssen wir auch diesen Kamelfall machen, JustifyContent und jedes Wort nach dem ersten muss mit einem Großbuchstaben beginnen. Der Wert, dies kann der gleiche sein, dies kann ein Leerzeichen dazwischen sein. Als Nächstes haben wir einen Polsterwert. Wieder als String, Null oben und unten und 10 Pixel links und rechts. Hintergrund. Was haben wir hier? Wir haben einen RGB-Wert. Lassen Sie uns das überschreiben. Endlich die Farbe. Schnappen wir uns den Wert , den wir bereits haben , und fügen Sie ihn ein. Gehen wir zum Browser und aktualisieren Sie es. Wir haben kein Styling angewendet. Jetzt brauchen wir eine Möglichkeit, das Stilobjekt tatsächlich auf unser Header-Element anzuwenden . Genau wie das letzte Video können wir object.assign verwenden. Dadurch werden alle unsere Stilobjekteigenschaften dieses Header-Element kopiert. Unten am unteren Rand des Script-Object.assign. Wir möchten diese auf den Header anwenden. Die Objekteigenschaften , die Sie anwenden möchten, sind unsere Stile. Aber so wie es so ist, funktioniert es nicht, wenn wir den Browser aktualisieren. Der Grund dafür ist genau wie wir es ursprünglich getan haben Anstatt diese auf das Header-Element anzuwenden, müssen wir diese auf header.style anwenden, also at.style und update und es sollte jetzt alles in der -Browser. Im Moment sind Sie vielleicht etwas verwirrt warum eine Objektmethode wie assign an einem Element wie Header arbeitet. Nun, das liegt daran, dass unsere Elemente, wie viele Dinge in JavaScript auch als Objekte eingestuft werden. Wir können dies mit einem Konsolenprotokoll sehen. Wir können den typeof Operator und den Wert von Header verwenden. Dann schauen wir uns an, was in der Konsole passiert. Aktualisieren Sie und Sie können sehen, dass der Header, obwohl es sich um ein Element handelt, eine Art eines Objekts ist. Wenn wir neue Elemente erstellen, erstellen wir tatsächlich Elementobjekte und so können wir Zugriff auf Eigenschaften, Methoden und Ereignisse haben . Wir haben bereits Eigenschaften wie den Zugriff auf die Attribute, die Klassenliste und das innere HTML verwendet wie den Zugriff auf die Attribute, die , um einige zu nennen. Methoden, die wir verwendet haben gehören Queryselector und addEventListener. Diese sind alle für dieses Elementobjekt verfügbar . Aber warum sollte anstelle von regulärem CSS ein Style-Objekt erstellt werden? Nun, CSS ist wahrscheinlich für viele Anwendungsfälle einfach, aber auf diese Weise hat auch seine eigenen Verwendungszwecke. Der wichtigste für mich ist die Tatsache, dass es mit JavaScript gesteuert wird. Wir können Werte dynamisch ändern. Wenn wir zum Beispiel ein Spiel hätten, könnten wir den Hintergrund in Rot ändern , wenn das Spiel vorbei wäre. Wir können einen Count-Down-Flush schneller machen , da er näher ans Ende kommt, und so viele weitere großartige Anwendungsfälle, indem einen dieser Werte dynamisch aktualisieren. 20. Looping mit Objekten: Objekte können viele Werte haben, wie wir wissen, und genau wie bei Arrays ist Looping eine bequeme Möglichkeit, etwas für jede Eigenschaft zu wiederholen. Es gibt ein paar verschiedene Möglichkeiten, wie wir Objekte durchlaufen können , und zuerst schauen wir uns die For-In-Schleife an. In der Datei dieser Lektion haben wir oben eine Konstruktorfunktion, die wir zuvor gesehen haben, um einen neuen Benutzer zu erstellen. Beachten Sie, dass die Prototyp-Ergänzungen kommentiert sind und wir werden bald sehen warum. For-In-Schleife sollte ziemlich vertraut aussehen. Wir haben uns das bereits in der Schleife im Abschnitt angeschaut, aber ich möchte Ihnen etwas anderes zeigen, das damit zusammenhängt. Als Auffrischung sieht es so in unserem Code aus. Es beginnt mit dem Schlüsselwort for, und in diesem Beispiel werden wir unser Homer-Objekt durchlaufen . Wir müssen für jede der Eigenschaften hier eine Variable erstellen , also der Vorname, der Nachname, der Beruf und das Leben. Dies innerhalb einer Variablen oder einer Konstante namens Eigenschaft innerhalb unseres Homer-Objekts. Jetzt öffnen wir einfach die geschweiften Klammern und dann können wir hier drinnen mit dieser Eigenschaft alles tun, was wir wollen. Aber jetzt machen wir ein Konsolenprotokoll, öffnen die Back-Ticks, damit wir unsere Eigenschaftsvariable einfügen können , nämlich unser Eigenschaftsname, z. B. Vorname, Doppelpunkt hinzufügen, und danach könnten wir greifen Sie auch auf den Wert der Immobilie zu. Auch hier fügen wir dies als Variable ein, sodass wir auf unser vollständiges Homer-Objekt zugreifen müssen, und innerhalb der eckigen Klammern übergeben wir die Eigenschaft, von der wir den Wert ermitteln möchten. Speichern Sie dies, aktualisieren Sie es, und wir sehen jede dieser vier Eigenschaften in der Konsole. Wir sehen die tatsächlichen Eigenschaftsnamen wie den Vornamen, und dann wählen wir den Eigenschaftswert aus dem Homer-Objekt aus, z. B. Wir können diese Werte dann verwenden, um Elemente zu konstruieren, um sie jetzt dem DOM hinzuzufügen. Erstens ist eine ungeordnete Liste erforderlich, die wir als Wrapper für alle diese Werte verwenden können. Springen Sie also außerhalb des Skripts zu unserem Body-Bereich, eine ungeordnete Liste und der erste Schritt besteht darin, zu greifen ein Verweis auf unsere Elemente. Const ul ist gleich document.QuerySelector, geben Sie unsere ungeordnete Liste ein. Das gibt uns jetzt zwei Dinge. Wir haben eine Schleife, also durchschleifen wir alle Eigenschaften in unserem Objekt, und jetzt gibt uns dies ein Element, an das wir dies anhängen können. Da es sich um eine ungeordnete Liste handelt, müssen wir für jeden dieser Werte ein neues Listenelement erstellen . Für unser Listenelement erstellen wir dies mit document.createElement (). Ein Element ist in Li. Denken Sie daran, wenn Sie neue Elemente erstellen, dies im Allgemeinen ein dreistufiger Prozess ist. Wir erstellen die Elemente, wir erstellen den Inhalt, wie den Textknoten, und führen diese dann zusammen. Der zweite Teil davon bezieht sich auf den Text, der in unser Listenelement eingeht. Wir machen dies mit document.createTextNode (), replizieren das, was wir in der Konsole gesehen haben. Alles, was wir tun müssen, ist, den Inhalt von hier aus zu kopieren , den Inhalt von hier aus und diesen in unsere Methode einzufügen. Entfernen Sie das Konsolenprotokoll, führen Sie diese zusammen indem Sie zuerst auf unsere Elemente zugreifen und verwenden Sie die Methode namens AppendChild. Wir werden unseren Text weitergeben. Dies hat ein neues eigenständiges Element oder ein eigenständiges Listenelement erstellt , und dann müssen wir diese für jede Schleife zusammenführen oder in unsere ungeordnete Liste einfügen. Genau wie oben holen wir uns unsere ungeordnete Liste und verwenden das AppendChild. Übergeben Sie das Listenelement, das wir gerade erstellt haben. Speichern und aktualisieren. Los geht's und dies ist eine wirklich gute Möglichkeit, unsere Objekte so zu strukturieren, dass sie im Browser angezeigt werden. Aber zurück zu diesem Prototyp , den Sie zuvor erwähnt haben , der derzeit kommentiert wird. Wenn wir das Kommentieren abkommentieren, speichern wir dies und aktualisieren Sie den Browser jetzt erneut. Wir sehen jetzt auch diese beiden Prototypwerte hier. Dies ist etwas, auf das wir achten müssen, und wenn wir diese Prototypen nicht durchlaufen wollen, was oft der Fall ist, können wir sie mit einer Objektmethode namens hasOwnProperty () beseitigen , was wir innerhalb der Schleife verwenden können. Gehen wir zu unserer For-In-Schleife und fügen ganz oben eine if-Anweisung hinzu. Wir werden homer.hasownProperty () übergeben und unsere Eigenschaftsvariable übergeben. Was wir hier tun, ist, dass wir auf unser vollständiges Homer-Objekt zugreifen und dann jede Eigenschaft einzeln überprüfen. Wir prüfen, ob die bestimmte Eigenschaft zu diesem Homer-Objekt gehört oder ob sie über den Prototyp vererbt wird. Wenn dies zutrifft, möchten wir unseren Code unten ausführen. Wenn nicht, wird es ein Prototypwert sein und daher ignoriert. Wir können dies jetzt fehl am Platz schneiden und dies in unsere if-Aussagen einfügen. Aktualisieren, und dies ist eine Möglichkeit, unsere geerbten Prototypwerte zu ignorieren. Eine andere Möglichkeit, Objekte zu schleifen, besteht darin, sie zuerst in Arrays umzuwandeln. Object verfügt über einige Methoden denen Sie dies tun können, und je nachdem, ob Sie auf die Eigenschaft des Objekts zugreifen möchten , den Wert beider als Paar. Beginnen wir mit einer Methode, die zuerst Einträge ganz unten genannt wird , in ein Konsolenprotokoll für objects.entries () und unserem Objektwert von Homer platzieren . Testen Sie dies aus, springen Sie in die Konsole und es kehrt immer noch im Array zurück. Dies kehrt nicht nur wieder im Array zurück, jede der Eigenschaften ist auch ein Array. Es enthält den Eigenschaftsnamen und auch den Wert, wie Sie hier sehen können. Diese Methode enthält die Prototypwerte nicht wie bei for in. Wenn wir dies verwenden würden, könnten wir die if-Aussagen ignorieren , die wir gerade hier haben. Um dies auszuprobieren und dasselbe Beispiel beizubehalten, geben zum Beispiel nach oben und kommentieren Sie dies dann. Fügen Sie dies direkt unten ein. Ich muss erwähnen, dass wir diese if-Aussage nicht brauchen, da wir keinen der geerbten Prototypen eliminieren müssen. Entfernen Sie den Wrapper und lassen Sie diese vier Zeilen im Inneren. Dieses Mal, anstatt es über unser Homer-Objekt zu schleifen, werden wir jetzt object.entries verwenden. Wir werden dies verschieben, und genau wie im Konsolenprotokoll, indem wir Objekte ersetzen, Dateneinträge mit dem Wert von Homer. Speichern und aktualisieren. Im Browser sehen wir die Werte von undefined. Dies ist möglicherweise zunächst nicht offensichtlich, warum dies der Fall ist, aber das liegt an der Art der Schleife, die wir verwenden. Wir verwenden derzeit eine for-in-Schleife, die für Objekte verwendet wird. Aber jetzt konvertieren wir Homer in ein Array. Dies bedeutet jetzt, dass wir eine kleine Änderung vornehmen müssen und stattdessen eine for-Schleife verwenden müssen, also ändern Sie sich, um von zu sein, und erinnern Sie sich jetzt an diese Eigenschaft, anstatt eine einzelne Eigenschaft wie zuvor zurückzugeben zeigt nun auf ein Array, das zwei Werte enthält, so dass unser Vorname und Homer. Was wir stattdessen tun können ist die D-Struktur mit dem Array, das uns den Schlüssel und auch den Wert gibt. Der Schlüssel ist in diesem Fall gleich dem Vornamen, und der Wert wird für jeden unserer Artikel dem Homer entsprechen . Gib das ein. Zuallererst der Schlüssel, und dann geben wir auch unseren Wert ein. Spar dir das auf. Erneut laden. Dies funktioniert wieder wie erwartet. Dies ist eine wirklich gute Art des Loopings, was den Prototyp nicht beinhaltet. Wenn wir wollen, können wir auch auf die Schlüssel zugreifen, alle Werte auch einzeln. Die Art, das zu tun. beispielsweise in unserem Konsolenprotokoll Wenn wir beispielsweise in unserem Konsolenprotokoll nur auf die Schlüssel wie Vorname und Nachname zugreifen möchten , können wir eine Objektmethode namens keys verwenden, bei der wir unser Homer-Objekt übergeben und es gibt unsere vier Schlüssel ohne die Werte. Wenn wir andererseits nur auf die Werte und nicht auf die Schlüssel zugreifen wollten , können wir object.values verwenden, und dies wird dies zurück in die Konsole zurückgeben. Dies wird auch häufig in if-Anweisungen wie diesen verwendet. Wir könnten sagen, ob object.keys (), unser Objekt übergeben und auf die Eigenschaft length zugreifen größer als Null ist. Wir können dann drin etwas tun. Dies prüft, ob ein Objekt vor dem Ausführen eines Codes nicht leer ist , und es hängt nur davon ab, ob Sie entweder auf den Schlüssel oder den Wert oder auf beide zugreifen möchten . 21. Dynamische Objekte: Dieses Video wird konvertiert, um dynamischere Objekte zu erstellen. Damit meine ich, dass sowohl der Schlüssel als auch der Wert mit JavaScript geändert werden können. Wenn wir neue Objekte erstellen, genau wie bei diesem Home-Objekt, verwenden wir einen einfachen primitiven Wert wie Strings, aber unsere Programme werden nicht immer so starr sein. Möglicherweise müssen wir auch Daten einfügen, die sich ändern können, z. B. eine Variable. Auch bei den Schlüsselnamen wie FirstName und LastName und Beruf. Dies könnte auch alles dynamisch sein. Ich zeige dir jetzt einige Möglichkeiten, dies zu tun. Erstens, die traditionelleren Wege und dann ein Weg, der in ES2015 eingeführt wurde. Wir fügen zunächst Variablen als Werte ein, und das ist ziemlich einfach. Lassen Sie uns zuerst eine Variable namens FirstName erstellen und diese auf Homer setzen. Wir können diese Variable dann innerhalb unseres Immobilienwerts referenzieren , wenn wir unseren neuen Homer-Benutzer erstellen. Denken Sie daran, da wir uns jetzt auf eine Variable und nicht auf eine Zeichenfolge beziehen , müssen wir die umgebenden Anführungszeichen entfernen. Speichern Sie dies und aktualisieren Sie es. Das funktioniert genau wie zuvor, aber dieses Mal weisen wir jetzt auf eine Variable hin. Wir wissen bereits, dass wir auch so neue Immobilien hinzufügen können. Wir können auf unser Objekt zugreifen, auf die Likes-Eigenschaft und diese auf eine Zeichenfolge setzen. Speichern und aktualisieren, und dies wird auch zu unserem Objekt hinzugefügt. Derzeit ist der Wert von Likes auf eine Zeichenfolge festgelegt. Wir möchten vielleicht auch, dass dies auch dynamisch ist. Lassen Sie uns versuchen, dies als Variable und nicht als String festzulegen . Entfernen Sie die Zitate. Ich werde dies als Variable direkt oben erstellen, const likes, und füge unsere Zeichenfolge in die hinteren Ticks ein oben erstellen, const likes, und füge unsere Zeichenfolge in , damit wir unsere Variable einfügen können , die alle unseren FirstName übergibt. In diesem Fall wird es homerlikes sagen, gefolgt von einem bestimmten Wert. Ich sende FirstName, einen Text von Likes, und jetzt verweisen unsere Likes hier auf unsere Variable, die jetzt im Browser angezeigt wird. Es berücksichtigt auch unsere FirstName-Variable und platziert sie als Teil der Zeichenfolge. Wenn wir mehrere Likes hätten, möchten wir sie vielleicht auch nummerieren. Wir können damit beginnen, einen Anfangswert zu schaffen. Wir sagen, dass die Zahl gleich einem Anfangswert von eins ist. Hängen Sie dann diesen Zahlenwert an unsere Variable an. Wie wir erwarten würden, haben wir nur die einzige Nummer 1. Wenn wir dies duplizieren und dies in einen zweiten Wert wie Donuts ändern würden, könnten wir diese Zahl mit Plus Plus um eins erhöhen. Dies wird für jeden unserer Werte erhöht. Denken Sie daran, dass all dies mit unserer Objektkonstruktorfunktion oben konstruiert wird . All dies können wir auch mit dem Objektliteralansatz tun. Lassen Sie uns unten ein Objektliteral erstellen, und wir nennen es homer2 und setzen es auf ein literales Objekt, in dem wir unsere Eigenschaften wie FirstName festlegen oder wir auch unsere FirstName-Variable auch. Melden Sie dies bei der Konsole an. Wie Sie sehen können, kann unsere Variable auch mit diesem Ansatz eingefügt werden. Dies mag jedoch etwas verwirrend aussehen , da wir hier auf alle FirstName-Variablen verweisen, aber auch der Eigenschaftsname zeigt immer noch auf diese FirstName-Variable. Warum sehen wir diese Ausgabe als String und nicht als Wert von Homer? Nun, für den Schlüssel müssen wir diesen Namen nicht in Anführungszeichen umwickeln. Dies wird immer als String angezeigt. Wie würden wir diese Eigenschaft mit dem Namen dynamisch machen , wenn wir eine Variable nicht einfach wie diese verwenden können? Nun, eine Option wäre nur, ein leeres Objekt ohne darin enthaltene Eigenschaften zu erstellen . Dann könnten wir Eigenschaften wie oben mithilfe der eckigen Klammern hinzufügen oben mithilfe der eckigen Klammern oder alternativ eine ES2015-Funktion namens berechnete Eigenschaftsnamen verwenden . Wir könnten die eckigen Klammern direkt in unseren Objekten benutzen . Umgeben Sie also unsere FirstName-Eigenschaft mit den Klammern, die jetzt besagen, dass der Code in diesen Klammern nicht als String behandelt werden soll. Stattdessen wird es als JavaScript-Ausdruck ausgewertet, was bedeutet, wenn wir dies jetzt im Browser anzeigen , sehen wir jetzt den Wert von Homer , der unsere Variable ist. Sogar diese vollständige Kontrolle über den Eigenschaftenschlüssel und auch den Eigenschaftenwert mit JavaScript. Wir könnten unsere Immobilien auch so einziehen wie wir es von oben getan haben. Wir könnten ohne das Homer-Präfix darauf zugreifen , fügen Sie dies ein. Der einzige Unterschied ist eher als die Gleichen, wir müssen dies über einen Doppelpunkt ändern. Wir können auch unsere zweite von Donuts hinzufügen. Füge ein Komma hinzu, platziere einen Doppelpunkt. Probieren wir das im Browser aus. Mach das auf. Dies wird jetzt eingefügt, aber anstelle der Werte von eins und zwei sehen wir die Werte von zwei und drei, da wir dies bereits oben erhöht haben, können wir diesen auskommentieren. Es führt uns zurück zu unserem ursprünglichen Beispiel. Auf diese Weise können wir berechnete Eigenschaftsnamen mit unseren Objekten verwenden , um sowohl den Schlüssel als auch mithilfe von JavaScript sowohl den Schlüssel als auch den Wert dynamischer zu gestalten. 22. Primitive & Referenztypen: Wir verwenden häufig Variablen beim Codieren und JavaScript, um unsere Daten zu speichern. Aber wenn wir etwas tiefer gehen, gibt es einige wichtige Konzepte zu verstehen und das sind die wir Werte, die wir speichern, in zwei Gruppen fallen. Um dies besser zu verstehen, möchte ich zuerst aktualisieren, was wir bereits über Datentypen wissen. Wir haben primitive Werte, bei denen es sich um einfache Werte handelt, z. B. eine Zeichenfolge oder eine Zahl , die keine Methoden hat. Wir haben auch Objekttypen. Diese beiden Gruppen beziehen sich direkt auf das, was wir uns jetzt ansehen werden, und dies speichert primitive und Referenztypen. Eine String-Variable wäre primitiv, und ein Objekttyp, wie eine Array-Variable würde als Referenztyp klassifiziert. Beide Typen beeinflussen das Verhalten von Werten, wenn wir sie weitergeben und vergleichen. Lassen Sie uns zuerst in unser Starterprojekt einsteigen und einen Blick auf die Primitive werfen. Im Skript für die Datei dieser Lektion erstellen wir eine neue Variable namens Dog und setzen diese auf eine Zeichenfolge. Erstellen Sie als Nächstes eine zweite Variable namens NewDog, und wir setzen diese auf unsere ursprüngliche Hundevariable. Diese ist im Grunde eine Kopie unserer ersten Variablen. Dann werden wir NewDog neu zuweisen, um etwas anderes zu sein. Denken Sie daran, dies zu tun, besteht darin , unseren Variablennamen auszuwählen und diesen auf einen neuen Wert festzulegen. Als nächstes müssen Sie einen schnellen Test mit einem Konsolenprotokoll durchführen , beginnend mit unserer ersten Hundevariablen und dann einem zweiten Konsolenprotokoll für unseren neuen Hund. Mal sehen. Nun, das ist in der Konsole eingefroren . Wir sehen den Wert von Pudel , den Sie von unserem ersten Konsolenprotokoll erwarten würden, und das zweite Konsolenprotokoll von NewDog. Obwohl dieser ursprünglich die Variable Pudel zugewiesen wurde, wurde dies aktualisiert, um den Text von Labrador zu sein. Nichts Unerwartetes hier, obwohl wir ursprünglich eine Variable kopiert haben, ist die neue immer noch ein separater Wert, völlig unabhängig vom Original. Grundsätzlich können wir den ursprünglichen Hund oder den neuen Hund modifizieren und sie werden sich nicht gegenseitig beeinflussen. Dies ist das Verhalten von Primitiven. Die Variable zeigt auf den tatsächlich gespeicherten Wert. Das Speichern von Objekttypen verhält sich unterschiedlich. Lassen Sie uns ein Beispiel mit einem Objekt machen , das wir genauso kopieren können, wie wir es hier getan haben. Zunächst erstellen wir unsere Variable namens Laptop 1 und setzen diese auf ein Objekt, das natürlich ein Objekttyp ist. Die Eigenschaften oder Marken und die darin enthaltenen Daten spielen keine Rolle. Das Modell hat einen beliebigen Wert als String festgelegt, und dann direkt darunter erstellen wir eine Kopie davon, genau wie wir es mit unserem NewDog getan haben. Dieser wird Laptop 2 genannt, was dem Laptop 1 entspricht. die gleiche Weise, wie wir es ganz oben mit unseren Primitiven gemacht haben, aktualisieren oder weisen wir unseren Laptop 2 erneut zu, dann fügen wir eine neue Eigenschaft hinzu, z. B. die Größe. Diesmal ist für die Konsolenprotokolle der erste Laptop 1. Ich werde auch sehen, wie hoch der Wert von Laptop 2 ist. Teste das aus. Aktualisieren. Wir werden sehen, dass diese beiden Werte genau gleich sind. Dies mag sehr seltsam erscheinen, da wir die Eigenschaft size sowohl auf Laptop 1 als auch auf Laptop 2 haben, obwohl wir dies nur zu unserer zweiten Variablen hinzugefügt haben. Das bedeutet, dass dies eine Verbindung zwischen Laptop eins und Laptop 2 zu sein scheint . Als wir unsere Variablen erstellt haben, die in einem Primitiv direkt darüber mit einer Zeichenfolge gespeichert sind, zeigt die Variable auf den tatsächlichen eindeutigen Wert, der im Speicher gespeichert ist, und dies sind alles eindeutige Werte. Wenn wir jedoch eine Variable erstellen, die einen Objekttyp enthält, wird das Objekt immer noch im Speicher gespeichert. Diese Variablen, wie Laptop 2, enthalten jedoch einen Verweis auf die Position dieses Objekts nicht auf den tatsächlichen Wert, daher den Referenztyp des Namens. Hier erstellen wir unseren ursprünglichen Laptop, und jedes Mal, wenn wir eine Kopie wie Laptop 2 erstellen, zeigt alles auf dasselbe Originalobjekt. Da alle Kopien auf denselben Wert verweisen, wird daher auch das Original aktualisiert, wenn Sie eine von ihnen ändern , z. B. hier. Einige andere Sprachen erlauben es uns, dieses Verhalten zu ändern. Aber mit JavaScript ist es behoben. Genau als eine kurze Zusammenfassung und klären Sie vielleicht, ob Sie sich nicht sicher sind. Wenn wir eine Variable erstellen, die in einem Primitiv gespeichert werden soll , z. B. eine Zeichenfolge, zeigt die Variable auf einen tatsächlichen eindeutigen Wert, der im Speicher gespeichert ist, was bedeutet, dass unser Hund und auch unser NewDog vollständig sind einzigartige und unabhängige Werte. Wenn wir jedoch einen neuen Objekttyp basierend auf einem Originalobjekt erstellen , enthält die kopierte Version einen Verweis auf die Position des ursprünglichen Objekts im Speicher, daher den Namenreferenztyp. Dies ist etwas, das Sie wahrscheinlich nicht allzu sehr interessieren, bis wir vielleicht auf ein Problem stoßen , bei dem Sie ein Objekt ändern und sich alle unerwartet ändern und Sie nicht wissen, was verursacht das Problem. In diesem Sinne werden wir als Nächstes behandeln, wie wir zwei Objekte vergleichen können. 23. Objekte vergleichen: Was wir im vorherigen Video gelernt haben , ist , dass ein primitiver Wert eindeutig ist und durch einen Wert gespeichert wird und ein Objekttyp als Referenz gespeichert wird. Dies wird uns jetzt helfen, das Verhalten, das wir beim Vergleich zweier Objekte sehen werden, besser zu verstehen zu . In unseren Starterdateien haben wir zwei ähnliche Objekte mit den gleichen Eigenschaften. Sie haben beide die Marke und auch das Modell und auch die gleichen Werte. Wir werden diese verwenden, um Qualität zu vergleichen. Aus vernünftiger Vermutung würde man denken, dass sie, wenn wir beide vergleichen, als echtes Match angesehen werden. Dies wäre eine faire Annahme, da beide die gleiche Marke und auch das gleiche Modell haben . in die Konsole springen, wenn wir einen Vergleich mit Primitiven machen, ist das ziemlich einfach. Wenn 1 gleich 1 ist, würde dies den Wert „true“ zurückgeben. Dies ist einfach, da Primitive ihren eigenen eindeutigen Wert im Speicher gespeichert haben . Vergleich von Werten funktioniert wie erwartet. Objekte sind jedoch etwas weniger offensichtlich. Wie zu erwarten ist, führt der Vergleich desselben Objekts wie dieses zu „true“. Laptop 1, wenn wir das mit sich selbst vergleichen, nämlich Laptop 1, ist dies auch der Fall. Aber wenn wir Laptop 1 so ändern, dass er dem Laptop 2 entspricht, obwohl diese beide die gleiche Marke und dasselbe Modell haben, erhalten wir den Wert falsch zurück. Obwohl diese beiden Objekte genau denselben Inhalt haben , werden sie nicht als gleich angesehen. Der Grund dafür ist, dass es sich um Referenztypen handelt. Denken Sie daran, dass eine Variable des Referenztyps auf eine Position im Speicher zeigt, nicht auf den tatsächlichen Wert. Hier vergleichen wir den Inhalt dieser beiden Objekte nicht wirklich . Stattdessen vergleichen wir zwei verschiedene Speicherorte. diesem Grund ist der Vergleich falsch. Ich weiß, dass das etwas verwirrend erscheinen kann, aber so funktioniert JavaScript. wir zu dem zurückkehren, was wir im vorherigen Video angeschaut haben, was glauben Sie, wenn wir ein Objekt kopiert haben? Zum Beispiel, wenn wir die Konstante mit Laptop 3 einstellen und diese auf Laptop 1 einstellen. Nun, lass uns das ausprobieren. Wir können prüfen, ob der Laptop Nummer 1 dem Laptop 3 entspricht. Denken Sie daran, hier erstellen wir eine Kopie und dies führt zu einem Wert von true. Nun, dieser kommt wieder wahr, denn als wir Laptop 3 erstellt haben, haben wir den Inhalt von Laptop 1 nicht kopiert. Stattdessen zeigt Laptop 3 jetzt auf unseren ursprünglichen Laptop 1 Speicherort im Speicher. Unabhängig davon, wie alle diese Variablen hinter den Kulissen gespeichert werden, benötigen wir möglicherweise noch eine Möglichkeit, die Eigenschaften zweier Objekte zu vergleichen . Wir brauchen eine Möglichkeit, Laptop 1 mit Laptop 2 zu vergleichen, was wahr sein wird. Eine Möglichkeit, dies zu tun, besteht darin, eine JSON-Methode namens stringify zu verwenden . Wir werden uns mehr mit JSON-Daten befassen. Stringify ist eine Möglichkeit, ein Objekt in eine Zeichenfolge zu konvertieren , und es sieht so aus. Beim Parsen von JSON, einer Methode namens stringify, werden wir den Wert von Laptop 1 analysieren. Wenn wir dies in der Konsole testen, können wir sehen, dass unser Objekt in eine Zeichenfolge konvertiert wird. Vergleich einer String-Version von Laptop 2 mit einer String-Version von Laptop 2 wird unseren Vergleich erheblich erleichtern. Wir machen das Gleiche. Wir prüfen, ob das gleich json.stringify ist. Dieses Mal analysieren wir den Wert von Laptop 2. Springe in die Konsole. Dies ist gleich wahr, da unsere beiden String-Werte genau gleich sind. Eines der Probleme bei der Verwendung dieser Methode ist jedoch die Eigenschaften in genau der gleichen Reihenfolge sein müssen , damit dies funktioniert. Wenn Laptop 1 und die Marke unsere zweite Eigenschaft sind, würde dies zu Falsch führen. Um dies zu beheben, haben wir ein paar verschiedene Möglichkeiten, dies zu überprüfen. Der erste, der nur wirklich gut ist , um einfache Objekte wie diese zu vergleichen , ist, dass wir eine Funktion namens Check Equality erstellen können, die unsere beiden Objekte manuell überprüfen wird. Wenn wir das aufrufen, analysieren wir Objekt 1 und Objekt 2. Dann geben wir den Wert von if object 1 zurück. Die Marke ist gleich Objekt 2. Das ist unser erster Vergleich. Danach möchten wir auch prüfen, ob das Modell auch gleich ist. Das doppelte kaufmännische Und-Zeichen, prüfen Sie, ob object1.model gleich object2.model ist. Das ist ein langer Weg. Es ist eine manuelle Art Dinge zu tun, aber es würde funktionieren. Wir können dies überprüfen indem wir unsere Check Equality Funktion aufrufen. Unsere beiden Objekte werden Laptop 1 und auch Laptop 2 sein, das sind die beiden, die Sie vergleichen möchten. Um zu sehen, was der Rückgabewert ist, können wir dies in unser Konsolenprotokoll analysieren und aktualisieren. Objekt 1 ist nicht definiert, ich müsste nur sicherstellen, dass diese ein j haben, aktualisieren, und dies ist der Wert von true. Jetzt spielt es keine Rolle , in welcher Richtung sich unsere Immobilien in jedem der Objekte befinden. Wir können immer noch einen einfachen oder manuellen Vergleich von diesen durchführen. Eine andere Möglichkeit besteht darin, Objektmethoden für den Zugriff auf die Schlüssel und Werte zu verwenden . Wir haben uns diese bereits im Looping with Object Video angeschaut . Denken Sie daran, dass wir auf das Objekt zugreifen, ein Kapital O. Wir können dann die Schlüssel wie Modell und Marke oder Laptop 1 so hochgehen Marke oder Laptop 1 . Es gibt Modell und Marke. Wir können das Gleiche auch für object.values tun. Mit diesem Ansatz können wir unsere Funktion zur Überprüfung der Gleichstellung für alle Schlüssel und Werte ändern unsere Funktion zur Überprüfung der Gleichstellung für und prüfen, ob wir eine Übereinstimmung haben. Auf diese Weise bedeutet auch, dass die Reihenfolge der Eigenschaften nicht wichtig ist wie bei der ersten stringify-Methode. Wie Sie sehen können, können Objekttypen eine komplexe Sache sein. Wenn Sie nicht verstehen, wie sie in JavaScript funktionieren, braucht es nur ein bisschen Erfahrung, um sich daran zu gewöhnen. Aber ich erwarte nicht, dass du dich das erste Mal an all das erinnerst. Aber wenn Sie sich solcher Dinge nur bewusst sind, wird Ihnen in Zukunft wirklich helfen , wenn Sie auf objektbezogene Probleme stoßen. 24. Abschnitt Einführung: In Zukunft haben wir ein großartiges Projekt , dem Sie arbeiten können, und das wird Ihnen viel Übung mit dem geben was wir bisher gelernt haben. Dies wird unser Projekt sein , das Speedy Chef heißt. Die ganze Idee ist, dass wir Pizzen kochen, die per Bestellung durchkommen , und versuchen, so viele wie möglich zu erledigen, also mit dem Koch und wir können das Spiel starten, das den Service für die Küche und dann können wir sehen, wie unsere Bestellungen auf der rechten Seite vorbeikommen. Wenn wir anfangen wollen, an einer Bestellung zu arbeiten, klicken wir einfach auf eine und sie zieht sie dann in den Abschnitt Working on, uns sagt, welche Pizzen wir herstellen müssen. Für dieses Beispiel brauchen wir einen Schinken und Ananas und zwei Peperonis. Derzeit fangen wir mit dem Schinken und der Ananas an. Gehen Sie die Schritte der Methode genau hier durch und der erste ist das Rollen des Teigs. Klicken Sie hier an. Wir müssen dann unsere Sauce, Pfeffer, Käse hinzufügen und 12 Stück Schinken hinzufügen. Endlich 12 Stück Ananas und das wird alles in unserer Rubrik hier aktualisiert. Sobald wir fertig sind, können wir dies in den Ofen geben und wenn Sie einen Fehler machen würden, können wir dies auch dem Abfall hinzufügen. Klicken Sie darauf und dann hinter den Kulissen überprüft es auch, um sicherzustellen, dass wir alle richtigen Zutaten haben , die wir für unsere Pizza benötigen. Es gibt einen Schinken und eine Ananas, die in den Ofen gehen. Wir können zu den Peperoni übergehen, und sobald wir damit fertig sind, können wir unsere Bestellung abschließen und mit der nächsten übergehen. Außerdem müssen wir den Überblick behalten , da diese Bestellungen im Laufe der Zeit immer wieder eingehen werden . Dies ist ein einigermaßen großes Projekt im Vergleich zu dem, was wir bisher gebaut haben. Aber das meiste davon wirst du schon wissen. Es geht nur darum, ein kleines Feature nach dem anderen zu erstellen , und es wird Ihnen vollkommen gut gehen. Auf dem Weg dorthin gebe ich Ihnen eine Reihe von Aufgaben, um Dinge selbst auszuprobieren, aber keine Sorge, Sie sind nicht auf sich allein gestellt. Ich werde auch jede Phase durchlaufen, damit wir wie immer vergleichen und uns daran erinnern können , dass es mehrere Möglichkeiten gibt, Dinge anzugehen. Wenn wir beide verschiedene Lösungen entwickeln, die beide funktionieren, ist das in Ordnung. In den Starterdateien haben wir einen Basisstarter mit unserer Indexseite, der das gesamte ursprüngliche Layout hinzufügt, das wir benötigen. Wir haben auch etwas Styling in unseren Stylesheets und das bedeutet nur, dass wir direkt in unser JavaScript einsteigen und uns darauf konzentrieren können. Obwohl es genauso aussieht wie das Abschlussprojekt, funktioniert noch nichts und wir werden das alles während des Unterrichts codieren. Als Starter habe ich auch die pizza.svg und auch eine JavaScript-Datei eingefügt und auch eine JavaScript-Datei eingefügt , die auf unserer Indexseite verlinkt ist, die drei Arrays enthält. Diese drei Strahlen werden uns viel Tippen ersparen. Zuerst ist ein Pizza-Array und hier haben wir verschiedene Pizza-Objekte mit dem Pizza-Namen, eine Methode zur Herstellung dieser Pizza und auch die erforderlichen Schritte, die wir im Projekt verwenden, um zu überprüfen ob der Küchenchef machte die richtige Pizza und legte die Zutaten auch in der richtigen Reihenfolge auf. Dann kurz darunter ein paar Musterbestellungen, um das Spiel in Gang zu bringen und wir werden diese auch dynamisch generieren. Endlich eine Liste von Zutaten, wir in der Küche benötigen. Großartig, also ist das alles jetzt bereit zu gehen. Öffnen Sie diesen Projektordner im Browser und springen Sie dann in die nächste Lektion, in der wir daran arbeiten diese Bestellungen im Browser aufzulisten. 25. Aufträge: Dieses Video hat nur ein Hauptziel und dies besteht darin, alle Bestellungen zu durchlaufen und im Browser anzuzeigen. Denken Sie daran, dass direkt oben, mit diesem Ordner zur Verfügung gestellt wird , das älteste Array ist, das wir im Browser durchlaufen und anzeigen werden . Der Standort dafür wird auf der rechten Seite im Seitenbereich vorbei sein auf der rechten Seite im Seitenbereich vorbei . Auf der Indexseite haben wir zwei Hauptabschnitte. Wir haben diesen Hauptwrapper und dieser enthält den gesamten Inhalt, der den weißen Hintergrund hat. Dann beiseite mit der Idee der Befehle. Im Moment hat dies nur eine Überschrift der Stufe 3. Aber was wir tun werden, ist, all diese Bestellungen zu durchlaufen und diese in diesen Abschnitt zu platzieren. Um dies zu tun, erstellen wir eine Funktion namens CreateOrdersList. Diese Funktion wird das obige Orders-Array durchlaufen . Für jedes dieser Elemente im Array erstellen wir ein div, das genau wie in diesem Abschnitt aussieht. Bestimmte Teile davon werden dynamisch sein. Zum Beispiel haben wir die Bestellnummer. Dies wird dynamisch sein, zusammen mit dem Namen der Pizza und auch der Menge für jede Zeile. Sie müssen sich über diese Kommentare keine Sorgen machen. Dies sind nur ein visueller Leitfaden, der uns eine Vorstellung davon gibt, was wir tun werden. Wir beginnen unten, indem wir unsere Funktion erstellen. Die Funktion heißt CreateOrdersList , das Funktionsschlüsselwort. Die nächste Sache ist, jeden dieser Bestellungen zu durchlaufen. Wir wissen, wie das geht. Wir können eine Schleife wie forEach verwenden. Schnappen Sie sich unser Auftragsarray forEach. Denken Sie daran, dass forEach für jedes Element in unserem Array eine Funktion ausführen wird . Orte funktionieren direkt im Inneren. Wir geben jedem dieser Artikel den Wert der Bestellung. Jetzt müssen wir unsere Elemente im Grunde wie oben für jede dieser Bestellungen konstruieren unsere Elemente im Grunde wie . Wir beginnen damit, diesen Haupt-Wrapper zu erstellen, der das div ist. Wir fügen eine Klasse mit dem Namen Order Wrapper hinzu. Wir werden uns im Inneren an unseren Inhalten arbeiten . Wir wissen, wie man Elemente schafft. Wir verwenden document.createElements. Wie im Tag-Namen der Elemente , der ein div innerhalb einer Variablen oder Konstante namens orderwrapper ist. Fügen Sie dann unseren Klassennamen hinzu, indem Sie den Variablennamen von OrderWrapper auswählen. Die Eigenschaft namens ClassName. Wie wir oben sehen, wird dies Order_Wrapper sein. Also fügen wir einfach einen Kommentar hinzu. Dies ist der Hauptwrapper. Danach fügen wir einen Kommentar hinzu. Dies wird darin bestehen, die Bestellnummer hinzuzufügen. Dies ist unser erster Abschnitt in unserem Order Wrapper. Dies wird eine Stufe 4 unserer Überschrift sein. Bewahren Sie dies in einer Konstante auf. Ich erinnere mich, dass wir beim Erstellen von Elementen wie diesen das eigentliche Element und dann den darin enthaltenen Inhalt erstellen müssen . Wir brauchen also zwei Variablen. Die erste ist OrderNumber L, das ist Regalelemente. Also document.createElements. Wir brauchen ein Level für den Weg. Als nächstes der Text, der hineingehen wird, und dies ist die Bestellnummer. Der konstante Name der Bestellnummer und wir erstellen diesen mit document.createTextNode. Da dies dynamisch sein wird , weil jede Bestellung eine andere Nummer hat, die wir von dieser eindeutigen ID abrufen werden. Wir platzieren dies in die Backticks, um dies dynamisch zu machen. Erstens der Ordnungstext, der gerade hier dieser Teil ist, gefolgt von einem dynamischen Wert. Der dynamische Wert kann mit dem Dollarsymbol und den geschweiften Klammern eingefügt werden . Zuerst wählen wir unsere individuelle Bestellung aus, die in dieser Variablen gespeichert ist, und dann die Eigenschaft von ID. Wie immer haben wir beim Erstellen eines Elements genau wie dieses zwei eigenständige Informationen, die beide zusammenführen müssen. Wir tun dies, indem wir auf das übergeordnete Element zugreifen, nämlich OrderNumberElement.appendChild, wo wir unseren tatsächlichen Inhalt, nämlich die Bestellnummer, übergeben werden . Das lässt uns jetzt mit unserem div zurück, welches der Wrapper ist. Dann unser erstes Element, das unsere Überschrift der Stufe 4 ist, aber wir müssen diese Überschrift immer noch unserem Wrapper hinzufügen. Schnappen Sie sich den Order_Wrapper und dann verwenden wir erneut ApendChild, das unser Bestellnummernelement aufnehmen wird. Wir haben also den ersten Abschnitt gerade hier, und der nächste Teil besteht darin, unsere eigene Bestellliste zu erstellen. Ein kurzer Kommentar, damit wir wissen, was wir hier tun, von toller Pizza UL für jede Bestellung, und der Wrapper dokument.CreateElements. Die Elemente waren eine ungeordnete Liste. Platziert in eine Konstante namens Pizza-Liste. Dies gibt uns jetzt eine ungeordnete Liste, die der Hauptwrapper für alle Pizzen ist. Denken Sie jedoch daran, dass wir mehrere Listenelemente haben können da jede Bestellung möglicherweise mehr als eine Pizza enthält. Da unsere Bestellungen also mehrere Pizzen in einem Array enthalten, müssen wir erneut eine Schleife wie für jeden machen. Um dies zu tun, springen wir wieder in unsere individuelle Bestellung ein. Wir wählen das Array aus, das Pizzen genannt wird. Verwenden Sie die für jede Schleife , um eine Funktion für jeden Gegenstand oder jede Pizza innerhalb des Arrays auszuführen , speichern Sie diese in einer Variablen namens Pizza. Dann können wir damit arbeiten, jeden dieser Elemente zu konstruieren. Jeder dieser Elemente wird ein Listenelement sein. Aber zuerst müssen wir diesen Inhalt im Inneren erstellen. Wir haben die Menge wie eine und dann einen Bindestrich, dann ein Spanelement gefolgt vom Namen jeder dieser Pizzen. Springen Sie in unsere Funktion und für jedes dieser Elemente erstellen wir ein Span-Element, um unseren Titel zu umschließen und diesen in einer Konstante zu speichern. Dies ist die Bestellmenge L, also document.createElements. Elemente werden die Spanne sein und dann die Menge jedes einzelnen dieser Elemente, document.createTextNode. Dieser Abschnitt muss Dynamik sein oder in den Backticks platziert werden. Fügen Sie eine Variable ein. Wir können auf die Menge zugreifen, indem wir zuerst unsere Pizza auswählen. In jeder dieser Pizzen hat, wenn wir uns das Array ansehen, wenn wir uns das Array ansehen, eine Eigenschaft namens quantity. Wir werden bald auch den Namen des Eigentums verwenden. Für diesen ist das pizza.quantity, gefolgt von einem Strich kurz danach. darüber nachdenken, kann es etwas einfacher sein, wenn wir diese Menge einfach in unsere Spanne aufnehmen. Anstatt sie draußen zu haben, legen wir dies vielleicht in ein Element, anstatt es alleine draußen zu haben. Wir tun dies, indem wir auf die Bestellmengenelemente.appendChild zugreifen , das in der Mengenvariablen enthalten ist, gefolgt von unserem PizzaName. Für unseren PizzaName muss dies auch in ein Spanelement und dann den Inhalt darin gewickelt werden . Wir müssen genau das gleiche tun wie oben, wir erstellen eine Konstante namens PizzaNamel document.createelement. Element ist eine Spanne gefolgt von dem PizzaName , den wir mit Text-Knoten erstellen müssen, schnappen Sie sich unsere individuelle Pizza. Wie wir es zuvor gesehen haben, haben wir dann die Menge gefolgt von der name-Eigenschaft. Wir können darauf mit pizza.name zugreifen. Verschmelze diese beiden zusammen. Pizzanamel.appendChild war nicht im Textinhalt enthalten , nämlich PizzaName. Toll, also haben wir hier zwei separate Spannweiten. Wir haben unsere erste Spanne, die unsere individuelle Anzahl oder die Menge an Pizzen einwickelt . Dann eine zweite Spanne, die unseren PizzaName enthält. Beide Elemente müssen zu einem Listenelement zusammengeführt werden. Dann muss das Listenelement unserem Elternteil hinzugefügt werden. Also lasst uns an die Arbeit gehen. Als neuer Kommentar nur um dies klar zu halten. Dieses ist das Erstellen eines Listenelements. Zeigen Sie die Menge und den PizzaName an. Erste Elemente, die in einer Konstante namens PizzaItem, document.createElement gespeichert sind. Dies war ein Listenelement. Wir haben unser umgebendes Listenelement und dann müssen wir unsere beiden Elemente von oben zusammenführen. Die Menge, die diese Variable ist, und auch der PizzaName. Schnappen wir uns unser PizzItem. Da wir mehrere untergeordnete Elemente anhängen, können wir einfach append verwenden , und das ist jetzt unser erstes, welches das Element der Bestellmenge war. Dann das PizzanaMEElement. Wir sind jetzt fast fertig, unser Listenelement wird ohne zwei Inhalte erstellt und jetzt müssen wir diese zu unserer ungeordneten Liste hinzufügen. Ihre Bestellliste wird in der Konstante namens PizzaList gespeichert . Fügen Sie dies direkt unter seiner Liste hinzu. AppendChild war nicht in unserem Pizza-Artikel. Wir sind fast da. Jetzt haben wir unsere Listenelemente zu unserer ungeordneten Liste hinzugefügt. Aber jetzt muss die ungeordnete Liste auch zu unserem Wrapper hinzugefügt werden. Der Wrapper ist hier nur diese Order Wrapper-Variable. Aber wir müssen dies außerhalb unserer Schleife hinzufügen. Stellen Sie sicher, dass wir das Ende unserer Schleife finden. Was ich hier direkt unter dieser Zeile gemacht habe. Wählen Sie die OrderWrapper.appendChild geben Sie unsere Pizzaliste ein. Dies ist jetzt unsere vollständige Bestellung schnell eingeengt. Der nächste Schritt oder der letzte Schritt hierfür besteht darin, dies nun unserer Webseite hinzuzufügen. Wir brauchen die Abschnitte dieser beiden. Dieser Abschnitt ist die Seite. Wir können das mit der Idee von Bestellungen erfassen. direkt unter unserem Bestell-Wrapper, Verwenden Sie Document.QuerySelector direkt unter unserem Bestell-Wrapper, um unsere Bestellungen zu erhalten.AppendChild war nicht in unserem Bestell-Wrapper. Probieren wir das aus, jetzt müssen wir diese Funktion tatsächlich aufrufen, damit sie funktioniert. Schnappen wir uns die Liste der drei Bestellungen, rufen Sie uns unten an und aktualisieren Sie den Browser. Die gute Nachricht ist, dass wir die Bestellungen tatsächlich auf dem Bildschirm sehen können , aber es sieht nicht ganz so aus, wie wir es erwarten. Werfen wir einen Blick in unseren Code und sehen, was wir ändern müssen. Wir vermissen derzeit die Menge vor dem eigentlichen PizzaName, bei dem es sich um diesen Listeneintrag handelt. Wir fügen die Bestellnummer hinzu. Ich denke, das muss nur die Bestellmenge sein. Das sieht viel besser aus, jetzt haben wir die Bestellnummer ganz oben, jede davon ist in der Reihenfolge, gefolgt vom Namen und der Menge jedes einzelnen der Pizzen in der Bestellung. Wie Sie sehen können, ist dies eine ziemlich lange Funktion, und idealerweise möchten wir dies in kleinere, fokussiertere Stücke umgestalten , und das werden wir als nächstes tun. 26. Auflistung von Bestellungen Refactor: Während wir unseren Code schreiben und insbesondere wenn unser Projekt wächst. Wir möchten unseren Code, wo möglich, regelmäßig umgestalten. Im Moment funktioniert unser Code völlig einwandfrei. Darauf möchten wir uns zunächst konzentrieren, aber es ist auch wichtig, die Dinge regelmäßig zu betrachten und zu sehen, ob wir die Dinge verbessern können. In diesem Video werden wir diese eine einzige Funktion, die Sie haben, umgestalten. Zerlegen Sie es wenn möglich in kleinere. Es ist eine gute Idee, kleinere Funktionen zu haben, die sich auf einzelne Aufgaben konzentrieren , und dies hilft bei der Lesbarkeit und dem Debuggen. So wie Sie sich nähern, liegt es an Ihnen und oft persönlichen Vorlieben. Aber je näher wir eine Funktion erreichen können , um dies in einer einzigen Aufgabe zu tun, desto besser. Der erste Schritt, den wir unternehmen werden , besteht darin, den gesamten Auftragserstellungsprozess aus dieser Funktion zu entfernen den gesamten Auftragserstellungsprozess aus und in eine eigenständige Funktion zu platzieren. Wir nehmen alle Inhalte heraus, die zum Erstellen unserer Bestellung verwendet werden, und lassen unsere Funktion „ CreateOrdersList “ mit einer einfachen Aufgabe zurück. Diese Aufgabe besteht darin, das gesamte Orders-Array zu durchlaufen und sie dann zum Seitenabschnitt hinzuzufügen. Erstellen Sie dazu direkt oben eine neue Funktion. Dieser wird auf „CreateSingleOrder“ aufgerufen . Da diese Funktion für jede Reihenfolge innerhalb des Arrays wiederholt wird , nehmen wir auch die Reihenfolge als Variable an, die sich nach unten bewegt und in unsere Funktion springen. Beginnend mit „OrderWrapper“ innerhalb der Schleife, lassen Sie den gesamten Inhalt von hier ab, genau dorthin, wo wir dies zu unserem „OrderWrapper“ hinzufügen . Schneide das aus und wir sollten einfach mit unserer Schleife übrig bleiben. Dann der Abschnitt, in dem wir dies zur Seite hinzufügen . Jetzt ist das Cut-Out. Springe in unsere „CreateSingleOrder“ und füge das ein. Nun, wenn wir in unsere Schleife springen , wo wir diesen Code einfach herausschneiden. Wir können diese „ Stand-alone-Funktion“ nennen , die „CreateSingleOrder“ genannt wurde. „CreateSingleOrder“ muss auch die Reihenfolge übernehmen , da wir sie gerade hier weitergeben, die dann im Rest unserer Funktion verwendet wird. Wenn Sie jetzt darüber nachdenken, ist dies einfach keine Funktion aufrufen. Es macht eigentlich nichts damit. Alles, was wir tun müssen, ist, dass wir die Bestellung von dieser obigen Funktion zurückgeben, diese innerhalb einer Variablen speichern und diese dann zum DOM hinzufügen können. Zuerst holen wir uns unseren OrderWrapper , der den vollständigen Bestellabschnitt ist, und geben diesen von unserer Funktion zurück. Dieser Rückgabewert kann dann innerhalb einer Variablen namens „SingleOrder“ gespeichert werden . SingleOrder kann jetzt zu unserer Seitenleiste hinzugefügt werden. Probieren wir das aus, „Speichern“ und „Refresh“, und alles funktioniert immer noch wie zuvor, aber diese Funktion ist immer noch ziemlich lang. Wir können auch die Größe dieser beiden reduzieren. Wie Sie dies aufschlüsseln, hängt wiederum persönlichen Vorlieben ab. Aber was ich tun werde, ist, die Kreation „PizzaList“ in eine neue Funktion auszulagern die Kreation „PizzaList“ eine neue Funktion auszulagern , die auch in Zukunft genutzt werden könnte. Die PizzaList-Sektion ist diese Schleife. Wir müssen auch die eine Bestellliste aufrufen , in der wir diese speichern, also kopiere diese und auch die Schleife. Dann erstelle unsere Funktion und direkt oben „CreateListofPizzas“ genannt. Ich wollte nur die Pizzen mitnehmen . Dann „Einfügen“ in unserer neuen Rubrik. Stellen Sie einfach sicher, dass der richtige Abschnitt darin eingefügt wird, was unsere ungeordnete Liste ist, gefolgt von unseren vier jeder Schleife. In nur einem Moment, in dem wir diese Funktion tatsächlich aufrufen können. Denken Sie daran , dass dies alle unsere Pizzen aufnehmen wird, damit wir diesen Bestellabschnitt nicht benötigen. Wir können unsere Pizzen direkt anrufen und es ist variabel. Jetzt können wir diese Funktion von dem Ort aus aufrufen , an dem wir diesen Code gerade ausgeschnitten haben. Der Funktionsname war „createListofPizzas“. Dies müssen alle Pizzen für diese Bestellung weitergegeben werden, die wir zuerst aus unserer Bestellung entnehmen können und jede Bestellung hat das Eigentum von Pizzen. Genau wie unten müssen wir dies innerhalb einer Variablen speichern und auch etwas für unsere Funktion zurückgeben. Das, was wir am Ende zurückkehren müssen , ist unser „Pizzalist“. Der zurückgegebene Wert kann dann innerhalb einer Konstante gespeichert werden . Wenn wir diese Konstante „PizzaList“ nennen. Es passt auch gut unserem Variablennamen , den wir zuvor verwendet haben der dann zu unserem „OrderWrapper“ hinzugefügt wird. Geben Sie dies „Speichern“ und probieren Sie dies aus, „Aktualisieren“ und alle Bestellungen funktionieren immer noch wie erwartet. Refactoring-Funktionen wie diese sind möglicherweise nicht immer für Sie und Sie können entscheiden, wie weit Sie gehen möchten. In Bezug auf die Funktionsweise des Projekts ändert sich nichts . Wir sehen immer noch nur die Bestellungen auf dem Bildschirm, aber jetzt haben wir drei klare Funktionen mit einer bestimmten Aufgabe. Wir haben ganz oben „CreateListofPizzas“, das von dieser Funktion zurückgegeben wird. Diese Liste von Pizzen wird dann dem DOM hinzugefügt, wenn wir unsere einzelne Bestellung erstellen , und eine „SingleOrder“ wird dann in unserer letzten Funktion überlaufen und dann zum DOM hinzugefügt. 27. Element Helper Funktion: Ein weiterer Refaktor, den wir tun können, um uns viel Code zu sparen , besteht darin, sich anzusehen, was wir derzeit in unseren Funktionen wiederholen, und zu sehen, ob es eine Möglichkeit gibt , ihn stattdessen in eine wiederverwendbare Funktion auszulagern. Wenn wir uns unseren Code in diesem frühen Stadium ansehen, gehen wir zur CreateListofPizzas Funktion. Wir haben bereits einige Dinge, die wir gerade wiederholen. Wir wiederholen, diese Elemente in unseren drei Schritten zu erstellen . Ist Teil der Menge. Wir erstellen ein Span-Element. Wir erstellen den TextNode, und dann führen wir diese beiden zusammen. Wir machen das Gleiche für unseren PizzaName. Wir schaffen ein Element. Wir erstellen einen TextNode für den Inhalt , führen sie zusammen und gehen etwas weiter zu CreateSingleOrder. Wir machen auch etwas Ähnliches, gerade hier erstellen wir unser Textelement, das sich in einem Wrapper der Stufe 4 befindet. Wir erstellen die Inhalte und fügen diese dann zusammen, und das ist alles völlig in Ordnung. Dies ist etwas , was wir tun müssen, um unsere Elemente zu schaffen. Für jedes Mal, wenn wir in einer dieser Funktionen ein neues Element erstellen , handelt es sich um einen dreiteiligen Prozess, der drei Codezeilen verwendet wird. Es wäre schön, eine Hilfsfunktion zu erstellen um die Codemenge zu reduzieren, und dies wird die Aufgabe für dieses Video sein. Wir erstellen eine Hilfsfunktion, die den Namen des Elements aufnimmt. Dies ist der Abschnitt „ Elemente erstellen“. Sie nehmen den Inhalt auf, den TextNode ist, werden sie zusammenführen, was normalerweise unsere dritte Zeile ist, und dann geben wir dieses neue Element an alle Aufrufe unserer Funktion zurück . Lasst uns an die Arbeit gehen. Erstellen Sie eine neue Funktion , die bei diesem Namen BuildeLement helfen wird. BuildeElement muss auch zwei Dinge in sich nehmen. Es muss den Namen der Elemente wie das h4 und auch den Inhalt aufnehmen , der hineingeht. Wird dies übergeben, wenn wir diese Funktion aufrufen, und die erste wird der ElementName sein und der zweite ist der ElementContent. Innerhalb der Funktion wird es ziemlich vertraut sein , was wir bereits getan haben, und tatsächlich können wir eines dieser Beispiele kopieren. CreateSingleOrder lösen. Habe alle drei Codezeilen, in denen wir das Element erstellen, wir erstellen den Inhalt und wir führen diese zusammen. Wenn Sie möchten, können wir alle drei Zeilen kopieren und einfügen. Dann müssen wir das ein bisschen generischer machen. Beginnend mit der ersten Konstante. Dies ist für das Element. Die zweite ist für den Inhalt, und dann können wir innerhalb dieser beiden Klammern die Daten übergeben, die an alle Funktionen übergeben werden. Der erste ist für den ElementName und der zweite, den wir entfernen können, was wir derzeit haben, in ElementContent platzieren. Ändern Sie die Variablennamen. Dieser wird element.appendChild den Inhalt an dieses Element übergeben. Das letzte, was wir tun müssen, ist, dass wir derzeit ein Element schaffen. Wir müssen dies auch von unserer Funktion zurückgeben, darauf kann innerhalb unseres Codes zugegriffen werden. Gibt die vollständigen Elemente zurück, nachdem sie zusammengeführt wurden, und diese Funktion kann jetzt eine dieser drei Codezeilen ersetzen , die ein Element erstellt. Wenn wir unseren Funktionsnamen und auch die Klammern mit dem Inhalt abrufen, können wir jetzt einen dieser Abschnitte direkt oben ersetzen. Wir beginnen mit CreateSingleOrder, für alle Bestellnummernelemente, die Bestellnummer und dann die dritte Zeile und dann die dritte Zeile, die beide zusammenführt. Ich ersetze das durch unsere Funktion ElementName. Das ist ein h4. Für den Inhalt können wir dies durch genau denselben Inhalt ersetzen , den wir oben verwendet haben. Schnapp dir das und klebe das hinein. Halten Sie unsere Benennung konsistent, da wir derzeit eine Konstante namens OrderNumberel verwenden und wir darauf direkt unten zugreifen, müssen diese auch innerhalb einer Konstante mit demselben Namen speichern . was hier passiert ist, dass wir unsere Elemente in unserer neuen Funktion aufbauen. Wir geben dies dann von der Funktion zurück, die dann in dieser Konstante gespeichert wird, die wir dann im Rest unseres Codes verwenden können , sie direkt darunter. Wenn Sie möchten, können wir die freien vorhandenen Codezeilen entfernen , und dann können wir zu unserer ersten Funktion aufsteigen , die CreateListofPizzas ist. Wir haben alle drei Zeilen gerade hier. Ich werde das kommentieren, damit wir es als Referenz verwenden können. Wir müssen unsere BuildeLement-Funktion übergeben und unsere beiden Werte übergeben. Der erste Wert ist unsere Spanne. Der zweite kopiert unser Vorlagenliteral . Jetzt ist das drin. Auch dafür unten haben wir den ursprünglichen Konstantennamen des OrderQuantity Elements verwendet . Wir können dies kopieren und im Rückgabewert speichern . Entfernen Sie diese drei Zeilen, wenn Sie möchten. Als nächstes der PizzaName. Diese drei Zeilen aus. Wir erstellen unsere Konstante, die den gleichen Namen wie PizzanaMeel ist . Order-Funktion ist auch ein Span-Element, und der Inhalt ist pizza.name. Entferne diese. Beide sind gleich, wir müssen uns nur ändern, ist vorbei. Dieser sollte der PizzanaMeel sein. Wir bringen das hier rüber. Gut. Jetzt speichern wir dies und weiter im Browser und wir können es testen. Alles funktioniert immer noch gut. wir in die Konsole springen, sehen wir hier keine Fehler. Unsere Seitenleiste hat unsere generierten Bestellungen auf der rechten Seite. Wir haben die Bestellnummern, wir haben die Pizza-Namen und auch die Mengen. Das scheint jetzt alles immer noch gut zu funktionieren, und hoffentlich können Sie die Vorteile sehen , wenn Sie solche Dinge tun. Obwohl unsere Funktion ein paar Codezeilen benötigt hat, jedes neue Element, das wir erstellen reduziert jedes neue Element, das wir erstellen, drei Codezeilen in eine. Wir können dies auch in Zukunft während unseres Projekts viele Male nutzen , um noch mehr Code zu speichern. Es geht nicht nur um Lesbarkeit und Organisation. Eine einzelne Zeile wie diese bedeutet weniger Chancen auf Tippfehler und auch eine Erhöhung der Geschwindigkeit, wenn unser Programm wächst. 28. Auswahl Der Aktuellen Reihenfolge: Wir haben einige Befehle auf der rechten Seite, um uns in Schwung zu bringen, und bald werden wir auch nach dem Zufallsprinzip neue erstellen. Kurz bevor wir damit fortfahren, möchte ich Ihnen zeigen, wie die Dinge funktionieren , damit Sie sich vorstellen können, was wir tun werden. Sobald das Spiel begonnen hat, werden unsere Befehle eingehen und auf der rechten Seite angezeigt werden. Der Koch, der der Spieler ist, klickt dann auf eine Bestellung, um mit der Arbeit zu beginnen, die diese Reihenfolge dann in den Bereich Working on verschiebt . Auf diesen Abschnitt werden wir uns jetzt konzentrieren. Später werden wir dann noch weiter gehen, indem im Abschnitt Arbeit auf eine bestimmte Pizza klicken. Dann zeigt dies die Methode an und stellt sie auch als die derzeit an Pizza in der Küche arbeitende. Jetzt können wir uns einfach darauf konzentrieren, auf eine Bestellung zu klicken und sie in den Abschnitt Working on zu verschieben. Wie Sie vielleicht vermutet haben, erstellen wir dazu eine neue Funktion direkt über unserer Auftragsliste erstellen. Es ist eine neue Funktion namens SelectCurrentOrder. Um diese Funktion aufzurufen, müssen wir auf einen Klick auf eine dieser Bestellungen achten . Um dies zu tun, müssen wir zu unserer CreateSingleOrder-Funktion aufsteigen . Wenn wir nach diesem Abschnitt suchen, müssen wir jeder dieser Bestellungen einen Event-Listener hinzufügen . Wir können darauf klicken und diese bestimmte Reihenfolge dann in den richtigen Abschnitt verschieben . Gleich darunter, wo wir diese Klasse hinzufügen. Schnappen Sie sich den Order Wrapper, der das div ist, das jede dieser Bestellungen umgibt. Fügen Sie einen Ereignis-Listener hinzu. Das hört jetzt auf einen Klick, der unsere neue Funktion namens SelectCurrentOrder auslöst , gibt uns den Test durch ein Konsolenprotokoll innerhalb unserer neuen Funktion. Geben Sie die Ereignisinformationen ein, damit wir die richtigen Elemente erhalten , auf die geklickt wird. Dann protokollieren wir das mit e.target. Schauen wir uns das in der Konsole an. Jetzt müssen wir auf eine unserer Bestellungen klicken. Du siehst die Margherita. Wir sehen den Schinken und die Ananas. Das ist nicht genau das , was wir wollen. Wir können auf eine der Bestellnummern klicken, die im Inhalt enthalten sind. Aber was wir tun möchten, ist, den gesamten Bestellabschnitt aktiv zu machen , sodass es sich nur um einen einzigen anklickbaren Bereich handelt. Verstehen Sie das besser, springen wir in die Registerkarte „Elemente“ und werfen Sie einen Blick darauf. Jetzt springen wir in den Seitenbereich, der unsere Bestellungen enthält , und klicken auf einen dieser Divs mit der Klasse des Order Wrapper. Was wir wollen, ist, dass wir nur mit der Klasse des Order Wrapper auf dieses Div klicken und alle Klicks ignorieren können mit der Klasse des Order Wrapper auf dieses Div klicken und alle Klicks ignorieren , die sich auf den verschachtelten Elementen befinden. Eine Möglichkeit, dies zu tun, besteht darin, jetzt auf eines dieser verschachtelten Elemente zu klicken , z. B. die Listenelemente oder die Überschrift Ebene vier. Klettern Sie dann den Elementbaum hoch, bis er das erste div mit der Klasse des Order Wrapper findet. Um dies zu tun, können wir genau darauf achten , auf welches Element geklickt wurde, z. B. die ungeordnete Liste. Dann können wir die Kette weiter hochklettern, um zu überprüfen, ob das übergeordnete Element dieser Order Wrapper ist. Es gibt ein paar verschiedene Möglichkeiten, dies zu tun. Wir könnten einen Verweis darauf speichern auf das untergeordnete Element geklickt wurde, z. B. unsere ungeordnete Liste. Dann können wir in dieser Schleife weiter prüfen, ob das übergeordnete Element dieser Order-Wrapper ist. Oder eine einfache Möglichkeit besteht darin, eine Elementmethode zu verwenden , die als nächstes bezeichnet wird. Die nächstgelegene Methode nimmt ein Element wie das Element an, auf das wir klicken. Dann klettert es durch alle übergeordneten Knoten weiter zum Dokumentstamm zum Dokumentstamm bis es eine Selektorübereinstimmung erreicht. Der Selektor kann eine Klasse, eine ID, ein Elementname sein. Genau wie wir es mit dem Abfrageselektor tun können. Werfen wir einen Blick darauf, wie das innerhalb unserer Funktion gemacht wird. Zuerst beginnen wir einen Verweis auf unsere Elemente, auf die geklickt wird, nämlich e.target. Dann finden wir die nächstgelegenen übergeordneten Elemente mit dieser Klasse von Order Wrapper. Wir können dies tun, indem wir auf das Element zugreifen , auf das geklickt wird, die Methode namens „am nächsten“ aufrufen. Nun, wir geben die Anfrage weiter , nach der wir suchen. In unserem Fall wollen wir nach dem order_wrapper suchen. Da dies eine Klasse ist, fügen wir den Punkt als Präfix hinzu. Dies innerhalb einer Konstante namens OrderWrapper. Dann können wir das überprüfen, indem dies an der Konsole protokollieren. Wenn wir uns jetzt aktualisieren und versuchen können, auf eine dieser Bestellungen zu klicken. Stellen Sie sicher, dass die Registerkarte „Konsole“ ausgewählt ist. Wenn wir versuchen, draußen etwas anzuklicken, sehen wir nichts in der Konsole, was vom Pizza-Titel erwartet wird . Dies kehrt zurück in Richtung des Bestellungswrapper der Eltern. Wir können dies öffnen und überprüfen, ob es sich um Bestellung 1 handelt. Versuchen wir es mit einem anderen. Dies ist Order 3 und auch Order 2. Gut also jetzt, unabhängig davon , auf welchen Teil der Bestellung wir klicken, es klettert immer zum Bestellverpacker der Eltern, um den vollen Inhalt dieser Bestellung zu erhalten. Wenn mit dieser Methode keine Übereinstimmungen gefunden werden, erhalten wir den Wert null zurück . Wir können dies auch prüfen, bevor unsere Bestellung in den Abschnitt Working on aufnehmen. unterhalb der Stelle, an der wir unseren Order Wrapper auswählen, Fügen Sie unterhalb der Stelle, an der wir unseren Order Wrapper auswählen, eine if-Anweisung hinzu, an die wir unseren Order Wrapper übergeben, wir können prüfen, ob dies nicht gleich null ist. Wenn wir erfolgreich auf einen Order Wrapper geklickt haben, müssen wir uns jetzt diesen Order Wrapper holen und ihn in unseren Abschnitt „ Arbeiten an“ verschieben. Schritt 1 besteht darin, einen Working on Abschnitt zu greifen und diesen in einer Konstante namens OrderDiv zu speichern. Das ist gleich dem Dokument. QuerySelector und der Abfrageselektor, an dem wir brauchen, um zu arbeiten. Dann können wir mit append child unseren Bestell-Wrapper hinzufügen. Das OrderDiv. AppendChild übergibt unseren Order Wrapper , auf den geklickt wurde. Toll lasst uns das mal ausprobieren. Wir können die Konsole schließen und eine dieser Bestellungen ausprobieren. Versuchen wir Nummer 3 und dies erscheint jetzt in den Abschnitten, da wir dies als untergeordnete Elemente Order 2, Ordnung 1 angehängt haben dies als untergeordnete Elemente Order 2, Ordnung 1 angehängt , und das alles funktioniert großartig. Wir möchten jedoch nur an einer einzigen Bestellung gleichzeitig arbeiten können . Wir brauchen eine Möglichkeit zu prüfen, ob nur eine einzelne Bestellung ausgewählt und in diesem div platziert wird. Eine Möglichkeit, dies zu tun, besteht darin, zuerst auf den Abschnitt Working on zuzugreifen , und wir können überprüfen welche untergeordneten Elemente darin verschachtelt sind. Sehen Sie, es ist besser, wir werden einen Verweis auf unser div nehmen , platzieren Sie dies in einem Konsolenprotokoll. Dann können wir uns am Ende verketten.children . Springe in die Konsole. Klicken Sie auf eine unserer Bestellungen , um dies dem Abschnitt hinzuzufügen. Wenn wir genau hinschauen, ist das erste, was wir haben eine HTML-Sammlung mit einer Überschrift der Stufe 3. Danach haben wir unser div mit der Klasse des Order Wrapper, die wir gerade hinzugefügt haben. Wir können dies auch bestätigen, wenn wir zu unserer Indexseite gehen, die an dem Abschnitt arbeitet, nur eine einzige Überschrift der Ebene 3 hat. In diesem Sinne kann die Anzahl der untergeordneten Elemente jetzt verwendet werden, um die Funktion zu stoppen. Wenn die Anzahl der untergeordneten Elemente größer als eins ist dh wir haben unsere Überschrift Level 3 gefolgt von einer unserer Bestellungen, können wir dies in unserer Funktion „Aktuelle Bestellung auswählen“ zurücktun. Entfernen Sie das Konsolenprotokoll ersetzen Sie es durch eine if-Anweisung. Wir können prüfen, ob die Kinder sind. Länge ist größer als eins. Wenn ja, kehren wir einfach zurück ändern diese Funktion. Wir können auch die gebogenen Klammern entfernen und durch unsere Rückgabeerklärung ersetzen. Probieren wir das mal aus. Speichern und aktualisieren. Ich klicke auf die erste Bestellung das funktioniert gut. Jetzt können wir keine weiteren Bestellungen hinzufügen. Das letzte, was zu tun ist, dass wir die Reihenfolge in den Abschnitt Working on übergehen möchten die Reihenfolge in den Abschnitt Working on übergehen , besteht darin, auch den Ereignis-Listener zu entfernen. Wir brauchen diesen Abschnitt nicht mehr, um anklickbar zu sein, daher können wir diesen aus unserem Bestellwickler entfernen. Wir können dies tun, kurz bevor wir dies zu unserem div-Bereich hinzufügen. Durch den Zugriff auf die Elemente , die im Order Wrapper namens removeEventListener gespeichert sind. Der Listener, den wir entfernen möchten, die Klickereignisse gefolgt von SelectCurrentOrder, die mit unserem Ereignis-Listener übereinstimmen. möglich sollten Ereignis-Listener wie dieser entfernt werden, wenn sie nicht mehr benötigt werden. Es hilft, die Leistung aufrechtzuerhalten, da der Browser keine unnötige Aufgabe mehr erledigen muss, sondern auch unerwartetes Verhalten eliminiert. Als nächstes behandeln wir die Auswahl der Pizza, an der wir in der Küche arbeiten werden . 29. Stellen Sie Die Aktuelle Pizza: Schauen Sie sich den Ablauf unseres Projekts an, wir haben bereits den ersten Schritt gemacht, der darin bestand, die ausgewählte Reihenfolge, auf die wir klicken, in den Abschnitt „Bestellung“ in den Abschnitt Arbeiten an zu verschieben . Als nächstes müssen wir in der Lage sein, die Pizza auszuwählen , an der gearbeitet werden soll, indem wir darauf klicken. Diese ausgewählte Pizza sollte dann im Küchenbereich angezeigt werden und auch die Methode anzeigen, alle Schritte, um dies zu erstellen. Wenn Sie hier einen Blick darauf werfen, habe ich einige Schritte erstellt, mit denen wir dieses Ziel oben erfüllen dieses Ziel oben nämlich die Pizza-Namen anklickbar zu machen und sie dann in den Küchenbereich zu verschieben. Wenn Sie möchten, können Sie diese fünf Schritte ausführen und versuchen, dies selbst neu zu erstellen , oder wenn Sie es vorziehen, können Sie mir folgen. Um auf diese Pizzen klicken zu können, beinhaltet Schritt 1 zunächst das Hinzufügen einer Klasse von Pizza-Namen zu jedem dieser Artikel. Lasst uns zur Funktion von CreateListSofPizza springen , wir werden das finden. Und dann kreieren wir hier jede unserer Pizzen innerhalb der Spannelemente. Kurz bevor wir eine Anfügung vornehmen, fügen wir unsere Klasse hinzu, indem die Elementvariable Pizzamennamen auswählen. Wählen Sie die ClassList aus, die Methode namens add, wobei wir als String den Namen pizza_name übergeben werden. Das ist Schritt 1, um den du dich gekümmert hast. Scrollen wir wieder nach unten. Schritt 2 besteht darin, die SelectCurrentOrder-Funktion zu suchen. Da wir möglicherweise mehrere Pizzen haben, müssen wir alle Spannelemente auswählen. Und denken Sie daran, wenn wir mehrere Elemente haben, müssen wir ein QuerySelectorAll verwenden. Wir können all diese Elemente mit dieser Pizza-Namensklasse greifen , die wir gerade hinzugefügt haben. Suchen wir also diese Funktion SelectCurrentOrder, dann verwenden wir QuerySelectorAll, um all diese Pizza-Elemente zu greifen diese in einer Variablen namens pizzas document.QuerySelectorAll zu speichern . Wir können diese mit dem neuen Klassennamen greifen, wir gerade erstellt haben , nämlich pizza_name. Denken Sie daran, dass das Ziel darin besteht, auf einen unserer Pizza-Namen wie Schinken und Ananas oder alle Peperoni klicken zu können , auf einen unserer Pizza-Namen . So können wir jetzt einfach kostenlos auf einen dieser Namen klicken. Also schnapp dir unsere Variable, die Pizzen sind. Wir können forEach verwenden, um eine Funktion für jedes dieser Elemente auszuführen . Jede der einzelnen Pizzen wird auf einer Pizza-Variable gespeichert und dann können wir jedem dieser Pizzen einen EventListener hinzufügen jedem dieser Pizzen einen EventListener , also pizzas.addEventListener. Event wird ein Klick sein , der dann eine Funktion ausführen wird, die wir noch nicht erstellt haben, namens SetCurrentPizza. Okay? Lassen Sie uns diese Funktion unten erstellen , Funktion setCurrentPizza. Da wir dies mit einem Klickereignis auslösen, können wir die Ereignisinformationen auch an unsere Variable übergeben und überprüfen, ob dies mit einem Konsolenprotokoll funktioniert. Um also die tatsächlichen Elemente zu greifen, auf die Sie geklickt haben, wie Schinken und Ananas oder Peperoni. Um den Text zu erfassen, können wir dies mit e.target in einer Eigenschaft namens InnerText tun , prüfen Sie, ob das alles richtig funktioniert. Probieren wir das aus, springen Sie in die Konsole und aktualisieren Sie es. Das erste, was Sie tun müssen, ist, auf eine unserer Bestellungen zu klicken , und es wird ein Fehler beim EventListener ausgelöst. Werfen wir einen Blick darauf, was das verursachen könnte. Wir haben eine unbenutzte Variable, also braucht das nur ein s, da diese mehrere Pizzen enthält. Probieren wir das jetzt aus. Wir können auf unsere Bestellung klicken. Das funktioniert großartig. Wenn wir nun auf den Text von Schinken und Ananas klicken, sehen wir dies in der Konsole, Pepperoni. Gut, genau das wollen wir. Wenn wir nun wieder zu unserer SetCurrentPizza gehen, besteht das Ziel natürlich nicht darin, dies an der Konsole zu protokollieren, was wir tun möchten, ist, den Pizza-Namen in eine Variable zu speichern und dann nur hinzuzufügen nach unserem Text von Momentan machen. Wenn wir auf die Indexseite springen und diesen Abschnitt finden, können wir gleich danach sehen, dass wir eine Spanne mit der ID von current_pizza haben. Also speichern wir diesen Text in eine Variable und platzieren ihn dann in diese Spanne. Machen wir dies innerhalb unserer Funktion mit einem Konsolenprotokoll und speichern dies in einer Konstante namens PizzaName. Schnappen Sie sich unseren Spanbereich mit document.QuerySelector. Benutze #, da dies mit der ID von current_pizza war. Stellen Sie den InnerText für dieses Element auf unsere obige Variable ein. Probieren wir das mal aus. Wir brauchen die Konsole nicht mehr. Verschieben Sie eine dieser Bestellungen in den Abschnitt „Arbeiten an“. Klicken Sie auf „Pepperoni“ und es wird unser Text angezeigt, „Schinken und Ananas“ und auch die „Margherita“. Als Nächstes verwenden wir dieses ausgewählte Element, um die erforderlichen Schritte innerhalb des Methodenabschnitts anzuzeigen . 30. Aufteilen & Verbinden Methoden: Zuvor haben wir den aktuellen Pizza-Namen in der Küche festgelegt , als dieser angeklickt wurde. Jetzt werden wir mit der Darstellung der Methode zur Herstellung dieser Pizza im Methodenabschnitt fortfahren . Die Methode sind alle Schritte, die zum Herstellen jeder Pizza erforderlich sind. Wir haben dies ganz oben in unserer JavaScript-Datei. Innerhalb unserer Indexseite können wir in alle Pizza-Arrays gehen, und das hat den Pizza-Namen , den Sie bereits verwendet haben, und auch die Methode. Wenn wir diese Margherita-Methode als Beispiel nehmen, wird dies drei Schritte dauern. Die erste besteht darin, den Teig zu rollen, der zweite besteht darin, die Soße hinzuzufügen, und der dritte ist mit Käse zu überziehen. Wir werden bestätigen, dass der Chef die Schritte später mit den erforderlichen Schritten abgeschlossen hat , aber im Moment möchten wir uns nur darauf konzentrieren, diese Methode innerhalb des Browsers anzuzeigen. Wie Sie sehen können, ist diese Methode alles eine einzelne Textzeichenfolge, und was wir in diesem Video tun werden, ist jeden dieser Schritte aufzuteilen , um sie im Browser anzuzeigen. Also brauchen wir Schritt 1, wir brauchen Schritt 2 und auch Schritt 3, um diese formatiert darzustellen. Um dies zu tun, könnten wir in unsere eingestellte aktuelle Pizza-Funktion einsteigen , aber um die Dinge sauberer und abstrahierter zu halten, werde ich ganz unten eine neue Funktion erstellen . Springen Sie ganz unten in unserem Projekt. Es ist eine neue Funktion namens DisplayMethod. Dies muss auch den Pizza-Namen aufnehmen , damit wir wissen, welche Methode wir bekommen müssen Geben Sie dies also in unsere Funktion ein, und wir müssen diese Funktion jedes Mal aufrufen , wenn wir die aktuelle Pizza einstellen dh, diese Funktion direkt oben, wenn wir auf die Pizza klicken, und diese wird hier angezeigt . Wenn dies angeklickt wird, wissen wir, an welcher Pizza arbeiten muss. Dies ist sinnvoll, unsere Funktion von innen von dort aus aufzurufen . Lass uns das machen. Wir rufen unsere Funktion auf, die DisplayMethod ist, und denken daran, dass dies auch den aktuellen Pizza-Namen aufnehmen muss , den Sie in dieser Variablen gespeichert haben. Zu unserer Indexseite gibt es derzeit bereits einen Abschnitt namens Methode, den Sie hier sehen können. Dies hat die ID der Methode a Level 3 oben, und dann haben wir zwei Abschnitte. Wir haben den Pizza-Namen gefolgt von der Methode, die wir bald einfügen werden. Wie Sie sich vorstellen können, ist dies der Abschnitt , mit dem wir arbeiten werden. Wir können mit dem ersten Abschnitt beginnen , der der Pizza-Name ist. In unserer Funktion haben wir bereits den Pizza-Namen, damit wir documents.querySelector ('pizza_name') .innerHTML verwenden können documents.querySelector ('pizza_name') .innerHTML , was gesehen hätte , dass der innere Textinhalt unserer Variablen entspricht. was ist PizzaName. Bevor wir weiter gehen, probieren Sie dies im Browser aus, ich muss eine Bestellung aktualisieren und in den Abschnitt Working on weitergeben . Klicken Sie auf „Pizza“ und wir können unseren Pizza-Namen hier drüben sehen . Dies wird auch aktualisiert, wenn wir auf verschiedene klicken. Der nächste Schritt auf unserer Indexseite besteht darin, unsere Pizza-Methode zu greifen und hier eine Methode zu platzieren. Denken Sie daran, dass unser Pizza-Objekt diese Methodeneigenschaft hat , auf die wir zugreifen können, und um dies zu finden, können wir die Methode „Erase find“ verwenden, mit der wir diese bestimmte Methode filtern können , die von der Pizza-Name , den wir bereits haben, und dann können wir die Methode für jeden auswählen. Zurück zu unserer Funktion bravo full pizzas array Methode, die find und find wird eine Funktion für jeden Wert innerhalb unseres Pizzas Arrays ausführen , und Sie können eine unregelmäßige Funktion platzieren, wenn Sie möchten, aber da dies eine einfache Anweisung sein wird , füge ich diese in einer eigenen Zeile mit einer Pfeilfunktion hinzu. Diese Funktion nimmt die einzelne Pizza auf, greift dann auf den Namen jeder einzelnen Pizza auf der Schleife zu, und wir können überprüfen, ob dies unserem Pizza-Namen entspricht , der in diese Funktion übergeben wird. Der aktuelle angeklickte Pizza-Name entspricht einem unserer Pizza-Namen im Array Wir speichern diese ausgewählte Pizza in einer Variablen oder Konstante namens SelectedPizza. Als Nächstes führen wir ein Konsolenprotokoll und überprüfen, ob alles gut funktioniert, die Konstante von SelectedPizza, und lassen Sie uns dies im Browser aktualisieren. Springe zur Konsole. Klicken Sie zuerst auf eine „Oder“ und wählen Sie eine der Pizzen aus. Dies ist Schinken und Ananas, und wir können sehen, dass das volle Objekt unter Ananas zurückgegeben wurde. Versuchen wir es noch einmal. Die Peperoni. Großartig, also funktioniert das alles und wir können dies jetzt filtern, um nur die Methode zurückzugeben . Versuchen Sie es noch einmal. Die Schritte, die wir dort brauchen, und es ist für jeden von diesen unterschiedlich. Großartig, also gibt dies jetzt eine Textzeichenfolge zurück, und wir müssen diese Zeichenfolge aufteilen und jeden Schritt als Listenelement anzeigen. Dafür verfügt JavaScript über eine integrierte String-Methode namens split, die Strings durch die Prototypkette erben. Diese Methode verwendet unsere einzelne Zeichenfolge, die wir jetzt haben, sie an einem bestimmten Punkt aufteilen, den wir angeben, und gibt dann ein neues Array zurück, das und gibt dann ein neues Array zurück alle diese Teilzeichenfolgen enthält. So sieht es in unserem Code aus. Dies ist unsere Methode, also können wir dies einfach aus der Konsolenprotokollkette am Ende entfernen , die JavaScript-Split-Methode, und wir möchten übergeben, in welchem Abschnitt der Zeichenfolge wir diese teilen möchten abgesehen davon, und dann unser Fall, ist ein vollständiger Stopp ideal, und das liegt daran, dass jeder dieser Schritte, die wir haben, mit vollem Stopp endet, wenn wir uns unsere Saite ansehen jeder dieser Schritte, die wir haben, mit vollem Stopp endet, wenn wir uns . Dies ist perfekt, um unsere Zeichenfolge aufzulösen, und denken Sie daran, dass dies ein neues Array zurückgibt, das wir in einer Konstante speichern können. Bevor wir weiter gehen, führen wir schließlich ein Konsolenprotokoll durch , das unsere Konstante, nämlich MethodSteps, übergibt . Probieren wir das mal aus. Wählen Sie eine Bestellung aus, wählen Sie die Pizza aus und dies gibt nun ein neues Array mit allen unseren Schritten zurück. Wir können auch das Gegenteil tun, wenn wir wollten, und das heißt, ein Array von Werten zu nehmen, genau wie wir es hier haben , und sie in eine einzige Zeichenfolge umzuwandeln. Wir können dies mit der Methode namens Join tun. Denken Sie daran, MethodSteps ist ein Array. Wir können das Gegenteil tun, indem wir die Join-Methode übergeben. Join ist in einer einzigen Zeichenfolge. Wir können das testen, indem wir auf eine Pizza klicken. Lassen Sie eine einzelne Zeichenfolge zurück in Richtung zurückkehren und jeder Wert wird durch ein Komma getrennt. Wenn wir wollten, könnten wir dieses Trennzeichen in ein anderes Zeichen ändern , z. B. einen Bindestrich. Probieren Sie das aus. Habe jetzt einen Strich zwischen jedem dieser Werte. Dies ist nützlich, wenn Sie ein Array von Werten in einer einzigen Zeichenfolge verknüpfen müssen. Wir wissen jetzt, dass wir Arrays durchlaufen und mit jedem Wert etwas tun können , und im HTML haben wir den Pizza-Namen derzeit mit diesem Abschnitt hier festgelegt , und der nächste Schritt besteht darin, zu greifen unser zweites div mit der ID von PizzametHod. Ich setze unsere Array-Werte ein. Schnappen Sie sich das mit documents.querySelector ('#pizza_method') .inner-HTML und hier stelle ich einfach fest, dass dies einer leeren Zeichenfolge entspricht. Wenn eine Methode bereits zuvor festgelegt wurde, können wir sie löschen, bevor wir unsere neue hinzufügen. Dann listen wir unsere Schritte auf, indem unser Array schnappen, nämlich MethodSteps. Da Sie mehrere Werte haben, durchlaufen wir jeden dieser Werte mit einer für jede Schleife, die für jeden Wert eine Funktion ausführt. Wir können jeden dieser Werte in der Variablen namens Methode lösen . Dann konstruiere unsere Elemente. Installieren Sie dies innerhalb einer Konstante namens Elements. Wir haben Documents.createElements plus die Elemente, die Sie erstellen möchten. Ich wähle ein p-Element aus, und als nächstes ist der Textinhalt, document.createTextNode, document.createTextNode, und der Inhalt, den Sie übergeben möchten der Text unserer Methode. Durch Platzieren in der Methode im Inneren werden Elemente zusammengeführt . AppendChild übergibt unseren Text. Der letzte Schritt besteht darin, erneut unseren Abschnitt zur Pizza-Methode zu greifen , also kopieren wir diesen, fügen ihn ein, und dann können wir dies mit dem AppendChild hinzufügen , das unsere Elemente übergibt . Wir speichern dies und aktualisieren uns, wählen eine neue Bestellung aus. Peperoni. Da sind wir los. Es gibt unseren Pizza-Titel und auch die erforderlichen Schritte für jede der Pizzen. Gut. Das funktioniert jetzt alles und sieht gut aus. Es gibt nur einen kleinen Re-Faktor, den wir tun können. Denken Sie daran, dass wir gerade hier ein neues Textelement erstellt haben, aber wir haben auch eine Hilfsfunktion namens BuildElements, die unseren Elementnamen, Inhalt und Rückgabe als neu konstruierter Wert zurückgibt. Zurück zu unserer Schleife. Wir können dies in einer Konstante speichern, die Schritte genannt wird. Dies entspricht dem Rückgabewert aus unserer BuildeLement-Funktion. Übergeben der p-Elemente. Dann der Inhalt, der die Methode ist, die wir diese nächsten drei Zeilen verschieben und unsere Schritte durchlaufen werden. Probieren wir das aus und wählen Sie eine neue Bestellung aus. Das funktioniert alles genauso, aber wir haben ein paar Codezeilen gespeichert. Dies ist ein weiterer guter Schritt für unser Projekt, und wenn Sie ein Anfänger sind, weiß ich, dass dies hier viel passieren kann, aber das Wichtigste, woran Sie sich erinnern sollten, ist, dass wir bereits die Mehrheit von was wir hier machen. Es geht nur darum , es in kleinere Aufgaben aufzuteilen und sicherzustellen, dass jeder Schritt auf dem Weg funktioniert. 31. Pizzas In Den Ofen Hinzufügen: Die letzte Phase, um diese Pizza zu bewegen, besteht darin, sie vom Küchenbereich in unseren Ofen zu bringen. Wir haben die Pizza noch nicht kreiert, aber wir werden uns bald ansehen, wie das geht, und prüfen, dass wir die richtigen Zutaten verwendet haben. Aber im Moment können wir diesen PizzaName verwenden , den wir haben, und diesen in den Ofenbereich verschieben. Jetzt wird unser Ofen ein Array sein , um mehrere Pizzen zu speichern, wir benötigen auch einige andere Variablen. Lassen Sie uns diese beiden Funktionen gut erstellen, und erstellen Sie direkt unter unseren Zutaten unseren Ofen mit dem Schlüsselwort let, das zunächst ein leeres Array sein wird. Danach müssen wir die maximale Anzahl von Pizzen einstellen , die in unseren Ofen passen , der den Ofen istKapazität. Ich gehe für einen Wert von sechs. Als nächstes müssen wir die Pizzen im Auge behalten , die wir für eine bestimmte Bestellung angefertigt haben. Wenn Sie zum Beispiel Order 3 nehmen, heißt es vier Pizzen, Bestellung 2 hat drei Pizzen und wir müssen verfolgen, wie viele wir derzeit hergestellt haben. lass PizzasCompletedForOrder, der anfänglich Null sein wird. Jetzt haben wir diese, wir können unsere erste Funktion erstellen , die verwendet wird, um die Pizza in unser neues Ofen-Array zu schieben. Erstellen Sie nach unten eine Funktion namens AddTooven. Im Moment nimmt dieser Ofen den aktuellen PizzaName auf. Wir können das aus unserer Küche holen , wenn wir auf unsere Indexseite gehen. , Denken Sie daran, dass wir diese Spanne mit der ID von current_pizza haben, und dies speichert unseren Pizza-Namen. Schnappen Sie sich das mit document.QuerySelector ID, die current_pizza ist. Dann der InnerText. Bewahren Sie dies in einer Konstante namens PizzaName auf. Denken Sie daran, dass wir nicht immer eine Pizza ausgewählt haben. Derzeit haben wir den Wert von Schinken und Ananas, aber wenn wir auffrischen, ist dieses Element oft leer. Um dies zu überprüfen, geben wir eine if-Erklärung ein. Wir können prüfen, ob der PizzaName vorhanden ist. Wenn ja, fügen wir dies dem Ofen mit der Array-Methode namens push hinzu, übergeben den PizzaName und dann ein temporäres Konsolenprotokoll um zu überprüfen, ob dies alles funktioniert. Lass uns die Konsole haben, springe in den Browser. Wir können dieses Protokoll in nur einer Sekunde überprüfen, aber zuerst müssen wir diese Funktion tatsächlich aufrufen. Wir rufen diese Funktion auf, indem dem Button, den wir bereits haben, einen Klick-Listener hinzufügen , der sich in unserem Küchenbereich und direkt unter unserer aktuellen Pizza befindet. Habe diesen Button zu AddTooven. Es hat derzeit eine Klasse, aber wir können eine ID hinzufügen. Wähle diesen AddToOven aus und nimm diesen Ofen dann in unser Skript. documents.querySelector, der ID-Wert von AddTooven, dann können wir einen Ereignis-Listener hinzufügen. Ereignis-Listener hört einen Klick auf diese Schaltfläche, der eine Funktion namens AddTooven ausgeführt wird . Wir probieren das aus. bei der Open Console Klicken Sie bei der Open Console auf eine unserer Bestellungen. Wähle die Pizza aus. Derzeit nehmen wir Schinken und Ananas und lösen unseren Klickhörer mit Ofen aus und wir sehen, dass Schinken und Ananas auf das Array geschoben werden. Wir versuchen es mit Peperoni. Klicken Sie darauf und fügen Sie unserem Ofen immer wieder Pizzen hinzu. Großartig. Jetzt wissen wir, dass das funktioniert, wir können dies ein wenig erweitern und einen PizzaName in den Ofen geben. Derzeit sehen wir nur innerhalb des Arrays, aber wir müssen dies auch im Ofenbereich auflisten. Neben der Auflistung des PizzaName können wir auch die Zeit einstellen , die in den Ofen gestellt wurde. Dies liegt daran, dass wir später auch eine Kochzeit hinzufügen. Erstellen Sie dazu ein neues Objekt und wir tun dies innerhalb unserer if-Aussagen. Gleich darüber, wo es in den Ofen schiebt, erstellen wir ein Objekt namens PizzaForOven. Die erste Eigenschaft ist der PizzaName, der in der Variablen PizzaName gespeichert ist, die Sie bereits haben, und dann eine Eigenschaft namens timeAdded. Im Moment ist ein einfacher Platzhalterwert in Ordnung, wir werden später darauf zurückkommen. Der letzte Schritt besteht vorerst darin, die Konstante der Pizza für den Ofen in unsere Push-Methode zu integrieren. Kurz bevor wir dies testen, denken Sie daran, dass wir eine Variable namens PizzasCompletedForOrder hinzugefügt haben . Wir können dies um den Wert 1 erhöhen. Lassen Sie uns einfach überprüfen, dass alles in der Konsole funktioniert. Wir haben eine Pizza, fügen diese in den Ofen und da ist unser neues Objekt. Das Ofen-Array bekommt jetzt die Pizzen, wie wir sehen können. Als nächstes eine Funktion, um durch dieses Array zu laufen und sie im Ofenbereich anzuzeigen. Kurz nachdem wir unsere neue Pizza in den Ofen geschoben haben, rufen wir eine neue Funktion namens DisplayOvenItems auf. Wir nennen dies jedes Mal, wenn wir eine neue Pizza erstellen und sie dem Ofen hinzufügen, wodurch die Benutzeroberfläche aktualisiert wird. Wir haben das noch nicht erstellt, also fügen wir dies oben hinzu. Um innerhalb der Indexseite zu beginnen, müssen wir unseren Ofenbereich greifen und wenn wir uns unseren Code ein wenig ansehen, haben wir die Ofenverpackung mit der Überschrift Level 3 und dann dieses leere div mit der ID des Ofens, und hier fügen wir unsere neuen Pizzen hinzu. Wir können dieses Document.querySelector, die ID des Ofens, abrufen und dann setzen wir dies zuerst auf eine leere Zeichenfolge. Das räumt unseren Ofen aus, bevor wir ihn aktualisieren. Wickeln Sie unser Ofen-Array ein, und da dies kein Array ist, können wir forEach verwenden. Wir führen eine Funktion forEach-Wert darin aus, jeder Wert wird eine bestimmte Pizza sein , die wir in ein div einwickeln werden. const PizzaDiv ist gleich document.createElement, erstellt unseren div-Abschnitt. Wir fügen dazu eine Klasse für unser Styling hinzu, also ist PizzaDiv.className gleich pizza_div. Denken Sie daran, dass wir innerhalb unserer Starterdateien auch ein SVG-Bild für unsere Pizza haben. Dies wird verwendet, um jedes Mal im Ofen im Ofen anzuzeigen , wenn wir eine neue Pizza in den Ofen geben. Was wir tun können, ist, dass wir dies als Bild behandeln oder ein neues Bildelement erstellen. Wir haben document.createElement, die Bildelemente mit IMG. Dann können wir festlegen, dass die Quelleigenschaft unserer SVG entspricht. Dieser heißt pizza.svg und befindet sich auch im selben Ordner, und befindet sich auch im selben Ordner aber wir können dies mit seinem Namen referenzieren. Wir haben einen Wrapper mit einer Klasse, wir haben ein Bild, wir brauchen auch den Pizza-Namen. Um dies zu tun, können wir unsere Funktion namens BuildeLement nutzen , um diese Fotos zu erstellen und den Rückgabewert in einer Konstante namens PizzaName zu speichern . Unsere Hilfsfunktion, die BuildeElement ist, kann ein p-Element sein und da der PizzaName eine Variable sein wird, fügen wir dies in die hinteren Ticks ein, mit dem ganzen Symbol und dann kalibrieren dies und denken Sie daran, dass jedes unserer Ofenartikel in dieser Pizza-Variable aufbewahrt wird , damit wir auf Pizza oder Namen zugreifen können. Dies sind alle Elemente, die wir brauchen. Jetzt geht es nur darum , diese zu unserem PizzaDiv Wrapper hinzuzufügen . Wir wählen diesen PizzaDiv aus. Wir können append verwenden, um mehrere Werte hinzuzufügen und ein neues Bild auf PizzaName hinzuzufügen. Der letzte Abschnitt ist nun das Hinzufügen zu unserem Ofen. Genau wie oben verwenden wir QuerySelector, um unseren Ofen AppendChild in unseren PizzaDiv zu packen . Es ist ein bisschen los, aber lasst uns aktualisieren und testen, dass alles funktioniert. In eine neue Bestellung geben, die Pizza auswählen und die Peperoni in den Ofen geben. Es gibt unser Bild, das wir gerade hier kreiert haben, und auch unseren Pizza-Namen unten, Schinken und Ananas. Großartig, und das funktioniert jetzt alles. Wie bereits erwähnt, müssen wir immer noch zurückkommen, um tatsächlich in den Pizzen zu kreieren, aber wir wissen jetzt, dass dieser Schritt fertig ist, wenn wir es tun. 32. Starten & Beenden Des Spiels: In dieser Lektion habe ich einige Schritte gelöst , um Dinge selbst auszuprobieren. Was wir abdecken wollen, ist das Erstellen von zwei Funktionen. Eine Funktion wird verwendet, um das Spiel zu starten und eine zu beenden. Diese Funktionen werden von unseren HTML-Buttons aus aufgerufen, die wir in unserem Index sehen können. Dies ist der Spielkontrollbereich , in dem wir unsere beiden Buttons haben. Die Idee hinter diesen beiden Tasten besteht darin, die Benutzeroberfläche aufzuräumen nur die richtigen Dinge anzuzeigen, z. B. nur die Schaltfläche zum Ende des Spiels anzuzeigen wenn das Spiel tatsächlich läuft. Wir verwenden den Start-Game-Button, um mit den eingehenden Bestellungen zu beginnen und so weiter. Diese Funktionen werden auch später nützlich sein, wenn wir unserem Projekt Dinge wie Statistiken und Timer hinzufügen. Was wir tun müssen, ist zuerst unsere beiden Funktionen namens StartofGame und EndofGame zu erstellen . Dann können wir diese aufrufen, indem einen Ereignis-Listener der beiden Schaltflächen hinzufügen, die wir uns gerade angeschaut haben. Wir erstellen eine neue Variable, bei der das Spiel gestartet wird, die ein boolescher Wert sein wird. Dieser boolesche Wert wird wahr sein, wenn wir das Spiel starten , und falsch , wenn wir das Spiel beenden. Wir werden eine bedingte Überprüfung innerhalb von StartofGame durchführen, um aus dieser Funktion zurückzukehren, wenn gestartete Variable des Spiels wahr ist. Schritt 5, denken Sie daran, dass alle Bestellungen diese Klasse von order_wrapper haben . Ich werde all diese Bestellungen in unserer StartofGame-Funktion löschen . Da wir das Spiel noch nicht gestartet haben und CreateOrdersList für die Erstellung dieser Bestellungen verantwortlich ist . Wir können dies auch innerhalb unserer StartofGame-Funktion auf das CSS verschieben . Wenn das Spiel beginnt, zeigen wir die End-Schaltfläche an und blenden den Stopp-Button aus und machen dann den Rückwärtsgang, wenn das Spiel beendet ist. Nicht zu vergessen, dass unsere Schaltfläche zum Ende des Spiels ebenfalls entfernt oder ausgeblendet werden muss , wenn das Spiel anfänglich geladen wird. Wie immer können Sie diese selbst ausprobieren oder mitverfolgen, wenn Sie es vorziehen. unten daran, dass der erste Schritt darin besteht , unsere Funktionen zu erstellen. Die erste Funktion war StartofGame. Dann auch unsere EndofGame-Funktion. Beide Funktionen müssen aufgerufen werden, indem Sie auf die beiden Schaltflächen in unserem HTML klicken. Wir tun dies, indem wir unsere Start- und Endschaltfläche greifen und einen Ereignis-Listener hinzufügen, um diese Funktionen aufzurufen. Diese Tasten, bei der Idee der Start- und Endschaltfläche. Wir können diese jetzt mit dem document.query Selector abrufen. Hier ist der Hash. Zuerst der Start-Button. Fügen Sie einen Ereignis-Listener für ein Klickereignis hinzu, das eine Funktion namens StarTofGame auslöst . Dupliziere das. Die zweite ist für die EndBTN, die die entsprechende Funktion auslöst. Bewegen Sie auch unseren Event-Listener von oben nach unten , um diese gruppiert zu halten. Eigentlich möchte es nur einen Ereignis-Listener hinzufügen , um sicherzustellen , dass dies abgeschlossen ist. Bevor wir weiter gehen, können wir jeder dieser Funktionen ein Konsolenprotokoll hinzufügen , um zu überprüfen, ob sie alle korrekt funktionieren. Der erste ist Start. Die zweite für Ende. Dann springe in die Konsole. Trennen Sie einfach die Minuten ab, also werden wir einfach wieder anhängen. Da sind wir los. Zurück in die Konsole und unsere beiden Tasten oben. Start löst ein Konsolenprotokoll aus und das Ende funktioniert auch. Das ist Schritt 1 und auch Schritt 2 erledigt. Der nächste besteht darin, einen GameStarted Boolean zu erstellen. Machen wir das ganz oben und den Rest unserer Variablen. Lass GameStarted, was anfangs falsch sein wird. Wir können diese Variable aus unseren beiden Funktionen aktualisieren. Entferne die Konsolenprotokolle und wenn wir das Spiel starten, GameStarted gleich true. In der EndofGame-Funktion ist GameStarted dann gleich false. Wenn dieses Spiel gestartet wird oder nicht, wird es wirklich nützlich sein und insbesondere für die StartofGame-Funktion, werden wir einige Bereinigungsarbeiten ausführen , z. B. befehle. Wir wollen es nicht verwenden, um dieses Midgame versehentlich auszuführen. Wir können aus dieser Funktion zurückkehren, wenn dies zutrifft. Wenn GameStarted gleich true ist, kehren wir alle zu dieser Funktion bevor wir weiteren Code ausführen. Danach können wir alle Bestellungen aus dem vorherigen Spiel entfernen . Lassen Sie uns unsere Bestellungen abrufen und diese in einer Konstante mit document.getElementByClassName speichern . Wir verwenden hier den Klassennamen, weil denken Sie daran, dass wir diese Klasse von order_wrapper haben. Übergib das in Klammern. Dann können wir alle diese Bestellungen durchlaufen und entfernen. Wenn wir auf das Haupt-Array-Objekt mit einem Kapital A zugreifen, können wir Zugriff auf eine Methode haben, die von aufgerufen wird , um aus all diesen Elementen ein Array zu erstellen. Wenn Sie getElementsByClassName verwenden, wird eine HTML-Sammlung zurückgegeben. Dann können wir damit aus diesen Bestellungen ein neues Array erstellen . Die Methode von, die die Befehle übergeben. Jetzt haben wir das in ein Array konvertiert. Wir können Array-Methoden wie forEach verwenden , um für jede dieser Funktionen eine Funktion auszuführen. Wenn Sie die Funktion übergeben, speichert jede Bestellung sie in der Reihenfolge Variable. Greifen Sie auf diese individuelle Bestellung zu und rufen Sie dann die Methode zum Entfernen von JavaScript auf. Dies kümmert sich darum, diese Befehle zu entfernen , wenn wir ein Spiel zum ersten Mal starten, aber wir müssen sie auch überhaupt erstellen. Derzeit haben wir eine Funktion namens CreateOdersList. Wenn wir nach oben scrollen, um dies zu finden. Nur um diese Funktion zu erhalten, ist das Erstellen aller unserer Bestellungen verantwortlich . wäre sinnvoll, dies zu nennen , wenn das Spiel begonnen hat. Wenn wir gerade danach suchen, können wir sehen, dass dies gerade von innerhalb unseres Programms aufgerufen wird . Anstatt dies aufzurufen, sobald es geladen wird, schneiden wir dies fehl am Platz und verschieben es dann auf unsere neue StartofGame-Funktion. Jetzt sollten alle Bestellungen nur angezeigt werden, wenn der Benutzer auf diese Startschaltfläche klickt. Sparen wir uns das auf und probieren es aus. Jetzt, da wir unseren Funktionsaufruf verschoben haben, sehen wir die Bestellungen nicht, wie start. Jetzt erscheinen sie in der Seitenleiste. Die Bestellungen werden angezeigt und wir wissen, dass dieser Funktionsaufruf ordnungsgemäß funktioniert. Aber wir können nicht feststellen, ob die vorherigen Bestellungen geklärt wurden. Wo wir order.remove verwendet haben. Das spielt im Moment keine große Rolle , da alle Bestellungen desselben sind. Aber später werden wir zufällige Bestellungen generieren , die unterschiedlich sein werden. Als vorübergehende Maßnahme, um dies zu testen, kommentieren Sie unseren Funktionsaufruf. Dann können wir temporäre Elemente in unser HTML einfügen und überprüfen, ob dies entfernt wird. In der Reihenfolge Abschnitt von P-Elementen. Denken Sie daran, dass all diese die Klasse von order_wrapper in einem beliebigen Text darin platziert haben . Wenn wir das jetzt speichern, aktualisieren, können wir den ganzen Lauf sehen. Klicken Sie auf Start. Dieses Element wurde jetzt entfernt. Großartig, also wissen wir jetzt, dass das funktioniert. Wir können unsere temporären Elemente entfernen und auch unseren Funktionsaufruf wieder einführen. Dann ist der nächste Schritt Nummer 7 und 8. Dies dient dazu, die Eigenschaft style zu verwenden, um diese beiden Schaltflächen ein- und auszublenden. Sie im StartofGame oben in der Verwenden Sie im StartofGame oben in der Funktion document.QuerySelector. Schnappen Sie sich zuerst unseren Startknopf. Greifen Sie auf die Stileigenschaft der Anzeige zu. Wir können dies ausblenden, indem wir dies auf einen CSS-Wert von none festlegen. Duplizieren und dann für den End-Button setzen wir dies wieder ein, indem wir dies auf den Wert Inline setzen. Kopiere beides. Springe in die EndofGame-Funktion und füge diese ein. Dann könnten wir die Werte beider umkehren. Die Stopp-Taste wird mit dem Wert „Inline“ angezeigt , und dann kann die Schaltfläche „ Ende“ ohne entfernt werden. Probieren wir das mal aus. Aktualisieren. Klicken Sie auf Start und dadurch wird die Schaltfläche „Ende“ entfernt. Klicken Sie auf Ende und dies zeigt den Start-Button an. Sie werden auch bemerken, sobald die Seite geladen wird, sehen wir beide Schaltflächen. Da das Spiel noch nicht begonnen hat, wollen wir nur den Start-Button anzeigen. Wir verschieben dies, indem wir die Stileigenschaft der Anzeige auf „None“ festlegen. Dafür haben wir den Code bereits als unseren zweiten Wert hier drin. Kopieren Sie dies und dann können wir das oben in unserem Code aufrufen. Irgendwo um die Variablen herum ist in Ordnung. Aktualisieren. Die End-Schaltfläche wurde entfernt. Wir fangen an und wir sehen nur den Endknopf. Jetzt bin ich im Spiel. Wir sehen nur den Stopp-Knopf. 33. Einführung In Javascript Math: In diesem Abschnitt werden wir unser Speedy Chef-Projekt fortsetzen , aber wir werden uns auf praktische Mathematik, Datum und Uhrzeit der Funktionalität konzentrieren , die JavaScript bietet. Ab bald werden wir uns ansehen, wie wir JavaScript-Mathematik verwenden können , um zufällige Pizzen und Bestellungen zu generieren. Derzeit generieren wir mit diesem Orders-Array, das wir haben, bei jedem Spielstart nur dieselben drei Bestellungen , aber wir können neue erzeugen mehr Zufall haben. Diese Befehle werden weiterhin eingehen , während das Spiel läuft. Wir haben verschiedene Pizzen und auch verschiedene Arten von Pizzen für jede Bestellung. Um dies zu tun, benötigen wir zwei neue Funktionen ganz unten. Der erste wird GeneratneWorder heißen. Dies ist verantwortlich, wie es klingt, für die Erstellung einer neuen Bestellung mit einer Bestellnummer. Ich werde das analysieren, GenerateNeWorder. Dann wird diese zweite Funktion GenerateNewPizza heißen, und GenerateNewPizza erstellt zufällige Pizzen, die von unserer Bestellfunktion aufgerufen werden. Testen Sie dies mit einem Konsolenprotokoll und analysieren Sie das JavaScript-Mathe-Objekt. Kurz bevor wir das sehen können, müssen wir unsere Funktion aufrufen. Also schnappen Sie sich das und rufen Sie diese Funktion dann irgendwo unten auf. Aktualisieren, öffnen Sie das, und das gibt viel zurück. Wir haben viele verschiedene Eigenschaften und Methoden, und ich bin kein Mathematiker, also liegt ein Teil davon außerhalb meines Wissens. Aber du musst nicht gut in Mathematik sein, um etwas davon nutzen zu können. Es ist alles hier, um uns zu helfen. Es gibt einige Konstanten, die wir verwenden können , z. B. den Wert von Pi, mit dem Sie möglicherweise vertraut sind. Wir haben etwas namens Random, wenn wir nach unten scrollen, was eine Methode ist. Es ist das, was eine neue Zufallszahl zwischen Null und Eins erzeugt . Wir haben etwas namens Ceil and Floor zum Aufrunden oder Abrunden und wir werden uns diese in nur wenigen Augenblicken ansehen. Es gibt eine Methode, um auf die nächste Zahl zu runden. Wir können die kleinste und größte Zahl mit min und max finden , und auch viele andere. Gehen wir zurück zur Funktion und sehen, wie wir sie nutzen können. Springen Sie in GenerateWorder und ändern wir dies direkt unter unserem Konsolenprotokoll in Math.random, was eine der Methoden ist die wir gerade im Browser gesehen haben. Testen wir das mal. Wie bereits erwähnt, wird dies eine neue Zahl zwischen Null und Eins erzeugen. Null ist also enthalten, aber der Wert von eins ist nicht. Wir steigen nur auf den Wert von 0,999 wiederkehrenden. Oft brauchen wir diese Zahl, um einen anderen Bereich zu haben, z. B. der Wert von 0-10, 1-50, 0-100 und so weiter. Um dies zu tun, können wir in keinem Bereich auf Math.random analysieren. Stattdessen müssen wir dies mit dem Betrag multiplizieren, mit dem wir es multiplizieren möchten . Wenn ich dies mit dem Wert 100 multipliziere, ergibt uns dies einen Wert zwischen Null und 99. Denken Sie daran, dass Null und Eins das Original Math.random ist. Selbst wenn man 0 mit 100 multipliziert, wird uns immer noch 0 geben. Da 0,99 der höchste Wert ist, gibt uns die Multiplikation mit 100 den Wert von bis zu 99. Sparen Sie. Wir haben ein paar größere Zahlen in der Konsole. Lassen Sie uns das in einer Konstante aufbewahren. Ich kann das aus unserem Konsolenprotokoll ziehen, const random. Dann können wir diese Zufallszahl auf die nächste ganze Zahl aufrunden . Es war ein Beispiel. Anstatt 53,4 zu bekommen, können wir dies auf 54 runden. Wir tun dies, indem wir erneut das JavaScript-Mathe-Objekt zugreifen, eine Methode, die wir gerade in der Konsole gesehen haben , genannt Ceil, bei der wir unsere Konstanten von Zufall analysieren. Jedes Mal, wenn wir dies aktualisieren, wird dies auf die nächste ganze Zahl abgerundet. Wir haben dort tatsächlich ziemlich viel Glück, weil wir den Wert von 100 in der Konsole haben. Dies liegt daran, dass die ursprüngliche Zufallskonstante uns eine Zahl wie 99,9 gibt. Dann wird dies auf 100 abrunden . Mit dieser Aufrundung werden alle Zahlen, die mit Null beginnen , auf eins gerundet. Dies sollte uns eine Zahl zwischen 1 und 100 geben. Wir können abrunden, indem wir die Decke zu Boden wechseln. Aber Sie werden keinen großen Unterschied innerhalb der Konsole bemerken. Aber das wird abrunden, anstatt sich sogar als ganze Zahl zwischen 0 und 99 aufzurunden . Auch erwähnt, als wir uns das Mathe-Objekt anschauten, waren die Min-und Max-Methoden in der Konsole. Beginnen wir damit, den größten Zahlenwert zu finden. Um dies zu tun, erstellen wir eine neue Konstante namens höchste und setzen gleich Math.max. Math.max wird mehrere Werte aufnehmen. Wir gehen für 1, 77 und 34. Analysieren Sie einfach beliebige Zufallszahlen in hier und protokollieren Sie diese dann in der Konsole. In meinem Fall ist 77 der höchste Wert von hier. Dies wird in der Konsole zurückgegeben. Wie Sie auf ähnliche Weise erwarten würden, können wir auch den niedrigsten Wert speichern. Wir haben Math.min. Melden Sie sich hier eine beliebige Nummern an. Melden Sie diesen an der Konsole und es sollte den Wert von eins zurückgeben. Dies ist nicht immer praktisch , um unsere Zahlen in die Max- oder Min-Funktion einzuwickeln . Oft werden diese Zahlen in einem Array gespeichert. Dann müssen wir auf dieses Array zugreifen und herausfinden , welcher der höchste und niedrigste Wert ist. dies zu sagen, erstellen Sie eine neue Konstante namens Numbers und speichern diese in einem Array. Gespeicherte Zahlen sind in Ordnung. Zählen Sie diese aus. Zunächst einmal, vielleicht um das, was wir oben hatten, mit unserer höchsten zu reproduzieren wir oben hatten, mit unserer höchsten und dann unsere Zahlen auf Math.Max zu analysieren. Lass uns das machen und sehen, was passiert. Konsole protokolliert den Wert von höchster. Möglicherweise erwarten Sie, dass Sie den Wert von 77 erhalten. Nun, wenn wir dies speichern und aktualisieren, sehen wir den Wert einer Zahl in der Konsole. Der Grund, warum wir dies bekommen, ist dass wir in diesem Bereich ein Array analysieren und nicht die tatsächlichen Werte, nicht die tatsächlichen Werte die darin enthalten waren. Um die Werte aus diesem Array zu extrahieren und zu vergleichen, müssen wir die JavaScript-Spread-Methode verwenden , die auf den drei Punkten basiert. Aktualisieren Sie und lassen Sie uns den richtigen Wert zurück. Auch wenn Sie möchten, kann dies auch mit Math.min verwendet werden. Es funktioniert genauso und das andere Methoden und Eigenschaften dieses Mathe-Objekt verfügbar sind, wie wir bereits in der Konsole gesehen haben, abhängig von Ihren speziellen Anforderungen. Jetzt werden wir dies in die Praxis umsetzen, indem zufällige Pizzen und Bestellungen generieren. 34. Neue Pizzas mit Math generieren: Wir können das, was wir jetzt über JavaScript Math wissen, verwenden , um zufällige Pizzen und Bestellungen zu generieren. Lassen Sie uns zunächst unsere Funktion „Neue Bestellung generieren“ aus dem vorherigen Video löschen Funktion „Neue Bestellung generieren“ aus und neue Pizza generieren. Wir verwenden diese Funktion, um eine zufällige Pizza aus dem Array unserer Pizza zu generieren . Zu Beginn erstellen wir eine Zufallszahl zwischen eins und drei, um die Menge für jede Pizza zu generieren. Denken Sie daran, eine neue Zufallszahl zu erstellen , wir verwenden Math.random. Dies wird eine Zufallszahl zwischen Null und Eins erzeugen. Aber wir wollen dies auch zwischen eins und drei schaffen. Der erste Schritt besteht darin, Math.Ceil zu verwenden , um diesen Wert aufzurunden und diesen auszuschneiden. Wir verwenden Math.ceil und innerhalb der Klammern übergeben diese Zufallszahl. Mit diesem zwischen Null und Eins wird dies immer auf den Wert von eins abrunden. Aber wir wollen den Wert von 1-3, was bedeutet, dass wir diesen zurückgegebenen Wert mit 3 multiplizieren und diesen innerhalb der Konstante speichern müssen, die als Menge bezeichnet wird. Führen Sie dann ein Konsolenprotokoll aus, um zu überprüfen, ob dies funktioniert Sagen Sie dies, und wir müssen diesen Wert konsolenprotokollieren , indem wir generieren neue Pizza aufrufen. Ändert, aktualisiert 1, 3 und 2. Scheint alle Zahlen zu sein , die wir in unserem Sortiment benötigen. Dies ist unsere zufällige Menge, aber wir müssen auch eine zufällige Pizza auswählen. Kurz bevor wir dies tun, wollen wir letztendlich ein neues Pizza-Objekt kreieren , Const Pizza. Diese Pizza muss die Menge aufnehmen, die Sie bereits oben erstellt haben bereits oben erstellt und wir benötigen auch einen Pizza-Namen. Dies ist ein Schritt, den wir jetzt erstellen müssen. Kommentiere das aus, damit wir keine Fehler bekommen. Wir nehmen es konstant auf, um dies zu lagern, für alle zufällige Pizza. Dies wird eine zufällige Pizza aus unserem Pizza-Array auswählen . Denken Sie daran, dass die Arrays immer mit dem Wert Null beginnen und bis zum Ende unseres Arrays durchlaufen müssen. Wir schnappen uns das jetzt mit pizzas.length. Anhand eines ähnlichen Beispiels von oben kopieren wir dies ohne das Semikolon, geben es weiter. Wie wir wissen, wird dies einen Wert von 1-3 zurückgeben, aber wir brauchen einen Wert von Null bis hin zu pizzas.length. Um Null zu erhalten, verwenden wir Math.Floor, was uns derzeit den Wert von 0-2 gibt. Aber anstatt dies mit 3 zu multiplizieren, multiplizieren wir dies mit dem Wert von pizzas.length. Dies bedeutet auch, dass, wenn wir in Zukunft neue Pizzen hinzufügen, dies auch erledigt wird. Zurück zu dieser Namenseigenschaft können wir dies auf unsere zufällige Pizza setzen. Aber denken Sie daran, dass unsere zufällige Pizza eine aus dem Array auswählt. Wenn wir uns das Array ansehen, enthält dieses ein Objekt mit dem Namen, der Methode und den erforderlichen Schritten. Wir müssen nur auf die Name-Eigenschaft zugreifen, damit wir auf Randompizza.name zugreifen können. Schließlich ist es die Aufgabe, neue Pizza zu generieren , neue Pizza zu generieren. Das haben wir mit diesem Objekt gemacht, damit wir dies von unserer Funktion zurückgeben können. Gut, probieren wir das mal aus. Anstatt dies direkt unten zu nennen, legen Sie dies in ein Konsolenprotokoll, generieren Sie neue Pizza. Rufen Sie diese Funktion auf und aktualisieren Sie sie als unser erstes Objekt. Wir haben eine zufällige Menge von drei und den Namen Schinken und Ananas. Wieder ein Vegetarier, zwei Vegetarier und ein Huhn. Dies ist in der Tat die Hälfte der die geleistet wurde, um unsere neue Ordnung zu generieren. Wir haben alle Pizzen zurückgekehrt. Aber anstatt die Konsolenanmeldung, diesen Wert, müssen wir diesen aufrufen, um neue Ordnung zu erzeugen. Springen Sie in diese Funktion und wir erstellen zunächst eine neue Pizzas-Variable und setzen diese auf ein leeres Array. Dieses leere Pizzas-Array wird verwendet, um eine zufällige Anzahl von Artikeln für unsere Bestellung zu erstellen . Denn denken Sie daran, obwohl es neue Pizza erzeugt, mehrere Werte generiert, es ist immer noch nur ein Einzelposten. Wenn wir uns auffrischen, startet dies wieder. Was ich damit meine, wenn wir auf eine unserer Bestellungen klicken , ist zum Beispiel, wir nur in einer Zeile erzeugen, z. B. einen Schinken und Ananas oder zwei Peperonis. Pizzas werden eine Reihe all dieser Einzelposten speichern . In diesem Spiel beschränke ich die Anzahl der Einzelposten auf bis zu fünf, sodass wir nicht zu viele riesige Bestellungen haben. Wir wissen bereits, wie man eine neue Zahl zwischen eins und drei generiert. Lassen Sie uns dies kopieren, speichern dies in einer Konstante namens Auftragsposition nicht im Wert von drei, ändert sich in fünf, da wir eine Zahl zwischen eins und fünf haben, die Sie ändern können, wenn Sie möchten. Jetzt wissen wir, dass wir eine Zufallszahl zwischen eins und fünf haben. Als Nächstes erstellen wir eine Schleife, um jeden unserer Bestellungen, die aus dieser Funktion generiert werden, in unser Pizzas-Array zu schieben die aus dieser Funktion generiert werden . Wir wiederholen dies für den Wert der Auftragsposition. Übergeben Sie eine for-Schleife, ich werde zunächst auf eins eingestellt. Die Schleife läuft weiter dort, wo ich kleiner oder gleich dem obigen Wert des Bestellartikels ist, also ist dies 1-5. Dann werden wir nach jeder Schleife ich mit i plus plus erhöhen. Sie für unser leeres Pizzas-Array die Push-Methode, Verwenden Sie für unser leeres Pizzas-Array die Push-Methode, um einen neuen Wert hinzuzufügen. Der neue Wert, den es zu schieben gilt , ist dieser Wert, der von generieren neuer Pizza zurückgegeben wird . Wir sollten jetzt ein Pizza-Array haben, das auf eine Reihe von Einzelposten zwischen eins und fünf und dann auf die zufälligen Pizza-Objekte im Inneren eingestellt ist . Dies lässt uns jetzt unser Pizza-Array für die Bestellung übrig, aber jetzt müssen wir unsere Auftragsobjekte konstruieren. Dies erzeugt eine neue Konstante, in der diese gespeichert , genannt neue Ordnung, sei dies ein Objekt. Jede Bestellung benötigt eine eindeutige ID. Wir könnten weitermachen und eine lange Zufallszahl oder Zeichenfolge generieren . In diesem Fall ist eine einfache Bestellnummer in Ordnung. Was ich tun werde, liegt direkt außerhalb dieser Funktion, erstellt eine neue Variable namens Bestellnummer und setze diese auf die Punktlänge unserer Orders Array. Wenn unsere derzeitige Anzahl an Bestellungen drei beträgt, wird der Wert von drei zurückgegeben. Aber da wir am Ende dieses Arrays eine neue Reihenfolge erstellen , fügen wir am Ende plus eine hinzu. Es sollte immer einen mehr geben als die Anzahl der Bestellungen , die wir haben. Deshalb wird es einmalig sein. Wir können dies als ID übergeben von oben im Pizzas Array platzieren. Was wollen wir eigentlich mit dieser neuen Bestellung machen? Nun, oben, denken Sie daran, dass wir unser Orders-Array haben , das die drei Musterbestellungen enthält. Wir müssen bis zum Ende dieses Arrays drängen. Das ist ziemlich einfach. Wir werden unseren Orders.push-Platz in unserer neuen Bestellung und dann schließlich unsere Bestellnummer für das nächste Mal erhöhen , also fügen Sie die Bestellnummer plus plus hinzu. Dies sollte immer einmalig sein. Lasst uns unsere Funktion „ Neue Bestellung generieren“ nutzen, und wir rufen dies ganz unten auf und probieren es aus. Speichern und aktualisieren. Klicken Sie auf „Start“. Dann haben wir unsere drei ursprünglichen Bestellungen aus unserem Orders-Array und dann eine zufällige Reihenfolge unten. Wir haben die nächste Indexnummer von Ordnung vier. Wir haben eine zufällige Anzahl von Pizzen und auch einen zufälligen Namen. Lasst uns auffrischen und noch eins ausprobieren. Bestellen Sie vier, dieser ist ein bisschen länger und es hat vier separate Einzelposten. Denken Sie daran, wir könnten bis zu fünf Einzelposten haben. Das ist ein guter Fortschritt bei unserem Spiel und wir werden in der nächsten Lektion darauf aufbauen und nach einer gewissen Zeitverzögerung neue Bestellungen generieren und auch JavaScript Math erneut besuchen, wo wir uns mit die Canvas. 35. setInterval: Wir wissen, dass unsere Bestellungen funktionieren und auch zufällig generiert werden , sobald das Spiel beginnt. Aber wir wollen auch, dass sie während des gesamten Spiels immer wieder kommen. Dieses JavaScript bietet uns jedoch eine Methode namens setInterval, und setInterval führt eine Funktion nach einer gewissen Zeitverzögerung aus. Es ist auf dem Window-Objekt verfügbar, also können wir es einfach alleine aufrufen. Rufen Sie also setInterval auf, und setInterval wird zwei Dinge aufnehmen. Zuerst übergeben wir eine Funktion, die Sie ausführen möchten, und wir könnten eine neue Funktion direkt wie diese übergeben , oder wir könnten eine vorhandene Funktion mit ihrem Namen referenzieren. Die Funktion, die wir ausführen möchten, ist GenerateNeWorder, also geben Sie dies ohne die Klammern ein, und wir können dies jetzt auch von oben entfernen. Trenne es durch Komma. Wir geben eine Zeitverzögerung durch, und dies ist die Zeitverzögerung zwischen jedem Funktionsaufruf. Es ist auch in Millisekunden, also sind 3.000 Millisekunden 3 Sekunden gleich. Diese Funktion wird alle drei Sekunden aufgerufen. Wir prüfen, dass dies funktioniert, gehen zu unserer GenerateNewWorder-Funktion und wir können ein Konsolenprotokoll übergeben, das im Orders-Array platziert wird. Aktualisieren Sie den Browser. Nach drei Sekunden sollten wir ein Konsolenprotokoll mit vier Bestellungen sehen. Drei Sekunden später sehen wir fünf Bestellungen, sechs Bestellungen und so weiter. Gut. Jetzt wissen wir, dass das funktioniert. Zuvor haben wir eine Funktion namens CreateOrdersList erstellt . Schauen wir uns das mal an. Scrollen Sie nach oben und hier sind wir. Das ist unsere Funktion gerade hier. Diese Funktion hat das Orders-Array übernommen. Wir haben dann jede unserer Bestellungen durchlaufen und diese in unseren Bestellbereich aufgegeben. Alles, was wir jetzt tun müssen, ist diese Funktion jedes Mal aufzurufen , wenn wir eine neue Bestellung generieren. Anstelle unseres Konsolenprotokolls, das wir zuvor platziert haben, , entfernen Sie das Konsolenprotokoll und ersetzen Sie dieses durch CreateOrdersList. Sagen wir das und sehen , wohin uns das führt. Aktualisieren Sie den Browser. Nach drei Sekunden sehen wir, wie unsere Bestellungen durchlaufen werden. Wir haben die Nummer 1 bis vier, und die Sekunden später erhalten wir eine neue Reihe von Bestellungen. Das Problem hier ist jedoch, wir nicht nur die neuen Bestellungen hinzufügen die generiert wurden, sondern auch die bestehenden Bestellungen hinzufügen. Dies lässt uns jetzt zwei Probleme haben, die wir beheben müssen. Die erste ist, dass Bestellungen eingehen, bevor wir überhaupt den „Start“ -Button oben drücken. Die zweite, wie wir gerade gesehen haben, müssen wir nur die neuen Bestellungen hinzufügen, anstatt auch alle vorhandenen hinzuzufügen. Beheben Sie dieses Problem, wir können alle Bestellungen löschen , bevor wir unsere neuen zu diesem Abschnitt hinzufügen. Dies kann geschehen, indem Sie zur CreateOrdersList-Funktion gehen und den Bestellabschnitt löschen, bevor wir die neuen hinzufügen. Springen wir zurück zu CreateOrdersList. Hier geht's ganz oben. Bevor wir unsere Bestellungen in diesen Abschnitt aufnehmen, löschen wir dies mit documents.querySelector. Schnappen Sie sich unseren Bestellabschnitt, inneres HTML, und setzen Sie dies auf eine leere Zeichenfolge. Probieren wir das mal aus. Aktualisieren, gib diese drei Sekunden. Es gibt unsere ersten vier Befehle. Bestellung 5, das sieht gut aus. Bestelle 6, großartig. Diese kommen jetzt alle durch, aber anstatt alle bestehenden Bestellungen hinzuzufügen, fügen wir sie am Ende derjenigen hinzu, die bereits vorhanden sind. Das nächste, was wir lösen möchten, ist, diese Bestellungen erst zur Seitenleiste hinzuzufügen , nachdem wir tatsächlich auf den „Start“ -Button geklickt haben. Anstatt unser setInterval unten direkt aufzurufen, können wir dies entfernen, dies fehl am Platz beenden und es in eine Funktion namens OrderStimer wickeln. Leg das wieder rein. Denken Sie daran, wenn wir auf den Start-Button klicken, löst dies unsere Funktion namens StarTofGame aus. Wenn wir das gerade hier finden, können wir unsere Funktion aufrufen, die der OrderStimer war. Sagen wir das und probieren Sie es aus. Aktualisieren Sie zuerst und geben Sie diese drei Sekunden und wir sollten jetzt keine Bestellungen in der Seitenleiste sehen. Gut. Dies hat die anfängliche Belastung gestoppt. Klicken Sie auf die Schaltfläche „Start“. Jetzt fängt unsere Bestellung an zu kommen. setInterval ist auch nützlich , um einen Countdown-Timer für das Spiel zu erstellen, daher läuft es nur für eine bestimmte Zeit. Sobald Sie auf „Start“ klicken, beginnen wir einer bestimmten Anzahl von Sekunden mit einem Countdown-Timer. Dafür brauchen wir einige Variablen, um dies im Auge zu behalten. Springen Sie nach oben, wo wir den Rest unserer Variablen haben. Die erste wird eine Konstante namens GameLength sein . Stellen Sie dies auf eine beliebige Anzahl von Sekunden ein, die Sie möchten. Meiner wird 300 sein, und der zweite, der das Schlüsselwort let verwendet, da wir dies aktualisieren werden, wird der CountDownTime entsprechen . Countdown-Zeit beginnt bei der ersten GameLength. Dann reduzieren wir es mit setInterval um eine Sekunde. Anfangs setzen wir dies auf GameLength, dann reduzieren wir es, während das Spiel weitergeht. Wir müssen dies auch auf dem Bildschirm anzeigen. Wir können dies mit document.QuerySelector machen. Wir müssen einen Abschnitt finden, der oben steht , also neben unseren Buttons. Dies ist der Spielkontrollbereich, in dem wir die Schaltfläche Start und Ende des Spiels haben , und wir haben auch eine Spanne mit der ID von GameLength. Geben Sie dies ein, stellen Sie den InnerText ein. Da wir die GameLength-Variable einfügen, müssen die Backticks sagen, dass müssen die Backticks sagen, dass die Spiellänge die Variable einfügt, die unsere GameLength-Nummer ist, gefolgt vom Text von Sekunden. Laden Sie neu und oben steht unser Text. Wir müssen jetzt zwei Dinge tun. Die erste besteht darin, eine Funktion zu erstellen , um diese Variable um eine Sekunde abzuziehen. Dann können wir diese Funktion einmal jede Sekunde mit setInterval aufrufen . Erstellen Sie zuerst unten unsere neue Funktion namens CountDownTimer, die dafür verantwortlich sein wird, unsere Variable zu erfassen , nämlich Countdown Time und Abzug dieser um eine Sekunde. Jedes Mal, wenn wir dies tun, müssen wir auch die gleichen Elemente oben aufgreifen die gleichen Elemente oben aufgreifen und mit dieser neuen Zeit aktualisieren. Genau wie oben verwenden wir document.QuerySelector, übergeben es im selben Abschnitt, der GameLength, der InnerText war , öffne die Backticks. Diesmal sagen wir, dass die verbleibende Zeit unserer Variablen gleich oben ist. Diese Funktion macht eigentlich nichts alleine. Es ist einfach dafür verantwortlich, unsere CountDownTime-Variable auszuwählen und dann in einer Sekunde abzuziehen. Um dies auch der vorhandenen Variablen zuzuweisen, müssen wir auch in ein Gleiches platzieren, und dies fügt dann dem DOM hinzu. Diese Funktion ist für den Abzug in einer Sekunde verantwortlich, aber wir müssen diese Funktion immer noch jede Sekunde aufrufen. Um dies zu tun, springen wir in unsere Spielstartfunktion ein. den unteren Bereich setzen wir noch einmal Interval, In den unteren Bereich setzen wir noch einmal Interval, übergeben unsere Funktion, die den CountDownTimer ist , der jede Sekunde ausgeführt wird. Probieren wir das mal aus. Aktualisieren Sie und wir werden unseren Text ganz oben sehen. Du kannst anfangen. Dann beginnt unser Timer herunterzuzählen. Wenn wir jedoch noch einmal damit beginnen, werden Sie ein kleines Problem bemerken. Wenn wir genau hinschauen, beginnt der Countdown nicht für die erste Sekunde. Wir klicken. Wir müssen eine Sekunde vor dem Countdown warten. Dies passiert, weil setInterval die Funktion nicht sofort aufruft. Stattdessen wartet es zuerst auf die Zeitverzögerung und ruft dies dann danach auf. Dies ist eine ziemlich einfache Lösung. Alles, was wir tun müssen, ist unseren Countdown-Timer zu greifen und dies einmal anzurufen, kurz bevor unser Timer beginnt. Wenn wir jetzt aktualisieren, klicken Sie auf „Start“, unser Timer beginnt sofort. So können wir setInterval verwenden , eine wirklich nützliche Methode zum Lernen, ebenso wie eine andere Timing-Funktion, die als setTimeout bezeichnet wird. Das werden wir als Nächstes behandeln. 36. setTimeout: setInterval, das wir uns gerade angeschaut haben, ruft wiederholt eine Funktion auf oder führt einen Code mit einer Zeitverzögerung zwischen jedem Anruf aus. Eine andere Timing-Methode, die wir zur Verfügung haben , heißt setTimeout. setTimeout, um eine Funktion oder einen Code einmal nach einer Zeitverzögerung auszuführen . Wir können dies verwenden, um die EndofGame-Funktion auszuführen sobald der Timer hochgefahren ist. Es sieht ähnlich aus wie setInterval. Werfen wir einen Blick auf das ganz unten. Dieser ist setTimeout, das wie setInterval auch zwei Dinge aufnimmt. Erstens ist der Code, den wir ausführen möchten, und in unserem Fall möchten wir die EndofGame-Funktion ausführen. Trennen Sie es durch ein Komma, die Zeitverzögerung, bevor Sie diese Funktion in Millisekunden erneut ausführen . 2000 ist also eine Verzögerung von zwei Sekunden. Wir können diese Arbeiten testen, indem wir in die EndofGame-Funktion springen und uns bei der Konsole anmelden. Irgendwelche SMS, probier das aus. Also lasst uns das Ende machen. Öffne die Konsole. Gibt uns zwei Sekunden und unsere Funktion wird jetzt aufgerufen. Aber wir möchten, dass diese Funktion am Ende des Spiels ausgeführt wird. So können wir einstellen, dass die Zeitverzögerung der Länge des Spiels entspricht. Wir haben dies ganz oben in einer Variablen gespeichert, die als Spiellänge bezeichnet wird derzeit auf 300 Sekunden eingestellt ist. So funktioniert das, anstatt 300 Sekunden auf unseren Funktionsaufruf warten zu müssen , ich lasse dies einfach auf einen kleinen Wert wie drei senken. Ganz nach unten können wir dies jetzt als Zeitverzögerung festlegen . Da wir wissen, dass die Spiellänge in drei Sekunden liegt , wobei eine Zeitverzögerung in Millisekunden liegt, was bedeutet, dass wir dies konvertieren müssen , indem wir dies mit 1000 multiplizieren. Okay, versuchen wir es noch einmal, aktualisieren, und nach drei Sekunden wurde unsere Funktion jetzt aufgerufen. Also ein bisschen Bereinigungsarbeit, bevor wir weitermachen, entfernen wir unser Konsolenprotokoll und die Funktion zum Ende des Spiels. Sie die Spiellänge wieder auf 300 Sekunden ein. Gut. Das funktioniert jetzt also gut, aber um diesen Code vor dem Laufen zu bewahren , wenn das Spiel nicht gestartet wird, können wir dies in eine Funktion umwickeln. Erstellen Sie also eine Funktion namens GameTimer, legen Sie diese hinein und diese Funktion kann jetzt aufgerufen werden , wenn das Spiel zuerst startet. Gehe also zu unserer Spielstartfunktion , rufe unseren GameTimer an. Immer noch innerhalb dieser Funktion können wir eine Nachricht an den Benutzer weitergeben. Was wir also tun werden , ist, wenn wir uns diesen Nachrichtenbereich ansehen, werden wir in eine Nachricht schreiben, in der wir sagen: „Chef, unsere ersten Bestellungen kommen unsere ersten Bestellungen kommen ein, sobald das Spiel beginnt.“ Wir verwenden setTimeout und löschen dies dann nach einer gewissen Anzahl von Sekunden. Die Botschaft ist also nicht dauerhaft da. Um ganz unten zu beginnen, greifen wir den Abschnitt mit dem Abfrage-Selektor auf. Werfen wir einen Blick darauf, was der Selektor für diesen Teil im Nachrichtenbereich ist diesen Teil im Nachrichtenbereich und wir haben dieses p mit der ID der Nachricht. Dies ist eine ID, also benutze einen Hash wähle den InnerText-Inhalt aus. Meine Botschaft lautet : „Chefkoch, unsere ersten Befehle kommen herein.“ Kurz danach führen wir dann nach drei Sekunden eine Funktion aus, um diese Nachricht vom Bildschirm zu entfernen. Wieder einmal können wir setTimeout verwenden. Wie wir bereits erfahren haben, können setTimeout und setInterval entweder eine Funktion mit ihrem Namen aufrufen eine Funktion mit ihrem Namen oder eine Funktion direkt übergeben. Wir können diese Codezeile kopieren und diese einfügen. In der Tat werden wir diese Klammern kurz bevor wir das tun . Dies muss auf ein Gleiches festgelegt werden da InnerText eher eine Eigenschaft als eine Methode ist. Das Gleiche gilt für unseren zweiten. Lassen Sie uns diese als leere Zeichenfolge einstellen , und kurz nach unseren Klammern oder den geschweiften Klammern können wir die Zeitverzögerung von 3000 Millisekunden hinzufügen. Aktualisieren, klicken Sie auf „Start“ und unsere Nachricht wird jetzt im Nachrichtenbereich platziert und drei Sekunden später wurde sie nun entfernt. Gut. Dies ist also eine Einführung in JavaScript-Timer, die setInterval und setTimeout verwenden. Sie können sehen, wie nützlich es in solchen Projekten sein kann. Wir haben auch noch ein paar Timer, die wir sehr bald hinzufügen müssen. Aber als Nächstes werden wir uns ansehen, wie diese Timer gelöscht werden können, wenn sie nicht mehr benötigt werden. 37. Clearing: Wir haben diese beiden Timer jetzt abgedeckt, was setTimeout und auch setInterval dieser Methoden war . Habe auch eine klare Zählung Teil 2 von CleArtimeOut und auch ClearInterval. Diese klaren Methoden stoppen die Timer, wenn wir sie nicht mehr brauchen, und dies ist nützlich, wenn das Spiel vorbei ist. Wir können Dinge wie den Countdown stoppen, damit wir bei Bedarf neu starten können. Verbrauchen Sie keine Ressourcen des Browsers unnötig. Um einen Timer löschen zu können, müssen wir zuerst den ursprünglichen Timer in einer Variablen speichern . Zuallererst haben wir unseren OrderStimer, der unser setInterval enthält. Wir verweisen darauf in einer Variablen namens orderTimerRef, die einer leeren Zeichenfolge entspricht. Nun zu dieser nächsten Funktion haben wir den CountDownTimer, darin kein Timeout direkt enthält. Aber wenn wir zuerst einen Blick darauf werfen, heißt dieser mit setInterval. Wir werden direkt darüber verfügbar sein. Dieser ist der CountDownTimerRef. Auch eine leere Zeichenfolge. letzte ist der GameTimerRef. Beachten Sie hier, wie wir diese linken Variablen außerhalb jeder Funktion deklariert haben . Dies liegt daran, dass wir später in anderen Teilen unseres Codes nicht mehr darauf zugreifen können, wenn wir sie innerhalb der Funktion deklarieren später in anderen Teilen unseres Codes nicht mehr darauf zugreifen können, wenn wir sie . Wir müssen auf diese zugreifen, um die Timer zu löschen. Wir werden dies in einem späteren Abschnitt ausführlicher behandeln. Dieser erste wird unserem setInterval entsprechen. Die Spiel-Timer-Referenz entspricht unserem setTimeout. Wissen Sie auch, dass dieser mittlere, der CountDownTimerRef, unser Timeout nicht direkt enthält. Was wir tun können, ist zu unserer Funktion zu gehen, nämlich dieses StartofGame, und das dort einzurichten. Also diese StartofGame-Funktion. Stellen Sie den CountDownTimeRef auf den gleichen Wert von setInterval ein. Diese werden jetzt alle innerhalb von Variablen gespeichert. Kurz bevor wir das klären, müssen wir zuerst beweisen, dass sie laufen. Konsolenprotokoll kann uns dabei in unserer GenerateNewWorder-Funktion helfen. Funktion GenerateWorder, in ein Konsolenprotokoll platzieren. Es ist eigentlich in Ordnung, wie zum Beispiel Ordnung. [unhörbar] der Browser und aktualisieren. Starte das Spiel. Unser Timer beginnt zu Countdown. Wir sehen, dass unsere Nachricht jetzt nach drei Sekunden entfernt wurde . Unsere Bestellungen kommen immer noch ein, und auch unser Konsolenprotokoll hier. Aber du wirst feststellen, wenn wir auf „Ende“ klicken, unser Spiel beenden, unser Timer zählt immer noch runter, unsere Bestellungen kommen immer noch. Um dies zu beheben, können wir alle diese Timer löschen , wenn wir die EndofGame-Funktion aufrufen. Werfen Sie einen Blick darauf und dann rufen wir drinnen die ClearInterval-Methode analysieren in unserer OrderTimerRef. Das zweite ist auch ein Intervall, daher verwenden wir ClearInterval. Dies ist der CountDownTimerRef. Für den dritten war unser Game-Timer ein Timeout. Also benutzen wir CleArtimeOut dafür. Probieren Sie das noch einmal aus. Aktualisieren. Startet unser Spiel. Sehen Sie sich den Countdown an, wir sehen die Befehle. Klicken Sie auf die Schaltfläche „Ende“. Alles wurde jetzt gestoppt. Wenn wir erneut auf den „Start“ -Button klicken, alles von dort weiter, wo wir aufgehört haben. Wir sehen, dass der Timer von dort fortgesetzt wird, wo er angehalten wurde, und auch die Bestellungen kommen immer wieder von dort her, wo sie aufgehört haben. Aber das ist in Ordnung, wir werden sehr bald einige Bereinigungsarbeiten durchführen , um diese Probleme zu beheben. Die Hauptsache hier ist, dass unsere Timer jetzt gestoppt werden können, wenn sie nicht mehr benötigt werden. 38. Einführung In Javascript Datum: Viele Anwendungen und Websites erfordern, dass Sie sich des aktuellen Datums bewusst sind. Wir können das Anmeldedatum eines Benutzers, die Zeit zwischen zwei Ereignissen und vieles mehr verfolgen die Zeit zwischen zwei Ereignissen , aber dieses JavaScript verfügt über einige integrierte Objekte, die uns helfen können. Zu Beginn können wir date als Funktion, genau wie diese, mit den Klammern aufrufen . Speichern Sie dies dann innerhalb einer Variablen , dieses Datum entspricht unserer Datumsfunktion. Dann probieren wir das mit einem Konsolenprotokoll aus. Platzieren Sie die Datumsvariable und sehen Sie, was passiert. Aktualisieren und in die Konsole, die dann das aktuelle Datum und auch die Uhrzeit als String zurückgibt , ebenso wie die Konstruktorfunktion, die wir zuvor beim Erstellen eines neuen angesehen haben Objekte, die ich in das neue Schlüsselwort eingefügt habe. Mit dem neuen Datum können wir jedoch auch einige Werte übergeben , um auch ein anderes Datum zu erstellen. Springen Sie in die Klammern, damit wir im Jahr, die Indexnummer des aktuellen Monats, den Tag, die Stunden, Minuten, Sekunden und Millisekunden passieren können die Indexnummer des aktuellen Monats, den Tag, . Wir platzieren jedes Jahr, das wir wollen, dann den Monatsindex, der ebenfalls bei Null beginnt. Der Januar ist Null und der Dezember ist 11. Als Nächstes das Datum. Speichern und aktualisieren Sie dies in der Konsole. Dies spiegelt jetzt ein Datum wider , das wir gerade eingegeben haben. Dies bedeutet, dass diese Konstruktorfunktion uns die Möglichkeit gibt, entweder das aktuelle Datum abzurufen oder ein beliebiges Datum festzulegen , das wir möchten, genau so. Die Arbeit mit solchen Datumswerten kann schwierig sein. Wenn wir zwei verschiedene Daten vergleichen möchten, müssen wir möglicherweise die aktuelle Zeichenfolge genau wie in der Konsole verwenden, unsere Zeichenfolge aufteilen und dann jedes einzelne Stück vergleichen. Wie Sie sich vorstellen können, ist dies keine leichte Aufgabe. Ein alternatives Datumsformat besteht darin, eine Methode namens now zu verwenden. Wir können den Inhalt ab Datum verschieben. mit dem neuen Schlüsselwort Rufen Sie es mit dem neuen Schlüsselwort „Now-Methode“ auf. Probieren wir das aus und sehen , was in der Konsole passiert. Dies gibt uns eine merkwürdig aussehende Zahl zurück. Es mag etwas seltsam aussehen, aber es ist eine Zahl in Millisekunden seit dem 1. Januar 1970 UTC. Wenn wir weiter auffrischen, wird diese Zahl jedes Mal, wenn wir dies tun , weiter zunehmen. Obwohl es immer noch nicht ideal ist, kann es einfacher sein, Daten oder Zeiten zu vergleichen. Wenn sich ein Benutzer beispielsweise auf unserer Website anmeldet, können wir Date.now verwenden, um die aktuelle Uhrzeit in Millisekunden zu speichern. Bei zukünftigen Besuchen können wir dann die aktuelle Uhrzeit abrufen und die Differenz zwischen diesen beiden Zahlen vergleichen . Die Millisekunden müssten auch in Sekunden, Minuten und Tage konvertiert werden , je nachdem, was Sie damit tun mussten. Wir werden uns das in einem kommenden Video ein wenig genauer ansehen. Am Datumsprototyp ist eine Reihe von Methoden verfügbar , mit denen wir auch das Datum festlegen können. Werfen wir einen Blick auf diese in der Konsole. Wir könnten die Now-Methode verschieben. Greifen Sie auf das Prototyp-Objekt zu, aktualisieren Sie es und öffnen Sie es. Wie wir gerade gesehen haben, haben wir die Datumskonstruktorfunktion und viele weitere Anwendungsfälle, z. B. die Stunden abrufen, das vollständige Datum erhalten, den Tag abrufen. Wir haben auch die Setter, damit wir das aktuelle Datum einstellen können, wir können die Uhrzeit einstellen. Ich werde nicht all dies durchgehen, da sie sehr spezifisch für verschiedene Anwendungsfälle sind , aber es funktioniert wie jede andere Methode. Verwenden Sie sie, da sich Methoden auf Objekten befinden. Wir müssen erneut das Schlüsselwort new verwenden, um ein neues Datumsobjekt zu erstellen. Lassen Sie uns dies entfernen, in die Klammern legen und das neue Schlüsselwort hinzufügen. Eine der Methoden, die wir gerade in der Konsole gesehen haben , war GetMonth. Wir haben das für unsere Datumsvariable. Mal sehen, was in der Konsole zurückgekehrt ist. Dies gibt das Datum des aktuellen Monats zurück. Auch dies beginnt mit Null, also ist der Januar Null, und der Februar ist die Nummer 1 und so weiter. GetDay gibt das Datum der aktuellen Woche zurück. Probieren wir das mal aus. GetDay. Das ist es, was man mit dem Prototyp schon mal gesehen hat. Wir haben auch Zugriff auf einige Methoden, die auch das Datum festlegen. Vielleicht haben wir eine Veranstaltung , die wir bereits gespeichert haben , und vielleicht möchten wir den Monat oder das Jahr ändern, was wir genau so machen könnten. Hier haben wir das aktuelle Basisdatum. Lasst uns das einfach entfernen. Darunter ändern wir den aktuellen Monat in alles, was Sie möchten. Lassen Sie uns dies innerhalb einer Konstante speichern , die als aktualisiertes Datum bezeichnet wird. Schnappen Sie sich unsere aktuelle Datumsvariable, greifen Sie auf eine unserer festgelegten Methoden wie setMonth platzieren Sie eine Indexnummer von 11, die Dezember sein wird. Dann ein zweites Konsolenprotokoll direkt darunter, wieder mit dem Datum. Wir sollten in der Lage sein, die aktualisierte Version mit unserem zweiten Protokoll zu sehen . Aktualisieren Sie das. Wir beginnen mit März und legen dann unseren Monat auf Dezember fest. Dies ist eine grundlegende Einführung in das JavaScript-Datum. Als nächstes werden wir dieses Datum und die Uhrzeit innerhalb unseres Projekts nutzen und verfolgen, wie lange die Pizzen im Ofen sind. 39. Die Kochzeit Einstellen: Was wir im vorherigen Video gelernt haben, besteht die Aufgabe nun darin, die Kochzeit für die Pizza mit JavaScript-Datum festzulegen . Wir werden die Beispiele aus dem vorherigen Video verschieben . Jetzt haben wir in der Funktion „ Zum Ofen hinzufügen “ früh ein Platzhalterdatum erstellt. Werfen wir einen Blick auf diese Funktion im Ofen. Hier legen wir fest, dass die hinzugefügte Zeit eine Zeichenfolge ist. Dies kann jetzt aktualisiert werden, um das aktuelle Datum dynamisch zu nutzen . Wie wir gesehen haben, greifen wir auf das Date-Objekt und die jetzt aufgerufene Methode zu. Denken Sie daran, dass date.now in Millisekunden sein wird, sodass wir dies nach Ablauf einer bestimmten Anzahl von Millisekunden aus dem Ofen entfernen können . Aber bevor wir dies tun, müssen wir die Garzeit einstellen , die wir anwenden möchten. Diese Variable ist perfekt, also springe zum Rest der Variablen hoch. Richten Sie eine Konstante ein, die als Garzeit bezeichnet wird, die 20 Sekunden entspricht. Ganz unten in unserem Skript können wir hier eine neue Funktion platzieren, die alle Pizzen im Ofen einmal pro Sekunde durchläuft. Wir entfernen dann alle Pizzen, die für unsere Garzeit vorhanden waren . Funktion, überprüfen Sie den Ofen. Um den Ofen einmal pro Sekunde zu überprüfen , können wir ein festgelegtes Intervall verwenden. Wenn Sie möchten, können Sie eine separate Standalone-Funktion erstellen oder wir können direkt in die Funktion platzieren. Diese Funktion wird alle Elemente in unserem Ofen-Array durchlaufen. Dieses Ofen-Array wird in der Ofenvariablen gespeichert, Schleife wird für jeden verwendet. Auch hier nimmt für jeden eine Funktion ein, die Zugang zu jeder unserer einzelnen Pizzen im Ofen hat . Am Ende unserer festgelegten Intervallklammern können wir eine Zeitverzögerung zwischen jedem unserer Funktionsaufrufe platzieren , die jede Sekunde sein wird. Für jeden Artikel oder jede Pizza in unserer Schleife steht vor einer if-Aussage. Diese if-Anweisung wird die Zeitdifferenz jede Sekunde überprüfen . Wir können sagen, ob Datum, aber jetzt, was die aktuelle Uhrzeit in Millisekunden ist, dann die Garzeit abziehen. Denken Sie daran, dass die Kochzeit in Millisekunden beträgt. Konvertieren wir das, multiplizieren Sie dies mit 1000. In seiner aktuellen Berechnung wird uns die Zeit vor 20 Sekunden geben . Wir können prüfen, ob dieser Wert größer ist als die aktuelle pizza.time hinzugefügte Eigenschaft. Wenn ja, ist es in mehr als 20 Sekunden her und wir müssen es aus dem Ofen nehmen. Greifen Sie auf unseren Ofen zu Die Shift-Methode, mit der das 1. Element aus unserem Array entfernt wird . Wir müssen auch auf den 1. Artikel zugreifen, denn denken Sie daran, dass der 1. Artikel am längsten im Ofen sein wird. Dies wird immer der nächste sein, der entfernt werden muss. Nachdem wir diesen Artikel aus dem Array entfernt haben, müssen wir den Ofeninhalt mit der Funktion zurücksetzen , bei der ein Objekt angezeigt wird, das den Ofen effektiv neu zeichnet. Wir können hier auch die Anzahl der Pizzen verfolgen , die wir gekocht haben, indem wir eine Variable erhöhen. Die Variable der kompletten Pizzen erhöht sich mit Plus Plus. Wir haben das noch nicht erstellt, also springen wir mit den restlichen Variablen nach oben. Lassen Sie abgeschlossene Pizzen mit dem Wert von Null beginnen, und dieser Abschnitt wird später nützlich sein wenn wir unser Spiel hinzufügen . Schließlich haben wir diese Funktion tatsächlich erstellt, aber wir haben sie noch nicht aufgerufen. Was wir tun müssen, ist unsere Check-Ofen-Funktion aufzurufen , wenn wir das Spiel starten. Springen zum Start der Spielfunktion, platziert unten unten. Probieren wir das mal aus. Aktualisieren Sie die Seite. Beginn des Spiels. Klicken Sie auf eine beliebige Bestellung, fügen Sie diese dem Ofen hinzu und fügen Sie noch ein paar hinzu. Gib diese 20 Sekunden und unsere Pizza sollte dann entfernt werden. Der erste ist weg, oder der zweite kurz danach. Gefolgt von unseren letzten beiden Pizzen. 40. Einführung In Die Leinwand & Co-Ordinates: Wir können für dieses Projekt immer noch in unserem Projekt bleiben und uns unten einige Beispiele ansehen. Dieses Video behandelt einige der Canvas-Grundlagen. Dann werden wir im Rest dieses Abschnitts unsere Pizzen zeichnen und die verschiedenen Beläge zeigen, während wir sie hinzufügen. Lassen Sie uns zunächst einen wesentlichen Teil behandeln, und dies ist die Verwendung von Koordinaten zu verstehen. Es gibt ein HTML-Element namens Canvas, das es uns ermöglicht , mit JavaScript darauf zu zeichnen. Wir legen die Breite und die Höhe der Leinwand und können dann mit Koordinaten in diesem pixelähnlichen Raster navigieren . Die X-Achse verläuft von links nach rechts und die Y-Achse verläuft von oben nach unten. Mit diesen X- und Y-Positionen können wir zu einer beliebigen Stelle auf der Leinwand wechseln und x,0, y,0 ist die obere linke Ecke. Wir können dann jeden Betrag, den wir wollen, wie wir in diesem Beispiel sehen möchten, über oder nach unten bewegen , wobei x gleich 10 und y der Wert von 3 ist. Wir werden bald sehen, wie das Verständnis dieser Koordinaten für das Zeichnen auf der Leinwand unerlässlich ist. Zurück zu unserem Projekt und in unsere HTML-Datei. Wir haben bereits ein Canvas-Element eingerichtet. Wenn wir einen Blick auf unseren Küchenbereich werfen, haben Sie diese Leinwandelemente mit der ID des Pizzabereichs. Es hat die Breite von 250 und auch die Höhe von 250 Pixel. Springen Sie in unser Drehbuch und gehen wir ganz zum Ende unseres Drehbuchs. Erstellen Sie eine Konstante namens Canvas , um diese in zu speichern. Wie alle anderen Elemente können wir etwas wie document.queryselector verwenden. Wie wir gerade gesehen haben, können wir einen Ausweis weitergeben. Dieser ist gleich pizza_area. Dann können wir eine Methode namens GetContext aufrufen. Nehmen Sie unsere Variable und rufen Sie die getContext-Methode auf. Eine Reihe von 2D übergeben. In diesem Zusammenhang ist ein Objekt, das Eigenschaften und Methoden enthält , mit denen wir auf die Leinwand zeichnen können . Wir werden nur die 2D-Funktionen für diese Beispiele benötigen . Installieren Sie dies innerhalb einer Variablen oder einer Konstante, die im Allgemeinen CTX genannt wird, aber dies kann alles genannt werden, was Sie möchten. Bei Verwendung der Leinwand sind zwei Konzepte, die wichtig zu verstehen sind , Strich und Füllung. Strich ist wie eine Bleistiftlinie oder ein Umriss und Füllung füllt, genau wie es klingt, eine Form mit einer Volltonfarbe. Um ein Rechteck zu zeichnen, haben wir StrokeRect und auch die FillRect Methode. Werfen wir zunächst einen Blick auf StrokeRect. Obwohl gezeichnete Features im Kontext verfügbar sind. Um den Umriss eines Rechtecks zu zeichnen, verwenden wir StrokeRect und geben dann vier Werte ein. Die ersten beiden, wie wir es in den Folien gesehen haben, sind die X- und die y-Position für die obere linke Ecke unseres Rechtecks. Wenn wir möchten, dass dies oben links beginnt, setzen wir dies auf 0,0. Dann haben wir die Breite und die Höhe des Rechtecks , das Sie zeichnen möchten. Dies könnte entweder ein Rechteck sein oder auch zum Zeichnen eines Quadrats verwendet werden , wenn wir gleiche Werte übergeben . Werfen wir einen Blick auf das. Wir sagen dies und springen in den Browser, aktualisieren dies und wir sehen den Umriss unserer 200 Pixel mal 200 Pixel Pixel Quadrat. Sowie auch fest codierte Werte wie diese übergeben . Wir können auch von oben auf unsere Canvas-Variable zugreifen. Übergeben Sie dies und greifen Sie auf die Eigenschaft width zu. Wir haben diese beiden bereits in unsere Elemente gesetzt. Wir haben 250 Pixel für diese beiden Werte. Wir können diese als Variablen einfügen. Probieren Sie dies aus, aktualisieren Sie es und da dies 250 Pixel sind, ist dies jetzt etwas größer als wir ursprünglich hatten. Die Verwendung dieser Variablen ist sehr nützlich und wir können auch Berechnungen basierend auf ihrer Größe bereitstellen. Wenn wir beispielsweise nur wollen, dass dies die halbe Breite der Leinwand beträgt, könnten wir dies durch 2 teilen. Wenn Sie möchten, dass dies ein solides Rechteck oder ein solides Quadrat ist, können wir den Strich in FillRect ändern. Dies füllt dies mit der Standardfarbe schwarz. Das Standardschwarz sieht im Allgemeinen nicht gut aus, und wir können diese Farbe auch ändern. Lassen Sie uns unsere Rechtecke duplizieren und wir machen das erste als Strich, und das zweite machen wir das nur ein bisschen anders. Lass uns 100 mal 100 gehen. Stellen, 20 Pixel von oben links auf der Leinwand. Jetzt haben wir einen Strich und ein gefülltes Rechteck. Wir können für jede dieser Farben verschiedene Farben angeben , beginnend mit dem Strich. Greifen Sie erneut auf den Kontext zu. Da benutzen wir einen Strich und passieren den StrokeStyle. Stellen Sie dies auf einen CSS-ähnlichen Wert, z. B. grün. Ich werde sehen, dass die grüne Farbe in Kraft getreten ist. Dann knapp über unserem gefüllten Rechteck. Wir können auch auf den Kontext zugreifen und die Eigenschaft FillStyle bereitstellen die Eigenschaft FillStyle , um dieses zweite Quadrat zu beeinflussen. Dies entspricht jeder anderen Farbe. Speichern Sie dies und aktualisieren Sie es. So können wir für jede unserer Formen verschiedene Farben festlegen . Diese API hat auch eine Arc-Methode, um beim Zeichnen von Bögen und Kreisen zu helfen. Wie immer greifen wir im Kontext ctx.arc darauf zu. Im Gegensatz zu den Quadraten , die wir gerade alle Rechtecke gezeichnet haben, in denen die Startposition oben links basiert, mit einem Kreis basiert dies auf der Mitte. Wir können auf die Canvas-Breite für die X-Achse zugreifen. Teilen Sie dies durch 2 auf Stellen in der Mitte der Leinwand und auch für die Höhe gleich. Dies ist der Ausgangspunkt für unseren Kreis, aber wir müssen noch einige weitere Informationen bereitstellen. Der nächste ist der Radius unseres Kreises. Wenn Sie mit Radien nicht vertraut sind, ist dies im Grunde die halbe Breite des Kreises. Der Wert vom Mittelpunkt nach außen. Lass uns für 100 gehen. Dann die letzten beiden Werte am Start- und Endwinkel. Diese Werte sind eher im Bogenmaß als in Grad. Zu Beginn fügen wir einen Startwinkel von Null und dann den Endwinkel hinzu, einen Wert von zwei Bogenmaß. Lassen Sie uns dies speichern und sehen , was im Browser passiert. Wenn wir neu laden, sehen wir keine Zeichnungen auf der Leinwand. Dies liegt daran, dass wir sagen müssen, ob es sich um eine Strichlinie oder eine solide Füllung handelt, wie oben. Greifen Sie danach auf den Kontext zu. Halten Sie die Füllmethode fest, erfrischen Sie sich und hinterlassen Sie eine schöne lächelartige Kurve. Oder wir können die Linie einfach mit einem Strich mit ctx.stroke machen. Sie können auch sehen, dass wir jetzt die Strichlinie machen. Dies wird auch den Strichstil von Grün erben. Um den Kreis im Bogenmaß zu schließen, müssen wir diesen Wert von 2 mit math.pie multiplizieren , was dem Grad entspricht 360 Grad. Es gibt unseren grünen Kreis und wie Sie jetzt sehen können, haben wir einen vollen Kreis. Dies wird aufgrund unserer X- und Y-Standorte auch in der Mitte der Leinwand platziert . Kurz bevor wir dies tatsächlich mit Strich oder Füllung auf die Leinwand zeichnen , können wir auch einige zusätzliche Eigenschaften wie die Linienbreite und auch die Farbe festlegen . Beginnen wir mit der Eigenschaft line width, die wir auf einen Pixelwert von fünf festlegen. Dann ist der StrokeStyle auch im Kontext verfügbar. Dies ist der gleiche Wert, den wir oben verwendet haben , um diesen auf grün zu setzen. Aber jetzt überschreiben wir dies , um eine andere Farbe zu haben. Vorher habe ich erwähnt, dass dies eine CSS-ähnliche Eigenschaft ist , also nur die Wörter wie Grün oder Hot Pink verwenden, können wir nicht nur die Wörter wie Grün oder Hot Pink verwenden, sondern auch Dinge wie den x-Wert übergeben und diese auf eine andere Farbe einstellen. Ich gehe für f5cf89. Probieren Sie das aus und hinterlassen Sie eine 5-Pixel-Linie in einer anderen Farbe. Neben diesen Methoden zum Zeichnen voreingestellter Formen können wir auch Freihandlinien wie ein Bleistiftwerkzeug zeichnen , wenn Sie in der Vergangenheit eine Zeichnungsanwendung verwendet haben . Um dies zu demonstrieren, können wir dieses grüne äußere Rechteck oder Quadrat replizieren und diese freie Hand zeichnen. Wir können das erste Rechteck kommentieren, das diese beiden Zeilen sind. Dann zeichne das selbst mit Koordinaten. Diese sind alle im Kontext verfügbar. Die erste Methode wird MoveTo sein. MoveTo ist im Grunde so, als würde man unseren Bleistift aufheben diesen auf einen bestimmten Teil des Papiers verschieben , von dem wir beginnen möchten. Dies wird unsere Koordinaten bewegen ohne tatsächlich eine Linie zu ziehen. Genau wie unser ursprüngliches Quadrat beginnt dies oben links auf der Leinwand. Um tatsächlich zu zeichnen, verwenden wir die Methode LineTo, die eine Bleistiftlinie von unserem Startort zu Ort zeichnet, den wir hier einsetzen. Wie oben können wir genau wie diese fest codierte Werte einfügen oder wir können auf die Variablen wie canvas.width und canvas.height zugreifen . Machen Sie dies zu einer vollen Breite der Leinwand, über die Sie direkt hinübergehen können, und greifen Sie auf canvas.width zu. Da wir nicht auf der X-Achse nach unten gehen wollen, können wir dies auf den Wert Null belassen. Lasst uns auffrischen. Wir sehen die Zeile noch nicht auf dem Bildschirm , da wir ctx.stroke aufrufen müssen , um dies auf die Leinwand zu zeichnen. Dies ist unser erster Teil unseres Platzes. Der nächste Teil besteht darin, nach unten zu gehen und diese vertikale Linie von unserem aktuellen Standort aus zu zeichnen , Zugriff auf ctx, die LineTo. Wir wollen immer noch auf der rechten Seite bleiben , auf die wir mit einer Breite von 250 oder wieder mit der canvas.widthproperty zugreifen können mit einer Breite von 250 oder wieder mit der canvas.widthproperty zugreifen . Gib das ein, canvas.width. Um dann an den unteren Rand der Leinwand zu gehen, können wir mit canvas.height darauf zugreifen. Dupliziere das. Wir bleiben auf dem gleichen Höhenwert von 250. Aber jetzt müssen wir auf die linke Seite gehen, was dem x-Wert von Null entspricht. Speichern, aktualisieren. Es ist nur noch eins übrig. Aber jetzt müssen wir in die obere linke Ecke gehen, was die Position von 0,0 ist. Gut. Dies ist jetzt auf der Leinwand im Quadrat, wir können auch ganz am Anfang eine Methode hinzufügen, den Anfangspfad halten, der auch im Kontext verfügbar ist. Wir werden dies ganz am Anfang platzieren, kurz bevor wir anfangen, unsere Form zu zeichnen. Dies ist nützlich , da es alle vorhandenen Pfade von oben löscht , sodass wir keinen Konflikt bekommen. Es bedeutet auch, dass die Ausgangsposition in Erinnerung bleibt. Wir können den geschlossenen Pfad verwenden, um jederzeit zu diesem Ort zurückzukehren . Um dies zu sehen, können wir unsere letzte Zeile entfernen, aktualisieren. Anstatt dies manuell zu zeichnen, können wir jetzt mit ctx.closepath zu unserem Startort zurückkehren . Es sollte genauso funktionieren wie zuvor an den ursprünglichen Standort zurückkehren. Neben dem Erstellen von Quadraten, Rechtecken, Kreisen und auch Freihandzeichnen können wir auch Text auf die Leinwand schreiben. Zuerst können wir die Schriftart festlegen, die wir verwenden möchten, ctx.font, und diese auf eine Zeichenfolge setzen. Die Zeichenfolge kann die Größe der Schriften und auch die Schriftfamilie annehmen. Die Methode zum Zeichnen unseres Textes ist Ctx.FillText. Wie Sie wahrscheinlich vermutet haben, gibt es auch eine entsprechende strokeText-Methode. Der erste Wert ist eine Zeichenfolge unseres Textes, ich sage nur Canvas API. Dann ein x- und y-Speicherort, der die Basislinie unseres Textes ist, also 20 und 200, Speichern und Aktualisieren. Es gibt unseren Text und er ist auch rosa, weil er die vorherige FillStyle-Eigenschaft erbt , die von oben haben wird. Canvas kann auch für viele andere Dinge verwendet werden, und auch für andere Methoden, die wir untersuchen können , und wir können der Leinwand sogar Bilder hinzufügen, die wir bearbeiten können, indem wir auf die Pixel zugreifen. In den kommenden Videos werden wir eine Leinwand verwenden, um die Pizzen zu kreieren und auch die Beläge anzuzeigen , die wir in der Küche hinzugefügt haben. 41. Einrichten Der Zutaten: Oben im Skriptbereich haben wir ein Inhaltsstoff-Array mit einigen Zutaten, die wir brauchen, um Pizzen zu machen. Diese Saiten stimmen alle mit den Zutaten , die in den erforderlichen Schritten von oben benötigt werden. Wenn wir also zum Pizzas-Array gehen, sehen wir das erforderliche Schritt-Array. Dies enthält die Saiten , die zu unseren Inhaltsstoffen passen. Wenn Sie eine dieser Pizzen ändern , um verschiedene Zutaten zu verwenden, stellen Sie sicher, dass das Inhaltsstoff-Array ebenfalls aktualisiert wird , damit es ebenfalls übereinstimmt. Das wird bald sehr wichtig sein. Was wir in diesem Video tun werden, ist, all diese Zutaten zu durchlaufen , all diese Zutaten zu durchlaufen und sie dann als Knöpfe im Küchenbereich anzuzeigen. Sobald eine Pizza ausgewählt wurde, kann der Koch diese Methode befolgen und die Pizza mit diesen Knöpfen zubereiten. Auch wenn man die Leinwand nutzt, zeichnet jeder Knopf die Zutaten auf die Pizza. Scrollen wir nun bis zum Ende unseres Projekts und bereinigen Sie die Beispiele aus dem vorherigen Video. Also brauchen wir nichts wie den Text. Wir brauchen den Freihandbereich nicht. Wir brauchen den Kreis nicht. Benötige keines dieser Quadrate oder Rechtecke. Aber wir müssen Zugriff auf unsere Leinwand und auch auf den 2D-Kontext behalten . Erstellen Sie danach eine neue Funktion namens ListIngredients, die alle Inhaltsstoffe von oben durchläuft und diese im Browser anzeigt. Um auf unser Inhaltsstoff-Array zuzugreifen Da es sich um ein Array handelt, können wir die forEach-Methode verwenden, die für jeden dieser Werte eine Funktion ausführt. Diese Funktion wird auch eine Zutat aufnehmen , die jedem Array-Wert entspricht. Dann müssen wir für jede dieser Zutaten ein Button-Element erstellen . Damit wir eine manuell erstellen oder uns daran erinnern können, haben wir auch Zugriff auf unsere Hilfsfunktion namens BuildeLement. Dies nimmt zwei Dinge auf. Das erste ist die Art der Elemente, die wir erstellen möchten, eine Schaltfläche. Der zweite ist der anzuzeigende Textinhalt. Dies sind die Zutaten aus unserem Array, bewahren Sie diese in einer Konstante namens IngredientElement auf. Dann können wir für unser Styling auch eine Klasse namens Zutat hinzufügen , um auf unsere Konstanten zuzugreifen, und den Klassennamen der Zutat hinzufügen. Die letzte Stufe besteht darin, dies dem DOM, documents.querySelector hinzuzufügen . Der Abfrageselektor , den wir benötigen. Werfen wir einen Blick auf die Indexseite. Wir brauchen dieses Div mit der ID der Zutaten. Hier drin platzieren wir den gesamten Inhalt unseres Arrays. Gib das als String ein. Wir verwenden AppendChild, der unsere Konstante von oben übergibt. Also könnten wir diese neue Funktion sofort aufrufen. Aber es wäre wahrscheinlich sinnvoll, dies der GameStart-Funktion hinzuzufügen dem Spielbeginn zu suchen. Hier drin rufen wir es von unten an. Sparen Sie, und probieren wir es dann aus. Aktualisieren. Klicken Sie auf die Schaltfläche Start und alle unsere Zutaten werden jetzt unten in der Küche platziert. Für den nächsten Schritt müssen wir in der Lage sein, auf eine dieser Zutaten zu klicken auf eine dieser Zutaten und dann etwas zu tun. Dieses Etwas wird eine Funktion sein um die Schritte zu verfolgen , die wir ganz nach unten unternommen haben. Erstellen Sie eine neue Funktion namens StepComplete. Dann eine zweite Funktion , die die Zutaten auf die Leinwand zeichnet . Funktion, mach Pizza. Diese StepComplete-Funktion muss aufgerufen werden, wenn der Benutzer von oben auf eine unserer Inhaltsstoffe klickt. Kurz bevor wir dies zum DOM hinzufügen, können wir dazu einen Ereignis-Listener hinzufügen, indem wir auf unseren IngredienteElements.Add Ereignis-Listener zugreifen . Dies jetzt für einen Klick, der eine Funktion namens StepComplete auslöst. Da es sich um ein Klickereignis handelt, werden auch die Ereignisinformationen aufgenommen, die wir in der Variablen speichern können. Diese StepComplete e-Funktion kann jetzt auch verwendet werden, um die Schaltfläche nach dem Anklicken zu deaktivieren und auch diese Schritte zu verfolgen, die wir unternommen haben. Schritt 1 deaktiviert die Schaltfläche, wenn der Benutzer darauf klickt. Wir können also nicht zweimal angeklickt werden. Ich werde dies tun, indem ich mit e.target auf unsere Elemente zugreife . Wir können ein Attribut festlegen. Das Attribut ist mit dem Wert „true“ deaktiviert. Dann Schritt 2 müssen wir auf den eigentlichen Textinhalt unserer Schaltfläche zugreifen . Also werden wir den Namen der Zutat kennen. Zum Beispiel müssen wir den Rollteigtext, die Pizzasauce oder den Käse und so weiter greifen . Speichern Sie dies in einer Konstante namens Schrittname, greifen Sie mit e.target auf unsere Elemente zu. Dann der innere Textinhalt. Bevor wir weiter gehen, prüfen wir, ob das funktioniert. In ein Konsolenprotokoll legen. Wir haben Schrittnamen. Auf den Browser und in die Konsole. Starte das Spiel. Klicken Sie auf einen unserer Buttons wie Käse, Pizzasauce. Diese Schaltflächen sind jetzt auch deaktiviert. Verfolgen Sie die Schritte , die wir unternommen haben, alle Schaltflächen, auf die wir geklickt haben. Wir müssen dies innerhalb einer Variablen speichern , die ein Array enthält. Springen Sie also zu unseren Variablen hoch. Lassen Sie unten abgeschlossene Schritte einem leeren Array entsprechen. Runter nach unten. Wir können jetzt das Konsolenprotokoll entfernen, auf diese Variable der abgeschlossenen Schritte zugreifen, auf die Push-Methode und dann einen neuen Wert auf dieses Array verschieben, welches unser Schrittname ist. Das Letzte ist, unsere Make-Pizza-Funktion zu nennen , um eine neue Zutat auf die Leinwand zu zeichnen. Natürlich macht es noch nichts, aber wir können dies innerhalb der Funktion platzieren. Also mach Pizza. Geben Sie Pizza-Zutat des Schrittnamens ein. Da wir nun Zutaten übergeben haben, können wir dies in unsere Funktion einstellen und testen, ob dies mit einem Konsolenprotokoll funktioniert. Entfernen wir einfach alle anderen Konsolenprotokolle, die wir haben. Also haben wir die Bestellverpackung, haben den Ofen, Bestelltext. Aktualisieren Sie dann, starten Sie erneut und klicken Sie auf eine dieser Zutaten. Da sind wir los. Es gibt unsere neuen Zutaten aus Make-Pizza-Konsolen-Log. Dies macht uns nun bereit, bestimmte Zutaten tatsächlich auf die Leinwand zu zeichnen. Wenn die Make-Pizza-Funktion zum Beispiel Pizzasauce erhält, wird sie etwas rote Soße auf unsere Pizza zeichnen. Das ist es, worauf wir als Nächstes weitermachen werden. 42. Zeichnen kreisförmige Zutaten: Unten in unserem Skript haben wir derzeit diese MakePizza-Funktion und diese wird jedes Mal aufgerufen, wenn ich neue Zutaten hinzufüge. Es ist auch über diese Zutaten hinausgegangen. Was ich jetzt gerne machen möchte, ist eine Switch-Anweisung zu erstellen , um zu behandeln , auf welche Zutat geklickt wurde. Wir können diese Zutat dann auf unsere Pizza an der Leinwand zeichnen . Da wir, wie bereits erwähnt, verschiedene Inhaltsstoffoptionen haben , ersetzen wir diese durch eine Switch-Anweisung, um jeden unserer Fälle zu behandeln. Übergeben Sie die Zutat, auf die geklickt wird, und dann erstellen wir für jeden einen Fall. Im ersten Fall wird dies eine Zeichenfolge sein, und wenn wir oben nach oben scrollen, haben wir unsere Zutaten genau hier und jeder der Fälle wird mit jeder dieser Saiten übereinstimmen. Zurück unten war der erste in den Hauptstädten für ROLL DOGHT. Wir werden uns in einem Moment darum kümmern, was zu tun ist, aber im Moment brechen wir einfach davon aus und kopieren einfach jede unserer Zutaten. Der zweite Fall, dieser war PIZZA-SAUCE. Die dritte für CHEESE und dann PEPERONI. Der nächste war für HAM und ANANAS. Ich werde das nur als Zutaten belassen und Sie können den Rest hinzufügen, wenn Sie es vorziehen, aber ich werde weitermachen, weil das sonst wirklich lang sein wird . Jetzt können wir in jedem dieser Fälle einige Leinwandzeichnungsfunktionen einrichten, können wir in jedem dieser Fälle einige Leinwandzeichnungsfunktionen einrichten um die jeweiligen Inhaltsstoffe darzustellen. Für den Teig, für die Pizzasauce und auch für den Käse können diese einigermaßen einfach sein, wir müssen nur ein paar Kreise zeichnen. Wir fangen mit dem Rollteig an. Wir wissen aus früheren Videos , dass wir ctx.arc verwenden, um einen Kreis auf der Leinwand zu zeichnen , dann geben wir den Startort dann geben wir den Startort an , der sich in der Mitte befinden wird. canvas.width geteilt durch zwei und auch das Gleiche für die Höhe. Dies ist die Start-X- und Y-Position. Der nächste wird der Radius sein. Lass uns 100 Pixel lang gehen. Wie früher ist die Startposition Null, um einen vollen Kreis im Bogenmaß zu erzeugen , und dann ist die Endposition zwei multipliziert mit dem Wert von Math.Pi. Denken Sie daran, dass aus früheren Videos, als wir ctx.arc verwendeten, es anfangs nichts auf die Leinwand gezeichnet hat. Was wir tun müssen, ist entweder ctx.stroke oder ctx.fill zu verwenden , um dies zu zeichnen , aber tatsächlich werden wir beide verwenden. Der Grund dafür ist, dass wir die Füllmethode verwenden, um die gesamte Pizzabasis auf die Leinwand zu zeichnen . Wir werden auch eine zusätzliche Strichmethode durchführen, die diesem Teig auch einen äußeren Kreis von 15 Pixeln hinzufügt . Der Grund dafür ist, dass wir dies auf eine etwas andere Farbe einstellen , um uns die Wirkung der äußeren Kruste zu verleihen . Zunächst einmal werden wir uns auf die Kruste konzentrieren und dies mit ctx.LineWidth tun, dies auf einen Wert von 15 Pixel setzen, dann legen wir die Farbe fest, wobei StrokeStyle in einer Zeichenfolge übergeht was ein Hexadezimalwert von f5cf89 sein wird und um dies schließlich zu zeichnen, verwenden wir ctx.stroke. Dies sollte uns jetzt einen Umriss geben, der auf unserem Bogen basiert. Probieren wir das aus, erfrischen, nochmal anfangen, eine unserer Pizzen auswählen, den Rollteig, und wir sehen jetzt den äußeren Kreis unserer Pizza. Wie bereits erwähnt, ist dies die Kruste, daher müssen wir auch die Füllmethode hinzufügen um auch den inneren Teil des Kreises zu füllen, aber eine etwas hellere Farbe kurz nach dem Strich. Geben Sie die Farbe für unsere Füllmethode ein und diese wird f5d69d sein, dann füllen Sie den Kreis mit dieser Farbe. Probieren wir das mal aus. Steigen Sie wieder ein und fangen Sie erneut an, wählen Sie eine unserer Pizzen aus. Teig rollen. Wir sollten diese schwarze Farbe nicht haben, also schauen wir uns mal an. Dieser FillStyle braucht eigentlich nur den Hash kurz zuvor. Beginne. Wählen Sie eine unserer Pizzen aus, rollen Sie den Teig und es sieht jetzt viel besser aus. Nun, bis hin zu unserer Pizzasauce, die auch ein Kreis sein wird , aber etwas kleiner als unser Teig. Wir haben keine Konflikte von oben. Wir beginnen diesen Abschnitt mit Ctx.BeginPath. Dies braucht auch einen Kreis, damit wir die ctx.arc-Methode von oben kopieren können, die sich ebenfalls in der Mitte der Leinwand befinden muss . Wir müssen die Farbe ändern. Dies wird gefüllt, also verwenden wir FillStyle, und dieser wird ed4434 sein, endlich ctx.fill aufrufen. Als nächstes gehen wir auch zum Käse über, der immer noch eine kreisförmige Join-Funktion ist. Wir kopieren die gesamte Pizzasoße, fügen ihn in unser Käsegebiet ein, machen den Kreis etwas kleiner, damit wir die Sauce immer noch am Rand sehen können , aber wir müssen auch die farbe. Dieser ist f7bc4d. Sparen wir uns das auf und probieren es aus, bevor wir weiter gehen. Auch hier können wir jede Pizza, Ananas, Rollteig auswählen . Das ist in Ordnung, wie wir gesehen haben. Als nächstes probieren wir die Pizzasauce aus und das ist alles in Ordnung und dies umfasst den gleichen Füllabschnitt wie die obige Teigfläche, aber wir können immer noch den Strichumriss von oben sehen. Als nächstes haben wir den Käse, der ein etwas kleinerer Kreis ist , damit er nicht die gesamte Tomatenbasis vollständig verdeckt. Gut. Wir lassen diesen vorerst hier und im kommenden Video werfen wir einen Blick auf die nächsten Zutaten, die ein bisschen komplexer sein werden als diese Kreise. Anstatt Kreise zu erstellen, wie wir es gerade tun, werden wir mehrere Teile an verschiedenen Orten einbeziehen . Wir sehen uns im nächsten, wo wir uns ansehen werden, wie das geht. 43. Zeichnung mehrerer Stücke: meine Version dieser Switch-Aussage losgehe, habe ich immer noch die Peperoni, den Schinken und auch die Ananasstücke zu kreieren. Da es sich um einzelne Stücke handelt, werden wir viele verschiedene Formen auf unsere pizzaförmige Leinwand gezeichnet . Um zu beginnen, in den Peperoni, direkt unter dem Fall, wir eine Reihe von Orten erstellen, da wir mehrere Stücke für diese Zutaten verwenden müssen wir eine Reihe von Orten erstellen, da wir mehrere Stücke für diese Zutaten verwenden. Const, Peperoni-Positionen, die ein Array sein wird. In der Tat wird dies ein Array von Arrays sein , da dies ein Array mit mehreren Werten sein wird . Außerdem muss jeder dieser Werte eine x- und eine Y-Position für jedes dieser Teile haben . Der erste, und natürlich müssen diese alle innerhalb der Dimensionen der Pizza gehalten werden. Aber das sind alles Zufallszahlen. Wir können diese hinzufügen und mit ihnen herumspielen , wenn Sie danach möchten, oder Sie können zusammen mit meinen kopieren. Der dritte wird 147 und 57 sein. Denken Sie daran, dass jedes dieser Sub-Arrays ein neues Stück Peperoni sein wird. Die vierte, Sie können so viele oder so wenige hinzufügen , wie Sie möchten, 116, 134, 125, 190, 162, 165, 190, 85, 192, 142, 150, 115, 76, 95. Ich möchte noch ein paar Stücke anfangen. Gehen wir für 80, 190 und den letzten, 61 und 135. Stellen Sie sicher, dass dies kurz vor der Break-Klausel ist und bevor wir etwas anderes tun, überlegen wir uns genau, was wir hier tun müssen. Ein Stück Peperoni ist nur ein kleiner Kreis. Wir wissen, wie man das mit dem Bogen zeichnet. Der Unterschied muss diesen Bogen jedoch für jeden dieser Orte wiederholen . Hier kann eine Schleife ins Spiel kommen. Was wir tun werden, ist, dass wir unsere Konstanten von Peperoni-Positionen greifen . Dann rufen wir eine für jede Schleife für dieses Array auf. Übergeben Sie eine Funktion , die den Variablennamen des Stücks aufnimmt. Das Stück wird jedes dieser einzelnen Peperoni-Stücke sein, die wir zeichnen werden. Um dies zu tun, beginnen wir mit Ctx.BeginPath ohne vorhandene Pfade , die gezeichnet werden können. ctx.arc, zeichne jeden der Kreise für die Peperoni-Stücke. Denken Sie daran, dass dies die X- und die Y-Position für die Mitte des Kreises annimmt . Da wir auf den oben genannten Standorten basieren müssen, werden wir auf unser Stück zugreifen. Die erste Indexposition von Null und für den y-Standort ist es Frieden und dann die Indexnummer von Eins. Gib das ein. Stück, greifen Sie auf die Indexzahl von Null zu, der y-Standort ist diese Ruhe und die Indexnummer von eins, Größe von 10. Lassen Sie uns einen Kreis als Null erstellen und dann Math.PI multipliziert mit 2. Geben wir ihm eine Farbe mit Ctx.FillStyle. Kurz bevor wir das zeichnen, was einer Zeichenfolge entspricht, möchte ich den Hexadezimalwert von BD 3611 wählen. Dann zeichnen wir das schließlich mit ctx.fill geben Sie diesem unsere feste Hintergrundfarbe. Probieren wir es mal aus. Springe in den Browser. Wir müssen unser Spiel beginnen und eine unserer Bestellungen auswählen. Auch Pizza, wir rollen den Teig, fügen die Quelle hinzu, den Käse. Wir wissen, dass das funktioniert, als nächstes die Peperoni. Es gibt alle unsere Kreise, die alle auf unserem Array basieren, das wir hier erstellt haben. Gut. Jetzt bis zum Schinken und Sie können uns auch ausprobieren, wenn Sie es wollen, fühlen Sie sich sicher, dies zu tun. Dies wird auf einem ähnlichen Ansatz wie oben beruhen . Zuerst müssen wir unsere Schinkenpositionen erstellen, bei denen es sich um ein Array handelt, das auch Subarrays enthält, jetzt X- und Y-Standorte enthalten. Lassen Sie uns diese zuerst erstellen und in einer Konstante namens HamPositions speichern , unserem Haupt-Array. Erstellen Sie dann unsere zufälligen Standorte. Der erste, der zweite von 108, 74, Nummer 3, 147, 47, 130, 124. Auch hier können Sie diese völlig zufällig machen und diese ändern, wenn Sie möchten, 125, 160. Stellen Sie sicher, dass diese alle im Pizza-Leinwandbereich 159, 145, 197, 82, 202, 132, 158 und 90 bleiben im Pizza-Leinwandbereich 159, 145, 197, 82, 202, . Wir sind jetzt fast da, lass uns mit den letzten beiden weitermachen , wir machen 90, 140 und den letzten von 105 und 135. Genau wie oben werden wir diese mit einer forEach-Schleife durchlaufen . Wir wählen unsere Schinkenpositionen als forEach-Schleife bezeichnet werden, im Array, die jedes Stück eine Funktion annimmt. Aber dieses Mal, anstatt Kreise mit der Bogenmethode zu erstellen , verwende ich die FillRect -Methode, um diese als Rechteck zu zeichnen. Zuerst legen wir eine Farbe mit Ctx.FillStyle fest und setzen diese auf eine Zeichenfolge, die f58c8c ist. Als Nächstes Ctx.FillRect. Zeichnen Sie ein solides Rechteck auf der Leinwand. Genau wie oben wird dies die X- und Y-Positionen einnehmen , die wir mit unseren Array-Positionen x genau so zugreifen können . Dies ist das Stück und die Indexzahl von Null, die entspricht jedem dieser ersten Array-Werte. Dann der zweite Array-Wert des Stücks, was in der Indexnummer von eins steht. Denken Sie daran, dass dies die X- und Y-Position für die obere linke Ecke des Rechtecks oder des Quadrats ist die obere linke Ecke des Rechtecks oder des Quadrats Wir müssen auch die Größe einstellen, die wir auf acht Pixel breit einstellen möchten , 32 Pixel hoch. Probieren wir das aus, bevor wir weiter gehen. Das ist für den Schinken. Klicken Sie darauf und wir haben jetzt viele rosa Schinkenstücke auf Pizza. Sie können mit den Positionen herumspielen, wenn Sie es ein bisschen besser aussehen lassen möchten. Aber ich gehe dem nächsten weiter, nämlich Ananas. Um wenig Zeit zu sparen, wird vieles davon unserer Schinkenposition ähneln . Kopieren wir also all diesen Abschnitt, einschließlich der for-Schleife. Fügen Sie dies direkt unter unseren Ananas-Etui ein. Natürlich werden es die Ananaspositionen sein. Ändere es für die Schleife. Machen Sie danach mit diesen Werten herumzuspielen , wenn Sie möchten. Für den FillStyle ändern wir die Farbe dieser in die gelbe Farbe von ebe534, machen sie in Bezug auf Größe 12 und 18 ein wenig anders . Erstellen Sie die Zellen im Browserstart. Unsere Pizza. Die Ananas funktioniert auch. Wie bereits erwähnt, müssen Sie möglicherweise seine Position ändern , damit wir keine Überschneidungen haben. Eine letzte Sache, bevor wir dieses Video abschließen , ist, dass wir auch sicherstellen, dass die Ananasstücke und der Schinken in verschiedenen Winkeln auf die Pizza gelegt werden. Derzeit sieht es etwas langweilig aus, weil alles in die gleiche Richtung geht. Verwechseln wir diesen Winkel für jedes dieser Teile ein wenig. Wir können das mit Drehen machen. Das fängt in der Schinken-Sektion an. Kurz bevor wir das mit FillRect zeichnen. Wir können auf rotate zugreifen, das auch im Kontext verfügbar ist. Dieser Rotationswert ist im Bogenmaß, nicht in Grad. Eine Möglichkeit, dies in ein gewisses Maß umzuwandeln, ist genau so. Wir können unseren Anfangswert überschreiten. Wenn wir möchten, dass dies um einen kleinen Wert wie fünf Grad gedreht wird , können wir dies in Bogenmaß umwandeln, indem wir dies mit Math.PI dividiert durch 180 multiplizieren . Dies macht es viel einfacher, mit Grad zu arbeiten, wenn es viel einfacher ist , dies in Ihrem Kopf zu umwickeln. Aber wir wollen diesen fest codierten Wert von fünf nicht beibehalten. Der springende Punkt, um diese Drehung für jedes dieser Teile hinzuzufügen , besteht darin, sie für jedes Stück einen etwas anderen Wert zu machen . Wir können Math.random hinzufügen, was für jede unserer Positionen in einem etwas anderen Wert platziert wird für jede und um einen etwas größeren Winkel zu machen , denn denken Sie daran, dass Math.random nur zwischen 0 und 1. Wir können dies mit 2 multiplizieren. Das ist auch eine Kopie dieser Rotate-Methode, und wir können diese innerhalb der Ananas wiederverwenden. Kurz bevor wir FillRect verwenden, probieren wir das aus, aktualisieren und neu starten. Die Pizzasauce, der Käse, Peperoni, neben Schinken. Wenn Sie genau hinschauen, sind diese Teile etwas nicht auseinander ausgerichtet. Auch bei der Ananas, aber mit einer Ananas, wie Sie sehen können, haben wir ein kleines Problem. Dies ist, wenn wir mehrere Inhaltsstoffe mit Rotationswerten verwenden . Dies geschieht aufgrund der Rotation bei Transformation. Wenn wir drehen, dreht sich der Canvas-Ursprung vom Canvas-Ursprung , der 0,0 ist, ganz oben links. Wenn wir mehrere Rotationen hinzufügen, fügt sich jede zur vorherigen hinzu, die wir festgelegt haben. Wir legen einen für den Schinken fest und fügen dann hinzu, indem wir die Rotation für die Ananas hinzufügen. Wir können dies beheben, indem wir den Ursprung für jede neue Inhaltsstoffe mit einer sogenannten Set-Transformation zurücksetzen jede neue Inhaltsstoffe mit einer . Dafür mache ich innerhalb unserer Funktion Pizza-Funktion. Kurz vor den Switch-Anweisungen. Wir wollen diese ctx.set-Transformation nennen, die sechs Werte annehmen wird. Die sechs Werte sind 1, 0, 0, 1, 0, 0. Diese sechs verschiedenen Werte können etwas verwirrend sein, zumal sie nicht besonders zusammengefasst sind. Wir können sehen, dass der erste Wert von eins und der vierte Wert ebenfalls einer ist. Beide beziehen sich auf die Skalierung, die einen Gegenstand größer oder kleiner machen kann. Die erste ist die horizontale Skalierung und die vierte ist eine vertikale Skalierung. Wir möchten nicht, dass einer dieser Werte erhöht oder verringert wird , also behalten wir diese auf einem, was der ursprünglichen Größe entspricht. Der zweite des dritten Wertes bezieht sich beide auf die Schrägstellung. Wir wollen auch keines unserer Stücke verzerren. Wir behalten diese als Null, was bedeutet, dass nichts festgelegt werden muss. Die Dinge, an denen wir interessiert sind, sind diese letzten beiden. Diese letzten beiden setzen wir in der horizontalen und vertikalen Übersetzung wieder auf Null. Jedes Mal, wenn wir neue Zutaten auswählen , transformiert sich die Rotationstransformation, die vor dem Zurücksetzen auf Null zurückschauen wird, was bedeutet, dass wir keine Ansammlung dieser Rotationswerte erhalten. Versuchen wir das mit der Transformation, die jetzt an Ort und Stelle ist. Wählen Sie eine Bestellung aus. Nun suchen wir sowohl den Schinken die Ananasstücke, um wieder an den ursprünglichen Orten zu sein . Das funktioniert jetzt alles gut. Wie bereits erwähnt, können Sie weitere dieser Fälle für verschiedene Inhaltsstoffe erstellen , wenn Sie es vorziehen oder wenn Sie zusätzliche Übung wünschen. nächstes, wenn Sie bereit sind, sehe ich Sie im kommenden Video, in dem wir diese Leinwand löschen werden , sobald die Pizza fertiggestellt ist. 44. Das Bild löschen: Wenn wir mit der Herstellung der Pizza fertig sind , die Beläge hinzufügen und sie dann schließlich in den Ofen geben, müssen wir die vorhandene Leinwand löschen um den nächsten zu machen. Wie Sie vielleicht vermutet haben, erstellen wir eine Funktion, die dies abdeckt, und wir werden dies am Ende unseres Skripts tun. Erstellen Sie hier eine neue Funktion, um diese namens ClearCanvas abzudecken. Die erste Aufgabe, die ich innerhalb dieser Funktion erledige , wenn wir hier in den Start gehen und eine unserer Bestellungen auswählen. Denken Sie daran, wenn wir jede dieser Pizzen zubereiten und auf die Zutaten klicken, wird die Schaltfläche dann deaktiviert. Was wir tun werden, ist, dass wir alle diese Schaltflächen auswählen , um zu beginnen. Wir werden diese Schaltflächen durchlaufen und dann entfernen wir dieses deaktivierte Attribut. Die erste besteht darin, eine Konstante namens Steps einzurichten. Dies wird alle unsere Buttons mit dem Klassennamen der Zutaten durchlaufen . document.getElementsByClassName. Der Klassenname, der jeder dieser Schaltflächen beigefügt ist, ist Zutaten. Ein bisschen mehr Platz dafür und wenn Sie sich an die frühen Videos erinnern, wenn wir GetElementsByClassName verwenden, anstatt wieder ins Array zurückzukehren, wird dies zur HTML-Sammlung zurückkehren . Wir haben HTML-Sammlungen. Wir können keine der Array-Methoden wie für jede verwenden. Was wir tun werden , ist unsere Schritte zu ergreifen , und dann konvertieren wir dies in ein Array, was bedeutet, dass wir unseren forEach verwenden können um jede dieser Punkte zu durchlaufen. Wir machen das mit Array.from. Dies wird aus unseren Schritten ein neues Array schaffen. Leg das rein. Jetzt haben wir ein Array, wir können Array-Methoden wie forEach verwenden, unsere Funktion übergeben. Wir haben Zugriff auf jedes der Elemente. Aus diesen Elementen können sie Attributübergabe in der Zeichenfolge von deaktiviert entfernen. Dies sollte jetzt alle unsere Zutaten durchlaufen und das deaktivierte Attribut entfernen , damit es für die nächste Pizza zur Auswahl steht. Als nächstes haben wir, wie wir uns im vorherigen Video angesehen haben, manchmal ein Problem, bei dem wir Rotationswerte für Schinken und Ananas haben . Was wir tun werden, ist die Transformation ganz oben in der Switch-Anweisung zu greifen oder zu setzen Transformation ganz oben in der , die gerade hier ist. Die aktuellen Werte im Inneren von hier werden unsere Transformation zurücksetzen , wenn vorhandene Rotationen stattfinden. Der letzte Schritt besteht darin, alles zu klären , was sich derzeit auf dem Canvas befindet und wir haben dies in der Vergangenheit mit CTX.ClearRect verwendet. Wir beginnen oben links in unserem Canvas, der Null, Null ist, und um die volle Größe des Canvas zu löschen, können wir mit canvas.width und auch canvas.height auf unsere Variablen zugreifen . Das war's. Das ist unsere Funktion jetzt abgeschlossen. Das letzte, was Sie tun müssen, ist, diese Funktion von AddTooven aus aufzurufen. Wir wählen dies aus und suchen nach der Funktion namens AddTooven. direkt unter DisplayOvenItems Fügen Sie dies direkt unter DisplayOvenItems in unsere if-Anweisungen ein. Während es hier auch einen kurzen Schritt gibt, den wir vorstellen können, nämlich unsere Variable zu greifen, die CompletedSteps ist. Setzt dies zurück, um ein leeres Array zu sein Probieren wir es mal aus. Aktualisieren Sie den Browser und er startet erneut. Wählen Sie eine Bestellung aus. Derzeit auf Schinken und Ananas rollen wir den Teig, fügen die Sauce, den Käse, den Schinken und die Ananas hinzu. Fügen Sie dies dem Ofen hinzu und jetzt wird unser Canvas geräumt und alle Zutaten stehen weiterhin für unsere nächste Pizza zur Auswahl. Ich probiere noch eine, die Peperoni, füge die Zutaten hinzu, füge diese in den Ofen, und das alles funktioniert wie erwartet. Dies ist jetzt für unsere Arbeit auf der Leinwand und Sie können mit Dingen herumspielen, Dinge erweitern und Sie können sogar die zusätzlichen Zutaten hinzufügen , wenn Sie möchten. Lassen Sie uns nun zum nächsten Abschnitt übergehen in dem wir dieses Projekt abschließen werden. 45. Pizzas verschwenden: Dieser neue Abschnitt wird die Fertigstellung unseres Projekts beinhalten. Eines der Dinge, auf die wir achten müssen ist zu überprüfen, ob der Küchenchef alle erforderlichen Schritte ausgeführt hat , bevor wir die Pizza in den Ofen geben. Wenn also die Pizza falsch ist, wird sie verschwendet. Das ist es, was wir jetzt behandeln werden. Später werden wir dem Benutzer auch einige Statistiken anzeigen, damit wir diese verschwendeten Pizzen innerhalb einer Variablen verfolgen können . Lasst uns an die Spitze unserer index.js springen. Scrollen Sie nach unten zu unseren Variablen. Erstellen Sie mit dem Schlüsselwort let eine neue Variable namens WastedPizzas, und wir werden verfolgen, wie viele davon wir falsch gemacht haben. Dann geht es zurück zum Ende unseres Skripts und wir erstellen eine neue Funktion, um damit umzugehen. Richten Sie das ein, rufen Sie die WastedPizza an. Bevor wir es vergessen, greifen wir unsere WastedPizzas Variable von oben und wir werden diese erhöhen und diese später mit den Statistiken verwenden. Als Nächstes werden wir alle Schritte machen, die für die nächste Pizza bereit sind. CompletedSteps, setze dies zurück, um ein leeres Array zu sein Dann rufen wir endlich ClearCanvas an. Dies war die Funktion, die im vorherigen Video eingerichtet wurde , die die Leinwand zurücksetzen und auch das deaktivierte Attribut entfernen wird . Rüber zur Indexseite. Im Hauptküchenbereich haben wir auch einen Knopf, mit dem wir diesen verbinden können. Wir fügen diesem Element einen EventListener hinzu, der unsere neue Funktion aufgerufen hat . Unter unserer Funktion documents.QuerySelector. Dieser Knopf. Wenn wir uns nur einen Blick darauf werfen, hatte das den Ausweis von Abfall. Fügen Sie einen EventListener hinzu, bei dem wir auf das Klickereignis achten, das unsere obige Funktion aufrufen wird. Probieren wir das aus, speichern und kehren zu unserem Spiel zurück und fangen von vorne an. Wählen Sie eine Bestellung aus. Wir machen das falsch, wir klicken diese einfach in der falschen Reihenfolge an. Klicken Sie auf Abfall. Jetzt wird eine Leinwand zurückgesetzt und wir sehen, dass wir diesen Gegenstand nicht im Ofen haben . Dies bereitet uns jetzt auf das kommende Video vor, in dem wir prüfen, ob der Koch die richtigen Schritte unternommen hat , um diese Pizza herzustellen. Wenn nicht, wird diese Funktion erneut aufgerufen, diesmal jedoch automatisch. 46. Prüfschritte: Diese verschwendete Pizza-Funktion, die wir gerade erstellt haben, wird auch wieder nützlich sein, da wir jetzt überprüfen werden, ob der Koch die richtigen Schritte unternommen hat oder dh die richtigen Zutaten hinzugefügt hat die Pizza, bevor Sie diese in den Ofen geben. Wenn sie das falsch verstanden haben, wird es dann wieder eine verschwendete Pizza sein. Um dies zu sagen, wenn wir in unser Spiel gehen, wählen Sie eine unserer Pizzen aus. Bevor wir gerade einen der Beläge hinzufügen, können wir auf den Ofen klicken und diesen ohne die richtigen Zutaten hinzufügen . Wir können auch weitermachen und noch mehr davon hinzufügen. Um die Inhaltsstoffe zu überprüfen, können wir eine neue Funktion erstellen. Ich mache das kurz nachdem wir das in den Ofen gelegt haben. Werfen Sie einen Blick auf unsere Funktion namens Add to oven, die etwas weiter oben liegt. Es ist eine Weile her, dass wir das gesehen haben . Dies ist in den Ofen hinzugefügt. Kurz danach erstellen wir unsere neue Funktion, bei der die Schritte abgeschlossen sind. Hier drinnen müssen wir auch den Pizza-Namen aufnehmen, dem wir derzeit vergleichen. Wir können prüfen, ob wir die richtigen Schritte haben. also den Pizza-Namen weiter , den wir hinzufügen werden, wenn wir diese Funktion aufrufen. Diese Funktion gibt entweder einen True oder False Boolean zurück , je nachdem , ob diese Schritte korrekt sind oder nicht. Es ist wahr oder falscher Wert wird bestimmen, ob wir die Pizza in den Ofen geben können , und wir rufen dies von unserer Add-to-Ofen-Funktion aus auf. Springe in die if-Anweisung, in der wir prüfen, ob wir einen Pizza-Namen haben, erstelle eine Konstante, um den zurückgegebenen Wert aus unserer Funktion zurückzuspeichern den zurückgegebenen Wert aus , den wir uns in nur einer Minute ansehen werden. Wir nennen das kann in den Ofen hinzufügen. Denken Sie daran, dass dies entweder ein wahrer oder falscher Wert sein wird, und dies entspricht unserer Funktion als Schritte abgeschlossen bezeichnet wird. Denken Sie daran, dass dies auch bei dem Pizza-Namen aufgenommen werden muss , den wir oben in dieser Variablen gespeichert haben. Gleich darunter kreieren wir dann in unserem Pizza-Objekt, um in den Ofen zu gehen. Jetzt schieben wir das auf das Ofen-Array. Aber kurz bevor wir dies tun, möchten wir nur sicherstellen, dass dies geschieht, wenn die Variable kann zum Ofen hinzugefügt werden stimmt. Was wir tun werden, ist, dass wir all diese Informationen von unserem Objekt bis hin zu abgeschlossenen Schritten ausschneiden diese Informationen von unserem Objekt . Geben Sie eine if-Anweisung ein, um zu prüfen ob der Ofen hinzugefügt werden kann, ist gleich wahr. Wenn ja, füge das wieder ein. Unsere Pizza kann jetzt in den Ofen gegeben werden. Lassen Sie uns einen schnellen Test machen und überprüfen, ob dies funktioniert. Wir gehen in unsere neue Funktion ein und im Moment geben wir einfach den Wert zurück, wenn der Wert wahr ist. Wir sollten in der Lage sein, eine der aktuellen Pizzen in den Ofen zu geben. Probieren wir das mal aus. Klicken Sie auf den Ofen und es funktioniert. Aber wenn wir jetzt das Spiel beenden und falsch zurückgeben, sollten wir hoffentlich verhindern alle Pizzen in den Ofen geschoben werden. Ich wähle eine aus, und das hindert jetzt gesamte Pizza daran, in diesen Abschnitt zu gelangen. Dies bedeutet, dass wir jetzt einige reale Bedingungen hinzufügen können , um es hier zu überprüfen. Um dies zu tun, müssen wir die Schritte von allen Pizzas Arrays ergreifen . Zu Beginn müssen wir unsere Pizza-Objekte tatsächlich auswählen. Hier wurden wir beim Pizza-Namen weitergegeben und wenn wir oben nach unserem Pizza-Array suchen. Wir verwenden diesen Namen, um unsere spezielle Pizza zu finden und dann das gesamte Objekt zurückzugeben , damit wir auf diese erforderlichen Schritte zugreifen können . Lass uns runter gehen und das jetzt machen. Wir können die Rückgabeanweisungen verschieben, auf unser vollständiges Pizza-Array zugreifen und dann die JavaScript-Suchmethode verwenden, und dann die JavaScript-Suchmethode verwenden um über diesen Pizza-Namen zu suchen. Um dies zu tun, führen wir für jedes der Elemente in unserem Array eine Funktion aus und speichern diese in einer Variablen namens Pizza. Diese find-Methode gibt einen neuen Wert zurück. Wir möchten prüfen, ob die Pizza, auf die wir gerade zugreifen, eine Namenseigenschaft hat die unserem Pizza-Namen entspricht, und dann speichern wir diesen zurückgegebenen Wert in einer Konstante namens Pizza-Objekte. Als nächstes müssen Sie die Schritte von diesem Objekt aus greifen die Schritte von diesem Objekt aus und diese erneut innerhalb einer Variablen oder Konstante speichern. Dieser wird als die erforderlichen Schritte bezeichnet, und wir setzen dies auf unser oben genanntes Pizza-Objekt. Filtern Sie dies nach unten, um nur die erforderlichen Schritte zu speichern. Wenn wir nun ganz oben im Skript zu unserem Pizza-Objekt zurückkehren , ist dies die erforderliche Schritt-Eigenschaft, ist dies die erforderliche Schritt-Eigenschaft die wir gerade zugegriffen haben. Dies ist ein Array aller Werte. Wir haben jetzt all diese Werte , die nötig sind, um eine Pizza zu bauen, und wenn Sie sich von früher erinnern, scrollen Sie nach unten zu unseren Variablen. Wir haben auch eine Variable namens „Abgeschlossene Schritte“, die hinzugefügt wird, wenn ein Koch auf jede der Zutaten klickt. Wir müssen nun diese beiden Arrays vergleichen und überprüfen, ob alle enthaltenen Schritte erledigt wurden. Wenn wir darüber nachdenken, damit eine Pizza bereit ist, in den Ofen zu gehen, müssen nicht nur die abgeschlossenen Schritte korrekt sein, sondern sie müssen auch in der gleichen Reihenfolge sein. Wenn ich zum Beispiel den Teig, den Käse und die Sauce in dieser bestimmten Reihenfolge habe , würde er technisch gesehen zu einer Margarita passen. Aber wir wollen nicht, dass die Quelle auf dem Käse steht oder der Teig zuletzt hinzugefügt wird. Wir können dies mit einer JavaScript-Array-Methode namens „alle“ überprüfen . Zurück zu unserer Funktion, was ich tun werde, ist diese Funktion zu tippen, und dann können wir darüber sprechen , was gerade danach vor sich geht. Wir können auf unsere erforderlichen Schritte zugreifen, nämlich die Reihe aller Schritte, die zum Erstellen einer Pizza erforderlich sind , und dann diese Methode aufrufen , die wir gerade erwähnt haben, die alle war. Dies führt eine Funktion für jeden unserer Array-Werte aus. Übergeben Sie als Argumente das Element, den Index, und geben Sie dann einen Wert zurück, wenn das Element den abgeschlossenen Schritten wie im Index entspricht . Schließlich speichern wir diesen zurückgegebenen Wert einfach innerhalb einer Konstante namens Check Steps. Nur um zu erklären, was hier vor sich ging, werden wir alle erforderlichen Schritte durchlaufen und diese dann innerhalb des Elementwerts speichern. Zum Beispiel wäre dies bei dem allerersten erforderlichen Schritt , der im Allgemeinen Rolle Teig ist, der Wert dieses Elements. Die Indexzahl wäre natürlich Null. Im Folgenden prüfen wir noch einmal nach dem allerersten, ob dieser Rollteigwert dem ersten Wert in abgeschlossenen Schritten entspricht. Wenn diese Pizza hergestellt wurde, sollten beide Werte dem Rollteig entsprechen. der zweiten Schleife wäre dies im Allgemeinen Soße gleich. Dann prüfen wir, ob die Quelle der zweite Wert ist und so weiter. Jede Methode gibt true zurück, wenn alle übereinstimmen oder falsch sind , wenn eine einzelne oder mehrere fehlschlagen. Dies ist der Haupttest , um zu überprüfen, ob die Pizza korrekt ist, bevor Sie in den Ofen gehen. Wenn wir wollten, könnten wir dies einfach als unsere einzige Überprüfung verwenden , aber wenn wir dies verwenden, weiß der Küchenchef nicht genau welche Zutaten das Problem verursacht haben. Er wird nicht wissen, ob er zu viele Zutaten verwendet hat, nicht genug Zutaten oder die falschen Zutaten. Um dabei zu helfen, richte ich mehrere Bedingungen ein, damit wir verschiedene Fehlermeldungen geben können. Dies wird einige if-Anweisungen übergeben , um einige Prüfungen durchzuführen. Aber der erste, wir prüfen, ob zu viele Zutaten hinzugefügt wurden. Wir möchten wissen, ob die Länge der abgeschlossenen Schritte größer ist als die Länge der erforderlichen Schritte. Bei abgeschlossenen Schritten ist die Länge größer als die erforderlichen Schritte. Wenn es vorerst der Fall ist, legen wir einfach ein Konsolenprotokoll ein und wir sagen zu viele. Kopieren Sie dies, fügen Sie dies unten ein und ändern Sie dies in das weniger als Symbol. Wir können prüfen, ob nicht genügend Zutaten verwendet wurden. Wenn dies passiert, wird im Konsolenprotokoll nicht genug angezeigt. Der dritte wird überprüft, ob diese beiden Werte gleich sind, also stellen Sie sicher, dass dies richtig geschrieben ist. Wir prüfen, ob die abgeschlossenen Schritte den erforderlichen Schritten entsprechen. Wir prüfen auch, ob die Zutaten falsch sind. Wir können dies mit unserer CheckSteps Variable tun und prüfen, ob der Wert gleich false ist, indem wir einen Ausruf hinzufügen. Grundsätzlich haben wir die richtige Anzahl von Schritten unternommen , aber die Zutaten sind falsch, aber dies protokolliert den Wert falscher Zutaten an der Konsole . Schauen wir uns das in der Konsole an. Öffnen Sie die Entwickler-Tools. Wir fangen wieder an. Wähle eine unserer Pizzen und lass uns Peperoni probieren, was einfach ist. Wir müssen den Teig mit Pizzasauce rollen. Hoffentlich fügt dieser zu viele Zutaten hinzu, klickt auf zu viele Optionen. Versuchen Sie, in den Ofen zu geben, ich sehe zu viele, erfrischen Sie sich. Machen wir das noch einmal, Margarita. Wir klicken nur auf eine dieser Zutaten. Im Ofen sind das nicht genug Zutaten, und dann die dritte und letzte werden wir prüfen, ob wir die falschen Zutaten mit der richtigen Menge an Schritten aufgenommen haben die falschen Zutaten mit der richtigen Menge an Schritten aufgenommen . Testen wir das. Wir wissen, dass die Peperoni den Rollenteig haben, sie hat die Sauce, den Käse und Peperoni, also müssen wir vier Schritte unternehmen, aber sicherstellen , dass diese falsch sind. Peperoni, ich füge etwas Schinken hinzu. Stellen Sie sicher, dass wir uns in vier Schritten befinden. Klicken Sie auf den Ofen und wir können sehen dass wir die falschen Zutaten verwendet haben. Gut. Wir haben unsere Nachrichten und diese müssen jetzt auch dem Benutzer angezeigt werden, und wir können dies tun, wenn wir zu unserer index.html gehen . Werfen wir einen Blick darauf. Für unseren Nachrichtenbereich haben wir dieses umgebende div und unsere Nachrichten für den Koch, und dann dieses P mit der ID der Nachricht. Wir könnten diese Nachrichten direkt in jede unserer IF-Anweisungen schreiben und ich werde diese auf den Bildschirm stellen, aber stattdessen erstellen wir eine eigenständige Funktion, um diese zu behandeln, da wir es sein werden wiederhole diese mehrfach. Fügen wir unsere Funktion namens ShowerRorMessage hinzu. Übergeben Sie die Nachricht, die wir anzeigen möchten. Wenn das alles ist, wählen wir unseren Nachrichtenbereich , den wir gerade auf der Indexseite mit document.QuerySelector gesehen haben. Übergeben Sie die ID der Nachricht, legen Sie den InnerText-Inhalt gleich der Nachrichtenvariablen fest. Sobald der Koch einen Fehler gemacht hat , möchten wir, dass dies nach einer gewissen Zeit verschwindet einer gewissen Zeit und wir können dies mit einem setTimeout tun. Übergeben Sie dies, was eine durch Komma getrennte Funktion aufnimmt . Der zweite Wert ist die Zeitverzögerung in Millisekunden, also sagen wir zwei Sekunden. Öffne den Funktionskörper. Alles, was wir hier tun werden, ist diesen Nachrichtenbereich zu kopieren und ihn einzufügen. Lassen Sie uns dies auf eine leere Zeichenfolge setzen. Wir können diese Funktion namens ShowerRorMessage jetzt aufrufen und Konsolenprotokolle direkt darüber platzieren. Fügen Sie dies ein, fügen Sie eine Zeichenfolge hinzu. Sie haben auch zu viele Zutaten verwendet. Kopiere das. Bei der zweiten haben Sie nicht genug Zutaten verwendet, und die dritte haben Sie die falschen Zutaten verwendet. Probieren wir das mal aus. Auch hier machen wir den gleichen Test wie zuvor. Wählen Sie eine Bestellung aus, also machen wir zu wenig. Du hast nicht genug Zutaten verwendet , dann verwenden wir zu viele. Das ist gut. Dann der letzte, wenn wir die falschen Zutaten verwenden, also Peperoni. Ich füge vier Schritte hinzu: Teig rollen, Pizzasauce und Paprika, und los geht's. Das letzte, was zu tun ist, ist sicherzustellen, dass diese Pizzen nur in den Ofen gegeben werden, wenn die Zutaten und die Schritte korrekt sind. Derzeit, wie wir uns früher angeschaut haben dies mit dieser IF-Anweisung kontrolliert, und dies wird nur zum Ofen beitragen, wenn dies zutrifft. Wir müssen diesen wahren oder falschen Wert kürzen ihn von der Overbllow-Funktion namens StepsCompleted zurückgeben . Derzeit läuft diese Funktion und wir führen alle unsere Prüfungen durch, aber wir geben noch keinen wahren oder falschen Wert zurück, daher müssen wir dies ganz unten hinzufügen. Wir wollen nur, dass dies auch dann wahr wird, wenn die Ofenkapazität noch nicht erreicht ist. Früher haben wir Variablen eingerichtet, die Ofen und auch OfenKapazität genannt werden, die wir gerade hier sehen können. Ich habe den Ofen, der ein leeres Array ist und auch die OfenKapazität auch. Wir haben es so eingestellt, dass nur sechs Pizzen aufbewahrt werden. Wir möchten auch einen Check durchführen, um sicherzustellen, dass wir nicht zu viele Pizzen im Ofen haben , bevor wir den Wert true zurückgeben . Wir schneiden das raus. Fügen Sie eine IF-Anweisung hinzu , in der wir prüfen, ob der ofen.length kleiner ist als die Kapazität des Ofens , die derzeit sechs ist. Wenn es so ist, geben wir true zurück, wenn nicht, geben wir false zurück. Wir sind jetzt fast da, aber wir müssen uns auch darum kümmern was passiert, wenn wir die falschen Zutaten verwendet haben, denn wenn wir eine Pizza vermasseln, wollen wir auch unsere WastedPizza-Funktion ausführen , die wir zuvor erstellt. Wir können dies innerhalb unserer IF-Aussagen tun. Wenn wir zu viele Zutaten verwendet haben handelt es sich um eine falsche Pizza, führen Sie unsere WastedPizza-Funktion und kehren Sie dann aus dieser heraus. Der nächste Schritt ist der mittlere Schritt, um zu prüfen, ob wir nicht genügend Zutaten verwendet haben. Wir möchten jedoch die WastedPizza-Funktion nicht ausführen , da sie immer noch die Möglichkeit haben können, die richtigen Zutaten hinzuzufügen danach immer noch die Möglichkeit haben können, die richtigen Zutaten hinzuzufügen. Alles, was wir tun, ist wieder da rauszukommen. Für den letzten, bei dem ich die falschen Zutaten verwendet habe , wollen wir wieder die WastedPizza-Funktion ausführen , kehren Sie davon zurück. Dies sollte uns nun bereit machen, dies auszuprobieren, als wir unten im vorherigen Video die WastedPizza-Funktion erstellt haben unten im vorherigen Video die WastedPizza-Funktion . Schauen wir uns das mal an. Dies löscht auch den Canvas. Wir wissen, ob diese Funktion ausgeführt wird , und wir werden auch wissen, ob der Rückgabewert von true ausgelöst wurde , weil wir eine Pizza im Ofen sehen sollten, also werden wir das auffrischen und ausprobieren. Wählen wir zuerst die Peperoni aus. Ich versuche es für die richtigen Zutaten : den Teig, die Sauce, den Käse, die Peperoni und das ist der Ofen. Das ist gut. Das ist [unhörbar] jetzt geräumt, also probieren wir noch einen, den Schinken und die Ananas. Dafür machen wir es falsch. Wir fügen die falsche Zutat hinzu, also nicht zu viele. Dies alles scheint zu funktionieren, weil diese Pizza nicht in den Ofen gegeben wird , aber die Leinwand unten immer noch geräumt ist und bereit ist, eine neue Pizza hinzuzufügen. 47. Abwicklung von Bestellungen: Wenn wir alle Pizzen bei einer bestimmten Bestellung abgeschlossen haben, ist es eine gute Idee, die Bestellung abzuschließen , damit wir mit der nächsten fortfahren können. Darauf konzentrieren wir uns in diesem Video. Kurz davor möchte ich ein kleines Problem beheben. Dieses Problem, wenn wir zum Browser gehen und unser Spiel starten. Klicken Sie auf eine dieser Bestellungen. Das Problem ist, dass wir auf diese Zutaten klicken können bevor wir überhaupt eine unserer Pizzen ausgewählt haben. Dadurch fühlt sich unser Projekt nicht nur ein bisschen seltsam an, es bedeutet auch, dass wir keine Pizza in den Ofen geben können, da wir diese ausgewählten Zutaten gegen die auf Pizza geklickte Pizza prüfen . Um dies zu beheben, müssen wir nur prüfen, ob der aktuelle Pizzabschnitt festgelegt ist , wenn wir auf Zutaten klicken. Suchen Sie dazu nach der StepComplete-Funktion, also mache ich eine Suche. Dies ist der, den wir brauchen, gerade hier. Bevor wir zuerst prüfen, ob ein Schritt abgeschlossen ist, können wir ganz oben eine if-Aussage machen. Dies wird prüfen, ob wir eine Pizza ausgewählt haben. Wo wir das machen können, wenn wir zu unserer Index.html in den Küchenbereich gehen , können wir sehen, dass wir diese Spanne mit der ID der aktuellen Pizza haben . Wenn wir eine der Pizzen oder Bestellungen auswählen, wird diese dann in diesem Abschnitt platziert. Wir können prüfen, ob es Inhalte in diesen Elementen enthält. Wir tun dies, indem wir dies mit document.QuerySelector auswählen. Dies ist eine ID, also gib den Hash ein. Die ID lautete current_pizza. Wir könnten prüfen, ob sich hier ein innerer Text befindet oder ob er einer leeren Zeichenfolge entspricht. Wenn das leer ist, haben wir ein Problem, wir haben keine Pizza ausgewählt. Was wir tun werden , ist, auf unsere Funktion namens ShowerRorMessage zuzugreifen , sie in einer Reihe von zuerst zu übergeben, eine Pizza auszuwählen, an der Sie arbeiten möchten , und dann kehren wir davon zurück, also nein Der folgende Code wird ausgeführt. Testen wir es. Wir können zum Browser gehen, unser Spiel starten und eine unserer Bestellungen auswählen. Bevor wir nun eine unserer Pizzen auswählen, versuchen wir, Zutaten wie Rollteig hinzuzufügen, und wir sehen unsere Fehlermeldung genau hier. Der Schritt ist nicht mehr als abgeschlossen gekennzeichnet wie wir daran sehen können, dass diese Schaltfläche nicht deaktiviert ist. Jetzt, um unsere Bestellung abzuschließen. Dafür gibt es zum Beispiel drei Pizzen. Dann wollen wir alle drei machen und dann unsere Bestellung abschließen. Bevor wir den Spieler abschließen lassen, wäre es gut, zuerst zu überprüfen, ob tatsächlich genug Pizzen erstellt hat, um die Bestellung abzuschließen. Schritt 1 besteht darin, die Anzahl der Pizzen bei jeder Bestellung irgendwo aufzubewahren . Es gibt viele Möglichkeiten, dies anzugehen, aber ich werde es als Attribut speichern wenn wir die Bestellung erstellen. Werfen Sie einen Blick auf die Funktion CreateListofPizzas , die gerade hier ist. Im Inneren, wo wir unsere besonderen Elemente gebaut haben, haben wir eine Spannweite mit der aktuellen Pizza-Menge. Zum Beispiel könnten dies zwei Margheritas oder eine Peperoni sein. Jetzt können wir die Menge jeder Auftragsposition zu einer Variablen hinzufügen . Lassen Sie uns diese Variable direkt oben erstellen , damit wir dies verfolgen können. ganze Pizzen insgesamt, und wir setzen dies zunächst auf einen Wert von Null. Wir setzen dies dann jedes Mal zurück, wenn wir unsere Pizza-Liste erstellen , indem wir diese auf den Wert Null setzen. Dann, direkt darunter , können wir die aktuelle Pizza-Menge zur vorhandenen Gesamt-Pizza-Variable hinzufügen die aktuelle Pizza-Menge zur . Nur um zu klären, was wir hier machen, wenn wir zum Beispiel eine Bestellung haben, hat diese erste drei Pizzen, diese hat drei und diese hat vier. Was wir tun, ist, dass wir alle Pizzen durchschleifen alle Pizzen und dann diese Menge zu unserer Variablen hinzufügen. Dann haben wir diese Summe für die Bestellung, die wir uns in Zukunft beziehen können. Wie bereits erwähnt, verwenden wir diese Gesamtmenge der Pizzen und fügen diese unserer Bestellung als Attribut hinzu. Wir können dies tun, wenn wir die Bestellung erstellen. Wir müssen nach der Funktion CreateSingleOrder suchen , die sich direkt unten befindet. Direkt unter unserer Pizzaliste werden wir den Bestellumschlag holen, wir setzen das Attribut, das wir in der Vergangenheit verwendet haben. Das Attribut, dies wird ein benutzerdefiniertes Attribut sein, es ist nicht eines der integrierten Attribut, das wir bereits haben. Wenn wir unsere eigenen benutzerdefinierten Attribute hinzufügen, haben wir im Allgemeinen das Datenpräfix. Dies sind Daten, Gesamtpizzen und dann der Wert, der unsere obige Variable ist die wir als Total Pizzen erstellt haben. Was wir hier im Grunde tun, ist wir jedes Mal, wenn wir eine neue Bestellung erstellen , ein Datenattribut namens Data-Total-Pizzen mit der Gesamtzahl der Pizzen in der Bestellung hinzufügen . Wenn wir das speichern, können wir in die Entwicklertools springen und überprüfen, ob alles funktioniert. Aktualisieren Sie und starten Sie dann unser Spiel. Wenn wir nun eine unserer Bestellungen auswählen, suchen Sie nach der Klasse des Order Wrappers, und Sie können sehen, dass jede einzelne dieses neue Attribut namens Data-Total-Pizzen und die Menge für jede dieser Bestellungen hat dieses neue Attribut namens Data-Total-Pizzen befehle. Dies bedeutet, dass wir jetzt die Gesamtzahl der Bestellungen haben , die wir erstellen müssen. Früher, wenn wir uns die Variablen ansehen, haben wir auch eine Variable namens Pizzas complete for order erstellt , die wir hier haben. Dies wird jedes Mal erhöht, wenn wir eine neue Pizza in den Ofen geben, was uns die beiden Werte gibt, die jetzt verglichen werden müssen. Um dies zu tun, müssen wir auch einen Button erstellen, um die Bestellung abzuschließen, die der Koch in der Küche auslösen kann. Diese Schaltfläche löst eine Funktion aus, und wir können diese in der Funktion „Aktuelle Reihenfolge auswählen“ einstellen. Schauen Sie danach und wählen Sie die aktuelle Bestellung aus. Ich werde hier einen Button erstellen, denn hier legen wir die aktuelle Reihenfolge fest, an der wir arbeiten. Unten, direkt unter dieser letzten Codezeile, aber immer noch innerhalb der if-Anweisung und darunter, und wir erstellen eine Konstante namens CompleteButton. Von Anfang an haben wir die Funktion namens BuildeElement, die ein neues HTML-neues für uns erstellen wird. Die erste Schaltfläche ist der Typ des Elements, das wir erstellen möchten, nämlich eine Schaltfläche und der Wert, der der Text von vollständig ist. Dann können wir auf diese Schaltfläche zugreifen einen Klassennamen complete_btn hinzufügen. Diese Schaltfläche muss eine Funktion auslösen, damit wir einen Ereignis-Listener hinzufügen können , also CompleteButton.addEventListener. Nun, es ist jetzt für einen Klick , der eine Funktion auslöst , die wir in einem Moment namens CompleteOrder erstellen . Schließlich haben wir unser OrderDiv, das ist dieser aktuelle Arbeitsbereich. Wir schnappen uns das und dann können wir AppendChild hinzufügen. Übergeben Sie es in unserem Complete Button. Wir testen dies alles, indem eine einfache Warnung innerhalb dieser Funktion hinzufügen. Erstellen Sie die Funktion namens CompleteOrder. Jetzt alarmiere ich mit dem Text „Vollständig“. Springen wir in den Browser und überprüfen, ob das funktioniert. Aktualisieren Sie und klicken Sie auf „Start“. Wählen Sie eine unserer Bestellungen aus. Es gibt unsere neue Schaltfläche „ Complete“, die eine Warnung auslöst , wenn Sie darauf klicken. Gut. Jetzt wissen wir, dass dies funktioniert und es wurde ausgelöst, wir können diese Warnung entfernen, und dann können wir unseren Vergleich zwischen der Gesamtzahl der Pizzen in der Bestellung und der Anzahl durchführen, die wir derzeit erstellt haben. Zuerst holen wir uns unsere aktuelle Bestellung ab, wir haben diese innerhalb einer Konstante namens CurrentOrder gespeichert. Ich hole das mit document.QuerySelector. Wie wählen wir nun die aktuelle Bestellung aus, an der wir arbeiten? Nun, wenn Sie sich von früher erinnern, als wir auf die Schaltfläche „Start“ geklickt haben, alle Bestellungen innerhalb der Seitenleiste, wenn wir eine dieser Klasse von order_wrapper auswählen und dann, wenn wir auf eine klicken, es ist in den Abschnitt „ Arbeiten an“ übergegangen. Der Abschnitt „Working on“ hat auch eine ID. Wenn wir nach oben scrollen, ist dies der Abschnitt, nur hier. Wir können uns den Bestellwickler holen, der in diesem Working on Abschnitt enthalten ist . Wir können dies tun, indem wir es in einem CSS-Selektor übergeben. Der Working on Abschnitt, unsere Sektion gerade hier schnappt. Dann können wir unseren Abschnitt nach innen greifen, der diese Klasse von Order Wrapper enthält. Wir können dies genau wie bei CSS tun, das Größere als Symbol verwenden, und da dies eine Klasse ist, verwenden wir die.order_wrapper. Wählen Sie diese gespeicherte Bestellung aus. Denken Sie daran, dass wir innerhalb dieser Bestellung die Gesamtzahl der Pizzen für diese Bestellung innerhalb eines benutzerdefinierten Attributs hinzugefügt die Gesamtzahl der Pizzen für diese Bestellung haben. Wir können das get-Attribut verwenden, es in den Attributnamen übergeben, den wir diesem gegeben haben, und das waren Daten-Total-Pizzen. Bewahren Sie dies in einer Konstante namens TotalPizzaSonOrder auf. Dann können wir endlich unseren Check unten innerhalb einer if-Anweisung durchführen. Wir haben die Gesamtzahl der Pizzen, die wir haben sollten, und wir haben auch die Variable von früher genannten Pizzen zur Bestellung gespeichert . Wir können überprüfen, ob Pizzen, die für die Bestellung abgeschlossen sind, kleiner als der oben genannte Gesamtpizzen auf Bestellung Wenn dies der Fall ist, haben wir einen Fehler, sodass wir ihn in unserer Funktion namens ShowerRorMessage mit dem Text „Sie haben nicht genug Pizzen gemacht , um diese Bestellung abzuschließen.“ Dann geh da raus. Probieren wir es mal aus. Speichern Sie dies und aktualisieren Sie es. Was wir jetzt tun müssen, ist unser Spiel zu starten. Für unsere erste Bestellung gibt es drei Pizzen, also klicke darauf. Wenn wir nun versuchen, eins zum anderen hinzuzufügen, gehen wir für den Schinken und die Ananas. Wir werden das allererste erstellen. Füge das dem Ofen hinzu. Wir haben nur einen, klicken Sie auf „Abschließen“. Jetzt bekommen wir die Fehlermeldung hier drin. Das scheint jetzt alles zu funktionieren. Wir können die Bestellung tatsächlich entfernen, sobald sie abgeschlossen ist. Direkt unter der if-Anweisung möchten wir unsere aktuelle Bestellung, die wir von oben gespeichert haben, abrufen die wir von oben gespeichert haben, und diese mit der Methode entfernen aus dem Abschnitt „Arbeiten “ entfernen. Dadurch wird die Bestellung tatsächlich aus diesem Abschnitt entfernt, aber dies wird tatsächlich nur die Reihenfolge entfernen, die den Titel und die Pizzen enthält. Wir müssen uns immer noch darum kümmern , den Button zu entfernen. Die Art und Weise, wie Sie diese Schaltfläche greifen können besteht darin, dass diese vollständige Bestellfunktion von unserem Klick-Handler auf der Schaltfläche ausgelöst wird, damit wir sie im eigentlichen übergeben und Informationen mit dem Ereignis eingeben können . Wir können mit e.target darauf zugreifen. Wir haben dies in einer Variablen namens Complete button gespeichert . Wie oben können wir auf diese Variable zugreifen und die Methode namens remove aufrufen, und die Methode namens remove aufrufen um diese aus dem DOM zu entfernen. Wir werden diesem Spiel später auch einige Statistiken hinzufügen, z. B. die Anzahl der abgeschlossenen Bestellungen. Wir bereiten uns darauf vor, indem oben eine Variable von erstellen. Mit dem Rest von ihnen sagen wir, abgeschlossene Bestellungen ein Anfangswert von Null sein sollen. Gehen Sie dann zurück zu unserer vollständigen Bestellfunktion wo wir dies um den Wert einer, also abgeschlossenen Bestellungen plus plus erhöhen können . Jetzt haben wir diese Bestellung abgeschlossen, wir können auch diese Variable namens Pizzen zur Bestellung zurücksetzen . Wir können dies auf den Wert von Null zurücksetzen, also sind wir bereit für die nächste Bestellung. Lasst uns das endlich speichern und zu unserem Spiel gehen, und wir können das ausprobieren. Klicken Sie auf „Start“. Was wir suchen, ist, die richtige Menge an Pizzen zu erstellen , um diese Bestellung abzuschließen. Zuerst werden der Schinken und die Ananas dies vervollständigen, also haben wir einen, und wir haben auch zwei Peperonis, die wir darauf herstellen können. Wir versuchen es noch einmal. Wir sollten jetzt drei im Ofen haben und drei, die auch mit dieser Bestellung verbunden sind. Klicken Sie auf „Abschließen“ und dies entfernt jetzt unsere Bestellung aus dem Arbeitsbereich. 48. Bestellungen entfernen: Wenn Sie dieses Spiel testen, haben Sie möglicherweise ein Problem bemerkt, wenn wir auf den „Start“ -Button klicken, erhalten wir die Bestellungen, und wenn wir dann auf eine der Bestellungen klicken um es in die arbeiten an Abschnitt, wenn die Bestellungen regeneriert werden, wird dieselbe Reihenfolge immer noch in die Liste aufgenommen. Wir möchten die Bestellung 1 entfernen, da wir daran arbeiten. Dies geschieht für jeden , auf den wir klicken. Um dies zu beheben, könnten wir diese Reihenfolge aus dem Orders-Array entfernen . Um zu ermitteln, auf welche Reihenfolge wir geklickt haben, können wir jedem eine Bestellnummernattribut hinzufügen. In ähnlicher Weise, wo wir in die CreateSingleOrder-Funktion gehen , denken Sie daran, dass wir dieses benutzerdefinierte Attribut namens Data Total Pizzen hinzugefügt haben . Dies half uns herauszufinden wie viele Pizzen insgesamt auf der Bestellung waren, sodass wir dies mit dem Betrag vergleichen konnten, den wir erstellt haben. In ähnlicher Weise fügen wir auch neue benutzerdefinierte Attribute mit der Bestellnummer hinzu, damit wir identifizieren können, auf welches wir geklickt haben. Wenn wir oben einen Blick darauf werfen, haben wir bereits Zugriff auf diese Bestellnummer. Es wird ziemlich einfach sein , dies zu tun. Was wir tun werden, ist diese Zeile zu duplizieren , um ein neues Attribut zu erstellen. Kopieren Sie diese und fügen Sie es ein. Wir erstellen ein neues Attribut. Auch hier ist dies mit dem benutzerdefinierten Datenpräfix die Datenauftragsnummer. Übergeben dieser Bestellnummer. Bevor wir weiter gehen , speichern wir dies und versuchen es im Browser, indem wir die Developer Tools öffnen. Das ist unser Spiel. Wenn wir nun eine unserer Bestellungen auswählen, ist dies Ihr OrderWrapper. Wir haben die Data OrderNumber von eins, wir haben die OrderNumber von 2, 3, 4, 5 und so weiter. Da dies jetzt vorhanden ist, können wir zu unserem Code übergehen und diese Reihenfolge aus dem Orders-Array entfernen. Ein guter Ort dafür ist in unserer Funktion namens SelectCurrentOrder. Sieh dir das mal an. Dies ist eine Funktion, die ausgeführt wird, wenn wir auf jede Bestellung klicken. Mit dieser Konstante von OrderWrapper haben wir bereits Zugriff auf die Click-on-Order. Innerhalb der folgenden if-Anweisung können wir das Attribut „Bestellnummer“ aus dem OrderWrapper abrufen und dann daran arbeiten , dieses zu entfernen. Unten rufen wir zunächst diese Bestellnummer ab und installieren diese innerhalb einer Konstante namens OrderNumber. Stellen Sie dies auf unseren OrderWrapper ein. Dot getAttribute. [nicht hörbar] Kundendaten OrderNumber. Jetzt können wir auf unser Orders-Array zugreifen. Wir können die JavaScript-Array-Methode namens Filter verwenden, die eine Funktion aufnehmen kann, und um dies kurz zu halten, werde ich nur in eine Pfeilfunktion einfügen. In jeder Reihenfolge in der Ordnungsvariablen. Dann möchten wir prüfen, ob die jeweilige Bestellnummer nicht mit unserer obigen Bestellnummer übereinstimmt. Dies filtert alle unsere Bestellungen heraus und lässt nur die Bestellungen durch auf die nicht geklickt wurden. Dies gibt uns ein neues Array mit allen Werten außer diesem. Was wir dann tun können, ist, dass unsere Aufträge gleich dieser sind, wodurch das ursprüngliche Array überschrieben wird. Gehen wir zurück zum Browser und probieren es aus. Starte das Spiel. Wählen Sie unsere erste Bestellung aus. Lasst uns jetzt regenerieren. Wenn unsere Bestellungen jetzt regeneriert werden, sehen wir in dieser Seitenleiste keine Bestellung 1 mehr. 49. Aktualisierung Der UI & Stats: Während der Erstellung dieses Spiels haben wir einige Zahlen im Auge behalten, wie die fertigen Pizzen, die verschwendeten Pizzen und auch die abgeschlossenen Bestellungen. Diese werden jetzt verwendet , um am Ende des Spiels einen Statistikabschnitt zu erstellen . Dieser Bereich wird anstelle des Methodenabschnitts angezeigt. Also verstecken wir diesen Abschnitt und ersetzen ihn, wenn er am Ende des Spiels nicht mehr benötigt wird. Der Abschnitt „stat“ befindet sich tatsächlich bereits in unserer Indexseite. Wenn wir ganz oben im Hauptbereich hier hineingehen , haben wir diesen Bereich, in dem wir alle diese drei Bereiche mit unseren Variablen aktualisieren werden . Dies spiegelt auch unsere Start- und Endspielfunktionen wider und bewegt sich über alle Bereiche, die Elemente ein- und ausblenden , in einigen benutzerdefinierten Funktionen. Derzeit wird unser Statistikbereich nicht angezeigt, denn wenn wir in unser Stylesheet gehen, legen wir dies auf den Anzeigetyp von „None“ fest. Lasst uns auf unsere Indexseite springen und wenn wir uns einen Blick darauf werfen, startet die Spielfunktion gerade hier. Dieser Bereich ist dafür verantwortlich, unsere Start- und Endschaltflächen ein- und auszublenden , sobald das Spiel begonnen oder beendet ist, und wenn wir nach unten scrollen, fügt er auch diese Nachricht zu Beginn des Spiels hinzu, das ist dann nach drei Sekunden entfernt. Auch die Funktion zum Ende des Spiels setzt dann die Schaltfläche Start wieder ein und blendet dann die Schaltfläche „Ende“ aus. Um diese beiden Funktionen direkt unter dem Startspiel neu zu gestalten , verschieben wir diese in eine neue Funktion namens Startup-Spiele-UI. Dann scrolle nach oben. Wir schneiden unsere beiden Bereiche aus, die die Schaltflächen ein- und ausblenden , in unserer Benutzeroberfläche. Dann auch unser Nachrichtenbereich mit dem eingestellten Timeout für dieses Out. Wenn dies in ist und dann können wir anstelle des Codes, der ausgeschnitten wird, eine Benutzeroberflächenfunktion des Startspiels direkt darüber aufrufen eine Benutzeroberflächenfunktion des Startspiels direkt . Sie auf ähnliche Weise knapp unter dem Spielende eine neue Funktion. Dieser ist UI zum Ende des Spiels. Was wir nun tun müssen, ist einen Ausschnitt dieser beiden Zeilen unten und diese in die neue Funktion zu kopieren und diese in die neue Funktion und diesen dann aufzurufen. Probieren wir das aus, über den Browser und klicken Sie auf das „Startspiel“. Dies ist jetzt entfernt und wir sehen das Endspiel. Wenn wir nun auf „Ende“ klicken, wird jetzt der Start-Button angezeigt. Nichts anderes, nur ein Re-Faktor, um unseren Code ein bisschen organisierter zu halten . Jetzt können wir diese beiden neuen Funktionen auch verwenden , um den Statistikbereich ein- und auszublenden. Wir beginnen mit der Benutzeroberfläche des Startspiels unten document.QuerySelector. Schnappen Sie sich den ursprünglichen Methodenabschnitt, den wir ausblenden können, indem Sie auf style.display zugreifen ausblenden können, indem Sie auf style.display zugreifen, und setzen Sie dies auf die Blockkette, duplizieren Sie dies, und dann können wir mit unseren Statistiken das Gegenteil tun . Wir möchten, dass der Statistikbereich ausgeblendet wird, wird dies ändern, um den Wert von none zu sein. Wir tun dies, weil wir nur möchten, dass dieser Statistikbereich am Ende des Spiels angezeigt wird, aber wir tun dies jetzt, indem beide Werte umkehren, anstelle der Benutzeroberfläche am Ende des Spiels ist der Methodenbereich wird ausgeblendet, damit wir den Statistikbereich aufdecken können, indem wir dies auf den Wert von Block festlegen, speichern Sie dies und probieren Sie dies aus. Geh zum Spiel, wir sehen den Methodenbereich, damit wir genau sehen können, was wir mit jeder Pizza und dem Spiel machen , und wir sehen jetzt unsere Statistiken. Wie wir bereits gesehen haben, ist dieser Statistikbereich nur der HTML-Bereich, daher müssen wir darauf achten, unsere variablen Werte zu jedem dieser Spannweiten hinzuzufügen . Springen Sie in unsere index.js innerhalb des Spielendes UI document.QuerySelector. Die erste unserer Spannweiten bei der Idee abgeschlossener Bestellungen, in denen wir festlegen können, dass der innere Textinhalt unserer gleichnamigen Variablen entspricht. Kopieren Sie dies noch zweimal und fügen Sie es ein. Der mittlere Teil war Pizzen fertiggestellt. Wieder mit dem übereinstimmenden Variablennamen. Der dritte war verschwendete Pizzen und verschwendete Pizzen variabel. Diese freien Variablenwerte müssen ebenfalls zu Beginn jedes Spiels zurückgesetzt werden. Der Start des Spiels UI Es wird all diese Werte zurückgesetzt. Der erste war die abgeschlossenen Bestellungen Null, die fertiggestellten Pizzen Null und auch verschwendete Pizzen 2. Probieren wir das mal aus. Wir müssen ein paar neue Bestellungen erstellen, um das Spiel zu starten. Schinken und Ananas im Ofen und Peperoni. Verschwenden Sie auch einige dieser Pizzen, also haben wir ein paar Statistiken, beenden Sie das Spiel. Sehen Sie keine Updates in den Statistiken gehen wir zu unserem Code und schauen uns dies an. Wo aktualisieren wir das? Wir aktualisieren dies am Ende des Spiels UI. Diese drei Zeilen. Wir können hier sehen, dass der Texteditor ein Problem mit den drei Punkten hervorgehoben hat . Wir haben vollständige Bestellungen , die abgeschlossen sein sollten, überprüfen Sie die Variable. Schließe das alles ab. Das sieht aus wie das Richtige, das Ergebnis. Bestellnummer 1, nämlich Schinken und Ananas, fügen Sie diese in den Ofen und dann zwei Peperonis , vervollständigen Sie die Bestellung. Als nächstes versuchen wir, eine Bestellung zu verschwenden, wir fügen etwas Peperoni und Schinken hinzu, fügen diese in den Ofen, das wird verschwendet. Klicken Sie nun auf „Ende“, sehen Sie sich eine abgeschlossene Bestellung an, die korrekt ist. In Bezug auf fertige Pizzen denken Sie daran, dass diese Variable nur aktualisiert wird , wenn der eigentliche Ofen mit dem Kochen fertig ist. Sobald der Timer, der auf 20 Sekunden eingestellt ist, dieser erst nach Beendigung dieser Kochzeit als fertige wird dieser erst nach Beendigung dieser Kochzeit als fertige Pizza hinzugefügt. Wir haben auch eine Pizza verschwendet, also ist das gut. Fast jetzt mit diesem Video fertig, haben wir auch ein paar Dinge zu reparieren. Wenn wir auf den „Start“ -Button klicken, sehen wir genau, was das ist. Wir werfen einen Blick auf den Küchenbereich, wir haben 11 bei verschiedenen Zutaten und auch der Timer ist auf 271 Sekunden, aber wenn wir auf „Start“ klicken, werden wir von dort aus weitermachen anstatt Neustart und die Zutaten werden ebenfalls verdoppelt. Beheben wir diese beiden Probleme in unserer Benutzeroberfläche zum Start des Spiels. Zuerst setzen wir unsere Zutaten zurück, indem wir den HTML-Bereich mit Abfrageauswahl auswählen. Wählen Sie die Zutaten aus und setzen Sie diese zurück, indem Sie die innerHTML auf eine leere Zeichenfolge setzen. Kümmert sich auch den Countdown-Timer, indem Sie die Count-Down-Zeitvariable so einstellen , dass sie der Spiellänge entspricht. Probieren Sie das aus. Es ist auch das Spiel, Schinken und Ananas, füge es in den Ofen. Wenn wir jetzt enden, starten wir den Timer, der zurückgesetzt wurde. Wir sehen nur den einzigen Satz von Zutaten. den Statistikbereich zu beenden, habe ich schließlich eine Fade-Animation zu unserem CSS hinzugefügt. Wenn wir in unser Stylesheet gehen, schauen wir nach dem Verblassen. Erstellen einer einfachen Animation, um im Startbereich am Ende des Spiels zu verblassen . Alles, was wir tun müssen, ist, dies als Klassennamen zu unserem Element hinzuzufügen . Um das Ende des Spiels zu sehen, duplizieren Sie eine davon, schnappen Sie sich alle Starts. Dieses Mal legen wir fest, dass der Klassenname gleich dem Fading ist. Gut, lassen Sie uns einen letzten Test im Browser geben. Starte das Spiel, wähle eine Bestellung aus, schließe die erste ab, Peperoni. Schließe ein paar dieser Pizzen ab, um endlich auf unsere Statistiken das Spiel zu beenden. Gut. Da das vorhanden ist, werde ich dieses Projekt jetzt als fertig bezeichnen. Aber es sind wahrscheinlich ein paar Dinge, die verbessert werden können und ein paar kleine Probleme, die möglicherweise auch gelöst werden müssen. Aber in diesem Projekt geht es darum, JavaScript zu lernen. Ich denke, es hat uns viel zum Üben gegeben und eine gute Chance zu zeigen, wie all diese kleinen Dinge, die Sie während dieser Klasse gelernt haben, alle zusammenarbeiten, um etwas viel Größeres zu schaffen . 50. Einführung In Den Bereich: Ein wichtiger, aber oft verwirrender Teil von JavaScript ist der Umfang. Der Umfang ist höchstens grundlegend eine Möglichkeit, Variablen in Gruppen zu platzieren. Jede Gruppe ermöglicht einen gewissen Zugriff. Dies bedeutet, dass wir eine gewisse Kontrolle darüber behalten können was Zugriff auf unsere Variablen hat. Dies ist sinnvoll , da Variablen alle unsere wichtigen Daten enthalten. Warum sollten wir wollen, dass sie auf „ Zugriff“ geändert werden , wenn sie es nicht brauchen. Hier sehen wir ein einfaches Beispiel. Wir deklarieren eine Variable namens Score. Wir haben dann eine Funktion, um den Score zu aktualisieren an der Konsole zu protokollieren. Hier ist alles vollkommen in Ordnung. Aber was ist damit , wir beschließen, dem Ergebnis einen Bonus von 10 Punkten hinzuzufügen . Diese Variable wird innerhalb der Funktion erstellt und loggt sich dann bei der Konsole an. Auch hier gibt es keine Probleme. Die Konsole zeigt einen Wert von 11 an. Die Probleme beginnen , wenn wir versuchen, außerhalb der Funktion auf diese Bonusvariable zuzugreifen. Dies würde einen Fehler verursachen, bei dem eine Meldung dem Vorbild des Bonus nicht definiert ist. Wir wissen, dass es definiert ist, weil wir sehen, dass es aufgrund des Umfangs nicht zugänglich ist. Dies geht auf diese Gruppen zurück, in die Variablen platziert werden. Da die Bonusvariable im Gegensatz zum Punktestand innerhalb der Funktion erstellt wird . Der Zugriff darauf ist auf alle Funktionen beschränkt. Aber wie wir bei JavaScript wissen, ist das nie nur das. Es gibt auch ein paar andere Dinge, die wir verstehen müssen. Zum ersten Mal seit langer Zeit können wir in einen neuen Abschnitt springen, und das ist Nummer 9 und dann in die erste Lektion springen, nämlich Einführung in den Bereich , der eine index.html hat. Um die Zugriffsstufe auf eine Variable zu steuern , hängt dies von einigen Faktoren ab. Wie wir gerade gesehen haben, ist der Ort in unserem Programm, an dem wir die Variable deklarieren , und auch die Art der Variablen , die wir erstellen. Wir können Variablen mit var, let und const erstellen , und diese haben auch Auswirkungen auf den Umfang. Dies ist das gleiche Beispiel, das wir uns gerade angeschaut haben, in dem wir eine Punktzahl mit dem Schlüsselwort var außerhalb der Funktion deklarieren . Dann aktualisieren wir innerhalb der Funktion diese Variable. Wir fügen einen Bonus hinzu und protokollieren diesen dann in der Konsole. Lasst uns in die Konsole springen. Wir können bestätigen, was wir gerade gesehen haben. Öffnen Sie uns und wir erwarten den Wert von 11. Dies funktioniert, weil die Score-Variable auf der obersten Ebene unseres Programms deklariert wird auf der obersten Ebene unseres Programms deklariert und dies nicht bedeutet, dass sie physisch oben platziert werden muss , genau wie hier. Es bedeutet nur, dass es nicht in etwas anderem verschachtelt oder deklariert ist, z. B. einer Funktion. Dies bedeutet, dass es im globalen Bereich und global zugänglich ist. Wenn wir versuchen, auf die Bonusvariable außerhalb der Funktion zuzugreifen , wo sie deklariert wurde. Wir haben drinnen nicht erklärt. Mal sehen, was unten passiert. Placement Console Log, eine Bonusvariable, die dann einen Bonusfehler zurückgibt, ist nicht definiert. Diese Bonusvariable ist darauf beschränkt, nur innerhalb dieser Funktion zugegriffen zu werden. Weil diese Funktion auch ihren eigenen Umfang hat. Dies kann für Variablen nützlich sein, wenn nein, wir müssen es nicht anderswo verwenden. Es gibt uns die Sicherheit, dass andere Abschnitte unseres Codes diese Werte nicht ändern können. Dieser Funktionsbereich bedeutet auch, dass wir mehrere Variablen mit denselben Namen erstellen könnten, aber innerhalb einer anderen Funktion und wenn wir dies dazu benötigen, wären sie völlig unabhängig. Wir können diese Zugriffsebene auch in der Konsole des Browsers sehen . Wenn wir dieses Konsolenprotokoll-Update zuerst entfernen , um diesen Browser zu löschen. Wenn wir dann den Wortstand in hier eingeben und eingeben, gibt dies den Wert von eins zurück. Dies ist richtig, weil wir den Anfangswert von eins haben und dann unsere Funktion ausgeführt wird und diese erhöht, um den Wert von eins zu sein. Das alles funktioniert, weil diese Variable global ist. Aber was wir versuchen, auf unseren Bonus zuzugreifen, der auf diese Funktion ausgerichtet ist . Probieren wir das mal aus. Geben Sie ein und wir sehen die gleiche Fehlermeldung, die wir aus dem Konsolenprotokoll hatten. Zusammen mit diesen Funktionen sind diese globalen Variablen auch in anderen block-Anweisungen wie for-Schleifen und if-Anweisungen verfügbar . Versuchen wir eine if-Anweisung direkt unter unserem Funktionsaufruf. Wenn Score, platzieren Sie es in ein Konsolenprotokoll mit dem Wert der Punktzahl und dies sollte wie erwartet funktionieren. Dies gilt auch für andere Blockanweisungen. Blockanweisungen sind im Grunde genommen Abschnitte, die in geschweifte Klammern gewickelt sind, daher haben wir die Funktion, die wir hier haben. Ich habe die if-Anweisungen, die auch diese geschweiften Klammern haben, aber auch Dinge wie for-Schleifen und While-Schleifen. Zusammenfassung. JavaScript hat das Konzept des Umfangs, damit wir festlegen wie viel Zugriff wir auf eine Variable wie dieses Beispiel haben Score wird im äußersten Abschnitt unseres Codes deklariert, was bedeutet, dass er im globalen Bereich liegt. globale Variablen wie diese kann überall zugegriffen werden, einschließlich innerhalb der Codeblöcke, die in geschweifte Klammern eingewickelt sind, dh Funktionen und if-Anweisungen. Das Gegenteil ist jedoch der Fall, wenn wir eine Variable innerhalb einer Funktion deklarieren, diese einen Funktionsbereich hat und außerhalb dieses Blocks nicht verfügbar sein wird. Schützen Sie daher die Variable davor aktualisiert oder von anderswo entfernt zu werden. 51. Nesting Bereich: Bisher sehen wir, dass der Umfang nur in eine Richtung zu funktionieren scheint, von außen nach innen. Oben deklarierte Variablen, wie diese Variable auf globaler Ebene, sind in anderen Funktionen oder Blöcken wie dieser Funktion hier verfügbar . Wir können weitermachen, indem wir andere Aussagen innerhalb anderer verschachteln , und der Umfang wird auf die gleiche Weise fortgesetzt. Der Zugriff wird von oben und unten auf jede Ebene weitergegeben, aber neue Variablen, die innerhalb neuer Blöcke deklariert sind, sind immer noch eingeschränkt. Sie werden effektiv nicht auf ein höheres Niveau zurückgebracht. Wenn wir dies im vorherigen Video sehen , wo wir versuchen, außerhalb dieser Funktion und im globalen Bereich auf diese Bonusvariable zuzugreifen außerhalb dieser Funktion und im globalen Bereich auf diese Bonusvariable . Die Verschachtelung des Bereichs wird in JavaScript und vielen anderen Sprachen als lexikalischer Geltungsbereich bezeichnet . Werfen wir einen Blick darauf, wie das in Aktion aussieht. Zu Beginn haben wir das gleiche Setup wie zuvor. Lassen Sie uns zunächst dieses Konsolenprotokoll ändern und den Text der Insider-Funktion einschließen. Wir tun das, damit es ein bisschen klarer ist, weil wir diesen Code jetzt erweitern werden, dann ist er immer noch innerhalb dieser Funktion wir können einen zusätzlichen Block verschachteln, z. B. eine if-Anweisung. Eine if-Anweisung, bei der wir überprüfen können, ob der Bonus zutrifft und ob dies der Fall ist, basierend auf einem neuen Konsolenprotokoll mit dem Text von Inside if-Anweisungen. Dann können wir die Bonusvariablen am Ende anhängen. Jetzt befinden wir uns in einer verschachtelten Block-Anweisung. Wir versuchen, von oben auf unsere Bonusvariable zuzugreifen , also was wird Ihrer Meinung nach passieren? Nun, probieren wir das mal aus. Stellen Sie sicher, dass Sie sich im Abschnitt „Verschachtelungsbereich“ und dieser im Browser geöffnet ist. Aktualisieren. Wir können wie erwartet sehen, dass der Insider-Funktionscode ausgeführt wird , weil es nichts gibt, was dies stoppen könnte. Dann wird eine Ebene nach unten in der if-Anweisung nicht nur das Konsolenprotokoll ausgeführt, sondern wir haben auch Zugriff auf diese Bonusvariable. Dies bedeutet, dass verschachtelte Anweisungsblöcke auf Variablen von einem äußeren oder einem höheren Umfang zugreifen können . Aber was ist mit andersherum? Aber wir können dies ausprobieren, indem wir eine neue Variable innerhalb unserer am tiefsten verschachtelten Anweisungen hinzufügen, also var bonus2, jede Zahl ist in Ordnung für diesen Test und wir können darauf auf der höheren Ebene zugreifen, Das ist diese Insider-Funktion, schreiben Sie den Wert von bonus2 hinzu, speichern und aktualisieren, und jetzt können wir sehen, dass wir den Wert von undefined erhalten. heißt, wir können deutlich sehen , dass dies nicht umgekehrt funktioniert. Wir werden undefiniert, sodass JavaScript sich bewusst ist, dass diese Variable existiert, aber ihr ein undefinierter Wert zugewiesen wird. Als kurze Randnotiz würde bonus2 mit let oder den const-Schlüsselwörtern deklariert, mit let oder den const-Schlüsselwörtern deklariert, einen Fehler anstatt einen undefinierten Wert zu haben. Aber bald mehr dazu. Die Verschachtelung kann auch so tief fortgesetzt werden, wie Sie möchten. Lassen Sie uns versuchen, eine neue Block-Anweisung hinzuzufügen, z. B. eine While-Schleife. Auch dies hat auch seine eigenen geschweiften Klammern, um den Code einzuschließen und einen neuen inneren Bereich zu erstellen. Lassen Sie uns zuerst den Bonus2 entfernen , den Sie nicht mehr benötigen. Wir können dies aus dem Protokoll entfernen, und dann können wir innerhalb unseres am tiefsten verschachtelten Abschnitts noch einen weiteren gehen. Erstellt eine neue Variable namens numbers, die Sie durchlaufen werden, und legen Sie fest, dass es sich um ein Array mit beliebigen Werten in hier handelt. Während Loop brauchen wir auch einen Anfangswert, den wir in i speichern können . Setze dies auf Null. Wir können diese While-Schleife weiter ausführen, während ich kleiner ist als die Länge unseres Arrays, das wir mit Zahlen, dem Land in unserem Codeblock oder unserem Bereichsabschnitt zugreifen können . Platzieren Sie ein neues Konsolenprotokoll mit Zahlen i, das jede dieser Zahlen einzeln ausgibt , also bleiben Sie nicht in einer Endlosschleife stecken. Wir können den Wert von i jedes Mal erhöhen. Testen wir das mal. Aktualisieren. werden Konsolenprotokolle von hier aus fallen. Auch hier greifen wir von diesem am tiefsten verschachtelten Abschnitt aus immer noch von einer höheren Ebene auf unsere Variable zu, und wir können noch weiter steigen und unsere Bonusvariable testen und dies in unserem tief ausprobieren verschachtelter Abschnitt. Fügen Sie dies ein, und es gibt unseren Wert von 10. auch das frühere Beispiel abgehen, können Sie wahrscheinlich sagen, was passieren wird wenn wir versuchen, die Dinge andersherum zu tun. Wenn Sie innerhalb dieser While-Schleife eine neue Variable erstellen, springen Sie hier hinein. Aber das Protokoll mit der neuen Variablen von bonus3, die jedem Wert entspricht, und dann können wir versuchen, auf der obersten Ebene unserer Funktion darauf zuzugreifen , also fügen Sie dies innerhalb unseres Konsolenprotokollbonus3 hinzu, aktualisieren. Dort sehen wir den Wert von undefined. Auf diese Weise können wir den Bereich in verschachtelten Blockabschnitten verwenden. Wir haben auch einige Beispiele dafür gesehen, wie Umfang nur von einer Weise aus zugänglich ist. Verschachtelte Abschnitte, wie unsere While-Schleife, greifen auf jede Variable aus einem hohen Bereich zu, aber es funktioniert nicht umgekehrt. 52. Block & Funktionsumfang: Springen Sie in die nächste Datei, die den Block- und Funktionsbereich ist . Wir sind nicht allzu verwirrt darüber, was wir uns jetzt ansehen werden. Ich habe das gleiche Funktionsbeispiel wie zuvor beibehalten. In diesem Beispiel haben wir mehrere verschachtelte Variablen innerhalb dieser Funktion auf verschiedenen Ebenen. Funktionen verhalten sich anders als andere Anweisungsblöcke. Jedes Mal, wenn ich Blöcke erwähne, beziehe ich mich auf den Code, der in geschweiften Klammern umgeben ist, wie diese if-Anweisungen und auch auf unsere Schleifen. Mit einer Funktion wie dieser können wir nicht auf die innen verschachtelten Variablen von außen zugreifen . Wenn wir versuchen, kurz nach unserem Funktionsaufruf ein Konsolenprotokoll zu platzieren , greifen Sie auf unseren Bonus3 zu. Sie sehen, dass Bonus3 nicht definiert ist und auch für Dinge auf anderen Ebenen wie dem regulären Bonus gleich ist. Wir haben auch das gleiche Problem, aber es spielt keine Rolle, ob die Variablen auf der obersten Ebene einer Funktion innerhalb anderer Blöcke verschachtelt sind . Selbst wenn wir diese Variablen mit let oder const deklarieren , wird es auch dasselbe sein. [unhörbar] var von lass die gleichen Ergebnisse und auch das Gleiche für const. Wechselt zurück zu var. So verhält sich eine Funktion. Es hat seinen eigenen Umfang und wir wissen genau , wo wir uns mit den darin deklarierten Variablen befinden. Aber mit anderen Blöcken ist es nicht einfach. Wenn wir dies von einer Funktion in einen der Block ändern, z. B. eine if-Anweisung, schauen wir uns an, was passiert. Verschieben Sie das Schlüsselwort function und wir können sagen, ob die Punktzahl gleich 0 ist, denken Sie daran, dass die Punktzahl im globalen Bereich deklariert ist. Wir haben immer noch die console.log für den Bonus unten. Wenn wir nun versuchen zu aktualisieren, müssen wir auch unseren Funktionsaufruf entfernen. Diese Bonusvariable ist jetzt verfügbar. Aber was ist mit einer tief verschachtelten Variablen wie Bonus3? Versuchen wir es mal. Aktualisieren Sie und dieses funktioniert auch. Wir können hier sehen, dass sich die Blöcke anders verhalten als Funktionen in Bezug auf den Umfang. Dies geschieht, weil Blockanweisungen keinen eigenen Geltungsbereich haben. Nun, das stimmt nicht genau weil es für dieses Beispiel gilt, das wir hier sehen. Als JavaScript-Entwickler haben wir jedoch mehrere Möglichkeiten, je nachdem , wie wir unsere Variablen deklarieren. Variablen, die mit dem Schlüsselwort var deklariert das wir bisher bewusst verwendet haben, werden sich immer so verhalten. Wenn Sie jedoch const oder lassen Sie diese Blöcke hineinlassen, wird der Zugriff von außen entfernt und diese zu ihrem aktuellen Block formen. Wenn wir sicherstellen wollten, dass diese Bonusvariable nur innerhalb dieses Blocks und nicht von außerhalb verfügbar ist, die wir hier haben, müssen wir sicherstellen, dass wir diese Variable mit dem const oder dem let deklarieren Schlüsselwort. Jetzt probieren wir den Bonus aus. Wir haben keinen Zugriff mehr und auch das Gleiche für const. Genau als Zusammenfassung, als wir Variablen innerhalb von Funktionen deklarierten, hatten wir nicht die Wahl , ob wir den Zugriff auf das Innere des Funktionsblocks einschränken oder sicherstellen wollten den Zugriff auf das Innere des Funktionsblocks einschränken oder , dass es von außen zugänglich. Wenn wir jedoch andere Blöcke verwenden, z. B. eine if-Anweisung oder eine Schleife, geben uns diese Blöcke die Wahl, ob wir Umfang verwenden möchten oder nicht. 53. Hissen: Zu Beginn des Kurses habe ich kurz einen Begriff namens Hissen erwähnt und versprochen, darauf zurückzukommen. Das werden wir jetzt abdecken. Wir haben bereits einige Beispiele für Hosting gesehen. Nehmen wir zuerst ein paar Beispiele , um zu sehen, was passiert. Titeldateien in diesem Hebeabschnitt enthalten einige Beispiele und die erste ist vielleicht bekannt. Dies war ein Beispiel, das wir früher im Funktionsbereich verwendet haben, und oben haben wir zwei Arrays. Wir haben das Brot und auch die Brownies. Dann haben wir ein Funktions-Setup in zwei verschiedenen Stilen. Wir haben die Funktionsdeklaration und auch den Funktionsausdruck. Beide tun dasselbe wie Sie prüfen, ob eine Zutat im ausgewählten Array vorhanden ist. Warum zeige ich dir das gleiche Beispiel noch einmal? Nun, beachten Sie hier, wie wir die Funktion in der Konsolenanmeldung oben aufrufen die Funktion in der Konsolenanmeldung oben aufrufen , bevor die Funktion erstellt wurde . Wir nennen es Scheck. Da unser Code von oben nach unten gelesen wird, gelangen wir in den Funktionsaufruf CheckAllergien , bevor er überhaupt erstellt wurde, sei es in der Deklaration oder in der Ausdrucksversion. Gehen wir zum Browser und sehen was mit diesem Konsolenprotokoll passiert. Mal sehen, ob wir daraus einen zurückgegebenen Wert zurückbekommen. Das funktioniert mit der Funktionsdeklaration, aber was ist umgekehrt? Wir kommentieren die Deklaration und setzen den Ausdruck wieder ein, aktualisieren und dies gibt einen Fehler zurück, der besagt, dass wir vor der Initialisierung nicht auf unsere Funktion zugreifen können . Darunter haben wir Beispiel 2, bei dem es sich um eine wirklich vereinfachte Version des Problems handelt. Wir erstellen ein Konsolenprotokoll und melden den Wert der Variablen an, bevor sie erstellt wurde. Wir haben vorher in der Konsole gesehen, dass das funktioniert. Wir entfernen dies einfach mit der Fehleraktualisierung. Wir können sehen, dass das einwandfrei funktioniert. Dies funktioniert, obwohl wir auf unsere Namensvariable zugreifen , bevor sie deklariert wurde, und es wird noch seltsamer, wenn wir versuchen, einen Namenswert neu zuzuweisen , bevor er deklariert wird. Oben oben, direkt über unserem Konsolenprotokoll. Was wir tun werden, ist, diese Variable mit einem neuen Wert neu zuzuweisen oder zu aktualisieren , bevor sie überhaupt erstellt wird. Das funktioniert auch. Wir werden den neuen aktualisierten Wert in der Konsole sehen. Obwohl diese Beispiele vielfältig sind, zeigen sie alle eine grundlegende Sache. Wir können oft auf Variablen zugreifen , bevor sie überhaupt deklariert werden. Dies führt uns zu einem Begriff namens Hissen. Kurz bevor wir darauf eingehen, möchte ich Ihnen etwas anderes zeigen, was eine Varianz des letzten Beispiels ist. Was ist ganz unten, wenn Sie ein Konsolenprotokoll hatten , das den Wert der Rolle übergibt? Wir deklarieren diese Variable dann, ohne sie mit einem Wert zu initialisieren, und geben dieser dann ganz am Ende einen Wert . Testen wir das mal. Speichern und aktualisieren. Sie können sehen, dass diese leicht modifizierte Version den Wert von undefined zurückgibt. sich diese beiden Beispiele ansieht, mag es ziemlich seltsam erscheinen weil wir uns ansehen, wie wir auf Variablen zugreifen können , bevor sie deklariert werden, und auch da beide Beispiele ziemlich ähnlich sind. Hissen wird oft als der Prozess von JavaScript beschrieben , wobei unsere Variablen und Funktionsdeklarationen übernommen und an die Spitze des Programms oder an die Spitze ihres Umfangs an die Spitze des Programms oder an die verschoben werden, was bedeutet, dass sie deklariert und jederzeit während unseres Codes zuzugreifen. Dies würde vieles erklären, was wir gerade gesehen haben. Keiner der Codes wird physisch verschoben oder an den Anfang unseres Programms verschoben. Es ist der Prozess, bei dem unsere Variablen und Funktionsdeklarationen zur Kompilierzeit im Speicher abgelegt werden . Der von Menschen lesbare Code, den Sie schreiben, wie JavaScript, kann von einem Computer gelesen werden. Es muss zuerst hinter den Kulissen in eine Reihe von Anweisungen konvertiert oder kompiliert werden Kulissen in eine Reihe von , die Computer verstehen können. Während dieser Kompilierphase wird unser Code zuerst gelesen oder übergeben. Unsere Variablen und Funktionsdeklarationen werden dann im Speicher gespeichert. Nur um klarzustellen, dass während dieser Kompilierphase, in der dieses Programm zum ersten Mal übergeben wird, Variablen wie dieses zuerst im Speicher gespeichert werden, weshalb wir auf sie zugreifen können, bevor wir scheinen überhaupt zu haben hat sie erschaffen. Hinter den Kulissen gibt es keine versteckte Magie, keine Bewegung unseres Codes an die Spitze des Programms. Es wird einfach unser Code gelesen und ein Verweis auf alle Variablen und Funktionen, die im Speicher gespeichert sind. Dies erklärt ein paar Dinge aus unseren Beispielen. Erstens, wenn wir uns dieses Funktionsbeispiel oben ansehen . Das erste Beispiel, die Funktionsdeklaration. Funktionsdeklarationen werden gehisst. diesem Grund können wir diese Funktion aufrufen , bevor sie überhaupt deklariert wird, was wir mit unserem Konsolenprotokoll sehen. Funktionsausdrücke werden jedoch nicht angehoben, und deshalb haben wir einen Fehler in der Konsole festgestellt. Zum Beispiel 2, das allererste. Da dieser Variablenname von Chris gehisst wird, können wir deshalb darauf zugreifen, bevor er überhaupt erstellt wurde, obwohl dies für die zweite Version, die zurückkehrt, anders war undefiniert. Warum glauben Sie, dass es einen Unterschied zwischen diesen beiden Variablen gibt? Nun, ein wichtiger Teil zu verstehen ist, was genau gespeichert wird. Um dies besser zu verstehen, gehen wir einen kurzen Schritt zurück zu den variablen Grundlagen. Zuvor haben wir uns einige dieser variablen Schlüsselwörter angeschaut dieser variablen Schlüsselwörter angeschaut und eine Deklaration ist, wenn wir eine Variable deklarieren, die Sie verwenden möchten, und geben ihr dann einen Namen. Sobald wir ihm dann einen tatsächlichen Wert übergeben haben, wird dies als Initialisierung bezeichnet. Sie haben Deklaration und Initialisierung. Zurück zu diesem Beispiel für unsere Rollenvariable. Hier haben wir eine leere Variable deklariert und danach haben wir sie mit dem Wert von dev initialisiert. In der frühen Kompilierphase nur die leere Variablendeklaration wird nur die leere Variablendeklaration gehisst und im Speicher gespeichert. Obwohl die folgende Zeile, in der wir es initialisieren, dieser Wert von Entwickler zu diesem Zeitpunkt ignoriert. In diesem Stadium wird ihm der Wert von undefined zugewiesen. diesem Grund sehen wir in der Konsole undefiniert. Mit den vorherigen Beispielen, da wir dies jedoch mit einem Wert von Chris initialisieren, der Variablen in der Kompilierphase wird der Variablen in der Kompilierphase dieser Wert statt undefiniert zugewiesen . Um die Dinge noch verwirrender zu machen, müssen wir hier daran denken, dass wir das Schlüsselwort var für beide Beispiele verwenden . Das Verhalten unterscheidet sich auch mit dem Schlüsselwort let oder const. Wenn wir unsere Rolle auf den Grund ändern, um es zu lassen, schauen wir uns an, was hier passiert . Wir loggen uns den Wert der Rolle ein, aktualisieren und jetzt erhalten wir jetzt einen Fehler innerhalb der Konsole, anstatt dass der Wert von undefined dieser Variablen zugewiesen wird. Dieser Fehler besagt, dass wir vor der Initialisierung nicht auf unsere Rolle zugreifen können . Dies liegt daran, dass wenn wir das Schlüsselwort const oder let verwenden , es zuerst mit einem Wert deklariert werden muss , bevor wir darauf zugreifen können. Wenn wir ihm nicht zuerst einen Wert zuweisen, wird ihm hinter den Kulissen immer noch ein Wert von undefined gegeben , aber wir müssen ihn trotzdem deklarieren bevor wir versuchen, in unserem Code darauf zuzugreifen. Dies kann besonders am Anfang ein kniffliges Thema sein, da das Hissen für alle drei dieser Schlüsselwörter gilt, es gilt für let, var und const. Var macht die Dinge jedoch ein bisschen anders, wie wir es gerade gesehen haben. Aber selbst wenn Sie nicht vollständig verstehen, was zu diesem Zeitpunkt vor sich ging, ein grundlegendes Verständnis dafür kann Ihnen ein grundlegendes Verständnis dafür, dass Variablen hochgezogen werden , in Zukunft viel Ärger ersparen , wenn Sie laufen in einen ähnlichen Fehler hinein. 54. Temporal Dead Zone: Die temporale Totzone klingt schwieriger als sie tatsächlich ist. Die meisten Konzepte es umgeben, wurden in früheren Videos behandelt. Wenn wir uns den Code im Skriptbereich unten ansehen, haben wir ein Konsolenprotokoll und eine Variable. Wir wissen, dass eine Variable, die wie diese mit dem Schlüsselwort var erstellt wurde, Zugriff findet , bevor sie deklariert wurde. Dies liegt daran, dass die Variable an die Spitze ihres Geltungsbereichs angehoben wird . Wir können dies sehen, indem wir zuerst darauf zugreifen , und ich lege es in die Konsole, damit alles völlig gut funktioniert. Aber wie wir auch herausgefunden haben, ist das Verhalten anders, wenn wir die neueren let- oder const-Schlüsselwörter verwenden . Eine andere Möglichkeit, dies zu betrachten, wäre vielleicht, eine Variable zu initialisieren, bevor wir sie verwenden. Wenn wir den Wert entfernen und diesen dann nach oben initialisieren , ist der Name gleich Chris. Mal sehen, was hier drin passiert. Wir haben immer noch einen Fehler, da wir versuchen, zu früh auf unseren Namen zuzugreifen , bevor er überhaupt initialisiert wurde. Aber was ist, wenn wir die Linien eins und drei umschalten würden? Nun, wenn wir eins ganz unten platzieren und dann das Schlüsselwort let nach oben verschieben, dies stattdessen den Wert von undefined zurück. Dies wird auch im vorherigen Video angesprochen. Wenn wir einer Variablen mit dem Schlüsselwort let keinen Wert zuweisen , bevor wir sie verwenden , wird sie stattdessen mit dem Wert undefined initialisiert . Const, let und var erhalten alle den Wert undefined, wenn wir den Anfangswert nicht festlegen bevor wir versuchen, auf die Variable zuzugreifen. Der Unterschied ist, dass var zugegriffen werden kann , bevor es überhaupt deklariert wurde, genau wie wir es im vorherigen Video gesehen haben. Wie hängt das alles mit der temporalen Totzone zusammen? Nun, es ist einfach ein Name für etwas, das wir bereits gesehen haben , wenn wir die Schlüsselwörter const und let verwenden. Es ist der Name für einen Zeitraum, ab dem wir einen bestimmten Bereich eingeben, bis hin zu dem Zeitpunkt , an dem eine Variable initialisiert oder zugänglich ist. Eine Variable kann existieren, aber sie ist noch nicht initialisiert. In diesem Fall soll es sich in der temporalen Totzone befinden und wir können nicht darauf zugreifen oder sie so verwenden, wie wir es wollen. Wenn das alles etwas verwirrend klingt, lassen Sie uns ein Beispiel vereinfachen um Ihnen ein besseres Verständnis zu vermitteln. Was wir tun werden, ist, dass wir unsere oberste Zeile angesichts des Konsolenprotokolls entfernen unsere oberste Zeile angesichts des Konsolenprotokolls und sagen, dass der Name gleich einem Wert ist. Wenn wir das ausprobieren, wissen wir, dass dies nicht funktionieren wird, wie wir es in früheren Beispielen gesehen haben. Dies liegt daran, dass wir von Beginn des aktuellen Bereichs an die temporale Totzone betreten. Lassen Sie uns einen Kommentar hinzufügen, die temporale Totzone beginnt. Dies ist alles auf der obersten Ebene unseres Skripts, also befindet es sich im selben Umfang. Es ist nicht in einem inneren Bereich wie einer Funktion oder einer if-Anweisung verschachtelt . Wenn dann unsere Variable in Zeile 14 initialisiert wird, die aktuelle temporale Totzone endet die aktuelle temporale Totzone und die Variable ist jetzt zugänglich. Seine Anfangs- und Endzone passiert auch in jedem anderen Bereich. Wenn dies beispielsweise in einem bestimmten Block war, z. B. einer Funktion oder einer if-Anweisung, die in den geschweiften Klammern umgeben ist, würde dies auch zutreffen. Wenn man sich dieses Beispiel anschaut, scheint es, dass die Code-Reihenfolge der entscheidende Faktor ist, da die Variablendeklaration stattfindet, nachdem wir versucht haben , im Konsolenprotokoll darauf zuzugreifen. Dies ist jedoch nicht der Fall. Wie bereits erwähnt, ist die temporale Totzone eine Zeitspanne, von dem wir einen bestimmten Bereich betreten, bis hin zur Initialisierung einer Variablen. Es ist die Zeit, die wichtig ist und nicht die Reihenfolge des Codes, da sich das Wort temporal tatsächlich auf die Zeit bezieht. Wir können dies sehen, wenn wir dieses Protokoll in eine Funktion umwickeln. Erstellen Sie eine Funktion nach oben. Sagen wir 'nimm den Namen. Melden Sie sich mit dieser Konsole in einer Funktion an und rufen Sie dann unsere Funktion auf. Wir können jedoch erwarten, dass dies einen Fehler verursachen wird, genau wie wir es zuvor gesehen haben. die Code-Reihenfolge anschaut, das Konsolenprotokoll immer noch passiert das Konsolenprotokoll immer noch, bevor wir unsere Variable deklarieren. Es ist verständlich, dass Sie möglicherweise einen Fehler erwarten. Dies ist jedoch nicht der Fall da die Funktion tatsächlich außerhalb der temporalen Totzone aufgerufen wird. Die temporale Totzone ist nicht die Code-Reihenfolge, es ist die Zeit, die benötigt wird, um diese Variable tatsächlich zugänglich zu machen. Hier und auch in den letzten Videos gibt es einige komplizierte Dinge zu erfassen . Ich erwarte nicht, dass Sie beim ersten Versuch alles vollständig bekommen, aber ich denke, es ist wichtig zu wissen, dass diese Dinge existieren, weil Sie eines Tages deswegen auf ein Problem stoßen können beim ersten Versuch alles vollständig bekommen, aber ich denke, es ist wichtig zu wissen, dass diese Dinge existieren, weil Sie eines Tages deswegen auf ein Problem stoßen können und es kann Sie nur dazu veranlassen, über diese Konzepte nachzudenken und wie sie sich auf Ihren Code auswirken könnten. Wie erleichtern wir unser Leben und minimieren Fehler? Nun, ein einfacher Weg könnte darin bestehen, const zu setzen und Variablen an den Anfang ihres erforderlichen Umfangs zu setzen, sei es ganz oben in einer if-Anweisung, an der Spitze einer Funktion oder sogar ganz oben in unserer Skripte. Auf diese Weise sind sie bei Bedarf immer einsatzbereit. 55. Verschlüsse: Wenn wir Funktionen erstellen, müssen sie nicht immer eigenständige Funktionen sein. Sie können stattdessen im Starterprojekt verschachtelt werden. In diesem Schließabschnitt sehen Sie hier, dass wir einen leeren Skriptbereich haben. Jetzt erstellen wir eine einfache Funktion um die Wirkung von Schließungen zu demonstrieren. Springen Sie in den Skriptbereich und erstellen Sie hier eine reguläre Funktion. Ich nenne diesen das äußere Innere mit einer Variablen. Wir sagen äußerer Wert. Ich setze das auf eine Reihe von Äußerem. Jetzt können wir hier eine zusätzliche Funktion verschachteln. Ich blase einfach unsere Variable und erstellt eine neue Funktion. Diesmal mit dem Namen „Inner“. Wir werden tun, was wir direkt oben getan wir erstellen eine neue Variable. Dieser kann in einem Wert sein, der der Zeichenfolge von inner entspricht. Dann erstellen wir innerhalb dieser inneren Funktion zwei Konsolenprotokolle. Der erste wird für den Wert des inneren Wertes sein , der in derselben Funktion enthalten ist. Wir werden dies duplizieren und unseren äußeren Wert setzen. Wir wissen aus früheren Videos , dass wir bei der Arbeit mit Scope und wenn wir den Umfang innerhalb von Funktionen oder Klammern wie diesen verschachteln , immer noch auf Variablen zugreifen können, die in äußeren Ebenen erstellt wurden, wie diese hier. Grundsätzlich kann ein innerer Bereich auf Variablen aus einem äußeren Bereich zugreifen. Damit diese innere Funktion unsere Konsolenprotokolle tatsächlich ausführen und im Browser platzieren können. Wir müssen dies hier aufrufen, so genannte innere Funktion macht Sie diese innerhalb der äußeren Funktion verschachtelt ist. Dann rufen wir endlich unsere äußere Haupt-Funktion auf, wir tun dies auch innerhalb eines Konsolenprotokolls. Stellen Sie sicher, dass Sie die Klammern platzieren. Dann teste das aus, indem du in die Konsole springst. Wir sehen inneres, wir sehen außen, was unsere beiden Konsolenprotokolle sind. Dann ist der dritte unten der Wert unserer Funktion , der nicht definiert ist. Wir können diesen undefinierten Wert im Moment ignorieren , da wir von dieser Funktion nichts zurückgegeben haben . Aber wir wissen jetzt, dass dies funktioniert, da wir unsere beiden Konsolenprotokolle haben , während wir von innerhalb dieser inneren Funktion auf beide Variablen zugreifen können . Wir können zuerst auf den inneren Wert zugreifen , da er für diese Funktion lokal ist. der Scope-Kette können wir auch auf den äußeren Wert zugreifen Aufgrund der Scope-Kette können wir auch auf den äußeren Wert zugreifen. Der von Ihnen erwähnte Geltungsbereich oder lexikalische Geltungsbereich ermöglicht dieser inneren Funktion den Zugriff auf unsere beiden Variablen. Was ist mit dieser inneren Funktion wurde aus dieser aktuellen Einstellung herausgezogen. Ich spreche nicht davon, die innere Funktion physisch woanders zu bewegen. Aber was wäre es, wenn wir es in einer Variablen speichern und anderswo nutzen würden? Nun, um dies tun zu können, stattdessen zurück, anstatt die innere Funktion ganz unten aufzurufen wir sie stattdessen zurück, anstatt die innere Funktion ganz unten aufzurufen, also entfernen wir dies und geben den Wert von inner zurück. Der wichtige Teil, den Sie hier verstehen müssen, ist, dass wir die eigentliche innere Funktion zurückgeben. Wenn wir diese äußere Funktion aufrufen. Wir können das in der Konsole sehen. Wir loggen uns immer noch ein und führen das auch aus. Wenn wir dies aktualisieren, sehen wir diese innere Funktion jetzt in der Konsole. Ertragen Sie mit mir hier hier. Was wir hier in diesem Stadium machen , ist, dass wir es ein Äußeres nennen, das die innere Funktion zurückgibt. Diese innere Funktion ist Grunde eine eigenständige Information. Es hat keinen Bezug auf diese äußere Funktion oder Inhalte darin. Schnappen wir uns diesen inneren Wert , den wir im Konsolenprotokoll sehen können. Installieren Sie dies innerhalb einer Konstante namens interact. Jetzt stelle ich statt direkt die äußere Funktion ein. Wir können unsere ständige Aktualisierung einsetzen und wir können immer noch sehen, dass wir Zugriff auf diese innere Funktion haben . Alles, was wir hier tun, ist eine Variable zu erstellen, die einen Verweis auf diese zurückgegebene Funktion speichert . Diese Variable kann jetzt an anderer Stelle verwendet werden. Was wir jetzt haben, ist eine Funktionsreferenzunabhängigkeit der ursprünglichen äußeren Funktion. Dies hinterlässt uns jetzt eine zentrale Frage. Diese innere Funktion, die wir in einer Konstante gespeichert haben, greift von außen auf diese Variable zu. Nun, wir können es herausfinden, indem wir diese Funktion tatsächlich ausführen indem wir die Klammern kurz nach dieser Konstante platzieren. Sagen Sie dies, denken Sie daran, dass wir immer noch versuchen, auf seinen äußeren Wert zuzugreifen. Aktualisieren Sie, und wir sehen immer noch unsere beiden Konsolenprotokolle. Das heißt ja, wir können immer noch auf diese äußeren Variablen zugreifen. Das mag ziemlich merkwürdig erscheinen. Wir greifen auf Variablen zu , die mit dem, was wir bereits über den Umfang gelernt haben, keinen Sinn zu ergeben scheinen . Dies alles bezieht sich auf etwas, das als Schließungen bezeichnet wird. Eine Funktion, genau wie unsere innere Funktion hier, werden wir uns auch daran erinnern, auf welche Variablen sie Zugriff hat. In unserem Fall ist es dieser äußere Wert. Das nennt man eine Schließung. Die Schließung ist ein Zaun um alles, zu dem wir Zugang haben. Denken Sie an alle diese Variablen wo auch immer diese Funktion in Zukunft aufgerufen werden kann. Dies kann jetzt nützlich sein, denn anstatt einen äußeren Wert als globale Variable erstellen zu müssen , können wir diesen Zugriff stattdessen auf diese Funktion einschränken und trotzdem jedes verschachtelte innere zulassen Funktionen, um es zu benutzen. Beachten Sie auch, dass dieser Begriff von Schließungen nur innerhalb von Funktionen erfolgen kann . Das ist immer noch nicht klar. Werfen wir einen Blick auf ein anderes Beispiel, das den Spielerstand verwendet , der aktualisiert werden muss. Wir werden das alles einfach auskommentieren und ganz unten. Erstellen Sie eine neue Variable. Scrollen wir, um gleich 0 zu sein. Erstellen Sie dann eine neue Funktion namens Update-Score. Dann hier drinnen weisen wir unseren Punktestand erneut mit dem Wert des aktuellen Punktepunkts plus 10 zu. Melden Sie dies bei der Konsole an. Rufen Sie unten unsere Funktion auf. Testen wir das mal. Dies sollte ein Wert von 10 sein, da wir unsere ursprüngliche Punktzahl von 0 haben. Wir rufen dann unsere Funktion auf , die 10 zur ursprünglichen Punktzahl hinzufügt und dann den neuen Wert ausgibt. Wenn wir dies mehrmals aktualisieren, indem wir unsere Funktion mehrmals aufrufen, sollten sie auch funktionieren. Das ist alles in Ordnung, es funktioniert wie wir wollten, aber die Punktzahl, die wir außerhalb einer Funktion haben , wird als globale Variable eingestuft. Es kann auch aus anderen Bereichen aktualisiert werden. Stattdessen ist es besser, mehr Kontrolle über diese Variable zu haben und sie nur innerhalb der zu diesem Zweck erstellten Funktionen zu aktualisieren . Sie denken vielleicht, lassen Sie uns diese Variable in die Funktion verschieben . Wir können das runterziehen. Diese Technik erzeugt einen Funktionsbereich und auf seine Variable kann nicht von außen zugegriffen werden. Dies löst eines unserer Probleme, schafft aber auch ein anderes. Sehen wir uns das im Browser an, aktualisieren Sie es. Wir erhalten den Wert von 10 freien Zeiten zurück, da die Variable zu Beginn jedes Funktionsaufrufs wieder auf Null zurückgesetzt wird. Auch wenn dies ein echtes Spiel war, möchten wir möglicherweise auch außerhalb dieser Funktion auf die Score-Variable zugreifen . Vielleicht machen Sie so etwas wie die Anzeige auf dem Bildschirm für den Benutzer. Um dabei zu helfen, können wir eine Schließung verwenden, um innerhalb einer Funktion zum Aktualisieren der Score-Variable zu verschachteln. Wir haben den äußeren Wrapper des Update-Scores. Dann können wir ein neues verschachteltes in einer Funktion namens Vergrößern erstellen , wobei unsere Score-Variable im Inneren und auch dem Konsolenprotokoll das die innere Funktion ist, genau wie zuvor. Speichern Sie diese Funktion auch in eine neue Variable. Der erste, wir sagen const, new score ist gleich diesem zurückgegebenen Wert. Wir könnten diese Funktion immer noch mehrmals aufrufen , wenn Sie möchten. Aber dieses Mal müssen wir auf diese neue Punktzahl verweisen , also ändert es sich. Lassen Sie auch kurz danach in den Klammern stehen, also führen wir diese Funktion tatsächlich aus. Dann probiere das durch Erfrischung aus. Dies hat sich jedes Mal, wenn wir unsere Funktion aufrufen, um den Wert von 10 zugenommen . Dies löst nun die Probleme, die wir zuvor mit der ursprünglichen Update-Score-Funktion hatten. Bevor wir diese Änderungen vorgenommen haben, setzen wir die Score-Variable auf Null zurück. Dies bedeutete, dass das Ergebnis, wie wir zuvor gesehen haben , jedes Mal, wenn wir diese Funktion aufrufen , immer der Wert von 10 war und dies nicht zu jedem der Aufrufe hinzufügte. Schließungen lösen dies, indem sie sich bei jedem Aufruf an die Score-Variable im Speicher erinnern . Eine Score-Variable hat jetzt auch engeren Umfang, sodass wir nicht versehentlich anderswo aktualisiert werden können versehentlich anderswo aktualisiert wenn es sich um eine globale Variable handelt. Wenn wir jedoch immer noch nicht von außerhalb dieser Funktion auf diese Score-Variable zugreifen mussten . Wir können einen Wert zurückgeben und diesen innerhalb einer neuen Variablen speichern. heißt, wir könnten immer noch von innerhalb der Schließung auf diesen Punktestand zugreifen und es dem Endbenutzer anzeigen. 56. Ein Bisschen Hintergrund: Dieser neue Abschnitt enthält einige Schlagworte wie: Callbacks, asynchron, synchron und auch einige Konzepte, die schwer zu verstehen sind, ohne ein bisschen zu wissen Hintergrund, warum wir sie benutzen. Dieses Video wird versuchen, diese in einfachen Worten zu erklären und was genau jeder tut. Beginnend mit synchronem Code. Jede Codezeile ist ein bisschen wie eine Aufgabe und jede wird in der richtigen Reihenfolge abgeschlossen. Zeile 1 wird gelesen, warten Sie, bis dies verarbeitet wurde, und fahren Sie dann mit Zeile 2 fort. Wir werden auch darauf warten, dass dies beendet ist, bevor dann zur dritten Zeile übergehen. Bei einem winzigen Programm wie diesem spielt es keine Rolle , da die Operationen schnell und einfach zu verarbeiten sind und Sie keine Wartezeit zwischen jedem einzelnen bemerken würden . Aber im Extremfall, wenn eine Zeile die Verarbeitung nie beendet hat oder lange gedauert hat , bleiben wir fest. Im Browser können wir einige einfache Beispiele dafür sehen, also springen Sie in diesen neuen Abschnitt, der Nummer 10 ist, Asynch-Javascript. In einem kleinen Hintergrundbereich haben wir zwei Beispiele, aber jetzt konzentrieren wir uns auf Beispiel 1, das nicht kommentiert ist und auch auf den HTML-Code oben. Wir haben den Button und die Überschrift der Stufe 3. Ignoriere das Bild vorerst, dies bezieht sich auf das zweite Beispiel. Alles, was wir hier tun, ist, diese beiden ersten beiden Elemente zu greifen. Wir fragen den Selektor ab, wir wählen unseren Button aus. Fügen Sie einen EventListener hinzu , der auf den Klick wartet, und diese Funktion löst eine Warnung aus , und kurz danach greifen wir unsere Überschrift und setzen den InnerText-Inhalt effektiv wenn wir zwei Stufen zu dieser Funktion. Warnungen können zum Beispiel so gut sein, da sie die Ausführung des Codes blockieren, bis wir ihn schließen. Wenn wir dies jetzt im Browser öffnen; kopieren Sie den Pfad dazu, fügen Sie ihn ein und aktualisieren Sie ihn, wir sehen unsere Schaltfläche, die nun auf den Klick abhört. Ich klicke darauf, wir sehen dann das Pop-up das die allererste Zeile unserer Funktion ist, und wenn wir dann auf diesen Button klicken, wird es geschlossen. Die nächste Zeile der Funktion wird dann aufgerufen, die den innerText der Überschrift setzt, sodass wir eine klare Reihenfolge der laufenden Dinge haben. Wir haben die Warnung, und sobald dies beendet ist, bewegt er sich zum Einstellen des Textes. In diesem Beispiel wird jede Zeile nicht in die vorherige Zeile laufen, wie abgeschlossen. So funktioniert synchroner Code. Eines der Probleme bei synchronem Code ist, dass eine einzelne Codezeile die Ausführung des restlichen Programms verhindern kann , was durch die Verwendung von asynchronem Code vermieden werden kann. Der Code wird immer noch zeilenweise gelesen , eine Operation muss jedoch nicht abgeschlossen werden, bevor Sie zur nächsten Zeile übergehen. Effektiv wird der gesamte Code ausgeführt und dann nacheinander abgesetzt. Wir müssen damit umgehen, was zu tun ist, wenn jede Aufgabe abgeschlossen ist, und dies ist der entscheidende Teil hier, und was zu tun ist, wenn der Code erfolgreich ist oder ein Fehler vorliegt. unser zweites Beispiel ansehen, lassen Sie uns diesen Abschnitt einfach auskommentieren. Hier haben wir etwas namens Fetch. Dies ist die Fetch-API, und denken Sie daran, dass wir von früher bestimmte Web-APIs wie Canvas haben . Diese Fetch-API ermöglicht es uns, Dinge in einem Netzwerk abzurufen, bei denen es sich um eine andere Website, eine Datenbank, einen Server oder eine externe API handeln könnte , die jemand anderes erstellt hat , und das Wichtigste hier ist der Fetch-Aufruf asynchron. Es wird ausgeführt und lässt dann den Rest des unten stehenden Codes laufen auch den Rest des unten stehenden Codes laufen, bevor er abgeschlossen ist, oder er erhält Daten zurück. Die Grundidee hier ist, dass wir Daten von woanders erhalten als innerhalb unserer eigenen Anwendung. In diesem Beispiel wird ein Bild aus Wikipedia ausgewählt und dann den Rückgabewert in einer Variablen gespeichert. Protokollieren wir zunächst den Rückgabewert dieser Variablen in der Konsole. einfach dieses erste Beispiel heraus und platzieren Sie es dann in ein Konsolenprotokoll mit dem Wert der Variablen , die ImageSource des Browsers ist. Springe in die Konsole und wir werden etwas sehen, das „Versprechen“ genannt wird. Wir bekommen ein Versprechen zurück und es hat das Ergebnis in Klammern von ausstehend, also worum es geht Ihrer Meinung nach , worum es geht? Nun, wir werden bald Promises genauer nachschlagen, aber es geht auf den wichtigen Punkt zurück , den ich zuvor erwähnt habe. Wenn Sie kurz asynchronen Code oder Asynchron verwenden, müssen wir damit umgehen, was passiert, wenn der Code erfolgreich ist oder wenn ein Fehler aufgetreten ist, und ein Versprechen kann dies für uns erledigen. Als wir das erste Mal von Wikimedia nach diesem Bild gefragt haben, wissen wir derzeit nicht, ob die Wikimedia-Site ausgefallen ist , langsam läuft oder ob es ein Verbindungsproblem zwischen uns und ihrem Server gibt . Dieses unten stehende Konsolenprotokoll wurde sofort nach unserem Abruf aufgerufen, also wurde es ausgeführt, bevor das Image überhaupt zurückkam. diesem Grund erhalten wir das Ergebnis von ausstehend, da wir nie ein Image hatten, um uns tatsächlich an der Konsole anzumelden. Als weiteres Beispiel, wenn dies ausstehend ist und wir kein Image haben, was ist, wenn wir versuchen, das Konsolenprotokoll vielleicht um drei Sekunden zu verzögern ? Nun, lasst uns das rausschneiden. Wir können ein Timeout einsetzen, das eine Funktion auslöst, und sagen wir drei Sekunden. Platzieren Sie innerhalb der Funktion ein weiteres Konsolenprotokoll von zuvor, aktualisieren Sie es, und Sie können nach drei Sekunden sehen, dass unser Versprechen nun erfüllt ist. Wir haben eine Antwort, also drei Sekunden warten, haben wir die Zeit, die Informationen oder das Bild, das wir benötigen, zurückzubekommen . Wenn es sich um einen synchronen Code handelte, müsste der Rest des Codes stattdessen darauf warten, dass dieses Bild drei Sekunden lang zurückkommt , auch wenn wir es nicht verwenden müssten. Oder wenn wir es nie so behandelt haben, kann die Zeile, die unmittelbar auf unseren Abrufaufruf folgt, versuchen , auf unser Bild zuzugreifen, das Sie nicht zurück haben, und verursacht daher einen Fehler. Vor diesem Hintergrund werden wir uns Versprechen und andere Möglichkeiten ansehen, Versprechen und andere Möglichkeiten mit einer Antwort in den kommenden Videos umzugehen. 57. Callback-Funktionen: Dieses Video wird Ihnen etwas vorstellen , das als Callback-Funktion bezeichnet wird. Ein Callback ist nur der Name einer Funktion, die aufgerufen wird, nachdem etwas passiert ist. Die Anomalie, die als nächster Schritt verwendet wird, sobald etwas abgeschlossen ist. Nach dem, was wir zuvor behandelt haben, wissen wir, dass der asynchrone Code einige Zeit in Anspruch nehmen kann. Dies könnte das Abrufen von Daten aus einer Datenbank oder sogar das Speichern in einer Datenbank sein. Mal sehen, wie sich dies auf unseren Code auswirken kann. Der Code in diesem Beispiel beginnt mit einer leeren, ungeordneten Liste. Jetzt hat unser Skript ein leeres User-Array. Eine typische App, die Benutzer hat hätte wahrscheinlich eine Funktion, um unsere Datenbank aufzurufen und das Array dieses Benutzers mit dem Ergebnis zu aktualisieren. Wir haben eine Funktion, um dies zu simulieren und zwei neue Benutzer hinzuzufügen. Alles, was wir innerhalb dieser Funktion tun, ist, auf unser Benutzerarray zuzugreifen und es an Benutzerobjekte zu platzieren. Sobald wir unsere Benutzer wieder aus unserer Datenbank haben, die wir hier assimilieren, werden wir wahrscheinlich als Nächstes eine neue Funktion erstellen möchten , die alle unsere Benutzerschleifen durchzieht jeder und dann zeigt es sie im Browser an. Werfen wir einen Blick darauf, wie das geht. Wir werden eine Funktion erstellen, sagen wir ListUsers. Unter ListUsers greift zuerst auf ein Benutzer-Array zu, wir mit forEach durchlaufen, das eine Funktion für jeden unserer Array-Werte ausführt oder den Variablennamen des Benutzers übergibt. Führen Sie das dann aus, bevor wir diese leere ungeordnete Liste haben, können wir für jeden unserer Benutzer ein neues Listenelement erstellen. Const-Elemente sind gleich document.createElement, erstellen Sie ein neues Listenelement und fügen Sie dann den Textinhalt hinzu , der der Benutzername ist. documents.createTextNode , wo wir unsere Benutzervariable nutzen und auf die Name-Eigenschaft zugreifen können unsere Benutzervariable nutzen . Wie immer müssen wir unseren dreiteiligen Prozess erstellen, der darin besteht, die Elemente zu erstellen, den Inhalt zu erstellen und diese dann im dritten Teil zusammenzuführen. Um die übergeordneten Elemente abzurufen, rufen wir AppendChild auf, fügen den Namen hinzu und fügen dieses Element schließlich zu unserer ungeordneten Liste hinzu. Schnappen Sie sich zuerst unsere ungeordnete Liste mit document.QuerySelector, fügen Sie sie in unsere ungeordnete Liste und dann appendChild, das sind unsere Elemente. Dies ist es für unsere Listenbenutzerfunktion. Wir können dies unten aufrufen und überprüfen alles im Browser funktioniert sogar die Namen unserer beiden Array-Werte. Das funktioniert vollkommen gut. Wir haben keine Probleme mit funktionalen Daten, da wir wissen, dass sie sich in derselben Datei befinden. Aber realistisch gesehen werden wir wahrscheinlich unsere Benutzer aus einer Datenbank zurückholen, und dieser Datenbankaufruf wäre asynchron und kann einige Zeit in Anspruch nehmen. Wenn das alles gut gelaufen ist, wird die Zeitverzögerung gering sein, aber dennoch eine Verzögerung. Um diese Verzögerung zu simulieren, könnten wir unseren beiden Funktionen auch ein setTimeout hinzufügen. Ich hole unsere Benutzer, lasst uns das ausschneiden, einen setTimeout-Aufruf und dann eine Funktion abgeben. Ich würde dem nur eine Sekunde Verzögerung hinzufügen. Öffnen Sie den Funktionstext und fügen Sie ihn in unser Benutzerarray ein, und sehen wir uns jetzt an, was im Browser passiert. Aktualisieren, und selbst nach einer Sekunde sehen wir unsere Benutzer nicht im Browser. Jetzt wurde der Benutzer aufgelistet, da wir sofort Lupin der Benutzer unten sind der Benutzer unten da unsere Funktion sofort aufgerufen wird. Dies geschieht effektiv vor der Verzögerung um eine Sekunde nach unserem Timeout, was bedeutet, dass es keine Werte hat, wenn wir versuchen, auf unsere Benutzer zuzugreifen . Dies ist eine übliche Sache, mit der wir umgehen müssen, wenn wir mit extern gespeicherten Daten arbeiten, fragen wir grundsätzlich nach den Daten, die wir benötigen, aber wir müssen auch sicherstellen, dass die Daten zurückgegeben und verfügbar sind bevor wir sicher darauf zugreifen können. Es muss in Ordnung sein, damit die Dinge nicht kaputt gehen. Obwohl wir die Funktionen in der richtigen Reihenfolge aufrufen , also werden wir unsere Benutzer erstellt und dann unsere Benutzer auflisten, verursacht die Zeitverzögerung das Problem. Wir können dies auch mit einigen Konsolenprotokollen bestätigen. Zunächst einmal, wenn wir direkt nach dem Erstellen unserer Benutzer in einem Ort platzieren, platzieren Sie den ersten und wir sagen, dass dies die GetUsersFromDatabase-Funktion ist und dann auch eine darin platziert wird unsere Listenbenutzerfunktion mit dem Text der Listenbenutzer. Wenn diese Zeitverzögerung nicht von oben nach unten läuft, würden Sie erwarten, dass das erste Konsolenprotokoll angezeigt wird, gefolgt von diesem hier. Aber wenn wir speichern und aktualisieren, passiert das Gegenteil, wir sehen die Liste der Benutzer kalt vor GetUsersFromDatabase, und wir wissen, dass dies der falsche Weg für das ist , was wir tun müssen. Es wäre schön, wenn diese Listenbenutzerfunktion erst aufgerufen würde, wenn der Code in einem Timeout als Erfolg angesehen wurde , und wir können dies tun, indem wir eine Callback-Funktion einführen. Um dies zu tun, verschieben wir die Liste mit Funktionsaufruf, ziehen diesen heraus und übergeben dann die Callback-Funktion an GetUsersFromDatabase. Diese Callback-Funktion wird dann als Parameter aus create our function übernommen . Wie bei jedem anderen Parameter ist dieser Name in Richtung. Es muss kein Rückruf sein, wir werden das darin platzieren, nur damit klar ist, was wir tun. Jetzt können wir diese Callback-Funktion am Ende von setTimeout aufrufen . Kurz nach unserem Konsolenprotokoll rufen wir dies als Funktion auf und können dann zur Konsole zurückkehren und sehen , in welcher Reihenfolge diese angezeigt werden. Aktualisieren Sie, und wir erhalten einen Fehler hier. Wir sagen, dass Callback keine Funktion ist. Rückruf. Dies muss nur keine Funktionsaufrufe haben, da wir nur einen Verweis auf diese Funktion übergeben. Jetzt aktualisiere. Die Dinge scheinen in der richtigen Reihenfolge zu laufen. Wir holen unsere Benutzer aus der Datenbank zurück, dann listen wir jetzt auf, dass Benutzer diese auch wieder im Browser sehen können . Diese Lösung ist ein asynchroner Callback. Denken Sie daran, dass sich das synchrone Video auf den Code bezieht, der in der Reihenfolge ausgeführt wird und eine Operation abgeschlossen werden muss , bevor Sie zum nächsten wechseln. An diesem Beispiel, das wir gerade gemacht haben, können wir, sobald die Benutzer erfolgreich aus der Datenbank zurückgekommen sind, die wir mit unserem setTimeout simulieren, aus der Datenbank zurückgekommen sind, die wir mit unserem setTimeout simulieren, unsere Kohle zurück die Listenbenutzer-Funktion verwenden und auf diese Weise, wenn die Dinge in der richtigen Reihenfolge gehalten werden. Wir können auch zusätzliche Argumente an diese Funktion übergeben . Nehmen wir an, wir wollten nur die Benutzer bekommen , die die Rolle des Admins hatten, wir können dies mit Ausnahme des Parameters übergeben. Wenn wir nun unsere Funktion als Übergabe der Rolle des Admins aufrufen , ist das völlig in Ordnung. Wir können so viele Argumente wie eins, zwei an die Funktion übergeben . Wir müssen sicherstellen, dass der Rückruf immer der letzte ist. Diese Methode, Funktionen als Funktionsparameter zu übergeben , ist nichts Neues. Wir können das sehen, wenn wir zu einer vorherigen Datei zurückkehren. Öffnen wir die Seitenleiste, springen in die vorherige und innerhalb des ersten Beispiels, und innerhalb des ersten Beispiels dem wir einen Ereignis-Listener hinzugefügt haben. Wir hören zuerst auf das Klicken und dann als letzten Parameter , der eine Funktion ausgelöst hat. Hier übergeben wir es in einer Callback-Funktion, die wir ausführen möchten , sobald etwas angeklickt wurde, und betrachten auch eine Array-Methoden, die wir uns für jeden angesehen haben, in dem wir uns befinden dieses aktuelle Beispiel. Jedes Element innerhalb unseres Arrays führen wir dann eine Funktion aus, in der sich auch ein Callback befindet, was bedeutet, dass diese Technik nichts Neues ist. Wenn wir über Rückrufe sprechen, sind dies im Allgemeinen eine ältere traditionelle Art, Dinge zu tun. Als nächstes werden wir uns modernere Wege ansehen. Aber Rückrufe sind wirklich wichtig, um sich dessen bewusst zu sein, da es noch viele von ihnen und heute noch verwendet wird. Auch Rückrufe werden in der JavaScript-Welt ein bisschen Hass bekommen und nicht, weil sie nicht funktionieren. Es liegt mehr daran, wie die Dinge leicht unordentlich werden können. Dieses Beispiel, das wir einfach benutzen, ist nicht so schlimm. Weil wir nur eine einzige Funktion haben, die dann eine zweite Funktion zurückruft. Das Problem liegt jedoch, wenn wir einen Callback haben , der eine andere Callback-Funktion aufruft, die eine andere Callback-Funktion aufruft und so weiter. Selbst wenn man sich dieses Beispiel anschaut, die Benutzerliste möglicherweise benötigt die Benutzerliste möglicherweise auch einen eigenen Rückruf. Dann braucht dieser Callback möglicherweise auch eigenen Rückruf und dann stecken wir in einer langen Kette fest. Wir können dieses Ding auch mit unserem eigenen Leben vergleichen. Wir haben eine Reihenfolge von Aufgaben, die Sie in einer bestimmten Reihenfolge erledigen möchten. Sag, wir wollen das Auto fahren. Aber bevor wir das Auto tatsächlich fahren können, müssen wir zum Auto laufen, bevor wir zum Auto laufen, müssen wir die Schlüssel finden, davor müssen wir uns anziehen und so weiter. Dies ist eine Reihe von Aufgaben, die darauf beruhen die vorherige zuerst erledigt wird. Dies ist vergleichbar mit den Callback-Funktionen, die aufgerufen werden , sobald der vorherige Code erfolgreich ist. Es sind diese mehrfachen Callbacks , die zu einem großen Durcheinander führen können. Um ein Beispiel dafür zu sehen, haben wir einige kleine Demonstrationsfunktionen erstellt. Lassen Sie uns alles von oben kommentieren. Erstellen Sie nun ein paar neue Funktionen. Das erste ist GetOutOFBed, das in der console.log platziert ist, sagt aus dem Bett, und dupliziert dies dann noch dreimal, was uns vier Funktionen gibt. Die zweite besteht darin, unsere Schlüssel zu finden und nur console.log. Der nächste ist zu Fuß zum Auto, und der letzte ist, das Auto zu fahren. Ich werde ja sagen, da unsere Aufgabe abgeschlossen ist. Anhand dessen, was wir aus unserer vorherigen Callback-Demonstration wissen , muss jede dieser Funktionen als Rückruf an die nächste Funktion übergeben werden . Rufen Sie dies dann innerhalb jeder Funktion auf. Der erste GetOutOFBed. Dies wird einen Callback annehmen , der ganz unten ausgeführt wird, auch in den zweiten übergeht, ruft unsere Funktion auf. Wir müssen dies nicht zu unserer letzten Funktion hinzufügen , da sie keine weiteren Funktionen aufrufen wird, da dies unser Endergebnis ist. Es hat tatsächlich diese Kette des Aufrufs all dieser Funktionen ausgelöst , wir werden eine weitere Funktion erstellen um all dies aufzurufen. Erstellen Sie eine neue Funktion namens CompleteTasks. Wir können diese Funktion aufrufen, die CompleteTask ist die die erste Funktion übergibt , die Sie zurückrufen möchten. Unsere erste in unserer Bestellung ist GetOutOfBed. Was wir jetzt tun werden, mag ziemlich komplex aussehen, aber es ist im Grunde das gleiche Setup wie zuvor. Wir würden Benutzer aus der Datenbank holen. Nur dieses Mal gibt es mehr als eine Funktion in der Kette, die wir zurückrufen, und dann können wir innerhalb der CompleteTask-Funktion jede unserer Funktionen schachteln, dann können wir innerhalb der CompleteTask-Funktion jede unserer Funktionen schachteln um sie im Inneren aufzurufen. Der erste ist aufstehen. Übergeben Sie eine Funktion. Lass uns zur Konsole gehen und sehen, was passiert. Wenn wir uns aktualisieren, sehen wir den Text aus dem Bett in der Konsole und wenn wir nachschlagen, ist dies das Konsolenprotokoll ganz oben. Die nächste Partei wird der Schlüssel sein , um all dies zu verstehen. Was wir hier tun werden, ist, dass wir unsere erste Funktion namens CompleteTask erstellen . Dies wird dann bei unserem ersten Schritt aufgerufen, der aus dem Bett aufsteht, dann übergeben wir eine Funktion hinein. Diese Funktion wird als Callback akzeptiert, und diese Funktion wird dann am Ende dieser Funktion aufgerufen. Sobald diese Funktion beendet ist, ruft sie unsere zweite Funktion auf, die darin verschachtelt ist. Dieser nächste Abschnitt, den wir anrufen werden, kann unsere nächste Stufe sein , nämlich Findkeys. Rufen Sie diese Funktion auf, findkeys muss auch eine Callback-Funktion übernehmen , also geben Sie diese ein. Dies sollte jetzt unsere zweite console.log ausführen. Hab einen Rechtschreibfehler, also ändern wir das einfach, Findkeys. Jetzt haben wir unsere zweite console.log, also wird in diesem Abschnitt nur hier ausgeführt und dann wird diese nächste Funktion ausgeführt, wenn die nächste Funktion darin verschachtelt ist. Vorbei an unserer nächsten Etappe, die zu Fuß zum Auto ist. Gehen Sie zum Auto nimmt auch eine Rückruffunktion ein. Wir speichern und aktualisieren, senden Abdrücke aus dem Text des Gehens. Es wird dann unsere nächste Funktion ausführen, die sich darin befindet. Die letzte Etappe besteht darin, das Auto zu fahren. Dies ist die allerletzte Stufe, daher nimmt es keine Callback-Funktion auf. Wir können dies einfach als reguläre Funktion bezeichnen. Aktualisieren. Dieser Code wird zusammen mit allen unseren anderen Funktionen ausgeführt. Wenn Sie möchten, können wir auch zusätzliche Schritte oder zusätzlichen Code in jede dieser Funktionen übergeben . Nur um klarzustellen, dass wir hier eine Hauptfunktion erstellen, die ausgeführt wird, und dann ruft ihre Funktion zusätzliche Funktionen auf. Bei jeder dieser Funktionen warten wir auf den Abschluss des Codes, bevor wir die nächste zurückrufen. Wenn das etwas chaotisch aussieht , dann ist es wahrscheinlich so, weil es ein Durcheinander ist, und deshalb einige alternative Möglichkeiten werden einige alternative Möglichkeiten geschaffen, damit umzugehen. Aber nur weil es neue Wege gibt, heißt das nicht unbedingt, dass dies immer noch nicht relevant ist. Callbacks sind derzeit immer noch ein wichtiger Teil von JavaScript, und Sie werden dies auch im Legacy-Code sehen . Sie werden wahrscheinlich so etwas hören , das auch Callback **** genannt wird, die Pyramide des Untergangs, verschachtelte Callbacks. Auch viele weitere Namen. Alle diese Namen weisen auf die gleiche Komplexität verschachtelter Callbacks hin. In kommenden Videos werden Sie einige alternative Möglichkeiten entdecken, dies zu behandeln, einschließlich der asynchron Verwendung von Callbacks mit Versprechen. 58. Versprechen: Wir wissen jetzt, dass eine asynchrone Anfrage einige Zeit dauern kann, vielleicht nur ein paar Millisekunden oder vielleicht ein paar Sekunden, Minuten oder gar nie abgeschlossen. Wenn wir über dieses Ding sprechen, bezieht es sich oft darauf, etwas von woanders abzurufen, z. B. von einem Server, einer Art Datenspeicher, einer API oder einer externen Website. Ein Versprechen ist großartig, um dieses Ergebnis zu bewältigen. Promise ist ein Objekt und dieses Objekt repräsentiert das Ergebnis einer asynchronen Aufgabe. Das Ergebnis könnte ein Fehler sein, wir kommen möglicherweise nicht vom Server zurück, wonach wir gefragt haben, oder es kann etwas dauern. Versprechen halten diese Aufgabe fest und versprechen Ihnen in Zukunft mitzuteilen , wann sie das Ergebnis kennen. Wir haben bereits Versprechen und einige der Ergebnisse gesehen . Vor ein paar Videos haben wir uns ein einfaches Beispiel für das Abrufen eines Bildes von Wikimedia angesehen . Ich verwende die Fetch-API. Fetch ist eine asynchrone Operation, und wir sehen, dass ein Versprechen in der Konsole zurückgegeben wird. Als wir versuchten, zu früh auf das Versprechen zuzugreifen , bevor es das Bild aufgenommen hat, wurden die Ergebnisse als ausstehend angesehen. Wir fügten dann eine kleine Zeitverzögerung mit einem festgelegten Timeout hinzu, das in der Erfüllung des Versprechens geändert wurde. Dies sind zwei der drei verfügbaren Bundesstaaten mit Versprechen. Ausstehend ist der Ausgangszustand, in dem wir noch nicht wissen, ob die Aufgabe abgeschlossen wird oder nicht, dann erfüllt, wenn die Aufgabe als erfolgreich angesehen wurde, z. B. wann die Daten zurückgekehrt sind und jetzt einsatzbereit sind. Wir haben auch einen Status namens „ abgelehnt“ , wenn die Aufgabe fehlgeschlagen ist. Wir haben nicht die Daten, die wir angefordert haben, und wir müssen etwas dagegen unternehmen. Vielleicht hören Sie auch das Wort, das mit Versprechen geklärt ist. Geschlossen ist, wenn wir das Schicksal der Aufgabe kennen, was bedeutet, dass sie entweder erfüllt oder abgelehnt wird. Wir müssen nichts über den ausstehenden Zustand wissen , da wir nicht sagen können , in welche Richtung er mit dem Ergebnis gehen wird. Aber wir müssen mit einem Erfolg oder einem Misserfolg umgehen. Rüber zu den Starterdateien, was der Abschnitt „Versprechen“ ist. Hier haben wir ein anderes Beispiel, das diese Fetch-API verwendet. Dies ist das Abrufen von Daten von einer externen API, und dies ist nur eine externe URL. Diese URL wählt ein zufälliges Hundebild aus. Wir können dies kopieren und in den Browser einfügen . Wir können sehen, dass wir ein Ergebnis in einem Format namens JSON haben, das für JavaScript Object Notation steht. Es ist eine Syntax für den Datenaustausch über das Internet. Es sieht aus wie ein JavaScript-Objekt, ist aber tatsächlich sprachunabhängig, was bedeutet, dass es auch von anderen Sprachen erstellt und übergeben werden kann . Wir können sehen, dass wir eine Nachricht haben, die eine URL für ein bestimmtes Hundebild und den Code des Erfolgs enthält . Wir können dieses Bild kopieren und diesen Link einfügen, wodurch wir dann Zugriff auf das jeweilige Bild erhalten. Ich habe die Browsererweiterung installiert , um das etwas hübscher aussehen zu lassen. Ihre sehen vielleicht etwas schwieriger zu lesen aus, aber die Daten sollten immer noch genau gleich sein . Zurück zum Redakteur. Wie wir wissen, ist der Abrufaufruf asynchron, sodass wir das Ergebnis des Abrufs dieses Bildes mit dem Versprechen behandeln können . Erstens können wir mit dem erfüllten Zustand umgehen , der ein Erfolg ist, und wir tun dies, indem wir uns am Ende des Abrufs verketten . Wir können das Semikolon entfernen, am Ende ketten. Dann. Dann ist eine Methode, die wir an ein Versprechen binden können. Denken Sie daran, wenn wir die Fetch-API verwenden, wird dies ein Versprechen als Antwort zurückgeben, was bedeutet, dass wir Zugriff auf die damalige Methode haben. Übergeben Sie eine Funktion. Da es sich um einen asynchronen Callback handelt, führen wir den Code nur hier aus. Möchte wissen, dass die Aufgabe erfolgreich abgeschlossen wurde. Natürlich möchten wir wahrscheinlich auf die Daten zugreifen, die wir vom Abrufaufruf zurückerhalten. Dies kann an unsere Funktion übergeben werden, sodass beliebige Variablennamen wie Antwort übergeben werden. Dann könnten wir das an der Konsole protokollieren und prüfen, ob das funktioniert. Ich speichere im Browser und öffne die Konsole. Es gibt eine Antwort. Dieses erfolgreiche Versprechen gibt ein Antwortobjekt zurück, das Details darüber enthält, was wir vom Server oder von der API zurückerhalten . Dieses Objekt enthält Dinge wie den Statuscode. In unserem Fall sind es 200, was bedeutet, dass alles gut ist. Bis zur niedrigen URL sehen wir die tatsächliche URL, die wir im Abrufaufruf angefordert haben , anstatt die URL des Bildes , das wir zurückerhalten. Der Grund, warum wir dies nicht sehen, ist , dass alle Daten, die wir zurückerhalten, in diesem Body-Abschnitt gespeichert sind. Wenn wir dies öffnen, sehen wir immer noch nicht die URL des tatsächlichen Bildes. Stattdessen sehen wir einen lesbaren Stream. Dies geht auf das zuvor erwähnte JSON-Format zurück. Um dieses JSON-Format zu lesen, das im Body-Abschnitt gespeichert ist, haben wir eine JSON-Methode , die wir verwenden können. Im Konsolenprotokoll können wir die JSON-Methode am Ende hinzufügen. Dann probieren wir das mal aus. Speichern und aktualisieren. Wir sind wieder bei einem Versprechen , das den aktuellen Stand ausstehend hat, was bedeutet, dass die Aufgabe noch nicht abgeschlossen ist. Dies liegt daran, dass die JSON-Methode auch ein Versprechen zurückgibt, das wir wieder behandeln müssen. Es gibt ein paar Möglichkeiten, dies zu tun. Zuerst können wir den Konsolenprotokoll-Wrapper entfernen und Response.json verlassen. Da diese JSON-Methode auch ein Versprechen zurückgibt, können wir auch die damalige Methode verketten. Geben Sie das ein, was wieder eine Funktion ausführt. Auch diese Funktion nimmt die Daten aus der Antwort auf geht also in eine Datenvariable über. Dann können wir diese Daten an der Konsole protokollieren. Versuchen wir es, speichern und aktualisieren. Jetzt haben wir unseren JSON-Inhalt, der im Body-Bereich gespeichert ist , erfolgreich weitergegeben . Dies gibt das tatsächliche Bild des Hundes zurück, das in der Nachricht gespeichert ist, sowie Erfolg als Statuscode. Dies ist die gleiche Antwort , die wir gesehen haben, als wir diese früher in den Browser eingefügt haben. Alles hier gibt ein Versprechen zurück, der Abholaufruf gibt ein Versprechen zurück und auch der JSON gibt ein Versprechen zurück. Aber eine andere Möglichkeit, dies zu tun, die ich persönlich bevorzuge, aber es liegt ganz an Ihnen, ist, nicht verschachtelt zu sein, dann Anrufe wie diese. Wenn möglich, bevorzuge ich es, sie alle auf dem obersten Niveau zu halten , um die Lesbarkeit zu gewährleisten. Um dies zu tun, müssen wir die verschachtelte dann Methode ausschneiden , die wir gerade hinzugefügt haben. Wir lassen es in response.json hier drin und schneiden den zweiten bis letzten Satz Klammern bis kurz nach response.json aus. Schneid das raus. sollte die Funktion einfach mit response.json verlassen. Stellen Sie sicher, dass das Semikolon vom Ende entfernt wird, und wir können es am Ende einfügen uns zwei Methoden hintereinander geben. Wenn wir jedoch zum Browser gehen und aktualisieren, die Meldung von undefined angezeigt. Dies liegt daran, dass wir versuchen, auf die Daten unserer vorherigen Methode zuzugreifen . Aber zuerst müssen wir das zurückgeben, um dies zu tun. Das funktioniert alles wie zuvor. Wir können auch so viele dieser dann Methoden wie 1, 2 verketten , und jede wird auf das vorherige Ergebnis warten bevor der Code darin ausgeführt wird. Wir behalten die volle Kontrolle über unsere asynchrone Aufgabe und die Reihenfolge, in der der Code ausgeführt wird. Wir können dies auch wie jedes andere Objekt nach unten filtern. Wir könnten auf die Nachricht zugreifen, die die URL des Bildes ist, das Sie benötigen. Wir können darauf klicken und dies im Browser öffnen. Wir können diese Bild-URL auch verwenden und an ein Bildelement übergeben. Fügen Sie zuerst ein leeres Bildelement direkt über unserem Skript hinzu, und wenn wir wissen , dass wir Zugriff auf diese URL haben, können wir dieses Konsolenprotokoll entfernen unser Image auswählen -Elemente mit document.query-Selektor, und setzen Sie dann das Quellattribut auf data.message. Speichern wir das und aktualisieren Sie den Browser. Jedes Mal, wenn wir aktualisieren, erhalten wir anderes zufälliges Bild von unserer API zurück. Dies ist der erfüllte Staat, der behandelt wird. Aber was ist, wenn es ein Problem gibt und wir einen abgelehnten Staat zurückbekommen? Dies geschieht, wenn beim Abrufen der Daten oder beim Abschließen der von uns angeforderten Aufgabe ein Fehler auftritt . Das ketten wir am Ende eine Fangmethode an. Hier verketten wir die Ereignismethode , entfernen das Semikolon und ketten dann an das Ende der Catch-Methode, und ketten dann an das Ende der die wir ausführen werden, wenn ein Fehler vorliegt Wir übergeben diesen Fehler an diese Callback-Funktion. Viel Funktion mit dem Fehler basierend auf einem Konsolenprotokoll. Beginnen wir mit einer Reihe von Fehlern. Wir können auch die Fehlermeldung am Ende hinzufügen. Wenn wir dies testen und aktualisieren, sehen wir nichts in der Konsole, da das Image erfolgreich zurückgegeben wird. Um dies tatsächlich zu testen, müssen wir in die Entwicklertools springen und in die Registerkarte „Netzwerk“ gehen. Ich wähle dies aus und um dies zu tun, können wir unser Netzwerk tatsächlich ausschalten. Lassen Sie uns das ein bisschen größer machen. Chrome hat dieses Dropdown-Menü , das Sie hier sehen können. Wir verwenden derzeit keine Drosselung, aber wir können dies auch auf eine langsame Verbindung oder sogar offline umstellen . Wenn wir dies tun und in die Konsole springen und aktualisieren, bedeutet das Ausschalten dieses Netzwerks, wann jetzt nicht das gewünschte Image erhalten. Das Versprechen sollte jetzt einen Fehler auslösen. Bei all dem ist das Letzte, was wir uns ansehen werden , die endgültige Methode. Die endgültige Methode wird unabhängig davon ausgeführt, ob das Versprechen erfüllt wurde oder ob es abgelehnt wurde. Dies kann auch am Ende angekettet werden. Wie bei allen oben genannten Methoden müssen wir auch das Semikolon wie in der finly-Methode entfernen , die wiederum eine Callback-Funktion ausführt. Platzieren Sie in ein Konsolenprotokoll mit dem Text von, ich werde immer laufen. Wenn das Netzwerk immer noch ausgeschaltet ist, können wir diese Nachricht aktualisieren und sehen. Lassen Sie uns das Netzwerk wieder einschalten, aktualisieren, in die Konsole springen, und wir sehen dieses Konsolenprotokoll immer noch selbst wenn das Versprechen erfolgreich war. Die endgültige Methode ist nützlich, um einen Code zu verfolgen , den wir ausführen müssen, nachdem das Versprechen abgewickelt ist. Alternativ wäre es, diesen Code sowohl in die dann auch in die Fangabschnitte zu platzieren . Dies würde jedoch zu doppeltem Code führen. Das ist Versprechen und wie kann es mit asynchronem JavaScript wirklich nützlich sein. Diese ganze Sache ist möglich, weil die fetch-Methode anfänglich ein Versprechen zurückgibt, diese ganze Kette zu starten. Aber was ist mit Dingen, die kein Versprechen zurückgeben? Nun, als nächstes schauen wir uns an, wie wir damit umgehen können. 59. Der Versprechen Bauer: Im vorherigen Beispiel könnten wir damit beginnen, Versprechen zu verwenden, da die Fetch-API ein Versprechen zurückgibt. Aber was ist mit Funktionen , die kein Versprechen zurückgeben? Um die Dinge anzufangen, schreiben wir eine einfache benutzerdefinierte Funktion, und diese wird nach einem Timeout ausgeführt und einige Daten festlegen . Ich werde in die Promise-Konstruktordatei springen, die derzeit im Skript leer ist, um oben eine Variable zu erstellen, die als Daten bezeichnet wird. Stellen Sie dies auf ein leeres Objekt ein. Create Funktion namens GetData. Dann passe Inside in unserem setTimeout, das eine Funktion übernehmen wird. Als Funktion Dann führen wir dies kurz danach nach einer Zeitverzögerung von 2.000 Millisekunden aus. Nach zwei Sekunden möchten wir uns nur mit dieser Funktion beschäftigen , unser Datenobjekt auf einen Wert einzustellen. Wir weisen dies neu zu, um ein neues Objekt zu sein , bei dem wir eine Name-Eigenschaft übergeben , die einer Zeichenfolge entspricht. Dies wird GetData aufrufen, um unsere Funktion tatsächlich auszuführen. Am Ende protokollieren wir den Wert der Daten, wir können sehen, was wir zurückbekommen. Parsen unserer Daten. Wir können uns auch für den Namen entscheiden. die Datei im Browser Öffnen Sie die Datei im Browser und springen Sie in die Konsole. Die Konsole sieht den Wert von undefined. Dies ist wahrscheinlich nicht überraschend, da wir auf das Datenobjekt im Konsolenprotokoll zugreifen das Datenobjekt im , bevor wir überhaupt die Name-Eigenschaft festgelegt haben, die Daten zwei Sekunden dauern, bis die Daten festgelegt werden. Dies ist eine etwas simulierte Anfrage an eine Datenbank, frei ist, was zwischen dem Anfordern der Daten und der Rücknahme passiert es frei ist, was zwischen dem Anfordern der Daten und der Rücknahme passiert. Dafür sind keine Versprechen gut, aber diese Funktion gibt standardmäßig kein Versprechen zurück. Dafür können wir unsere eigenen mit dem Promise-Konstruktor erstellen . Konstrukteure haben wir uns bereits mit dem neuen Betreiber in der Vergangenheit angeschaut. Wir haben uns Dinge wie neues Array angeschaut. Wir haben uns ein neues Objekt und auch eine neue Funktion angeschaut. Diese alle erzeugen eine neue Instanz eines Objekts. Denken Sie daran, dass die Versprechen auch Objekte sind. Wir können diesen neuen Operator auch verwenden , um selbst ein neues Versprechen zu schaffen. Kommentieren Sie vorerst unser Beispiel, das alles außer der Datenvariablen ist . Entferne das. Dann können wir unten anfangen, unser neues Versprechen zu konstruieren. Nur mit den Beispielen, die wir zuvor gesehen haben, verwenden wir das neue Schlüsselwort, um ein neues Versprechen zu erstellen und dieser Konstruktor nimmt eine neue Funktion auf, die ausgeführt wird. Diese Funktion nimmt zwei optionale Parameter auf, eine Funktion, die ausgeführt werden soll, wenn das Versprechen auf einem aufgelöst wird, wenn das Versprechen abgelehnt wurde. Dies sind Namen unserer Wahl, aber Entschlossenheit und Ablehnung sind ziemlich beschreibend. Was es war unser eigenes benutzerdefiniertes Versprechen, wir legen genau fest, wann und wo diese Auflösungs- und Ablehnungsfunktionen ausgeführt werden sollen. Der erste Schritt besteht darin, unser Versprechen innerhalb einer Variablen zu speichern. Wir nennen dieses Versprechen einfach. Ich kann das in einem Moment nennen. Aber ich werde einfach Entschlossenheit aufrufen , um dieses Versprechen zu lösen. Danach können wir diese Versprechensvariable nutzen , die unter den kalten, dann fangen und schließlich Methoden liegt dann fangen und schließlich , die wir uns zuvor angeschaut haben. Wir können auf promise.dann zugreifen, und diese Methode ist genau die gleiche wie wir es im vorherigen Video angesehen haben, das eine Funktion annimmt, die ausgeführt wird, der Code war ein Erfolg. diesem Hintergrund platzieren wir in ein Konsolenprotokoll mit dem Text des Erfolgs. Erlauben Sie dies und stellen Sie sicher, dass kein Semikolon am Ende ist. Wir werden uns auch am Ende des Versprechens anschließen. Die Catch-Methode, die auch eine Funktion übernehmen wird. Denken Sie daran, dass die Catch-Methode auch den Fehler übergeben wird , den wir in einem Konsolenprotokoll platzieren können. Gehen wir jetzt zur Konsole und sehen, welche davon protokolliert wurde. Wir sehen den Wert des Erfolgs, was nicht überraschend ist, weil wir dieses Versprechen gelöst haben, was bedeutet, dass es erfolgreich war. Diese Ergebnisfunktion kann auch einen Fulfillment-Wert annehmen , den Sie weitergeben möchten. Sagen wir eine Reihe von Erfolg. Dann wird diese Erfolgsbotschaft auch der Kette weitergegeben, wenn dies erfolgreich war. Der erfolgreiche Abschnitt ist der dann Abschnitt. Wir können dies in unsere Funktion weitergeben. Wir können dies in einer Variablen wie Response speichern und dann können wir dies auf der Konsole protokollieren. Refresh, und los geht's. Dies ist praktisch, wenn Sie benutzerdefinierte Daten oder Nachrichten an den Ergebnisabschnitt übergeben müssen. Aber wenn man auf das frühere Beispiel zurückgeht einige Daten abzurufen, die wir oben hatten, wäre dies ein besseres Beispiel als einfach nur eine Nachricht zu senden. Was wir tun werden, ist, diesen Timeout-Abschnitt aus der Funktion zu kopieren und einzufügen . Dann können wir dies direkt oberhalb des Ergebnisabschnitts einfügen und alle drei Zeilen auskommentieren. Wir können dann den Ergebnisbereich nach oben verschieben , um innerhalb des Timeouts zu sein. Es wird auch die Daten festlegen und dieses Versprechen dann lösen. Dies bedeutet, dass das Versprechen jetzt erst gelöst werden sollte , nachdem die Daten festgelegt wurden. Wir können dies testen, indem wir uns bei der Konsole anmelden. Springen Sie in den dann Abschnitt, wenn dies mit einer neuen Konsole erfolgreich war , protokollieren Sie den Wert unserer Daten. Aktualisieren. Gib diese zwei Sekunden. Sehen Sie sich die Botschaft des Erfolgs an, und unser Objekt wurde mit unserer Zeichenfolge aktualisiert. So können wir mit einem Versprechen mit einem Erfolg umgehen. Aber was ist mit dem Ablehnen? Nun, da dies unser Versprechen ist, können wir es dazu bringen, alles zu tun, was wir wollen. In diesem Beispiel, was erfolgreichen Lösung ist, ist der Name Chris wurde festgelegt. Ich lehne ab, ob das Datenobjekt leer ist. Wir können direkt unten in unser Timeout springen , wo wir unsere Daten festlegen. Wir können eine if-Erklärung abgeben. Wir können prüfen, ob Object.Keys in unserem Datenobjekt enthalten ist. Wir können prüfen, ob die Länge davon größer als Null ist. Der Name ist hier die Schlüsseleigenschaft, wir prüfen, ob die Länge dieses Objekts größer als Null ist. Wenn ja, bedeutet dies, dass dies festgelegt wurde , wo wir die Resolve-Funktion übergeben können. Eine Erfolgsbotschaft. Wenn nicht, wird kurz nach der if-Anweisung ablehnen, die mit der Nachricht von abgelehnt in unsere Funktion übergegangen ist. Probieren wir es mal aus. Wir haben Dateneigenschaftssätze, daher sollten wir mit dem Wert des Erfolgs rechnen . Gibt das zwei Sekunden. Das war ein Erfolg. Wenn wir den abgelehnten Status überprüfen wollen, können wir prüfen, ob Object.keys gleich der Länge von Null ist, was zu einem abgelehnten Versprechen führt. Hier ist ein bisschen los, aber die Idee ist ziemlich einfach. Wenn eine Funktion standardmäßig kein Versprechen zurückgibt, können wir unser eigenes erstellen. Dies kann sich an jedem Punkt lösen oder ablehnen , was uns die vollständige Kontrolle über das Verhalten unserer Funktion gibt. 60. Umgang mit mehreren Versprechen: Sobald wir verstehen, wie Versprechen funktionieren, wird die Handhabung einer AsyncTask viel einfacher. Aber was ist, wenn mehr als eine AsyncTask gleichzeitig ausgeführt wird, kann dies zu verschiedenen Problemen führen. Warten wir auf die erste Aufgabe, bevor wir mit der nächsten Aufgabe fortfahren? Wenn wir beispielsweise 10 AsyncTask gleichzeitig laufen würden, wenn wir auf jeden Abschluss warten, bevor wir zum nächsten übergehen, könnte sich 10 AsyncTask gleichzeitig laufen würden, wenn wir auf jeden Abschluss warten, bevor wir die Verzögerung von jedem wirklich summieren. auch, wenn Was wäre auch, wenn sich Aufgabe Nummer 10 auf den Wert von Aufgabe Nummer 3 stützte , aber Aufgabe 10 zuerst abgeschlossen wurde. Nun, um bei einigen dieser Probleme zu helfen, haben wir Zugriff auf einige nützliche Versprechensmethoden. Wir haben bisher einige Methoden behandelt, einschließlich dann, Catch und schließlich, und diese bevorstehenden Methoden werden sich mit mehreren Versprechen befassen, beginnend mit einer Methode namens ALL. Die ALL-Methode überwindet mehrere Versprechungen und gibt einziges Versprechen und ein einziges Versprechen zu einem Array des Ergebnisses zurück. Es ist nützlich, um mehrere Daten zu sammeln und sie möglicherweise zu einem einzigen Ergebnis zusammenzufassen. Werfen wir einen Blick darauf, wie das im Starter funktioniert. Lassen Sie zwei separate Versprechen in Variablen speichern . Verspreche Nummer 1. Dies ist wiederum ein einfaches Beispiel , das wir zuvor gesehen haben , wo wir ein Bild von unserer API abrufen. Wenn dies erfolgreich war, führt es eine Funktion aus, die den Wert der Antwort zurückgibt. Zusammen mit diesem werden wir das Versprechen Nummer 2 haben, das den Versprechenskonstruktor verwendet , der im vorherigen Video zu sehen war. Dies wird nach zwei Sekunden gelöst. Ich habe sie für dieses Beispiel bewusst einfach gehalten. Aber stell dir vor, wir wollten wissen, ob beide ein Erfolg waren. Anstatt jeden einzeln überprüfen zu müssen , können wir dafür promise.all nutzen. Ganz unten, Zugangsversprechen, Kapital P. Die ALL-Methode. Wir werden ein Array übergeben diese beiden Variablen enthält, also verspreche 1, verspreche 2. Diese promise.all-Methode nimmt jeden iterierbaren Wert wie ein Array auf. Wir haben uns während dieses Unterrichts reichlich über Arrays geschaut . Auch diese ALL-Methode wird ein Versprechen zurückgeben, was bedeutet, dass wir verschiedene Methoden wie dann und fangen an das Ende ketten können . Wir machen genau das Gleiche wie zuvor. Wir ketten dann weiter, was eine Funktion annimmt. Diese Funktion kann auch die Ergebnisse aufnehmen. Wir loggen das bei der Konsole an. Wenn es danach einen Fehler gab, können wir auch als ALL-Funktion, die den Fehler aufnimmt, als eine ALL-Funktion, die den Fehler aufnimmt , im Protokoll platzieren. Dann lasst uns das mal ausprobieren. Stellen Sie sicher, dass die aktuelle Seite geöffnet ist. Aktualisieren. Nach zwei Sekunden kommen wir zurück , kehren zurück und ein Array mit zwei Ergebnissen. Das erste ist unser zufälliges Bild, das in diesem Objekt gespeichert ist. Wenn wir das öffnen, können wir sehen, dass dieser ein Erfolg war. Der zweite wird jedoch nach dem Timeout als undefiniert angezeigt, da das Versprechen eigentlich nichts zurückgibt. Wenn wir wollen, könnten wir einen dritten Parameter an setTimeout übergeben . Lasst uns reinspringen und das machen. Trennen Sie sich durch Komma. übergeben wir eine einfache Zeichenfolge, bei sich um einen optionalen Parameter handelt, der an die Funktion übergeben wird, die wir aufrufen, die aufgelöst ist. Jetzt, nach einer Aktualisierung, sollten wir diesen Wert in der Konsole sehen. Wir können auch einen Fehler testen und sehen, was passiert, wenn eines dieser Versprechen abgelehnt wird. Wir können dies tun, anstatt zu lösen, wir können weitergeben, ablehnen und diesen heraus und dann werde ich den Abschnitt abfangen, das Konsolenprotokoll wird ausgeführt. Wir sehen diesen Wert der Ergebnisse , die wir hier weitergeben werden. Aber eine Sache, die Sie bemerken werden, ist, dass wir das zufällige Bild nicht sehen. Obwohl wir diese beiden Versprechen zu versprechen einhalten, sehen wir nur das Ergebnis der Ablehnung. Dies liegt daran, dass bei Verwendung der ALL-Methode es nur aufgelöst wird, wenn alle Versprechen, die sie einnimmt , erfolgreich erzielt werden oder wenn eine einzelne fehlschlägt. Entweder erhalten wir erfolgreich ein Array das alle Versprechen enthält, wie wir es zuvor gesehen haben , oder das erste, das abgelehnt wird. Es kann jedoch Vorkommen geben, wenn dies nicht das Verhalten ist, das wir wollen. Wir möchten vielleicht immer noch, dass alle Versprechen zurückgegeben werden , unabhängig davon, ob es einen Fehler gab oder nicht. Dafür können wir alle durch alles abgewickelt ersetzen. Alles, was geregelt ist, wird immer noch ein Array aufnehmen , das alle Versprechen enthält. Aber wenn wir dies speichern und aktualisieren, geben Sie diese zwei Sekunden. Anstatt den einzelnen Fehler zu sehen, sehen wir alle unsere Versprechen innerhalb des Arrays. Der erste wurde erfüllt. Wir werden alle Werte sehen. Dann sehen wir den zweiten, der abgelehnt wurde. Wir könnten diese Ergebnisse auf jede Weise nutzen, wie wir es wollten, wie zum Beispiel darüber zu schleifen, um damit umzugehen, was zu tun ist, wenn es einen Misserfolg oder einen Erfolg gab. Zum Beispiel möchten wir vielleicht wissen, welche abgelehnt wurden , damit wir sie erneut anrufen können. Oder zeigen Sie einem Benutzer vielleicht nur einen bestimmten Abschnitt an, wenn die Benutzeranfrage erfolgreich war. Etwas anderes, das wir haben, sind zwei Methoden Race “ bezeichnet werden. Beide geben nur einen Wert zurück. Werfen wir zunächst einen Blick auf alles, was wir anstelle von allen Siedlungen verwenden können . Speichern und aktualisieren Sie und wir werden sehen, was wir zurückbekommen. Dieses Mal sehen wir die Ablehnung nicht. Alles was wir sehen ist unser erfolgreiches Image. Dies liegt daran, dass jede Methode, wie sie klingt, aufgelöst wird, sobald eines der an sie übermittelten Versprechen erfüllt wurde. Was im Grunde genommen das erste Versprechen bedeutet, das ein Erfolg ist. Dies bedeutet nicht immer , dass es das erste sein wird , das im Array übergeben wird. Es bedeutet nur das erste, das abgeschlossen ist. Die Rennmethode, wenn wir uns das ansehen, Speichern und Aktualisieren, gibt dies auch das gleiche zufällige Bild zurück, aber dies wird das erste Versprechen zurückgeben, das an sie weitergegeben wurde, das abgerechnet wurde. Abgerechnet könnte sogar erfüllt oder abgelehnt werden. In unserem Fall ist es ein zufälliges Bild, da dieses Bild schneller zurückkommt , da es keine Verzögerung von zwei Sekunden hat. Unabhängig davon, ob das Versprechen ein Erfolg oder ein Misserfolg war, wird der erste zurück sein, den Sie in der Konsole sehen. Zusammenfassend gibt die Rennmethode das erste Versprechen zurück, auf das sie trifft , das aufgelöst oder ablehnt. Die beliebige Methode wird auch ein Versprechen zurückgeben, aber diese muss erfüllt werden. Sie sind beide sehr nützlich, wenn eine dieser Situationen auftaucht. 61. Async / Warten: Mit der Ankunft von ES 2017 kam eine neue Art, mit asynchronem Code umzugehen. Oft haben wir uns vorher angesehen, ist überflüssig, es ist alles noch etwas, was wir wissen müssen, insbesondere für das, was wir uns jetzt ansehen werden, was als async/await bezeichnet wird. Async/await ist tatsächlich Versprechen hinter den Kulissen, aber es wurde entwickelt, um einfacher auszusehen und für Entwickler einfacher zu lesen. Es sieht einfacher aus, weil wir zu etwas Vertrauterem zurückkehren, was eine Funktion ist. In Startdateien haben wir ein Beispielbild, in dem wir ein Versprechen zurückgeben, das wir zuvor gesehen haben. Wenn Sie stattdessen eine reguläre Funktion verwenden würden , um dieses Bild einzustellen, würden wir so etwas tun. Dies wird wahrscheinlich eine Funktion namens set image erzeugen, und dann könnten wir wieder unseren Abrufaufruf nutzen. Fügen Sie dies ein und speichern dies innerhalb einer Konstante namens Response. Versuchen wir dann, ein Konsolenprotokoll für die Antwort zu erstellen, und wie Sie alle aus früheren Videos wissen, versuchen wir hier, direkt unten auf diesen asynchronen Code zuzugreifen , bevor er möglicherweise die Chance hatte um wiederzukommen. Um dies auszuführen, rufen Sie unsere Set-Image-Funktion auf, aktualisieren Sie die Konsole, wir kehren in den Status „Ausstehend“ zurück. Wir können die Antwort sehen, die unsere URL ist, die wir ursprünglich hier aufrufen, anstatt unser tatsächliches Bild, das wir zurückbekommen. Was Sie vielleicht denken, dass wir als Nächstes tun könnten, ist response.json zu verwenden. Probieren wir das mal aus. Speichern Sie dies in einer Konstante namens image, die gleich response.json ist. Wir können diese Antwort weitergeben. Sieh dir dieses Bild an, die Konsole. Versuchen wir es noch einmal. Dieses Mal erhalten wir eine Fehlermeldung, die besagt, dass response.json keine Funktion ist, und dies geschieht, weil die Bilddaten noch nicht verfügbar sind. Wir haben Versprechen, von denen wir wissen, dass wir das Ende aller Abrufaufrufe, dann Methoden, die dann auf die erfolgreiche Antwort warten müssen dass wir das Ende aller Abrufaufrufe, dann Methoden, die dann auf die erfolgreiche Antwort warten , bevor eine Funktion ausgeführt wird. Obwohl wir diesmal keine Versprechen verwenden, werden wir async/await verwenden. Dafür haben wir zwei einfache Schritte. Um unsere reguläre Funktion in eine asynchrone Funktion umzuwandeln, müssen wir lediglich das asynchrone Schlüsselwort davor übergeben . Sobald Sie dies mit einer Markierung gemacht haben, auf welche Codezeile wir warten möchten, wenn die Daten zurückgegeben werden, bevor wir zur nächsten wechseln . Wenn wir nun darauf warten möchten, dass das Bild zurückkommt, wird dies unsere Funktion effektiv pausieren und warten , bis die Daten zurückgegeben werden, bevor es auf den Rest des Codes verschoben wird. Lasst uns das speichern und sehen, was passiert. Wenn wir jetzt aktualisieren, ist der Fehler jetzt verschwunden. Das Versprechen sind immer noch unabhängige Staaten, aber wenn wir dies öffnen, können wir auf die Daten zugreifen, die wir in diesem Objekt benötigen. Wir können jetzt sehen, ob wir dieses Bild mit Zitaten kopieren, wir erhalten jetzt unser zufälliges Hundebild und die Botschaft des Erfolgs zurück . Der Grund, warum wir auf dieses Versprechen eingehen müssen , ist dass wir versuchen, auf unsere response.json in der Zeile direkt unten zuzugreifen . Wir haben immer noch darauf gewartet, dass unser Image zurückkommt, aber dann haben wir uns bei der Console response.json angemeldet. Aber denken Sie an früheren Beispielen daran, die json-Methode auch ein Versprechen zurückgeben wird. Um damit fertig zu werden, müssen wir nur darauf warten, dass unsere json-Methode endgültig abgeschlossen ist unsere json-Methode endgültig , bevor wir diese an der Konsole protokollieren. Wenn wir das jetzt speichern, versuchen Sie es erneut im Browser, anstatt in das Versprechen und in das Objekt springen zu müssen . Sehen Sie sich nun direkt die richtigen Informationen wir in der Konsole benötigen. Wir haben jetzt die URL in dieser Nachrichteneigenschaft zurückgegeben , mit der wir unsere Bildelemente festlegen können . Lasst uns das schnappen. Wir können das Konsolenprotokollzugriffsdokument.queryselector entfernen . War nicht im Bild, wo wir die Bildquelle so einstellen können, dass die Bildquelle gleich der image.message ist. Da sind wir los. So können wir async/await mit diesem regulären Funktionsstil verwenden. Es gibt aber auch verschiedene Arten von Funktionen , die Sie sich angesehen haben, einschließlich Funktionsausdrücken und Pfeilfunktionen. Genau so. Mit einem Funktionsausdruck. Sagen Sie, lasst func als Variablennamen und sagen Sie dies gleich unserer Funktion, die einfach eine Reihe von hey zurückgibt. Das Äquivalent der Pfeilfunktion würde genau so aussehen. Hier haben wir unseren Funktionsausdruck und dann haben wir unsere Pfeilfunktion. Async/await kann in einer dieser beiden verwendet werden. Die Möglichkeit, unseren Funktionsausdruck als asynchron zu markieren , besteht darin, genau wie oben das asynchrone Schlüsselwort kurz vor dem Funktionsschlüsselwort zu übergeben , und auch dasselbe für unsere Pfeilfunktion. Wir können dies gleich am Anfang platzieren, und dann können wir das await-Schlüsselwort überall im Funktionskörper verwenden . Async/Await ist eine saubere und leistungsstarke Lösung für den Umgang mit asynchronen Aufgaben. Aber wir müssen darauf achten, dass wir uns nicht zu sehr mitreißen lassen. In diesem Beispiel setzen wir das Bild in der nächsten Zeile. Es ist absolut sinnvoll, auf die zurückkommenden Daten zu warten , bevor wir sie verwenden. Aber stell dir vor, wir hätten so etwas. Wenn wir diese Antwort dupliziert haben, fragten wir nach unseren beiden separaten Bildern. Was wir hier machen, ist, dass wir zwei Anfragen für zwei unabhängige Bilder gleichzeitig stellen . Aber das Problem, das wir derzeit haben, ist das zweite Bild erst aufgerufen wird, wenn das erste Bild zurückgekehrt ist erst aufgerufen wird, wenn das erste Bild zurückgekehrt , weil wir das Schlüsselwort await verwenden. Dies führt zu einer unnötigen Zeitverzögerung im folgenden Code. Hier versuchen wir, auf unser erstes Bild zuzugreifen, aber wir müssen immer noch warten , bis das zweite Bild zurückgegeben wird, bevor diese Zeile überhaupt ausgeführt wird. Wir benutzen eine Welle, aber wir müssen auf die Daten warten, die wir brauchen und danach. Aber wir wollen immer noch nicht verhindern, dass der Rest des Codes ausgeführt wird, wenn wir es nicht brauchen. Der Umgang mit mehreren Anfragen wie diesen ist etwas, das wir uns als Nächstes genauer ansehen werden. Zusammen mit der baldigen Betrachtung auch der Fehlerbehandlung. 62. Handhabung mehrerer Warten: Am Ende des vorherigen Videos haben wir die Auswirkungen mehrerer Warteanrufe besprochen. Hier haben wir drei, haben Antwort, antwortet 2 und Antwort 3, die alle denselben Abrufaufruf tätigen. Wir wissen zum Beispiel, dass, wenn das zweite Bild auf die ersten Bilddaten warten musste auf die ersten Bilddaten warten bevor sie ausgeführt werden, dies völlig in Ordnung war. Wenn Bild 2 jedoch nicht auf das erste Bild angewiesen ist, sollte es diesen Code nicht unnötig blockieren. Mit mehreren Anfragen nach asynchronen Daten wie diesen bringt es uns zurück zu einem früheren Video, in dem wir uns angeschaut haben, wie wir mit mehreren Versprechen umgehen können. Was ist, wenn wir wissen wollen, ob einer scheitert oder wenn sie alle scheitern, wie würden wir dann damit umgehen? Mit Versprechungen könnten wir Methoden anwenden wie alles und alles geklärt. Aber mit asynchronem Code versprechen diese auch unter der Haube. Wir können diese Methoden wie alle immer noch nutzen. Zum Beispiel können wir ganz unten in unserer Funktion unten in unserer Funktion auf Versprechen für alle zugreifen, die ein Array aufnehmen. Wir können als Antwort, Antwort 2 und auch Antwort 3 passieren . Lassen Sie uns dies in einer Variablen oder einer Konstante namens result speichern einer Konstante namens result und protokollieren Sie dies dann in der Konsole. Ein Fehler, der also eine Antwort benötigt. Dies gibt immer noch ein Versprechen zurück, aber denken Sie daran, dass die All-Methode in ein einziges Versprechen aufgelöst wird , wenn alle Versprechen, die sie einnimmt , erfolgreich gelöst werden oder wenn eine einzelne fehlschlägt. In diesem Sinne können wir auch das Schlüsselwort await verwenden, um sicherzustellen alle zuerst gelöst werden, bevor wir zur nächsten Zeile übergehen. Geh vorbei warten, es ist davor. Jetzt warten wir darauf, dass alle drei dieser Versprechen jetzt abgeschlossen werden. Dies bedeutet, dass wir das await-Schlüsselwort jetzt vor jedem dieser kostenlosen unabhängigen Anrufe entfernen können. Probieren wir das aus, aktualisieren Sie es. Wir bekommen jetzt ein Array mit allen drei separaten Antworten. Wir können auf jeden einzelnen von diesen eingehen. Aber eines der Probleme, die wir immer noch haben, ist, wenn wir uns die URL ansehen, dies die Bild-URL, die wir innerhalb eines Abrufs anfordern, nicht das eigentliche JPEG-Bild , von dem zurückkommt die API. Wenn Sie sich erinnern, um auf dieses tatsächliche Bild zuzugreifen, das wir benötigen dieses im Körper enthalten ist, und um den Inhalt des Körpers zu lesen, müssen wir erneut die JSON-Methode verwenden. Die JSON-Methode liest den Inhalt davon und verwandelt ihn in ein JavaScript-Objekt, das wir lesen können. Wie wir sehen können, haben wir ein Array mit drei separaten Werten. Was wir tun können, ist, dass wir unser Konsolenprotokoll entfernen und alle drei dieser Werte mit der forEach-Methode durchlaufen können, also Ergebnisse. Speichern Sie diese für jede Funktion innerhalb des Wertes. Jetzt können wir diesen Wert an der Konsole protokollieren und die JSON-Methode für jeden dieser Werte aufrufen . Dies gibt uns jetzt unsere drei getrennten Versprechen zurück. Aber wenn wir das öffnen, sehen wir ein vertrautes Objekt, auf das wir eintauchen müssen , um unser eigentliches Bild zurückzubekommen. Dies geschieht, weil die JSON-Methode, wie wir zuvor gesehen haben , auch ein Versprechen zurückgeben wird. Um darauf zu warten, dass diese Daten zurückkommen, bevor wir darauf zugreifen, können wir das Schlüsselwort await verwenden, und da das Schlüsselwort await nur innerhalb einer Funktion verwendet werden kann, können wir dies als asynchron markieren. Erneut laden. Das gibt uns dann unsere drei Bilder zurück, die wir brauchen. Diese All-Methode bedeutet jetzt, dass wir etwas tun können, nachdem alle Versprechen erfolgreich waren oder wenn eine einzelne versagt. Apropos Scheitern: Das Thema des nächsten Videos untersucht wie wir Fehler mit async warten können. 63. Fehlerbehandlung: Dieses Video zeigt Ihnen einige Möglichkeiten, mit Fehlern in Ihrem asynchronen Code umzugehen . Code ist großartig, wenn alles gut läuft, aber wenn die Dinge nicht funktionieren, müssen wir damit umgehen, was zu tun ist. Einige der Versprechensmethoden, die wir uns angeschaut haben , geben uns eine gewisse Fehlerbehandlung. Zum Beispiel schlägt die All-Methode fehl, wenn ein Versprechen fehlschlägt, daher haben wir dort einige Optionen, aber wir müssen auch alle anderen Situationen behandeln, entweder einen allgemeinen Fehlerbehandler oder die Bearbeitung jeder spezifischen Anfrage. Im Starterprojekt in der Fehlerbehandlungsdatei haben wir in der Fehlerbehandlungsdatei ein leeres Bildelement oben und auch eine einzige Funktion. Nichts Neues hier für diese Funktion, dies ist nur eine Bild-URL mit der Fetch-API. Wir warten darauf, dass die Daten zurückkommen, die als Antwort gespeichert werden. Wir extrahieren diese Daten dann über die JSON-Methode und geben dann die Bild-Eigenschaft zurück , die die URL enthält. Kurz zuvor verwenden wir diese Funktion, schauen wir uns ein anderes einfaches Beispiel an. Lassen Sie uns unten eine neue Funktion mit einem beliebigen Namen erstellen, und dies wird einfache Zeichenfolge zurückgeben. Danach werden wir den Rückgabewert konsolenprotokollieren, wir rufen unsere Funktion auf, öffnen sich im Browser und es gibt unsere Rücksendenachricht. Nichts Unerwartetes hier, aber wenn wir diese Funktion als asynchron markieren, markieren Sie dies kurz vor dem Funktionswort als asynchron, und dieses Mal erhalten wir ein Versprechen zurück. Wir werden diese Funktion einfach dort lassen, aber denken Sie einfach für einen Moment daran. Sobald wir eine Funktion als asynchron markieren, wird sie dann ein Versprechen zurückgeben. Wir wissen, dass wir eine Funktion haben, um die Bild-URL abzurufen, also erstellen wir eine zweite Funktion, die tatsächlich die Bild-URL über dieses Bildelement festlegt. Dies kann auch asynchron sein, nennen Sie dies setImage. Dann werden wir im Inneren nur unsere Bildelemente mit dem Selektor document.query abrufen und die Quelle so einstellen, dass sie dem Rückgabewert der obigen Funktion entspricht. Ich beginne mit dem Bildelement und setze die Quelle auf unsere obige Funktion , nämlich geTimageUrl. Wir müssen das nennen. Die getimageUrl-Funktion ist asynchron, daher müssen wir darauf warten, dass dieses Versprechen zurückgegeben wird , bevor wir es tatsächlich verwenden können. Wir werden warten, dass diese Funktion den Wert zurückgegeben hat. Dies ist alles aktiviert, da wir seine Funktion als asynchron markiert haben . Nennen wir das gleich unten, setImage. Früher beim Umgang mit Fehlern unter Verwendung von Versprechungen haben wir einfach einen Fangabschnitt an das Versprechen gekettet. Diese setImage-Funktion ist auch asynchron, was auch ein Versprechen zurückgibt wie wir es zuvor mit dem einfachen Beispiel gesehen haben, was bedeutet, dass wir uns am Ende verketten könnten, dann den gesamten Catch-Block , der ist ich werde als Nächstes laufen. Wir können dies am Ende verketten, um sicherzustellen, dass es kein Semikolon gibt, und Fang hinzufügen. Catch führt eine Funktion aus, die die Fehlermeldung aufnimmt und sie in einem Konsolenprotokoll die Meldung „noooo“ und auch eine zweite mit diesem Fehler platziert einem Konsolenprotokoll die Meldung . Mal sehen, was passiert, wenn wir versuchen, diese Funktion aufzurufen. Bekommen wir den Fehler zurück, den wir fangen würden , oder stellen wir das Bild ein. Dieser spezielle Aufruf war ein Erfolg, daher sehen wir, dass das Bild zurückgegeben wird. Um den Catch-Block zu testen, müssen wir das Netzwerk wie zuvor ausschalten , also springen Sie in die Registerkarte Netzwerk. Hier drunter stellen wir die Voreinstellungen so fest, dass sie offline sind, jetzt können wir aktualisieren, wir sehen das Bild nicht. Springe in die Konsole. Unser erstes Konsolenprotokoll und unser zweites Konsolenprotokoll konnten nicht abgerufen werden. Wir sehen, dass das gut funktioniert und wir mischen die Syntax von Async erwartet mit Versprechen. Wenn wir einfach bei der Versprechenssyntax bleiben oder die Fehlerbehandlung in die Funktion selbst verschieben wollten , könnten wir etwas namens try and catch verwenden. Versuchen Sie zu fangen, wie es klingt, wird versuchen, etwas zu tun, und wenn es funktioniert, ist das alles großartig, wenn nicht, fangen wir den Fehler auf und behandeln ihn auf irgendeine Weise, die Sie möchten. Lassen Sie uns den Catch-Abschnitt aus setImage entfernen, und dann erstellen wir innerhalb unserer SetImage-Funktion einen Try-Block und unterhalb eines Catch-Blocks, ebenfalls die Fehlermeldung aufnimmt. Dies ist ziemlich einfach. Alles, was wir tun müssen, ist unseren Code, den Sie innerhalb des Test-Blocks ausführen möchten, zu verschieben was wir tun müssen, ist unseren Code, den Sie innerhalb des Test-Blocks ausführen möchten, zu . Schneiden Sie dies also aus, fügen Sie ihn in den Abschnitt „try“ und dann in den Catch ein -Bereich können wir in den gleichen Konsolenprotokollen platzieren, also eine Zeichenfolge und auch ein zweites Konsolenprotokoll mit der Fehlermeldung, die an diese Funktion übergeben wird. Sparen wir uns das auf und probieren es aus. Denken Sie daran, dass mein Netzwerk immer noch deaktiviert ist Wenn wir es erneut versuchen, sehen wir das Bild nicht, Sie werden unsere beiden Fehlermeldungen in der Konsole sehen. Versuchen wir, dies wieder einzuschalten, das Netzwerk zurückzugeben, das Image wird jetzt zurückgegeben und wir sehen keines dieser Konsolenprotokolle hier. Dieser Try-and-Catch-Bereich läuft synchron, also führen wir den allerersten Abschnitt aus, der versucht wird. Wenn das alles funktioniert, ist das völlig Ordnung, aber wenn es fehlschlägt, wechselt es zum nächsten Catch-Block und führt den darin enthaltenen Code aus. Darüber hinaus haben wir auch einen endgültigen Abschnitt 2. Das funktioniert genau so, als wir uns endlich an das Ende eines Versprechens gekettet haben. Endlich läuft immer, unabhängig davon ob das Versprechen erfüllt oder abgelehnt wurde. Gehen Sie unten endlich und wir legen einfach ein einfaches Konsolenprotokoll ein. Versuchen wir es, aktualisieren und wir sehen das Konsolenprotokoll mit dem Text „immer läuft“. Genau wie eine kurze Randnotiz der Fang oder der endgültige Block vorhanden sein. Es muss mindestens eine davon vorhanden sein, oder genau wie dieses Beispiel können wir beides verwenden. Das ist in Ordnung für den allgemeinen Fehler, aber was ist, wenn wir wissen wollten , welcher Teil des Testcodes fehlgeschlagen ist? Im Moment ist das ziemlich einfach, da wir nur eine Codezeile haben. Aber was ist, wenn dieser Versuchs-Abschnitt mehr als das getan hat? Dafür könnten wir einen Catch-Block direkt auf die asynchrone Aufgabe ketten und um ein Beispiel zu sehen, kopiere ich einfach diese volle Funktion, kommentiere diese als Referenz aus füge sie dann unten ein. Wir können die gesamte Fehlerbehandlung entfernen , die wir gerade hinzugefügt haben, darunter den Catch, das Endlich und auch den Try-Block, der unsere einfache asynchrone Funktion verlässt. Damit können wir dann das Semikolon entfernen, wir können dann am Ende verketten, innerhalb des Fangs, wir könnten eine Funktion direkt im Inneren übergeben, oder wenn wir diese Funktion wiederverwenden wollten, könnten wir ein separate Funktion innerhalb unseres Codes. Lassen Sie uns eine Funktion direkt über dem Namen Handle-Fehler erstellen. Wir schnappen uns einfach unsere beiden Fehlermeldungen und fügen diese ein. Der Fehler wird auch die Fehlermeldung aufnehmen , dann können wir dies innerhalb von catch aufrufen. Dies gibt uns eine separate wiederverwendbare Funktion, die wir dann am Ende mehrerer Versprechen verketten können . Probieren wir das mal aus. Wir sollten jetzt unsere beiden Fehlermeldungen sehen. Wenn es einen Misserfolg gibt. Wenn nicht, sehen wir das Bild, das funktioniert gut. Versuchen wir, das Netzwerk noch einmal auszuschalten, zur Konsole zu gehen, hier gibt es unsere Fehlermeldungen . Natürlich würde ein Konsolenprotokoll in einer realen Anwendung nicht ausreichen, wir würden vielleicht das Bild ausblenden möchten, wenn ein Fehler aufgetreten ist, oder sogar ein Platzhalterbild hinzufügen. Der Schlüssel hier ist jedoch, etwas zu tun, anstatt nur die Website oder die Anwendungsaufschlüsselung zu sehen . Umgang mit Fehlern ist ein großer Teil von asynchronem JavaScript, und wir sehen hier einige allgemeine Muster , die Sie in Ihren Projekten verwenden können, was die Funktionalität und Benutzererfahrung wirklich verbessern wird . 64. So Bald: Dieses erste Projekt, das wir im letzten Abschnitt dieser Klasse finden , heißt Leaving So Soon und enthält einen Startercode, und enthält einen Startercode sodass wir uns auf das JavaScript konzentrieren werden. Dieses Projekt wird als Exit-Intent-Pop-up bezeichnet. Ein Pop-up zur Exit-Absicht ist im Grunde eine Möglichkeit, die Aufmerksamkeit des Benutzers wenn er versucht, Ihre Website zu verlassen. Wir haben etwas einfaches HTML, haben unseren Titel, und dann haben wir diesen Pop-up-Bereich innerhalb eines Div. Wenn wir zum Projekt gehen und aktualisieren, sehen wir derzeit nur diesen Titel. Die Idee ist, dass wir eine einfache Website wie diese haben und Sie diese Art von Websites möglicherweise gesehen haben , wenn Sie online surfen. Wenn Sie versuchen, die Maus nach oben zu bewegen und versuchen, den Browser zu schließen oder sogar die Website zu suchen oder von der Website zu navigieren, wird möglicherweise häufig ein Pop-up angezeigt. Dieses Pop-up könnte Informationen enthalten. Es kann einen Gutscheincode oder im Allgemeinen alles enthalten, um den Benutzer auf Ihrer Website zu halten. Wir sehen diesen Pop-up-Abschnitt nicht denn wenn wir uns dieses div ansehen, hat es die ID des Exit-Popups. innerhalb unserer Stylesheets Wenn wir innerhalb unserer Stylesheets nach diesem Abschnitt suchen, ist der Anzeigetyp derzeit auf „None“ festgelegt. Wenn wir dies ändern, um flexibel und aktualisiert zu werden, wird der Hintergrund aufgrund der CSS-Animation ausgeblendet , die wir gerade unten haben. Unser Pop-up erscheint jetzt mit dem gesamten Text darin. Die Inhalte innerhalb dieser Websites oder innerhalb dieses Popups sind irrelevant. Die Idee ist, dass wir diese Anzeigeeinstellung umschalten möchten , sobald die Maus eines Benutzers den oberen Rand des Browsers verlässt. Gehen wir vorerst zurück in unser Stylesheet, und ich werde es standardmäßig ausblenden. Dann arbeiten wir innerhalb unseres Skripts, das unten bereits verlinkt ist. Lasst uns das aufmachen. Wenn Sie darüber nachdenken, was wir hier tun wollen, müssen wir nicht viele Aufgaben ausführen. Beginnen wir damit, eine Funktion zu erstellen, die ausgeführt wird , wenn die Maus den Fensterbereich verlassen hat. Sobald das Pop-up tatsächlich im Browser angezeigt wird , benötigen wir auch eine Möglichkeit , auf ein X in der Ecke zu klicken und dieses zu schließen. Erstellen Sie eine zweite Funktion namens ClosePopUp. Wir beginnen mit unserer ersten Funktion, nämlich LefTwinDow, und dafür müssen wir auf ein Mausereignis achten. Wir wählen das Dokument aus, das unsere vollständige Webseite ist, und hören dann zu, wann die Maus mit dem Mausaus-Ereignis geht. Lasst uns unsere Dokumente schnappen. Wir können einen Event-Listener hinzufügen. Ereignisse. Wir wollen darauf achten, dass es Maus raus ist, was dann unsere obige Funktion auslösen wird. Denken Sie daran, dass dies bei Ereignissen auch die Ereignisinformationen aufnimmt , auf die wir innerhalb einer Variablen zugreifen können. Loggen wir dies zunächst in der Konsole an. Protokollieren Sie die Ereignisinformationen in der Konsole, aktualisieren Sie sie, und wir können sehen, ob wir die Maus außerhalb des Dokumentenbereichs bewegen , dieses Mausereignis wird jetzt ausgelöst. Dies wird auch funktionieren, wenn Sie sich für die andere Seite und auch für die Top Zwei entscheiden. Springe hier rein. Die Mauskoordinaten , an denen wir interessiert sind , sind dieser ClientX und der ClientY. Dies ist ein Pixelwert , der uns die Position der Maus mitteilt , sobald dieses Ereignis ausgelöst wurde. Genau wie beim frühen Betrachten des Canvas ist X die linke oder rechte Richtung, und das Y ist von oben nach unten. Da wir versuchen, auf die Maus aufzupassen und den oberen Teil des Browsers zu verlassen, um dieses Fenster zu schließen, werden wir uns für die Richtung ClientY interessieren. Wir können das nach unten filtern, e.Clienty. Lasst uns nachladen. Wenn wir nun nach oben gehen, können wir sehen, sobald wir den oberen Teil des Browserbereichs passieren , dann beginnen wir, eine negative Zahl zu erhalten, was bedeutet, dass die Spitze hier der Wert von Null ist. Wir müssen auf einen 20-Pixel-Bereich achten , der alle Popups angezeigt wird, sobald der Benutzer die Maus in den oberen Bereich des Browsers bewegt . Wir können das Konsolenprotokoll entfernen. Platzieren Sie eine if-Anweisung. Wir können sagen, wenn e.Clienty weniger als jeder Wert Ihrer Wahl ist , werde ich mich für 20 entscheiden. Wie wir in diesen Stylesheets gesehen haben, können wir unsere Elemente mit der ID des Exit-Popups abrufen und den Anzeigetyp umschalten. Schnappen Sie sich das mit dem document.QuerySelector. Ich schicke die ID des Exit-Popups. Stellen Sie die Stileigenschaft der Anzeige auf Flex ein. Probieren wir das mal aus. Aktualisieren Sie und gehen Sie jetzt nach oben, und dieses wird unser Pop-up auslösen. Sie denken vielleicht, dass das alles gut funktioniert und das ist alles, was wir tun müssen. Wir müssen auch einige Schritte unternehmen , damit wir den Benutzer nicht irritieren. Sie müssen dieses Kreuz aktivieren, damit es unsere ClosePopup-Funktion umschaltet. Aber wahrscheinlich möchten Sie diesen Code nur ausführen, um das Pop-up nach einer gewissen Zeit zu aktivieren, und wir möchten auch sicherstellen, dass dies nur einmal beim Besuch des Benutzers ausgelöst wird. Um sicherzustellen, dass dies nur einmal ausgelöst wird, machen wir das Gegenteil und entfernen den Ereignis-Listener aus den Dokumenten. Aus frühen Videos wissen wir, dass wir dieselben Informationen aus addEventListener kopieren müssen . Wir können das noch nicht testen , da wir das Fenster auch schließen können müssen , bevor wir es reaktivieren können. Wir machen das jetzt, wir gehen in den ClosePopup-Bereich und machen dann das Gegenteil, indem wir den Anzeigetyp auf „None“ setzen. Um diese Funktion zu aktivieren, müssen wir auf einen Klick auf unser Kreuz achten. Innerhalb der Indexseite enthält die Spanne den Querbereich. Lassen Sie uns das in unserem Skript unter der Unterseite document.QuerySelector aufnehmen. Wir wählen unsere Spanne aus. Bewahren Sie dies in einer Konstante namens closeBtn auf. Schnappen Sie sich die Elemente und fügen Sie einen Ereignis-Listener hinzu. Wir möchten auf die Klickereignisse achten, die unsere obige Funktion ausführen. Probieren wir das mal aus. Bewegen Sie sich nach oben, um das Pop-up zu aktivieren. Klicken Sie auf das Kreuz. Wir können auch sehen, ob wir an den Anfang des Browsers wechseln, unser Pop-up wird nicht reaktiviert da wir den Ereignis-Listener entfernt haben. Alles gut, das funktioniert ziemlich gut. Eine schnelle Ergänzung, die wir machen werden, besteht jedoch darin, sicherzustellen, dass das Pop-up nicht aktiviert wird, sobald der Benutzer die Website besucht. Wenn beispielsweise oben etwas eingegeben und dann sofort verschoben wird, möchten Sie nicht, dass das Pop-up sofort angezeigt wird. Was wir tun werden, ist, dass wir ein setTimeout platzieren, um diese Funktion erst nach einer gewissen Zeitverzögerung zu aktivieren. Rufen Sie ein setTimeout auf. Übergeben Sie eine Funktion, bei der wir unser Maus-Out-Ereignis bewegen können, was unsere Funktion auslöst. Ruft dies erst nach einer Zeitverzögerung von drei Sekunden auf. Probieren Sie das aus, damit wir die ersten drei Sekunden mit der Maus nach oben bewegen können . Dann, nach drei Sekunden, ist unsere Funktion aktiv. Ziemlich einfaches Projekt, und wir können ziemlich viel mit einer kleinen Menge an JavaScript-Code machen. Es ist etwas, das Sie möglicherweise nützlich finden , wenn Sie in Zukunft Websites erstellen. Ebenso wie unser nächstes Projekt, das ein Image-Karussell sein wird, das wir komplett von Grund auf neu bauen werden. 65. Bild Carousel- Die Bilder Einstellen: In unserem nächsten Projekt bauen wir ein Image-Karussell ein. Dies wird das Endergebnis sein und es ist komplett mit JavaScript erstellt. Was wir haben werden, ist ein großes Hauptbild ganz oben. Wir können die unteren Bilder durchlaufen, um dies mit den Pfeilen nach links und rechts zu ersetzen . Außerdem können wir zu einem dieser Bilder springen , indem wir darauf klicken und diese in den oberen Bereich platzieren. Dies wird viele der Fähigkeiten zusammenstellen , die Sie gelernt haben, und auch besser sehen, wie die Dinge in der Praxis mit einer realen App funktionieren . Fangen wir das in den Starterdateien von vorne an. Wenn wir in den nächsten Abschnitt springen, nämlich das Bildkarussell, haben wir einen Startercode. Wir haben eine sehr einfache Indexseite, wir werden alle Inhalte mit JavaScript injizieren. Alles was wir haben ist ein leeres Div mit der ID des Karussell. Wir platzieren alle Bildinhalte und verlinken dann auf unser Skript. Das Skript befindet sich im Karussellordner , der unsere Bilder, unsere Stylesheets und auch das JavaScript enthält , damit dies funktioniert. In diesem Kurs stehen fünf verschiedene Bilder zur Verfügung , die Sie ersetzen können , und auch einige grundlegende CSS. Wir haben nur ein bisschen grundlegendes Styling. Zum Beispiel stellen wir das Hauptkarussell auf eine bestimmte Breite ein und platzieren es auch in die Mitte mit dem Rand 0 auto. Wir haben ein paar Hover-Effekte. Ansonsten ein allgemeines Styling zusammen mit der kleinen und der großen Klasse, die wir hier haben. Wir werden diese kleineren als großen Klassen zu jedem dieser Bilder hinzufügen als großen Klassen zu jedem dieser , damit sie gut auf den Bildschirm passen. Fangen wir an. Wir springen in unsere leere carousel.js. Wir fangen damit an, diesen Karussell-Div-Abschnitt zu greifen und auch ein Array mit allen Bildern zu erstellen. Springe in die carousel.js. Wir werden damit beginnen, eine Reihe unserer Bilder zu erstellen. Jeder von ihnen wird eine Zeichenfolge sein, die auf die URL im Bildordner verweist . Wenn Sie Ihre eigenen Bilder verwendet haben, denken Sie daran, die Namen hier so zu ändern , dass sie mit denen übereinstimmen, die Sie darin platziert haben. Der erste ist im Karussellordner, und der Dateipfad ist images/beach.jpg. Lassen Sie uns dies duplizieren, um uns fünf verschiedene Bilder zu geben. Der zweite war Elefanten. Wir haben Gras. Wir haben See, und der letzte ist Stadt. Als Nächstes holen wir uns einen Hinweis auf unser Karussell. Wir speichern dies in einer Konstante namens Wrapper ist gleich document.query Selector, plus in der ID des Karussell. Im nächsten Schritt werden wir eine Funktion erstellen, die all diese Bilder aufnimmt, diese durchläuft und diese auf den Bildschirm legt. Erstellen Sie also unten eine Funktion namens setImages. Der erste Schritt innerhalb dieser Funktion besteht darin, unseren Wrapper zu greifen, und wir werden alle vorhandenen Inhalte löschen. Auf diese Weise können wir den Vorgang der Einstellung unserer Bilder wiederholen , aber manchmal befinden sie sich in einer anderen Reihenfolge. Wir werden alle zusätzlichen Bilder löschen, indem wir unseren Wrapper greifen und den inneren HTML-Code auf eine leere Zeichenfolge setzen . Bevor ich es vergesse, rufen wir unsere Funktion von unten auf, und dann greifen sie unsere Bilder und erstellen eine für jede Schleife, um über jede einzelne dieser Bilder, Bilder.forEach, plus innere Funktion zu schleifen . Wir erstellen einen Verweis auf jeden von diesen und nennen es Bildquelle ImageSRC. Öffnen Sie den Funktionskörper, und dann erstellen wir hier ein neues Bildelement, speichern dieses in einer Variablen namens elements, documents.createElement. Schreibe ein Bildelement. Dann müssen wir festlegen, dass die Bildelementquelle dieser Variablen entspricht. Schnappen Sie sich unser Element und legen Sie das Quellattribut so fest, dass es unserer Bildquelle entspricht. Wir können dann unseren Wrapper greifen , den wir in dieser Konstante gespeichert haben, dann können wir dieses neue Element, Wrapper.AppenChild, plus in unserem neu konstruierten Element hinzufügen Wrapper.AppenChild, . Gehen wir zum Browser und sehen, was wir haben. Wir haben unsere fünf verschiedenen Bilder aus dieser Schleife, aber wenn wir uns die endgültige Version ansehen, möchten wir nicht nur fünf zufällige Bilder im Container platzieren. Was wir tun möchten, ist, das erste Bild groß zu machen und dann unten einen separaten Abschnitt mit den verbleibenden kleinen Bildern zu erstellen unten einen separaten Abschnitt mit den . Um dies zu tun, erstellen wir einen Wrapper für alle kleinen Bilder unten, und dann wird dies von der Stelle abgeschnitten , an der ein kleines Bild hier drin und das große Bild oben liegt. Lassen Sie uns zuerst in unsere Funktion zurückkehren und einen neuen Wrapper für die vier kleinen Bilder unten erstellen . Gleich danach, wo wir unser Obermaterial räumen und eine neue Konstante namens SmallimageWrapper erstellen . Dies ist gleich document.createElement. Dies kann jedes Element sein, das Sie möchten, z. B. ein div oder ein Abschnitt, es spielt keine Rolle. Dann schnapp dir unsere Sektion und wir geben ihm eine eindeutige ID von SmallimageWrapper. Was wir jetzt tun wollen, ist alle fünf unserer Bilder im Array zu durchlaufen . Der allererste muss in den Wrapper platziert werden, und dann müssen alle vier verbleibenden Bilder in unserem kleinen Bild-Wrapper platziert werden. Wir können dies tun, indem wir zuerst unseren vollständigen Wrapper auswählen und prüfen, ob er aktuelle Inhalte enthält. Wenn diesem Wrapper noch kein Bildelement zugewiesen ist, bedeutet dies, dass es sich um ein allererstes Bild im Array handelt. Was wir innerhalb unserer Schleife tun können ist, dass wir eine if-Anweisung platzieren können, und wir können überprüfen, ob unser Wrapper keine untergeordneten Knoten hat. Wir können sagen! wrapper.hasChildNodes. Der Code in hier wird nur ausgeführt, wenn dieser Wrapper leer ist und keine zusätzlichen Bilder enthält. Dies wird immer der Fall sein, wenn wir das erste Bild durchlaufen. Wenn dies der Fall ist, möchten wir die Klasse festlegen. Wenn wir uns unsere Stylesheets ansehen, möchten wir diese Klasse groß festlegen, da diese eine Breite von 100 Prozent hat. Wenn nicht, fügen wir die Klasse von Small hinzu, die Ihnen diese kleinere Größe gibt. Es ist eine Klasse hinzuzufügen, wir können unsere elements.classlist.add, Platz in der Klasse von Large und auch in der Klasse des Karussells. Wenn wir erneut in das Stylesheet zurückkehren, verwandelt diese Karussellklasse den Cursor in einen Zeiger, wenn der Benutzer den Mauszeiger über das Bild bewegt. Dieser sollte nur für das allererste Element in unserem Wrapper gelten, sonst sollte es für die restlichen vier Bilder gelten. Wir fügen eine Klassenliste von kleinen hinzu. Wir fügen alles kleine und auch Karussell hinzu. Wir erhalten immer noch den Hover-Effekt, aber dieses Mal, da wir es mit den vier kleineren Bildern zu tun haben, möchten wir diese nicht zum Haupt-Wrapper hinzufügen. Stattdessen möchten wir sie zu unserem Small Image-Wrapper hinzufügen , den wir gerade erstellt haben. Also lasst uns das schnappen, Kind öffnen in unsere Elemente legen. Sparen wir uns das auf und probieren es aus. Da sind wir los. Es gibt unser großes Bild und die vier kleinen Bilder in diesem separaten div. Genau als Zusammenfassung haben wir hier einen großen Wrapper für alle unsere Bereiche erstellt . Wir haben eine Funktion namens Set-Images erstellt. Sobald dies ausgeführt wird, werden alle vorhandenen Inhalte aus dem Wrapper gelöscht , was bedeutet, dass wenn wir unsere Bilder durchlaufen, wenn dieser Wrapper leer ist, dies bedeutet, dass es sich um ein allererstes Element in handelt das Array, daher geben wir ihm die große Klasse. Wenn nicht, sind es die restlichen vier Bilder, in denen wir den kleinen Cluster hinzufügen und diesen auch in ein separates div platzieren. Dies ist eine gute erste Stufe für unser Projekt. In den kommenden Videos werden wir verschiedene andere Funktionen nachschlagen, werden wir verschiedene andere Funktionen nachschlagen wie zum Beispiel das Neuordnen dieser Bilder, das Austauschen der Bilder und das Platzieren in den Pfeilen, um nach links und rechts zu gehen. 66. Bild Carousel- Erstellen Der Pfeile: Wir befinden uns jetzt in unserem Projekt, wo alle fünf Bilder auf dem Bildschirm angezeigt werden. Wir haben oben ein großes Feature-Bild, dann von vier kleineren Miniaturansichten unten. Wir müssen einige Verbesserungen vornehmen, wir möchten in der Lage sein, auf eines dieser kleineren Bilder und Orte im vorgestellten Bereich oben zu klicken dieser kleineren Bilder und . Wir möchten diese auch drehen können , indem wir einen kleinen Pfeil nach links und auch nach rechts hinzufügen. Beginnen wir damit, indem wir die Pfeile hinzufügen , sobald die Bilder geladen werden. Um dies zu tun, können wir diese in eine eigenständige Funktion einfügen und dies aufrufen. Lass mich unsere Bilder nennen. Ganz unten in dieser Funktion rufen wir unsere Funktion auf, die wir setArrows aufrufen werden. Dies ist die Funktion , die wir als Nächstes erstellen werden. Direkt darunter richtet sich unsere Funktion ein, die setArrows war. SetArrows muss nichts als Parameter aufnehmen . Was wir also hier tun müssen, ist, dass wir einige Symbole mit HTML-Entitäten erstellen und diese als inneren HTML eines Span-Elements speichern können HTML-Entitäten erstellen und diese als inneren HTML eines Span-Elements speichern . Was wir brauchen, sind zwei Konstanten, die erste ist der Pfeil nach links, der genau dem document.createElement entspricht wie in einer Spanne. Der Grund, warum wir die Span verwenden, ist, dass es sich standardmäßig um ein Inline-Element handelt, sodass wir diese mit unseren vier Bildern inline platzieren können. dem Pfeil nach links greifen wir auf diese Konstanten zu und stellen den inneren HTML so ein, dass er unserer HTML-Entität entspricht , und der Code für den Pfeil nach links ist der ‹ Beide Pfeile, Sie müssen auf diese klicken und ordnen Sie alle unsere Bilder neu an. Wir wählen unsere Konstanten aus und fügen einen Ereignis-Listener hinzu, der jetzt ein kostenloser Klick ist , der eine Funktion auslösen wird. Wir haben diese Funktion noch nicht erstellt, aber sie wird ReOrder heißen und nur damit wir keine Fehler auslösen, erstellen wir diese Funktion oben. Das braucht keinen Inhalt, wir werden darauf zurückkommen. Direkt unter unserem Event-Listener machen wir so ziemlich dasselbe, aber dieses Mal erstellen wir für den Pfeil nach rechts die Span-Elemente mit Dokument. createElement, setze den inneren HTML-Code, RightArrow.innerHTML. Der HTML-Entitätscode für den Pfeil nach rechts lautet › , der nur einer vom Pfeil nach links entfernt ist. Fügen Sie einen Ereignis-Listener hinzu. hört auch auf ein Klickereignis ab, das dieselbe Funktion auslöst. Das sind unsere beiden Pfeile die mit dem Inhalt und dem Event-Listener erstellt wurden. Aber was wir jetzt tun müssen, ist, beides zu einem bestimmten Abschnitt hinzuzufügen. Wenn wir zu unserer ersten Funktion zurückkehren , die setImages war, haben wir diesen SmallimageWrapper. Dies ist ein div-Abschnitt , der mehr als vier kleine Miniaturansichten enthält , daher fügen wir beide in diesen Abschnitt hinzu. Wir können dies am Anfang und am Ende tun, besteht darin, eine JavaScript-Methode namens AppendChild zu verwenden, die dies am Ende des rechts platzierten Divs hinzufügt . Dann können wir für den Pfeil nach links die Prepend-Methode verwenden, die dies zum Anfang unseres div hinzufügen wird. Machen wir dies am Ende unserer setArrows-Funktion. Lasst uns zuerst den Abschnitt greifen, also auf der Innenseite einer Konstante namens SmallimagewRapper, dem document.QuerySelector, hat dies die ID von SmallimageWrapper. Schnapp dir diesen Abschnitt. Wie ich gerade erwähnt habe, legen wir mit AppendChild den Pfeil nach rechts in diesen Inhalt, wie wir zuvor nachgeschlagen haben. Dies wird dies am Ende unseres Div-Abschnitts nach unseren Bildern hinzufügen . Platzieren Sie unseren Pfeil nach rechts, dann fügen wir unseren Pfeil nach links zum Start hinzu, wir verwenden die Prepend-Methode und fügen unseren Pfeil nach links ein. Probieren wir es mal aus. Jetzt nach Aktualisierung sehen wir unsere Pfeile immer noch nicht auf dem Bildschirm. Werfen wir einen Blick in die Konsole und sehen, ob uns dies Hinweise gibt. Im Inneren können wir sehen, dass wir Eigenschaften von null nicht lesen können, indem wir AppendChild lesen. Wenn wir also versuchen, ein neues Element an unseren einzelnen Bild-Wrapper anzuhängen , scheinen wir ein Problem zu bekommen. Der Grund, warum dies passiert, ist, dass wir einen SmallimageWrapper haben, den wir oben erstellen. Wenn wir unsere Bilder einstellen, haben wir den Hauptwrapper, der unser vollständiges Karussell enthält , und dann haben wir unseren SmallimageWrapper , den wir anhand dieser ID in der Schleife auswählen möchten. Aber jedes unserer Bilder, wir erstellen ein neues Bildelement in dieser Variablen gespeichert ist, wir fügen entweder die große oder die kleine Klasse hinzu, und wenn es sich um ein kleines Bild handelt, fügen wir diese hinzu vier kleine Bilder zu diesem SmalliimagewWrapper. Aber derzeit fügen wir dem DOM keinen SmallimageWrapper hinzu, alles, was wir tun, ist es zu erstellen und wir fügen unsere vier Elemente hinzu, aber wir platzieren dies nicht wirklich im DOM. Zumindest können wir dann unten unten auswählen. Das einzige Mal, dass dem DOM etwas hinzugefügt wird , ist, wenn wir dieses Element zu unserem Wrapper hinzufügen. Das Hinzufügen des Elements direkt zu unserem Wrapper ist völlig in Ordnung, wenn dies das große Bild ist, da es direkt in das Hauptkarussell fließt . Wenn wir es jedoch mit einem kleinen Bild zu tun haben, möchten wir diese SmallimageWrapper diesem Abschnitt zuweisen . Wir können dies tun, indem wir unser Element auswählen und dieses auf unseren SmallimageWrapper setzen. Dieser SmallimageWrapper wird alle unsere vier kleinen Bilder enthalten und dann fügen wir dies unserem Haupt-Wrapper hinzu. Wenn wir das jetzt speichern und auffrischen, können wir das jetzt öffnen, wir sehen, wie unsere beiden Pfeile in die Elemente springen und wenn wir in den Körper gehen, sehen wir unseren Hauptwrapper mit der ID des Karussell. Wir können das aufmachen. Wir sehen unser erstes Bild mit der Klasse von Large. Nur um klarzustellen, wird dieser zugewiesen denn sobald wir alle unsere Bilder durchlaufen haben, prüfen wir, ob dieser Abschnitt leer ist, ob er mit der Klasse der großen Größe größer ist und füge das zu unserem Wrapper hinzu. Wenn nicht, werden die vier verbleibenden Bilder die Klasse klein und fügen dann zu unserem SmallimageWrapper hinzu , der dann an unsere Elemente übergeben wird , und dann können wir diese dem DOM hinzufügen, was wir sehen können, ob wir sieh dir dieses Div genau hier an. Wir können das aufmachen. Wir haben unser Span-Element, das wir gerade mit Prepend hinzugefügt haben, wir haben unsere vier Bilder und dann die letzte Spanne, die wir mit AppendChild hinzugefügt haben. 67. Bild Karussell - Bilder neu bestellen: Zuvor haben wir unsere Pfeile nach links und rechts eingerichtet und diese auch mit einer Funktion namens Reorder verknüpft. Wir haben dies getan, indem wir unsere Pfeile innerhalb dieser Funktion unser für ein Klickereignis verwendet haben, das darin unsere Funktion ausgelöst hat. Was wir jetzt tun werden, ist im Grunde ein neues Array zu erstellen. Dieses neue Array wird erstellt, indem die Reihenfolge all dieser Bilder neu angeordnet wird. Wir tun dies innerhalb unserer Funktion, indem zuerst die Ereignisinformationen aus dem Klick aufnehmen, und der Grund, warum wir dies tun, ist, dass wir feststellen müssen , auf welche dieser Schaltflächen geklickt wurde. Wir müssen wissen, ob es der linke oder der rechte Knopf ist. Wir können dies tun, indem wir jedem von diesen eine ID hinzufügen, sodass die Leftarrow.ID einfach gleich links ist. Dann geh nach rechts runter. ID nach rechts. Jetzt können wir auf diese ID anhand der Elementinformationen des Ereignisses zugreifen . Wir wissen von zuvor, durch ein Konsolenprotokoll, wenn wir den Wert von e.target protokollieren, die tatsächlichen Elemente innerhalb der Konsole erhalten. Klicken Sie auf eine dieser Punkte holen Sie sich die rechte Schaltfläche und dann auf die linke Schaltfläche. Wir können dieses Objekt auch nach unten filtern und nur die ID nehmen. Dies gibt uns jetzt einen eindeutigen Zeiger darüber , welche Taste gedrückt wurde. Wir können dies jetzt aus einem Konsolenprotokoll entfernen in einer konstanten gerufenen Richtung speichern. Was wir jetzt tun werden, ist, dass wir unser Bilder-Array ganz oben durchlaufen . Wir werden sicherstellen, dass wir alle fünf dieser Bilder abdecken. Wir ermitteln dann, ob die linke oder die rechte Schaltfläche angeklickt wurde, und dann verwenden wir diese, um unsere Bilder neu anzuordnen. Diese neuen Bilder werden in einem neuen Array namens NewarRay gespeichert , das den Anfangswert eines leeren Arrays haben wird, und dann können wir alle unsere Bilder durchlaufen. Tun Sie dies mit einer forEach-Schleife, übergeben Sie unsere Funktion. Dann wird es innerhalb dieser Funktion zwei Dinge aufnehmen. Erstens geben wir wie immer einen Variablennamen ein , der jedes Bild in dieser bestimmten Schleife sein wird, und dann können wir auch auf die Indexnummer zugreifen. Für die erste Schleife dies der erste Punkt, der unser Strand mit der Indexnummer 0 ist. Dann wird dies in jeder Schleife eins erhöht. Um diese Bilder neu anzuordnen, müssen wir zuerst prüfen, ob die Richtung mit links beginnt. Wenn nicht, fügen wir einen anderen Abschnitt hinzu, der ausgeführt wird , wenn die Richtung gleich rechts ist. Denken wir darüber nach, was wir tun wollen, wenn die Richtung übrig bleibt. Wenn auf diese linke Schaltfläche geklickt wird, müssen wir das ursprüngliche Array durchlaufen, das wir tun, und für das allererste Element in hier möchten wir dies an das Ende unseres neuen Arrays schieben und dann für die restlichen vier Bilder unten wollen wir diese um eine Position nach hinten verschieben. Wir können das innerhalb des linken Knopfes machen. Wir prüfen, ob die Indexnummer, auf die gerade hier Zugriff haben wird , gleich 0 ist, dh es ist das Hauptbild oben. Wenn dies der Fall ist, wollen wir es bis ans Ende unseres neuen Arrays bringen . Wir können dies tun, indem wir auf diese Variable zugreifen. Wir können dies ganz am Ende positionieren, indem unsere Eigenschaft images.length zugreifen. In diesem Beispiel sollte dies unser neues Array in Indexposition 5 sein. Wir werden festlegen, dass dies das erste Bild ist. Nehmen Sie unser erstes Bild aus dem ursprünglichen Array oder schieben Sie es bis zum Ende unseres neuen. Wir nennen es auch Newarray.Shift für den Fall, dass am Anfang dieses Arrays etwas vorhanden ist. Dies ist das allererste Bild, um das sich gekümmert hat, aber was ist mit den restlichen vier? Nun, für die restlichen vier Bilder müssen wir nur die aktuelle Indexnummer abrufen und diese um eins zurückverschieben. Wir können dies innerhalb eines anderen Abschnitts direkt danach , anderswo platzieren. Dies wird bei den restlichen vier Bildern der Fall sein. Alles, was wir tun möchten, ist unser neues Array zu greifen, den aktuellen Index auszuwählen, der den Wert von eins annimmt, und diesen auf unser aktuelles Bild zu setzen. Wenn unser aktuelles Bild beispielsweise Index Nummer 3 ist, wird dies zurück zu Nummer 2 verschoben, was für die vier verbleibenden Bilder gleich ist. Bevor wir weiter gehen, probieren wir das aus. Derzeit wird unsere Funktion aufgerufen und es wird das Array neu angeordnet, wir müssen auch das ursprüngliche Bilder-Array mit unserem neuen überschreiben . Wir können dies am Ende unserer Funktion tun und unser Bild-Array so einstellen, dass es dem neuen Array entspricht. Sobald wir unser Bilder-Array zurückgesetzt haben, müssen wir die Funktion „Bilder einstellen“ aufrufen, die dieses Array tatsächlich durchläuft und sie auf dem Bildschirm anzeigt. Wir machen das ganz unten. Rufen Sie diese Funktion auf und probieren wir das aus. Aktualisieren. Wenn wir auf den „Pfeil nach rechts“ klicken, erhalten wir einen Fehler, da wir diesen Fall noch nicht bearbeitet haben. Versuchen wir es nach links. Wir haben die Elefanten, die jetzt auf die erste Indexposition gestiegen sind. Klicken wir erneut auf „Links“. Dies ist bis zum Ende übergegangen. Das scheint alles gut zu funktionieren. Um es zusammenzufassen, schnappen wir uns das allererste Bild und schieben es dann am Ende unseres neuen Arrays. Derzeit ist es der Strand, der bis zum Ende geht, und die restlichen vier Bilder werden um eine Indexzahl nach links verschoben . Als Nächstes kümmern wir uns um den L-Bereich, heißt, wenn auf die rechte Schaltfläche geklickt wurde. Was wir hier drin machen werden, ist im Grunde das Gegenteil von dieser Zeile gerade hier. Anstatt eine Indexnummer zu entfernen, um sie nach links zu verschieben, müssen wir eine hinzufügen, um jede nach rechts zu verschieben. Wir fügen dies ein, alles bei einer Indexnummer von Eins. Anstatt zu prüfen, ob wir auf das erste Bild zugreifen, müssen wir prüfen, ob wir auf das letzte Bild zugreifen. Wenn es das letzte Bild ist, muss es vom Ende des Arrays entfernt und ganz am Anfang platziert werden. Wir können dies innerhalb eines if-Abschnitts tun. Wenn der Index plus eins den Bildern oder der Länge entspricht. Der Grund, warum wir dies getan haben, denn denken Sie daran, dass Indexzahlen bei 0 beginnen, aber wenn wir auf die Länge des Arrays zugreifen, ist dies die tatsächliche Zahl. Derzeit ist dies 5, aber die Indexzahl steigt nur auf 4, was bedeutet, dass wir plus 1 müssen. Prüfen Sie, ob dies auch gleich 5 ist. Wenn dies also gleich 5 ist, ist dies unser allerletzter Wert im Array. Wir müssen festlegen, dass dies ganz am Anfang steht. Der Anfang unseres neuen Arrays wird die Indexnummer 0 sein, die wir als aktuelles Bild einstellen können. Ebenso wie wir es getan haben, als wir das allererste Element aus dem Array entfernt haben, müssen wir dieses Mal das allerletzte entfernen , Newarray.pop. Lasst uns das aufheben und das ausprobieren. Rechts sollten wir sehen, wie die Häuser nach oben gezogen sind und der Strand nach links bewegt wird. Gut. Jetzt der See, das Gras, die Elefanten. Das funktioniert jetzt in beide Richtungen völlig einwandfrei. 68. Bild Carousel- Tauschen Bilder: Unsere nächste und letzte Aufgabe für dieses Projekt besteht darin, dem Benutzer zu ermöglichen, auf eines dieser kleinen Miniaturbilder zu klicken , und dann wird dieses durch das Hauptbild oben getauscht . Das kleine Bild wird im großen Bereich platziert und das große Bild wird dann in den Miniaturansichtsbereich fallen. Dafür erstellen wir unsere kleinen Bilder von beliebigen Set-Images Funktion springen in den anderen Abschnitt, wo wir die Klasse von klein hinzufügen. Was wir hier tun werden, ist, dass wir jedem einzelnen einen Event-Listener hinzufügen . Kurz nachdem wir die Klasse hinzugefügt haben. Bevor wir dies an unseren Wrapper anhängen, wählen wir unsere Elemente aus, fügen einen Ereignis-Listener hinzu, bei dem wir den Klick abhören, eine Funktion auslöst, die nur in einem Moment namens SwapImages. Runter nach unten. Unsere Funktion tauscht Bilder aus. Im Inneren haben wir den Ereignis-Listener hinzugefügt , der diese Funktion auslösen wird, jedes Mal, wenn wir auf eines der kleinen Bilder klicken, aber als zusätzlichen Vorsichtsschritt fügen wir eine if-Anweisung hinzu um aus dieser Funktion zurückzukehren, wenn auf das große Bild geklickt wurde. Was wir tun werden, ist, da dies ein Ereignis ist, klicken Sie auf „Ereignis“, wir analysieren die Veranstaltungsinformationen greifen auf die Elemente mit e.target zu. Dann können wir prüfen, ob die ClassList mit einer containts-Methode die Klasse von large enthält . Wenn ja, kehren wir aus dieser Funktion zurück. Dies ist nur zu unserer Vorsichtsmaßnahme. Als Nächstes werden wir die event.target-Informationen verwenden, das eigentliche Bild, auf das geklickt wurde. Alles, was wir tun müssen, ist das Quellattribut zu greifen und herauszufinden, welches dieser Bilder im vorgestellten Bereich platziert werden muss. Wir können dies tun, installieren Sie dies innerhalb einer Konstante namens Imagequelle, setzen Sie dies auf e.target. Wir verwenden getAttribute, wo wir die Quelle abrufen werden. Jetzt haben wir diese Bildquelle, die der Dateipfad ist. Wir können damit die Indexnummer unseres Arrays abrufen. Wir schnappen uns unser Bild-Array. Wir verwenden dann die Methode namens indexOf und analysieren dann unsere Quelle. Also die Bilder, indexOf, wie in unserem Variablennamen , der Bildquelle ist. Dies wird eine Indexnummer zurückgeben, die Sie innerhalb einer Konstante namens SelectedimageIndex speichern können . Was wir jetzt haben, ist die Indexnummer des angeklickten Miniaturbildes. Jetzt müssen wir dies durch das Bild tauschen, das sich an der Indexposition 0 befindet . Aber bevor wir diesen Swap tatsächlich durchführen, müssen wir zuerst speichern, welches Bild sich derzeit in Indexposition 0 befindet . Wir speichern dies in einer Konstante namens FirstImage. Stellen Sie diese beiden Bilder auf Indexnummer 0 ein. Dann können wir das ursprüngliche erste Bild neu zuweisen, sodass die Bilder 0 jetzt den Bildern entsprechen und diesen ausgewählten Bildindex analysieren. Dies ersetzt das erste Bild das angeklickte Miniaturbild, und dann müssen wir das Gegenteil tun, indem wir erneut unsere Bilder im SelectedimageIndex auswählen. Tausche das mit unserem ersten Bild aus. Dies ist ein Grund, warum wir ursprünglich mit FirstImage beginnen , da wir in der nächsten Zeile das erste Bild neu zuweisen. Daher gibt es uns unten den falschen Wert. Am Ende rufen wir unsere SetImages Funktion auf, um den Browser erneut mit der neuen Reihenfolge des Arrays zu aktualisieren. Probieren wir das für das Gras aus. Der Strand fällt auf den Grund, wir versuchen es. Gut. Dies schließt nun unser Image-Karussell-Projekt ab. Ich hoffe, es hat dir gefallen und dabei ein paar neue Tricks gelernt . 69. Folge mir auf Skillshare: Herzlichen Glückwunsch von mir das Ende dieses Kurses erreicht habe. Ich hoffe, es hat dir sehr gut gefallen und etwas Wissen daraus gewonnen. Wenn Ihnen dieser Kurs gefallen hat, schauen Sie sich den Rest meiner Kurse hier auf Skillshare an und folgen Sie mir auch, um Updates zu erhalten und auch neue Kurse informiert zu werden, sobald sie verfügbar sind. Nochmals vielen Dank, viel Glück, und hoffentlich sehen wir uns in einem zukünftigen Kurs wieder.