Modernes JavaScript für Anfänger: Teil 1

1. Willkommen beim Kurs!: He. 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, die nützlich sein können, und dies kann Anfänger oft in einer schwierigen Situation dazu bringen, sich zu fragen, wo sie überhaupt anfangen sollen. diesem Grund habe ich diese Klasse erstellt. es von Anfang an arbeite, zeige ich Ihnen, was JavaScript ist , was es kann und warum wir es überhaupt verwenden. Dieser Kurs deckt alles ab, was Sie wissen müssen, um ein kompetenter JavaScript-Entwickler zu werden . Wenn Sie noch nicht an einem meiner Kurse teilgenommen haben, heiße ich Chris, und ich baue seit über 20 Jahren Websites, und ich lehre diese Fähigkeiten auch seit über sieben Jahren bei, beide Videokurse führenden Bootcamps für die Webentwicklung auch. Dies ist Teil 1 von 2, und es wird Ihnen eine großartige Grundlage in JavaScript für alle Grundlagen geben , einschließlich Arrays, Funktionen, Objekte, Ereignisse und das DOM, Web-APIs und alle Details, die Sie benötigen zwischendurch zu wissen. All diese Themen werden klar und strukturiert behandelt , während wir dabei praktische Projekte erstellen, einschließlich realer Beispiel-Anwendungsfälle und auch einige kleine Herausforderungen. Am Ende stellen wir all diese Fähigkeiten auch zusammen, indem wir einen Work-in-Videoplayer aufbauen, einschließlich vollständig benutzerdefinierter Steuerelemente, aber auch ein unterhaltsames Shape-Drop-Spiel mit der Drag-and-Drop-API. Es enthält einen Projektordner, den 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. Teile deine Arbeit auf Skillshare!: Wenn Sie an einem Kurs teilnehmen, ist es wirklich wichtig, dass Sie sich nicht angewöhnen, dem nur zu folgen um eine weitere Vorlesung abzubrechen. 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, was du im Unterricht gelernt hast, praktisch anzuwenden. 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. 3. Mal sehen, was Javascript tun kann!: die theoretische Seite von JavaScript zu verstehen ist wirklich wichtig, die theoretische Seite von JavaScript zu verstehen, und wir werden es sehr bald tun, aber es gibt nichts Besseres, als genau zu sehen , was es direkt vor Ihnen tun kann. Um einige der Dinge zu sehen, die JavaScript tun kann , öffnen wir eine Webseite. Hier bin ich im Mozilla Developer Network. Das ist developer.mozilla.org. Dies funktioniert auch auf jeder anderen Webseite, sodass Sie eine andere auswählen können, wenn Sie möchten. Ich werde Ihnen nicht zeigen, wie JavaScript verwendet werden kann, um Website zu steuern oder zu ändern. Nun, nur ein kurzes Wort, bevor wir in diesem Video weiter kommen. Es kann ein oder zwei Dinge , die komplex oder ungewohnt aussehen Wenn Sie also nicht an Codierung oder JavaScript gewöhnt sind, sieht ein Teil davon vielleicht ein wenig einschüchternd aus, aber seien Sie sich bewusst, dies ist nur gib dir ein paar Anleitungen dazu, was JavaScript leisten kann. Wir erwarten nicht, dass Sie sich an etwas davon erinnern, und wir werden alles behandeln, was wir durchgemacht haben , während Sie den Kurs durchlaufen haben. Stellen Sie sich dies als einen kleinen Vorgeschmack vor, um Sie davon zu begeistern, was JavaScript mit einer Webseite tun kann. Um zu sehen, was JavaScript kann, öffne ich die Entwicklertools in Google Chrome, mit der rechten Maustaste klicken, und gehe dann zu Inspect. Lassen Sie uns das einfach ein bisschen größer machen , damit es sichtbarer ist. Wenn Sie einen anderen Browser wie Safari oder Firefox oder Edge verwenden , sind die meisten Entwicklertools sehr ähnlich, daher sollten Sie in Ordnung sein, wenn Sie auch einen anderen Browser verwenden möchten . Aber wenn Sie die Dinge genau gleich haben wollen, würde ich Google Chrome mitverfolgen. Das erste, was wir hier sehen, ist diese Registerkarte „Elemente“, die Zugriff auf die gesamte HTML-Struktur hat , aus der diese Webseite besteht. Wir können entweder den Mauszeiger über eine dieser Codezeilen bewegen, und es wird links hervorheben, an welchem Abschnitt wir gerade arbeiten, oder wir könnten auch auf diesen Pfeil klicken, der der Inspektor ist und wählen Sie einen dieser Abschnitte oder Elemente auf der Seite aus. Gehen wir zum Beispiel dieser Überschrift der Stufe 1 und klicken Sie darauf. Dies wird diese Überschrift der Stufe 1 innerhalb des Codes sofort hervorheben , und wenn sie ausgewählt ist, werden Sie auf der rechten Seite feststellen, dass dies 0 USD entspricht, und dann sehen wir dieses Pop-up direkt unter dem sagt, verwende 0$ in der Konsole, um auf diese Elemente zu verweisen. Wir können innerhalb dieser Konsolenregisterkarte 0 USD verwenden , um eines unserer Elemente oder Abschnitte auszuwählen , und dann können wir auch JavaScript anwenden. Lassen Sie uns einfach bestätigen, dass wir die richtigen Elemente mit 0$ ausgewählt haben , und dann erhalten wir unsere Überschrift Level 1 zurück. Wir haben dieses Element ausgewählt, aber was können wir damit machen? Nun, die Liste ist riesig, und wir werden hier nur an der Oberfläche kratzen, und wir werden in diesem Kurs noch viel mehr behandeln. Wenn wir erneut 0$ auswählen um auf unsere Überschrift der Stufe 1 zu zeigen, und dann einen Punkt, können wir unten sehen, dass wir auf viele verschiedene Optionen zugreifen können, die wir für dieses Element verwenden können. Eine gemeinsame, die wir in diesem Kurs viel verwenden werden, ist etwas, das als innerer Text bezeichnet wird. Innerer Text ist eine Möglichkeit, den Inhalt zwischen dem öffnenden und dem schließenden Tag einfach zu ändern . Es wird diesen Text von Ressourcen für Entwickler haben. Wenn wir möchten, können wir dies auf eine neue Textzeichenfolge setzen . Öffne die Zitate. Wir können einzelne Zitate oder Double verwenden, sogar eines ist in Ordnung, und dann können wir diesen Text auf alles andere einstellen , was Sie möchten. Lass uns loslegen, ich habe mich geändert, und dann bekommen wir sofort den neu zurückgegebenen Text in der Konsole zurück, und wir können auch sehen, dass die Webseite aktualisiert wurde. Bevor wir weiter gehen, machen Sie sich keine Sorgen darüber, eine dieser Änderungen vorzunehmen. Dies aktualisiert die Live-Website nicht. Dies ist nur innerhalb unseres eigenen Browsers. Alles, was wir tun müssen, ist den Browser einfach zu aktualisieren , und dieser wird wieder auf die Originalversion zurückgesetzt. Außerdem machen wir das, wir setzen jetzt unsere $0 zurück, und dies wird jetzt undefiniert zurückgegeben. Wir werden uns während dieses Kurses mit undefinierter beschäftigen. Aber im Moment können wir uns vorstellen, dass diesem $0 einfach kein Element zugewiesen wurde. Genau wie zuvor müssen wir zurück in die Registerkarte Elemente gehen , um einen dieser Abschnitte oder Elemente auszuwählen einen dieser Abschnitte oder , mit denen Sie arbeiten möchten. Lassen Sie uns oben einen dieser Links anschauen. Benutzen Sie erneut den Pfeil und wir können den Mauszeiger über eine dieser Schaltflächen bewegen. Klicken Sie darauf. Wir haben diesen Button mit der Schaltfläche „ID des Feedbacks“ , der jetzt 0$ zugewiesen werden sollte. Wählen wir dies aus und wir sehen, dass unsere Schaltfläche jetzt zurückgegeben wird. Auch hier geben uns 0 US-Dollar und dann der Punkt Zugriff auf eine Reihe von Funktionen, die wir auf dieses Element anwenden können. Eine davon ist die Stileigenschaft, und von hier aus können wir auch eine zusätzliche Stileigenschaft hinzufügen , die wir auf diese spezielle Schaltfläche anwenden möchten. Genau wie bei regulärem CSS stehen, wenn Sie CSS in der Vergangenheit verwendet haben, alle gleichen Stileigenschaften für die Verwendung in der Konsole zur Verfügung. Ein Beispiel dafür könnte die Textfarbe sein, die wir auf einen beliebigen Wert einstellen können, der eine gültige CSS-Farbe ist . Drücken Sie „Enter“. Aktualisieren Sie jedoch sofort im Browser. Drücken Sie nach oben, und wir können auch eine zweite Eigenschaft hinzufügen. Lass uns für die Schriftfamilie gehen. Auch hier können wir dies in den Anführungszeichen ändern , um eine andere Schriftfamilie von Schreibschrift zu sein. Wie erwartet aktualisiert dies den Browser automatisch. Bei der Arbeit mit Stilen ist nur zu beachten, wir hier sehen, dass die Farbeigenschaft auf Hot Pink festgelegt ist, und dies funktioniert wie ein normales Stylesheet. Wenn wir jedoch zwei Wörter wie Schriftart und Familie in regulärem CSS haben , würden wir dies in Kleinbuchstaben behalten und dies durch einen Bindestrich trennen, also schreiben wir es so als zwei Wörter mit der Strich im Inneren. Stattdessen müssen wir, wenn wir JavaScript verwenden, wenn wir zwei oder mehr Wörter haben, wenn wir zwei oder mehr Wörter haben, dies in das umwandeln, was CamelCase genannt wird, und jedes Wort nach dem ersten beginnt mit einem Großbuchstaben. Das ist so ziemlich das einzige, woran Sie sich zu diesem Zeitpunkt erinnern müssen. Wir haben Zugriff auf dieselben CSS-Eigenschaften, aber wir müssen diese als CamelCase eingeben , wenn wir JavaScript verwenden. Eine andere Sache, die wir uns jetzt ansehen werden, sind Ereignisse. Auch hier haben wir später im Kurs einen speziellen Veranstaltungsbereich . Aber im Moment möchte ich Sie nur ein bisschen darüber begeistern, was JavaScript bei der Interaktion mit dem Benutzer tun kann. Um ein Beispiel dafür zu sehen, können wir den Browser bitten, auf ein Mausereignis zu achten z. B. wenn eine Maus über dieses bestimmte Element schwebt. Wir können dies erneut tun, indem wir unseren Button mit $0 auswählen, und dann können wir ein Ereignis namens onmouseover verwenden. Dies wird erkennen, wenn die Maus über dieses bestimmte Element schwebt. Dann werden wir eine sogenannte Funktion auslösen. Eine Funktion ist wie eine Aufgabe, die ausgeführt wird , wenn die Maus über diese bestimmte Schaltfläche fährt. Sie sich keine Sorgen, wenn das ungewohnt aussieht, wir haben viel mehr Details zu den kommenden Funktionen. Aber im Moment werden wir nur dieses bestimmte Element auswählen. Greifen Sie erneut auf die Stileigenschaft zu, und dieses Mal gehen wir darauf, dass der Hintergrund jeder Farbe entspricht, z. B. Drücken Sie „Enter“ und dieses Mouseover-Ereignis wird jetzt aktiviert. Wenn wir jetzt mit der Maus über diese bestimmten Elemente fahren, wird der Hintergrund nun in orange geändert. Dies ist eine Möglichkeit, Dinge im Browser schnell zu testen. Wenn es jedoch darum geht, echten JavaScript-Code in unserem Texteditor zu schreiben , funktioniert 0$ nicht, $0 funktioniert nur in den Entwicklertools des Browsers. Stattdessen benötigen wir eine Möglichkeit, von außen auf eines dieser Elemente von der Seite zuzugreifen . Gehen Sie zum Beispiel zurück zur Seite des Elements, und wir werden einen anderen Abschnitt auswählen. Gehen wir zum Haupt, das die ID des Inhalts hat. Natürlich könnten wir auf 0 US-Dollar zugreifen, da wir uns in den Entwickler-Tools befinden, aber wir müssen uns daran gewöhnen, von einem Texteditor aus auf diese Elemente zuzugreifen . Wir tun dies, indem wir von der obersten Ebene ausgehen, und dies geschieht durch den Zugriff auf die Dokumente. Wir können sofort sehen, dass die ganze Seite hervorgehoben wird. Dies liegt daran, dass es sich bei dem Dokument um diese eigentliche Webseite handelt. Sobald wir die ganze Seite genau so ausgewählt haben, benötigen wir eine Möglichkeit, diese Seite nach unten zu dem gewünschten Element zu filtern . JavaScript stellt uns bestimmte Methoden zur Verfügung, mit denen wir diese Seite nach unten filtern können. Wie wir hier bei dieser automatischen Vervollständigung sehen können, können wir ein Element nach der ID, nach dem Klassennamen und auch nach dem Namen des Elements auswählen nach dem Klassennamen und auch nach dem Namen des Elements , aber mehr als diese später. Ich gehe zu getElementById, und dann können wir innerhalb der Klammern die ID des Elements übergeben , das wir auswählen möchten. Wenn wir uns die Registerkarte Elemente ansehen, sehen wir, dass dieser Hauptabschnitt die ID enthält , die dem Inhalt als Zeichenfolge entspricht . Geben Sie dies ein und beachten Sie auch hier , dass dies auch CamelCase ist. Genau wie die obige Schriftfamilie jedes Wort nach dem ersten beginnt jedes Wort nach dem ersten mit einem Großbuchstaben. Drücken Sie „Enter“. Dies gibt dann unser Hauptteil mit der ID des Inhalts zurück. Wir sind genau in der gleichen Position wie wenn wir 0$ verwenden. Wenn wir nach oben drücken, erhalten wir dieselbe Codezeile. Wir können dann dot verwenden, um auf die gleichen Funktionen zuzugreifen , die wir zuvor verwendet haben. Legen Sie zum Beispiel den Stil fest, und gehen wir dann für die CSS-Opazität von 0,3. Dies wird nicht angewendet, wir können immer noch etwas anderes tun, was wir vorher hatten, wie zum Beispiel den Hintergrund. Das entspricht allem. Lass uns Rot holen. Da sind wir los. Der Hintergrund für den Hauptabschnitt wurde nun in Rot umgewandelt. Lassen Sie uns dies einfach aktualisieren und wieder in den ursprünglichen Zustand versetzen. JavaScript beschränkt sich nicht darauf, nur die Elemente auf unserer Seite zu ändern. Wir können es auch benutzen, um so viel mehr zu tun. Wir haben Zugriff auf Datumsfunktionen, wir können auf Timer zugreifen und auch einige mathematische Funktionen. Lassen Sie uns zum Beispiel zwei Zahlen addieren. Wir sagen, 5 plus 11 ist 16, 7 Takeaway 2 ist 5. Wir haben auch viele andere mathematische Funktionen, sodass wir das mathematische Objekt und dann den Punkt auswählen und dann durchblättern können. Wir können sehen, dass wir viele verschiedene Optionen haben, aber eine beliebte ist Math.random. Fügen Sie die Klammern kurz danach hinzu und drücken Sie „Enter“, wodurch eine Zufallszahl zwischen Null und Eins generiert wird . Wenn wir das weiter versuchen, erhalten wir jedes Mal einen anderen Wert. Dies ist nur ein kleiner Vorgeschmack darauf, was JavaScript leisten kann und wie wir es verwenden können, um mit einer Webseite zu interagieren. Es gibt so viel mehr zu lernen, und wir werden mehr dieser Funktionen erfahren , während wir diesen Kurs durchlaufen. 4. Starter-Dateien herunterladen: Während dieses Kurses schreiben wir viel JavaScript-Code. Um uns dabei zu helfen, habe ich Ihnen einen Ordner namens moderne Javascript-Starterdateien zur Verfügung gestellt. Wenn Sie zu github.com/chrisdixon161 und dann in das Repository gehen, das modern-javascript-starter-Dateien ist. Von hier aus können Sie diesen vollständigen Satz von Dateien herunterladen, nämlich die Starterdateien, die Sie für jede Lektion in diesem Kurs benötigen. Wenn Sie zum Beispiel in den ersten Abschnitt gehen, finden wir eine Liste aller Lektionen in diesem Abschnitt. Jeder dieser Ordner enthält das absolute Minimum, das Sie benötigen, um mit jeder dieser Lektionen zu beginnen. Der Zweck dieser Ordner besteht darin, uns einen Ausgangspunkt zu geben, damit wir einfach direkt über JavaScript lernen können , ohne beispielsweise den gesamten erforderlichen HTML-Code schreiben zu müssen. Ein weiterer Vorteil all dieser Dateien ist, dass es uns auch eine Referenz für alle Lektionen gibt eine Referenz für alle , die wir in der Vergangenheit gemacht haben. wir jede dieser Lektionen ankreuzen, haben wir eine Referenz, die Sie auf Sie zurückblicken können , wenn Sie jemals in Zukunft stecken bleiben. Das ist alles, was wir tun müssen. Machen Sie einfach weiter und laden Sie den Ordner herunter. Sie können dies an den Einstiegspunkten des Hauptordners tun. Klicken Sie hier auf die Schaltfläche „Code“ und Sie können die vollständige ZIP-Datei herunterladen, die wir in unserem Visual Studio-Code öffnen werden. Sobald dies heruntergeladen wurde, sollten Sie eine ZIP-Datei haben, die Sie extrahieren können, normalerweise indem Sie auf den Ordner doppelklicken und diese dann in Ihren Texteditor ziehen. Ich verwende Visual Studio Code und Sie sollten alle verfügbaren Abschnitte auf der linken Seite sehen . Das ist es, das sind unsere Starterdateien komplett. Wir können jetzt alles über JavaScript lernen. 5. Wo man Javascript hinzufügt: Willkommen am Anfang dieses Abschnitts. Wir werfen jetzt einen Blick auf JavaScript und wechseln vom Browser und tatsächlich in unsere eigenen JavaScript-Dateien. Aus dem vorherigen Abschnitt haben wir die Starterdateien heruntergeladen , die mit diesem Kurs geliefert werden. Wenn Sie diese nicht heruntergeladen haben, gehen Sie zurück zu diesem Video und laden Sie diese von GitHub herunter. Sobald dies erledigt ist, müssen Sie das Paket entpacken und es in Visual Studio Code ziehen, um dies zu öffnen. Rechts habe ich Google Chrome als Browser geöffnet . Was wir jetzt tun werden, ist gleich am Anfang zu beginnen und einen Blick darauf zu werfen, wo wir JavaScript in unsere Dateien einfügen können . Früher haben wir Code direkt in die Konsole des Browsers eingegeben , aber realistisch gesehen wird er fast immer in unsere eigenen Dateien geschrieben . Wo fangen wir an? Nun, innerhalb von Visual Studio Code in unseren Starterdateien, gehen Sie in unseren ersten Abschnitt, der die JavaScript-Grundlagen ist, und Sie werden feststellen, dass die fernen Zahlen bei 02 beginnen. Dies liegt daran, dass wir für diese spezielle Lektion gleich am Anfang beginnen und die Dinge selbst einrichten werden, und dann werden diese für alle übrigen Lektionen einige Boilerplate haben für uns verfügbar. Wir können einfach direkt unseren JavaScript-Code schreiben. dieses Symbol, in dem die JavaScript-Grundlagen ausgewählt Klicken Sie hier auf dieses Symbol, in dem die JavaScript-Grundlagen ausgewählt sind, um einen neuen Ordner zu erstellen, und dann kann dies 01 sein. Ich nenne das wo ich JavaScript hinzufügen kann. Sie erneut sicher, dass sich dies im JavaScript-Basisordner befindet, und klicken Sie dann bei ausgewähltem ersten Ordner auf dieses Symbol hier, bei dem es sich um eine neue Datei handelt, und das wird hier geöffnet. Wir nennen das den Indexpunkt HTML. Drücken Sie Enter. Es sollte sich in unserem neuen Ordner befinden. Fügen Sie darin einige grundlegende HTML-Strukturen hinzu, um dies im Browser zu öffnen , und Visual Studio-Code wird mit einem Plug-In geliefert oder neu erstellt in Emmet. Dies gibt uns einige Codevervollständigung und einige einfache Verknüpfungen. Einer der nützlichsten ist HTML Colon Fünf. Drücken Sie Enter. Dies gibt uns alle grundlegenden HTML-Starter-Code, den wir benötigen. Auch dies wird alles in allen anderen Ordnern verfügbar sein , also gilt dies nur für diese Lektion. Der Titel, wo JavaScript hinzugefügt werden soll. Dann brauchen wir die Elemente, mit denen wir tatsächlich arbeiten können, z. B. eine Seitenüberschrift. Platzieren Sie irgendetwas wie h1 und etwas Text darin. Wenn diese Elemente hier vorhanden sind, können wir etwas JavaScript verwenden , um auf diese Elemente zuzugreifen, genau wie wir es zuvor in der Konsole angesehen haben. Alles, was Sie brauchen, um dies im Browser zu öffnen , ist diese Datei mit Command oder Control S zu speichern diese Datei mit Command oder Control . Wenn wir dann mit der rechten Maustaste auf diesen Dateinamen klicken, gehen Sie zu Pfad kopieren, und dann können wir diesen einfügen im Browser. Alternativ können Sie, wenn Sie möchten, direkt hier in den Hauptordner gehen. Sie können dann zum aktuellen Ordner gehen und auf diese Indexseite doppelklicken. Dies öffnet dies dann in Ihrem Standardbrowser. Um mit JavaScript auf diese Elemente zugreifen zu können, ist es eine der Möglichkeiten, AID hinzuzufügen. Ich gebe uns einen Titelausweis. Denken Sie daran, dass jede bestimmte ID für diese HTML-Seite eindeutig sein sollte . Stellen Sie sicher, dass wir nur eine Titel-ID in dieser HTML-Datei haben. Dies macht es für unser JavaScript schön und einfach , die gewünschten Elemente auswählen zu können . Dann unter diesem und knapp über unserem schließenden Body-Tag können wir unsere Skript-Tags einfügen. Wir haben ein öffnendes Tag und auch ein schließendes Tag. Dies ist der Ort, an dem wir unseren JavaScript-Code platzieren können . Direkt über dem Körper befindet sich ein Ort, an dem wir JavaScript hinzufügen können , und befindet sich auch über Orten, die wir uns bald ansehen werden. Früher, als wir in der Konsole waren, denken Sie daran, dass wir uns die Auswahl jedes einzelnen Elements mit dem Dollarsymbol Null angesehen haben . Denken Sie auch daran, dass wir gesagt haben, dass dies für die Konsole einzigartig ist. Wir brauchen eine andere Möglichkeit, unsere Elemente im Texteditor auszuwählen . Nun, hier drinnen werden wir genau das Gleiche tun , was wir in der Konsole angesehen haben. Wir wählen zuerst das Dokument aus. Das Dokument ist dieses vollständige HTML-Dokument , in dem wir gerade arbeiten. Es wird dies auswählen und dann müssen wir diese Dokumente auf das jeweilige Element filtern diese Dokumente , das wir auswählen möchten. Denken Sie daran, dass wir uns eine Methode namens get elements by ID angeschaut haben. Auch hier ist CamelCase. Jedes einzelne Wort nach dem ersten beginnt mit einem Kapital in den Klammern, und die Zitate werden dann eine eindeutige ID übergeben , die Sie auswählen möchten. In unserem Fall holen wir uns den Titel. Bring das hier rein. Wir haben uns angeschaut, den inneren Inhalt oder den inneren Text dieses Elements mit.innertext zu ändern . Dies ist eine Eigenschaft, bei der wir eine neue Textzeichenfolge zwischen den einzelnen oder den doppelten Zitaten hinzufügen können . Ändern wir das vorerst einfach in JavaScript und speichern diese Datei. Wenn wir dann zum Browser gehen und neu laden, hat dies nun unsere Überschrift Level 1 ausgewählt und den inneren HTML-Code geändert. Schließen wir einfach die Seitenleiste , um ein bisschen mehr Platz zu erhalten. Alle Eigenschaften, die wir im Konsolenvideo angeschaut haben , gelten immer noch, z. B. das Hinzufügen verschiedener Stile. Auch hier können wir auf dieselben Elemente mit get element by ID zugreifen , und wir können auch die Stile für dieses bestimmte Element ändern . Lassen Sie uns die Textfarbe ändern, um Orange zu entsprechen. Aktualisieren und dies gilt alles. Eine andere Möglichkeit, JavaScript hinzuzufügen, besteht darin, dieses Inline hinzuzufügen. Wenn Sie dieses Inline hinzufügen, fügen wir es direkt in unsere Elemente ein und fügen dies innerhalb des öffnenden Tags der Elemente hinzu. Wir fügen das so hinzu, wie wir ein Inline-CSS hinzufügen würden. In einem früheren Video haben wir uns die Ereignisse sehr kurz angeschaut, bei denen wir uns das On-Mouse-Over-Event angeschaut haben. Werfen wir hier einen Blick auf das On-Click-Ereignis, das ausgelöst wird, wenn der Benutzer auf dieses bestimmte Element klickt. Alles, was wir innerhalb dieses On-Click-Ereignishandlers tun werden, ist eine Warnung auszulösen. Eine Warnung ist ein Pop-up im Browser. Fügen wir das einfach mit dem Text angeklickt hinzu. Geben Sie dies speichern und aktualisieren Sie den Browser. Bewegen Sie die Maus zu den Elementen und klicken Sie auf. Ich sehe jetzt eine Seitenwarnung. Dies ist wahrscheinlich etwas, das Sie in der Vergangenheit beim Surfen im Internet gesehen haben . Alles, was wir tun müssen, um dies zu entfernen, ist auf den Okay Button zu klicken und dieser wird dann geschlossen. Lass uns das einfach entfernen. Beachten Sie auch, dass es im Allgemeinen davon abgeraten wird , unser JavaScript genau so in Einklang zu halten , da es unser HTML und unser JavaScript vermischt und die Dinge weniger lesbar und organisiert macht . Wenn möglich, halten Sie alles getrennt, genau wie wir es hier haben, und wir werden uns auch ansehen, wie wir dies in nur einem Moment in eine separate Datei einfügen können . Dies ist in einem Script-Tag enthalten und wir können beliebig viele Skript-Tags hinzufügen. Es könnte sich auch irgendwo auf dieser Seite befinden, einschließlich innerhalb des Kopfbereichs. Dies funktioniert genauso, wenn wir diesen ganzen Skriptabschnitt und dann Command oder Control X abrufen diesen ganzen Skriptabschnitt und dann , um dies fehl am Platz zu schneiden. Platzieren Sie dies innerhalb des Head-Abschnitts mit Befehl oder Steuerelement V, um dies in und auch in den Browser einzufügen. Hier können wir sehen, dass der ursprüngliche Seitentitel wieder eingesetzt wird. Da wir das Script-Tag in den Head-Bereich verschoben haben , scheint nichts von diesem JavaScript anzuwenden. Werfen wir einen Blick in die Konsole und sehen, ob wir Fehler erkennen können. Rechtsklicken und inspizieren. Klicken Sie oben auf die Registerkarte „Konsole“. Wir sehen, dass wir die Eigenschaft innertext von null nicht setzen können. Wenn wir einen Fehler bekommen, ist es oft eine gute Idee, in die Konsole zu gehen , und es gibt uns oft einen Hinweis darauf, was genau das Problem ist. Das aktuelle Problem wird verursacht, weil HTML-Seite von oben nach unten geladen wird. Das Skript innerhalb des Head-Abschnitts wird also geladen, bevor es überhaupt weiß, dass dieses Titelelement existiert, was dann einen Fehler verursacht. Wenn wir ein Skript im Head-Bereich wie folgt hinzufügen müssen , kann dies häufig zu Problemen führen, wenn wir auf eines unserer DOM-Elemente zugreifen müssen . diesem Grund sehen wir häufig JavaScript am Ende des Body-Abschnitts. Es ermöglicht das schnelle Laden der Elemente und blockiert nicht, dass der HTML-Code auf die Seite geladen wird. Sie werden jedoch einige JavaScript-Bibliotheken von Drittanbietern sehen , bei denen das Skript in den Head-Bereich geladen werden muss in den Head-Bereich geladen damit die Bibliothek ordnungsgemäß funktioniert. Außerdem werden diese Bibliotheken von Drittanbietern zusammen mit unserem eigenen Code normalerweise in eine eigene Skriptdatei unterteilt. all dieses JavaScript in eine eigene Datei verschieben, werden diese HTML-Dokumente viel lesbarer und wartbarer. Öffnen Sie dazu zuerst die Seitenleiste und klicken Sie dann innerhalb des JavaScript-Ordners wo Sie hinzufügen können, auf das Symbol für neue Dateien, und dann können wir diesem einen Namen unserer Wahl geben. Ich gehe für Skript 1. Dann muss es die Dot-JS-Erweiterung haben. Drücken Sie Enter. Zurück auf unsere Indexseite können wir den Inhalt zwischen den Script-Tags kopieren. Schnappen Sie sich diese beiden Codezeilen und bringen Sie diese aus. Fügen Sie diese in unsere neue Skriptdatei ein. Diese Skriptdatei benötigt die umgebenden Skript-Tags nicht , da wir bereits wissen, dass es sich um eine JavaScript-Datei aus der Dot-JS-Erweiterung handelt. Aber was wir tun müssen, ist diese beiden Dateien miteinander zu verknüpfen. Derzeit sind dies zwei separate Dateien voneinander unabhängig sind. In der Indexdatei müssen wir auf diese neue Skriptdatei verweisen. Wir können dies innerhalb der Skript-Tags tun, anstatt den Code wie zuvor darin zu haben. Was wir tun können, ist, die Quellattribute hinzuzufügen. Das Quellattribut ist im Grunde der Speicherort dieser Datei relativ zu dem Ort, an dem wir uns gerade befinden. Dies funktioniert genauso wie das Hinzufügen eines Stylesheets. Da diese Datei nebeneinander liegt, können wir mit der Quelle des Skripts 1 dot js darauf verweisen. Wenn sich dies beispielsweise in einem JavaScript-Ordner befand , müssen wir in den JavaScript-Ordner gehen und dann den Schrägstrich in unser Skript weiterleiten. Wir haben das nicht, also ist es einfach Script One Dot js. Stellen Sie sicher, dass unsere beiden Dateien gespeichert und dann im Browser aktualisiert werden . wir sehen das gleiche Problem im Browser. Wir können die Eigenschaft innertext von null nicht festlegen. Dies ist sinnvoll, da wir das Script-Tag immer noch innerhalb des head-Abschnitts laden . Wir versuchen dies auf ein Element anzuwenden , bevor es überhaupt geladen wurde. Wir könnten einen benutzerdefinierten Code schreiben, um darauf zu warten, dass der HTML-Code zuerst geladen oder wir können uns im kommenden Video einige modernere Techniken ansehen . 6. Async und defer (einbinden und ausführen): Innerhalb unserer Starterdateien werden wir diese Datei aus dem letzten Video schließen , damit es keine Verwirrung gibt. Gehen Sie dann in Lektion 2, die asynchron ist und aufschieben ist. Doppelklicken Sie auf die Indexseite, um dies zu öffnen. Da wir uns jetzt in einer neuen Datei befinden, müssen wir diese kopieren oder den Pfad dazu kopieren und dann in den Browser einfügen. Wir sehen sofort, dass wir immer noch den gleichen Fehler wie das vorherige Video haben. Dies liegt daran, dass dies so ziemlich dieselbe Datei oder derselbe Endcode ist , den wir im letzten Video hatten. Wir haben unser Skript und dann haben wir auch unsere Überschrift Level 1 und denselben Inhalt innerhalb der Skriptdatei. Sie müssen dies für jedes Video tun, zu dem wir gehen. Wir müssen die Indexseite öffnen und sicherstellen, dass dies der richtige Seitentitel ist. Im letzten Video haben wir ein Problem entdeckt, als unsere JavaScript-Dateien zu früh geladen haben. Dies kann zu zwei Problemen führen. Erstens müssen wir möglicherweise auf das HTML-Element zugreifen , bevor es überhaupt erstellt wird, genau wie wir hier sehen, und zweitens haben wir möglicherweise viel JavaScript-Code in dieser Datei. Dies könnte das Laden des restlichen unserer Seite wirklich verlangsamen . Wenn das Skript 1 eine wirklich riesige Datei wäre, würde der Benutzer keinen HTML-Code auf der Seite geladen sehen , bis dieses Skript fertig ausgeführt wurde. Wir werden uns jetzt zwei Möglichkeiten ansehen, wie wir diese ganze Asynchrone beheben und aufschieben können . Async und defer sind beide Attribute, die wir innerhalb der Skriptelemente hinzufügen können. Werfen wir zunächst einen Blick auf async und schließen Sie die Seitenleiste, um mehr Platz zu erhalten. Stellen Sie sicher, dass diese Datei gespeichert ist, und aktualisieren Sie den Browser. Gerade, wir sehen, dass der Fehler verschwunden ist. Das JavaScript wurde auf unser Element angewendet und wir sehen keine Fehler in der Konsole. Versuchen wir es zu verschieben. Platzieren Sie dies und aktualisieren Sie den Browser und wir haben genau das gleiche Ergebnis. Alles funktioniert einwandfrei. , da beide arbeiten Was genau ist der Unterschied, da beide arbeiten? Nun, zuerst haben wir asynchron und asynchron ist die Abkürzung für asynchron. Dies ist ein Begriff, auf den wir später zurückkommen werden. Aber für diesen speziellen Anwendungsfall wird async dieses Skript zusammen mit dem Rest unserer HTML-Inhalte herunterladen . Aber um zu verstehen, was Async tatsächlich tut, müssen wir ein bisschen weiter nach vorne schauen. Stellen Sie sich vor, anstatt unser Skript auf unserer Indexseite innerhalb des Texteditors zu haben, wie wir es hier tun, stellen Sie sich vor, dass dies eine Live-Website war. Wenn es sich um eine Live-Website handelte, unsere Skripte und unsere Indexseite werden unsere Skripte und unsere Indexseite auf einem Webserver gespeichert. Wenn der Benutzer unsere Seite zum ersten Mal besucht, muss der Inhalt dieser Dateien heruntergeladen werden. Wenn wir dies als asynchrone Skript markieren, wird dieser JavaScript-Code zusammen mit unseren HTML-Inhalten heruntergeladen . Das bedeutet, anstatt unseren HTML-Code zu blockieren, wird der HTML-Code immer noch heruntergeladen und dann im Browser gerendert, so dass es keine große Verlangsamung unserer Inhalte verursachen sollte . Dann wird der Inhalt unseres Skripts ausgeführt sobald das Herunterladen abgeschlossen ist. Dies hat seine Vorteile. Es ist wirklich nützlich, da es das Laden unserer Inhalte nicht blockiert , aber es gibt einen Nachteil. Siehst du das, ich verlinke auf drei separate Skripte. Lassen Sie uns das noch zweimal kopieren und einfügen. Dies kann Skript 2 und Skript 3 sein, und natürlich müssen wir zwei neue Dateien in unserem Async- und Defer-Ordner erstellen . Der zweite, scripts2.js. Auch Skript 3 in unser Skript 1. Gründen der Übersichtlichkeit können wir dies in Nummer 1 ändern und diese Datei dann speichern und diese Codezeile in unser Skript 2 kopieren. Fügen Sie das hier ein und wir können dies in Nummer 2 ändern. Speichern Sie dies auf demselben für Nummer 3. mit unseren drei Skripten, die gerade hier verlinkt Was sollten wir mit unseren drei Skripten, die gerade hier verlinkt sind, theoretisch erwarten? Nun, wahrscheinlich würden wir erwarten, dass dies die Nummer 3 ist, da wir das Skript Nummer 1 geladen haben, wodurch der Inhalt auf Nummer 1 geändert wird. Dann Skript 2, bei dem wir dies ändern werden, um Nummer 2 zu sein, und dann wird Nummer 3 dies als Nummer 3 überschreiben . Nun, schauen wir uns das an. Wir können diese Datei und auch den Browser speichern, aktualisieren. Wir sehen die Nummer 3 wie erwartet. Versuchen wir es noch ein paar Mal zu erfrischen. Wenn wir mehrmals auffrischen, werden wir irgendwann eine andere Zahl sehen. Wir sehen letztendlich diesen Wert von 2, weil wir alle drei dieser Skripte in der richtigen Reihenfolge anfordern. Aber obwohl wir diese drei Skripte in der richtigen Reihenfolge anfordern, bedeutet das nicht, dass Sie immer in dieser bestimmten Reihenfolge vom Server zurückkommen werden . Aber du denkst vielleicht darüber nach, warum sollte ich mich überhaupt darum kümmern? Genauso wie script1.js sich darauf stützte, dass der Inhalt des HTML vorhanden ist, kann sich ein Skript manchmal auch auf ein anderes Skript verlassen. Zum Beispiel kann sich unsere dritte JavaScript-Datei auf Code der ersten beiden Dateien stützen Code der ersten beiden Dateien zuerst verfügbar sind, und wenn diese zuerst vor den beiden vorherigen heruntergeladen wird, führt dies zu einem Fehler. Bestimmte JavaScript-Bibliotheken von Frameworks werden auch mehrere Skripte haben, die wir herunterladen müssen, und diese müssen in der Reihenfolge heruntergeladen werden. In früheren Versionen des Bootstrap-Frameworks haben wir uns beispielsweise des Bootstrap-Frameworks haben wir uns beispielsweise immer auch auf das jQuery-Framework verlassen. Für das erste Skript müssten wir die jQuery-Bibliothek herunterladen. Erst nachdem das Laden abgeschlossen ist, würden wir dann die Bootstrap-Bibliothek herunterladen, die dann die jQuery-Funktionen nutzte. Wenn unsere Skriptdateien in einer bestimmten Reihenfolge ausgeführt werden müssen , ist async möglicherweise nicht immer die beste Option. Defer hingegen führt die Skripte in der Reihenfolge aus, in der sie erscheinen, und es wird dies tun, nachdem alle Skripte auf der Seite und auch der Seiteninhalt geladen wurden. Lassen Sie uns dies ändern, um in allen drei unserer Skripte verschoben zu werden . Wenn wir uns so oft erfrischen, wie wir wollen, sollten wir immer nur den letzten Wert von drei sehen. Wenn Sie mit JavaScript neu sind, erwarte ich nicht, dass Sie sich an all diese erinnern, und Sie benötigen sie möglicherweise nicht allzu oft. Aber Sie haben auch dieses Video und auch den Projektcode hier wenn Sie dies in Zukunft als Referenz benötigen. Denken Sie auch häufiger daran, wir dieses Skript auch direkt am Ende des Body-Abschnitts platzieren können, damit das Laden des restlichen HTML-Codes nicht gesperrt wird. Genau wie eine Zusammenfassung, bevor wir fortfahren, haben wir die Async- und die Defer-Schlüsselwörter, die Sie unseren Skripten als Attribute hinzufügen können . Wenn Sie async verwenden, werden die Skripte zusammen mit dem Rest des HTML-Inhalts heruntergeladen die Skripte zusammen mit dem Rest des und der Browser versucht , die Seite beim Herunterladen zu rendern. Einer der Vorteile ist, dass der Rest des Inhalts nicht daran gehindert wird, das Rendern zu verhindern, und sobald die Datei heruntergeladen wurde, wird das Skript dann darin ausgeführt. Wir müssen uns auch daran erinnern, wenn wir mehrere asynchrone Skripte verwenden, es gibt keine Garantie dafür, dass sie in der Reihenfolge ausgeführt werden , in der wir von ihnen erwarten. Async ist immer noch eine gute Option, wenn wir mehrere Skripte haben , die nicht voneinander abhängig sind um sie in einer bestimmten Reihenfolge zu laden. Defer hingegen lädt mehrere Skripte, und wir wissen, dass die Reihenfolge beibehalten wird. Wenn unsere Skripte ausgeführt werden, sobald sowohl der Seiteninhalt wie der HTML als auch diese Skripte heruntergeladen wurden, bedeutet dies alles, dass wir lieber ein verzögertes Skript verwenden sollten , wenn wir dies getan haben mehrere Skripte, die in der richtigen Reihenfolge ausgeführt werden müssten. Dies ist der Schlüssel zum Mitnehmen, das async verwendet werden könnte, wenn wir mehrere Skripte haben, die nicht in einer bestimmten Reihenfolge ausgeführt werden müssen. Wir sollten defer verwenden, wenn diese Skripte in einer bestimmten Reihenfolge ausgeführt werden müssen . Auch hier müssen Sie diese beiden Schlüsselwörter möglicherweise nicht sehr oft verwenden , aber es ist auch sehr wichtig, sich all dieser Teile von JavaScript bewusst zu sein , falls Sie in Zukunft auf diese stoßen. Als Nächstes entfernen wir uns vom Laden von JavaScript und schauen an, wie wir mit Strings arbeiten können. 7. Arbeiten mit Strings: Lassen Sie uns nun in Lektion 3 dieses Abschnitts springen , der mit Strings arbeiten ist. Wir sollten jetzt wissen, was zu tun ist. Wir können die Index-Seite öffnen. Wenn wir dies dann innerhalb des Browsers öffnen, kopieren Sie den Pfad dazu und ersetzen Sie dann den aktuellen im Browser. Bisher, wenn wir den inneren Text festgelegt haben, werden wir uns dieses Beispiel hier ansehen, das genau wie das ist, das wir uns in der Vergangenheit angesehen haben. Wir wählen diesen Titel direkt oben aus und setzen den InnerText so, dass er etwas anderem entspricht , das ursprünglich nicht da war. Hier haben wir damit angefangen, mit Strings zu arbeiten und dann haben wir dies durch etwas anderes ersetzt, das wir im Browser sehen. Bisher haben wir diese zwischen den einzelnen Zitaten hinzugefügt und in JavaScript wird dies als String bezeichnet. Eine Zeichenfolge ist im Grunde ein Text, es kann ein einzelnes Zeichen wie ein einzelner Buchstabe wie ein A sein, es kann ein einzelnes Wort sein, es kann ein Satz oder sogar ein Absatz sein. Wir können dies auch in die einzelnen oder doppelten Anführungszeichen platzieren , es spielt keine Rolle, beide werden für ein Beispiel wie dieses perfekt funktionieren . Es wird jedoch ein Problem geben, wenn eines der darin enthaltenen Wörter dasselbe Zeichen enthält, z. B. ein einzelnes oder doppeltes Zitat. Wenn wir dies auf einfache Anführungszeichen zurücksetzen, genau so, und dann können wir dies ändern, um vielleicht zu sein, gehen wir los. Dies hat auch ein Apostroph, das das gleiche Symbol wie die umgebenden Anführungszeichen ist , sofort können wir sehen, dass der Texteditor dies hervorgehoben und die Farbe geändert hat , um uns mitzuteilen, dass es ein Problem gibt. Was hier effektiv passiert, ist, dass wir eine Zeichenfolge aus den ersten beiden Zitaten abgleichen . Wir können sehen, dass dies die Originalfarbe ist, und danach sehen wir einen Fehler. Wir können dies sehen, wenn wir diese Datei speichern und den Browser aktualisieren. Wir können in der Konsole sehen, dass wir eine unerwartete Kennung haben , da erwartet wird, dass unsere gesamte Zeichenfolge nur dazwischen enthalten ist diese Zitate. Es gibt eine Reihe von Möglichkeiten, damit umzugehen. Erstens könnten wir die äußeren Zitate so ändern , dass sie das Gegenteil sind und sie verdoppeln lassen. Also füge das Double am Ende und auch am Anfang hinzu. Nun wird diese Zeichenfolge zwischen den doppelten Zitaten enthalten sein und der Apostroph wird vollständig gültig sein. Speichern und aktualisieren, und wir sehen jetzt den Apostroph in der Zeichenfolge und wir sehen keine Fehler in der Konsole. Alternativ können wir das verwenden, was man Escaping nennt. Wenn wir diese wieder in die einzelnen Zitate ändern , die einen Fehler verursacht haben, können wir einen umgekehrten Schrägstrich direkt vor der Hand verwenden , der dann dem Zeichen entgeht , das Sie dann anzeigen möchten. Dadurch wird der Browser angewiesen, dies dann als Teil der Zeichenfolge zu rendern. Probieren wir es mal aus. Das funktioniert auch genau so. So zu entkommen funktioniert auch für andere Charaktere wie die doppelten Anführungszeichen. Wenn wir dem so entkommen, sollten wir kein Problem sehen. Sagen wir das, und das ist völlig in Ordnung. Aber was wäre, wenn wir diesen umgekehrten Schrägstrich auch als Teil der Zeichenfolge anzeigen wollten . Dafür müssen wir einen doppelten umgekehrten Schrägstrich hinzufügen , um dem zu entkommen. Der erste wird als Teil des Textes gerendert, aber der zweite umgekehrte Schrägstrich wird verwendet, um diesem doppelten Zitat zu entkommen. Wenn wir viel Text haben und nicht nur ein paar Wörter wie hier, möchten wir ihn manchmal in mehrere Zeilen aufteilen. Um ein Beispiel dafür zu sehen, können wir unser Skript verlassen und einen Beispieltext in unserem Visual Studio-Code generieren . Geben Sie dazu das Wort Lorem, L-O-R-E-M ein, drücken Sie „Enter“, und dann erhalten Sie einen Beispieltext, mit dem wir arbeiten können. Lassen Sie uns das alles kopieren, in der Tat schneiden wir das fehl am Platz und fügen dies zwischen unsere Zitate ein. Wenn wir dies jetzt speichern und dies im Browser auschecken, da wir hier viel Text haben, wird der Browser dies je nach Breite des Browsers automatisch in neue Zeilen umwandeln . jedoch als Entwickler genau kontrollieren wollten, Wenn wir jedoch als Entwickler genau kontrollieren wollten, wann dies in eine neue Zeile wie dieses Wort aufgebrochen ist, möchten wir vielleicht, dass dies in einer neuen Zeile beginnt. Um dies zu tun, können wir einen umgekehrten Schrägstrich gefolgt von dem Buchstaben n so oft verwenden, wie wir möchten. Lassen Sie uns das Wort finden, nach dem wir gesucht haben , das genau hier ist, und wir können den umgekehrten Schrägstrich gefolgt von n verwenden den umgekehrten Schrägstrich gefolgt von . Geben Sie diesem einen Speichern und aktualisieren Sie den Browser. Dies wird dann in eine neue Zeile aufteilen, und Sie können diese innerhalb dieser Zeichenfolge so oft verwenden , wie Sie möchten. Eine Anmerkung, auf die man achten muss, ist, wir keine Zeichenfolge über mehrere Zeilen haben können. Was ich damit meine, ist, diesen umgekehrten Schrägstrich und n zu verwenden, wenn man einfach „Enter“ drücken und dies in eine neue Zeile legen sollte. Wir können das so oft tun, wie wir möchten , genau so hier. Wir können sehen, dass der Texteditor uns vor einem Problem warnt. Für eine Reihe von Texten wie dieser können wir dies nicht in mehrere Zeilen aufteilen und wir können dies im Browser sehen, wenn wir dies aktualisieren, sehen wir ein ungültiges oder unerwartetes Token. Wir haben ein paar verschiedene Möglichkeiten, wie wir es angehen können, um dies zu beheben. Eine der längeren Möglichkeiten, dies zu tun, besteht darin jede unserer Textzeilen in eine eigene Zeichenfolge zu konvertieren . Wir können es so machen und Sie können sehen, dass dies ein ziemlich langer Weg ist . Dann müssten wir auch das Plus-Symbol zwischen jeder Zeile verwenden , um dieses mit der nächsten zu verbinden. Der Einfachheit halber machen wir dies einfach als freie Zeilen, aktualisieren und das alles funktioniert wie zuvor. Oder es gibt eine modernere Möglichkeit, eine sogenannte Vorlagenzeichenfolge zu verwenden. Dies ersetzt die Anführungszeichen durch Backticks. Machen wir dies einfach rückgängig und setzen dies wieder auf den ursprünglichen Fehler zurück. Was wir tun können, anstatt am Anfang und am Ende einzelne Anführungszeichen zu haben , könnten wir diese durch ein sogenanntes Backtick ersetzen. Das Backtick befindet sich auf Ihrer Tastatur und es ist ein Symbol genau hier. In meiner speziellen Tastatur befindet sie sich neben der linken Umschalttaste. Sofort entfernt der Texteditor jetzt die Fehler und wir können dies speichern, und das sollte alles im Browser einwandfrei funktionieren . Sie können sehen, dass Sie auch die Zeilenumbrüche beibehalten, also haben wir kurz nach Lorem ipsum eine Pause, wir haben dann unsere zweite Zeile, die gerade hier ist, und dann lassen Sie jede Zeile direkt darunter erhalten. Diese Vorlagenliterale wurden in ES6 oder ES2015 in JavaScript eingeführt und ermöglichen es uns, mehrzeilige Strings zusammen mit einigen anderen Vorteilen wie dem Einfügen von Variablen zu schreiben zusammen mit einigen anderen Vorteilen , die wir verwenden sieh dir später an. Nach diesem Kurs werden wir einen tieferen Blick auf Strings werfen auch einen tieferen Blick auf Strings werfen und einige der verfügbaren Eigenschaften und Methoden entdecken , die wir verwenden können. 8. Daten mit Variablen speichern: Das ist vorbei für dieses Video, das in den nächsten Ordner geht. Wir werden uns Nummer 4 ansehen, die Daten mit Variablen speichert. Öffnen wir diese Datei und kopieren Sie auch den Pfad für den Browser, fügen Sie diese ein. Wir werden sehen, dass der Titel der Variablen ganz oben steht. Ups. Jetzt haben wir in diesem Kurs Werte festgelegt oder geändert, z. B. diesen Titel gerade hier zu aktualisieren. Auch in JavaScript müssen die meisten anderen Sprachen unsere Daten regelmäßig speichern. JavaScript bietet uns drei Möglichkeiten, dies zu tun. Betrachten wir zunächst die traditionelle Art, Daten in JavaScript zu speichern, was die Variable ist. Wir können eine Variable erstellen, indem wir genau so das Schlüsselwort var verwenden, gefolgt von einem Namen für diese Variable. Nennen wir meinen neuen Text. Dies ist eine Möglichkeit, diese Variable in Zukunft zu referenzieren. Das Hinzufügen eines solchen Namens wird als Deklaration bezeichnet , da wir eine neue Variable deklarieren. Sie können sich eine Variable als Vorratsbehälter vorstellen und diesen Namen, den wir ihr geben, es ist irgendwie wie das Etikett auf der Vorderseite, so dass wir sie in Zukunft leicht finden können. Es ist auch sinnvoll, beim Benennen von Variablen beschreibend zu sein . Es sollte die Daten widerspiegeln, die es enthält. Dieser Name darf auch keine Leerzeichen wie diese enthalten. Es muss auch mit einem Buchstaben, einem Unterstrich oder einem $ -Symbol beginnen . Wenn wir etwas hinzufügen, das nicht erlaubt ist, z. B. einen Schrägstrich, wird normalerweise ein moderner Texteditor wie dieser dies aufgreifen und uns vor diesem Fehler warnen. Wir können dann dieses Gleichheitssymbol verwenden, um einen Wert hinzuzufügen , den Sie innerhalb dieser Variablen speichern möchten, z. B. unsere Textzeichenfolge. Da es sich um eine Zeichenfolge handelt, fügen wir dies in die Zitate ein, sagen wir neuen Text aus der Variablen. Was wir hier getan haben, ist, dass wir dies verwendet haben , um diesen Wert auf der rechten Seite für diesen Variablennamen auf der linken Seite zuzuweisen diesen Wert auf der rechten Seite für . Das Hinzufügen eines Mehrwerts für unsere Variable wie diese wird als Initialisierung bezeichnet. Sie müssen sich nicht an diese Keywords erinnern, aber ich möchte Sie nur darauf hinweisen, dass diese existieren. Dies initialisiert also eine Variable und bevor wir gerade die Variablendeklaration hatten. Um diesen Text zu verwenden, müssen wir nur den Variablennamen übergeben, genau so könnte man sagen, speichern und aktualisieren. Es gibt unseren neuen Text, den wir innerhalb der Variablen gespeichert haben . Nun, was wäre, wenn wir auch diesen Wert ändern wollten , der in dieser Variablen gespeichert ist. Wir können das auch ganz einfach machen. Da unsere Variable bereits erstellt wurde. Was wir diesmal tun müssen, ist, auf den Variablennamen ohne das Schlüsselwort var zuzugreifen . Das Programm weiß bereits, dass dies eine Variable ist , da wir das obige deklariert haben, daher ist das Schlüsselwort var nicht erforderlich. Auch hier können wir dies mit den Gleichen mit einem neuen Wert aktualisieren. Sagen wir, aktualisierter Text. Geben Sie dies speichern und sehen Sie sich dies im Browser an. Es wird jetzt unser aktualisierter Text angezeigt. Die Reihenfolge hier ist also auch wichtig, da der Code von oben nach unten gelesen wird. In der ersten Zeile erstellen wir unsere variable Zeile, bis wir sie aktualisieren. Dann wird der Titel in unseren neuen aktualisierten Text geändert. Wenn wir so etwas tun und das Update so verschieben würden , dass es oben liegt, wo wir unsere Variable deklariert haben. Mal sehen, was passiert, wenn wir speichern und aktualisieren. Wir sehen die aktualisierte Version nicht mehr im Browser. Dies ist oft der Grund, warum wir Variablendeklarationen oben im Skript sehen werden . Es wird also keine Probleme verursachen, wenn wir anfangen, dies später in unserer Datei zu aktualisieren. Variablen können auch andere Datentypen enthalten, nicht nur Strings, und wir werden bald weitere Datentypen entdecken . Aber im Moment gibt es neben diesem var-Schlüsselwort zwei weitere Arten von Variablen , die wir uns ansehen werden. Beide wurden mit ES2015 eingeführt. Das erste davon ist das let-Schlüsselwort. Lassen Sie sich oberflächlich genauso arbeiten wie var. Es kann einen Wert enthalten und wir können diesen Wert auch bei Bedarf aktualisieren. Wenn wir also var ändern, um zu lassen, speichern und aktualisieren. Wir sehen jetzt den aktualisierten Text, genau wie wir es mit dem Schlüsselwort var getan haben. Es gibt immer noch einen Unterschied zwischen dem Schlüsselwort let und var. Das alles läuft auf etwas hinaus, das sogenannte Scope genannt wird. Der Umfang bezieht sich darauf, wie wir auf diese Variablen zugreifen können , und Sie fügen einige Einschränkungen hinzu, wie wir auf die darin gespeicherten Werte zugreifen können . gibt es weitere Informationen Später im Kurs gibt es weitere Informationen zum Umfang, in denen Sie alles ausführlicher erfahren. Aber wir müssen zuerst ein bisschen mehr über JavaScript lernen bisschen mehr über JavaScript , bevor diese wirklich klar werden. Als nächstes haben wir das Schlüsselwort const, das kurz für eine Konstante ist. Sie können sich vorstellen, dass dies einen konstanten Wert hält , der sich nicht ändert. Wenn wir dies speichern und den Browser aktualisieren, sehen wir, dass dies einen Fehler in der Konsole auslöst. Wir sehen die Botschaft der Zuordnung zu einer konstanten Variablen. Wir bekommen das, weil dies genau wie var und let auch einen Wert speichern kann, aber es ist eher ein schreibgeschützter Wert. Der Inhalt im Inneren soll nicht aktualisiert werden, was wir gerade hier machen. Wenn wir diese Zeile genau so entfernen und dann den Browser aktualisieren würden , wird der Fehler jetzt beseitigt und wir sehen immer noch unseren variablen Inhalt. Die Konsolenfehlermeldung zuvor war die Zuweisung zu einer konstanten Variablen. Kurz bevor wir versuchen, dies zu aktualisieren, haben wir gesehen, dass die Nachricht einer konstanten Variablen zugewiesen wurde . Es ist das Assignment-Schlüsselwort hier, welches der Schlüssel ist. Zuweisung ist nur ein ausgefallenes Wort, das wir zu einer Variablen bekommen , übergibt ihr einen Wert wie diesen. Wir werden diese Ära haben, weil wir versuchen, sie mit diesem Wert direkt unten neu zuzuweisen , und dass diese Const jetzt in die JavaScript-Sprache eingeführt wird, ist eine wirklich gute Sache, weil es bedeutet, dass wir können unsere Werte speichern, denen wir wissen, dass wir niemals ändern wollen. Dies kann Fehler oder Fehler in unserem Code stoppen. Wenn jemand versehentlich einen Wert später im Code ändert . Aber es gibt etwas, das für Anfänger verwirrend sein kann und es umgibt, etwas zu erstellen, das als Objekt bezeichnet wird, mit const. Wenn wir diese beiden Codezeilen entfernen, können wir eine neue Konstante namens Person erstellen. Wir werden sehr bald mehr Details zu Objekten haben. Aber im Moment können Sie sich ein Objekt als eine Sammlung von Datenstücken vorstellen . Eine Person kann also mehrere Daten haben , z. B. ein Alter, einen Namen, eine Größe. Diese können alle in diesen geschweiften Klammern aufbewahrt werden. Alle diese Daten werden in mehreren Eigenschaften gespeichert , die als Schlüsselwertpaare bezeichnet werden. Der Schlüssel ist also der Name der Daten, z. B. der Name einer Person. Der Wert ist der tatsächliche Name. Getrennt durch ein Komma können wir einen zweiten Schlüssel namens Likes und dann den Wert eines Lieblingsessens hinzufügen einen zweiten Schlüssel namens Likes . Wir können hier mit so vielen Werten weitermachen , wie wir möchten. Wir können dann auf jede dieser Eigenschaften zugreifen , indem wir zuerst auf den Konstantennamen zugreifen und dann mit dem Punkt eine unserer Eigenschaften wie den Namen oder Likes auswählen . Lassen Sie uns das versuchen, aktualisieren wir sehen den Namen Chris und dann ist Person bei dergleichen eine Möglichkeit, auf die zweite Immobilie der Pizza zuzugreifen. Obwohl dieses Objekt eine Konstante ist, ist es nicht unbedingt unveränderlich, was bedeutet, dass es sich nie ändern wird. Wir können die Immobilie tatsächlich so aktualisieren. Wir können auf die Personenkonstante zugreifen und auf den Schlüssel namens Likes zugreifen. Ich setze das auf alles wie Bananen ein. Lassen Sie uns das speichern und wir haben immer noch die Person bei Punkt, die gerne in den Browser rendert, aktualisiert. Jetzt können wir sehen, dass wir unsere Konstanten mit einem Wert von Bananen aktualisiert haben . Wir könnten auch zusätzliche Eigenschaften hinzufügen. Sobald das schon nicht existiert, können wir Person Punkthaar sagen und diese auf eine Farbe setzen und diese dann im Browser anzeigen. So können wir hier sehen, dass wir die Eigenschaften innerhalb eines Objekts aktualisieren können . Aber was ist, wenn wir versuchen, die Person vollständig in einen anderen Datentyp zu ändern , z. B. eine Zeichenfolge. Lassen Sie uns das einfach ändern, um einen Namen wie Chris zu sein . Aktualisieren Sie das. Wir sehen jetzt dieselbe Fehlermeldung, die wir zuvor hatten, nämlich die Zuordnung zu einer Konstanten. Wie Sie sehen können, kann eine Konstante, die ein Objekt wie dieses hält , immer noch ihre Werte im Inneren mutiert haben. Wir können seinen ursprünglichen Wert einfach nicht einer Zahl oder einer Zeichenfolge zuweisen . Aus diesem Grund ist es oft ratsam, die Verwirrung zu vermeiden, indem man const nur für einfache Werte wie eine Zeichenfolge oder eine Zahl verwendet . Dann wissen wir mit Sicherheit, dass sich dieser Wert niemals ändern wird. Um mit allem zusammenzufassen , was wir in diesem Video gelernt haben, haben wir drei verschiedene Schlüsselwörter namens var, let und const, die es uns alle ermöglichen, eine neue Variable zu deklarieren , die ähnlich wie eine Lagercontainer für unsere Daten. Wenn Sie die Schlüsselwörter var und let verwenden, können wir diesen Namen optional einen Wert zuweisen. Die Werte im Inneren können auch aktualisiert oder mit einem neuen Wert neu zugewiesen werden. Es gibt auch einige Umfangs- und Hosting-Überlegungen , die wir später im Kurs behandeln werden , wenn wir ein bisschen mehr Verständnis haben . Wenn Sie das Schlüsselwort const verwenden, wird dadurch auch eine neue Variable oder einen neuen Speichercontainer erstellt , der Wert kann jedoch nicht neu zugewiesen werden. Als Anfänger kann es auch verwirrend sein, wenn Sie const und ein Objekt verwenden , da Objekteigenschaften aktualisiert werden können oder wir auch neue hinzufügen können. Wir haben auch einige Schlüsselwörter in diesem Video erwähnt. Sie müssen sich momentan nicht an all diese erinnern. Zuallererst hatten wir eine Erklärung. Dies ist, wenn wir eine neue Variable erstellen oder deklarieren , ohne ihr einen Wert zu übergeben. So könnten wir zum Beispiel var name sagen. Wir initialisieren diese Variable dann, wenn wir ihr einen Wert wie Chris übergeben. Zuweisungen. Dies ist, wenn wir einer Variablen, wie dieses Beispiel unten, einen Wert übergeben oder zuweisen, wo wir der Altersvariablen den Wert 37 zuweisen. Diese Variablen werden also etwas sein, das wir oft verwenden. So werden Sie in diesem Kurs viel Übung damit bekommen. Als Nächstes bleiben wir bei Variablen und schauen uns an, wie wir diese mit Strings mischen können. 9. Strings mit Variablen mischen: Wir verstehen jetzt, was eine Zeichenfolge in JavaScript ist, und wir wissen auch, wie man sie in Containern speichert , die als Variablen bezeichnet werden. Aber was wäre, wenn wir diese beiden Dinge kombinieren wollten indem wir eine Variable zu einer Zeichenfolge hinzufügen? Dies ist mit JavaScript durchaus möglich und es gibt verschiedene Möglichkeiten, dies zu tun. Gehen wir zu unseren Dateien, die Nummer 5 ist Strings mit Variablen mischen. Ich öffne das innerhalb des Browsers. Innerhalb dieser Indexseite haben wir unsere Überschrift der Stufe 1 ganz oben mit der ID des Titels. Wir haben dann zwei Konstanten unten, wir haben diesen Namen und auch eine Like-Konstante. Schließlich wählen wir unseren Titel aus und aktualisieren den inneren Text. Was wäre, wenn wir diesen Titel aktualisieren und auch diese beiden Variablen mischen wollten ? dies zu tun, möchten wir vielleicht, dass die Textzeichenfolge mein Name lautet. Angenommen, wir wollten danach auch diese Namensvariable einfügen. Wenn wir dies speichern und aktualisieren, sehen wir, dass mein Name Name ist, also sehen wir den Text des Namens und nicht den inneren Inhalt dieser Variablen. Der Grund dafür ist, dass dies alles in den Zitaten liegt, alles als Teil derselben Textzeichenfolge angesehen wird derselben Textzeichenfolge nicht als Variable gelesen wird. Wir müssen aus dieser Zeichenfolge ausbrechen und den Variablennamen an die Zeichenfolge hinzufügen oder anhängen. Wir machen das genau so, wie wir es uns in einem früheren Video mit dem Plus-Symbol angesehen haben . Was wir tun müssen, ist, den Variablennamen vom Ende zu entfernen, das Plussymbol zu verwenden und dann außerhalb der Zeichenfolge können wir diesen Variablennamen hinzufügen. Wir könnten auch ein Leerzeichen am Ende der Zeichenfolge lassen, also haben wir ein Leerzeichen zwischen der Zeichenfolge und auch der Variablen, dann zum Browser und aktualisieren. Wir können sehen, dass unser Name jetzt mit dem Wert der Variablen aktualisiert wurde . Wir können auch die zweite Variable zu dieser Zeichenfolge hinzufügen , genau wie wir es hier getan haben. Aber dann benutze das Plus-Symbol, öffne die Zeichenfolge an einem Leerzeichen, und wir sagen und ich mag, ich habe dann ganz am Ende ein Leerzeichen und dann das Plus-Symbol, um die Variable von Likes hinzuzufügen. Schauen wir uns das an. Mein Name ist Chris und ich mag Pizza. Das funktioniert alles einwandfrei, wir haben unsere Variablen in eine Zeichenfolge gemischt. Es gibt auch eine andere Möglichkeit, dies zu tun, die in ES 2015 eingeführt wurde. Dies ist die Verwendung der Vorlagenzeichenfolgen. Vorlagenzeichenfolgen sind genau wie das, was wir in einem vorherigen Video verwendet haben, als wir den Text über mehrere Zeilen kombiniert haben . Was ich tun muss, ist, diese Zitate durch die Backticks zu ersetzen . Lassen Sie uns alle diese Zitate entfernen und wir können auch die Plus-Symbole entfernen nur den Text darin lassen. Was wir dann tun müssen, ist all dies in die Backticks zu platzieren . Der zweite Schritt besteht darin, zu markieren , welcher Teil der Zeichenfolge variabel ist. Wir wissen von früher, dass wir, wenn wir dies nur speichern und aktualisieren, den Inhalt dieser beiden Variablen nicht sehen , aber was wir tun müssen, ist ein $ -Symbol und dann den Variablennamen innerhalb der geschweiften Klammern, das gleiche für unsere Likes, $ -Symbol, und wickeln Sie diese in die geschweiften Klammern ein. Jetzt sollte dies als Inhalt unserer beiden Variablen gelesen werden . Diese Vorlagenzeichenfolgen zwischen den Anführungszeichen können auch in ihrer eigenen Variablen gespeichert werden. Wenn wir dies fehl am Platz machen würden, erstellen Sie eine neue Variable, nehmen wir an, dass die Zeichenfolge diesem Wert entspricht , den wir gerade ausgeschnitten haben. Wir könnten dann den Variablennamen der Zeichenfolge übergeben. Dies alles funktioniert genau wie zuvor, aber dieses Mal alles in einer einzigen String-Variable kombiniert. 10. Datentypen: Zahlen: In jeder Programmiersprache haben wir sogenannte Datentypen. Datentypen beziehen sich, wie sie klingen, auf die Art der Daten, mit denen wir es zu tun haben. Bisher haben wir uns hauptsächlich auf den Datentyp der Zeichenfolge konzentriert. Aber es gibt auch andere, JavaScript ist eine lose typisierte oder eine dynamische Sprache, was im Grunde bedeutet, dass es unseren Variablen egal ist, welche Art von Daten sie enthalten, sie können eine Zeichenfolge enthalten oder wie wir werden schauen Sie sich während dieses Videos etwas anderes an, z. B. eine Zahl, und wir können auch den Datentyp einer Variablen ändern wenn wir einen neuen Wert neu zuweisen. Dies ist anders als einige andere Programmiersprachen wie Java, in denen wir angeben müssen, welche Art von Daten unsere Variable zuerst enthalten wird. Innerhalb dieser aktuellen Lektion haben wir die Datentypen, Zahlen, Video, das ist Nummer 6. Stellen Sie sicher, dass Sie dies auch im Browser öffnen. Wenn wir mit einer Sprache wie Java zu tun haben, müssen wir möglicherweise eine Variable wie diese deklarieren. Wir können unserer Variablen einen Namen namens number geben und diesen auf eine Zeichenfolge von fünf setzen. Wenn wir Code genau so schreiben, ist dies Java-Code, dies wird als stark typisierte Sprache bezeichnet, da dieser Datentyp im Voraus deklariert werden muss. Obwohl wir in JavaScript verwenden, es egal welche Art von Daten diese Variable enthält. Im Gegensatz zu Java erklären wir nicht, welche Art von Daten wir enthalten werden, wir sagen einfach, um welche Art von Variable dies sein wird. Wir sagen, lass Zahl ist gleich 5, und dies ist natürlich eine Zeichenfolge, weil sie innerhalb der Zitate umgeben ist . Aber was wäre, wenn wir das tun würden? Nehmen wir an, in der nächsten Zeile weisen wir diesen Wert der Zahl so zu, dass er einer reellen Zahl wie fünf entspricht. So legen wir eine Zahl in JavaScript fest. Wir sind in keinem der Zitate umgeben. Jetzt können wir diese Nummer hier verwenden. Wir können die Nummer jetzt auf den Bildschirm legen. Sagen wir das und sehen, was passiert. Aktualisieren, und jetzt ist der Wert davon fünf. Diese Zahlenvariable hat sich geändert, obwohl wir in einem völlig anderen Datentyp verwenden . Dieser Datentyp von Zahl kann eine ganze Zahl wie diese sein, und wir können diese mit oder ohne Dezimalstellen schreiben . Wir können das ausgeben. Wenn Sie aus einer anderen Programmiersprache kommen , in der es mehrere Zahlentypen wie Double Float oder Integer geben kann es mehrere Zahlentypen wie Double Float oder Integer geben , ist dies hier nicht der Fall. JavaScript-Zahlen werden immer als Gleitkommaformat mit doppelter Genauigkeit gespeichert . Wenn Sie mehr über die technischen Details dahinter erfahren möchten , finden Sie den Link hier auf der Seite. Wenn Sie mit Zahlen arbeiten, kann JavaScript den Wert auch berechnen und diesen auch in einer Variablen speichern. Wenn wir dieser Zahl beispielsweise den Wert von 5 plus 10 zuweisen würden , sollten Sie jetzt den Wert 15 ausgeben. Wir werden die Berechnung zuerst durchführen und diese dann der Variablen zuweisen. Aber was denkst du wird passieren, wenn wir eine Zahl und eine Zeichenfolge zusammenfügen würden ? Nun, lasst es uns herausfinden. Wir sagen lass Nummer 1 gleich eine Zeichenfolge sein, und lassen Sie dann Nummer 2 den Wert 15 zuweisen. Anstatt nun den Wert der Zahl auszugeben, wir den Wert von Nummer 1 fügen ihn der Variablen von Nummer 2 hinzu, über den Browser. Wir sehen unsere beiden Variablen, wir haben die Zeichenfolge von 5 und dann die Zahl von 15. Ist das eine Zahl oder ist das eine Zeichenfolge? Nun, wenn ich eine Zahl und eine Zeichenfolge entdecke, ist das Ergebnis in JavaScript eine Zeichenfolge. Obwohl wir hier eine Zahl haben, wird diese als vollständige Zeichenfolge eingestuft. Wir können dies beweisen, indem wir den Operator typeof verwenden, diese fehl am Platz machen und typeof verwenden. Fügen Sie diese dann in die Klammern wieder ein. Wir werden sehen, welche Art von Daten aus diesen Klammern zurückgegeben wird . Wir können dies mit jedem anderen Datentyp 2 verwenden und es wird uns mitteilen, mit welcher Art von Daten wir es zu tun haben. Speichern und aktualisieren Sie, und wir sehen, dass dies ein Datentyp von String ist. Wenn wir jedoch nur Nummer 2 ausgeben würden, ist das Ergebnis immer noch eine Zahl. Dieser Typ ist ein sehr nützliches Tool, wenn wir uns nicht sicher sind , mit welcher Art von Daten wir arbeiten. Denken Sie auch daran, selbst wenn wir eine Zahl in Anführungszeichen wie diesem gespeichert haben , die eine Nummer 5 hat, diese auch als String 2 eingestuft wird. Alles in Anführungszeichen ist also eine Zeichenfolge, jede Zahl, die nicht in Anführungszeichen steht, wird als Zahl eingestuft. Sowohl der Datentyp der Zeichenfolge als auch die Zahl gelten als ein sogenannter JavaScript-Primitivtyp. Primitive sind Datentypen, die nicht als Objekt eingestuft werden . Sie haben auch keine Methoden, bei denen es sich um Aktionen handelt , die für ein Objekt ausgeführt werden können. Aber machen Sie sich noch keine Sorgen um Objekte und Methoden, wir werden während dieses Kurses viel mehr Details darüber haben . Die Hauptsache ist vorerst , dass Primitive die einfachsten Datentypen im Vergleich sind , und dazu gehören Dinge wie die Zeichenfolge und auch Zahlen. Genau als Zusammenfassung dessen, was wir in diesem Video angeschaut haben, haben wir Datentypen die Art von Daten sind, mit denen wir gearbeitet haben, und derzeit haben wir uns den Datentyp der Zeichenfolge und auch der Zahl angesehen . Wir haben auch stark den Typ erwähnt, bei dem es sich um einen Datentyp handelt, den wir beim Erstellen einer Variablen im Voraus deklarieren müssen . In anderen Sprachen wie Java müssten wir erklären, dass eine Variable eine bestimmte Art von Daten wie eine Zeichenfolge oder eine Zahl ist eine bestimmte Art von Daten wie , wenn wir sie erstellen. JavaScript hingegen ist lose typisiert, so dass es den Variablen egal welche Art von Daten sie enthalten, und wir können diese Daten auch mit einem anderen Datentyp neu zuweisen . Zum Beispiel könnten wir eine Variable erstellen, die eine Zeichenfolge ist, und sie dann später mit einem Datentyp von Zahl ändern oder neu zuweisen . Primitive, das haben wir uns gerade vorher angeschaut , nämlich ein Datentyp, der nicht als Objekt eingestuft wird. Primitive sind im Allgemeinen ein einfacherer Datentyp, und wir werden den anderen Objekttyp in einigen späteren Videos entdecken . Dies ist eine grundlegende Einführung in JavaScript-Nummern, sie sind ein wirklich wichtiger und grundlegender Bestandteil von JavaScript. 11. Datentypen: Boolean, Null und undefiniert: Im vorherigen Video haben wir etwas primitive JavaScript-Datumstypen behandelt , die die Nummer und auch die Zeichenfolge enthalten. Wir werden uns jetzt einige primitivere Datentypen ansehen in JavaScript verfügbar sind. Dies wird ein boolescher Wert im Nullwert und auch undefiniert sein. Stellen Sie sicher, dass Sie in den aktuellen Unterrichtsordner gehen , der Nummer 7 ist, und die Datentypen Boolean, Null und undefined. Ich habe das schon geöffnet und öffne auch im Browser. Wenn wir mit Codes wie diesem herumspielen, steht Ihnen etwas zum Testen zur Verfügung , das als Konsolenprotokoll bezeichnet wird. Zwischen den Script-Tags müssen Sie nur console.log eingeben und dann die Klammern öffnen, genau so. Wir haben früher kurz in der Konsole gearbeitet und dieses Protokoll ermöglicht es uns , einen bestimmten Wert an die Konsole im Browser auszugeben . Zum Beispiel können wir sagen, dass es 10 größer als fünf ist Wenn wir dies speichern und dann mit der rechten Maustaste klicken und prüfen um die Entwicklertools zu öffnen, klicken Sie auf die Registerkarte Konsole, aktualisieren Sie es. Dies gibt den Wert „true“ zurück. Das Konsolenprotokoll gibt jeden Wert innerhalb dieses Konsolenabbilds aus, großartige Tests zu testen und schnell das Ergebnis oder den Wert herauszufinden. Wir haben auch einen neuen Operator, der weniger ist als, speichern Sie dies. Dies wäre das Gegenteil, was falsch ist. Diese True- und Falsch-Werte sind der Datumstyp von Boolean. Mit Boolean ist ein True und ein Falsch die einzigen zwei Ergebnisse, daher ist es wirklich nützlich, um solche Dinge zu überprüfen. Zum Beispiel haben wir im Speedy Chef-Projekt , das Sie gerade haben, eine Variable namens GameStarted. Bevor das Spiel gestartet wird, wird dieser Boolesche Wert auf false gesetzt und wenn wir das Spiel starten, wir diese Variable neu zugewiesen, um wahr zu sein. Dies ermöglicht es uns zu jedem Zeitpunkt im Spiel zu überprüfen, ob das Spiel gestartet wurde und bestimmte Funktionen zur Verfügung haben. Zum Beispiel hätten wir so etwas, wir könnten eine Variable einrichten. Ich gebe uns alle Namen wie GameStarted, dies ist gleich initiiert, um falsch zu sein , und dann können wir innerhalb unseres Konsolenprotokolls zuerst den Datentyp dieser Variablen mit dem Typ von eigentum. Aktualisieren Sie und wir sehen hier drin Boolean. Wie können wir das in einer realen Situation nutzen? Nun, Boolesche Werte werden oft zusammen mit einer if-Anweisung verwendet. Eine if-Anweisung sieht so aus, wir haben das if-Schlüsselwort, öffnen die Klammern genau so und öffnen dann einige geschweifte Klammern. Jetzt werden Sie sehen, dass dieses Muster in JavaScript viel folgt. Wir haben bestimmte Keywords, wir haben einige runde Klammern und dann haben wir einige geschweifte Klammern, in denen wir unseren Code ausführen möchten, also werden Sie dies sehr sehen während wir den Kurs durchlaufen. Aber insbesondere dafür, wenn sagen, was wir tun werden, werden wir prüfen, ob etwas wahr oder falsch ist. In unserem Fall möchten wir prüfen, ob GameStarted gleich true oder false ist. Was wir tun, wir geben das hier drin weiter und wenn das stimmt, wird der Code hier dann laufen. In meinem Fall füge ich einfach ein einfaches Konsolenprotokoll mit dem Text von GameStarted ein. Wenn wir dies jetzt speichern, aktualisieren Sie den Browser, wir sehen nichts in der Konsole, da dies nicht stimmt. Lassen Sie uns dies jedoch umdrehen, um wahr zu sein, aktualisieren Sie es und unser Konsolenprotokoll ist jetzt ausgeführt. Natürlich werden wir bald detaillierter behandeln, aber so können sie mit einem einfachen booleschen Wert arbeiten . Aber wenn wir auch eine zweite Variable haben, naja, playerName. Sagen Sie, lass playerName gleich Chris ist und dann ändern wir unsere if-Anweisung, um diesen Spielernamen zu überprüfen. Wir haben einen PlayerName gesetzt, wir loggen uns bei der Konsole an. Die Nachricht des Benutzernamens ist festgelegt. Gehen wir einfach einen Schritt zurück und überlegen, was wir hier machen. Wir checken ein. Zunächst einmal checken wir das letzte Mal ein, ob das GameStarted gleich true ist. Dies war ein einfacher boolescher Wert, aber für diesen playerName ist dies jedoch gleich einer Zeichenfolge. Glaubst du, dass dies zu wahr oder falsch führen wird? Nun, speichern wir das und überprüfen Sie dies im Browser und wir sehen, dass dies in der Konsole läuft. Nun, der Grund, warum wir dies in der Konsole sehen, liegt darin , dass im Allgemeinen eine if-Anweisung oder ein boolescher Wert zu true führt, wenn ein Wert existiert. Hier haben wir einen Wert von Chris, also existiert das definitiv. Mal sehen, was passiert, wenn wir diesen Namen entfernen und ihn als leere Zeichenfolge belassen, speichern und aktualisieren. Dies muss zu „Falsch“ führen. Eine Sache, die hier zu beachten ist, dass ein leerer Wert wie unsere leere Zeichenfolge, genau wie diese, nicht damit verwechselt werden sollte, überhaupt keinen Wert zu haben. Eine Variable ohne Wert ist ein anderer primitiver Datentyp, der als undefiniert bezeichnet wird. Wenn wir dieser Variablen überhaupt keinen Wert zugewiesen haben und wenn wir diese Zeichenfolge genau so entfernen würden , führen wir stattdessen ein Konsolenprotokoll für den playerName aus und wir werden diese if-Anweisungen auch entfernen, also konnten wir dieses Konsolenprotokoll nicht zum ersten Mal ausführen, speichern und im Browser sehen wir diesen Wert von undefined. Wie bereits erwähnt, ist dies ein weiterer primitiver Typ wie String, number und Boolean, und dieses Undefined wird angezeigt, da wir eine Variable haben, der kein Wert zugewiesen ist. Das war wie früher, als wir uns 0 Dollar im Browser angeschaut haben . Wenn wir anfänglich 0$ eingeben keine Elemente auf der Seite ausgewählt haben, erhalten wir den Wert von undefined zurück. Der endgültige Datentyp, den wir uns in diesem Video ansehen ist ebenfalls primitiv und dies ist der Wert von null. Null zeigt auch an, dass auch etwas fehlt. Wenn wir unsere Variable von playerName auf null setzen playerName auf und dann den Browser wie erwartet aktualisieren, erhalten wir diesen Wert von null zurück. Wir haben uns Objekte in einem früheren Video kurz angeschaut, und null bezieht sich auf diese Objekte. Es zeigt an, dass dieses Objekt leer ist und häufig bei der Arbeit mit Datenbanken oder Back-End-Diensten ein häufiges Beispiel dafür ist, ein häufiges Beispiel dafür ist, einige Benutzerdaten angefordert werden. Wenn der Benutzer angemeldet ist, erhalten wir ein Objekt zurück, das alle diese Benutzerinformationen enthält . Wenn sie jedoch nicht angemeldet sind, sehen wir oft null da das Benutzerobjekt leer ist. Wir haben uns in diesem Video drei verschiedene Datentypen angeschaut, wir haben uns zunächst Boolean , was ein einfacher wahrer oder falscher Wert ist. Dieser primitive Datentyp ist sehr nützlich und oft in Kombination mit einer if-Anweisung gesehen. Wir haben undefined, wieder einen primitiven Datentyp, der darauf hinweist, dass etwas fehlt. In unserem Beispiel haben wir einen Blick auf eine Variable geschaut, der ihr ein Nullwert zugewiesen ist. Schließlich haben wir auch null entdeckt, was wiederum ein primitiver Datentyp ist und spezifischer als undefiniert ist und sich auf ein Objekt bezieht , bei dem keine Werte vorhanden sind. Unten sehen Sie, dass undefined ein allgemeineres Ergebnis ist und null spezifischer für ein Objekt ist. 12. Kommentare, Semikolon und ASI: Wenn Sie zuvor in JavaScript gearbeitet haben oder online nach Codebeispielen suchen, Sie möglicherweise fest, dass Semikolons manchmal verwendet werden und manchmal nicht. JavaScript-Programme bestehen aus mehreren Anweisungen, die von oben nach unten in der Datei gelesen werden. Anweisung ist im Grunde eine Anweisung, z. B. das Erstellen einer variablen Deklaration des Codes, der innerhalb einer if-Anweisung ausgeführt werden soll. Obwohl Semikolons in JavaScript-Programmen erforderlich sind, , die Semikolons, wenn wir sie nicht manuell schreiben möchten der JavaScript-Parser sie automatisch in Fotos hinzu, wo sie benötigt werden , die Semikolons, wenn wir sie werden am Ende jeder Anweisung hinzugefügt, und der Prozess wird als automatische Semikolon-Einfügung bezeichnet. Das heißt nicht, dass wir einfach vergessen können , sie ganz zu benutzen. Es gibt Fälle, in denen wir sie immer noch manuell hinzufügen müssen. Fügen wir zum Beispiel einige Variablen und schauen uns die Ergebnisse an. Sie werden feststellen, dass ich in Video Nummer 80 bin , nämlich Kommentare, Semikolons und ASI, und diese auch im Browser geöffnet habe. Gehe zum Skriptbereich. Was wir tun werden, ist zwei Konstanten zu erstellen. Die Konstanten spielen im Moment keine Rolle. Ich füge einfach einen Namen hinzu, dann eine zweite Konstante, die in JavaScript erlernt werden kann. Dies ist ein boolescher Wert von true. Dann haben wir innerhalb des Konsolenprotokolls in der Vergangenheit einzelne Variablen ausgegeben. Wir können aber auch ein Komma hinzufügen und den Wert dieser beiden Variablen ausgeben. Speichern Sie die Datei und gehen Sie zur Konsole. Aktualisieren Sie und wir sehen unsere beiden variablen Werte. Nichts Unerwartetes hier, wir bekommen wahrscheinlich das, was wir erwartet hatten, nämlich unsere beiden Variablen. Wir melden sie an der Konsole an. Aber was ist, wenn wir diese Variablen in derselben Zeile hinzufügen ? Versuchen wir es mal. Platzieren Sie diese in derselben Zeile und stellen Sie sicher, dass alle Semikolons vom Ende jeder Anweisung entfernt werden . Zunächst können wir sehen, dass der Texteditor hier ein Problem hervorgehoben hat, sobald Sie dies tun. Wenn wir dies speichern und den Browser aktualisieren würden, in der Konsole ein Syntaxfehler angezeigt. Wir haben ein unerwartetes Token von const, da der JavaScript-Parser nicht erwartet, dass er hier zu dieser Phase kommt und dann eine neue const-Deklaration sieht. Wenn Sie mehrere Anweisungen in derselben Zeile wie dieser haben , müssen wir erklären, dass es sich um zwei separate Anweisungen handelt , indem wir diese durch ein Semikolon trennen. Platzieren Sie das Semikolon dazwischen. Jetzt hebt der Texteditor keine Probleme hervor. Wir können das ausprobieren. Speichern und aktualisieren. Das funktioniert jetzt alles gut. Sie können auch sehen, dass mein Texteditor diese automatisch in separate Zeilen platziert hat , da es sich um zwei separate Anweisungen handelt. Zusammen mit dem Semikolon beginnen einige andere Dinge, wenn wir eine neue Zeile mit Klammern beginnen oder oft als Klammern bezeichnet werden. Schauen wir uns ein Beispiel kurz nach diesen beiden Konstanten an. Erstellen Sie eine neue Variable, würden wir die Punktzahl aufrufen. Man würde Zufallszahlen wie 97,34, eine Schadenskonstante und wieder eine Zufallszahl, 10,42, sagen. Genau als Randnotiz habe ich das als Let erstellt. Da eine Punktzahl generell aktualisiert werden kann, können wir das Ergebnis der Punktzahl mit dem verursachten Schaden ausgeben . Wenn wir dies jetzt speichern und aktualisieren, ist dies der richtige Wert innerhalb der Konsole. Wir wissen, dass es eine Berechnung innerhalb dieser Klammern durchführen kann , wie wir gerade im Konsolenprotokoll gesehen haben. Aber was wäre, wenn wir dieses Konsolenprotokoll wegnehmen und etwas anderes mit dieser Berechnung machen würden? Anstatt zum Beispiel 86,92 zu erzielen, was wäre, wenn wir dies stattdessen mit 86 oder 87 runden wollten? Nun, um dies zu tun, hat JavaScript eine integrierte Methode, die wir verwenden können TopRevision. Wir können dies am Ende mit dem Punkt ändern, Kleinbuchstaben in, und dies ist Kamelschreibung, also beginnt die Genauigkeit mit einem P, um dies beim Analysieren des Längenwerts zwei zu verwenden , um ihn zwei Ziffern lang zu machen. Sehen wir uns nun an, was passieren würde, wenn wir vergessen würden , irgendwelche Semikolons einzufügen. Jetzt fügt Visual Studio-Code diese bei Bedarf automatisch in die folgenden ein. Aber wenn wir diese einfach so auslassen und auf „Speichern“ klicken würden, würde sofort sehen, was passieren würde, wenn die JavaScript-Engine diesen Code durchliest. Wir können sehen, dass diese Zeile direkt nach der Anweisung gerade hier eingefügt wurde , da wir keine Semikolons zum Trennen haben. Speichern wir das und aktualisieren wir es. Wir sehen einen Fehler, wir können vor der Initialisierung nicht auf Schäden zugreifen , und das liegt daran, dass diese Zeile gerade hier mit diesen Klammern beginnt. Das bedeutet vielleicht nicht viel wenn Sie völlig neu in JavaScript sind. Aber wenn Sie in der Vergangenheit ein bisschen JavaScript gemacht haben , wir auf diese Weise deklarieren wir auf diese Weise eine bestimmte Art von Funktion. Anstatt diesen Codeabschnitt und diesen Codeabschnitt als zwei Zeilen zu interpretieren , liest er tatsächlich von links nach rechts und setzt dies als eine vollständige Codezeile fort. Um dies zu beheben, müssen wir diese, wie Sie vielleicht erwarten, durch ein Semikolon trennen. Wenn wir dann aktualisieren, wird der Fehler jetzt beseitigt, und in der Konsole ist alles klar. Wir können die Ergebnisse dieser Berechnung auch direkt sehen , indem wir diese Codezeile ausschneiden. Erstellen Sie ein Konsolenprotokoll und fügen Sie es wieder ein. Speichern Sie dies und aktualisieren Sie den Browser und unser Wert wurde nun auf zwei Dezimalstellen gerundet. Es gibt auch mathematische Funktionen, die wir uns später ansehen werden, die diese Werte abrunden und auch abrunden können . Um es zusammenzufassen, ist die Verwendung von Semikolons in JavaScript optional. Es liegt ganz an Ihnen, ob Sie sie verwenden oder sich darauf verlassen möchten, dass sie automatisch eingefügt werden. Beachten Sie jedoch, dass es einige Fälle gibt , in denen wir eine neue Codezeile mit den Klammern beginnen , in denen wir sicherstellen müssen , dass wir diese manuell einfügen, damit dies keine Fehler verursacht. Um dieses Video abzurunden, werfen wir einen kurzen Blick auf die Verwendung von Kommentaren. Kommentare sind einfach eine Möglichkeit für uns, Notizen in unserem Code zu machen , der nicht als JavaScript-Code gelesen wird. Wir können damit auch unseren Code auskommentieren. Dies bedeutet, dass eine bestimmte Codezeile immer noch in unserem Programm vorhanden ist, aber nicht gelesen wird, wenn das Skript ausgeführt wird. Um einen Kommentar oder eine Notiz einzufügen, beginnen wir in JavaScript mit den beiden Schrägstrichen. Dann könnten wir eine Notiz eingeben, wie, muss Semikolon in obigen Anweisungen haben. Wenn wir dies speichern und den Browser aktualisieren, sehen wir keinen Verweis auf den Kommentar hier. Aber was wäre, wenn wir einen längeren Kommentar hätten , der sich auf mehrere Zeilen ausbreitet? Zum Beispiel, wenn Sie gerade hier einen Kommentar hatten und dann sagen, steuern Sie die Länge der Zahl mit TopRecision. Nun, wie die meiste Zeit wird uns der Texteditor einen Hinweis darauf geben , wo wir etwas richtig oder falsch machen. Sofort ändert sich diese Farbe und wir haben diese rote Unterstreichung unten. Wir können sehen, dass dies nicht so ist erwartet wird, dass es geschrieben wird. Dafür können wir sogar jede neue Codezeile mit den doppelten Schrägstrichen beginnen , oder stattdessen könnten wir dies in einen mehrzeiligen Kommentar umwandeln , der ein Schrägstrich und dann einen Stern ist. Wir können dann den Kommentar in der zweiten Zeile entfernen und dann zum Ende unseres Kommentars gehen, und wir können dies mit dem Gegenteil beenden, das ein Stern und ein Schrägstrich ist . Wie bereits erwähnt, können wir auch Codezeilen auskommentieren. Wenn Sie einen bestimmten Code als Referenz belassen möchten, oder wenn wir ihn später wieder einsetzen möchten oder wann er fällig ist, ist genau derselbe. Wenn wir beispielsweise diese Konstante von Chris entfernen wollten , fügen wir einfach die beiden vorderen Schrägstriche hinzu, diese Codezeile wird dann grau und ist nicht mehr verfügbar für den Zugriff innerhalb von unser Programm. 13. Operatoren: Zúordnung und Vergleich: Operatoren sind etwas, das wir ständig in JavaScript verwenden . Tatsächlich haben wir einige von ihnen bereits während dieses Kurses benutzt . Sie werden feststellen, dass ich für dieses Video bereits in der richtigen Datei bin , nämlich Lektion Nummer 9, Operatoren: Zuordnung und Vergleich. Öffnen Sie dies auch im Browser. Sie nach unten zu unserem Skriptbereich scrollen, haben wir bereits einige einfache Variablen eingerichtet. Sie werden feststellen, dass die gemeinsame Sache zwischen allen vier dieser Variablen ist, dass sie alle den Gleichheitsoperator verwenden. Dies ist der Zuweisungsoperator, da wir den Wert rechts dem Variablennamen auf der linken Seite zuweisen den Wert rechts dem . Aber es gibt auch andere Zuweisungsoperatoren, die Sie hier aus diesem Kommentar sehen können. Wir haben uns das gleich angesehen. Gehen wir nun zu diesem Plusgleich-Symbol über. Nehmen wir an, wir wollten den Wert von Zahl 1 und auch den Wert von Zahl 2 addieren 1 und auch den Wert von Zahl 2 und dann den neu zurückgegebenen Wert speichern. Nun, wir könnten es so machen. Wir nennen das die neue Nummer. Stellen Sie dies auf den Wert von Nummer 1 plus Zahl 2 ein. Wenn ich ein bisschen weiter nach unten scrolle, haben wir diese getElementById, die bereits eingerichtet ist, was nur diese Stufe 1 ist, die oben nach oben geht. Was wir hier tun werden, ist, dass ich den Wert einer neuen Zahl angeben werde. Fügen Sie dies hier hinzu, geben Sie ihm ein „Speichern“ und jetzt können wir den Browser „aktualisieren“. Wir sehen diesen neu zurückgegebenen Wert von 20, der die 15 und die fünf addierten. Es ist keine Überraschung mit diesem. JavaScript bietet uns aber auch einige kürzere Möglichkeiten, dies zu tun, anstatt die Nummer 1 der Variablen Nummer 2 zusammen zu addieren und diese dann einer Variablen zuzuweisen. Wir können es stattdessen so machen. Wir können unseren Kommentar in dieser Zeile mit den beiden Schrägstrichen entfernen . Wenn Sie Visual Studio-Code auf einem Mac verwenden, können Sie auch den Befehl und den Schrägstrich verwenden. Dies schaltet dies automatisch um. Wenn Sie Windows verwenden, ist dies die Kontrolle mit dem Schrägstrich. Dies wird genau das Gleiche tun. Stattdessen eine kurze Option. Wenn Sie die Variable Nummer 1 ändern oder aktualisieren möchten , können wir den Operator Plus Equals verwenden und dann Nummer 2 übergeben. Was dies tun wird, fügt beide Zahlen zusammen und weist der Variablen auf der linken Seite einen neuen Wert zu. Beide der gleichen Zeilen werden immer noch das gleiche Ergebnis von 20 haben. Der Unterschied, der oberste ist wird in einer neuen Variablen gespeichert, und der untere aktualisiert diese vorhandene. Wir können dies überprüfen, indem wir dies auf die Nummer eins aktualisieren. „Speichern“ und „Aktualisieren“. Wir sehen immer noch den gleichen Wert von 20. Auch oben mit unseren Variablen haben wir diesen Vornamen und den Nachnamen. Wenn wir den vollständigen Namen auf dem Bildschirm anzeigen möchten, können wir uns so etwas einfallen lassen. Zunächst könnten wir den Vornamen festlegen und dann Command oder Control C zum Kopieren und dann Command oder Control V zum Einfügen verwenden Command oder Control C zum Kopieren . Wir können dann auch den Wert des Nachnamens ausgeben. „Speichern“ dies und über den Browser sehen wir nur den Wert unseres Nachnamens. Dieser Ansatz funktioniert nicht, da der Nachname der letzte bekannte Code ist und daher den Vornamen außer Kraft setzt. Stattdessen können wir den Plusgleich-Operator nutzen , um dies zu unseren Elementen hinzuzufügen , anstatt das vorhandene zu ersetzen. Wenn wir dies „speichern“ und „Aktualisieren“, sehen wir den Wert unserer beiden Variablen. Wir könnten auch ein leeres Leerzeichen zwischen jedem dieser Wörter hinzufügen , indem wir einige der Techniken verwenden , die wir in der Vergangenheit verwendet haben, eine leere Zeichenfolge mit einem Leerzeichen übergeben. Dann der Plus-Operator, um dies kurz vor unserem Nachnamen hinzuzufügen . „Speichern“ diese Datei. Jetzt haben wir ein Leerzeichen zwischen unseren beiden Variablennamen. Dies fügt Werte hinzu und weist dann den neuen Wert neu zu. Aber wir können auch mit Subtraktion das Gegenteil tun. Wir können sehen, dass es gerade hier oben ist. Das funktioniert genauso, aber wir verwenden eher das negative Symbol als das Plus. Wir können dies mit unserem Zahlenbeispiel von unten verwenden , indem wir mit einer Subtraktion das Gegenteil tun. Lassen Sie uns diese Sekunde entfernen, getElementById. Ersetzen Sie den Vornamen durch den Wert Nummer 1. „Speichern“ und „Aktualisieren“, und wir haben jetzt den neuen Wert von 10. Um es kurz zu fassen, was wir hier gemacht haben, ist, dass wir die Nummer 1 genommen haben , die 15 ist. Wir haben dann den Wert von fünf weggenommen, um uns 10 zu geben, und der neue Wert von 10 wurde der Nummer 1 zugewiesen. Wir haben auch genau das Gleiche multipliziert. Wir können dies ändern, „Refresh“, und wir haben den Wert von 75. Wir können auch dividieren verwenden, was der Schrägstrich ist. Dies ist 15 geteilt durch 5, was Nummer 1 neu zuweist, um 3 zu sein. Interessant ist das letzte, das wir hier sehen können, nämlich das Prozentsymbol. Dieses Prozentsymbol ist die restlichen Zuweisungen nach der Division. Was das hier macht, haben wir unsere Nummer 1 und unsere Nummer 2, was auf 15 geteilt durch 5 zurückzuführen ist. Fünf geht dreimal in 15 und daher gibt es keinen Rest. Wenn wir dies speichern würden, sollte es einen Restwert von Null geben. Aber was ist, wenn wir eine dieser Zahlen ändern? Sagen wir vier. Vier geht dreimal in 15, der Rest von drei. Eine andere Art von Operator, die wir haben, ist der Vergleich. Derzeit wissen wir, wann wir Variablen wie diese Anleihen setzen , wann wir Variablen wie diese Anleihen Wenn wir eine einzelne Gleiche verwenden, weisen wir den Wert auf der rechten Seite dem Wert auf der linken Seite zu. Hier war Nummer 1 ursprünglich 15, und wenn wir dies nun auf Nummer 2 setzen, sollte es nun der Wert von vier sein. Aber manchmal kann das für Anfänger etwas seltsam aussehen . Denn wenn wir dies als Anfänger lesen würden, könnte dies so aussehen, als würden wir prüfen, ob Nummer 1 gleich Nummer 2 ist. Wie wir wissen, ist dies nicht der Fall. Dies wird zuweisen, dass Nummer 2 gleich Nummer 1 ist. Aber wenn wir vergleichen wollten, ob diese beiden Werte gleich sind, tun wir dies mit dem Double Equals. Wir werden dies innerhalb unseres Wertes installieren , sagen wir mal Ergebnisse. Geben Sie dies dann an den Browser „Speichern“ und „Aktualisieren“ aus. Wir sehen, dass der Wert ein boolescher Wert von falsch ist. Wir wissen, dass dies falsch ist, weil Nummer 1 gleich 15 und Zahl 2 gleich 4 ist. Wir können auch genau das Gegenteil tun, nämlich hier ein Ausrufezeichen hinzuzufügen. Dies wird prüfen, ob die Werte nicht gleich sind. Sie werden dies oft mit JavaScript finden Wenn wir das Ausrufezeichen verwenden, wird dies das Gegenteil des ursprünglichen Falls bewirken. „Speichern“ dies, „Aktualisieren“. Das Gegenteil ist natürlich der Fall. Etwas, auf das man achten muss, ist, wenn wir zwei verschiedene Datentypen vergleichen. Zum Beispiel, wenn beide fünf waren, aber einer dieser Fünfer innerhalb der Zitate umgeben war , um dies in eine Zeichenfolge zu verwandeln. In diesem Beispiel spielt es keine Rolle, ob wir die einzelnen oder doppelten Zitate verwenden . Es ändert sich wieder auf die Gleichen. Mal sehen, was das Ergebnis im Browser ist. Wenn wir dies „aktualisieren“, sehen wir, dass dies ein Wert von true ist. Obwohl wir eine Zeichenfolge von fünf und eine Zahl von fünf haben , überprüft das Double Equals nur die Werte und nicht die Datentypen. Zahl 1 und Nummer 2 gelten als gleich , obwohl eins eine Zeichenfolge und eins eine Zahl ist. Wenn wir jedoch auch den Wert des Datentyps überprüfen wollten , gibt es eine Möglichkeit, dies mit dem Triple Equals zu tun. Das Dreifache ist gleich, bedeutet strenge Gleichheit. „Speichern“ dies, „Aktualisieren“. Da sie nun verschiedene Datentypen haben, dies jetzt einen falschen Wert zurück. Wenn wir die strenge Gleichheit genau so verwenden, können wir das Ausrufezeichen auch wie zuvor verwenden, um genau das Gegenteil zurückzugeben. Ändern Sie dies in ein Ausrufezeichen. Wenn wir nun den Browser „aktualisieren“, ist dies der entgegengesetzte Wert von true. Ein solcher Vergleich wird oft mit if-Aussagen kombiniert, die wir später wieder behandeln werden. Einige andere Vergleichsoperatoren enthalten jedoch die weniger als und die Größeren als Symbole, die die Pfeile nach links und rechts sind. Wir haben uns diese in einem früheren Video kurz angeschaut. Alles, was wir tun müssen, ist, dass wir unsere beiden Werte so ändern können , dass sie unterschiedlich sind. Prüfen wir zuerst, ob Nummer 1 größer als Nummer 2 ist. Wir wissen, dass dies stimmt, also erwarten wir, dies im Browser angezeigt wird. Das Gegenteil ist das Kleiner als Symbol, das natürlich den Wert false zurückgibt. Das letzte, was wir uns in diesem Video ansehen möchten , ist, dass wir diese weniger als und größer als Symbole mit den Gleichen kombinieren können diese weniger als und größer als Symbole mit den Gleichen kombinieren . Wir können prüfen, ob Nummer 1 kleiner oder gleich Nummer 2 ist. Dieser wird falsch sein. Aber wir können diese Variablen nicht ändern, um dieselben zu sein. Diese sind beide gleich. Dies sollte ein Wert von true sein. Wir haben auch Zugriff auf die größere oder gleichwertige Version. Betreiber wie diese sind nützlich für Dinge wie Spiele, bei denen wir überprüfen können, ob die Gesundheit eines Spielers null oder weniger ist, was dann das Spiel beendet. Als Nächstes bleiben wir beim Thema Operatoren, aber dieses Mal werfen wir einen Blick auf logische und arithmetische. 14. Operatoren: Logisch und arithmetisch: Willkommen zurück. Neben Zuweisungen und den Vergleichsoperatoren gibt es auch logische und arithmetische Operatoren, die wir in JavaScript nutzen können. Wie immer sind wir in den Ordner dieser Lektion gegangen , der Nummer 10 ist, und öffnen diesen auch innerhalb des Browsers. Genau wie das vorherige Video haben wir einige Kommentare, die eine Liste aller verfügbaren Operatoren enthalten. Der erste Satz sind die arithmetischen Operatoren. Wir werden uns kurz danach auf die logischen einlassen. Bei den arithmetischen Operatoren sind viele davon nur gesunder Menschenverstand, wie die, Addition und die Subtraktion. Viele davon sind auch dem vorherigen Video sehr ähnlich, da es einfach nicht mit dem Equals-Operator kombiniert wird. Dies ist zum Beispiel eines, das wir vorher nachgeschlagen haben. Dieses Plus ist gleich, summiert dann beide Zahlen und weist dann den neuen Wert als Nummer 1 neu zu. Wir wissen, dass dies 15 und auch fünf sind. Diese Ergebnisse von Nummer 1 wären dann gleich 20. Wenn wir dies jedoch entfernen würden, ist gleich und haben nur das Plus-Symbol für sich allein, da Sie vielleicht erwarten, dass dies einfach beide Werte zusammenfügt, was bedeutet, dass wir dies direkt in die -Konsole, oder wir könnten dies auch innerhalb einer Variablen speichern , um sie an einer beliebigen Stelle innerhalb unseres Codes zu verwenden. Direkt unter [unhörbar] dieser Codezeile, in der wir diesen Seitentitel abrufen. Dann können wir festlegen, dass der innere Text unserem Ergebnis entspricht. Probieren wir das im Browser aus. Lade das neu. Wir erhalten den Wert von 20 , weil wir sowohl die Nummer 1 als auch die Nummer 2 addiert haben. Dies funktioniert, um es nicht nur hinzuzufügen, um die Variablen wie diese zu erhalten. Lassen Sie uns zum Beispiel ein Konsolenprotokoll erstellen. Wir können einfach so einfache Zahlen hinzufügen, also 5 plus 3. Öffne die Konsole und es gibt unseren Wert genau hier. Wir können es auch verwenden, um Strings hinzuzufügen. Oben haben wir eine Konstante von Vornamen und auch Nachnamen. Wir können diesen Operator verwenden, um den Vornamen zum Nachnamen hinzuzufügen . Wie wir uns zuvor angeschaut haben, können wir auch so viele Strings anhängen, wie wir möchten. Dadurch wird auch ein Leerzeichen zwischen dem Vornamen des Nachnamens hinzugefügt . „Speichern“ und „Aktualisieren“. Es wird jetzt der vollständige Name angezeigt, entfernen Sie einfach dieses Konsolenprotokoll und wir werden einige weitere dieser Operatoren direkt oben schneiden . Wie Sie vielleicht erwarten. Wir können dies durch subtrahieren ersetzen, dies wird uns die Ergebnisse von 10 geben. Wir haben den Stern, der das Multiplikationssymbol ist. Dies wird jetzt 15 multipliziert mit 5 sein, was uns die Ergebnisse von 75 ergibt. Wir haben auch den restlichen Operator , der gerade hier dieses Prozentsymbol ist. Denken Sie daran, dass dies aus früheren Videos eine Division machen und anschließend alle verbleibenden Zahlen ausgeben wird. Diese fünf geht dreimal in 15 hinterlässt eine schöne runde Zahl und Null Rest. Aber wenn wir es auf vier ändern würden, wären es 4, 8,12, und dann hätten wir einen Rest von 3, um 15 auszumachen. Diese sind den Zuweisungsoperatoren, die wir zuvor nachgeschlagen haben, sehr ähnlich . Denn wie Sie hier am Ende sehen können, gibt es zwei weitere zusätzliche Operatoren , die ganz anders aussehen als das vorherige Video. Dies ist das Inkrement und das Dekrement. Der erste, der das doppelte Plus ist , ist Inkrement und dies erhöht den ursprünglichen Wert um 1 oder das Dekrement, das die doppelte Subtraktion ist. Dies wird den Wert jedes Mal um 1 verringern. Um dies als Beispiel zu sehen, müssen wir dies ändern, damit wir diese Ergebnisse aktualisieren und so ändern können , dass es sich um eine Multiplikation handelt, damit das Ergebnis 60 sein wird. So ist 60 jetzt innerhalb dieses Ergebnisses gespeichert. Wenn wir zur nächsten Zeile gehen, wählen wir dieses Ergebnis und fügen danach das doppelte Plus hinzu, das sind die Inkremente. Aktualisieren. Dies wird jetzt auf 61 erhöht. Wir könnten dies auch erneut tun, indem wir kopieren und einfügen, und dies wäre jetzt 62, so dass es für jeden Versuch um 1 erhöht wird. Dieser Operator ist für viele Situationen nützlich. In einem unserer bevorstehenden Projekte verwenden wir es beispielsweise mehrmals, z. B. bei jeder Bestellung erhöhen wir die Bestellnummer um 1 für jede Bestellung. Außerdem haben wir die fertige Pizza-Variable, die jedes Mal, wenn der Koch eines der Stücke vervollständigt, um 1 erhöht wird . Wir können all diese Nummern installieren und am Ende des Spiels anzeigen. Das Gegenteil besteht darin, zwei Subtraktionssymbole zu verwenden , wodurch die Zahl verringert wird, was bedeutet, dass sie jedes Mal um den Wert 1 verringert. Denken Sie daran, dass das ursprüngliche Ergebnis 60 war, dann reduzieren wir es um 2. Aktualisieren, und dies bleibt 58 am niedrigsten. Darunter haben wir auch die logischen Operatoren, und wie Sie sehen können, gibt es nur drei davon auf dem Bildschirm. Diese logischen Operatoren werden oft mit if-Anweisungen kombiniert , die wir später behandeln werden. Aber sie sind auch für sich allein nützlich. Wenn wir prüfen wollten, ob mehrere Bedingungen zutreffen, könnten wir den logischen UND-Operator verwenden , der dieses doppelte kaufmännische Und-Zeichen ist. Zum Beispiel, wenn wir wissen wollten ob Nummer 1 gleich 15 ist und ob Nummer 2 gleich 4 war, und ob Nummer 2 gleich 4 war bevor wir einen Code ausführen. Wir könnten dies tun, lassen Sie uns dieses Beispiel entfernen. Ich werde das auch einfach nach unten schieben. Wir werden unsere Ergebnisse neu erstellen. Jetzt können wir die logischen Operatoren verwenden, um eine Überprüfung durchzuführen. Wir möchten prüfen, ob unsere Variable Nummer 1 gleich 15 sein wird. Das Dreifache ist gleich, das ist gleich Typ und Wert. Jetzt speichert dies einen wahren oder falschen Wert innerhalb des Ergebnisses. Wie ich bereits erwähnt habe, was wäre, wenn wir auch prüfen wollten , ob Nummer 2 gleich 4 ist. Nun, wir könnten das mit diesem UND-Operator auch einen zweiten Check durchführen. Dieses Mal prüfen wir, ob Nummer 2 gleich 4 ist. Sagen wir das und aktualisieren Sie den Browser. Das stimmt. Beide Schecks, diese und auch diese sind beide wahr. diesem Grund erhalten wir das Ergebnis von true. Es würde einen von diesen ändern, um einen anderen Wert wie Nummer 2 zu sein . Da eine davon jetzt anders ist, würde dies dann zu Falsch führen. Das ist großartig, aber das hängt natürlich davon ab diese beiden Bedingungen wahr sind. Aber was wäre, wenn ich wissen wollte, ob nur einer davon wahr ist? Wenn beispielsweise Nummer 1 gleich 15 war oder wenn Zahl 2 gleich 4 war, möchten wir möglicherweise den Wert true zurückerhalten, wenn einer von ihnen das Ergebnis von true ist. Nun dafür haben wir den ODER-Betreiber, der diese Doppelrohre sind. Wechseln wir das doppelte kaufmännische Und-Zeichen für die Doppelrohre. Jetzt wissen wir, dass nur einer dieser Werte zutrifft. Wir sollten jetzt im Browser wahr sehen. Dasselbe, wenn wir dies wieder auf vorher ändern. Jetzt wissen wir, dass beide gleich wahr sein werden. Dies wäre auch der Fall, da wir denken, dass wir nur eine oder mehrere dieser Bedingungen erfüllen müssen um die Ergebnisse der wahren Rückgabe zu erhalten. Letzt haben wir das Ausrufezeichen, welches der NOT-Operator ist. Dies bewirkt im Grunde das Gegenteil und gibt einen wahren Wert in „false“ zurück oder umgekehrt. Denken Sie daran, dass wir derzeit im Browser den Wert von true sehen. Wenn Sie das Gegenteil überprüfen möchten, müssen Sie nur dieses Ausrufezeichen vor dem Ergebnis hinzufügen und dies sagen, dies gibt uns das gegenteilige Ergebnis, das falsch ist. Das Gegenteil so zu überprüfen mag etwas seltsam erscheinen, aber es hat viele Verwendungsmöglichkeiten innerhalb von JavaScript. Zum Beispiel haben wir in einem unserer kommenden Projekte eine Variable namens Game gestartet. Dies ist ein wahrer oder falscher Boolescher Wert. Wir können dann überprüfen, ob das Spiel begonnen hat oder ob das Spiel nicht begonnen hat , indem wir das Ausrufezeichen bevor wir einen bestimmten Code ausführen. Es ist auch für viele Situationen nützlich z. B. um zu prüfen, ob kein Benutzer existiert, und vieles mehr. Aber Bezug auf alle diese Betreiber, die in diesem Video behandelt wurden, und auch auf den vorherigen. Für diesen Kurs sind Folien verfügbar. Schau sie dir an, wenn du eine Referenz benötigst. 15. Einführung in Arrays und Objekttypen: Springen Sie für dieses Video in die Lektion Nummer 11, die die Einführung in Arrays und Objekttypen darstellt. Öffnen Sie dies auch im Browser. In JavaScript gibt es zwei Gruppen, wir unsere Typen einfügen können. Es ist sowohl primitive als auch Objekttypen. Die vorherigen Datentypen, die wir uns angesehen haben wie String, Zahl, Boolean, würden die Null definieren, alle fallen in eine Gruppe, die als primitive Typen bezeichnet wird. Es gibt auch große Int und Symbol, die wir noch nicht behandelt haben. Wir werden jetzt die Objekttypen entdecken. Das erste ist ein Array. Die vorherigen primitiven Werte, die wir uns angesehen haben , speichern einen einzelnen Wert wie eine Zeichenfolge oder einen Text oder eine Zahl. Ein Array kann jedoch mehrere Werte enthalten. Wenn Sie an eine Einkaufsliste, eine Aufgabenliste oder generell eine Liste mit mehreren Werten denken , ist ein Array ideal für diese Art von Daten. Werfen wir einen Blick auf unser erstes Array im Projektordner. Gehe runter zum Skriptbereich. Wir erstellen ein Array mit diesen eckigen Klammern. Arrays können jeden Datentyp wie eine Zeichenfolge enthalten, genau wie diese, getrennt durch Komma, wir fügen mehrere Werte hinzu. Wir können Zahlen einsetzen. Wir können Objekte platzieren , die wir uns als nächstes ansehen werden, oder Sie könnten auch in einem Array verschachteln. Um dies zu tun, erstellen wir einfach so einen neuen Satz eckiger Klammern. Dann fügen wir unsere Informationen weiter hinzu. Wenn wir in zwei Strings platzieren wollten, würden wir es genau so machen. Oder wenn wir ein Array für eine Liste verwenden wollten, sagen wir, eine Liste von Pizza-Zutaten, würden wir dies einfach tun, indem wir mehrere durch ein Komma getrennte Strings hinzufügen . Sagen wir Teig, Käse, Soße und auch etwas Peperoni. Wie greifen wir auf einen dieser Werte zu? Nun, genau wie bei anderen Werten können wir dies auch innerhalb einer Variablen speichern. Wir werden sagen, dass Pizza diesem neuen Array gleich sein soll. Dann unten haben wir unsere Dokumente. Wir wählen einen neuen Titel und dann plötzlich in einem Text aus, der dieser Zeichenfolge entspricht. Stattdessen können wir diese Zeichenfolge durch den Wert unseres Pizza-Arrays ersetzen . Aktualisieren Sie den Browser und dann sehen wir eine Liste aller unserer Zutaten. Das Lesen einzelner Werte aus diesem Pizza-Array ist ebenfalls einfach. Array-Werte werden von Position 0 nummeriert, und dies wird Indexposition genannt. Der erste des Teigs ist die Indexposition 0. Dies ist 1, 2 und 3. Wir können dies innerhalb der eckigen Klammern verwenden , um auf eine dieser Zutaten zuzugreifen . Position 0, was der Teig ist. Darauf können wir einzeln und auch auf einen der anderen Werte zugreifen . Arrays haben auch etwas, das als Eigenschaft bezeichnet wird. Wenn wir viel detaillierter auf diese Objekttypen eingehen, werden Sie feststellen, dass Objekttypen wie ein Array mehrere Eigenschaften oder Methoden zur Verfügung haben. Diese ermöglichen es uns, bestimmte Aktionen durchzuführen oder auch auf einige Informationen zuzugreifen. Werfen wir zunächst einen Blick auf eine Eigenschaft namens length. Anstatt darauf zuzugreifen, nimm einfach den Wert hier. Wir können die Länge am Ende verketten, aktualisieren. Wir sehen, dass hier vier Werte enthalten sind. Wir könnten das sowieso machen, was du wolltest. Wenn wir diese Variable beispielsweise innerhalb einer Zeichenfolge platzieren wollten , könnten wir die Backticks öffnen. Wir sagen, diese Pizza hat eine Vorlagenzeichenfolge verwendet. Wir können eine Variable mit dem $ -Symbol und dann den geschweiften Klammern übergeben . Pass in der pizza.length vorbei. Dann Zutaten. Sagen wir einfach, diese Pizza hat vier Zutaten. Rüber zum Browser, und los geht's. Arrays haben auch einige integrierte Methoden zur Verfügung denen wir einige allgemeine Aufgaben ausführen können, z. B. das Verschieben eines neuen Elements in dieses Array. Wir können Werte entfernen und auch prüfen, ob das Array auch einen bestimmten Wert enthält. Lassen Sie uns zum Beispiel prüfen, ob unsere Pizza den Wert von Peperoni enthält. Um dies zu tun, greifen wir zuerst mit dem Namen auf unser Array zu. Wir verwenden dann dot Includes; ein innerhalb der Klammern können wir einen Wert übergeben, den Sie überprüfen möchten. In unserem Fall möchten wir prüfen, ob dies Peperoni enthält. Dies gibt dann entweder einen wahren oder falschen Wert zurück , wenn dieser enthalten ist. Wir können dies auch innerhalb einer Variablen speichern. Nennen wir das HasPepperoni. Dann können wir unten diesen inneren Text ersetzen. Entfernen wir diese Vorlagenzeichenfolge und ersetzen sie durch unsere Variable. Gebt das eine Rettung. Wenn Sie einen Sprung sehen, genau wie wir dort waren, ist dies nur der Texteditor, der das Dokument speichert und neu formatiert. Stellen Sie sicher, dass dies gespeichert und im Browser übergeht. Dies ist der Fall, weil der Wert von Peperoni in diesem Array enthalten ist. Wir können dies ändern, um eine falsche Schreibweise zu sein und dies wird ein falscher Wert sein. Oder wenn wir die richtige Schreibweise hätten, könnten wir auch das Ausrufezeichen direkt davor verwenden , wie wir es im vorherigen Video angesehen haben. Dies gibt dann den entgegengesetzten Wert zurück , der auch falsch ist. Es gibt auch viele weitere dieser Methoden. Es gibt auch einen dedizierten Array-Bereich , um näher darauf einzugehen. 16. Einführung in Objekte: Ein anderer Objekttyp zusammen mit Array. Nun, es ist ein echtes Objekt, Arrays, die wir gerade angeschaut haben, enthalten mehrere Werte. Ich referenziere einen einzelnen Wert innerhalb des Arrays, indem ich auf die Indexnummer zugreife, bei der es sich um die Position handelt, die bei Null beginnt. Wir haben uns früher kurz Objekte angeschaut, und dies ist auch eine Sammlung von Werten. Ein Objektwert wird jedoch durch einen Schlüssel referenziert. [unhörbar] startet Dateien und in die Einführung von Objekten. Wir möchten damit beginnen, ein Objekt zu erstellen. Nehmen wir an, lass den Benutzer, und sagen wir, das entspricht unseren geschweiften Klammern. Denken Sie schon früher daran, dass wir eine Reihe von Eigenschaften hinzufügen können , die ein Schlüssel- und Wertepaar sind. Wir haben einen Schlüssel, und zum Beispiel kann unser Benutzer einen Vornamen haben. Ich werde dies auf eine Zeichenfolge setzen, also haben wir den Schlüssel und wir haben den Wert und es ist dieser Schlüssel, mit dem wir auf einen dieser Werte zugreifen , getrennt durch Komma. Lassen Sie uns ein bisschen mehr Details hinzufügen, den zweiten Namen. Wir setzen so viele davon ein, wie wir möchten, wie zum Beispiel den Beruf, den Webentwickler. In diesem Beispiel fügen wir einen booleschen Wert von angemeldet hinzu und setzen diesen auf „true“. Schließlich können wir auch einige Felder darin hinzufügen, und dies kann auch verschachtelte Arrays enthalten, genau wie bei einem regulären Array öffnen wir die eckigen Klammern und wir können hier so viele Werte hinzufügen , wie wir es tun würden gerne. Wenn wir das speichern, werden Sie hier feststellen, dass wir die Überschrift der Stufe 1 haben. Wir greifen auf diese Überschrift zu, ich werde festlegen, dass dies unserem Benutzerobjekt entspricht, also ersetzen Sie diese Textzeichenfolge durch die Benutzervariable. Speichern Sie diese Datei und aktualisieren Sie diese im Browser. Sobald wir dies tun, sehen wir den Wert von object Object. Dies passiert, wenn wir versuchen, das vollständige Objekt im Browser anstelle einer einzelnen Eigenschaft anzuzeigen . Es konvertiert all dieses Objekt in eine Zeichenfolge. Ein Objekt, Objekt, ist der Standardwert, der im Browser angezeigt wird. Bei Arrays verwenden wir die eckigen Klammern, um auf die Indexnummer der Werte zuzugreifen, aber für Objekte verwenden wir stattdessen die eckigen Klammern, um auf jeden dieser Schlüssel zuzugreifen. Anstatt den vollständigen Benutzer anzuzeigen, öffnen Sie die eckigen Klammern, und dann greifen wir auf den Eigenschaftsnamen innerhalb der Zeichenfolge zu, genau wie folgt. Dies bezieht sich auf den Vornamen unseres Benutzers, und wenn wir diesen speichern und aktualisieren, wird dieser jetzt durch den Wert ersetzt. Wir können dies ändern, um alles andere wie den Beruf zu sein , und das funktioniert auch vollkommen gut. Eine andere Möglichkeit, dies zu tun, um genau das Gleiche zu erreichen , besteht darin, auch die Punktnotation zu verwenden. Dies wird als Klammernotation bezeichnet da wir die eckigen Klammern verwenden, aber die Punktnotation ist auch eine Möglichkeit, auf eine dieser Eigenschaften zuzugreifen. Wir können zuerst User Dot sagen, das funktioniert auch einwandfrei. Wenn wir während der Entwicklung auch auf das vollständige Objekt zugreifen und alle verfügbaren Eigenschaften darin sehen wollten das vollständige Objekt zugreifen und alle verfügbaren Eigenschaften darin sehen , können wir ein Konsolenprotokoll verwenden, unser Benutzerobjekt weitergibt und anstatt anzuzeigen Objektobjekt, wie wir es bei der Suche gesehen haben Wenn wir zum Browser gehen und die Entwicklertools innerhalb der Konsole öffnen würden , sehen wir den vollen Wert dieses Objekts. Sobald wir gerade hier auf diesen Pfeil klicken, können wir auch alle anderen Objekttypen wie dieses Array erweitern wie dieses Array und alle darin verschachtelten Inhalte sehen. Diese Konsolenprotokolle können nützlich sein, um zu debuggen und im Allgemeinen einzuchecken, welche Werte für jeden Datentyp enthalten sind . Neben diesem Konsolenprotokoll, wenn wir das strukturierte Innere eines Tabellenformats sehen wollten , können wir dies in eine Konsolenpunkttabelle ändern. Jetzt können wir speichern und aktualisieren, und dadurch wird unser Objekt auf tabellenähnliche Weise angezeigt , was möglicherweise ein wenig einfacher ist, alle Daten, die Sie in einem Objekt haben, zu verstehen . Diese Konsolenprotokolle können nützlich sein, um zu debuggen und generell zu überprüfen, welche Werte für jeden Datentyp enthalten sind . Wenn wir mehrere Objekte hätten, können wir sie auch in Arrays platzieren. Dies wird nützlich sein, um viele Benutzer oder Produkte zu speichern . Anstatt dieses Objekt hier zu haben, könnten wir dies in ein Array ändern und dies würde uns dann ermöglichen, mehrere Objekte zu speichern. Unser erstes, und da dies ein Array ist, trennen wir jeden Wert durch ein Komma, und dann können wir jedes dieser Objekte so viele Eigenschaften hinzufügen , wie wir möchten. Wenn wir bei der gleichen Sache bleiben, könnten wir den Vornamen hinzufügen und dann durch ein Komma getrennt werden, den Nachnamen. Kopieren wir einfach die Details aus diesem legen Sie diese in unser zweites Objekt. Ich werde die Namen ändern, und natürlich haben wir jetzt mehrere Benutzer. Wir könnten dies auch ändern, um Nutzer zu sein. Wenn dies eine reale Anwendung war und wir einen Datenbankaufruf für eine Liste aller unserer Benutzer tätigen würden , können unsere Daten so zurückkommen, aber jetzt haben wir mehrere Objekte in diesem Array. Können Sie herausfinden, wie Sie auf diese beiden Vornamen zugreifen können? Oder denken Sie daran, dass wir, da Arrays indiziert werden, auf jedes Objekt durch die Position innerhalb des Arrays zugreifen können . Diese erste ist Indexposition 0, und die zweite ist Index Nummer eins. Was wir also tun müssen, ist, dass wir dies entfernen können. Dies wird jetzt als Benutzer bezeichnet. Öffnen Sie die eckigen Klammern und wir können auf unseren ersten Benutzer mit Position Null zugreifen . Denken Sie daran, von früher an, als wir auf das vollständige Objekt zugegriffen haben, genau so. Es zeigt das Objektobjekt im Browser an. Was wir tun müssen, ist, auf eine dieser einzelnen Eigenschaften mit dem Namen des Schlüssels zuzugreifen . Wir haben die beiden Schlüssel von „Erste und Letzte“. Lassen Sie uns zum ersten Mal gehen, speichern Sie das und aktualisieren Sie es. Dies hat uns einen Fehler gegeben, da der Benutzer nicht definiert ist. Werfen wir einen Blick auf das Problem. Ich wähle diesen Konsolentisch hier aus. Wir versuchen, den Benutzer abzumelden, aber dies wurde in Benutzer geändert, laden dann den Browser neu und wir greifen nun auf unseren Vornamen zu. Gehen wir für das zweite Objekt, also positioniere eins. So greifen wir auf die enthaltenen Werte zu, wenn mehrere Objekte in einem Array gespeichert sind. Neben den Benutzern gibt es auch viele, viele andere Anwendungsfälle für diese Art von Einrichtung. Wenn Sie beispielsweise einen E-Commerce-Shop mit der gesamten Produktkollektion hatten und auch der Warenkorb ein leeres Array sein könnte, wird das Objekt jedes Mal, wenn der Benutzer ein neues Produkt hinzufügt , darauf verschoben Array. Wie Sie sehen können, gibt es dafür viele Anwendungsfälle und auch bei Objekten und Arrays noch viel mehr zu entdecken . Wir werden in den kommenden Abschnitten viel tiefer darauf eingehen . 17. Einführung in Funktionen: Werfen wir nun einen Blick auf JavaScript-Funktionen. Eine Funktion ist wie eine Aufgabe oder eine Reihe von Aufgaben, die zusammengefasst sind. Zum Beispiel haben wir in unserem bevorstehenden Speedy-Shaft-Projekt viele Funktionen, die eine bestimmte Aufgabe ausführen. Wie das Erstellen einer neuen Pizza haben wir eine, um eine neue Bestellung zu erstellen, und auch eine, um zu überprüfen, ob die Veranstaltung voll ist. Diese Funktionen können entweder sofort oder öfter ausgeführt werden, wenn wir sie zu einem späteren Zeitpunkt aufrufen. Genau wie Arrays und Objekte, die wir in den beiden vorherigen Videos angeschaut haben, werden wir im Kurs einen detaillierteren Funktionsbereich haben. Aber im Moment wird uns ein grundlegendes Funktionswissen bei einigen Schritten wirklich helfen. Ebenso wie diese Arrays und Objekte, die wir uns gerade angeschaut haben, fällt eine Funktion auch in denselben Objekttyp Gruppe 2. Gehen Sie für diese Lektion in den letzten Ordner in unseren JavaScript-Grundlagen. Dies ist Nummer 13, Einführung in Funktionen. Öffne uns und auch im Browser. Was wir tun werden, ist zuallererst, wir hier zwei Arrays haben, die wir ignorieren können , und wir können direkt unter diese gehen. Wir kommen in einem Moment wieder darauf zurück. Obwohl wir uns ansehen werden, wie eine Funktion funktioniert, verwenden wir zunächst das Schlüsselwort function. Schlüsselwort function folgt dann ein Name , den wir dieser Funktion geben möchten. Genau wie eine Variable oben weisen wir dann einen Namen zu und gehen wir für dieses Beispiel auf die Zufallszahl. Dies ist ein Name, den wir jedes Mal eine Funktion aufrufen , wenn wir den Code darin ausführen möchten. Unmittelbar nach diesem Namen geben wir einige Klammern ein, die Klammern genannt werden. Innerhalb dieser Klammern können wir einige zusätzliche Informationen an die Funktion weitergeben , aber dazu in einem Moment mehr. Der letzte Teil dieser Art von Funktion sind die geschweiften Klammern und dies ist der Funktionskörper. Diese Klammern in hier enthalten den gesamten Code, den Sie ausführen möchten, wenn wir diese Funktion mit ihrem Namen aufrufen. Diese Klammern können auch als eine Reihe von Gattern betrachtet werden, die den gesamten darin enthaltenen Funktionscode enthalten. Dies wird als Funktionsdeklaration bezeichnet. Im Inneren können wir jeden Code einfügen, den Sie ausführen möchten. Lassen Sie uns nun eine einfache Browser-Warnung einsetzen. Speichern Sie dies und weiter im Browser. Wenn wir aktualisieren, sehen wir nicht, dass diese Warnung hier drin läuft. Es führt diesen Code tatsächlich aus. Genau wie bereits erwähnt, müssen wir die Funktion mit ihrem Namen aufrufen , gefolgt von diesen Klammern nur hier. Rufen Sie direkt darunter unsere Zufallsnummer an, fügen Sie die Klammern oder diese Klammern hinzu. Dies sollte jetzt unseren Funktionscode aufrufen und dann die Warnung im Browser anzeigen. Ein weiteres gutes Beispiel für eine Funktion wäre ein Taschenrechner, um ein Hundealter in ein menschliches Alter umzuwandeln . Fangen wir noch mal an. Wir kehren zu unserem ursprünglichen Funktionsschlüsselwort zurück. Dieses Mal nennen wir das DogToHuman, fügen die Klammern oder Klammern hinzu. Dann der Funktionskörper. Erstellen Sie direkt oben eine neue Variable, die unsere DogAge sein wird. Lassen Sie uns dies auf beliebige Werte setzen, z. B. drei. Wir können dann auf diese Variable innerhalb unserer Funktion zugreifen und dann eine Multiplikation durchführen, um sie in menschliche Jahre umzuwandeln. Um auf diese Variable zuzugreifen, müssen wir nur mit ihrem Namen darauf zugreifen ., also die DogAge. Dann multipliziere diesen Wert auf 7, um uns die menschlichen Jahre zu geben. Wir können dies auch innerhalb einer Konstante aufbewahren. Lass uns auf HumanEquiv gehen. Moment, wenn man sich diese Funktion anschaut, ist dies alles, was unsere Altersvariable des Hundes erfasst dies mit 7 multipliziert. Aber wir müssen auch einer Funktion sagen, dass sie diesen neuen Wert tatsächlich zurücksenden soll. Dies ist die Verwendung des Schlüsselworts return. Wir können unsere HumanEquiv-Variable wie zuvor zurückgeben. Wir nennen dann diese Funktion, die DogToHuman war. Wenn wir dies und im Browser speichern, aktualisieren Sie es, wir sehen nichts anderes im Browser. Wir sehen nichts anderes weil es in der ersten Funktion, die wir uns angeschaut haben , eine Warnung enthielt. Dies war ein visueller Hinweis darauf, dass die Funktion ausgeführt wurde. Aber diese haben wir keine Warnung, wir haben kein Konsolenprotokoll, wir hatten keine Überschrift der Stufe 1 mit ihm im Text festgelegt. Alles, was wir tun, ist einen Wert zurückzugeben. Um diesen Wert tatsächlich zu verwenden, könnten wir diesen in ein Konsolenprotokoll einwickeln und den Rückgabewert in der Konsole sehen. Oder häufiger könnten wir dies in einer Konstante speichern , die als Ergebnis bezeichnet wird. Dieses Ergebnis enthält dann diesen Rückgabewert, der DogAge multipliziert mit 7 ist. Wenn wir wollten, könnten wir ein einfaches Konsolenprotokoll mit dem Wert des Ergebnisses erstellen. Aber lasst uns noch einen Schritt weiter gehen und dies in eine Zeichenfolge umwandeln. Wenn wir die Back-Ticks verwenden, können wir diese Ergebnisvariable auch verwenden. Wir sagen, Mein Hund ist gealtert. Denken Sie daran, eine Variable zu übergeben, wir verwenden ein $ -Symbol, die geschweiften Klammern. Fügen Sie dann den Variablennamen ein und fahren Sie dann mit der Zeichenfolge fort, die in menschlichen Jahren angegeben wird. Dies sollte sagen, dass Mein Hund gealtert ist, und in unserem Fall wären dies 21 in Menschenjahren. Rüber zum Browser und öffne die Konsole. Aktualisieren Sie die Seite und los geht's. Es gibt unsere neue Zeichenfolge mit der darin enthaltenen Variablen. Um es zusammenzufassen, haben wir eine Funktion erstellt. Diese Funktion wird auf unsere DogAge-Variable von drei zugreifen. Multiplizieren Sie es mit 7, wir speichern dies dann innerhalb einer Variablen und geben diese Ergebnisse dann von der Funktion zurück. Wir rufen diese Funktion dann unten auf und speichern diesen zurückgegebenen Wert innerhalb unserer Ergebnisse. Ergebnisse können dann überall in unserem Code verwendet werden, z. B. hier, wenn wir sie in eine Zeichenfolge einfügen. Beachten Sie auch, dass dieses return-Schlüsselwort nur einmal innerhalb einer Funktion verwendet werden sollte , da es signalisiert, dass die Funktion nicht mehr ausgeführt werden soll. Es gibt jedoch einige Ausnahmen, z. B. wenn Sie diese innerhalb einer if-else -Anweisung verwenden, über die wir später erfahren werden. Aber im Allgemeinen ist return das Ende der Funktion und jeder Code, den Sie danach platzieren, wird ignoriert. Wir könnten das sehen, wenn wir eine Warnung hinzufügen. Führen Sie dies dann im Browser aus, aktualisieren Sie die Seite und wir sehen unser Konsolenprotokoll. Wir sehen jedoch keine Warnung auf der Seite, da dies nach unserer Rücksendeerklärung liegt. Dies beendet unsere Funktion effektiv. Lasst uns das entfernen. Zu Beginn dieses Videos haben wir erwähnt, dass diese Klammern kurz nach dem Funktionsnamen auch zusätzliche Informationen an diese Funktion weitergeben können. In der Klammer richten wir einen oder mehrere Parameter ein, die Sie sich als Variablen vorstellen können. Statt unserer DogAge direkt oben können wir das auskomma machen. Wir können eine Variable oder einen Parameter namens DogAge direkt in unsere Funktion übergeben . Wir können auch mehrere durch ein Komma getrennte Werte übergeben. Dann könnten wir genau wie zuvor innerhalb unserer Funktion darauf zugreifen . Aber dieser DogAge wurde ein Wert von drei zugewiesen. Wie übergeben wir diesen Wert tatsächlich an diesen Parameter? Nun, wir machen das, wenn wir gerade hier eine Funktion aufrufen. Lassen Sie uns dieses Mal von fünf ein anderes Beispiel ansprechen. Sein tatsächlicher Wert, den Sie von einer Aufruffunktion übergeben , wird als Argument bezeichnet. Sie müssen sich im Moment nicht daran erinnern, aber dies ist ein Argument und dies ist ein Parameter. Probieren wir das mal aus. Geben Sie dies Browser speichern und übergehen. Jetzt sehen wir den unterschiedlichen Wert von 35 in unserem Logbuch. Während wir dieses Video durchgegangen sind, gab es ein paar Schlüsselwörter. Sie müssen sich zu diesem Zeitpunkt nicht an all dies erinnern. Menschen verwirren oft Parameter und Argumente und verwenden sie auch austauschbar. Es ist kein großes Problem. Aber nur um klarzustellen, ist ein Parameter die Variable oder der Platzhalter innerhalb unserer Funktionsdeklaration. Wir können dann auf sie innerhalb unseres Funktionskörpers zugreifen , der sich innerhalb der geschweiften Klammern befindet. Wir haben dann Argumente, die die tatsächlichen Werte sind , die wir beim Aufrufen dieser Funktion übergeben, wie unsere Nummer in diesem Beispiel. Lassen Sie uns das ein bisschen weiter gehen, indem wir unsere beiden Arrays ganz oben verwenden. Lassen Sie uns das bereinigen und den gesamten Funktionscode verschieben. Wir werden jetzt eine Funktion erstellen , die nach Allergien in diesen Rezepten sucht. Die Funktion nimmt das Rezept wie Brot und Brownies auf. Dann können wir auch einen bestimmten Inhaltsstoff eingeben, auf den eine Person allergisch ist. Die Funktion durchläuft dann alle diese Werte und prüft, ob diese im Rezept enthalten sind. Erstellen Sie wie zuvor unsere Funktion. Geben Sie diesem einen Namen CheckAllergien, die Klammern und dann die geschweiften Klammern. Damit diese Funktion richtig funktioniert, muss sie zwei Dinge aufnehmen. Zuallererst das eigentliche Rezept, gegen das man sich wenden sollte. Wir nennen dies den Rezeptumfang und trennen ihn durch ein Komma. Es muss auch eine bestimmte Zutat übergeben werden, prüfen Sie, ob sie darin enthalten ist. Öffne den Funktionskörper. Der erste Schritt besteht darin, auf unser Rezept zuzugreifen, das entweder das Brot- oder das Brownies-Array ist. Da es sich um ein Array handelt, können wir dann die Include-Methode verwenden. Wir haben uns die Include-Methode früher schnell angesehen und dies wird prüfen, ob ein bestimmter Wert in diesem Array enthalten ist , und gibt dann einen wahren oder falschen Wert zurück. Wir möchten prüfen, ob dieser Inhaltsstoff enthalten ist , der als Parameter übergeben wird. Obwohl wir diese Variablen haben, haben wir das Rezept und die Zutaten, dies ist genau das Gleiche, als würden wir auf unser Brot-Array direkt oben zugreifen. Rufen Sie dann die Include-Methode auf, genau so. Dann könnten wir prüfen, ob das Mehl darin enthalten ist. Wenn dies der Fall ist, was hier der Fall ist, würde dies den Wert true zurückgeben. Wenn es nicht innerhalb des Arrays gefunden wurde, erhalten wir den Wert false zurück. Beide Codezeilen machen genau das Gleiche. Der Unterschied besteht darin, dass wir mit verschiedenen Werten an unsere Funktion übergeben können . Bewahren Sie dies als Nächstes in einer Konstante namens hasIngredients auf. Sie sollten immer nur wahr oder falsch sein und dann können wir dies von unserer Funktion zurückgeben. Um diesen Rückgabewert zu sehen, können wir ein Konsolenprotokoll erstellen. Sie dann innerhalb der hier Anruferfunktion, die CheckAllergien genannt wird, Fügen Sie dann innerhalb der hier Anruferfunktion, die CheckAllergien genannt wird, die Klammern oder die Klammern hinzu. Dann müssen wir zwei Argumente vorgeben. Zuallererst das Rezept, das entweder das Brot oder die Brownies ist. Lass uns Brot holen. Geben Sie dann unsere Zutat ein, die Sie überprüfen möchten , ob sie in diesem Rezept enthalten ist. Lass uns Mehl holen. Wir wissen, dass dies in Brot enthalten ist, also sollte dies den Wert true zurückgeben. Speichern wir das und aktualisieren Sie den Browser. Jetzt sehen wir unseren Wert in der Konsole. Versuchen wir es mit einem falschen Wert. Wir holen Eier. Das ist falsch. Aber wir wissen, dass Eier in Brownies enthalten sind. Versuchen wir es und es sollte noch einmal ein Wert von wahr sein. Genau als Zusammenfassung erstellen wir, wenn dies im Moment ein bisschen viel ist , eine Funktion namens CheckAllergien, bei der wir prüfen werden, ob eine Zutat in einem Rezept enthalten ist . Wir greifen dann auf dieses Rezept zu, das entweder das Brot oder die Brownies ist. Wir prüfen, ob diese bestimmte Zutat enthalten ist. Wenn dies der Fall ist, wird ein wahrer Wert zurückgegeben. Wenn dies nicht der Fall ist, wird false zurückgegeben, was dann innerhalb der Protokolle angezeigt wird. Hoffentlich sollten Sie anfangen, die Leistungsfähigkeit der Funktionen zu erkennen. Aber es gibt noch viel mehr Funktionen, die wir bald entdecken werden. Einer der großen Vorteile von Funktionen ist, dass sie wiederverwendbar sind. Wenn wir Codes in unseren Programmen haben die wir mehrmals wiederholt haben, könnten wir unseren gesamten Code abrufen und in eine eigenständige Funktion wechseln und dann die Funktion anstelle dieses Codes aufrufen. Der Funktion können auch verschiedene Werte in Form von Argumenten übergeben werden , die wir hier gerade entdeckt haben. Sie können sich auch eine Funktion als Baustein für alle Programme vorstellen . Jedem wird eine bestimmte Aufgabe zugewiesen, sodass wir unseren Code besser organisieren können. Funktionen können auch in vielen Formen vorliegen. Dieses Beispiel hier ist eine traditionellere Form einer JavaScript-Funktion, und es gibt auch andere Typen, wie die Pfeilfunktion, die wir später behandeln werden. Als allgemeiner Leitfaden ist es jedoch vorteilhaft, alle Funktionen so klein wie möglich zu halten und sich nur auf eine Aufgabe zu konzentrieren. Dies macht es viel einfacher zu wissen, was eine Funktion macht, macht sie wiederverwendbarer. Es hilft auch beim Debuggen denn wenn es ein Problem gibt, können wir dieses Problem auf eine bestimmte Funktion konzentrieren , sodass es viel einfacher zu finden ist. 18. Der Array-Konstruktor: Innerhalb dieses JavaScript-Ordners wir uns jetzt auf Abschnitt 2 , der gerade hier diesen Array-Abschnitt ist, und dann auf Lektion Nummer 1 , der der Array-Konstruktor ist. Wählen wir dies aus und öffnen Sie dies innerhalb des Browsers. Wir haben im letzten Video erfahren, dass Arrays in die Objekttypgruppe fallen und dass es sich um einen speziellen Objekttyp handelt , der wie eine Liste ist, und wir können über die Indexposition auf jeden dieser Werte zugreifen . In diesem Skript haben wir zuvor Arrays wie dieses erstellt. Wie Sie an dem Kommentar sehen können, ist dies ein Array-Literal. Wir erklären, dass wir ein Array wollen, indem diese eckigen Klammern verwenden, und dann können wir alle Anfangswerte festlegen die wir darin platzieren möchten. Wir können auch bestätigen, dass dieses Pizza-Array ein Objekttyp ist , indem wir ein Konsolenprotokoll. Innerhalb des Konsolenprotokolls können wir die Eigenschaft typeof nutzen, die wir uns zuvor angeschaut haben, wir können die Art der Pizza überprüfen, und dann sehen wir in der Konsole dies ein Objekttyp ist. Es gibt auch eine andere Möglichkeit, ein Array zu erstellen, und dies ist die Verwendung des Array-Konstruktors. Der Array-Konstruktor kann verwendet werden, um ein leeres Array zu erstellen , dem Sie später hinzufügen möchten, ein Array mit leeren Leerzeichen, oder wir können auch einige Anfangswerte hinzufügen. Um dies zu tun, entfernen wir zuerst unser Konsolenprotokoll, lassen Sie uns einfach einen Kommentar einfügen, dies ist der Array-Konstruktor. Die Art und Weise, wie wir den Array-Konstruktor verwenden können besteht darin, das neue Schlüsselwort zu verwenden, gefolgt von einem Array, das ein Kapital A hat Wir können später darauf zugreifen und damit arbeiten. Wir können dieses neue Array auch innerhalb einer Konstante speichern, dann lassen Sie uns ein Konsolenprotokoll erstellen, indem wir den Wert unseres neuen Arrays übergeben , das Zutaten ist dann sehen wir, was dies in der konsolen. Was wir hier haben, sind diese eckigen Klammern und wir haben keine Werte darin, wir können auch sehen, dass die Eigenschaft length einen Wert von Null hat. Wenn wir dies mit einigen Werten initialisieren wollten , könnten wir auch die Werte innerhalb dieser Klammern übergeben . Gehen wir auf Teig, einen zweiten Wert von Käse, dann sehen wir jetzt in der Konsole diese beiden Werte innerhalb des Arrays, und die Länge ist jetzt zwei. Dieser Weg ist genau der gleiche wie die obige wörtliche Methode, und das Ergebnis ist genau das gleiche. Wenn wir wollten, könnten wir diese beiden Werte auch ersetzen und die anfängliche Länge des Arrays einrichten. Hier könnten wir diese entfernen und wir könnten erklären, dass wir ein neues Array mit fünf leeren Leerzeichen wollen . Wir können diese auch in der Konsole sehen, wir sehen die leeren Zeiten 5. Dies ist nur ein leeres Array, das mit fünf leeren Slots initialisiert wird. Für mich persönlich bevorzuge ich den ersten Ansatz, der die wörtliche Version ist. Für mich scheint es nur ein bisschen sauberer und beschreibender zu sein, aber es liegt ganz an Ihnen, welches Sie verwenden möchten. Es ist auch erwähnenswert, dass, obwohl wir ein Array mit fünf leeren Slots eingerichtet haben , dies nur der Startwert ist, wir auch mit einer Push-Methode hinzufügen können. Der Weg, dies zu tun, besteht darin zuerst auf unser Inhaltsstoff-Array zuzugreifen, und dann können wir am Ende eine Push-Methode verketten, die einen neuen Wert an das Ende dieses Arrays schieben wird . Lasst uns Paprika holen, sparen Sie. Wir sehen jetzt, dass sechs Werte innerhalb des Arrays gespeichert sind. Die ersten Werte sind fünf leere Slots, gefolgt von dem neuen Wert, den wir einfach bis zum Ende dieses Arrays schieben. Wir möchten diesen Slot nicht immer leer halten. Was wäre, wenn wir einen dieser leeren Slots durch einen neuen Wert ersetzen wollten ? Um dies zu tun, können wir eine Methode namens splice verwenden. Nehmen wir an, wir möchten die dritten leeren Slots durch einen neuen Wert ersetzen . Wir können die Spleißmethode aufrufen, und splice nimmt bis zu drei Werte auf, die als Parameter bezeichnet werden. Die erste ist die Position, zu der Sie gehen möchten. Denken Sie daran, da Arrays an der Indexposition 0 beginnen, wird die Zahl 2 auf den dritten Slot zugreifen , der durch Komma getrennt ist. Der zweite Wert, den wir angeben möchten, wie viele Artikel wir entfernen möchten, und in unserem Fall ist es nur einer. Dadurch wird ein Element bei Indexnummer 2 entfernt, was unser drittes Element ist. Sagen wir das und aktualisieren Sie den Browser. Jetzt sehen wir, dass wir einen einzelnen Wert entfernt haben uns vier leere Slots hinterlassen haben. Aber wenn wir diesen Wert nicht einfach entfernen wollten, wenn wir ihn tatsächlich durch einen neuen Wert ersetzen wollten, fügen wir einen dritten Parameter hinzu, also sagen wir Zwiebeln. Aktualisieren Sie das, und los geht's. Wir haben unsere ersten beiden Slots, die noch leer sind; wir haben unseren dritten Slot, der durch den Zwiebelwert ersetzt wurde ; und dann bleibt die Slot-Nummer 4 und 5 immer noch leer. In diesem Video haben wir uns die Push- und auch die Spleißmethode angeschaut . Beide sind sehr nützlich, wenn Sie mit Arrays arbeiten, und wir werden in diesem Abschnitt viel mehr behandeln. Nur zur Klarheit für den Rest dieses Kurses werde ich Arrays erstellen, die diesen wörtlichen Ansatz direkt oben verwenden . Es ist aber auch sehr wichtig zu verstehen, dass es verschiedene Ansätze gibt, insbesondere wenn Sie im Code anderer Personen oder anderen Leitfäden auf sie stoßen . 19. Einführung in Eigenschaften, Methoden und den Prototyp: Ich habe bisher verschiedene Wörter wie Objekttyp, Eigenschaften und Methoden erwähnt . Es ist nützlich, zumindest ein grundlegendes Verständnis darüber zu haben , woher all diese kommen. Sprung zu unseren Starterdateien, die Lektion Nummer 2 dieses Abschnitts ist, nämlich Eigenschaften , Methoden und der Prototyp. In unserem Skript sehen Sie drei separate Arrays. Ich habe die Margherita, die Vegetarierin und auch das Peperoni-Pizza-Array. Bisher haben wir uns kurz einige Beispiele angeschaut , was wir mit Arrays machen können. diese Weise können wir auf Eigenschaften und Methoden zugreifen. Die Immobilien oder die einzige Immobilie, die wir bisher tatsächlich angeschaut haben, ist die Länge. Eigenschaften, wir haben uns Dinge angeschaut wie die Länge, die auf das Array zugreifen wird, und dann am Ende um die Länge verketten. Dies gibt uns die Länge des Arrays, also haben wir hier drei verschiedene Elemente. Wir haben uns auch Methoden angeschaut. Die Methoden, die wir uns bisher angeschaut haben, sind die Push-Methode und auch das Spleißen. Auch diese sind auch am Ende eines Arrays gekettet, also wird dies margherita.push oder margherita.splice sein, und dann geben wir bestimmte Werte in diese Klammern ein. Wir haben uns Methoden angeschaut und wir haben uns Eigenschaften angeschaut, aber was genau ist der Unterschied und woher kommen diese beiden? Zuerst schauen wir uns an, woher diese tatsächlich kommen. Wenn wir darüber nachdenken, haben wir hier bereits drei Arrays in unserem Skript, aber wir könnten Hunderte oder sogar Tausende in einem größeren Programm haben . Jedes dieser Arrays hat auch Zugriff auf alle unsere Methoden und auch alle anderen verfügbaren Methoden. Dieses Array könnte den Push gebrauchen. Dieses Array könnte auch Push verwenden, und dieses auch. Was wäre, wenn jedes einzelne Array, das wir erstellt haben , auch das Gewicht dieser Methoden umgehen würde, es gibt viel zusätzlichen Code oder Informationen, die an jedes Array angehängt werden es gibt viel zusätzlichen Code oder müssen. Es wäre sinnvoll, mehrere Arrays erstellen zu können , wie wir es gerade hier getan haben. Wir werden all diese zusätzlichen Dinge wie die Methoden an einem zentralen Ort haben wie die Methoden , auf den wir zugreifen können, wann immer wir brauchen, anstatt sie an jedes dieser Arrays anzuhängen. Nun, das passiert eigentlich mit Objekttypen in JavaScript. JavaScript hat ein Konzept namens Prototypen, und dies ist eine Möglichkeit für jedes Objekt, die Features von einem anderen zu erben. Werfen wir einen Blick auf etwas in der Konsole, indem wir ein Konsolenprotokoll durchführen und dann den Wert des Arrays übergeben. Dieses Array mit einem Kapital A ist genau wie der Array-Konstruktor, den wir uns im vorherigen Video angesehen haben. Es ist wie eine Vorlage für alle anderen Arrays, die wir erstellen, wie diese Peperoni gerade hier. Dies wird jede der Methoden erben, die davon leben. Siehst du die? Wir können uns bei der Konsole und dem Prototyp anmelden und zur Konsole gehen, um den Wert dieses Prototyps zu sehen , diesen zu aktualisieren und zu öffnen. Vieles davon mag zu diesem Zeitpunkt ungewohnt aussehen, aber zwei Dinge, die hier hervorgehoben werden müssen, ist, dass wir Push sehen können und auch Spleiß sehen können. Denken Sie daran, dass dies zwei Dinge sind, die Sie bereits zuvor gesehen haben , als wir uns frühere Methoden angeschaut haben. So haben unsere neuen Arrays Zugriff auf all diese Informationen, ihr Prototyp, den wir gerade auf der Konsole angesehen haben, ist eine Eigenschaft, die auf ein anderes Objekt verweist, in unserem Fall das übergeordnete Objekt, und erbt daher alle seine Methoden. Wir können das auch bei Dingen wie einem Objekt sehen. Objekt mit Kapital O Wenn wir speichern und aktualisieren, öffnen Sie dies, dieses Mal gehen wir in den Konstruktor und dies enthält eine Liste aller Methoden , die für dieses Objekt verfügbar sind. Wir werden uns diese später im Objektabschnitt ansehen. Nur um zusammenzufassen, wenn wir ein neues Objekt oder ein neues Array erstellen , was wir hier gemacht haben, werden diese neuen Arrays automatisch die Prototyp-Eigenschaft hinzugefügt, die es uns ermöglicht, auf Methoden zuzugreifen ein anderes Objekt. In unserem Fall werden diese alle vom übergeordneten Array-Konstruktor geerbt , und deshalb konnten wir nicht bestimmte Methoden für jedes dieser neuen Arrays wie Push und Spleiß und auch für diese vererbt verwenden dieser neuen Arrays wie Push und Spleiß und auch für diese vererbt Methoden, die verfügbar sind, können wir auch unsere eigenen Kundenwünsche erstellen. Wenn wir nun eine unserer eigenen Kopien dieses Konstruktors, in unserem Fall, Peperoni, an die Konsole protokollieren dieses Konstruktors, in unserem Fall, und aktualisieren. Mach das auf. Unten sehen wir diesen Proto, und wenn wir dies öffnen, ist dies nicht mit allen verfügbaren Methoden für dieses Array verknüpft . So gibt uns diese Kopie dieses Arrays Zugriff auf Dinge wie Push und Spleiß, die wir uns gerade angeschaut haben. Wenn wir diesen Proto-Abschnitt schließen, sehen wir neben dieser Eigenschaft für die Länge. Diese Länge ist nicht im Prototyp enthalten. Hier liegt der Unterschied zwischen einer Methode und einer Eigenschaft. Da jede der Methoden für jedes unserer Arrays verwendet werden kann , können sie über diesen Prototyp freigegeben werden. Diese längeneigenschaft ist jedoch spezifisch für dieses eine einzelne Array da jedes Array eine andere Länge haben kann. Es ist sinnvoll, dies nicht auf dem Prototyp zu teilen und dies nur für jedes einzelne Array verfügbar zu haben . Wir werden später näher darauf eingehen, aber zumindest im Moment haben Sie eine Vorstellung davon, woher diese Methoden kommen und wir werden in den kommenden Videos noch viel mehr dieser Methoden entdecken . 20. Arrays modifizieren: Obwohl Array-Methoden nicht streng in irgendeine Art von Kategorie gruppiert sind , einige von ihnen einige Merkmale auf. Zum Beispiel beinhaltet eine Array-Methode, die wir ausführen werden, etwas namens Iteration. Wir werden uns dies in einem zukünftigen Video ansehen, aber Sie können sich vorstellen, dass dies den Prozess für jedes Element innerhalb des Arrays wiederholt , genau wie eine Schleife, wenn Sie sie zuvor verwendet haben. Außerdem nehmen einige Methoden unser ursprüngliches Array und ändern es, und einige lassen unser ursprüngliches Array intakt und geben ein neues Array von Werten zurück , das auf dem Original basiert. Was wir uns jetzt ansehen werden, ist das Ändern von Arrays. Wir haben uns bereits einige Array-Methoden angeschaut, die vorhandene Arrays wie Push und Pop modifizieren. Wir haben die Push-Methoden als neues Element bis zum Ende eines Arrays verwendet . Es gibt auch die Pop-Methode , die das letzte Element aus dem Array entfernt. Wir müssen uns nicht nur mit der Änderung des ursprünglichen Arrays befassen , der zurückgegebene Wert kann auch wichtig sein. Gehen Sie zum Projektordner in diese Lektion, in der Arrays geändert werden, und öffnen Sie diese auch im Browser. Innerhalb des Skripts haben wir bereits drei Codezeilen eingerichtet. Man wird ein Pizza-Array mit drei Werten verwendet. Wir wählen dies dann aus, schieben einen neuen Wert an das Ende von Peperoni und protokollieren diesen dann an der Konsole. Wenn wir zum Browser in die Konsole gehen. Wir sehen hier, dass wir den neuen Array-Wert von Peperoni bis zum Ende verschoben haben. Nun, was ist mit dem Rückgabewert, den wir nach dem Ausführen dieser Methode zurückbekommen ? Sehen Sie dies, wir können dies innerhalb einer Variablen speichern. Nehmen wir an, const, rufen Sie dies zurück und setzen Sie dies auf den Wert, der zurückgegeben wird, nachdem diese Methode ausgeführt wurde. Wenn wir das dann greifen und es in das Konsolenprotokoll legen, aktualisieren wir jetzt den Wert von vier. Der zurückgegebene Wert, nachdem wir die Push-Methode verwendet haben , ist eine Reihe von Elementen innerhalb des Arrays nachdem dieses neue Element verschoben wurde. In unserem Fall haben wir jetzt vier Werte. Wir erhalten diesen Wert von vier zurückgegeben. Wie Sie sehen können, sind die Array-Methoden nicht nur an sich nützlich, sondern oft kann auch der zurückgegebene Wert nützlich sein, den wir zurückerhalten . Als Nächstes haben wir auch die Pop-Methode , um den letzten Wert aus dem Array zu entfernen. Lassen Sie uns diese Zeile gleich hier auskommentieren. Wir wählen unsere Pizza noch einmal aus, greifen auf die Pop-Methode und erstellen dann ein Konsolenprotokoll für die ursprüngliche Pizza. Wie Sie es erwarten würden, wenn wir die Pop-Methode anwenden, wird dadurch der Käsewert entfernt, wobei nur der Teig und die Soße übrig bleiben. Wie wäre der Rückgabewert nach dem Ausführen der Pop-Methode? Nun, lasst uns das überprüfen. Auch hier speichern wir diesen Rückgabewert und protokollieren ihn dann in der Konsole. Schauen wir uns das an, erfrischen und wir werden den Wert von Käse bekommen. Anstatt der Länge des Arrays, das wir zuvor gesehen haben, erhalten wir nach der Verwendung von Pop den Wert zurück, der vom Ende dieses Arrays entfernt wurde. Beide Methoden, die wir uns gerade angeschaut haben, der Push und der Pop, werden das Ende des Arrays beeinflussen. Tun Sie das Gegenteil und beeinflussen Sie den Anfang des Arrays. Wir haben auch zwei andere Methoden. Ich werde das nicht eingeben, da diese genau gleich funktionieren, aber unshift fügt am Anfang des Arrays einen neuen Wert hinzu, und shift entfernt den ersten Wert. Die Rückgabewerte spiegeln auch Push und Pop wider. Wenn wir mit unshift einen neuen Wert hinzufügen, erhalten wir das Land des neuen Arrays zurück. Wenn wir ein Objekt mit Verschiebungen entfernen, wird der Wert zurückgegeben, der entfernt wurde , der Teig wäre. Als nächstes haben wir die Spleißmethode, und das haben wir uns bereits angesehen, um Elemente an jeder Position im Array zu entfernen und zu ersetzen. Diese vorherigen, die wir uns angeschaut haben, arbeiten wir mit dem Anfang oder dem Ende eines Arrays. Splice wählt ein beliebiges Element aus, das Sie möchten. Es kann mehrere Parameter annehmen und es ist sehr flexibel. Dieses Beispiel hier hat drei Parameter. Erstens haben wir Nummer 1, und dies ist zunächst die Indexnummer des Arrays, die für uns die Soße ist. Als Nächstes die Anzahl der zu entfernenden Elemente. In unserem Fall wird man nur diesen Einzelwert von Soße entfernen. Der dritte Parameter, fügt an dieser Position einen neuen Wert ein, was zu dem neuen Array führt, das wir unten sehen. Werfen wir einen Blick auf einige weitere Beispiele in Visual Studio Code. Wir können diese Zeile gerade hier kommentieren. Wählen Sie unten unsere Pizza aus. Dann werfen wir einen tieferen Blick auf Spleiß. Wenn wir nur den ersten Parameter hinzufügen der die Ausgangsposition von einem ist, protokollieren wir die Pizza, nachdem diese Methode wirksam wurde. Mal sehen, was im Browser passiert. Erfrischen Sie sich und wir sehen nur den Wert von Teig. Dies liegt daran, dass wir mit Position 1 begonnen haben und dann alle Elemente entfernen, die bis zum Ende des Arrays folgen. Eine positive Zahl wie diese beginnt am Anfang eines Arrays. Wir können auch negative Werte verwenden , um am Ende des Arrays zu beginnen. Werfen wir einen Blick auf negative. Dies wird das letzte Käsestück entfernen, sogar unseren Teig und unsere Quelle. Wenn wir dies ändern, um negative zwei zu sein, werden dadurch die letzten beiden Gegenstände entfernt uns nur der Teig übrig bleiben. Wie wir wissen, können wir einen zweiten Parameter hinzufügen, wir starten diesen einfach wieder auf Nummer 1. Wir können einen zweiten Parameter hinzufügen, um nur eine bestimmte Anzahl von Werten zu entfernen. Nehmen wir an, wir wollten stattdessen die normale Sauce hier durch etwas Barbecuesoße ersetzen , genau wie wir es auf der Rutsche gesehen haben. Was wir tun müssen, ist, diesen einzigen Gegenstand zu entfernen , den ich in einem platziert habe, und diesen dann durch einen optionalen Wert zu ersetzen. In den Zitaten können wir dies durch Barbecuesauce ersetzen . Sparen Sie. Aktualisieren. unser zweiter Wert, unsere Indexposition 1, wurde unser zweiter Wert, unsere Indexposition 1, durch unsere Barbecuesauce ersetzt. Wenn Sie auch einen anderen Wert an derselben Position einfügen möchten einen anderen Wert an derselben Position einfügen , müssen Sie dies nur am Ende hinzufügen, getrennt durch ein Komma. Lass uns Paprika holen. Sie sollten kurz nach unserer Barbecuesauce hinzufügen. Wie Sie sehen können, ist diese Spleißmethode sehr flexibel, um Werte an jeder Indexposition innerhalb eines Arrays hinzuzufügen und zu entfernen. Als nächstes haben wir eine Sortierung, die die Array-Werte alphanumerisch sortiert . Grundsätzlich in alphabetischer Reihenfolge. Diese werden auch in aufsteigender Reihenfolge und auch der umgekehrten Methode sein, die, wie es klingt, die Reihenfolge der Array-Werte umkehrt. Wir müssen auch vorsichtig sein, wenn wir sortieren mit Zahlen verwenden. Wir schauen uns in nur einer Sekunde an warum. Zunächst einmal werden wir dies kommentieren und auf unsere Pizza zugreifen. Dann ruft es einfach die Sortiermethode selbst auf. Log die Pizza ein und lass uns sehen, was passiert. Wir haben Teig, Soße und Käse. Mal sehen, was im Browser passiert. Aktualisieren. Diese sind jetzt in alphabetischer Reihenfolge. Das funktioniert alles wie erwartet. Dies ist jedoch in Ordnung, da wir für jeden Array-Wert eine Textzeichenfolge verwenden . Wenn dies jedoch eine Reihe von Zahlen wäre, würde dies ein Problem verursachen. Der Grund ist, dass selbst wenn unser Array Zahlen enthält, alle Werte in Strings konvertiert und dann alphanumerisch angeordnet werden , also die Serie. Gehen wir zurück zum Redakteur. Anstelle dieser Strings gehen wir nach unten und stattdessen erstellt es ein Array von Zahlen. Dies können beliebige Werte darin sein. Ich gehe für 12, 1.000 und dann drei. Jetzt müssen wir auf das Nummers-Array zugreifen und dies auch an der Konsole protokollieren. Genau wie zuvor rufen wir die Soßenmethode ein. Aber mal sehen, was jetzt passiert, sind alles als Zahlen. Sagen Sie dies und jetzt erhalten wir den Wert von 1.000, 12 und drei. Was wir zurückbekommen sollten, sind drei, 12 und 1.000. Das ist alles völlig falsch. Der Grund dafür ist jedoch dass alle diese Zahlen in Strings konvertiert und dann als diese Zeichenfolgenwerte sortiert werden . Genauso, als wären alle diese Zahlen Wörter, beginnt die Sortierung mit dem allerersten Zeichen. Hier sehen wir den Wert von eins und auch den Wert von eins, weshalb diese beiden Zahlen am Anfang beginnen , weil eine niedriger als drei ist. Drei ist ganz am Ende platziert. Aber warum sind dann 1.000 niedriger als 12? Nun, das liegt daran, dass, genau wie beim Text, wenn das erste Zeichen genau das gleiche ist, genau wie diese beiden, es dann das zweite Zeichen vergleicht. Bei 1.000 ist dies der Wert von Null und dies ist der Wert von zwei, was bedeutet, dass zwei nach den 1.000 ein höherer Wert darauf gelegt wurden. Offensichtlich ist dies keine gute Möglichkeit , Arrays von Zahlen zu sortieren. Dafür kann die Sortiermethode auch eine Vergleichsfunktion übernehmen. Denken Sie daran, dass wir uns von früher angeschaut haben, wie eine Funktion funktioniert. Eine Funktion sieht genauso aus, wir haben das Schlüsselwort function. Dann geben wir dieser Funktion einen Namen. Wir verwenden die Klammern oder die Klammern und dann die geschweiften Klammern, um Code darin auszuführen. Optional kann dies auch einige Werte annehmen, und ich werde vorerst die Werte von a und b weitergeben. Machen Sie sich vorerst keine Sorgen, wir werden uns in nur einer Sekunde ansehen, was das ist. Was wir tun können, ist, dass wir diese Funktion ausschneiden und stattdessen in die Sortiermethode platzieren können , dass wir diese Funktion ausschneiden und stattdessen . Leg das rein. Wenn wir wollten, könnten wir diesen Funktionsnamen optional auch entfernen da er automatisch von dieser Sortiermethode aufgerufen wird . Dann werden wir innerhalb dieses Funktionskörpers einen Takeaway zurückgeben b. Nun, das mag etwas verwirrend aussehen aber was hier tatsächlich passiert, ist dass wir diese Funktion aufrufen Jeder Wert innerhalb dieses Zahlenarrays übergeben wir a und b, und dies können alle Namen unserer Wahl sein. Es spielt keine Rolle, dass dies a und b genannt wird, es könnte Nummer eins, Nummer zwei sein, es könnte alles sein, was Sie wollen. Aber der entscheidende Faktor ist, dass wir zwei Zahlen gleichzeitig vergleichen werden. Wenn dies zum ersten Mal beginnt, ersetzt die Sortierfunktion a und b durch die ersten beiden Werte von 12 und 1.000. Dies ist genau das Gleiche wie die Rückgabe 12, nehmen Sie 1.000 weg. Dann werden es beim zweiten Mal 1.000 von drei sein, und dies wird bis zum Ende des Arrays weitergehen. Nehmen Sie für den ersten, der 12 ist, 1.000 weg. Dies wird offensichtlich zu einer negativen Zahl führen. Dies wird an den Anfang des Arrays zurückgeschoben. Es wird dann durchgehen und dies für jedes Zahlenpaar wiederholen und für jedes Zahlenpaar diese im Vergleich in der richtigen Reihenfolge sortieren. Wenn wir diese Zeile entfernen, loggen wir immer noch den neuen Array-Wert ein, speichern und aktualisieren. Diese sind jetzt in der richtigen Reihenfolge. Wie Sie sehen können, ist dies sehr nützlich wenn wir eine Reihe von Zahlen haben. Wir möchten uns nicht auf die alphabetische Umwandlung verlassen, die wir im vorherigen Beispiel gesehen haben. Schließlich schauen wir uns das Gegenteil an. Umgekehrt ist im Vergleich dazu ziemlich einfach. Alles, was wir tun müssen, ist, dieses Beispiel zu kommentieren, auf unsere Nummern zuzugreifen und dann die Reverse-Array-Methode aufzurufen . Spar dir das auf. Anstatt den Wert von 12, 1.000 und drei zu haben, haben wir jetzt den Wert von drei, 1.000 und 12, was der umgekehrten Reihenfolge entspricht. 21. Neue Werte zurückgeben: Im vorherigen Video hatten die Methoden, die wir uns angeschaut haben , alles gemeinsam und das war, dass wir das vorhandene Array geändert haben, auch wenn sie in irgendeiner Weise einige zurückgegeben haben, wie einen wahren oder falschen Wert, das ursprüngliche Array wurde auch noch geändert. Dieses Video wird mit einigen weiteren Array-Methoden fortgesetzt, aber der Unterschied besteht darin, dass dieses Mal das ursprüngliche Array intakt bleibt und etwas Neues erstellt oder zurückgegeben wird. Ein Beispiel dafür haben wir bereits verwendet, nämlich die Include-Methode. Includes gibt einen True oder False zurück wenn ein bestimmter Wert im Array enthalten ist Daher wird das ursprüngliche Array nicht geändert. Wir haben auch die Join-Methode, die unsere Array-Werte annimmt und die unsere Array-Werte annimmt und sie als String miteinander verbindet. Innerhalb unseres Projekts, in der Datei Return New Values, bis hin zum Skript, haben wir dieses Beispiel gerade hier. Dies ist ein Beispiel für Includes. Wir prüfen, ob dieses Pizza-Array irgendeinen Teig enthält. Wenn dies der Fall ist, wird der Wert „true“ zurückgegeben; wenn nicht, ist es falsch. Wir geben dann zwei Werte aus. Das erste ist das Pizza-Array; und daher können wir prüfen, ob dies geändert wurde , und dann isIncluded, was der Rückgabewert ist. Speichern Sie dies und öffnen Sie dies im Browser. Aktualisieren Sie, und wir können sehen das ursprüngliche Array noch unverändert ist, und dann erhalten wir den Wert true. Wie Sie erwarten würden, wäre dies der Wert von falsch, wenn wir dies als etwas anderes ändern dies der Wert von falsch, wenn wir dies als etwas anderes würden. Wir können sehen, dass diese Include-Methode das ursprüngliche Array ebenso wie die Join-Methode intakt lässt . Join wird auch das ursprüngliche Array so belassen, wie es war und gibt eine neue Zeichenfolge zurück , die alle durch ein Komma getrennten Array-Werte enthält. Lassen Sie uns diese Zeile hier auskommentieren, eine zweite Konstante namens String einrichten, und dies wird gleich pizza.join sein, die alle Werte in unserem Array erfasst und sie als eine einzelne Saite. Ändern Sie diesen Wert in String, Refresh, und es gibt unsere neue Zeichenfolge durch Kommas getrennt. Wenn wir keine Kommas verwenden wollten, wenn wir möchten , dass ein anderes Zeichen diese Werte trennt, müssen wir nur ein neues Zeichen als String innerhalb dieser Join-Methode übergeben . Wenn wir zum Beispiel einen Bindestrich wollten, könnten wir diesen verwenden und auch wie bei jeder anderen Zeichenfolge könnten wir auch Leerzeichen hinzufügen, könnten wir auch Leerzeichen hinzufügen um jedes dieser Wörter etwas Platz hinzuzufügen. Als Nächstes arbeiten wir mit der Indexposition des Arrays. Da Array-Werte numerisch gespeichert werden, müssen wir oft auf einen Wert in einer bestimmten Indexnummer zugreifen , aber wenn wir die genaue Indexnummer nicht kennen , können wir eine Methode namens indexOf verwenden, um finde das für uns. In diesem ersten Beispiel übergeben wir indexOf den String-Wert von source, dann erhalten wir die Indexnummer zurück, und da Arrays an Position 0 beginnen, ist Sauce Position 1. Das zweite Beispiel zeigt lastIndexOf, und es mag so klingen den allerletzten Array-Wert auswählen. Es geht jedoch darum, das letzte Vorkommen eines Wertes zu ermitteln. Dieses Array hat den Wert des Teigs zweimal darin, also sucht es nach dem letzten Vorkommen dieses Wortes, das Indexposition 3 ist. Zurück zu unserem Redakteur werfen wir einen Blick auf einige Beispiele. Wir können diese Zeichenfolge entfernen und dieses Mal suchen wir nach der Indexnummer eines bestimmten Elements. Wenn wir zum Beispiel nach der Soße suchten wenn dies ein wirklich langes Array wäre, wollten wir genau herausfinden, an welcher Position sich das befindet. Dafür können wir unsere Konstante auf Pizza.indexOf setzen auf Pizza.indexOf und dann die Indexnummer mit dem Namen der Soße finden, und diese würde dann innerhalb dieser Konstante gespeichert, diese in unser Konsolenprotokoll übergeben und speichern, aktualisieren. Wie wir wissen, ist dies die Indexzahl von 1. Wir können uns für Käse entscheiden, und dies wird auch aktualisiert, und sobald wir die Indexnummer eines Array-Wertes haben , können wir alles tun, was wir wollen, wie zum Beispiel die Auswahl, wir können es entfernen und auch ersetzen. Als Nächstes haben wir LastIndexOf. Stellen Sie sicher, dass das I und das O Großbuchstaben sind. Denken Sie daran, dass dies, wie bei den Folien erwähnt , nicht den letzten Indexwert unseres Arrays findet, sondern das letzte Vorkommen eines bestimmten Wertes finden wird . Damit würde es bedeuten, wenn das Wort Käse zweimal eingelegt würde, also fügen wir am Anfang unseres Arrays auch Käse hinzu. Wir haben jetzt zwei Vorkommen mit demselben Wert. lastIndexOf gibt das letzte Vorkommen dieses Wortes zurück, anstatt dass dies Position 0 ist, wird die Indexnummer 3 zurückgegeben. Schauen wir uns das an. Aktualisieren Sie, und es gibt unseren Wert von drei. Wenn dies kurz vor unserer Soße verschoben würde, wäre das letzte Ereignis nun die Indexnummer 2. Auch für diesen, den lastIndexOf und auch den IndexOf, wenn er keine übereinstimmenden Werte findet, wird der Wert negativ 1 zurückgegeben. Wenn wir dies also ändern, um einen Wert zu sein , der nicht im wäre der zurückgegebene Wert negativ 1. Die letzten beiden Methoden, die wir uns ansehen werden , werden Slice und Concat sein. Slice ist eine Möglichkeit, einen Wert aus dem Array herauszuschneiden, und dieses Beispiel zeigt die Übergabe in Werte, die 1 und 2 sind. Der erste Wert von 1 ist die Ausgangsposition, und für dieses Beispiel wäre dies unsere Soße. Der zweite Wert von 2 ist die optionale Endposition, sodass alle Werte bis zu dieser Position aufgeteilt werden , aber nicht einschließlich dieser Position, so dass nur der Wert der Soße geschnitten wird. Wenn der n-Wert Nummer 3 statt 2 wäre, würde er sowohl die Soße als auch den Käse herausschneiden. Das zweite Beispiel ist Concat, und dies verbindet die Werte von zwei oder mehr Arrays. Wir haben das Pizza-Array und auch einige optionale Extras. Wenn wir diese zu einem einzigen Array kombinieren wollten, rufen wir eines dieser Arrays wie die Pizza auf, wir fügen die concat-Methode hinzu, dann übergeben wir das Extras Array, um alle Werte in einem einzigen Array zu verbinden . Werfen wir einen Blick auf diese in unserem Projektordner. Wir können den LastIndexOf entfernen und einen Blick darauf werfen, wie Slice funktioniert. Wir greifen auf unsere pizza.slice und drinnen von hier zu, wenn wir nur einen Wert wie diesen hinzufügen, wäre dies die Ausgangsposition. Daher würde dies alle Werte aus dem Array von Position 1 herausschneiden bis zum Ende des Arrays. Wir können dies innerhalb einer Variablen speichern, diese dann in der Konsole protokollieren und Slice initiieren. Alle Werte von Indexnummer 1 bis zum Ende des Arrays. Wir haben Teig, Käse und Soße. Refresh, und los geht's. Wie bei allen Methoden in diesem Video sehen wir immer noch, dass das ursprüngliche Array noch intakt ist. Stattdessen können wir ein neues Array mit diesen Slice-Werten zurückgeben . Genau wie wir es innerhalb dieser Folien gesehen haben, können wir auch eine optionale Endposition einschlagen. Dies wird unsere Indexnummer 1 beginnen und unsere Position bei Nummer 3 beenden , aber denken Sie daran, dass dieser dritte und endgültige Wert nicht einbezogen wird, also sollte dies nur den Teig und den Käse zurückgeben, und das sehen wir in die Konsole. In diesen letzten Videos haben wir uns die Slice-Methode angeschaut und auch eine ähnliche Methode, die Spleiß war. Auf der Oberfläche sehen beide Methoden ziemlich ähnlich aus, aber der Unterschied besteht darin, dass Spleiß das ursprüngliche Array entfernt oder hinzugefügt wird, und die Spleißmethode hält das ursprüngliche Array intakt und gibt stattdessen eine neue mit den ausgewählten Werten zurück. Der Anwendungsfall von beiden hängt davon ab, ob wir das ursprüngliche Array beibehalten möchten oder ob wir es ändern möchten. Schließlich werden wir uns die conkat-Methode ansehen. Um dies zu tun, benötigen wir, wie wir in den Folien gesehen haben, ein zweites Array zum Zusammenführen. Dies würde ein zweites Array namens Extras erzeugen, das einige zusätzliche Beläge enthält. Lass uns ein paar Paprika und auch ein paar Zwiebeln hinzufügen. Wir können dann den Wert von vorher auskommentieren. Erstellen Sie unsere NewPizza, und die NewPizza wird diesen beiden zusammengeführten Arrays entsprechen . Um dies zu tun, greifen wir zuerst auf eines unserer Arrays zu, wie Pizza, wir nennen dann die Methode, die concat war, und verschmelzen dann in den Extras. Speichern Sie und wieder im Browser. Ups, wir müssen nur die neue Pizza einloggen. Aktualisieren und in der Konsole, und wie bei allen Methoden in diesem Video bleibt das ursprüngliche Array intakt. Wir protokollieren die Pizza gerade hier. Wir haben ein neu zurückgegebenes NewPizza-Array, das eine Kombination aus dem Pizza-Array und auch den Extras darstellt. 22. Iterationsmethoden: Die letzte Gruppe von Methoden, die ich Ihnen in diesem Video zeigen werde , sind Methoden , die jedes dieser Array-Elemente durchlaufen und dann eine Funktion für jedes einzelne ausführen. In den Starterdateien gehen in die Iterationsmethoden, die in Abschnitt 2 und Nummer 5 enthalten sind, diese Iterationsmethoden, die für jeden eine Funktion ausführen , sehr nützlich, wenn wir viele Array-Elemente haben und ich möchte für jeden einen Vorgang wiederholen. Innerhalb der Indexseite Starter Files können Sie oben sehen, dass wir drei Benutzerrollen in den Kommentaren haben . Wenn Sie in der Vergangenheit etwas wie WordPress verwenden, wird dies sehr vertraut aussehen. Dies ist ein allgemeines Setup. Sie können hier sehen, dass wir alle Rollen und ein Array haben , und dies wird wirklich üblich sein, wenn wir mehrere Benutzer auf unserer Website haben und den Benutzern unterschiedliche Zugriffsebenen gewähren wollten . Zum Beispiel, wenn wir ein Use-Objekt mit dem Namen und allen restlichen Nutzungsinformationen hätten . Wir könnten auch ein Array wie dieses hinzufügen. Wir könnten alle Rollen und Berechtigungen platzieren , die dieser Benutzer besitzt. Dann könnten wir dies überprüfen bevor sie irgendwelche Aktionen auf unserer Website durchführen. Wenn sie beispielsweise einen Blogbeitrag veröffentlichen möchten, möchten wir möglicherweise alle Rollen innerhalb des Arrays durchlaufen und überprüfen, ob sie die richtigen Berechtigungen haben , bevor wir dies tun. Genau wie bei WordPress oben haben wir den Administrator , der den Zugriff in voller Größe ist, und er hat alle Berechtigungen, macht so ziemlich alles auf einer einzigen Site. Wir haben den Autor und der Autor kann Dinge wie seine eigenen Blogbeiträge nicht veröffentlichen. Sie können sie auch bearbeiten. Sie sind effektiv für ihre eigenen Inhalte verantwortlich. Nun, dies wird einen Abonnenten haben, der im Allgemeinen die Standardeinstellungen einer WordPress-Site ist . Sie können unsere Seite nicht verwalten, sie können keine Inhalte bearbeiten. Alles, was sie tun können, ist grundsätzlich ihr eigenes Profil zu verwalten. Was wir hier tun werden, ist eine Blogpost-Seite zu simulieren , ein Benutzer möglicherweise seine eigenen Blogbeiträge erstellen kann. Sobald der Benutzer sich angemeldet und einen Blogbeitrag erstellt hat einen Blogbeitrag erstellt und dann auf die Schaltfläche Veröffentlichen klickt, möchten wir zuerst die Rollen des Benutzers durchlaufen und überprüfen, ob die richtigen hat berechtigungen. In unserem Fall möchten wir prüfen, ob es sich um einen Administrator oder ein Autor handelt. Wenn dies der Fall ist, können sie weitermachen und veröffentlichen. Wenn nicht, benötigen sie eine Erlaubnis bevor dies auf unserer Website live ist, und um dies zu tun, erstellen wir eine Funktion. Denn denken Sie daran, dass diese Iterationsmethoden eine Funktion für jeden Wert in unserem Array ausführen . Diese Funktion ruft diese canPublish auf und dies wird einen True- oder einen falschen Wert zurückgeben. Überprüfen Sie dazu auch die Rollen, die wir in einer Rolle an die Funktion übergeben müssen , und dann möchten wir prüfen, ob die Rolle dem Administrator entspricht oder dem Autor entspricht. Wir können die Rolle verwenden, das Dreifache gleich, um zu überprüfen, ob die Zeile, die übergeben wird , zuerst dem Admin entspricht. Alle Benutzer benötigen [unhörbar], was der oder Operator ist, den wir uns zuvor angeschaut haben. Wir können auch testen, ob die Rolle dem Autor entspricht. Wenn ja, geben wir diesen Wert zurück, der entweder wahr oder falsch ist , und um diesen Rückgabewert zu sehen, erstellen wir ein Konsolenprotokoll, blasen einfach und dieses Konsolenprotokoll wird diese Funktion aufrufen. Übergeben Sie es canPublish und wir werden zuerst den Admin übergeben. Diese Admin-Zeichenfolge wird diese Rolle konvertiert und wir prüfen, dass diese Rolle dem Administrator oder dem Autor entspricht. Rüber zur Konsole. Aktualisieren Sie diese Seite, und das stimmt natürlich. Probieren wir auch den Autor aus, was die zweite Bedingung ist und das sollte auch zutreffen. Schließlich ist der Abonnent und dieser falsch. Unsere Funktion funktioniert einwandfrei. Aber im Moment ist es sehr manuell. Wir müssen jede unserer Saiten manuell übergeben und hier einchecken, jeweils jeweils einzeln. Das ist in Ordnung, wenn wir nur drei separate Rollen haben. Aber stellen Sie sich vor, Sie müssten dies zum Beispiel 50 verschiedene Rollen auf unserer Website wiederholen , dies wird zu einem langen und mühsamen Prozess. Nun, um dabei zu helfen, gehen wir auf den gesamten Zweck dieses Videos zurück , nämlich die Iterationsmethoden zu betrachten. Dies spart viel Handarbeit, indem Sie jede dieser Rollen durchlaufen und prüfen, ob sie einen bestimmten Wert enthält. Die erste Iterationsmethode, die ich mir ansehen werde, ist einige und genau wie andere Methoden werden wir zunächst mit dem Variablennamen auf das Array zugreifen, und dann rufen wir die Methode etwas danach auf, und dies wird überprüfe, ob einige der Array-Werte viel sind, aber viel wofür? Nun, an demselben Beispiel können wir diese Funktion in die Methode „some“ verschieben. Schnappen Sie sich den ganzen Code hier, legen Sie diesen raus und legen Sie ihn direkt in die Klammern. Wir können diese Funktionsnamen nicht entfernen da wir nicht brauchen, die Rolle ist manuell. Es wird stattdessen einmal für jeden Wert innerhalb dieses Arrays aufgerufen und dies wird oft als Callback-Funktion bezeichnet. Diese Funktion würde jetzt dreimal aufgerufen. Das erste Mal würde die Rolle die Admin-Zeichenfolge übernehmen , dann wäre es Autor, und dann wäre das dritte Mal der Abonnent und für jede dieser Rollen würde es dann den Code innerhalb der Funktion ausführen. Genau wie bei all dieser Funktion gibt immer noch einen wahren oder falschen Wert zurück und wir können diesen Rückgabewert innerhalb einer Variablen erfassen. Innerhalb des Konsolenprotokolls rufen wir immer noch CanPublish auf. Aber dieses Mal ist dies keine Funktion, also können wir die Klammern entfernen und einfach den Wert dieser Konstante protokollieren. Jetzt gibt uns ein Speichern, Aktualisieren und dieser Wert ist jetzt gleich true. Dies ist der Fall, weil mindestens eine der Rollen in hier übereinstimmt. Wenn keiner davon mit Admin oder Autor übereinstimmt , habe ich dies einfach geändert, wir können uns für Moderator und sagen wir Gast, speichern und aktualisieren, und das ist jetzt der Wert von false. Wenn man sich diese Folie ansieht, ist dies die gleiche Methode die wir oben sehen. Um es zusammenzufassen, wird true zurückgegeben, wenn einer oder mehrere der Array-Werte viel für die Callback-Funktion geeignet sind. Aber was ist stattdessen, wenn wir nur einen wahren Wert erhalten wollten , wenn alle Array-Elemente übereinstimmen? Nun, für diesen Anwendungsfall, wie die jede Methode, und wir können unten ein Beispiel sehen. Dies ist eine Reihe der diesjährigen Testergebnisse. Dann führen wir für jeden Wert im Array eine Callback-Funktion aus. Für jede zwei Rückgabe true müssen alle Array-Elemente über 95 sein. Wenn ein einzelner Wert unter 95 ist, führt dies dazu, dass er fehlschlägt und einen falschen Wert zurückgibt. Wir verwenden diese Methoden, wenn wir ähnliche Werte oder jeden Wert zurückgeben möchten . Anstatt nur ein eigenständiges Array wie dieses zu haben, ist es üblicher, dass dies an ein Benutzerobjekt angehängt wird. Stellen Sie sich vor, wir hätten eine Site mit mehreren Benutzern, alle in einem Array gespeichert wurden. Dann hat jeder unserer Benutzer sein eigenes Benutzerobjekt. Öffne die geschweiften Klammern für Objekte. Zuerst haben wir nur eine Benutzer-ID von einer Person, getrennt durch ein Komma. Die zweite Eigenschaft der Rolle des Admins. Was ich tun werde, ist am Ende ein Komma hinzuzufügen und dann zu kopieren. Wir fügen das noch ein paar Mal ein. Benutzer 2, diesmal eine andere Rolle des Autors. Benutzer 3, dieser kann auch Autor zwei sein, und schließlich kann Nummer vier der Abonnent sein. Verwendung einer Iterationsmethode Durch die Verwendung einer Iterationsmethode können wir jedes dieser Benutzerobjekte durchleben und nach einer bestimmten Rolle filtern. Stellen wir uns vor, wir wollten diesen bestimmten Benutzer ansprechen, der die Rolle des Abonnenten ist. Da dies ein Array dafür ist, müssen wir möglicherweise auch die Indexnummer finden , bevor wir diese Informationen abrufen können. Dafür haben wir etwas namens find-Index. Dieses Beispiel enthält auch ein Array von Benutzerobjekten. Wir nennen es dann find index-Methode und es wird eine Funktion für jeden dieser Werte ausführen. Jeder dieser Werte wird im Benutzerumfang der Funktionen gespeichert . In den Rückgabeanweisungen greifen wir auf den Benutzer zu, wählen die Rolle aus und prüfen, ob sie dem Administrator entspricht. Es wird dann die Indexposition des Arrays für die erste Übereinstimmung zurückgeben . In diesem Beispiel ist es der erste Wert, der Position Null ist. Probieren wir es selbst aus. Zurück zu unserer Indexseite werde ich nur die Dinge klären. Sogar nur dieses User-Array. Dann greifen wir unten auf unsere Benutzer zu, wir rufen dann die Methode auf, die wir uns gerade angeschaut haben, namens find index. Wie alle anderen Methoden wird dies auch eine Funktion übernehmen und wir müssen auch den Benutzer weitergeben. Genau wie zuvor wird diese Funktion einmal für jedes Element innerhalb dieses Arrays aufgerufen . Das erste Mal, dass es durchläuft, wird Benutzer 1, Benutzer 2 usw. sein. Dann möchte ich auf den Benutzer zugreifen , ich verschiebe es einfach. Dann wollen wir auf die individuelle Rolle zugreifen. Wenn wir diese Abonnentenrolle finden wollten, könnten wir prüfen, ob dies der Abonnentenfolge entspricht . Dann ist return ein Wert, der wahr oder falsch sein wird. Speichern Sie dann diesen zurückgegebenen Wert innerhalb einer Variablen. Schauen wir uns das an, indem wir ein Konsolenprotokoll machen. Bedeutet, diese Indexvariable zu protokollieren, den Browser zu aktualisieren und wir erhalten die Indexnummer drei zurück . Dies ist die Indexzahl 0, 1, 2 und 3. Wir wissen jetzt, dass das alles richtig funktioniert. Wie wir sehen können, gibt dies die Indexposition zurück. Aber was ist, wenn wir den tatsächlichen Wert wie dieses vollständige Objekt wollen ? Nun, dafür haben wir eine Methode namens find zur Verfügung. Find wählt die erste Übereinstimmung in unserem Array aus. Wenn wir beispielsweise mehrere Abonnenten hätten, wäre die Find-Methode nützlich um die allererste zu finden, die sie stößt. Dieses Beispiel enthält auch ein Array von Benutzerobjekten. Wir rufen dann die find-Methode und sie wird eine Funktion für jeden der Werte ausführen. Hier prüfen wir, ob die Rolle dem Autor entspricht, und dann gibt find das erste Objekt zurück, das eine Übereinstimmung ist. In unserem Fall ist es der Benutzer Nummer zwei. In diesem Fall ändern wir dies einfach, um gefunden zu werden. Dieses Mal prüfen wir, ob die Rolle des Benutzers dem Autor entspricht. Beide haben zwei Autorenrollen innerhalb des Arrays, und diese Suchmethode wählt die allererste aus. Wir benennen dies in den Autor um und protokollieren dies auch in der Konsole. Speichern und aktualisieren, öffnen Sie dies. Dies hat Benutzer Nummer zwei ausgewählt, der die erste unserer beiden Autorenrollen ist. Dies ist sehr nützlich, um die erste Übereinstimmung in unserem Array zu finden . Aber was wäre, wenn wir beide Benutzer auswählen wollten , die übereinstimmen? Nun, dafür haben wir auch eine Methode namens filter. Im selben Beispiel wie zuvor haben wir hier nur die find-Methode als Filter geändert , und dies wird alle Übereinstimmungen anstelle der ersten zurückgeben . heißt, wir bekommen ein neues Array zurück , das Benutzer 2 und auch 3 enthält. Alles, was wir tun, ist zu ändern, um Filter zu sein, und stattdessen bekommen wir mehrere Autoren zurück, also fügen wir jedem von diesen ein s hinzu. Speichern und aktualisieren. Wir sehen jetzt ein Array mit zwei separaten Objekten. Wenn wir das öffnen, können wir hier sehen, dass wir Benutzer Nummer zwei und auch Nummer drei haben. Es sind alles wirklich nützliche Methoden, um Werte innerhalb eines Arrays auszuwählen. Auch einige Dinge, die wir beachten sollten ist seit ES 2015, wir auch eine andere Art von Funktionssyntax haben , die wir verwenden können, und dies wird als Pfeilfunktion bezeichnet. Pfeilfunktionen weisen einige Verhaltensunterschiede zu dieser traditionellen Funktion auf, die wir in einem späteren Abschnitt genauer betrachten werden. Im Moment können wir sie aber auch verwenden, um unseren Funktionscode zu verkürzen. Die Möglichkeit, dies zu tun, besteht darin, dieses Funktionsschlüsselwort zu entfernen, und direkt nach diesen Klammern platzieren wir dann einen Pfeil. Ein Pfeil besteht aus den Gleichen und der rechten Winkelklammer, um diese Pfeilfunktionseffekte zu erzeugen. So wie es aussieht, ist dieser Code vollständig gültig. Das ist in Ordnung zu benutzen. Wenn wir dies speichern und aktualisieren würden, sehen wir immer noch dieselben zwei Ergebnisse, aber wir können diese Funktion auch noch weiter verkürzen. Wir können diesen ganzen Code in einer einzigen Zeile platzieren , indem wir diese geschweiften Klammern entfernen. Wir bewegen beide und legen das alles auf eine einzige Zeile. Bring das einfach so zur Sprache. Dann schreiben wir eine Pfeilfunktion wie diese in eine eigene Zeile. Wir können das return Keyword auch an entfernen, da dieses automatisch für uns zurückgegeben wird. Auch dies ist alles vollkommen gültig und wenn wir den Browser aktualisieren, sehen wir immer noch dieselben zwei Ergebnisse. Schließlich, wenn wir nur einen einzigen Parameter hinter dieser Funktion haben , können wir sogar die umgebenden Klammern genau so entfernen . Aber Sie wissen, wenn wir mehrere Parameter haben, mussten wir hier einen zweiten Wert übergeben, wir müssten immer noch die umgebenden Klammern hinzufügen. Eine Syntax wird oft verwendet, um solche Dinge beizubehalten, die einfacher sind und unseren gesamten Code in einer einzigen Zeile hinzufügen . Es liegt an Ihnen, welchen Typ Sie lieber in Ihrem eigenen Code verwenden möchten. Es ist jedoch nützlich zu wissen, dass diese beiden Stile existieren, da Sie online viele Beispiele sehen werden. Diese letzten paar Videos habe ich Ihnen einige der beliebtesten Array-Methoden gezeigt , und es gibt noch ein paar mehr, aber sie funktionieren im Allgemeinen auf ähnliche Weise. Es gibt auch mehr dieser Iterationsmethoden. In Zukunft werden wir uns diese genauer ansehen. 23. Reduziermethode: Wir werden jetzt eine Technik behandeln, um ein Array auf einen einzelnen Wert zu reduzieren . Ich mache das mit der reduzierten Methode. Die reduzierte Methode nimmt, wie die vorherige, die wir uns angesehen haben, eine Funktion auf und führt diese Funktion für jeden Array-Wert aus. Es ist einfacher. Wir könnten ein Array von Zahlen zusammenfügen und dann die Summe aller addierten Zahlen zurückgeben . Natürlich können wir auch bei Bedarf viel komplexer werden. Werfen wir einen Blick auf einige Beispiele in diesen Datendateien. Gehen Sie in dieses, welches die Reduzierstücke sind. Sie können sehen, dass wir innerhalb eines Skripts ein einfaches Zahlen-Array haben , das fünf verschiedene Werte enthält. Wenn wir nur alle diese Werte addieren und die Summe zurückgeben möchten , ist die reduzierte Methode dafür perfekt. Wie bei anderen Methoden können wir die reduzierte Methode direkt unten auf den Namen des Arrays aufrufen . Was in unserem Fall Zahlen sind. Rufen Sie reduzieren auf, fügen Sie die Klammern hinzu, und dann führen wir für jeden Wert in diesem Array eine Funktion aus. Diese Funktion könnte genau wie zuvor direkt in die Klammern übergeben werden , oder genau wie bei allen Methoden könnten wir diese auch getrennt halten, wenn wir wollten. Dies hat auch den zusätzlichen Vorteil, dass es wiederverwendbarer ist, wenn wir es auch anderswo verwenden wollen. So oder so ist es völlig in Ordnung. In diesem Beispiel möchten wir Ihnen jedoch den alternativen Ansatz zeigen, der darin besteht, die Funktion separat zu erstellen. Erstellen Sie unsere Funktion direkt darunter. Da dies alle Zahlen addiert und die Summe zurückgibt, geben wir diesem einen Namen Summe, fügen die Klammern und dann die geschweiften Klammern hinzu. Dafür werden zwei Parameter innerhalb der Klammern der Funktion berücksichtigt . Dies wird die Summe sein, die durch ein Komma getrennt ist. Der nächste wird der aktuelle Wert sein. Dann werden wir innerhalb der Klammern oder innerhalb der Klammern die Summe zurückgeben, die zum aktuellen Wert addiert wird . Ich erkläre, was das alles macht in nur einem Moment genauer. Da diese Funktion jedoch von der reduzierten Methode getrennt ist, müssen wir diese auch innerhalb der Klammern aufrufen. Auch hier, nur um es klarzustellen, ist dies genau das Gleiche. Platzieren wir das direkt hier drin. Zurück zu dieser Funktion, und dies wird einmal für jeden Array-Werte aufgerufen. In diesem Beispiel wird es fünfmal laufen. Hier werden diese beiden Parameter ins Spiel kommen. Für jede Schleife ist die aktuelle Zahl auf der rechten Seite ziemlich selbsterklärend. Dies ist der aktuelle Array-Wert wie 72 und 33. Aber zuerst haben wir einen ganzen Streit auf der linken Seite. Dies ist die Summe aus der vorherigen Schleife, die oft als Akkumulator bezeichnet wird, da sie die vorherigen Ergebnisse akkumuliert. Um zu klären, was hier vor sich geht, schauen wir uns mal an. Wir fügen hier einen kurzen Kommentar hinzu. diese Funktion zum ersten Mal ausgeführt wird, wird dies die Schleife Nummer 1 sein, und die Summe , die hier ist, wird gleich Null sein, da wir noch keine Werte addiert haben. Der zweite Wert des aktuellen Wertes ist 72, da dies der allererste Wert innerhalb des Arrays ist. Fahren Sie dann mit Schleife Nummer 2 fort. Zuallererst haben wir wieder die Summe, die diese beiden Werte addiert sind. Diese beiden addierten Werte werden gleich 72 sein. Dann ist der aktuelle Wert für diesen Wert Nummer 33. Auch hier genau das Gleiche für Schleife 3. Diesmal fügen wir diese beiden Werte zusammen, was uns das Ergebnis einer 105 geben wird. Dann ist der aktuelle Wert diesmal 108. Sie können hier ein Muster für jede Schleife sehen, die wir beide Werte zusammenfügen werden. Diesmal in Schleife Nummer 4. Diese beiden addierten zusammen, für Schleife Nummer 4, werden 213 sein. Der aktuelle Wert für Schleife Nummer 4 ist 222. Dann endlich, Schleife Nummer 5. Diese beiden Werte, die für Schleife 5 addiert werden, entsprechen 435, wobei der aktuelle Wert Nummer 6 ist. Natürlich, also nimm mein Wort dafür nicht. Wir melden uns bei der Konsole an und prüfen, was die Werte sind. Denken Sie daran, dass wir diesen endgültigen Wert von der Funktion zurückgeben . Wir können dies innerhalb einer Variablen speichern. Sagen Sie, dass das const result diesem Rückgabewert entspricht, und dann einem Konsolenprotokoll. Nur damit Sie auch wissen, dass Visual Studio-Code ein Konsolenprotokoll oder eine Verknüpfung dazu ausführen wird , wenn wir nur das Wort log eingeben und dann auf „Enter“ klicken, geben Sie das Ergebnis ein. Wir können dies im Browser überprüfen. Prüfen Sie, in die Konsole, und wir sehen den Wert von 441, die letzten beiden Werte ist, die zusammen addiert werden. Dies wird hinzugefügt, um alle fünf dieser Zahlen zu erhalten und dann den endgültigen Wert innerhalb dieser Funktion zurückzugeben. Mit diesen beiden Werten können wir auch alles andere tun, was wir wollen, wie zum Beispiel das Subtrahieren. Lassen Sie uns das ändern, um negativ zu sein. Machen Sie dies einen Test und wir erhalten den Rückgabewert von negativem 297. Dies wird genau das Gleiche tun, wir werden fünfmal durchlaufen, aber dieses Mal ziehen wir den aktuellen Wert von der Summe ab, weshalb wir diesen negativen Wert erhalten. Ich setze das einfach wieder ein, um ein Plus zu sein. Dies summiert unsere Array-Werte von links nach rechts, wie wir es gerade in diesem Beispiel gesehen haben. Wir haben auch eine ähnliche Methode, die von rechts nach links funktioniert . Das ist sehr einfach. Alles, was wir tun müssen, ist die Reduzierung auf ReduceRight zu ändern. Geben Sie dies speichern und aktualisieren, und wir erhalten den gleichen Wert von 441, da wir dieselben Zahlen addieren, aber dieses Mal ist es nur in einer anderen Reihenfolge. Um es noch einmal zu überprüfen, geht dies von rechts nach links. Wir sind uns vollkommen sicher, obwohl wir gerade hier denselben Wert haben. Wir können auch eine optionale Indexnummer hinzufügen. Fügen Sie dies als dritten Parameter zu unserem Reduzierstück hinzu. Kurz bevor wir das zurückgeben, können wir ein Konsolenprotokoll erstellen. Protokollieren Sie den Wert des Indexes. Wir sollten sehen, dass die Indexzahl von der höchsten zur niedrigsten Zahl geht . Dies ist die letzte Zahl, die die Indexzahl 3 ist, bis hin zu Null. Beide Funktionen, das ReduceRight, und auch die Reduzierung sind aus vielen Gründen nützlich. Möglicherweise möchten wir einen Benutzer-Score oder Punkte auf diese Weise verfolgen oder Punkte auf diese Weise und dann alle diese Werte am Ende zusammen summieren. Diese Informationen können dann auch auf andere Weise verwendet werden, vielleicht um die durchschnittliche Punktzahl zu ermitteln. Um dies zu tun, um die durchschnittliche Zahl in diesem Array herauszufinden . Direkt unter unserer ReduceRight-Methode erstelle ich eine neue Konstante. Nur das alles nennt man den Durchschnitt, und setze dies auf eine Berechnung. Die Berechnung, die wir machen wollen besteht darin, die vollständigen Ergebnisse zu erzielen, was der Wert all dieser Zusätze ist. Dies ist Schritt 1, und dann müssen wir dies durch die Anzahl der Elemente innerhalb des Arrays dividieren . Auch hier können wir das ziemlich einfach machen. Wir müssen auf unser vollständiges Zahlen-Array und dann auf die Eigenschaft zugreifen , die Länge ist, die wir uns in der Vergangenheit angeschaut haben. Wir können dann den Durchschnitt konsolenprotokollieren, zum Browser gehen und aktualisieren. Wir können jetzt sehen, dass der Durchschnitt 88,2 beträgt. 24. Map und forEach: Ich möchte Ihnen jetzt zwei weitere Array-Methoden zeigen. Wie Sie am Titel sehen können, ist dies Map und forEach. Diese beiden Methoden sind auch Iterationsmethoden, wie wir es uns zuvor angeschaut haben. Sie werden jedes Array-Element durchlaufen und dann eine Callback-Funktion ausführen. Viele der Array-Methoden, die wir bisher Code haben, und viel spezifischer, wie das Sortieren eines Arrays, können wir filtern, wir können überprüfen, ob ein Wert existiert, aber diese beiden Methoden, die MAP & sind forEach, sind viel allgemeiner. Die Verwendung für ihren Zweck beschränkt sich nur auf den Code , den wir in die Funktion schreiben. Öffnen Sie die Map- und ForEach-Datei. Dann werden innerhalb dieses Skripts zwei Arrays haben. Wir werden ein einfaches Zahlen-Array haben und eine Reihe von Blog-Posts haben, die wir uns in nur einem Moment ansehen werden. Aber jetzt greifen wir zunächst auf die Zahlen zu und rufen dann wie immer die Methode mit Punkt oder mit dem Namen forEach auf. Wir könnten eine Funktion schreiben, die genau wie wir es zuvor hier angeschaut haben . Mit der traditionelleren Funktionssyntax oder auch für die Praxis werde ich dies in eine Pfeilfunktion umwandeln. Eine Pfeilfunktion, die wir uns zuvor angeschaut haben, beginnt mit den Klammern genau so. Wir schreiben dann einen Pfeil mit den Gleichen und dem Größeren als Symbol. Dann haben wir ein paar verschiedene Möglichkeiten. Wenn wir wollten, könnten wir mehrere Codezeilen innerhalb der geschweiften Klammern hinzufügen . Wir könnten unseren Code hineinschreiben, und dann könnten wir das Schlüsselwort return verwenden um einen Wert von dieser Funktion zurückzugeben , oder alternativ könnten wir, wie wir es zuvor gesehen haben, das Schlüsselwort return emittieren und lege das auf eine einzige Zeile. Wenn wir dies in eine einzige Zeile legen, können wir diese geschweiften Klammern auch entfernen, wodurch der Code direkt zurückgegeben wird. Lassen Sie uns ein Konsolenprotokoll als Rückgabewert machen. Denken Sie daran, dass, da wir über jeden Wert im Zahlen-Array schleifen, dies auch die Zahl als Parameter aufnehmen wird. Jetzt haben wir die Freiheit, mit diesem Parameter alles zu tun, was wir wollen, wie zum Beispiel ein einfaches Konsolenprotokoll. Wir können jetzt die Zahl angeben, multiplizieren mit zwei. Schauen Sie sich dies in der Konsolenaktualisierung an, damit wir 144, 66 sehen. Dies sind nur alle diese Zahlen multipliziert mit zwei. Die Indexnummer ist auch verfügbar, wenn wir diese als Parameter einfügen möchten. Denken Sie an ein Komma und den Index, dann können wir diesen Index an jedem Ort verwenden, an dem wir in unserer Funktion möchten . Lasst uns das entfernen. Ich möchte die Vorlagenzeichenfolge mit den Backticks hinzufügen, damit wir eine Variable einfügen können. Wir haben den Text der Zahl zur Verfügung , der ein $ -Symbol ist, und die geschweiften Klammern übergeben den Index, dann einen Doppelpunkt. Was wir hier sagen werden, ist Nummer eins und dann ein Doppelpunkt. Dann gib auch unsere Nummer ein. Wenn wir wollen, können wir etwas Ähnliches wie die vorherigen Versuche tun , die mit zwei multipliziert werden. Speichern wir dies und weiter im Browser. Da sind wir los. Wir können auf die Zahl Null, die Nummer eins, die Nummer zwei zugreifen und jeden einzelnen Werte sehen. Auch wenn wir wollten, können wir dies auch manipulieren. Wenn wir möchten, dass dies bei Index Nummer eins beginnt, könnten wir den Wert von eins hinzufügen. Dann beginnt dies dieses Mal, anstatt bei Nummer Null zu beginnen, bei Nummer eins. Wie bereits erwähnt, können wir jeden Code innerhalb dieser Funktion schreiben und unser Post-Array von oben nehmen. Werfen wir einen Blick auf ein Beispiel mit einem Array von Objekten. Was wir diesmal tun werden ist, alle unsere Posts zu durchlaufen und dann eine Funktion für jedes dieser Objekte auszuführen. Wir wählen den Titel des Blogeintrags aus und wandeln dann den Text in Großbuchstaben um. Zum Üben beginnen wir erneut, greifen auf unsere Posts zu, rufen für jeden auf, öffnen die Klammern und können dann eine Funktion mit jeder Syntax einfügen, die Sie möchten. In diesem Video bleibe ich bei der Pfeilfunktion, die genau so ist. Fügen Sie dann erneut ein Konsolenprotokoll ein. Dieses Mal durchlaufen wir alle Posts. Diese Funktion nimmt für jeden Beitrag einen Parameter auf. Wenn Sie sich daran erinnern, dass wir, wenn wir nur einen einzigen Parameter wie diesen haben , auch die umgebenden Klammern entfernen, um dies etwas kürzer zu machen. Manchmal, wenn Sie genau so speichern, wird der Texteditor diese Back-in erneut einsetzen, aber das ist völlig in Ordnung. Was wir jetzt tun werden, ist auf diese einzelnen Posts innerhalb unseres Konsolenprotokolls zuzugreifen . Da es sich um ein Objekt handelt, müssen wir auf einen der Schlüssel zugreifen, z. B. den Titel oder den Text. Ich gehe zum Titel. Dann füge ich auch eine Methode namens TupperCase ein. Bisher haben wir in diesem Abschnitt viele Methoden verwendet, die wir für ein Array aufrufen werden, aber TupperCase ist auch eine Methode. Diese wird jedoch für eine Textzeichenfolge verwendet. Probieren wir das mal aus. Rüber zum Browser und aktualisieren. Es gibt unsere drei Titel, also rufen wir die Funktion dreimal und für jeden wählen wir den Titel aus und wandeln den Text in Großbuchstaben um. Dies ist die forEach-Methode, aber was ist mit Map? Gehen wir zu unserem Editor und alles, was wir tun müssen, ist forEach zu ändern, wir zuordnen, speichern und aktualisieren, und wir erhalten die exakt gleichen Werte in der Konsole zurück. Zwischen Map und ForEach sehen sie sehr ähnlich aus. Was genau ist der Unterschied? Es gibt ein paar Gründe, warum sie unterschiedlich sind und einer ist der Rückgabewert. Um dies zu sehen, müssen wir diesen zurückgegebenen Wert innerhalb einer Konstanten oder einer Variablen speichern . Wir werden neue Beiträge sagen und dies auf unseren Rückgabewert setzen, ändert sich zurück zu forEach. Anstelle des Konsolenprotokolls wird dann einfach den Wert dieser Transformation zurückgegeben. Denken Sie daran, dass wir möglicherweise eine einzelne Zeile mit einer Pfeilfunktion wie dieser haben. Dies wird diesen Wert automatisch für uns zurückgeben. Um diesen Ort in einem Konsolenprotokoll mit dem Rückgabewert zu sehen , der in neuen Posts gespeichert ist , speichern Sie in den Entwicklertools und wir sehen diesen neuen Wert von undefined. Wir werden undefiniert zurück, weil uns nichts zurückgegeben wird. forEach, wir führen eine Funktion für jeden dieser Array-Werte aus und ändern dann direkt dieses ursprüngliche Array ohne etwas zurückzugeben. Map hingegen erhalten wir, wenn wir dies ändern, speichern und aktualisieren, ein neues Array zurück , das frei von den Transformationswerten ist. Dies ist der Hauptunterschied zwischen Map und ForEach. forEach, wir ändern das ursprüngliche Array. Wenn Sie Map verwenden, bleibt dies das ursprüngliche Array in Takt und gibt stattdessen ein neues Array mit den geänderten Werten zurück , also ist dies ein wichtiger Unterschied. Ein weiterer wesentlicher Unterschied zwischen diesen beiden Methoden ist, wenn es sich um eine Map handelt, wir auch auf mehrere Methoden ketten können. Um dies klarer zu sehen, werde ich dies auf mehrere Zeilen und den Map-Abschnitt auf eine eigene Zeile legen , das Semikolon entfernen und dann können wir eine Filtermethode am Ende verketten. den gleichen Stil beibehalten, fügen Sie eine Pfeilfunktion hinzu, die den neuen Wert aufnimmt, unseren Pfeil einrichtet und dann können wir jeden der Blogbeiträge herausfiltern , in denen der bestimmte Wert oder Titel befindet gleich sein“ Wie man ein Ninja Teil zwei sein kann. Dies muss auch in Großbuchstaben sein, da wir dies bereits mit der Map direkt oben transformiert haben. Wie wir bereits wissen, ist dieser Titel enthalten, also filtert dies unseren einzigen Beitrag heraus. Wenn wir zur Konsole gehen, können wir dies sehen, wenn wir aktualisieren. Jetzt wird ein neues Array mit diesem einen einzigen gefilterten Wert an uns zurückgeben . Wenn wir nicht nur ein neues Array mit diesem einen einzigen Wert wollen , möchten wir vielleicht nur prüfen, ob dieser Titel in unseren Beiträgen enthalten ist , oder wir könnten dies tun, indem wir den Filter mit der Methode etwas ändern. Dies wird einen wahren oder falschen Wert zurückgeben, wie wir bereits wissen, der Titel ist bereits enthalten. Wenn wir das jetzt aktualisieren, erhalten wir den Wert von true zurück. Wenn wir dies ändern, um etwas zu sein, das nicht enthalten ist, wird der Wert false zurückgegeben. Dies ist sehr nützlich, um die genauen Daten zurückzuerhalten , die wir benötigen. Möglicherweise möchten wir auch die Indexposition dieser Array-Elemente erfassen . Wir können dies tun, indem wir dies wieder in einen der anerkannten Titel oder Teil zwei ändern. Anstatt immer noch Änderungen vorzunehmen, um den Index zu finden , den wir zuvor verwendet haben, speichern Sie. Dies wird Index Nummer zwei sein und los geht's. Sie können an diesen Beispielen sehen, dass alle diese Methoden zwar zu Beginn komplex aussehen, viele von ihnen genau gleich strukturiert sind, aber einfach andere Werte zurückgeben. Zurück zu dieser Map und diesem forEach keine dieser Verkettung oder Hinzufügen einer neuen Methode am ist keine dieser Verkettung oder Hinzufügen einer neuen Methode am Ende verfügbar, wenn Sie forEach verwenden. Wir können dies sehen, wenn wir dies wieder ändern, aktualisieren und jetzt sehen wir einen Fehler innerhalb der Konsole. Diese Schulung ist bei Verwendung von forEach nicht möglich , da, wie wir es zuvor in einem unserer Tests gesehen haben , bevor jede Methode nicht definiert und nicht einen neuen Wert zurückgibt . Nur für eine Zusammenfassung verwenden wir forEach, wenn wir das vorhandene Array ändern möchten und kein neues zurückgegeben werden müssen. Wir verwenden Map, wenn wir das ursprüngliche Array intakt lassen das ursprüngliche Array intakt und ein neues Array mit den Werten zurückgeben möchten. Es ist auch gut für die Kette. 25. Destrukturierende Zurückweisung: Ja, 2015 hat die Destrukturierung eingeführt, die eine einfache Möglichkeit ist, Arrays oder Objektwerte herauszuziehen und in Variablen zu speichern. Um ein Projekt zu starten, das Array-Destrukturierung ist , enthält eine Reihe von Blogbeiträgen, genau wie wir es im letzten Video hatten. Wenn wir jeden Array-Wert in eine neue Variable speichern wollten , können wir dies tun, indem wir Destrukturierung hinzufügen. Wir können dies auf der linken Seite tun, was gleich ist. Anstatt all dies in einer einzigen Post-Variable zu speichern , können wir die eckigen Klammern genau so hinzufügen, und dann können wir für jedes dieser Array-Elemente einen neuen Variablenwert erstellen . Die erste, die wir post1, post2, dann post3 anrufen können . Dieser separate Array-Wert sollte jetzt in diesen drei Variablen gespeichert werden . Lasst uns das testen. Ihr Konsolenprotokoll mit dem Wert von post1. Aktualisieren, und es gibt unseren einzigen Blogbeitrag. Lass es uns mit Nummer 3 versuchen. Da sind wir los. Wir können sehen, dass jeder dieser drei Werte jetzt eindeutig ist, zerstört wird und auch separat erfolgen kann. Wir könnten auch genau das gleiche Ergebnis wie dieses einrichten. Wir könnten eine neue Variable erstellen und dann unsere Werte in diesen eckigen Klammern speichern. Genau wie zuvor können wir post1, post2 und post 3 speichern post2 und post 3 und sie auf alle Posts setzen. Auch wenn einer unserer einzelnen Beiträge bereits ausgewählt ist , können wir uns dies ansehen. Post3 und auch post2, also ist das Gleiche, was wir gerade auf zwei verschiedene Arten geschrieben haben. In diesem Stil zu tun bedeutet auch, dass wir Zugriff auf diese drei destrukturierten Variablen haben Zugriff auf diese drei destrukturierten Variablen Wir behalten auch den ursprünglichen Verweis auf dieses vollständige Array bei, wenn wir später auch etwas Spaß daran machen wollten. Sie können sich diese Destrukturierung als Abkürzung vorstellen. Dies zu tun ist genau das Gleiche wie so. Wir könnten sie einzeln einrichten, indem wir post1 erstellen und dies auf unser Post-Array setzen den ursprünglichen Indexwert auswählen. Lassen Sie uns das noch zweimal duplizieren. Post2 ist gleich unserer ersten Indexposition, und dann ist post3 gleich der Indexzahl 2. Jetzt mit bereits ausgewähltem Post2, über die Konsole. Es funktioniert immer noch wie zuvor, aber wir haben einen längeren Weg, Dinge zu tun . Lasst uns das entfernen. Etwas anderes, was wir auch tun können, ist die JavaScript-Restsyntax zu verwenden. Die restliche Syntax ist eine Möglichkeit auf einen einzelnen Wert oder mehrere Werte zuzugreifen, und dann eine Möglichkeit, alle restlichen Werte bis zum Ende des Arrays zu erfassen . Wenn wir zum Beispiel nur eine Variable einrichten wollten, benötigen wir erneut die eckigen Klammern. Wenn wir nur auf unseren ersten Beitrag zugreifen und diesen mit einem separaten Variablennamen behalten wollten unseren ersten Beitrag zugreifen und diesen mit einem separaten Variablennamen behalten . Dann möchten wir vielleicht alle restlichen Werte abrufen , wir können dies tun, indem wir dies mit einem Komma mit den drei Punkten und dann den Rest der Werte in einer separaten Variablen speichern . setze dies auf alle Posts Array. Lassen Sie uns dies innerhalb unseres Konsolenprotokolls bestätigen. Post1 ist dieser gerade hier. Da sind wir los. Das ist unser erster Blogbeitrag gerade hier. Dann sollten wir innerhalb dieser anderen Variablen den Inhalt der verbleibenden Werte haben, nämlich Blog Post2 und 3. Änderungen an unserer Variable von anderen, aktualisieren. Dies ist ein neues Array mit unseren beiden verbleibenden Werten. Diese Destrukturierung ist sehr nützlich, um Verknüpfungen zu erstellen und verschiedene Variablen zu speichern. Destrukturierung kann auch mit Objekten verwendet werden, und wir werden dies später im Kurs behandeln. Eine Sache, die Sie sicherstellen müssen, ist bei der Verwendung von rest, dass wir dies auch als letzten Variablenwert hinzufügen. Wir konnten dies zum Beispiel nicht ganz am Anfang platzieren, dies zum Beispiel nicht ganz am Anfang platzieren, denn wie der Name schon sagt, wird dies alle restlichen Werte erfassen. Wenn wir dies tun und dann speichern und aktualisieren, in der Konsole ein Fehler angezeigt. Dies geschieht, weil dies, wie der Name schon sagt, verwendet wird, um den Rest der verbleibenden Werte zu erfassen. Daher macht es keinen Sinn , dies am Anfang zu haben. Destrukturierung kann auch für Objekte verwendet werden, und wir werden uns das im Rest des Kurses genau ansehen . 26. Einzigartige Werte mit Set: Gehen Sie in den Ordner dieser Lektion, bei dem es sich um Eindeutige Werte mit set handelt. Innerhalb des Skriptabschnitts haben wir ein Kategorie-Array mit mehreren Werten darin. Wenn Sie genau hinsehen, können wir sehen, dass dieser Wert von Taschen am Anfang und am Ende dupliziert wurde. Arrays, wie Sie hier sehen können akzeptieren alle Werte, die Sie hinzufügen, auch wenn es sich um Duplikate handelt. Aber wenn wir dies vermeiden wollten und nur eindeutige Werte darin gespeichert haben, könnten wir stattdessen etwas verwenden, das als set bezeichnet wird. Obwohl set ein bisschen wie ein Array aussieht, heißt es stattdessen eine Sammlung. Genau wie Arrays können Sie sowohl primitive als auch Objekttypen speichern . Wir haben zwei Optionen, wir könnten entweder ein neues Set von Grund auf neu erstellen oder wenn wir dieses Array in ein Set konvertieren wollten. Geh einfach, erstelle eine neue Variable und diese wird als eindeutige Kategorien bezeichnet. Stellen Sie dies auf einen neuen Satz ein. Wir haben dieses neue Schlüsselwort in der Vergangenheit gesehen , als wir Dinge wie neue Arrays erstellt haben, und dies wird ein neues leeres Set erstellen. Wir können unsere Kategorien weitergeben, was das Array direkt darüber ist. Darunter wird ein Konsolenprotokoll erstellt. Loggen Sie den Wert eindeutiger Kategorien ab und auch der Browser wird sehen, was in der Konsole ausgegeben wird. Jetzt habe ich ein Set mit sechs Einträgen und bei genauerer Betrachtung können wir sehen, dass der Wert der Taschen nur einmal enthalten ist. Es wurden alle Duplikate entfernt, da unser ursprüngliches Array den Wert dieser Taschen in zwei und sieben verschiedenen Werten hatte . Was wir hier gemacht haben, ist, dass wir ein neues Set erstellt haben , das das Kategorie-Array geklont und alle doppelten Werte entfernt wird das Kategorie-Array geklont und . Set hat auch einige integrierte Methoden, mit denen wir diese Sammlung ändern können. Dann füge einen neuen Wert hinzu. Wir haben die Add-Methode, die wir direkt für unsere Variable verwenden können . Greifen Sie auf die einzigartigen Kategorien zu, fügen Sie nur eine Methode hinzu und innen können wir einen neuen Wert hinzufügen, lass uns Jeans wählen. Speichern und aktualisieren. Jetzt hat unser Set jetzt sieben Werte, wobei die Jeans bis zum Ende dieser Kollektion gedrängt wurde. Doppelte Kategorien werden selbst bei Verwendung dieser Methode nicht akzeptiert. Wenn wir uns für Hüte entscheiden, die Sie bereits haben, aktualisieren Sie dies, und wir sind jetzt wieder sechs verschiedenen Werten, weil die Hüte dupliziert wurden. Wenn wir auch einen einzelnen Wert entfernen möchten, haben wir Zugriff auf die Methode delete. Wir ändern dies und dann können wir jeden unserer bestehenden Werte entfernen. Lass uns Hüte übergehen, erfrischen. Dies ist jetzt reduziert, unser Wert wurde auf fünf Werte festgelegt , wobei die Hüte jetzt entfernt wurden. Dies entfernt einen einzelnen Wert, aber wenn wir alle Werte in unserer Sammlung entfernen wollten , haben wir Zugriff auf die Clear Methode. Da wir alle Werte entfernen, müssen wir nichts hineingeben. Aktualisieren Sie und dies löscht den gesamten Inhalt unseres Sets. Wir können auch überprüfen, ob ein bestimmter Wert in einem Set enthalten ist , indem wir die hass-Methode verwenden. Da dies true oder false zurückgibt, muss es auch innerhalb einer Variablen gespeichert werden. Lassen Sie uns das ändern, um es zu haben, wir können prüfen, ob das einen Wert von Schuhen hat. Wenn wir das einfach speichern und aktualisieren würden, erhalten wir immer noch den vollen Satz zurück. Wenn wir jedoch auf den Rückgabewert zugreifen, installieren Sie diesen in einer Konstante, sagen wir hasShoes, dies entspricht dem Rückgabewert und dann können wir dies auf der Konsole protokollieren. Das stimmt, lassen Sie uns dies ändern, um etwas anderes zu sein. Wie erwartet, wird dies jetzt falsch zurückgegeben. Genau wie wenn wir Arrays verwenden, haben wir Zugang zu einem Grundbesitz. Finden Sie heraus, wie viele Werte im Array enthalten sind . Wenn wir Sets verwenden, haben wir Zugriff auf etwas sehr Ähnliches, aber dieses Mal heißt es Größe. Wenn Sie diese Zeile verschieben und die UniqueCategories wiederherstellen, greifen Sie auf .size zu, speichern und aktualisieren, und der zurückgegebene Wert ist sechs. Set ist sehr nützlich, wenn wir keine doppelten Werte innerhalb eines Arrays haben möchten . Wenn wir wollten, könnten wir dies auch mit einem Array tun und auch die Filtermethode verketten um alle Duplikate zu entfernen. Aber natürlich ist es viel einfacher, dieses Set zu verwenden, als den gesamten zusätzlichen Code zu schreiben, der erforderlich sein sollte wenn wir diesen in einem Array speichern würden. 27. Zweidimensionale Arrays: Normale Arrays speichern, wie wir wissen, Werte in der Reihenfolge von links nach rechts, beginnend bei Indexposition 0. Wir können Arrays aber auch zweidimensional verwenden , um eine rasterähnliche Struktur zu erstellen, genau wie Sie hier auf der Folie sehen können . Scheint komplex zu sein, oder? Nun, das ist nicht so komplex wie es scheint. Oder wir müssen wirklich in einem neuen Array für jede dieser Zeilen erstellen . Die erste Zeile ist ein Array, die zweite Zeile ist ein Array und so weiter. Dann platzieren wir all diese in ein äußeres Array, das wie ein Wrapper ist, der ein Array von Arrays erstellt. Der Zugriff auf diese Werte ist ebenfalls ziemlich einfach. Wir brauchen nur zwei Indexzahlen. Zuerst wählen wir die Zeile aus und wählen dann den Wert aus dieser bestimmten Zeile aus. Anhand dieser beiden Zahlen können wir jeden dieser Artikel auswählen, die wir benötigen. Wenn wir uns dieses Beispiel hier rechts ansehen , können wir sehen, dass dies an der Indexposition 0 und dann an 1. Es beginnt mit 0, der auf die erste Zeile oder das erste Array zugreift die erste Zeile oder das erste Array , und dann von links nach rechts , und dann von links nach rechts ist die Indexposition 1 der zweite Wert. Anhand des zweiten Beispiels machen wir genau das Gleiche, aber dieses Mal gehen wir zu unserer vierten Zeile, die Indexnummer 3 ist, und dann zu unserem letzten Element in dieser Zeile , der Indexnummer 4 ist. Leider hat JavaScript keine integrierte Möglichkeit, zweidimensionale Arrays zu erstellen. Stattdessen müssen wir sie deshalb als verschachtelte Arrays erstellen . Versuchen wir es in unserem Editor, gehen Sie in diese Datei, die die zweidimensionalen Arrays ist , oder ich kann das im Skript heruntergehen lassen. Öffnen Sie dies und erstellen wir unser erstes Array namens Grid. Dieser wird unser Wrapper sein. Wir können diese in zwei getrennte Zeilen platzieren , um dies klarer zu machen. Dann fügen wir drinnen drei Zeilen hinzu. Die erste Reihe ist, wie wir gerade gesehen haben, nur ein einfaches Array. Fügen wir einige Zahlen hinzu, 11, 12, 13 und wie bei allen Array-Werten trennen wir sie durch ein Komma. Zeile 2 ist ein neues Array mit 21, 22, 23 und schließlich wird unsere dritte Reihe 31, 32 und 33. Melden wir uns das an der Konsole an und sehen, was wir zurückbekommen. Platzieren Sie in eine Rastervariable, aktualisieren Sie es und wir können sehen, dass wir ein äußeres Array haben, das dann wiederum drei separate Arrays enthält und jedes drei Werte enthält. Wir können dies klarer sehen, wenn wir unsere erste Reihe, unsere zweite Reihe und unsere dritte Reihe erweitern . Wir könnten dies auch in einer Tabelle mit der console.table formatieren . Dies macht es ein bisschen klarer. Mal sehen, was los ist. Wir können sehen, dass wir die Indexnummer haben, zuerst wählen wir die Zeile aus und wählen dann die Indexposition jeder Zeile aus. Dieser wäre Index 0 1, und genau wie wir es in den Folien sehen, können wir mit zwei eckigen Klammern darauf zugreifen. Dafür gehen wir zurück zu einem Konsolenprotokoll. Ich setze das Raster öffne den ersten Satz eckiger Klammern, was die Reihe ist. Lassen Sie uns für diese Reihe unsere dritte Reihe, die Indexnummer 2 ist und dann gehen wir kurz nach unseren zweiten eckigen Klammern für die mittlere, die 32 ist. Dies ist Indexnummer 1. Speichern und aktualisieren. als nächstes unser Wert von 32 , der gerade hier ist. Das Erstellen zweidimensionaler Arrays ist nicht wirklich viel schwieriger als das Erstellen eines einzelnen Arrays. Stattdessen müssen wir nur über die Koordinatenposition nachdenken , die auf jeden der Werte in unserem Raster zugreift. 28. Das globale Objekt und die eingebauten Funktionen: Innerhalb dieser Starterdateien haben wir jetzt diesen neuen Funktionsabschnitt , der Nummer 3 ist, und gehen dann in die erste Lektion, die das globale Objekt ist. Öffnen Sie die Index-Seite. Stellen Sie sicher, dass dies auch innerhalb des Browsers geöffnet ist. Zwischen dem Skriptbereich haben wir ein ähnliches Beispiel wie das , was wir in der Vergangenheit angeschaut haben. Wir haben zwei verschiedene Arrays, wir haben unsere Brotzutaten und die Brownies, und dann diese Funktion direkt darunter. Diese Funktion nimmt das Rezept und auch die Zutaten auf, und dies überprüft, ob diese bestimmte Zutat in diesem Rezept enthalten ist. Es wird dann einen wahren oder falschen Wert zurückgeben, je nachdem, ob die Zutat enthalten ist. Wie bereits erwähnt, wird dies in einem Konsolenprotokoll als Funktionsdeklaration bezeichnet . Gleich unten können wir diese Funktion dann mit ihrem Namen aufrufen , nämlich checkAllergien, im Rezept analysieren, wie Brot, und dann können wir eine Zutat wie Salz überprüfen , speichern und auffrischen. Wir erhalten jetzt den Wert von true, da diese Zutat in diesem Array enthalten ist. Wir wissen, dass wir diese Funktion mit ihrem Namen aufrufen können, weil wir sie direkt oben in derselben Datei erstellt haben. Nun, was ist, wenn wir diese Funktion von einem anderen Ort aus aufrufen , sagen wir eine andere JavaScript-Datei? Denkst du, das würde funktionieren? Nun, schauen wir uns mal an. Wir erstellen jetzt eine neue JavaScript-Datei in diesem Ordner für Lektion 1. Klicken Sie also darauf und erstellen Sie dann eine neue Datei, und dann wird dies das Skript mit der Erweiterung the.js genannt , um zu erklären, dass es sich um eine JavaScript-Datei handelt. Stellen Sie sicher, dass sich dies neben unserer Index-Seite noch in diesem Ordner befindet, und schließen Sie dann die Seitenleiste, um uns mehr Platz zu geben. In unserer neuen script.js werden wir wieder ein Konsolenprotokoll erstellen. Wir machen genau das Gleiche. Wir rufen unsere Funktion auf, die checkAllergien war, und analysieren dann zwei Argumente. Diesmal gehen wir für die Brownies und wir können prüfen, ob die Brownies Zucker enthalten. Wie bereits erwähnt, müssen wir dieses Skript auch mit unserer Index-Seite verknüpfen, da es sich um eine externe Datei handelt. Deshalb erstellen wir unser Skript innerhalb der Index-Seite, sodass es automatisch erkannt wird. Da wir jedoch jetzt eine neue Skriptdatei haben, können wir ein neues Skript-Tag erstellen und dann in die Quelle einfügen, die der Speicherort unserer neuen Datei ist. Da sich diese neue Datei neben unserer Index-Seite befindet, müssen wir lediglich ihren Namen hinzufügen, der script.js war. So effektiv ist dies das Gleiche wie oben. Alles, was wir hier tun, ist, den Code aus einer externen Datei einzuziehen , anstatt ihn zwischen diesen Skript-Tags hinzuzufügen. Jetzt haben wir unser Konsolenprotokoll gerade hier noch vorhanden, und dann haben wir auch ein Konsolenprotokoll das aus dieser separaten Datei aufgerufen wird. Gehen wir zum Browser und sehen, welcher funktioniert. Aktualisieren. Wir sehen jetzt unsere beiden Konsolenprotokolle. Wir sehen rechts, dass einer von ihnen von der Index-Seite stammt und einer von ihnen aus unserer script.js stammt Beide funktionieren also und beide stammen aus zwei separaten Dateispeicherorten. Nun, das führt uns jetzt zu der Frage, ob wir zu unserer Skriptdatei gehen. Hier machen wir ein Konsolenprotokoll und greifen auf eine CheckAllergies-Funktion zu, die in dieser Datei nicht vorhanden ist. Warum funktioniert das? Nun, wenn wir eine Funktion erstellen, genau wie wir es hier getan haben, wird sie Teil dessen, was als globales Objekt bezeichnet wird. Wir haben viel über Objekte und Objekttypen gesprochen, aber das globale Objekt ist das große Objekt. Das globale Objekt ist das Hauptobjekt, von dem global verfügbare Eigenschaften und aus global verfügbare Eigenschaften und Funktionen zugänglich sind. Dies mag komplex klingen, aber Sie können es sich als das Hauptobjekt vorstellen , das erstellt wird, und dann können wir von überall in unserem Code auf Teile davon zugreifen . JavaScript funktioniert im Browser und wir können über das Fenster auf dieses globale Objekt zugreifen. Möglicherweise haben Sie auch von etwas namens Node.js gehört, was eine Möglichkeit ist, JavaScript auf dem Server auszuführen. Da Node.js auf dem Server und nicht im Browser läuft , hat es keinen Zugriff auf dieses Browserfenster. Stattdessen greifen wir stattdessen mit dem Schlüsselwort global auf das globale Objekt zu. Aber Sie müssen sich darüber keine Sorgen machen wenn Sie noch nichts von Node.js gehört haben . Also siehst du dieses Fenster. Gehen wir zurück zur Konsole in den Browser. Was wir tun werden, ist das Wortfenster einzugeben, auf „Enter“ zu klicken, und dann können wir alle diese Informationen sehen, die unten an uns zurückgekehrt sind. Da window ein globales Objekt ist, enthält es alle diese Eigenschaften, die wir hier sehen können. Einige sind Funktionen, die wir verwenden können. Es gibt auch Eigenschaften für Objekte im Inneren. Dies ist eine Liste von Dingen, auf die wir globalen Zugriff haben. Einige davon haben wir schon gesehen. Zum Beispiel drücke ich „Command“ und „F“, um hier etwas zu finden. Wenn Sie Windows verwenden, ist dies höchstwahrscheinlich Control und F2. Wenn wir nach der Konsole suchen, können wir dies zunächst hier hervorgehoben sehen. Wir können das aufmachen. Dies ist ein Konsolenobjekt, das wir uns bereits angeschaut haben. Wenn wir dies öffnen und einen Blick darauf werfen, können wir sehen, dass wir Zugriff auf die Log-Funktion und auch die Tabellenfunktion haben, die wir in der Vergangenheit verwendet haben. diesem Grund haben wir in unseren mehreren Dateien Zugriff darauf , da diese auf dem globalen Objekt abgelegt werden. Wenn wir möchten, können wir auch auf das Window-Objekt verweisen , wenn wir diese Eigenschaften aufrufen. Zum Beispiel könnten wir window.console-Log schreiben, und das funktioniert auch genauso , also window.console log. Speichern Sie dies und aktualisieren Sie es. Unsere Konsolenprotokolle funktionieren weiterhin genau gleich. Lassen Sie uns dies entfernen und wir geben noch einmal unser Fensterobjekt innerhalb der Konsole ein. Wenn ich das erweitere, sehen wir auch unsere benutzerdefinierte Funktion hier, nämlich CheckAllergien. Dies liegt daran, dass, sobald wir unsere CheckAllergies-Funktion in unserem Code erstellt haben , dann zu diesem globalen Objekt hinzugefügt wurde, und deshalb können wir innerhalb einer anderen Datei darauf zugreifen . Außerdem werden alle Variablen, die wir mit dem Schlüsselwort var erstellen werden alle Variablen, die wir mit dem Schlüsselwort var auch auf dem globalen Objekt platziert, jedoch keine Variablen, die wir mit den Schlüsselwörtern const oder let erstellen . Aber dazu später mehr. Natürlich ist dies eine Funktion, die wir selbst erstellt haben, aber JavaScript hat auch viele Funktionen, die wir zuerst nicht erstellen müssen. Diese werden automatisch in die Sprache eingebaut. Diese können als integrierte Funktionen oder globale Funktionen bezeichnet werden , da sie überall in unserem Programm von diesem globalen Objekt aus aufgerufen werden können. Ein Beispiel dafür ist eine Funktion namens parseInt, wenn wir zur Suche gehen . Wir können dies hier sehen, und wir können dadurch sehen, dass dies eine Funktion ist. Wir können das benutzen, wenn wir zum Code gehen. Kurz bevor wir dies tun, entfernen wir diese script.js, entfernen den Skriptlink und wir können diese Datei auch von hier entfernen. Zurück zu unserer Index-Seite werfen wir einen Blick auf diese parseInt-Funktion. Die Funktionsweise dieser Funktion ist, dass sie eine Zeichenfolge aufnimmt und diese dann in eine Ganzzahl konvertiert, die eine ganze Zahl ist. Um dies zu sehen, gehen Sie also zu unserem Konsolenprotokoll, und wir können parseInt aufrufen. Dies ist auch Kamelfall, also hat dies ein Kapital I. Öffne die Funktionsklammern. Dann fügen wir als String die Zahl von 10 hinzu. Speichern Sie dies und über den Browser, aktualisieren Sie es und wir sehen jetzt die Anzahl von 10. Anstatt mein Wort dafür zu nehmen, dass dies eine Zahl und nicht immer noch eine Zeichenfolge ist, können wir dies mit Command oder Control-X ausschneiden mit Command oder Control-X ausschneiden diese innerhalb einer Variablen namens Int installieren . füge das ein. Dann machen wir dieses Mal ein Konsolenprotokoll für den Typ unseres Int , um zu sehen, welche Art von Daten wir speichern. Aktualisieren Sie, und wir können jetzt sehen, dass dies von einer Zeichenfolge in eine Zahl konvertiert wurde . Da parseInt eine Zeichenfolge in eine Ganzzahl konvertiert, die eine ganze Zahl ist, enthält sie keine Zahlen nach einer Dezimalstelle. Wenn das also beispielsweise 10.09 war und ich den Typ entferne, wird dies dann in eine gerundete oder eine ganze Zahl konvertiert . Wir können dies auch umdrehen und das Gegenteil mit einer String-Funktion tun , also nennen wir dies dieses Mal eine Zahl, und anstatt eine Zeichenfolge wie diese zu haben, platzieren wir eine Nummer, und wir werden wandelt die Zahl diesmal mit der String-Funktion in eine Zeichenfolge um. Wir werden wieder unsere Zahlenvariable protokollieren. Wir werden den Wert innerhalb der Konsole oder fünf sehen. Aber noch einmal können wir eine Typeof Check durchführen, um zu überprüfen, ob dies in eine Zeichenfolge konvertiert wurde . Da sind wir los. Wie Sie sehen können, ist JavaScript sehr flexibel. Wir können entweder unsere eigenen Funktionen erstellen oder auf einige integrierte Mounts zugreifen, die mit der Sprache geliefert werden. Wir können dann auf diese integrierten Mounts für das globale Objekt zugreifen . Wie wir gesehen haben, beim Zugreifen auf das Window-Objekt auch noch viel mehr andere Funktionen zur Verfügung. Ich werde sie nicht alle durchgehen , da es ziemlich viel gibt und es auch einige ziemlich spezialisierte gibt. Aber wir werden viele weitere dieser global verfügbaren Funktionen, Eigenschaften und Objekte verwenden dieser global verfügbaren Funktionen, , wenn wir die restlichen kommenden Abschnitte durchlaufen . 29. Funktionsausdrücke: Wir haben bisher Funktionen mit einer Syntax erstellt , die als Funktionsdeklaration bezeichnet wird. Es gibt auch eine leicht modifizierte Art Funktionen zu schreiben, und diese werden als Funktionsausdrücke bezeichnet. Springen Sie in die Starterdateien für diese Lektion, die sich innerhalb des Funktionsabschnitts befindet, und dann in die Lektion bei Nummer 2. Sie können hier sehen, wenn wir zum Skriptbereich gehen, haben wir ein Beispiel für eine Funktionsdeklaration. Dies ist die Art von Funktion, die wir uns zuvor angeschaut haben, und sie sieht genauso aus. Wir verwenden das Schlüsselwort function, wir erstellen einen Funktionsnamen, wir geben alle optionalen Parameter hier und schreiben dann unseren Code in den Funktionskörper. Die Alternative, die ein Funktionsausdruck ist , den wir uns jetzt ansehen werden, sieht ebenfalls ziemlich ähnlich aus. Der erste Unterschied ist die Art und Weise, wie wir die Funktion benennen. Um dies in einen Funktionsausdruck umzuwandeln, können wir zuerst den Funktionsnamen entfernen. Ich schreibe das unten, damit wir einen Vergleich sehen können. Wir verwenden auch das Schlüsselwort function, aber dieses Mal springen wir direkt in die Klammern oder die Klammern. Wir vergleichen dies mit dem obigen, wir geben das Rezept und auch die Zutaten ein. Dann, unmittelbar nachdem wir unseren Funktionskörper in die geschweiften Klammern hinzugefügt haben, kopieren wir einfach diese beiden Codezeilen , da sie genau mit diesem Beispiel übereinstimmen werden. Da wir dann keinen Namen haben, wie wir oben haben, müssen wir diesen einer Variablen zuweisen, eine Konstante oder eine Variable erstellen, und dann können wir diesem einen Namen wie CheckAllergien geben und diesen gleich setzen zu unserer Funktion. Geh jetzt. Unser Funktionsname wie dieser ist wieder optional, aber dies ist jetzt aufgrund des fehlenden Namens eine anonyme Funktion . Was wir jetzt tun wollen, um Verwirrung zu vermeiden ist, diese ursprüngliche Funktion zu kommentieren. Wir können auch überprüfen, ob es funktioniert, indem wir ein Konsolenprotokoll erstellen. Wie früher geben wir den Funktionsnamen weiter, aber dieses Mal ist dies der Variablenname. Wir können die Klammern immer noch direkt danach verwenden , um optionale Argumente zu übergeben. Das Rezept, wir können uns für alles wie Brot entscheiden, einen Zutaten-Check wie Hefe übergeben, dann an den Browser gehen, die Entwicklertools öffnen und in die Konsole gehen. Wir sehen, dass der Wert von true, Änderungen falsch sind. Jetzt funktioniert diese Funktion völlig einwandfrei. Das Speichern dieses Funktionsnamens innerhalb der Variablen ist ein offensichtlicher Unterschied zwischen der obigen Funktionsdeklaration und diesem Funktionsausdruck. Ein weiterer Unterschied ist etwas, das Hissen genannt wird. Hissen ist etwas, das wir später ausführlicher behandeln werden . Aber im Moment können Sie sich das vorstellen, da wir eine Funktion aufrufen können , bevor wir sie tatsächlich erstellen. Es verhält sich so, als wäre unsere Funktion ganz oben in der Datei deklariert ganz oben in der Datei und kann immer verwendet werden. Was wir tun werden, ist, dieses Konsolenprotokoll auszuschneiden und es an den Anfang der Datei zu verschieben, oder einfach irgendwo über der Funktion ist in Ordnung. Was wir hier machen, ist, dass wir unsere Funktion aufrufen , bevor wir sie tatsächlich erstellen. JavaScript-Programme werden von oben nach unten gelesen. Wir rufen möglicherweise eine Funktion auf, bevor wir überhaupt wissen, dass die Funktion existiert. Glaubst du, dass das funktionieren wird? Nun, sagen wir das und probieren es in der Konsole aus. Aktualisieren. Wir sehen jetzt einen Fehler hier. Wir können vor seiner Initialisierung nicht auf CheckAllergien zugreifen . Dies bedeutet, dass wir für Funktionsausdrücke , die der neue Typ sind, den wir hier erstellt haben, sie aufrufen müssen, nachdem sie im Programm erstellt wurden. Effektiv blasen. Aber was ist mit dieser ursprünglichen Funktionsdeklaration? Nun, probieren wir das mal aus. Wenn wir den ursprünglichen auskommentieren, kommentieren Sie den Ausdruck. Jetzt ist dies derselbe Funktionsname, also rufen wir dies jetzt auf, bevor es erstellt wird. Wir können sehen, was im Browser passiert. Aktualisieren, wir sehen keine Probleme. Unsere Funktion läuft jetzt einwandfrei. Dies ist ein weiterer Unterschied zwischen den beiden Funktionsstilen. Diese Funktionsdeklaration kann überall in unserem Programm aufgerufen werden in unserem Programm noch bevor wir sie tatsächlich erstellt haben. Der Grund dafür ist, dass die ursprüngliche Funktionsdeklaration überall verfügbar ist, liegt darin, dass sie auf dem globalen Geltungsbereich liegt. Genau wie wir es im vorherigen Video angeschaut haben, können wir über das Fenster darauf zugreifen. Siehst du das? Was wir tun werden, ist, dass wir beide Funktionen jetzt aktiv machen wollen . Es gibt keine Verwirrung. Wir ändern dies in CheckAllergien 2. Wir können ein Konsolenprotokoll auskommentieren. Dies läuft nicht im Browser. Jetzt haben wir beide Funktionen jetzt aktiv. Gehen wir zur Konsole. Was wir hier drinnen machen werden, aktualisieren wir die Sauberkeit und greifen dann auf die Fensterobjekte zu. Denken Sie daran, dass dies auf das gesamte verfügbare Fenster zugreifen wird. Aber wenn wir wollen, können wir auch die Punktnotation verwenden. Beschränken Sie dies auch auf eine bestimmte Eigenschaft. Wir gehen auf unsere erste Funktion, die CheckAllergien ist. Klicken Sie auf „Enter“ und hier sehen wir einen Verweis auf unsere CheckAllergies-Funktion. Wenn wir dies jedoch noch einmal tun, greifen Sie auf das Fenster zu, und dann gehen wir diesmal auf CheckAllergien. Nummer 2, drücken Sie „Enter“ und wir erhalten nun ein Ergebnis von undefined zurück. Dies sichert genau das, was wir in den Beispielen zuvor nachgeschlagen haben , was wir in den Beispielen zuvor nachgeschlagen Die ursprüngliche Funktion, die check ist, ist jetzt auf dem globalen Objekt verfügbar, was bedeutet, dass wir in jedem Teil unseres Codes darauf zugreifen können. Allerdings checkAllergien 2, das war der zweite, der Funktionsausdruck ist. Dies ist im globalen Bereich nicht verfügbar. Deshalb müssen wir es aufrufen, nachdem wir die Funktion erstellt haben. Dies kann eine wichtige Überlegung sein, da wir nicht immer einen globalen Geltungsbereich schaffen wollen , es sei denn, wir müssen dies tun. Ein Beispiel dafür kann eine Callback-Funktion sein. Ein Callback ist eine Funktion plus zwei, weitere Funktion, wie wir uns zuvor mit unseren Array-Methoden angesehen haben . Werfen wir einen Blick auf ein anderes Beispiel. Ich werde diese beiden Funktionen hier kommentieren. Dann erstelle ich eine neue Funktion. Diese Funktion wird nur auf TouPper aufgerufen. Dies konvertiert jede Zeichenfolge, die sie übergeben hat, in Großbuchstaben. Wir müssen eine Zeichenfolge übergeben, und ich rufe diesen Wert auf. Dann wird dies die neue Zeichenfolge zurückgeben. Was wir hier tun müssen, ist, auf den Wert zuzugreifen. Dann können wir eine String-Methode namens TupperCase aufrufen. Dies wandelt eine Kleinbuchstaben-Zeichenfolge in Großbuchstaben um. Dies wird von dieser Funktion zurückgesendet. Um zu überprüfen, ob es funktioniert, führen wir ein Konsolenprotokoll aus, rufen unsere Funktion auf, dann können wir jede Zeichenfolge innerhalb von hier übergeben , die wir konvertieren möchten. Probieren wir das mit der Mehlkette aus. Aktualisieren Sie den Browser und dies wird in Großbuchstaben umgewandelt. Nichts, was wir vorher noch nicht gesehen haben. Wir haben gerade eine Funktion erstellt, um den Text zu transformieren. Wir können auch innerhalb des Fensterobjekts sehen, dass wir hier auf unsere Funktion zugreifen können. Da dies Zugriff auf unsere Funktion hat, wissen wir, genau wie wir bei dieser hier sehen, dass dieser Funktionsstil für das globale Objekt verfügbar ist . Dieser Stil kann vollkommen in Ordnung sein, wenn wir ihn in mehreren Teilen unserer Anwendung verwenden wollten . Wir verweisen sie auf etwas wie die Array-Methoden zurück , die wir zuvor erwähnt haben. Wir müssen diese Funktion nicht immer global verfügbar machen . Wenn wir zum Beispiel eines der Arrays aufrufen die wir oben haben, wie Brote, und dann können wir map aufrufen , um jeden dieser Werte zu durchlaufen. Dann können wir bei jedem dieser Werte die ToUpper-Funktion aufrufen. Um dies zu sehen, geben wir dies in unser Konsolenprotokoll weiter. Speichern Sie dies, und wenn wir den Browser aktualisieren, sehen wir, dass jeder dieser Werte in Großbuchstaben umgewandelt wurde . Für ein Beispiel wie dieses brauchen wir diese Funktion nicht, um global zu sein, und wir möchten sie einfach an eine Methode wie map übergeben. Dies könnte jetzt ein guter Anwendungsfall sein, um diese Funktion in einen Funktionsausdruck umzuwandeln . Zusammenfassend wird eine Funktionsdeklaration mit dem Schlüsselwort function, einem Funktionsnamen mit optionalen Parametern und dem gesamten Code innerhalb der geschweiften Klammern erstellt einem Funktionsnamen mit optionalen Parametern . Der Funktionsausdruck, den wir uns gerade angeschaut haben , wird in einer Variablen gespeichert. Wir können auch einen optionalen Funktionsnamen haben. Dies ist der Unterschied zwischen diesen beiden Funktionstypen. Wenn das alles neu für dich ist, mach dir keine Sorgen. Sie müssen sich vorerst nicht an all diese verschiedenen Namen erinnern . Ich möchte Sie nur darauf hinweisen, dass verschiedene Funktionstile verfügbar sind, da Sie sie möglicherweise eines Tages verwenden müssen, oder Sie können sie auch in anderen Beispielen sehen. 30. Unmittelbar aufgerufener Funktionsausdruck (IIFE): Der Titel des vorherigen Videos hieß Funktionsausdrücke. Jetzt schauen wir uns etwas an, das sofort aufgerufene Funktionsausdrücke genannt wird. Es mag komplex klingen, aber es ist nicht wirklich so schlimm, es nimmt nur unseren ursprünglichen Funktionsausdruck aus dem vorherigen Video und wir können diese Funktion sofort ausführen oder aufrufen. Werfen wir einen Blick darauf, wie das in diesen Datendateien funktioniert . Wenn wir einen Blick in diesen Skriptbereich werfen, haben Sie eine einfache Funktion, die eine Browserwarnung erstellt. Ich weiß, dass dies eine Funktionsdeklaration ist , da sie von selbst erscheint und nicht innerhalb einer Variablen gespeichert ist. Aber was wir tun können, ist, dass wir den Namen entfernen können. Auch dies ist optional und wir werden uns das sehr bald ansehen. Entfernen Sie den Namen der Funktion. Da diese Funktion keine Namen hat, die sie tatsächlich aufrufen, können wir jetzt den Funktionsaufruf unten entfernen. Dieser Mangel an Namen bedeutet, dass er eine anonyme Funktion genannt wird. Wie rufen wir eine Funktion ohne Namen auf? Nun, hier kommen unsere sofort aufgerufenen Funktionsausdrücke ins Spiel. Zuerst müssen wir damit beginnen, unsere volle Funktion in Klammern einzuwickeln . Wenn wir das ausschneiden, öffnen Sie die Klammern und fügen Sie diese dann ein, dies enthält unsere gesamte Funktion zwischen diesen Klammern und dann wird tatsächlich der Code ausgeführt. Wir legen dann kurz danach eine neue Reihe von Klammern ein, genau wie bei einem regulären Funktionsaufruf. Wenn wir dies jetzt speichern und den Browser aktualisieren, sehen wir jetzt unsere Warnung hier. Dies bedeutet, dass unsere Funktion läuft. Wir können den darin enthaltenen Code sehen. Dies bedeutet nur, dass wir eine Funktion erstellt haben und den Funktionscode ausführen, sobald die Seite geladen ist. Wenn wir diesen Funktionscode nicht nur hier mit diesen ursprünglichen Klammern umgeben würden, würde dies einen Fehler verursachen, da JavaScript denken würde, dass dies eine reguläre Funktion ist, die einen Namen erfordern würde. Die Verwendung dieser umgebenden Klammern kann jedoch auch ein Problem verursachen. Wenn wir beispielsweise einen Code oben haben, z. B. eine Variable, kann dies zu einem Problem führen. Erstellen Sie eine beliebige Variable direkt oben, ich möchte nach Sprache gehen und setzen Sie diese auf JavaScript. Beachten Sie, dass ich am Ende kein Semikolon hinzufüge, und wenn wir diese Datei speichern, hat der Texteditor diese Fotos automatisch formatiert. Wir können sofort erkennen, dass unser Code nicht so beabsichtigt war. Gehen wir zum Browser und sehen welche Auswirkungen das hat, wenn wir aktualisieren. Los geht's, wir werden einen Fehler haben. JavaScript ist keine Funktion. Wenn wir nun zum Texteditor zurückkehren und unseren Code genauer untersuchen, ist dieser Fehler verständlich. Wo wir angelegt haben, ist, dass Code dem Funktionsausdruck ziemlich ähnlich ist dem Funktionsausdruck ziemlich ähnlich , der im vorherigen Video angeschaut wurde, denkt er. Wir haben einen Funktionsnamen von JavaScript. Dann haben wir sofort danach den Inhalt in diesen Klammern, genau so. Denken Sie daran, dass wir uns vorhin angeschaut haben, wie Semikolons nicht immer verwendet werden müssen. Nun, dies ist einer der verwendeten Fälle, in denen wir sie hinzufügen müssen. Wenn wir jetzt ein Semikolon nach unserem Variablennamen hinzufügen, wird dies nun von unserer Funktion trennen. Wir testen dies im Browser, aktualisieren uns und unsere Funktion funktioniert wieder ordnungsgemäß. Alternativ sehen Sie möglicherweise auch, dass einige Entwickler am Anfang des Funktionsausdrucks ein Semikolon hinzufügen . Dies dient dazu, Probleme zu vermeiden, wenn die obige Zeile nicht in einem Semikolon endet. Es ist auch besonders nützlich, wenn wir den Inhalt einer anderen Datei importieren. Wir wissen nicht immer, ob dieser Code in einem Semikolon enden wird oder ob er einen Fehler verursachen wird. So benutzen wir sie. Aber warum müssen wir einen sofort aufgerufenen Funktionsausdruck verwenden ? Nun, abgesehen von der Offensichtlichkeit, dass wir möglicherweise sofort Code ausführen müssen , ohne die Funktion aufzurufen. Da es sich um einen Funktionsausdruck handelt, verschmutzt er auch das globale Objekt nicht. Wie wir uns im vorherigen Video angesehen haben, ist er beim Erstellen eines Funktionsausdrucks nicht immer in irgendeinem Teil unserer Datei verfügbar. Wir müssen zuerst die Funktion erstellen , bevor wir sie tatsächlich verwenden können. Dies ist auch eine weitere gute Möglichkeit, Variablen des globalen Objekts beizubehalten, wenn wir sie nur innerhalb einer bestimmten Funktion verwenden möchten . Wenn diese Variable beispielsweise immer nur innerhalb dieser Funktion verwendet werden sollte, müssen wir diese nicht dem globalen Objekt hinzufügen, genau wie wir es jetzt tun. Wir können dies sehen, wenn wir unsere Warnung ändern, und wir protokollieren den Wert der Sprache. Dann können wir dies außerhalb seiner Funktion auch an der Konsole protokollieren. Speichern und aktualisieren. Wir sehen unsere Warnungen und auch in der Konsole sehen wir unser Konsolenprotokoll. Diese Variable ist sowohl von innerhalb als auch außerhalb der Funktion zugänglich . Aber wie bereits erwähnt, könnten wir dies stattdessen auf unsere Funktion verschieben, wenn wir nicht wollten , dass diese Variable global verfügbar ist. Dies bedeutet, dass dieses Wertvolle jetzt nur von innerhalb dieser Funktion aus zugänglich ist . Über den Browser, aktualisieren, sehen wir, dass die Warnung ausgeführt wird und dies Zugriff auf unsere Sprachvariable hat . Obwohl wir innerhalb der Konsole versuchen, Wert der Sprache zu protokollieren, ist dies jetzt von außerhalb der Funktion nicht zugänglich. Dies bedeutet, dass alle Variablen, die Sie innerhalb der Funktion erstellen , ebenfalls isoliert sind. Dies ist sehr nützlich, wenn wir ein Datenelement darauf beschränken möchten , nur von einer bestimmten Funktion aus zugänglich zu sein. Obwohl diese Variable nur innerhalb unserer Funktion verfügbar ist , können wir dennoch einen Wert zurückgeben. Anstelle der Warnung können wir die Sprache zurückgeben und den zurückgegebenen Wert der Fehlfunktion innerhalb einer Variablen installieren . Melden Sie dies an der Konsole an, speichern und aktualisieren Sie es in der Konsole. Jetzt erhalten wir den zurückgegebenen Wert aus unserer Variablen zurück. 31. Anonym oder benannt?: In den letzten paar Videos haben wir ein wenig über Funktionsausdrücke gesprochen. Wenn wir diese erstellt haben, haben wir den Funktionsnamen ausgelassen und bezeichnen diese Funktionen daher als anonym. wird jedoch kein Funktionsname der beste Ansatz zur Erstellung von Funktionen zur Verfügung gestellt . Nun, das Erstellen von Funktionen ohne Namen ist sicherlich kürzer, beinhaltet das Schreiben von weniger Code. Wir können diese Funktionen auch immer noch ausführen, wenn wir möchten. Warum fügen wir überhaupt einen Namen hinzu? Werfen wir einen Blick in die Starterdateien, die weniger als Nummer 4 für anonyme oder Namen innerhalb des Funktionsabschnitts sind. Wenn wir nach unten zum Skriptbereich scrollen, haben wir zwei verschiedene Arrays. Wir haben auch ein Beispiel für eine benannte Funktion, bei der es sich um eine reguläre Funktionsdeklaration handelt, die wir uns angeschaut haben. Dies beinhaltet das Erstellen einer Funktion, dann rufen wir diese Funktion wann immer wir wollen mit diesem Namen auf. Dann blasen Sie ein anonymes Beispiel, und dieses Beispiel wird als anonym bezeichnet. Da übergeben wir die Funktion und den Namen nicht direkt. Stattdessen haben wir ohne Namen genau so erstellt und speichern ihn dann innerhalb einer Variablen. Wir haben auch ein paar Beispiele, wir werden später darauf zurückkommen. Aber was wir tun werden, ist, diese Datei innerhalb der Konsole zu öffnen , mit der rechten Maustaste zu klicken, zu überprüfen und dann in die Registerkarte „Konsole“. Wenn wir Zugriff auf eine Funktion haben, haben Funktionen eine Eigenschaft, die Name genannt wird, und dies ist eine schreibgeschützte Eigenschaft. Wir können dies verwenden, indem wir zuerst auf den Funktionsnamen zugreifen, der die Anzahl der Inhaltsstoffe ist. Dann können wir auf den Namen zugreifen. Hit Enter es ist ziemlich einfach und es überrascht nicht, dass wir nach dem Namen fragen und den Funktionsnamen zurückbekommen. Aber was ist stattdessen, wenn wir all das entfernen und unsere zweite Funktion aufrufen , die geprüfte Ausfälle war. Wie wir wissen, ist dies nicht direkt ein Funktionsname , da wir ihn hier nicht weitergegeben haben. Aber alles, was wir hier tun, ist das in einer Variablen zu speichern. Was glaubst du, was wir zurückbekommen werden? Nun, lasst uns das versuchen, bringen Sie das vorbei. Dann wird auch name Eigenschaft genannt. Wir können auch für dieses Beispiel sehen, dass wir den Namen des Schecks Allergien zurückbekommen. Dies kann dem widersprechen, was Sie erwarten würden , da dies keinen Funktionsnamen hat. Der Grund, warum dies passiert, liegt an etwas, das als abgeleitete Funktionsname bezeichnet wird. Da die Funktion in dieser Variablen gespeichert ist, hat JavaScript grundsätzlich vermutet, dass dies ein Name ist, den Sie für unsere Funktion verwenden möchten. Wenn wir anfangen, Funktionen zu verstehen und wie wir uns auf sie beziehen können, kann viele Formen annehmen. Dieser abgeleitete Name ist in einigen Situationen nicht immer zuverlässig. Es gibt bestimmte Zeiten oder Randfälle, in denen der Name nicht abgeleitet wird. Andere Gründe, warum Sie der Funktion möglicherweise einen bestimmten Namen hinzufügen möchten , sind das Debuggen von Bereichen innerhalb der Konsole der Serie. Aber lassen Sie uns einen Fehler innerhalb dieser Funktion erstellen. Erstellen Sie hier einen Fehler mit Includes und blasen Sie diesen dann einfach aus, erstellen Sie ein Konsolenprotokoll, das den Wert von Check-Allergien protokolliert hat . Dann müssen wir auch das Rezept und die Zutaten einreichen . Genau wie in den früheren Beispielen wird sich dies auf unsere beiden Arrays oben beziehen. So können wir auf jede von diesen zugreifen. Wenn wir dies jetzt sagen und sehen, was in der Konsole passiert, können wir direkt sehen, ob die Chrome Developer Tools einen Fehler erkannt haben, und Notizen direkt in die Registerkarte „Quellen“ aufnehmen. Dies hat viele Informationen und wir können dies öffnen, um dies zu erweitern. Es weist auf viele verschiedene Teile unseres Codes hin. Aber eines der Dinge, auf die man achten muss, ist etwas, das man diesen Call-Stack nennt. Dieser Aufrufstapel ist eine Möglichkeit für den Browser, der das JavaScript ausführt, die aufgerufenen Funktionen zu verfolgen und auch dazu zu bestellen. Es weist hier auf die Funktion „Allergien überprüfen“ hin, um genau zu wissen, wo das Problem liegt. Aber wenn wir etwas anders darüber nachdenken, überprüfen Sie Allergien, die wir hier haben, um den Rückgabewert dieser Milliarde zu speichern. Check Allergien waren nie darauf gedacht, ein Funktionsname zu sein. Es war immer nur beabsichtigt, verfügbar zu sein , das einen wahren oder falschen Wert enthält. Dies könnte insbesondere in einem größeren Projekt die Dinge verwirren . Was wir stattdessen tun können, können wir diese Konstante als beschreibender Name erstellen . Wir sagen, enthält schlechte Zutaten. Dann wird dies immer der wahre oder falsche Wert sein und stattdessen können wir einen Funktionsnamen wie gewohnt übergeben. Dies teilt unsere beiden Abschnitte auf. Wir haben jetzt eine Funktionsreferenz, die immer auf diesen ganzen Code genau hier hinweist. Dann haben wir einen wahren oder falschen Wert, der ursprünglich als unsere Variable gedacht war. Jetzt haben wir diesen Variablennamen geändert. Wir müssen dies auch kopieren und den Namen in unserem Konsolenprotokoll ändern. Wenn wir dies speichern und dann aktualisieren, sind wir erneut direkt zur Registerkarte Quellen gegangen da wir diesen Fehler immer noch haben. Aber wenn wir uns den Aufrufstapel ansehen, überprüfen Sie Allergien verweist jetzt auf den Funktionsnamen und nicht auf die Variable. Dies ist keine harte und schnelle Regel. Wir müssen keinen Funktionsnamen wie diesen hinzufügen. Wenn Sie dies möglicherweise tun möchten, wenn Sie eine klare Trennung zwischen der Funktionsreferenz und unserem Variablennamen wünschen . Scrollen wir nun nach unten zu unserem zweiten Beispiel innerhalb der Kommentare. Wenn wir diesen ganzen Abschnitt auskommentieren, ist dies das gleiche Beispiel, das wir im vorherigen Video verwendet haben , um Array-Methoden zu betrachten. Wir haben alle Blogposts, bei denen es sich um wiedergeschlossene Objekte handelt. Darunter nennen wir es zwei separate Methoden. Wir haben die Map-Funktion, die alle Beiträge durchläuft, den Titel in Großbuchstaben umwandelt und dann den neuen Wert zurückgibt, Kette auf die enddefinierte Indexfunktion, die ist eine Indexnummer zurückgeben, wenn eine Übereinstimmung mit diesem Großbuchstabentitel gefunden wird. Hier ist ziemlich viel los. Dieser Abschnitt enthält zwei anonyme Funktionen. Wenn hier ein Fehler aufgetreten ist, kann das Debuggen beginnen und etwas schwierig werden, etwas schwierig werden, insbesondere wenn dieser Abschnitt noch länger war. Kurz bevor wir das auschecken, kommentiere ich das Konsolenprotokoll von oben und entferne auch den Fehler. Dies, wir haben jetzt unser einziges Konsolenprotokoll, das heißt Index, aktualisieren. Genau wie bei allen wurden direkt zur Registerkarte „Quellen“ weitergeleitet, weil wir ein Problem haben. Wir können im Aufrufstapel sehen , dass der Funktionsname anonym ist. Hier liegt das Problem. Da diese beiden Funktionsnamen anonym sind, wissen wir nicht genau, welche dieser Funktionen das Problem verursachen würde. Wenn wir uns alle übrigen Abschnitte umsehen, können wir natürlich alle übrigen Abschnitte umsehen, einige zusätzliche Hinweise darauf bekommen, wo der Fehler bei den Zeigern liegt und nicht immer offensichtlich ist. Es wäre schön, sofort zu sehen , welche Funktion das Problem verursacht. Das Problem liegt hier in der ersten Funktion innerhalb der Map. Das Problem besteht darin, dass Großbuchstaben ein Kapital U sein müssen. Wenn Sie genau auf diese Funktion innerhalb der Entwicklertools verweisen . Wir können dieser Funktion einen Namen hinzufügen. Zuerst nennen wir diese eine Transformation nach oben. Dann ein beschreibender Name für diese anonyme Funktion. Lass uns gehen, um Index vom Titel zu holen. Wenn wir nun wieder zu den Entwicklertools zurückkehren, sehen wir einen Fehler. Aber jetzt können wir sofort sehen, dass wir einen Hinweis darauf haben , welche Funktion das Problem verursacht. Wir können dies hier auf diesen Abschnitt beschränken. Es ist wie ein RNA-Label für unsere Funktion, um sie zu identifizieren. Lasst uns das beheben, ändert dort Kapital U. Wenn Sie keine Fehler innerhalb der Konsole sehen , sehen wir stattdessen diesen zurückgegebenen Wert von zwei, die Indexnummer ist, die diesem Abschnitt entspricht gerade hier. Wie bei vielen Dingen lässt die Wahl der Benennungsfunktionen sie als anonym verlassen , ganz Ihre Wahl. Oft ist es kein Problem, den Namen nicht zu lassen und die Menge an Code, den wir schreiben, leicht zu reduzieren. Wenn Sie es jedoch vorziehen, beschreibender zu sein und einige zusätzliche Zeiger zu wünschen, wenn Sie wieder tief sind, können Sie sie Ihren Funktionen hinzufügen um beschreibender zu sein. 32. Eine Funktion oder eine Methode?: JavaScript verfügt über eine Menge Terminologie, an die sich gewöhnt haben kann, z. B. die Funktionsausdrücke und Funktionsdeklarationen, die wir in diesem Abschnitt angeschaut haben. Etwas anderes, das wir ziemlich oft benutzen, sind die Worte Funktion und auch Methode. Sie können gleich sein und das sind sie ziemlich, aber es gibt einen entscheidenden Unterschied. Über die Starterdateien, was eine Funktion oder eine Methode ist. Springe runter in den Script-Bereich. Dies ist alles aus den vorherigen Abschnitten bekannt, wir haben unsere beiden Arrays. Wir haben jetzt unsere Funktion zu prüfen, ob eine Zutat in einer dieser Elemente enthalten ist. Nun, lasst uns auch eine neue Funktion erstellen und diese wird nur prüfen, wie viele Zutaten ein bestimmtes Rezept hat. Wir müssen auch ein Rezept einreichen. Dann werden wir drinnen nur einen Wert zurückgeben , der der Länge des Rezepts entspricht. Wir haben uns diese Längeneigenschaft zuvor angeschaut, dies wird uns sagen, wie viele Elemente in einem Array gespeichert sind. Wir können diesen Schlag mit einem Konsolenprotokoll testen, indem wir die Anzahl der Zutaten und dann eines unserer Arrays übergeben. Speichern Sie dies und öffnen Sie eine Vorkonsole. Wir können jetzt sehen, dass das Brot-Array vier verschiedene Werte hat. Aber nehmen wir an, wir haben noch mehr Funktionen im Zusammenhang mit demselben Array erstellt . Möglicherweise haben Sie viel mehr Funktionen, um viele verschiedene Prüfungen an unseren Rezepten durchzuführen. Wenn alle diese Funktionen verwandt wären, wäre es gut, alle diese Funktionen miteinander zu gruppieren . Wie glauben Sie, dass wir viele verwandte Werte zusammenfassen ? Nun, dafür benutzen wir ein Objekt. Wir haben uns bisher Objekte angeschaut. Ein Objekt, das wir uns angesehen haben, war in etwa so, wir hatten einen Benutzer , der diesen entspricht unseren geschweiften Klammern. Aber ich übergebe die Eigenschaften, die eine Kombination aus Schlüsseln und Werten sind eine Kombination aus Schlüsseln und , und jede ist durch ein Komma getrennt. Object werden nicht nur zum Speichern einfacher primitiver Werte wie unsere Strings verwendet. Sie können auch über Objekttypen speichern. Wir können über Objekte platzieren, wir in Arrays und auch unsere Funktionen platzieren können. Da diese alle mit unseren Rezepten zusammenhängen, nennen wir dieses Objekt „checkreipes“. Da wir derzeit zwei Funktionen haben, werden wir zwei Immobilien darin platzieren. Die erste wird Check Allergien sein, und der zweite wird die Anzahl der Inhaltsstoffe sein. Wir müssen auch einen Wert an diese beiden Eigenschaften übergeben. Davon können wir auch unsere Funktionen schneiden und einfügen, Allergien wie in der kurz nach der ersten Zeile überprüfen. Wie bei allen anderen Eigenschaften müssen wir diese dann durch ein Komma trennen. Das Gleiche gilt für unsere zweite Funktion, die die Anzahl der Inhaltsstoffe ist. Bringen Sie das an einigen Stellen kurz nach unserem Namen heraus. Etwas anderes, was wir auch tun können, ist, diese in anonym umzuwandeln. Da wir einen Eigenschaftsnamen „Checkallergien“ und „Numberofingredients“ haben , haben wir eine Möglichkeit, auf diese Funktionen zuzugreifen, sodass wir die Funktionsnamen auf beiden entfernen können. Da diese beiden Funktionen auf ein Objekt gesetzt werden, gelten beide jetzt als Methoden und jetzt kann jede dieser Methoden aus dem Objektnamen aufgerufen werden , der „checkrecipes“ ist. In der Tat sollte dies nur ein Kapital R. Also jetzt, wenn wir im Objektnamen, der „CheckRecipes“ ist, zu unserer Konsolenprotokollbasis gehen im Objektnamen, der „CheckRecipes“ ist, zu unserer Konsolenprotokollbasis . Mit der Punktnotation können wir dann eine dieser Eigenschaften aufrufen, also überprüfen Sie einfach Allergien oder die Anzahl der Inhaltsstoffe und wir können dies auch mit der automatischen Vervollständigung im Editor sehen . Lassen Sie uns für eine Reihe von Zutaten gehen und genau wie oben müssen wir auch dieses Rezept weitergeben, also die Klammern oder die Klammern. Lass uns Brot holen und dann nach oben scrollen wir werden auch dieses Konsolenprotokoll entfernen. Es gibt kein Problem, dass es einfach da ist. Speichern Sie dies und laden Sie den Browser neu, und wir erhalten den Wert immer noch zurück. Aber dieses Mal wurde es als unsere Methode vom Objekt und nicht als ursprüngliche Standalone-Funktion aufgerufen. So funktionieren alle Methoden in unseren Objekttypen. Wenn wir einen Blick oben werfen, haben wir unsere beiden Arrays genau hier erstellt, und wie wir bereits wissen, sind Arrays ein spezieller Objekttyp. Da beide ein Objekt sind, haben wir deshalb auch Zugriff auf diese Array-Methoden. Wenn wir in die Konsole gehen und Brownies und dann Punkt eingeben, wie bei jedem anderen Objekt, können wir diese Punktnotation verwenden, um auf eine der Eigenschaften oder Methoden zuzugreifen der Eigenschaften oder Methoden , die auf verfügbar sind dieses Objekt. Hier kommen all diese hinter den Kulissen her, ist genau das Gleiche, unser Array ist ein Objekt wie dieses. Dann greifen wir auf einzelne Eigenschaften oder Methoden zu, die wir im Browser sehen. Zurück zu diesem Objekt, obwohl wir zwei separate Funktionen oder Methoden hier übergeben haben, kann es auch mit einem der Datentypen gemischt werden. Wir können auch Primitive wie die maximale Anzahl von Rezepten mischen , und wir können dies als einfachen primitiven Wert speichern, und diese Technik ist eine großartige Möglichkeit, viele verwandte Informationen zu gruppieren und funktionalität. Genau wie bei den Methoden können wir mit dieser Punktnotation auch auf maximale Rezepte zugreifen . Da sich diese nicht auf eine Funktion bezieht, benötigen wir die Klammern nicht, wir nennen sie einfach nach dem Eigenschaftsnamen. Aktualisieren Sie und wir sehen jetzt den Wert von 1.000. Wir wissen jetzt, dass eine Funktion, die als Eigenschaft für ein Objekt platziert wird, in JavaScript als Methode angesehen wird. Manchmal benötigen wir diese Methoden jedoch, um sich auch auf andere Eigenschaften derselben Objekte zu beziehen. Zum Beispiel können wir auch eine Eigenschaft namens „CurrentRecipes“ haben , und dies ist die Gesamtzahl der Rezepte , die sich derzeit auf unserer Website befindet. Dann möchten wir vielleicht auch eine Methode, die auf diese beiden Eigenschaften zugreift und überprüft, dass wir die maximale Anzahl von Rezepten nicht überschritten haben , bevor eine neue hochgeladen werden kann. Fügen Sie dazu eine beliebige Eigenschaft hinzu, unten in diesem Objekt wird „RecipesLeft“ angezeigt, und wie es klingt, berechnen wir die Anzahl der Rezepte, die wir noch auf unserer Website hinterlassen haben. Dies ist relativ einfach, alles, was wir tun müssen, ist, den Wert unserer maximalen Rezepte zurückzugeben . Sie die Spaltenrezepte zum Mitnehmen. Jetzt können wir das im Browser ausprobieren. Lassen Sie uns das protokollieren, aber dieses Mal protokollieren wir den Rückgabewert der verbleibenden Rezepte. Speichern und aktualisieren. Wir sind direkt zur Registerkarte „Quellen“ gegangen , da dies dann einen Fehler auslöst. Wir sehen, dass die maximalen Rezepte nicht definiert sind, und im Call-Stack können wir sehen, dass dies durch „RecipesLeft“ verursacht wurde. Der Grund, warum dies geschieht, ist möglicherweise nicht sofort offensichtlich, aber dies liegt daran, dass wir dieses Schlüsselwort verwenden müssen, um auf andere Eigenschaften unseres Objekts zuzugreifen auf andere Eigenschaften unseres Objekts , wie diese beiden hier wir dieses Schlüsselwort verwenden müssen, um also vor jedem unserer Eigenschaftsnamen. jetzt im Browser Wenn wir jetzt im Browser in die Konsole gehen, funktioniert das jetzt alles völlig gut. Offensichtlich möchten Sie vielleicht wissen, worauf der Wert dieses überhaupt hinweist. Nun, gehen wir zu unserem Objekt und werfen einen Blick auf diese Funktion basierend auf einem Konsolenprotokoll, und wir können den Wert davon ausgeben , speichern und aktualisieren. Wir können diese Punkte auf unser aktuelles Objekt sehen und es verfügt über alle verfügbaren Eigenschaften, die wir gerade hier erstellt haben. Dieses Schlüsselwort kann sehr komplex zu verstehen sein, aber in diesem aktuellen Kontext verweist dieses Schlüsselwort auf eine der Eigenschaften, die für dieses aktuelle Objekt verfügbar sind. Es wird mehr Informationen darüber während wir den Kurs durchlaufen. Als Nächstes schauen wir uns die Pfeilfunktion an, die wir uns vorher kurz angeschaut und wie sie sich auch anders verhält als innerhalb dieses Objekts. 33. Pfeilfunktionen: In ES2015 erhielten wir eine neue optionale Möglichkeit, Funktionsausdrücke zu erstellen. Diese werden Pfeilfunktionen genannt. Dies war eine kürzere Möglichkeit, Funktionsausdrücke zu schreiben. Aber es ist nicht nur diese kürzere Syntax die anders ist, sie verhalten sich auch anders als normale Funktionen. Sie oben in den Starterdateien Gehen Sie oben in den Starterdateien in die Pfeilfunktionsdatei und oben haben wir einen regulären Funktionsausdruck. Dies ist eine Funktion, die anonym ist. Dann speichern wir das innerhalb einer Variablen. Was wir jetzt tun werden, ist dies in eine Pfeilfunktion umzuwandeln. Wir haben uns diese kurz früher angeschaut und wir müssen dies tun , zuerst die Funktionstaste zu entfernen. Dann fügen wir nach den Klammern unseren Pfeil hinzu, und es besteht aus den Gleichen und dem Größeren als Symbol. Rufen Sie dies auf und führen Sie die Warnung aus, wenn sie mit dem Variablennamen aufgerufen wird, gefolgt von den Funktionsklammern, speichern und aktualisieren. Jetzt wird die Funktion jetzt korrekt ausgeführt. Zu Beginn dieses Videos sagten wir zunächst, sagten wir zunächst Pfeilfunktionen eine kürzere Syntax sind, aber das sieht im Moment nicht viel anders aus. Dies wird immer noch als Pfeilfunktion eingestuft, aber wir können es auch noch kürzer machen. Wenn wir nur eine einzige Codezeile darin verschachtelt haben, können wir diese geschweiften Klammern entfernen und wir können sie in dieselbe Zeile bringen. Aktualisieren Sie den Browser und dies funktioniert immer noch genauso wie zuvor. Wenn Sie nur eine einzelne Zeile wie diese haben, müssen wir das Schlüsselwort return auch nicht hinzufügen , da dies automatisch geschieht. Wenn wir jedoch mehrere Codezeilen hätten, müssten wir etwas von der Funktion zurückgeben und auch die mehreren Zeilen innerhalb der geschweiften Klammern umwickeln. Pfeilfunktionen können auch Parameter wie eine reguläre Funktion aufnehmen. Wir können so viele davon weitergeben, wie wir durch ein Komma getrennt werden wollen . Wenn wir nur einen einzigen Parameter wie diesen hätten, können wir auch die umgebenden Klammern entfernen. So sieht eine Pfeilfunktion aus. Lassen Sie uns eine unserer Methoden aus dem vorherigen Video umgestalten. Wir können diese beiden Codezeilen entfernen, und unten wird das gleiche Beispiel haben, wie wir es im vorherigen Video angesehen haben. Ich werde diesen ganzen Code kommentieren, um ihn aktiv zu machen. Denken Sie daran, dass wir zuvor unsere Check-Objekte erstellt haben und verschiedene Eigenschaften enthielten, genau wie unsere Primitive hier. Auch da wir die Standalone-Funktionen als Teil dieses Objekts verschoben haben , werden diese jetzt als Methoden bezeichnet. Was wir innerhalb dieses Objekts tun werden, ist, diese RecipesLeft-Methode zu transformieren , und ich verwende eine Pfeilfunktion. Genau wie zuvor können wir das Schlüsselwort function verschieben, da dies nur eine einzige Codezeile ist. Wir können auch die geschweiften Klammern entfernen, diese auf dieselbe Linie bringen und daran denken, dass einzelne Zeilen automatisch zurückgegeben werden . Wir brauchen auch den Pfeil. Versuchen wir, uns bei der Konsole anzumelden und zu sehen, was passiert. Wir haben immer noch das Konsolenprotokoll von RecipesLeft. Aktualisieren Sie den Browser und wir erhalten ein unerwartetes Token, welches das Semikolon ist. Das ist nur das hier. Wenn wir dies entfernen und aktualisieren, sehen wir den Wert einer Zahl. Offensichtlich funktioniert diese Methode nicht wie zuvor. Dies liegt an der Art und Weise, wie Pfeilfunktionen mit diesem Schlüsselwort umgehen. Genauer gesagt, Pfeilfunktionen haben dies nicht, und deshalb sehen wir die Nummer in der Konsole nicht . Sehen Sie dies, dass wir auch in ein Konsolenprotokoll innerhalb dieser Methode einfügen können . Bewegen Sie diese also in eine separate Zeile, protokollieren Sie den Wert davon. Da wir uns jetzt auf mehreren Zeilen befinden, müssen wir diese auch in die geschweiften Klammern wickeln, um sicherzustellen, dass dieses Komma ebenfalls entfernt wird. Versuchen wir es mal. Aktualisieren und jetzt sehen wir, dass dies auf das Fensterobjekt verweist, anders als im letzten Video, wo sich der Wert davon auf das übergeordnete Objekt bezog , das CheckRecipes war. Pfeilfunktionen haben dies nicht selbst. Dies bedeutet, dass sich dies auf das globale Objekt bezieht, daher wird oft empfohlen, beim Erstellen von Methoden wie dieser keine Pfeilfunktion zu verwenden beim Erstellen von Methoden wie dieser keine Pfeilfunktion , da sie nicht auf Eigenschaften dieses Objekts zugreifen kann . Obwohl wir die Pfeilfunktionen in einem früheren Video verwenden , kann dies die Pfeilfunktionen in einem früheren Video verwenden , aufgrund der kürzeren Syntax nützlich sein, um seltsame Dinge wie Array-Methoden zu kombinieren . Wenn wir uns ein Beispiel dafür ansehen, ganz unten. Wenn wir auf die Brownies oder Map zugreifen und dann mit der regulären Funktionssyntax, würde das genau so aussehen. Wir geben eine Funktion ein. Diese Funktion würde dann alle Zutaten aufnehmen und dann könnten wir alles zurückgeben, was Sie wollen. Lassen Sie uns unsere Zutaten anschauen, die in Großbuchstaben umgewandelt wurden. Dies ist eine Art, dies mit einer regulären Funktion zu schreiben , und tatsächlich ist es immer noch meine bevorzugte Art, Dinge zu tun. Obwohl die Äquivalente der Pfeilfunktion so aussehen würden, brownies.map, und anstatt das Funktionsschlüsselwort einzugeben, können wir eine Pfeilfunktion übergeben, bei die Klammern handelt, die Pfeilsyntax. Wir brauchen das Schlüsselwort return nicht da dies alles in einer eigenen Zeile ist. Wir können dies dann einfach kopieren, einfügen und beide sind gleichwertig. Wir können nicht verstehen, warum die kürzere Version oft mit Dingen wie Array-Methoden und auch bei einigen Leuten nur mit Pfeilfunktionen nach rechts verwendet Array-Methoden und auch wird. Manchmal weil es nur eine neuere Syntax ist. Dies kann in Ordnung sein, wenn dies die Syntax ist, die Sie bevorzugen würden und sie haben einige Vorteile, wie wir gerade bei der kürzeren Form gesehen haben . Aber denken Sie daran, nur weil Pfeilfunktionen eine neuere Art sind, Dinge zu tun, heißt das nicht, dass wir sie immer ausschließlich verwenden sollten. Sie werden feststellen, dass sie auch anonym sind. Das bedeutet, dass sie keine eindeutige Kennung über sich haben. Möglicherweise steht zur Verfügung, die wir ihnen zugewiesen haben. Dies kann das Debuggen auch etwas schwieriger machen. Denken Sie auch daran, dass wir den Unterschied zwischen der Art und Weise haben , wie es mit diesem Schlüsselwort umgeht , und der regulären Funktionsdeklaration. 34. Standard-Funktionsparameterwerte und Rest-Parameter: Dieses Video wird sich auf Funktionsparameter und einige nützliche Tricks konzentrieren, wenn sie verwendet werden Funktionsparameter und , die mit der Einführung von ES 2015 zur Verfügung gestellt wurden . Denken Sie daran, dass ein Parameter ein Platzhalter für den Wert ist , den wir in eine Funktion übergeben werden, und Sie können sich dies wie eine Variable vorstellen. Zuerst möchten wir uns die Standardparameterwerte ansehen , und um zu sehen, dass dies eine neue Funktion erstellt , die einen Währungsbetrag, ein Währungssymbol und dann zurückkehrt eine neue Zeichenfolge, um den Preis dem Benutzer wieder anzuzeigen. Ordner dieser Lektion , der Standardparameterwerte ist, und unter Verwendung von Rest Im Ordner dieser Lektion , der Standardparameterwerte ist, und unter Verwendung von Rest haben wir unten ein leeres Skripttag, in dem wir unsere Funktion erstellen können, die ich Formatgeld aufrufe. Dies wird das Ende des Betrags nehmen, den wir formatieren müssen, und auch der Währung für den Funktionskörper. Dies wird einfach eine neue Zeichenfolge zurückgeben. Da wir auf diese beiden Variablen zugreifen müssen, können wir dies innerhalb der Backticks platzieren und das $ -Symbol und die geschweiften Klammern verwenden um eine Variable einzufügen. Erstens die Währung und der Betrag. Die Zeichenfolge, die zurückgegeben wird, sieht ungefähr so aus. Alle Funktionsnamen direkt unter dem Namen, dann wird der Betrag und auch die Währung übergeben. Gehen wir für 100 und das Währungssymbol als String und speichern es innerhalb einer Variablen. So auf die Konsole. Speichern Sie dies und wir würden den Wert von 100 mit dem $ -Symbol direkt vor uns erwarten . Wir könnten auch noch einen weiteren gehen, indem wir den Preis auf zwei Dezimalstellen ändern. Wir können dies mit einer JavaScript-Nummer-Methode namens toFixed tun. Kurz nach dem Betrag können wir ihn übergebenFixed und setzen Sie dies dann auf zwei Dezimalstellen. Da sind wir los. Was wäre, wenn wir eine Website hätten, die nur eine einheitliche Währung hatte? Nun, anstatt den zweiten Wert jedes Mal zu übergeben , könnten wir stattdessen einen Standardparameter übergeben , so dass wir dies bis zu unseren Parametern gleich unserer Standardzeichenfolge setzen können. Jetzt könnten wir das entweder entlassen oder stattdessen wollen wir dies außer Kraft setzen. Wir könnten dies ändern, um einen anderen Wert zu haben, also würde dies den Standardwert einfach so außer Kraft setzen. Auch wenn wir dies entfernen, würde es wieder zu unserem Standardsymbol $ zurückkehren. Dies funktioniert auch genau so, wenn Sie unseren Standard innerhalb einer Variablen speichern möchten . Erstellen Sie oben eine Konstante, die als Währungssymbol bezeichnet wird und legen Sie diese auf unseren Standardwert fest. Variablen funktionieren auch hier, wir könnten dies auf unseren Variablennamen des Währungssymbols setzen. Spar dir das auf. Aktualisieren. Wir sehen jetzt den Standardwert unseres $ -Symbols, obwohl wir dies nicht als Argument übergeben haben. Diese Art von Ansatz wäre also sehr nützlich, wenn Sie einen einzigen zentralen Wert beibehalten möchten , den wir in verschiedenen Bereichen unserer Website verwenden wollten. Als Nächstes schauen wir uns an, wie wir den Rest-Operator verwenden können . Der Rest Operator bietet uns eine einfache Möglichkeit, mit einer Funktion umzugehen , die viele verschiedene Parameter haben wird . Hier haben wir nur zwei, also ist das nicht allzu schwer zu bewältigen. Aber stell dir vor, wir hätten viel mehr Parameter , die wir einbeziehen wollten , damit können wir eine neue Funktion schreiben, also kommentieren wir all diesen vorhandenen Code und dann erstellen wir unten eine neue Funktion was für die Berechnung eines Durchschnittsalters verantwortlich sein wird , also nennen das Schlüsselwort Funktionsschlüsselwort, den Namen des Durchschnittsalters den Namen des Durchschnittsalters und darunter den Funktionsnamen. Wir könnten auch viele verschiedene Zahlen weitergeben, was dem Alter aller unserer verschiedenen Benutzer entspricht. Weitergabe vieler verschiedener Argumente. alle diese Argumente an die Funktion übergeben werden, wäre es nicht sinnvoll, für jeden dieser Werte einen neuen Parameternamen zu erstellen . Stattdessen ist es nützlich, wenn wir nur einen einzigen Wert übergeben könnten und um damit umgehen zu können, haben wir den Rest Operator. Was wir also tun können, ist die drei Punkte zu benutzen. Name des Personalparameters und dies ist im Grunde wie eine Variable mit den drei Punkten platziert wurden, bevor wir jetzt auf unser Alter innerhalb der Funktion zugreifen können . Versuchen wir dies in einem Konsolenprotokoll, aktualisieren, und wir haben jetzt sechs Werte in einem Array gespeichert. Dies ist sehr nützlich, wenn wir nicht für jeden der Werte einen neuen Variablennamen erstellen möchten . Oder wenn wir nicht genau wussten, wie viele Werte an diese Funktion übergeben werden sollten. auf den Zweck unserer Funktion zurückgehen, nämlich das Durchschnittsalter, können wir dieses Alters-Array jetzt verwenden, um dies zu berechnen , indem wir eine Methode verwenden, die Sie in der Vergangenheit als reduziert bezeichnet haben . Entfernen Sie also dieses Konsolenprotokoll, greifen Sie auf unser Alter ist variabel und rufen Sie dann die reduzierte Methode auf. Denken Sie daran, dass im vorherigen Video, das wir uns das angeschaut haben, zwei verschiedene Dinge aufnimmt. Wir möchten dies als Pfeilfunktion erstellen. Dies wird die Summe und auch den aktuellen Wert übernehmen , der unser Pfeil ist , der diese beiden Werte addieren wird, damit der Strom insgesamt sagt. Dann können wir das innerhalb einer Variablen lösen. Dies wird jeden der Werte innerhalb von Zeitaltern durchlaufen , die nur hier sind. Es wird den aktuellen Wert auswählen und diesen dann zur vorherigen Summe hinzufügen. Stellen Sie sicher, dass alle diese Werte zu einer einzigen Zahl zusammengefasst sind . Was wir jetzt tun müssen, ist, diese Summe zu nehmen und sie durch die Anzahl der Einträge innerhalb des Arrays zu teilen, dies von der Funktion zurückzugeben. Die Summe aller addierten Zahlen geteilt durch die Länge des Arrays. Wie erhalten wir die Länge des Arrays? Nun, wir machen dies mit der Eigenschaft length, die in unserem Fall der Wert von sechs ist. Da diese Funktion einen Wert zurückgibt, können wir diesen auch innerhalb einer Variablen speichern. Nennen wir das den Durchschnitt. Stellen Sie dies auf den Rückgabewert ein, und zeigen Sie diesen dann in den Protokollen an. Speichern Sie dies, aktualisieren Sie es, und der Durchschnitt aller unserer Zahlen beträgt 43. So funktioniert der Rest-Parameter, indem er alle Werte auswählt, die an ihn übergeben werden. Aber wenn wir nicht alle diese Werte erfassen wollten, sagen wir zum Beispiel, wenn wir eine separate Variable für den allerersten Wert wollten , könnten wir den ersten Parameter genau so und dann den Wert der Altersgruppen einfügen wären alle verbleibenden Werte von 45 bis zum Ende des Arrays. Sie könnten noch weiter gehen und mehrere Elemente speichern, z. B. den zweiten Wert, aber denken Sie immer daran, dass der Restparameter zuletzt sein muss , da er, wie er klingt, alle restlichen Werte sammelt. Diese drei Punkte können auch von früher bekannt aussehen , wenn wir uns die Struktur in Arrays anschauten. Dieses Beispiel haben wir uns früher angeschaut und dies ist ein Beispiel für die Verwendung von Spread. Ruhe und Ausbreitung sind sehr ähnlich und beide haben drei Punkte. Spread bedeutet, dass wir etwas nehmen können , das wir durchlaufen können, wie dieses Array von Posts, und wir können Werte herausziehen und sie in etwas anderes verteilen. Zum Beispiel können sie sich in ein neues Objekt oder Array ausbreiten , um über die Werte zu kopieren Dies macht es nützlich für Dinge wie das Duplizieren Arrays oder das allgemeine Erfassen von Werten und Kopieren. Dann haben wir den Rest-Parameter, wir uns gerade angeschaut haben, und dies macht das Bündeln aller Argumentwerte in einem einzigen Array-Wert sehr einfach. Darunter befinden sich die Standardparameter und dieser Standardwert wird erstellt, indem ein Wert wie eine Zahl oder eine Zeichenfolge festgelegt wird. Denken Sie daran, dies ist nur der Standardwert und wenn wir einen Wert angeben, wenn wir eine Funktion aufrufen, wird dieser stattdessen verwendet. 35. Was ist DOM?: Kurz bevor wir in einen Code springen, ist es wirklich wichtig, etwas zu wissen, das wir in diesem Abschnitt namens DOM betrachten werden. Das DOM steht für Document Object Model und es ist eine Programmierschnittstelle für unsere HTML-Seiten. Das mag komplex klingen, aber es ist nicht zu verwirrend, wenn man einmal die Grundlagen kennt. Wenn wir eine sehr einfache und skript-buck-Version eines Webdokuments verwenden, ist dies das Grundelement, das wir haben. Alle Dokumente müssen diesen HTML-Wrapper haben und dann haben wir den Kopf- und Körperbereich eine Ebene darin. Um zu visualisieren, wie dies im DOM-Baum aussehen würde, wäre dieses Beispiel in etwa so. Auf der rechten Seite befindet sich das Dokument oben im Baum. Dies ist unser Webdokument oder unsere Webseite. Darunter haben wir den Root-HTML-Wrapper. Darunter haben wir den Kopf- und die Körperabschnitte, die beide nebeneinander liegen. So sehen wir tatsächlich, wenn wir sie in unserem Texteditor sehen . Unser DOM besteht aus all diesen Objekten, die unsere HTML-Seite widerspiegeln. Einen Schritt weiter fügen Sie dem Head-Bereich ein Titelelement hinzu, das wir immer tun, und auch ein h1-Element zum Körper. Diese alle verschachtelten sind genau so strukturiert wie unsere Webseite, wie wir es in unserem Texteditor sehen. Alle diese Objekte im DOM sind Clusterknoten. Der h1 zum Beispiel ist ein Elementknoten, ein Envelope der Überschrift und auch der Titel. Wir haben einen Textknoten, der der Textinhalt jedes Elements ist. Grundsätzlich der Text, der zwischen den öffnenden und den schließenden Tags verläuft . Elemente können auch Attribute haben, wie einen H-Graph, eine Klasse und eine ID. Dies sind auch Knoten. Diese werden Attributknoten genannt, genau wie wir hier unten sehen. Wir haben Elementknoten, wir haben Textknoten und wir haben auch Attributknoten. Wir haben diese Akte erhalten, ohne etwas über das DOM zu wissen. Dies geschieht alles im Hintergrund. Warum sollte es uns überhaupt wichtig sein? Nun, das DOM bietet JavaScript oder anderen Sprachen eine Möglichkeit , sich mit unserem HTML zu verbinden. Es gibt uns Zugriff auf den Dokumentbaum, damit wir Änderungen daran vornehmen können , wenn wir möchten. Dies bedeutet, dass wir JavaScript verwenden können, um neue HTML-Elemente zu erstellen. Wir können sie entfernen, wir können das Styling ändern, Attribute hinzufügen oder entfernen und im Grunde alles tun, was wir wollen mit unseren HTML-Elementen. Obwohl wir in JavaScript-Code schreiben, verwendet es das DOM, um auf diese HTML-Elemente zuzugreifen. Sie arbeiten zusammen, um uns dies zu ermöglichen. Wir haben uns in unseren früheren Videos bereits kurz mit der Arbeit mit dem DOM befasst, als wir uns einige Beispiele angeschaut haben , wie das Ändern des Textes im Browser. Wir werden auch in diesem Abschnitt noch viel mehr behandeln müssen. Werfen wir einen Blick auf etwas Code im nächsten Video. 36. Elemente auswählen: Hey, willkommen zurück in dieser neuen Rubrik. Für diesen Abschnitt gehen Sie in Abschnitt Nummer 4 , bei dem es sich um Ereignisse und das DOM handelt. Dies ist das erste Video, das Nummer 1 ist , Elemente auswählen. Ich nehme den Pfad zu dieser Datei und öffne diese im Browser. Wir können im Browser sehen, dass wir bereits HTML-Code haben , der eine Tabelle anzeigt, und dies wird uns eine Referenz für verschiedene Möglichkeiten geben, mit denen und dies wird uns eine Referenz für verschiedene Möglichkeiten geben wir eines unserer HTML-Elemente auswählen können . Wenn wir eines dieser HTML mit JavaScript manipulieren müssen, haben wir natürlich eines dieser HTML mit JavaScript manipulieren müssen, mehrere Möglichkeiten, diese auszuwählen. Zuallererst können wir, wie wir uns in der Vergangenheit angesehen haben, ein Element nach der jeweiligen ID auswählen. Dies war ein ID-Attribut, und wir können es unter einem bestimmten Namen auswählen. Wir können durch ein Tag auswählen , das der Name des Elements ist, wie Id, ein p-Element oder das Bild, wir können nach einem Klassennamen auswählen und wir können auch mit einem CSS-Selektor auswählen. Es gibt zwei verschiedene Möglichkeiten, die wir dafür nutzen können. Wir können den allerersten übereinstimmenden Selektor auswählen oder wir können alle verfügbaren Spiele zu uns zurückkehren. Auf der rechten Seite haben wir eine Reihe von Methoden, mit denen wir eines unserer Elemente mit diesen Methoden auswählen können . Wir haben getElementById in der Vergangenheit kurz benutzt. Wir können unsere Elemente nach Tag-Namen und auch nach dem Klassennamen auswählen . Beachten Sie, dass die s in beiden dieser beiden Methoden hervorgehoben sind, da es mehrere Elemente zurückgibt. Wir haben QuerySelector, der die allererste Übereinstimmung auswählen wird , und QuerySelectorAll, das alle Übereinstimmungen zurückgibt. Beide Methoden funktionieren genau so genauso wie bei unserem CSS. Zum Beispiel könnten wir es nach einem Elementnamen auswählen, wir könnten die.select eine Klasse oder auch ein # verwenden, wenn wir ein Element nach einer bestimmten ID mit dieser Methodengruppe auswählen möchten , die wir verwenden werden wir könnten die.select eine Klasse oder auch ein # verwenden, wenn wir ein Element nach einer bestimmten ID mit dieser Methodengruppe auswählen möchten, die wir verwenden werden konzentrieren Sie sich auf dieses Video und auch in der kommenden Rubrik. Denken Sie daran, dass eine Methode genau wie eine Funktion ist, aber von einem Objekt lebt. Auch das Dokument ist ein Ziel. Gehen wir zu unserer index.html scrollen Sie nach unten zum Skriptbereich. Wir erstellen eine console.log und ich lege den Inhalt des Dokuments ein. Dies ist ein Objekt. Wir öffnen die Entwicklertools in der Konsole und aktualisieren sie. Mach das einfach ein bisschen größer. Wenn wir dies öffnen und dann innerhalb der Konsole können wir den gesamten Inhalt sehen , den Sie unserer Indexseite haben. Wie im letzten Video beschrieben, ist das Dokument die oberste Ebene des DOM-Baums. Es deckt alles ab, was sich auf dieser HTML-Seite befindet. Diese Dokumente waren ein Objekt, das auch viele Eigenschaften und Methoden zur Verfügung hat . Wir können dies sehen, wenn wir das Dokument eingeben und dann Punkt verwenden, um die automatische Vervollständigung zu erhalten. Dies geht auf früher zurück, als wir uns Objekttypen wie Arrays anschauten Objekttypen wie Arrays und festgestellt haben, dass sie viele integrierte Eigenschaften und Methoden hatten , auf die wir zugreifen konnten. Wir können prüfen, ob dieses Dokument irgendwelche Bilder enthält. In unserem Fall haben wir keine, also gibt dies eine leere HTML-Sammlung zurück . Wir könnten auch einige verschiedene Dinge wie die URL überprüfen . Drücken Sie Enter. Dies kehrt zum Dateipfad für dieses bestimmte Dokument zurück. Wir können sehen, dass sich meine auf dem Desktop und in den modernen JavaScript-Starterdateien sowie der URL befindet. Geben wir den Kopf ein und dies gibt den Head-Bereich zurück , der alle Daten innerhalb dieses Head-Abschnitts enthält. Das Gleiche gilt für unseren Körper und wie unsere Körperelemente mit dem gesamten Inhalt im Inneren. Der Grund, warum wir auf dieses Dokument und den gesamten Inhalt zugreifen können dieses Dokument und den gesamten Inhalt liegt darin, dass es global auf dem Window-Objekt verfügbar ist. Wir könnten auch über das Window-Objekt darauf zugreifen. Bis zu unserem Konsolenprotokolltyp im Fenster, aktualisieren und innerhalb der Konsole, wenn wir dies öffnen, hat dieses Fensterobjekt die Dokumenteigenschaft genau hier, wo wir auf alle gleichen Eigenschaften zugreifen können Methoden, die wir uns gerade angeschaut haben. Nun, was uns momentan interessiert ist, sind die verfügbaren Methoden, um die erforderlichen Elemente auszuwählen , die diese auf der rechten Seite sind. dies zu tun, erstellen wir zunächst ein neues Element, das Sie auswählen möchten. Wir können dies überall in unserem Code platzieren. Ich füge ein p-Element direkt über dem Abschnitt hinzu und erhalte es dann an der ID des Textes. Dann können wir im Scriptabschnitt direkt unten dies abrufen, indem wir zuerst die Dokumente auswählen, und dann können wir auf die Methode zugreifen, die für das Dokument verfügbar ist, das getElementById ist. Wir wissen, wie das geht, wir geben als Zeichenfolge die ID ein, die Text ist, speichern diese innerhalb einer Variablen, nennen wir diesen Text. Jetzt können wir das an der Konsole protokollieren. Aktualisieren. Los geht's und das ist jetzt unser p-Element ausgewählt, das wir gerade erstellt haben. Das ist ziemlich einfach. So wählen wir ein bestimmtes Element aus. Aber was wäre, wenn wir zwei p-Elemente hätten? Nun, um diese beiden p-Elemente ergreifen zu können, haben wir zwei Möglichkeiten. In der zweiten Zeile haben wir Zugriff auf den Tag-Namen. Wie Sie bei den s sehen können, ist dies in der Lage, mehrere Elemente zu halten. Dies wird in Ordnung sein. Auch für die allerletzte Zeile, wir könnten auch querySelectorAll verwenden, wo wir mehrere Übereinstimmungen nach dem p-Element auswählen könnten, und natürlich, wenn wir eine Klasse an beide Elemente angehängt hätten , wir könnten auch getElementsByClassName verwenden. Aber wir haben derzeit keine Klasse , die an diese gebunden ist, also werden wir den Tag-Namen verwenden. Gehen wir runter und statt getElementById, und nur um getElementsByTagName zu sein, und genau wie wir es mit CSS tun würden, können wir diese mit dem Tag-Namen von p auswählen . Speichern und aktualisieren. Wir kehren nun wieder zu einer HTML-Sammlung zurück, die zwei verschiedene Elemente enthält. Eine HTML-Sammlung ist eine generische Array-ähnliche Sammlung von Elementen, und so werden unsere Return-p-Elemente gespeichert. Wie bei Arrays können wir auch über die Indexposition auf bestimmte Werte zugreifen . Wenn wir die eckigen Klammern hinzufügen und dann die Indexnummer 1 auswählen würden, würde dies unser zweites p-Element auswählen, das gerade hier ist. Wir könnten dies ändern, um Index Null zu sein, und dies würde unseren allerersten auswählen. Beachten Sie jedoch, dass es sich eine HtmlCollection und nicht um ein Array handelt, haben wir keinen Zugriff auf eine der Array-Methoden. Als Nächstes können wir Elemente nach dem Klassennamen auswählen und dazu müssen wir unseren Elementen auch eine Klasse hinzufügen. Gehen wir für unser zweites Element, wir können eine Klasse hinzufügen. Ich möchte für SMS Small gehen. Sie möchten einer Tabelle folgen, die Sie bereits haben. Dieser sollte ziemlich einfach sein. Wenn ich ein Element nach dem Klassennamen auswählen möchte , haben wir getElementsByClassName. Änderung ist vorbei und übergibt den Klassennamen, der text-klein war. Entfernen Sie die Indexnummer und aktualisieren Sie sie. Genau wie zuvor sind wir auch zu HtmlCollection zurückgekehrt zu HtmlCollection zurückgekehrt da dies auch mehrere Elemente enthalten könnte , die alle dieselbe Klasse haben. Das Letzte, was wir uns auf ähnliche Weise anschauen werden, arbeitet. All dies verwendet einen CSS-Selektor, um entweder das allererste Element auszuwählen , auf das stoßen wird , oder eine Sammlung aller Übereinstimmungen. Beginnen wir mit unserem ersten Match, das QuerySelector ist. Auch dies ist auch direkt in den Dokumenten verfügbar. Was wir tun könnten, genau wie CSS, könnten wir den Klassennamen mit dem Punkt verwenden. Dadurch werden die gerade ausgewählten p-Elemente zurückgegeben. Wir könnten uns auch eine ID oder auch den Tag-Namen genau so schnappen . Denken Sie daran, dass QuerySelector das allererste Vorkommen oder die allererste Übereinstimmung auswählt . Aktualisieren Sie und es gibt unser allererstes Element gerade da. Aber wenn wir alle diese verfügbaren Übereinstimmungen abrufen wollten, müssen wir Änderungen sein, um querySelectorAll zu sein. Speichern und aktualisieren. Wir bekommen jetzt eine Knotenliste zurück, die jetzt zwei p-Elemente enthält. Anders als zuvor, wo wir zur HTML Collection zurückkehren mussten , erhalten wir dieses Mal eine Knotenliste zurück und es gibt einige Unterschiede zwischen einer Knotenliste und einer HTML-Collection. Ich schaue mir diese in einem späteren Video an. Denken Sie auch daran, dass das JavaScript hier allein nichts über unser HTML-Modell weiß, wenn Sie unser JavaScript hier schreiben weiß, wenn Sie unser JavaScript . Es greift auf das Dokument und dann auf alle Elemente zu, die wir über die DOM-Schnittstelle benötigen. Als Zusammenfassung können wir ein Element auf viele Arten auswählen, z. B. dieses p-Element, z. B. dieses p-Element, das wir über die Id zugreifen können, den Tag-Namen, der der Name des Elements von p ist, oder sogar den Klassennamen, der Text ist grün und die letzten beiden werden in einem Element auf die gleiche Weise ausgewählt, wie wir es innerhalb eines Stylesheets erwarten würden . Der Unterschied besteht darin, ob wir das erste Match mit QuerySelector oder allen Übereinstimmungen mit QuerySelectorAll abrufen möchten. Jetzt wissen wir, wie man ein beliebiges HTML-Element auswählt , das Sie möchten. Wir werden jetzt mit dem nächsten Video fortfahren , in dem wir herausfinden, wie Sie einige Änderungen an vorhandenen Elementen vornehmen können. 37. Werte und Attribute ändern: Wir wissen, wie man ein Element auswählt. Wie ändern wir sie tatsächlich? Nun, das werden wir uns in diesem Video einen Blick darauf werfen . Wir zeigen Ihnen, wie wir die Werte von Elementen ändern können und wie wir Attribute mit JavaScript hinzufügen und entfernen können . Für diese Lektion ändert dies Werte und Attribute, also öffnen Sie diese und auch innerhalb des Browsers. Zu Beginn haben wir diese Überschrift oben, den Titel auf den Links und auch das Bild direkt darunter. Was wir dafür tun werden, ist zunächst zu schauen, wie wir den Textinhalt ändern können, und das haben wir uns bereits früh im Kurs angeschaut, also sollten sie keine Überraschungen aufwerfen. Was wir tun werden, ist, den Titel von fleischigen Burgern zu ändern , um keine Fleischburger zu sein, und wir könnten das unten tun. Zuallererst wird das Wort, das Sie ändern oder ersetzen möchten , fleischig sein. Deshalb schneiden wir dies aus und platzieren es dann in ein Span-Element. Wir könnten eine ID oder irgendeine Möglichkeit hinzufügen, Wir könnten eine ID oder irgendeine Möglichkeit hinzufügen diese Elemente zu greifen, die Sie möchten. In diesem Beispiel gehe ich für die Klasse namens Change title, und dann können wir den Textinhalt innerhalb der Spanne ändern . Um dies zu tun, müssen wir JavaScript verwenden. Erstellen Sie unten einen Skriptbereich, und wir können nur diesen Abschnitt auswählen diesen innerhalb einer Konstante namens el installieren. Dies ist normalerweise für Elemente, und dann müssen wir das Element mithilfe des QuerySelectors nach dem Klassennamen greifen . Da es sich um eine einfache Klasse handelt, verwenden wir den Punkt und der Klassenname wurde geändert Titel. Wie wir wissen, ist dies unsere Art, dieses Element zu ergreifen. Um Änderungen an diesen Elementen vorzunehmen, wie bei den meisten Dingen in JavaScript, beginnt alles mit einem übergeordneten Objekt von dem wir bestimmte Dinge erben werden. Wenn wir eine console.log machen, direkt darunter und protokollieren Sie den Wert unserer Elemente. Speichern wir das und öffnen wir das in der Konsole. Aktualisieren, jetzt können wir sehen, dass wir Zugriff auf die Spanne haben , die Sie gerade ausgewählt haben. Aber obwohl wir wissen, dass dies ein Span-Element ist, wir sehen, dass dies tatsächlich ein Objekt ist, wenn wir den Typ machen und dies dann noch einmal aktualisiert können wir sehen, dass dies tatsächlich ein Objekt ist, wenn wir den Typ machen und dies dann noch einmal aktualisiert haben. Es gibt ein Objekt zurück, das ein Elementobjekt ist, und wie jedes andere Objekt, das wir zuvor nachgeschlagen haben, bedeutet dies, dass wir auch auf bestimmte Methoden und Eigenschaften zugreifen können , die für dieses Objekt verfügbar sind. Es gibt viele Möglichkeiten zur Auswahl, aber dieses Video wird einige gängige aufdecken. Zunächst können wir den Textinhalt eines Elements mithilfe einer Methode namens InnerText abrufen. Wenn wir eine console.log für den Wert unserer Elements.InnerText machen. Stellen Sie sicher, dass dies CamelCase mit der Hauptstadt T ist . Jetzt in die Konsole, das ist der Wert von fleischig. Dies ist der InnerText-Inhalt zwischen den Span-Tags, und es ist dieser Text, den wir hier sehen. InnerText schnappt sich nicht nur den aktuellen x-Inhalt, sondern wir können ihn auch ersetzen, und der Weg dazu besteht darin mit el auf unsere Elemente zuzugreifen. Stellen Sie den inneren Text ein, und wir können dies als neuen Wert wie kein Fleisch zuweisen und auf der Konsole geschlossen werden und die Seite neu laden. Unsere Änderungen werden jetzt wirksam. Aber was ist, wenn wir diesem Text auch etwas Markup hinzufügen wollten ? Wenn wir beispielsweise die Markierungselemente um diesen Text herum hinzufügen wollten , könnten wir das Öffnungs- und das schließende Tag hinzufügen. Wenn wir dies jetzt speichern und aktualisieren, ist es wahrscheinlich keine Überraschung, dass wir diese Ausgaben als String sehen. Anstatt dies als String zu verwenden, können wir diese richtig formatieren können wir diese richtig formatieren, anstatt InnertText einzufügen, wir können dies ändern, um innerHTML zu sein und jetzt werden die markierungselemente wirksam anstatt dies als String auszugeben. Eine Sache, auf die Sie achten sollten, wenn HTML wie dieses einfügen, besteht immer eine geringe Chance, dass ein Benutzer gefährlichen Code auf Ihre Website eingeben kann . Es ist wirklich wichtig, das InnerHTML nicht für Inhalte festzulegen , die der Benutzer bereitstellen kann, z. B. für ein Formular oder eine Texteingabe. Hallo HTML hat einige Abwehrkräfte dagegen. Um auf der sicheren Seite zu sein, empfiehlt es sich, inneres HTML zu vermeiden, wenn Sie einen einfachen Text wie zuvor einfügen nur einen einfachen Text wie zuvor einfügen. Wir werden es wieder in einem Text zurücksetzen und zusammen mit dem eigentlichen TextContent können wir auch Attribute wie die ID wie die Klasse, die href und auch die Quelle erhalten wie die Klasse, . Wir könnten auch neue setzen. Um zu sehen, dass dies in die Konsole springt, können wir unsere Elemente auswählen , was Kleinbuchstaben ist. Wir wissen, dass wir für diese Elemente die Klasse des Änderungstitels haben , und wenn wir dies mit JavaScript auswählen wollten, können wir GetAttributes verwenden. Innerhalb der Klammern. Wir können eine Zeichenfolge mit dem Namen der Attribute übergeben , die Sie auswählen möchten. Wenn wir uns für die Klasse entscheiden, können wir sehen, dass dies direkt unten zurückgegeben wird, und wenn wir nach einem Fan suchen, wie der ID, haben wir derzeit keine ID für dieses Element. Dies würde daher den Wert von null zurückgeben. Wir könnten dies auch in unserem Code-Editor verwenden, und wir könnten die Werte innerhalb von Variablen speichern. Wir könnten auch eine neue ID festlegen, wenn wir wollten. Beschneiden Sie die Elemente und dann können wir die ID für diese Eigenschaft direkt festlegen die ID für diese Eigenschaft und dies als eine neue Zeichenfolge wie new festlegen, sagen Sie dies, und öffnen Sie die Konsole. Aktualisieren Sie, und wenn wir nun auf die Registerkarte Elemente gehen, in den Hauptbereich, die Kopfzeile, öffnen den Site-Titel und wir können neben einer Klasse sehen, wir haben auch diese neue ID. Wenn wir bereits eine ID für diese bestimmten Elemente hätten , würde dies den ursprünglichen Wert außer Kraft setzen. Wir haben auch verschiedene Methoden zur Verfügung , die auch mit Attributen arbeiten. Wir haben getAttributes, wir haben setAttributes und auch removeAttribute. Werfen wir einen Blick auf die Konsole. Ich gehe zur Konsole, wir können auch die getAttribute-Methode verwenden , die wir uns vorher angesehen haben , und wir können die ID übergeben, um den neuen Wert zu erhalten, den wir gerade hinzugefügt haben. Dies ist der Rückgabewert von new, und wir können dies auch innerhalb von Variablen in unserem Code speichern innerhalb von Variablen in unserem Code diese Werte wie gerade erwähnt abrufen Wir können auch neue Attribute festlegen. Öffnen Sie den Editor, fügen wir eine neue Klasse hinzu, die die Farbe unseres Titels ändert. Wenn wir zum CSS scrollen, sehen wir gerade hier, dass wir bereits eine grüne Klasse haben , die diese Textfarbe genau hier einstellen wird. Wir können die grüne Klasse zu unseren Elementen hinzufügen. Machen wir das direkt unter unserem Ausweis. Wir machen das mit el.setAttributes. Aber wir müssen es zwei separate Werte übergeben. Der erste ist der Name der Attribute. Wir fügen eine Klasse hinzu, durch ein Komma getrennt ist. Der zweite Wert ist der ClassName, der grün ist. Wenn wir dies jetzt speichern und zum Browser gehen, aktualisieren Sie die grüne Klasse, die jetzt angewendet wurde. Auch wenn Sie in die Elemente und dann in unseren Abschnitt gehen , ist dies der Text, der Header und der Titel. Das Span-Element hat jetzt diese Grünklasse. Wenn Sie genau hinschauen, können wir sehen, dass dies die einzige Klasse ist , die jetzt spanne hat. Obwohl wir diese Klasse von Change-Titel früh hinzugefügt haben, passiert dies, weil wir, wenn wir gesetzte Attribute verwenden, nicht nur eine neue Klasse hinzufügen, sondern auch die vorhandene ersetzen. Wenn wir dies als zusätzliche Klasse einbeziehen und nicht ersetzen wollten , gibt es eine andere Möglichkeit, dies zu tun, und wir werden uns dies in nur einem Moment ansehen. wir jedoch zunächst einen Blick darauf, wie wir ein Attribut mit der Methode remove Attribut entfernen können . Alles, was wir hier tun müssen, ist den Attributnamen einzugeben , den wir entfernen möchten. Lass uns den Ausweis holen. Aktualisieren Sie den Browser und diese ID wurde nun aus unserer Spanne entfernt. Arbeit mit solchen dynamischen Attributen ist sehr nützlich, um Dinge wie unser Image zu aktualisieren. Wir könnten dieses Bildelement genau hier auswählen und wenn wir wollten, könnten wir die Bildquelle dynamisch ändern. Zunächst einmal, wenn wir die Bildquelle entfernen und diese dann dynamisch wieder in unser Skript einfügen können . Wählen Sie das Image aus und installieren Sie es innerhalb einer Variablen. Wir verwenden den QuerySelector, übergeben die Bildelemente und dann auf das Bild-Element, wir können die set-Attribut-Methode verwenden. Dies wird die Bildquelle einstellen. Genau wie oben geben wir ihm zwei Werte weiter. Der erste ist der Attributname der Quelle und dann durch ein Komma getrennt, übergeben wir den Wert, der unser Image-Name von burger.jpeg ist . Wir können dies duplizieren und in den alten Text platzieren, der Burger-Bild ist , über den Browser und jetzt ist unser Bild wieder vorhanden, aber dieses Mal haben wir begonnen, JavaScript zu verwenden. Persönlich habe ich solche Dinge in der Vergangenheit verwendet, um Spiele zu erstellen, die dann mit zufälligen Bildern auftauchen und auch Klassen hinzufügen oder entfernen, um auch das Aussehen bestimmter Dinge zu ändern , wie z. Am Ende eines Spiels möchten wir möglicherweise eine neue Klasse hinzufügen um einige Elemente wie einen Punkteabschnitt ein- oder auszublenden . Wir könnten auch den Grüntext für den Sieg festlegen oder roten Text für eine Niederlage verwenden. Gehe zurück zum Problem mehrerer Klassen, die wir zuvor hatten. Zunächst werden wir unserem Titel mehrere Klassen hinzufügen . Wir machen dies innerhalb des Span-Abschnitts, müssen nur den Titel in der Klasse Blau und auch Rot ändern . Dann können wir diese Zeile auch hier kommentieren, damit sie diese drei Klassen nicht außer Kraft setzt. Diese drei Klassen können jetzt auf verschiedene Arten abgerufen werden . Zuerst haben wir etwas namens ClassName. Wenn wir in die Konsole gehen, können wir dies sehen, indem wir auf unsere Elemente zugreifen und dann ClassName auswählen. Es ist Enter, Sie sehen den Rückgabewert von Grün, also muss dieser nur aktualisiert werden. Wir versuchen es noch einmal. Jetzt bekommen wir die drei Klassen „ Change-Titel“ zurück , blau und rot. Wenn Sie sich den Rückgabewert hier genauer ansehen, ist dieser in den Angeboten enthalten. Wir wissen, dass der ClassName eine Zeichenfolge zurückgibt. Neben einer Zeichenfolge wird auch etwas namens ClassList haben. Die ClassList kehrt zurück, wenn wir dies eine Array-ähnliche Sammlung von Werten öffnen . Wir haben die Index Nummer 0, 1 und 2. Wir können diese auch einzeln innerhalb dieser eckigen Klammern auswählen . Wenn wir Blau auswählen wollten, was Nummer 1 ist, können wir Nummer 2 auswählen, die rot und 0 für Change-Titel ist . So können wir unsere ClassList abrufen, aber was dem Problem, das wir zuvor hatten , bestand darin, mehrere Klassen hinzuzufügen. Nun, wir können dies auch tun, indem wir auf die ClassList zugreifen , die uns Zugriff auf eine Add- und auch eine Entfernungsmethode gibt. Um dies direkt unter unseren Kommentaren zu tun, anstatt das Attribut genau so zu setzen , das nur den vorhandenen Wert außer Kraft können wir stattdessen auf unsere Elemente zugreifen, eine ClassList, die gibt uns dann Zugriff auf eine Methode namens add. Wir können mehrere Klassen hinzufügen, die durch ein Komma getrennt sind. Speichern Sie dies und aktualisieren Sie es. Jetzt wurde die grüne Klasse jetzt angewendet. Wenn wir unsere ClassList erneut überprüfen, können wir sehen, dass der Wert von Grün und Cyan am Ende dieser Klassen hinzugefügt wurde. Die remove-Methode funktioniert genauso wie. Wir greifen auf die ClassList zu oder entfernen sie. Dieses Mal können wir als String jede unserer Klassen übergeben , die wir entfernen möchten. Lass uns blau gehen, speichern und aktualisieren. Wenn wir nun erneut auf unser Element oder ClassList zugreifen, wurde der Wert von blue nun aus diesem Element entfernt. Wenn wir noch weiter gehen wollten und anstatt einzelne Werte wie diese hinzuzufügen, könnten wir auch eine Variable festlegen, die unsere ClassNames enthält. Lassen Sie uns den Wert von Grün und Cyan entfernen und dann direkt darüber eine Konstante namens Klassen erstellen und diese als Array einrichten. Zuallererst grün. Wir behalten dies genauso wie zuvor, indem wir Cyan hinzufügen, und dann können wir den Spread-Operator verwenden, der die drei Punkte ist , um alle Werte aus dem Class-Array herauszuziehen und diese direkt in die Add-Methode zu platzieren. Speichern, aktualisieren, greifen Sie auf unsere ClassList zu. Das funktioniert auch immer noch wie zuvor. In der Zusammenfassung können wir beliebige Elemente auswählen und den inneren Textwert mit der inneren Textmethode festlegen . Wir haben auch inneres HTML, um den HTML-Inhalt innerhalb eines Elements hinzuzufügen . Wir haben auch die Eigenschaft id, die zum Aktualisieren oder Festlegen einer neuen ID verwendet werden kann . Außerdem haben wir die volle Kontrolle über unsere Attribute. Wir können jedes vorhandene Attribut wie eine Klasse oder die Quelle erhalten. Wir können neue festlegen und auch alle Attribute entfernen. Zuletzt haben wir uns Klassen und die verschiedenen Möglichkeiten angesehen , wie wir sie hinzufügen, aktualisieren und entfernen können . Wir haben den ClassName, mit dem wir die Werte unserer Klassen als String zurückrufen können . Wir können dies auch verwenden, um eine neue Klasse hinzuzufügen. Wir haben auch ClassList, eine Array-ähnliche Sammlung aller unserer ClassNames. Dies macht auch einige Methoden verfügbar, mit denen wir einige Klassen hinzufügen und entfernen können . Schließlich haben wir uns auch eine andere Art angesehen Klassen einzubeziehen, die ein Array erstellen sollten. Dann können wir diese Klassen verwenden indem wir den Spread-Operator verwenden. Als Nächstes werden wir uns auch ansehen, wie wir CSS-Eigenschaften mit JavaScript direkt ändern können . 38. Ändern der CSS-Layoutdaten eines Elements: Wir haben behandelt, wie Sie einen Elementinhalt wie den inneren Text ändern und wie Attribute hinzugefügt, geändert und entfernt werden. Etwas anderes, was wir auch tun können, ist, den Stil eines dieser Elemente zu ändern . Im Starterprojekt, das Changing An Elements CSS lautet , öffnen wir dies im Browser und springen dann in die Konsole. Ein Starter ist das gleiche einfache Beispiel , das wir uns im letzten Video angesehen haben. Wir haben die Überschrift und auch das Bild mit sicherlich Textinhalten der Kopfzeile, der grünen Klasse, und sicherlich auch Bild dynamisch. Um mit den Stilen zu arbeiten, können wir auch auf unsere Elemente zugreifen , die diese el-Variable sind. In Console können wir auf el.style zugreifen. Sie verwenden diese Stileigenschaft, um Werte zu lesen , da dies etwas verwirrend wird. Wir wissen, dass wir diese grüne Farbe von hier aus angewendet haben , indem wir die Klasse hinzufügen, und diese grüne Klasse ist sicherlich Textfarbe. Wir können dies wieder erwarten, wenn wir die color-Eigenschaft auswählen, auf „Enter“ klicken und stattdessen eine leere Zeichenfolge zurückerhalten. Der Grund dafür ist, dass wenn wir die Color-Eigenschaft genau so auswählen, nur alle Stile zurückgegeben werden, die wir inline in unserem HTML hinzufügen. Wenn ich „inline“ drücke, meine ich, wenn wir zu unseren Elementen gehen, setze ich die Inline-Styles genau so ein. Zum Beispiel können wir die Farbe auf Rot einstellen. Wenn wir dies jetzt aktualisieren, tun wir dasselbe, indem wir die Farbe einstellen. Dieser gibt unseren roten Wert zurück. Dies liest nur Inline-Stile und ignoriert alle anderen Quellen wie einen der Stile, die im Head-Bereich platziert sind oder alle, die auch in einem externen Stylesheet platziert sind. Wenn Sie den tatsächlichen Wert von überall aus wissen wollten, steht für das globale Fensterobjekt eine Methode namens GetComputedStyle zur Verfügung. Zuerst wählen wir das Window-Objekt und dann getComputedStyle aus. Wir möchten den Stil eines bestimmten Elements kennen, damit wir diese Variable übergeben können, wenn wir auf „Enter“ klicken. Dies gibt uns ein zurückgegebenes Objekt mit allen verfügbaren Stilen zurück, die für diese Elemente gelten, oder wenn wir wollten, könnten wir einfach einen einzigen Wert wie die Farbe zurückbekommen . Dies ist nicht etwas, das ich persönlich oft benutze, aber es ist bei Bedarf verfügbar. Zurück zu unserer Stileigenschaft, die wir vorher verwendet haben und die gerade hier ist, können wir diese auch verwenden, um auch Stile festzulegen. Als Beispiel konvertieren wir einige der Stile, die Sie bereits im Head-Bereich haben, unten im Skript. Wählen Sie unter setAttribute das Element el.style -Eigenschaft aus, und wir können festlegen, dass die Farbe einem neuen Wert entspricht. Dies wird eine Zeichenfolge sein, und ich werde einen RGB-Wert von 40, 141, 40 platzieren . Schließ das ab. Wir haben keine Konflikte, wir werden auch diese grüne Klasse kommentieren, aktualisieren. Dies ändert sich zu einer grünen Farbe und nur um dies zu bestätigen, können wir hier sehen, dass die grüne Klasse nicht angewendet wird. Wir können dies auch kommentieren, nur um sicherzustellen, dass dies von der Style-Eigenschaft stammt , die wir gerade hinzugefügt haben. Lasst uns ein bisschen weiter gehen. Wenn wir ganz oben zu unseren Styles zurückkehren, haben wir diesen Header-Abschnitt mit vier verschiedenen CSS-Eigenschaften. Wir legen den Anzeigetyp und auch einige Flex-Eigenschaften neben dem Muster fest. Wir können diesen Abschnitt auch kommentieren und durch JavaScript ersetzen. Um dies zu tun, müssen wir zuerst einen Verweis auf unsere Header-Elemente speichern , genau wie bei diesem Abschnitt hier. Fügen wir dies unten und speichern dies in einer Konstante namens Header, und wir können dies auf jede gewünschte Weise auswählen. Ich verwende den QuerySelector als Elementnamen des Headers, und dann ist die erste Eigenschaft, die wir auswählen müssen , der Anzeigetyp von Flex. Wir ersetzen im Grunde genommen alle diese vier Werte, indem wir die Sterneigenschaft unten verwenden. Greifen Sie auf die Kopfzeile zu, den Stil. Stellen Sie den Anzeigetyp so ein, dass er einer Flexfolge entspricht . Aktualisieren Sie den Browser. Wir können sehen, dass die Flex-Box wirksam wurde aber wir haben immer noch einige Ausrichtungsprobleme, durch Hinzufügen der restlichen CSS-Eigenschaften behoben werden können . Der zweite ist header.style, und dieses Mal müssen wir justify-content festlegen. Wenn wir uns ansehen, wie wir das in unserem CSS gemacht haben, verwenden wir Kleinbuchstaben, und dies wurde durch ein Komma getrennt. Obwohl einer der großen Gotchas mit JavaScript beim Einstellen des CSS ist, müssen wir dies auch in CamelCase konvertieren. Wir können keine Rechtfertigungsinhalte verwenden. Wir sehen sofort, dass der Texteditor ein Problem hervorgehoben hat, und wir müssen es in CamelCase umwandeln. Dies bedeutet, dass der Inhalt mit einem C beginnt, und dann können wir dies auf unsere Zeichenfolge setzen , die Leerzeichen dazwischen ist. Nächster Pfad; Align-Items, die genau wie justify-content auch konvertiert werden müssen, um CamelCase zu sein. Dies sollte auch im Mittelpunkt stehen, also richten Sie dies ein und der Wert dafür ist Mittelpunkt. Endlich hast du die Polsterung. Der Füllwert wenn wir einen Blick darauf werfen, war dies Null und einige Pixel. Übergeben Sie dies als String und schauen Sie sich dies im Browser an. Aktualisieren. Wir können unsere Polsterung an der Außenseite des Textes sehen, und auch die Ausrichtung wurde mit diesen Flex-Eigenschaften korrigiert. Diese Art, das CSS einzustellen, hat viele gute Anwendungsfälle. Wie im letzten Video erwähnt, kann es nützlich sein, Inhalte zum Anzeigen und Ausblenden von Inhalten zur Änderung des Layouts sowie zum Ändern des Themas unserer Website zu verwenden. Zum Beispiel haben wir möglicherweise einen Boden, der einige CSS-Eigenschaften hinzufügt, einen Wechsel zwischen Hell- und Dunkelmodus. Wir könnten CSS-Animationen hinzufügen. Wenn der Benutzer auf einige von ihnen klickt, könnten wir verschiedene Farbschemata und so viele weitere Möglichkeiten umschalten . Es ist auch wissenswert, dass das Hinzufügen von Stilen wie diesem mit JavaScript die gleiche Priorität in der Kaskade hat wie ein Inline-Stil. Diese Technik überschreibt alle vorhandenen externen Stylesheets und auch alle Stile, die Sie im Head-Bereich haben. Um dies zu sehen, können wir den grünen Bereich auskommentieren. Wir können dies dann mit unserem JavaScript erneut anwenden , indem wir den setAttribut-Kommentar entfernen. Auch wenn wir die Farbe in Rot ändern; also werde ich in der RGB-Farbe den roten Wert platzieren. Was wir jetzt haben werden, ist eine Grünklasse, die mit setAttributes angewendet wird , die tatsächlich rot ist, und dann legen wir diese grüne Farbe direkt darunter fest. Speichern und aktualisieren. Wir sehen immer noch den grünen Text oben, und dies geschieht, weil dies mit einer JavaScript-Stileigenschaft erstellt wurde , die beim Hinzufügen einer Klasse ein hohes Gewicht hat. Wir können dies auch bestätigen, wenn wir die Sterneigenschaft so verschieben , dass sie nur mit dieser Klasseneinstellung verwendet wird. Stellen Sie sicher, dass es nichts mit der Bestellung zu tun hat. Speichern und aktualisieren, und wir können immer noch sehen, dass diese grüne Farbe angewendet wurde. Wenn Sie sich fragen, wie Sie mehrere CSS-Eigenschaften gleichzeitig hinzufügen können, können wir dies auch mit einem Objekt festlegen. Wir werden uns dies im Abschnitt „Objekt“ genauer ansehen, aber im Moment können wir den CSS-Stil in der Verwendung von JavaScript abrufen und auch festlegen. Wir legen unsere Stileigenschaften genau wie in einem normalen Stylesheet fest, aber denken Sie daran, wenn eine Eigenschaft mehrere Wörter wie Hintergrundfarbe und Rechtfertigungsinhalt müssen wir dies auch in CamelCase konvertieren. 39. Erstellen neuer Elemente: Zusammen mit allen Änderungen, die wir an bestehenden Elementen vorgenommen haben , können wir auch unsere eigenen erstellen. Tatsächlich können wir sogar Abschnitte oder eine vollständige Webseite mit HTML-Inhalten innerhalb von JavaScript erstellen . Wie Sie sich vorstellen können, öffnet dies viele Türen. Ein Mittel für einen Inhalt könnte dynamischer sein und sich auch ändern, nachdem die Seite geladen wurde. Dies eröffnet so viele Möglichkeiten und einige Beispiele könnten darin bestehen, den Inhalt dem Benutzer nur anzuzeigen , wenn er angemeldet ist. Wir könnten alle Benutzer frühere Bestellungen abrufen und basierend auf diesen Informationen eine HTML-Liste erstellen. Der Benutzer könnte auch ein neues Aufgabenelement hinzufügen und die Liste ist endlos. Es beschränkt sich nur auf unsere Vorstellungskraft oder unseren Gebrauch. Gehen Sie zurück zum Editor und gehen in die Datei zum Erstellen neuer Elemente. Unten haben wir einige Kommentare im Skript, die uns durch dieses Video führen. Öffnen Sie dies im Browser und bevor wir ein neues Element erstellen, möchte ich Ihnen etwas zeigen, das als Document Write bezeichnet wird. Wie es sich anhört, schreibt dies direkt in das Dokument , das unsere Webseite im Skript ist, greift auf das Dokument und eine Methode namens write zu. Da es sich um eine Methode handelt, öffnen wir die Klammern wie diese und können dann eine Zeichenfolge übergeben, die Sie im Dokument anzeigen möchten. Ich gebe das ein Speichern und lade den Browser neu. Ganz unten können wir sehen dieser Text unten platziert wurde, sowie eine einfache Zeichenfolge von Texten wie diese einfügen. Wir können auch etwas HTML injizieren. Wir können dies innerhalb einiger Element-Tags wie H1, speichern und über den Browser umrunden , und die größere Überschrift der Ebene eins ist jetzt wirksam geworden. Diese Methode ist nützlicher, Dinge wie Testen, anstatt tatsächlich Inhalte oder Seiten hinzuzufügen. Einer der Gründe dafür ist, dass die Seite, wenn die Seite geladen wurde, den gesamten vorhandenen Inhalt außer Kraft setzt. Wir können das besser sehen, wenn wir das Schreiben des Dokuments verzögern , um auf der Seite zu warten , bis das Laden zuerst abgeschlossen ist. Um dies zu tun, steht eine Methode namens setTimeout zur Verfügung. Machen Sie sich keine Sorgen, wenn Sie dies noch nicht gesehen haben, es ist eine Möglichkeit, eine Funktion nach einer gewissen Zeitverzögerung auszuführen. Wir werden dies im Kurs 2 weiter besprechen. Was wir tun werden, ist Schreiben des Dokuments auszukommentieren und dann eine setTimeout-Funktion zu erstellen, die im Inneren eine Funktion übernehmen wird. Wir können die Funktion schreiben, in der in jedem Stil ausgeführt wird , den wir möchten. Wir können die traditionelle Funktionssyntax verwenden oder eine Pfeilfunktion übergeben. Das waren die Klammern einfach so. Toller Pfeil, und da wir nur eine einzelne Zeile verwenden, müssen wir keine geschweiften Klammern oder eine Return-Anweisung hinzufügen . Stattdessen können wir wie oben in ein Dokument schreiben. Dann können wir drinnen eine Zeichenfolge oder einen HTML-Inhalt übergeben . Wo sind meine Inhalte hin? Dann kurz nach dem Dokument schreiben, dann Komma, und dann ist dies das zweite Argument für unsere setTimeout-Funktion. Die erste ist die eigentliche Funktion, die wir ausführen und dann durch dieses Komma trennen möchten, wo wir die Zeitverzögerung in Millisekunden haben werden. Wenn wir dies auf 3.000 platzieren, wird diese Funktion nach drei Sekunden ausgeführt. Probieren wir das aus, wenn wir jetzt speichern und aktualisieren. Wir sehen derzeit kein Dokument ganz unten, aber nach drei Sekunden wird unsere Funktion den gesamten vorhandenen Inhalt ausführen und ersetzen. Die Tatsache, dass dies passieren kann, bedeutet, dass es nicht oft eine gute Möglichkeit ist, Inhalte zu unserer Webseite hinzuzufügen. Dafür haben wir noch ein paar dedizierte Methoden. Wenn wir Elemente erstellen, geschieht dies oft in mehreren Teilen. Wenn wir beispielsweise ein Textelement erstellen würden , müssen wir dies in mehreren Teilen tun. Zuerst erstellen wir ein P-Element und speichern dieses in einer Variablen und erstellen dann den Textinhaltsknoten. Dann müssen wir diese beiden zusammenführen. In dieser HTML-Startdatei haben wir einen neuen HTML-Abschnitt oben. Wir haben den Abschnitts-Wrapper. Im Inneren haben wir eine Überschrift der dritten Ebene. Wir haben dieses div mit der Inhaltsklasse, und dann innen verschachtelt haben wir zwei weitere verschachtelte Divs. Das erste enthält ein Bild und das zweite enthält ein P-Element und auch einen Kauf-Button. Um viel Übung beim Erstellen unserer Elemente zu bekommen, werden wir diesen vollständigen Abschnitt neu erstellen, diesmal jedoch mit JavaScript. Als Leitfaden verwenden wir die Kommentare unten und können diese vorherigen Dokumentschreibbeispiele entfernen. Nach diesen Kommentaren erstellen wir zunächst die Abschnittsüberschrift, der es sich um H3 handelt. Jetzt werden wir den Rest des Inhalts weitermachen . Wir können ein neues Element erstellen indem wir auf die Dokumente zugreifen. Verwenden Sie dann eine Methode namens create elements. Denn seine Elemente sind ziemlich einfach, alles, was wir tun müssen, ist, eine Zeichenfolge mit dem Element-Tag-Namen zu übergeben . Zum Beispiel müssen wir eine Überschrift der Ebene 3 erstellen, also tun wir dies und dann können wir diese innerhalb einer Variablen speichern. Meine wird als Abschnittsüberschrift bezeichnet und diese auf unser neues Element setzen. Da wir jetzt eine variable Referenz haben, können wir dies sehen, wenn wir zur Konsole gehen. Greifen Sie dann mit dem Variablennamen darauf zu. Übergeben dieser Abschnittsüberschrift, die eine leere Überschrift der Ebene 3 zurückgibt. Wie bereits erwähnt, besteht dies beim Erstellen neuer Elemente oft aus zwei Teilen. Wir haben dieses Element, das leer ist, und dann müssen wir auch den Textinhalt darin erstellen. Denken Sie daran, als wir uns das DOM anschauten, sagten, dass alle Objekte in diesem Baum als Knoten fungieren. Dieses Beispiel zeigt einen Elementknoten in Form unseres H1, dann einen Textknoten mit dem Text von hey, wir haben den ersten Teil, der der Elementknoten ist , der unser H3 ist. Jetzt müssen wir etwas Textinhalt einfügen. Um dies zu tun, steht eine Methode namens createTextNode zur Verfügung. Diese Methode ist auch für das Dokumentobjekt verfügbar. Wir greifen auf den Dokumentpunkt CreateTextNode zu. Im Inneren geben wir eine Textzeichenfolge ein , die Sie einfügen möchten. Da wir diesen Abschnitt replizieren, können wir den Inhalt von innen kopieren. Leg das rein. Speichern Sie dies in einer Variablen, sagen wir den Überschriftentext. Aktualisieren Sie die Konsole und wir sollten dies auch sehen , wenn wir den Überschrifttentext eingeben. Wir haben unsere Textzeichenfolge gerade hier. Dies bedeutet jetzt, dass wir zwei separate Knoten haben. Wir haben unseren Elementknoten und auch unseren Textknoten. Aber wir brauchen eine Möglichkeit, diese miteinander zu verschmelzen. Der Weg dazu besteht darin, zuerst auf den übergeordneten Knoten zuzugreifen, nämlich die Abschnittsüberschrift, diese Variable zu greifen, und da dies ein Element ist, können wir auf eine Methode namens AppendChild zugreifen. AppendChild nimmt dann das Kind auf, das zusammengeführt werden möchte, was unser Überschriftentext ist. Platzieren Sie dies in, speichern Sie und aktualisieren Sie es jetzt wieder in die Konsole. Testen wir die Abschnittsüberschrift. Anstatt nur eine leere Überschrift der Stufe 3 zurückzugeben , enthält dies jetzt auch unsere darin verschachtelte Zeichenfolge. Dies vervollständigt jetzt unsere Überschrift und der Rest wird sich sehr ähnlich sein. Wir gehen zum Bild und verwenden genau wie zuvor den Dokumentpunkt CreateElements. Diesmal lautet der Typname IMG. Bewahren Sie dies in einer Konstante namens ImageElement auf. Wie zu erwarten, unterscheidet sich ein Bild geringfügig, da wir keinen der Textknoten darin einfügen müssen. Stattdessen müssen wir die Attribute festlegen. Wir müssen sowohl die Quelle als auch den Alt-Text festlegen. Greifen Sie direkt darunter auf unsere Bildelemente zu. Wir können eine Methode namens setAttributes aufrufen, die zwei Dinge aufnimmt. Die erste ist eine Zeichenfolge des Attributnamens, der Quelle ist, und dann der Inhalt, den sie den Pfad von burger.jpg eingeben werden . Dupliziere dies und der zweite ist der alte Text mit der Zeichenfolge, sagen wir Burgerbild. Wir können dies auch im Browser testen indem wir auf unsere Bildelemente zugreifen. Aktualisieren, greifen Sie auf die Bildelemente zu, und das sieht genau aus, was wir für unsere Bildelemente benötigen . Lass uns weitermachen. Der Infotext, das ist ein P-Element. Dieser Abschnitt hier und während wir hier oben sind, kopieren wir den Lorem ipsum-Text. Danach erstellen wir den Button und arbeiten dann draußen an unseren Containern. Wir sollten wissen, was wir hier tun müssen. Wir greifen auf die Dokumente zu, erstellen Element. Das Element ist das P-Element, und dann können wir es innerhalb einer Konstante namens InfoSectionElement speichern . Das Info-Abschnitt-Element wird auch einen Textknoten aufnehmen , genau wie die obige Überschrift. Beginnen Sie dies innerhalb einer Konstante und halten Sie dies konsistent. Wir sagen, InfoSectionText entspricht Documents.createTextNode. Ich sehe jetzt eine Zeichenfolge, von der wir gerade kopiert haben, nämlich der Lorem ipsum-Text. Wir können sofort erkennen, dass wir einen solchen Fehler haben , weil wir sicherstellen müssen, dass all dies auf derselben Linie ist. Wir können nur mehrzeiligen Text einfügen, wenn er diese einzelnen Zitate durch die Backticks ersetzen sollte. Nach wie vor haben wir unsere beiden unabhängigen Elemente, und dann müssen wir AppendChild für das Elternteil aufrufen , um diese beiden zusammen zusammenzuführen. Das InfoSectionElements.appendChild. Ich sagte, ich werde eine SMS schreiben, was InfoSectionText ist . Probieren wir das mal aus. Wir kopieren unseren übergeordneten Container, fügen ihn ein und aktualisieren ihn auf dem TextContent ist jetzt darin verschachtelt. Als Nächstes haben wir diesen Button. Die Schaltfläche folgt einem sehr ähnlichen Muster wie diese Informationen, also kopieren wir diesen ganzen Abschnitt, fügen ihn ein, aber natürlich müssen wir das p-Element so ändern, dass es eine Schaltfläche ist. Der Text wird sein, online kaufen. Wir müssen das untergeordnete Element immer noch an die Schaltfläche anhängen , aber wir müssen diese Variablennamen ändern. Wir sagen das buttonElement, dann den ButtonText. Unten wählen wir unsere Schaltflächenelemente aus, nämlich die Eltern, fügen dann den ButtonText an. Probieren wir das mal aus. Aktualisieren, aktualisieren Sie dies und fügen Sie es ein, und es gibt eine Schaltfläche. Das ist in Ordnung, und wenn wir zurück gehen, jetzt bis zu unserem HTML-Bereich haben wir jetzt bis zu unserem HTML-Bereich alle Textelemente erstellt. Wir haben das H3, wir haben unsere Bildelemente, wir haben unser P und auch den Button. Das letzte, was wir tun müssen, ist unsere Wrapper herzustellen. Wir haben hier ein Div, wir haben einen hier, einen Wrapper für beide Abschnitte und dann schließlich den äußeren Abschnitt Wrapper. Wie bei allen anderen Elementen werden wir CreateElements verwenden. Ich kopiere diese Zeile eins lege diese unter die Wrapper. Dieser ist der Abschnitt-Wrapper, der das Hauptelement für all diesen Inhalt ist. Dies war ein Abschnittelement. Dann dupliziere ich das noch dreimal. Der Rest dieser Elemente wird alle div. Aber sie brauchen einige eindeutige Namen, also wird der erste Abschnitt der ContentWrapper sein. Dies ist der Inhalt gerade hier. Unsere letzten beiden sind diejenige, die das Bild umgibt , und dann der umgebende Text und die Schaltfläche. Also rufen wir Nummer 3 an, den ImageDivWrapper. Dann umgab der letzte den Text und die Schaltfläche, also nennen wir dies den TextDivWrapper , der uns dann zu diesem Abschnitt bringt , der alles zusammenfügt. Was wir jetzt tun müssen, ist, im Grunde alle Elemente zusammenzuführen , die Sie oben in allen Wrapper erstellt haben . Dies geschieht auch darin, die AppendChild-Methode zu verwenden. Wir fangen von innen an und arbeiten uns den Weg nach draußen. Zunächst arbeiten wir mit dem Infobereich und fügen die p-Elemente und auch den Button ein. Unten werden wir unseren TextDivWrapper all AppendChild auswählen . Dann müssen wir das zweimal machen. Die erste, die wir in den Info-Abschnitt-Elementen übergeben müssen . Info Abschnitt Element ist der Text , den wir gerade hier erstellt haben. Dann müssen wir das auch ein zweites Mal machen, aber dieses wird für unseren Button sein. Die Schaltfläche ist ein Variablenname von buttonElement. Wir können dies duplizieren, unsere Button-Elemente einfügen. Bevor wir weiter gehen, können wir dies in der Konsole sehen , wenn wir unseren TextDivWrapper aufwachsen . Füge das ein. Wie erwartet enthält dies ein div-Element, und dann öffne es, wir haben unser p-Element und auch den Button. Weiter auf den ImageDivWrapper. Dieses Element ist nur ein Element, das innen verschachtelt ist. Dies ist unser Bildelement. Ziemlich einfach. Machen Sie etwas Platz. Rufen Sie die AppendChild-Methode auf und dann können wir unsere Bildelemente einfügen. Jetzt zurück zu unserem HTML. Wir haben diesen Abschnitt hier erstellt und auch diesen hier. Wir müssen noch eine Ebene nach oben gehen und auf unseren Content Wrapper zugreifen und dann beide DivWrapper einfügen. Wählen Sie unseren Content-Wrapper aus, gehen Sie zu AppendChild, und dann müssen wir sowohl unseren TextDivWrapper als auch das Bild einfügen. Beginnen wir mit dem Text und dann duplizieren wir dies. Auch hier werden wir innerhalb des Content-Wrapper in unseren ImageDivWrapper platzieren. Bevor wir weiter gehen, holen wir uns unseren ContentWrapper und stellen sicher, dass beide Divs darin verschachtelt sind. Einfügen. Mach das auf. Da sind unsere beiden Divs drin. Der erste ist der Text und der zweite ist das Bildelement. Gut. Wir sind fast da, wenn wir jetzt wieder hochgehen, schauen wir uns an, was wir als nächstes tun müssen. Wir haben die Überschrift Level 1 und auch dieses vollständige Content-div, das in unserem Abschnitt verschachtelt ist. Wir müssen einen Abschnitt abrufen und zwei weitere AppendChild-Methoden durchführen . Dieser Abschnitt war der Abschnitts-Wrapper namens AppendChild, und das erste Kind, das wir einfügen müssen, ist die Abschnittsüberschrift. Die Abschnittsüberschrift erinnerte war unsere Überschrift der Stufe 3, und dann müssen wir dies duplizieren, und das zweite Element ist unser Content-Wrapper. Dies sollte nicht alle unsere Inhalte sein, und das Letzte, was Sie tun müssen, um diesen Abschnitt abzuschließen , ist das Hinzufügen unserer drei Klassen. Wir haben die Content-Klasse, wir haben den Bildbereich und auch den Infobereich. Diese werden alle zu unseren Divs hinzugefügt. Gehen wir also nach unten und direkt unter dem Hinzufügen von Klassen ist der erste der Content Wrapper. Wir können die Klasse mit festgelegten Attributen hinzufügen. Das Set-Attribut nimmt zwei Dinge auf. Der erste ist der Name des Attributs, das Klasse ist, und dann der Klassenname des Inhalts. Dupliziere dies noch zweimal, und das zweite war für unseren ImageDivWrapper, dieses Bild. Werfen wir einen Blick darauf. Der Klassenname für unser Bild war dieser gerade hier. Geh wieder runter. Image_Abschnitt. Der dritte und letzte ist für unseren Text-Div-Wrapper. Dieser TextDivWrapper ist der Infobereich. Schnappen wir uns das und fügen es als unsere Schnur ein. Gut. Lassen Sie uns diesen letzten Test im Browser geben und wir müssen den Abschnitt-Wrapper testen, der der Haupt-Wrapper ist, der den gesamten Inhalt umgibt. Wir laden, füge das hinzu. Öffnen Sie dies und ich werde zu unserem HTML scrollen und sicherstellen, dass dies genau das Gleiche ist. Zu Beginn haben wir den Abschnitt-Wrapper, zwei Elemente enthält, die Überschrift der Ebene 3, die da ist, das div, die Inhaltsklasse und dann ist der gesamte zusätzliche Inhalt darin verschachtelt. Mach das auf. Dies enthält zwei Divs. Der erste hat die Klasse des Infoabschnitts und der zweite ist der Bildbereich. Wir haben den Infobereich und dann das Bild. Wir müssen also nur sicherstellen, dass unsere umgekehrt sind. Wir müssen die Position dieser beiden Elemente austauschen , um sicherzustellen, dass unser Bild direkt über unserem Text liegt. Sparen Sie, und wir versuchen es noch einmal. Öffne den Abschnitt-Wrapper im contentdiv. Gut. Wir sind jetzt wieder auf dem richtigen Weg. Wir haben den Bildbereich oben. Darin befinden sich die Bildelemente. Der Infobereich unten enthält unsere p-Elemente und auch unseren Button. Gut. Dies ist jetzt alles vorhanden, und das Letzte, was Sie im nächsten Video tun müssen, ist, sich einige Möglichkeiten anzusehen, wie wir dies unserer Hauptseite hinzufügen können . 40. Elemente zur Seite hinzufügen: Dieses Video geht vom letzten Video aus, das der Seite Elemente hinzufügt. Zuvor haben wir diesen Abschnitt genau hier repliziert, indem wir JavaScript verwendet haben, indem alle Elemente nacheinander erstellt haben. Wir haben diese Elemente dann zu den verschiedenen Containern hinzugefügt, und als wir mit dieser vollständigen Abschnittsreferenz aufgehört haben, war Ihre Referenzliste der Abschnitts-Wrapper. Dies wird innerhalb einer Variablen gespeichert, und wir können dies sehen, wenn wir dies in die Konsole tippen . Mach das auf. Wir haben dies bereits zu der Seite hinzugefügt, die wir sehen, aber dies befindet sich in unserem HTML. Was wir tun werden, damit wir nicht verwirrt werden, ist, diesen Abschnitt zu kommentieren, zu aktualisieren und jetzt fügen wir diesen dynamisch mit JavaScript ein. Lassen Sie uns darüber nachdenken, was wir hier tatsächlich tun wollen, wir haben diesen Body-Abschnitt oben, und der Abschnitt, den Sie gerade erstellt haben, ist ein direktes Kind dieses Körpers, ebenso wie der Header und die Bildelemente. Was wir tun müssen, ist zunächst den Text auszuwählen, ihn auf unser Skript zu rollen, und wir können mit document.body darauf zugreifen. Zwei gängige Methoden, die Sie verwenden können, sind append und vorangestellt. Prepend wird den neuen Inhalt am Anfang hinzufügen und append wird ihn bis zum Ende hinzufügen. Lassen Sie uns zunächst einen Blick auf Prepend werfen. Dies ist eine Methode, also öffnen wir die Klammern, jetzt möchten wir unseren Abschnitts-Wrapper hinzufügen. Sagen wir dies und aktualisieren Sie den Browser, und dies wird am Anfang des Hauptbereichs hinzugefügt . Wir können dies auch ändern, um angehängt zu werden, und dieser neue Abschnitt wird direkt am Ende des Körpers hinzugefügt. Etwas anderes, das wir auch mit append machen können, anstatt ein einzelnes Element wie dieses hinzuzufügen, besteht darin, unserer Seite mehrere Elemente hinzuzufügen, und wir können auch verschiedene Arten von Inhalten hinzufügen. Zum Beispiel können wir eine JavaScript-ähnliche Textzeichenfolge hinzufügen , die als DomString bezeichnet wird. Nehmen wir an, jeder Text hier drin und trennen ihn dann durch ein Komma Wir können mehrere Informationen hinzufügen, z. B. mehrere Textstücke oder mehrere Elemente, also sagen wir auch, wir wollten ein Element hinzufügen lasst uns auf unseren Button gehen, auch unser ImageElement. Wir können so viele davon hinzufügen, wie wir es gerne hätten. Speichern und aktualisieren Sie dies jetzt. Wir können unseren Text sehen, wir können unseren Button, unser Bild und den endgültigen DomString ganz am Ende sehen . Ähnlich wie bei uns haben wir auch eine Methode namens AppendChild. Probieren wir es mal aus. Wenn wir dies jetzt speichern und dann aktualisieren, wird sofort ein Fehler in der Konsole angezeigt. Wir sehen diesen Fehler, da es einige Unterschiede gibt , wie append und AppendChild das Einfügen von Elementen oder Knoten verarbeitet . AppendChild kann nur an einem einzelnen Knoten oder einem einzelnen Textelement verwendet werden . Wenn ich mehr als eine hinzuzufügen habe, ist die append-Methode der richtige Weg. Wie Sie hier sehen, kann AppendChild auch nicht mit DomStrings verwendet werden, daher können wir es nicht verwenden, um Textknoten wie zuvor einzufügen . Auch nur die AppendChild-Methode gibt uns einen Rückgabewert zurück, und dieser Rückgabewert ist ein neu hinzugefügter Knoten. In diesem Sinne zurück in unsere Gegend, in der wir uns vorher befanden. Der Grund, warum wir diesen Bereich haben, ist aus zwei Gründen, weil wir versuchen, einige DomStrings hinzuzufügen, und auch die Anzahl der Elemente, die wir hinzufügen möchten. Wenn wir dies auf ein einzelnes Element reduzieren, gehen wir zum ButtonElement, wir sollten jetzt kein Problem sehen. Die nächste zu bedeckende Methode ist das Einfügen zuvor. Insert vorher gibt uns ein bisschen mehr Flexibilität darin, wo wir unseren neuen Knoten platzieren, füllen und zum Beispiel unseren Header nehmen möchten . Stellen Sie sich dazu vor, wir wollten einen neuen Inhalt platzieren , der ein neues Element zwischen der Überschrift und dem Navigationsgerät ist In dieser Zeile platzieren die Methoden, die wir bisher behandelt haben, nur Elemente auf der Anfang oder am Ende. Da die Insert-vor-Methode klingt, kann sie verwendet werden, um unser neues Element vor diesem Navi einzufügen , entfernen wir dies zuerst und gehen dann zu unserem Skript. Wir müssen zuerst das Elternteil auswählen. In unserem Fall ist das übergeordnete Element der Header, also document.querySelector, legen Sie den Header und installieren Sie diesen innerhalb einer Variablen, und auch da wir dieses Element vor dem Navi einfügen möchten , wir auch brauche auch einen Verweis darauf, also befindet es sich innerhalb einer Variablen namens nav. Stellen Sie dies auf document.QuerySelector ein, und dieses Mal wählen wir unser Navigationsgerät aus. Jetzt haben wir Zugriff auf zwei Elemente, zunächst ist der Header das übergeordnete Element, und das Navi ist das Element, in das wir kurz zuvor einen neuen Knoten einfügen möchten , und dafür wählen wir das übergeordnete Element aus, das ist der Header, der Methodenname , der vorher eingefügt wird, und dann müssen wir in den Klammern zwei Dinge übergeben. Erstens ist es das Element, das Sie einfügen möchten, und wir werden eines dieser Elemente von oben wiederverwenden . Lassen Sie uns die Button-Elemente anschauen, und wie der Methodenname von insert bereits vermuten lässt, müssen wir dann den Namen des Elements hinzufügen , in das wir diese Schaltfläche zuvor einfügen möchten, und in unserem Fall ist es die Navigation -Element. Probieren wir das aus, aktualisieren Sie den Browser. Jetzt wurde unser Button vor dieser Navigation eingefügt. Dies funktioniert, indem Sie ein übergeordnetes Element auswählen, das die Kopfzeile ist, und fügen Sie dann ein Element darin hinzu. Eine andere Methode, die auch auf dem übergeordneten Element funktioniert , ist ReplaceChild. Wie es klingt, wird es eines der Elemente innerhalb des Elternteils durch ein neues ersetzen eines der Elemente innerhalb des , das wir angeben. Lassen Sie uns das nun auskommentieren, und wir können den Header auch noch einmal als Eltern verwenden. Der Methodenname, der ReplaceChild ist. ReplaceChild nimmt auch zwei Werte auf, der erste sind die neuen Elemente, die wir hinzufügen möchten. Lassen Sie uns nochmals als Beispiel auf den Button gehen. Dann ist der zweite Wert das alte Element, das wir ersetzen möchten. Ich benutze das Navigationsgerät für dieses Beispiel, aktualisieren. Jetzt wurde die Navigation entfernt und durch dieses neue ButtonElement ersetzt. Dies sind einige verschiedene Möglichkeiten, um einer Webseite mit JavaScript neue Knoten oder Elemente hinzuzufügen , und um dies zu vermeiden, werde ich die Abschnitte hier entfernen. Kommentieren Sie dieses Beispiel und wir fügen den SectionWrapper wieder an die Seite an, die ein neuer Abschnitt war, den wir im letzten Video erstellt haben . Gut. Dies ist jetzt auf der Seite und im kommenden Video werden wir herausfinden, wie wir Elemente klonen und wie wir sie entfernen können . 41. Clonen und Entfernen von Elementen: Lassen Sie uns dieses Video starten, indem wir uns das Klonen von Elementen ansehen , die wir bereits haben. Die Starterdateien beim Klonen und Entfernen von Elementen haben das gleiche Setup wie das vorherige Video. Gehen Sie nach unten und direkt unter diesem Kommentar hier müssen wir als Erstes ein Element klonen , tatsächlich eines auswählen. Sie können ein beliebiges Element auswählen, das Sie möchten. Aber der Einfachheit halber verwende ich eines der Button-Elemente, die Sie bereits haben. Wählen wir das aus. Jetzt können wir auf diesem Button-Elementknoten eine Methode namens Clone Node aufrufen, die Klammern hinzufügen und diese in einer Variablen namens Clone button installieren . Nun, wenn wir dies speichern und mit der rechten Maustaste zum Browser in die Entwicklertools gehen und in die Konsole einsehen. Sie dies nun mit diesem Variablennamen Geben Sie dies nun mit diesem Variablennamen in den Browser ein, es ist ungewiss. Wir werden jetzt zurückgekehrt, um dieses Button-Element zu besuchen. Wenn wir genau zwischen diesen Button schauen, sehen wir keinen der Inhalte wie den darin enthaltenen Text. Sie können auf den Button schauen, Sie können hier sehen, dass wir den Textknoten online kaufen erstellt haben und dann haben wir diesen an unseren Button angehängt. Standardmäßig verwenden wir Klonknoten, es klont nur die Elementknoten und keinen der darin verschachtelten Inhalte. Wenn wir den Inhalt darin haben wollen, müssen wir einen booleschen Wert „true“ übergeben. Dies kopiert dann den gesamten Inhalt von innen. Wir können dies sehen, wenn wir noch einmal unseren Klon-Button eingeben, drücken Sie Enter. Wir haben jetzt den Textinhalt von innen. Eine Sache, auf die Sie beim Klonen achten sollten, ist, wenn wir ein Element klonen, das eine eindeutige ID hat, wobei IDs immer eindeutig sind. Wir wollen nicht zwei Elemente mit demselben Wert haben. Außerdem haben wir hier nur dieses Button-Element erstellt. Wir haben dies noch nicht zum DOM hinzugefügt. Werfen wir nun einen Blick darauf, wie wir Elemente mit einer Methode namens Child-Kommentare entfernen können , ich klone einfach. Die Remove-Methode ist ziemlich einfach. Alles, was wir tun müssen, ist unseren Knoten auszuwählen und nach oben zu scrollen. In diesem Beispiel entferne ich die Abschnittsüberschrift, die Abschnittsüberschrift ist eine Überschrift der Ebene 3, die hier erstellt wurde in dieser Variablen installiert wurde. Wählen Sie dies aus. Die erste Methode wir uns ansehen werden, ist „Entfernen“, nimm das, und das ist die Überschrift gerade hier. Wenn wir dies aktualisieren, wurde die Überschrift jetzt entfernt. Zusätzlich zu dieser Entfernungsmethode können wir dies auch auf dem übergeordneten Element tun. Wenn wir jedoch zu unserem HTML scrollen, wenn wir nach unserer Überschrift der Stufe 3 suchen, können wir hier sehen, dass der Elternteil dieser Abschnitt ist. dann nach unten zu unserem JavaScript scrollen wo wir dies tatsächlich erstellen, haben wir einen Verweis auf diesen Abschnitt namens Section Wrapper. Das sind die Eltern. Lassen Sie uns das auskommentieren. Schnappen Sie sich den Abschnitts-Wrapper, wir nennen ihn die Methode „Child entfernen“. Dann platzieren wir in eine Referenz, das untergeordnete Element, das Sie entfernen möchten. Das untergeordnete Element, das darin verschachtelt ist, ist diese Abschnittsüberschrift Wenn wir dies jetzt speichern und den Browser aktualisieren, können wir sehen, dass die Abschnittsüberschrift noch entfernt wurde. Aber dieses Mal einfach auf eine etwas andere Art und Weise gemacht. Inzwischen sollten Sie anfangen, ein gutes Verständnis dafür zu bekommen, wie wir JavaScript verwenden können, um mit dem DOM zu interagieren. Viele dieser Prozesse folgen einem ähnlichen Muster. Normalerweise müssen wir ein Element auswählen, wir können es in einer Variablen speichern. Dann rufen wir eine Methode auf, um eine bestimmte Aktion auszuführen. Wir können Dinge wie Elemente entfernen. Wir können wann immer ein Element hinzufügen. Wir können Elemente erstellen und ändern, um unser HTML genau so zu konstruieren , wie wir es wollen. Als Nächstes haben Sie die Möglichkeit, all dies mit einer kleinen Herausforderung in die Praxis umzusetzen. 42. Mini-Challenge: Willkommen bei dieser Mini-Challenge. Was ich möchte, dass Sie jetzt ein paar Dinge selbst ausprobieren , was Sie bisher gelernt haben. Wechseln Sie in den Ordner dieser Lektion, der die Mini Challenge ist, und öffnen Sie diese dann im Browser. Sie werden im Browser sehen, dass wir unten einen neuen Abschnitt haben . Die Aufgabe, die ich von Ihnen möchte, besteht diesen Abschnitt mit JavaScript neu zu erstellen, genau wie wir es zuvor in den letzten Videos getan haben. Für diese Herausforderung habe ich auch alle bestehenden Stile in ein eigenes dediziertes Stylesheet umgestellt . die Indexseite Wenn wir auf die Indexseite nach unten scrollen, sehen wir einen neuen Abschnitt, der gerade hier ist. Dieser hat die Klasse von Rezepten, und er ist ein Abschnitt, den ich möchte, dass Sie mit JavaScript neu erstellen. Sobald Sie fertig sind, können Sie diesen Abschnitt entweder aus dem HTML-Code entfernen oder zur späteren Bezugnahme kommentieren. Da ich das Styling für dieses Projekt bereits hinzugefügt habe, müssen Sie lediglich diese Klassen jedes dieser Elemente hinzufügen, damit Sie diese Klassen hinzufügen können. Dieses Video hat keine Anleitung, es ist nur eine Chance für Sie, alles, was Sie gelernt haben, in die Praxis umzusetzen, z. B. das Erstellen neuer Elemente, das Erstellen von Rapper, das Hinzufügen von Klassennamen, und wenn Sie sie in verschiedenen Abschnitten organisieren , wie wir es unten getan haben. Wenn Sie keine Probleme hatten, wie Sie sehen können, habe ich auch den vorherigen Code aus dem letzten Abschnitt beibehalten , sodass wir ihn bei Bedarf als Referenz verwenden können. Probieren Sie es aus. Viel Glück und denken Sie daran, dass es keinen richtigen oder falschen Weg gibt. Ziel ist es einfach, selbst etwas Übung zu machen und diesen Abschnitt, den wir bereits haben, zu replizieren. 43. Schleifen mit DOM-Elementen: Willkommen zurück. Ich hoffe, die letzte Mini-Herausforderung lief gut für Sie und Sie, um mit JavaScript einen neuen Abschnitt zu erstellen. Wenn Sie sogar eine kleine Anzahl von Elementen erstellen, können sich die Dinge ziemlich wiederholen. Stellen Sie sich vor, eine Liste mit sogar fünf oder zehn Elementen zu erstellen, alle Listenelementelemente , den Inhalt hinzuzufügen und diese Elemente dann zu den Eltern hinzuzufügen, wird eine Menge Codezeilen sein. Oder wenn wir dieselben Klassennamen und viele verschiedene Elemente hinzufügen wollten , ist dies wiederum eine Menge Arbeit und Wiederholung. Um dabei zu helfen, können wir eine Schleife verwenden, obwohl wir in einem späteren Abschnitt viel mehr über Schleifen haben . Wir haben uns bereits einige Beispiele für Looping im Array-Bereich angeschaut . Wir haben die Array-Methoden verwendet, die für jeden zugeordnet wurden, und diese führen eine Funktion für jedes Element im Array aus. Dies war eine Möglichkeit, unsere Wiederholung zu reduzieren, und dies kann auch auf alles wie unsere DOM-Elemente angewendet werden. In diesem Video springen wir in die richtige Datei und öffnen diese im Browser und scrollen dann zu unserer Indexseite zum Header-Bereich, und hier haben wir eine ungeordnete Liste. Da dies mehrere Listenelementelemente enthält, verwende ich dies und erstelle sie mit einer Schleife. Die Schleifen können verwendet werden, um diese Elemente zu erstellen. Wir können alle diese Elemente abrufen , Änderungen vornehmen, Klassen hinzufügen und auch einige Inhalte entfernen. Gehen wir ganz unten zu unserer Rubrik. Direkt unter dem Looping-Bereich können wir damit beginnen, alle unsere Listenelemente zu ergreifen. Nichts, was wir vorher noch nicht gesehen haben. Wir schnappen uns das Dokument und dann können wir diese mit dem Abfrageselektor alle abrufen. Denken Sie daran, dass wir alle Abfrageselektor verwenden da wir mehrere Listenelemente haben, nach dem Tag-Namen schieben und diese innerhalb einer Variablen namens Listenelemente speichern. Überprüfe das funktioniert. Im Browser können wir die Konsole öffnen und auf diese Variable zugreifen. Geben Sie Listenelemente ein und wir können sehen, dass die Rücksendung an uns eine Knotenliste ist , die unsere beiden Listenelemente enthält. Bereits unsere beiden Listenelemente haben die Klasse eines anderen Elements. Wenn Sie mehrere Listenelemente hatten, Hinzufügen in diesem Cluster jedes einzelne, wenn wir sie erstellen ein wirklich wiederholender Prozess. Wenn wir diese manuell hinzufügen würden, müssten wir auf unsere Listenelemente zugreifen. Da wir mehrere Artikel haben, müssen wir sie nach der Indexnummer auswählen. Wir können dann auf die Eigenschaft class list zugreifen , die add -Methode. Dann können wir einen Bildschirm haben, der ein neuer Klassenname ist. Speichern Sie dies nun und aktualisieren Sie es und greifen Sie erneut auf die Listenelemente zu. Dies würde dann die Inline-Klasse zu unserem ersten Element hinzufügen . Wie bereits erwähnt, würde dies für viele verschiedene Listenelemente die Dinge wirklich wiederholen, also werden wir uns ansehen, wie wir dabei helfen können , indem wir eine Schleife hinzufügen. JavaScript hat viele verschiedene Arten von Schleifen zur Verfügung. Für eine relativ einfache, die wir für diesen Fall verwenden können , ist eine Schleife, die von aufgerufen wird. Lassen Sie uns diese Zeile kommentieren und direkt unten beginnen wir dies mit dem Schlüsselwort for. Dann geben wir hier const item des Listenelements ein. Was wir hier tun, ist, dass wir unsere Listenelemente auswählen , die mehrere Elemente enthalten, und dann erstellen wir eine neue Konstante namens item. Wir können auf diese Artikelvariable in jeder Schleife zugreifen. Für die erste Schleife wird die Artikelvariable unser erstes Element sein. Für die zweite Schleife würde der Artikel unserem zweiten Element entsprechen und so weiter. Öffnen Sie die geschweiften Klammern und drinnen können wir den Code hinzufügen, den Sie für jedes unserer Elemente wiederholen möchten . Anhand des gleichen Beispiels wie oben können wir stattdessen auf unsere Artikelvariable zugreifen und dann genau danach genau dasselbe tun, anstatt dies unserem ersten Artikel hinzuzufügen ersten können wir stattdessen auf unsere Artikelvariable zugreifen und dann genau danach genau dasselbe tun, anstatt dies unserem . Kopieren Sie diesen Abschnitt und fügen Sie ihn ein. der ersten Schleife fügt dies die Inline-Klasse zum ersten Element hinzu und wiederholt es dann für das zweite Element, dies und immer wieder zur Konsole. Dieser Artikel ist nicht definiert und dies muss nur ein Listenelement sein. Dies sollte dazu führen, dass die Fehler verschwinden. Jetzt können wir wieder auf unsere Listenelemente zugreifen. Wir können sehen, dass diese beiden Elemente jetzt die Klasse von Inline haben. Wir haben nicht viel Code gespeichert, weil wir nur zwei Elemente haben, aber Sie können sehen, wie nützlich dies wäre , wenn wir vielleicht fünf oder zehn oder sogar mehr Elemente hätten , auf die wir dies anwenden können. Eine alternative Art von Schleife, anstatt diese allgemeine for-of-Loop zu verwenden besteht darin, auf eine der integrierten Methoden von JavaScript zuzugreifen. Denken Sie daran, als wir erwähnt haben, dass Abfrageselektor alle eine Knotenliste zurückgibt. Mit dieser Knotenliste haben wir auch Zugriff auf einige Methoden. Wir können diese sehen, wenn wir zum Prototyp gehen und diesen öffnen, wir haben Zugriff auf verschiedene andere Methoden wie für jeden. Dies wird die Schleife sein , die wir uns jetzt ansehen werden. Machen Sie das, kommentieren wir unsere for-of-Loop. Direkt unten können wir auf unsere Listenelemente zugreifen. Die eingebaute Methode, die wir gerade erwähnt haben, war für jeden. Im Inneren geben wir dann eine Funktion ein , die Sie für jeden unserer Werte ausführen möchten. Jeder unserer Werte wird innerhalb einer Variablen namens item gespeichert . Dann öffne die geschweiften Klammern, wir machen genau das Gleiche wie oben. Reiben Sie unseren Artikel und fügen Sie dann diesen Klassennamen hinzu, speichern Sie diesen und aktualisieren Sie den Browser, greifen Sie auf die Listenelemente zu. Unser Klassenname von Inline wird immer noch auf diese beiden Elemente angewendet. So können wir ändern, aber was ist mit dem Erstellen neuer Elemente wie einem vollständigen Listenelement? Nun, lasst uns das mal ausprobieren. Erstens ist, bevor wir dies tun, um Verwirrung zu vermeiden, wenn wir zurück zu unseren Listenelementen im Head-Bereich scrollen, beide Elemente auskommentieren. Dann können wir diese mit JavaScript neu erstellen. zurück nach unten und kommentieren Sie dieses Beispiel. Dann können wir gleich darunter wie gewohnt mit einem regulären Listenelement beginnen. Greifen Sie dazu auf das Dokument zu. Dann erstellen wir unser Listenelement mit der create element -Methode. Vorbeigehen in der Reihe von LI. Da wir dies auch ändern müssen, können wir dies dann innerhalb einer Konstante speichern , die als Listenelemente bezeichnet wird. Dann müssen wir unseren Textknoten für unser erstes Element erstellen . Speichern Sie dies erneut in einer Konstante und wir sagen Listentext. Dies entspricht den Dokumenten, dann verwenden wir die Methode namens create text node. Der Text für unseren ersten Listenpunkt waren unsere Burger. Dann können wir diese zusammenführen, indem wir zuerst auf die Eltern zugreifen, bei denen es sich um Listenelemente handelt. Dann können wir unseren Text mit der untergeordneten Methode hinzufügen. Wie wir bereits sehen, müssen wir jedem dieser Listenelemente auch eine Klasse hinzufügen . Schnappen Sie sich die Listenelemente. Dann ClassList.Add und der Name von nav-item. Dies ist das vollständige erste Listenelement, das erstellt wurde. Jetzt müssen wir dies nur noch zur ungeordneten Liste hinzufügen . Lasst uns das mit documents.querySelector greifen. Sie müssen die ungeordnete Liste auswählen. Verwenden Sie dann AppendChild, um dann unser Listenelement hinzuzufügen. Jetzt speichern und aktualisieren Sie den Browser, und wieder eingesetzt ist unser allererster Link unserer Burger. Wie zu erwarten, müssen wir alle diese Codezeilen für jedes unserer Listenelemente replizieren . Wir haben nur zwei Links, aber das wiederholt immer noch viel Code. Wir werden eine Schleife nutzen , um uns dabei zu helfen. Aber zuerst brauchen wir tatsächlich etwas, das wir durchlaufen müssen. Erstellen wir dazu eine Konstante namens Links. Links werden ein Array sein das die Textwerte jedes unserer Listenelemente enthält. Der erste werden unsere Burger sein, getrennt durch ein Komma. Der zweite Link war für die Geschichte. Verwenden wir die for-of-Schleife, um alle diese Links zu durchlaufen. Wir werden sagen „const link of links“ und enthält alle diese fünf Codezeilen unten. Bewegen Sie diese innerhalb unserer for-of-Loop nach oben. Wenn wir dies zunächst speichern und zum Browser wechseln, wird derselbe Code für jeden der Werte im Array wiederholt . Wir müssen auch den Textinhalt des zweiten Links ändern . Die Möglichkeit, dies zu tun, besteht darin , einen fest codierten Text innerhalb des Textknotens zu haben. Wir werden dies entfernen und durch den Wert von Link ersetzen. Der Wert der Verbindung wird unsere Burger in der ersten Schleife und dann der Text der Geschichte in der zweiten Schleife sein. Ersetzen Sie dies, über den Browser und aktualisieren Sie es. Es gibt jetzt unsere beiden Links. Genau wie zuvor, wenn wir nur zwei Links haben, haben wir keine große Menge an Code gespeichert. Aber die Vorteile würden viel größer werden, wenn wir mehr als zwei Listenelemente erstellen müssten . Alternativ haben Arrays auch für jede Methode Zugriff. Wir könnten das auch gebrauchen, wenn wir wollten. Alles, was wir tun müssen, ist diesen Abschnitt hier zu entfernen und unser Array zu greifen, das in der Links-Variable gespeichert ist. Dann können wir von jeder Methode Gebrauch machen. Denken Sie daran, dass wir für jeden Wert im Array eine Funktion ausführen und diesen Wert dann innerhalb einer Variablen speichern. Denken Sie daran, dass die geschweiften Klammern hier hineingehen. Wir müssen unseren vorhandenen Code ändern diese beiden geschweiften Klammern von außen verschieben. Schnappen Sie sich diese fünf Codezeilen. Bewegen Sie diese innerhalb unserer Schleife nach oben. Aktualisieren, es wird genau das gleiche Ergebnis erhalten. Die Loops sind eine großartige Möglichkeit, sich wiederholende Aufgaben bei der Programmierung auszuführen . Wir werden uns später im Kurs auch noch einige weitere Arten von Schleifen ansehen . 44. Einführung in Ereignisse (Events): Die kommenden Videos werden sich auf Ereignisse konzentrieren. Dies sind ein wirklich nützlicher Teil von JavaScript. Ereignisse sind wie Dinge, die im Browser passieren, wie z. B. ein Tastenklick, eine Maus über ein Bild, eine Tastaturtaste wurde gedrückt. Wenn eines dieser Ereignisse eintritt, sendet es ein Signal an uns, etwas zu tun. Oft ist es jetzt, dass diese Ereignisse passieren und dann Code wie eine Funktion ausführen. Beispielsweise haben Sie wahrscheinlich ein Formular auf einer Webseite ausgefüllt, z. B. ein Kontaktformular, und klicken dann auf Absenden. Nun, wenn dieses Formular eingereicht wird, findet es auch ein Sendeereignis. Wir könnten ein Klickereignis an ein Element wie eine Schaltfläche anhängen , und dies könnte jedes Mal eine Funktion ausführen , wenn auf diese Schaltfläche geklickt wird. Wenn Sie jemals eine Webseite besucht und dann versucht haben zu gehen, indem Sie die Maus oben auf die Schaltfläche Browser schließen bewegen , möchte ich dann eine Werbung für ein Pop-up auf dem Bildschirm sehen. Nun, das sind alle JavaScript-Ereignisse , die im Hintergrund stattfinden. Wir könnten ein Mouseover-Ereignis an ein Bild anhängen, das möglicherweise mehr vom Bild zeigt , wenn sich der Zeiger darüber bewegt. Wie Sie sich vorstellen können, sind die Möglichkeiten riesig. Denken Sie daran, dass JavaScript über das DOM mit unserem HTML interagiert . Auch hier mischen wir ein JavaScript mit unseren HTML-Elementen. In diesem Sinne müssen wir die DOMS-Ereignisschnittstelle nutzen . Die meisten HTML-Elemente können akzeptieren, dass ein Ereignis-Listener angehängt wird, und es gibt mehrere Möglichkeiten, dies zu tun. Einige davon werden wir im kommenden Video entdecken. 45. Erkennen von Events: Willkommen zurück. Jetzt haben wir ein grundlegendes Verständnis von Ereignissen. Wir werden uns jetzt ansehen wie wir auf sie hören und dann auf diese Ereignisse reagieren können . Wir springen in diese Datei, die auf Ereignisse wartet, und öffnen diese im Browser. Da wir mit unserem No Meat Burgers Projekt fortfahren, wird diese Datei etwas größer als wir möchten. Daher werden wir ein paar neue JavaScript-Dateien erstellen , die hilf uns, all dieses JavaScript zu organisieren. Da wir in unserem Script-Bereich ziemlich viele Elemente erstellt haben, erstellen wir zunächst in unserem Script-Bereich ziemlich viele Elemente erstellt haben, erstellen wir eine neue Datei innerhalb dieses Unterrichtsordners. Dieser wird als elements.js bezeichnet. Dafür müssen wir nur den gesamten Inhalt unserer Skripte abrufen . Alle Elemente, die wir in früheren Videos erstellt haben , löschen dies, hinterlassen einen leeren Skriptbereich, fügen Sie sie in unsere neue Datei ein und speichern Sie diese. Dann erstellen wir eine neue Datei , die dem kommenden Abschnitt folgen wird, nämlich die events.js. Mehrere Dateien wie diese zu haben, ist völlig in Ordnung. Alles, was wir tun müssen, ist sicherzustellen, dass diese innerhalb unserer Indexseite verlinkt sind , also behalten wir das Skript bei, aber wir müssen die Quelle hinzufügen, um auf beide Dateien zu verweisen . Die erste ist die elements.js, dupliziere dies, und der zweite war für unsere Ereignisse. Wir können überprüfen, ob dies auch funktioniert, indem den Browser speichern und aktualisieren, und wir sehen immer noch alle Elemente, die wir in dieser Datei erstellt haben. Wir werden nun weitermachen, wie wir mit Events arbeiten können , bis es jetzt für eine Veranstaltung ist. Wir brauchen zuerst eine Möglichkeit, es an eines unserer Elemente anzuhängen, und es gibt verschiedene Möglichkeiten, dies zu tun. Wenn wir zur Mozilla-Dokumentation gehen. der Mozilla-Dokumentation, in einem Abschnitt namens GlobalEventHandlers, müssen Sie diese Seite nicht verlassen , wenn Sie nicht möchten, aber dies wird uns eine Liste vieler gemeinsamer Ereignisse geben Handler, die wir verwenden können, und wir können diese auf unsere HTML-Elemente platzieren. Zum Beispiel können wir auf viele Ereignisse wie onfocus, onblur, onclick achten, was wirklich üblich ist. Wir können darauf achten, dass ein Element unter Drogen gesetzt wird, und so viele mehr, was uns dazu bringt, es für viele verschiedene Ereignisse abzudecken . Wir können warten, bis die Seite geladen wird , bevor wir eine Funktion starten Wir können darauf hören, dass eine Maus über ein Element geht, ein Element verlässt, und auch Dinge wie beim Spielen und bei Pause, die sind im Zusammenhang mit der Wiedergabe von Audio und auch Video. Wie Sie sehen können, haben diese Event-Handler das Präfix on. Was wir tun werden, ist, zu unserem Projekt zu gehen und zunächst mit dem Onclick-Event-Handler auf einen Klick zu hören. der Index-Seite suchen wir nach unserem Bild, dem Burger-Bild genau hier, und dann können wir als Attribut onclick hinzufügen. Onclick führt dann beliebigen JavaScript-Code aus, sodass wir eine Funktion ausführen können oder wir können etwas sehr Einfaches wie eine Warnung mit dem Text der Klicks ausführen . Speichern Sie dies, und jetzt ist dies an unsere Bildelemente angehängt. Aktualisieren Sie die Seite und scrollen Sie dann nach unten zum richtigen Bild, das sich direkt neben dem ultimativen veganen Titel befand . Klicken Sie darauf, und dann ist dies unsere Warnung oben. Wenn wir versuchen, auf verschiedene Bilder zu klicken, funktioniert dies nicht, da dies nur auf ein einzelnes Element angewendet wird. Wenn wir ein bisschen weiter gehen, können wir auch zu unserer Datei events.js gehen und eine Funktion hinzufügen, die ausgeführt wird, wenn auf dieses Element geklickt wurde. Wir erstellen wie zuvor eine Funktion und sagen „ChangeImage“. Jetzt und ich werde überprüfen, dass dies mit einer Warnung funktioniert. Wir sagen „Clicked“. Speichern Sie diese Datei und zurück auf unsere Index-Seite, anstatt diese Warnung hier auszuführen. Wir können dies entfernen und unseren Funktionsnamen übergeben , der „ChangeImage“ war. Speichern wir das zurück im Browser. Wir können all diese Bilder ausprobieren und das letzte Bild zeigt unsere Funktion innerhalb der separaten Datei. Diese Art, einen Event-Handler als Attribut hinzuzufügen , wird als Inline-Ereignishandler bezeichnet. Das funktioniert völlig gut, kann aber als schlechte Praxis angesehen werden. Dies liegt daran, dass es unseren HTML-Code und unseren JavaScript-Code vermischt . Was wir stattdessen tun können, ist, dies zu entfernen und unseren HTML-Code intakt zu lassen, und dann können wir uns dies innerhalb unserer Ereignisdatei anhören . Was ich tun werde, ist, einen Verweis auf dieses Element zu erstellen , wo document.QuerySelector, und dann können wir eines unserer Elemente auswählen. Dafür hole ich mir unser Header-Bild, das oben oben steht. Da wir mehrere Bilder haben, benötigen wir auch eine eindeutige Kennung, daher legen wir eine ID von HeaderImage ein, und dann können wir diese innerhalb unserer Ereignisse auswählen. Da es sich um eine ID handelt, müssen wir auch das Hush Plus in unserem HeaderImage platzieren das Hush Plus in unserem HeaderImage und diese dann innerhalb einer Variablen speichern. Wir schnappen uns unsere Bilder hier, wir müssen eine Funktion ausführen, also brauchen wir jetzt eine Möglichkeit, diese miteinander zu verknüpfen. Nun, wir können dies tun, indem wir auf unser Element zugreifen, nämlich das HeaderImage, und dann können wir direkt auf onclick zugreifen und dies auf unsere beiden Funktionen setzen. Das ist ChangeImage. Lassen Sie uns einen Schlag machen, den Browser neu laden, auf unser Hauptbild klicken und dies führt unsere Funktion aus. Wir wollen nicht nur eine Warnung machen, aber in diesem Fall möchten wir in der Lage sein, etwas mit dem Bild zu tun. Wir können jede der bisher erlernten Techniken anwenden, z. B. das Hinzufügen von Klassen oder sogar CSS. Anstelle der Warnung greifen wir unser HeaderImage auf, legen den Stil fest und legen dann die width -Eigenschaft fest, die einer Zeichenfolge von 50 Prozent entspricht . Wir versuchen es noch einmal. Genau die gleiche Technik funktioniert bei all den verschiedenen Event-Handlern , die wir gerade nachgeschlagen haben, genauso. Wenn wir beispielsweise diese spezielle Funktion ausführen wollten, wenn die Maus über dieses Bild geht, müssen wir nur onclicked ändern, um einen anderen Wert zu haben, wie z. B. onmouseover, aktualisieren, und sobald diese Maus über das Bild geht, wird dieser Code jetzt ausgeführt. Dieses Setup ist ein bisschen besser da unser gesamtes JavaScript jetzt in einer eigenen separaten Datei außerhalb des HTML enthalten ist jetzt in einer eigenen separaten Datei außerhalb des HTML enthalten . Einer der Nachteile dieses Ansatzes besteht jedoch darin, dass wir mehrere Funktionen auslösen wollten. Nehmen wir an, wir kopieren diese Funktion schnell und haben eine neue namens hi eingefügt . Wir können hier eine kurze Warnung hinzufügen. Wenn wir diese Codezeile auch hier duplizieren, führen wir auch unsere zweite Funktion aus, die Hi ist. Lasst uns das retten und sehen, was passiert. Aktualisieren, bewegen Sie den Mouseover, wir sehen unsere Warnung, aber wir sehen nicht, dass sich die Bildgröße ändert. Wenn wir mehrere Funktionen einrichten , die auf dasselbe Ereignis reagieren, wird das vorherige überschreiben, was bedeutet, dass nur die letzte Funktion ausgeführt wird. Wir sehen dies in Aktion, weil alles, was wir im Browser sehen, unsere Warnung war. Eine andere Möglichkeit, dies zu erreichen, besteht darin, eine Methode namens add event Listener zu verwenden . Dieser Ansatz wird diese beiden Codezeilen gerade hier ersetzen . Wir müssen immer noch auf unsere Elemente zugreifen, nämlich das Header-Image, aber dieses Mal übergeben wir es in einer Methode namens addEventListener. Im Inneren von hier ist das erste, was wir weitergeben ein Name der Veranstaltung, auf die Sie sich hören möchten. Lass uns ein Klick-Event machen. Alle diese Ereignisse sind genau die gleichen wie zuvor, aber wir verwenden einfach nicht das On-Präfix. Getrennt durch ein Komma können wir sogar in eine Funktion wie diese schreiben , oder stattdessen können wir einen Verweis auf eine der Funktionen übergeben , die wir bereits haben. Lassen Sie uns für ein ChangeImage gehen, und wir könnten dieses im Browser ausprobieren. Klicken Sie auf das Bild und dieses funktioniert jetzt. Einer der Vorteile der Verwendung dieser addEventListener Methode ist, dass auch mehrere Funktionen zugelassen werden. Wenn wir diese Zeile duplizieren würden, wir im Gegensatz zu dem Zeitpunkt, als wir den onclick-Ereignishandler vor oder den onmouseover hinzugefügt haben, können wir im Gegensatz zu dem Zeitpunkt, als wir den onclick-Ereignishandler vor oder den onmouseover hinzugefügt haben, eine zweite Funktion übergeben und beide Funktionen werden jetzt im Browser ausgeführt so gibt es unsere Warnung, und dann wird das Bild auf 50 Prozent geschrumpft. Dies ist wirklich nützlich, wenn wir mehrere Funktionen haben , die wir ausführen möchten, aber ich werde einfach dieses Hi-Beispiel entfernen und ein ordentliches Änderungsbild hinterlassen. addEventListener hat auch einige andere Vorteile. Eine andere ist, dass wir den Ereignis-Listener-Code auch entfernen können , wenn er nicht mehr benötigt wird. Es hat auch eine Einstellung, was bedeutet, dass wir uns anpassen können, wann das Ereignis auch ausgelöst wird. Beide werden jedoch in diesem Abschnitt ausführlicher behandelt . Wir haben auch viele verschiedene Veranstaltungen in unserem Programm, die Entwickler-Tools können uns auch dabei helfen. Wenn wir mit der rechten Maustaste klicken und in Chrome auf „Inspect“ klicken, können wir den Inspektor verwenden, um auf eines dieser Elemente zu verweisen , das wir überprüfen möchten. Wenn wir in unserem Fall auf dieses HeaderImage klicken und dann zur Registerkarte Ereignis-Listener gehen, können wir sehen, dass wir einen Klick-Listener dazu haben, und wenn wir dies öffnen, können wir sehen, dass dies ein Klicken Sie auf Listener , der dann unsere Funktion namens ChangeImage ausführt. Dies ist sehr nützlich, um herauszufinden , welche Event-Listener an welches unserer Elemente gebunden sind . Um es zusammenzufassen, haben wir drei Möglichkeiten behandelt einen Ereignis-Listener an ein Element anzuhängen. Zuerst haben wir ein Inline-HTML-Attribute hinzugefügt. Obwohl dies wahrscheinlich etwas ist , sollten Sie vermeiden, um unseren HTML-Code sauber und getrennt von unserem JavaScript zu halten . Wir haben dann den Event Listener direkt auf Elemente angerufen, und dies behielt unseren gesamten JavaScript-Code in einer einzigen Datei zusammen. Eine der Einschränkungen war, dass wir nur eine einzige Funktion ausführen konnten , einen Code aus diesem Beispiel, und schließlich haben wir uns die addEventListener Methode angeschaut, die dieses Problem nicht nur löste aber es stehen auch weitere Funktionen zur Verfügung, die wir in den kommenden Videos entdecken werden. 46. Erkennen mehrerer Events und Eventdaten: Die vorherigen Beispiele, die wir uns angesehen haben einem einzelnen Element einen Ereignis-Listener hinzugefügt. Es kann jedoch eine Zeit geben, in der wir denselben Ereignis-Listener zu mehreren Elementen hinzufügen möchten . Lassen Sie uns in die Datei dieser Lektion springen, die auf mehrere Ereignisse und Ereignisdaten wartet. Sie können einen Blick darauf werfen, wie das geht. Das Beispiel, das wir dafür verwenden werden, befindet sich unten auf unserer Indexseite. Sie werden feststellen, dass ich mit diesen beiden Rezeptabschnitten unten einen Stern oben in jedem dieser Artikel hinzugefügt habe . Wir können diese sehen, wenn wir zum Ende unseres HTML-Codes gehen. In jedem dieser Artikel haben wir ganz oben ein Spannelement. Dies steht ganz oben in diesen beiden Artikeln. Was wir vielleicht tun möchten, ist jedem dieser Sterne einen Event-Listener hinzuzufügen , der sie dann zu einer Favoritenliste hinzufügt. Wir könnten auch viele weitere Rezepte auflisten lassen, und wir möchten möglicherweise jedem einzelnen von ihnen denselben Event-Listener hinzufügen . Jedes dieser Rezepte einzeln auszuwählen und einen Event-Listener hinzuzufügen würde viel Arbeit erfordern. Stattdessen können wir eine Schleife verwenden, um dabei zu helfen. in der Seitenleiste Gehen wir in der Seitenleiste zur Datei events.js. Das erste, was wir innerhalb der Ereignisdatei tun müssen ist, all diese Span-Elemente auszuwählen , mit denen wir arbeiten möchten. Auf der Indexseite können wir sehen, dass diese Span-Elemente eine Klasse von Add haben. Wir werden beide mit QuerySelectorAll auswählen . Lass uns das machen. Wir speichern dies in einer Konstante namens AddButtons. Stellen Sie dies auf document.QuerySelectorAll ein. Dann können wir unsere Abfrage als String übergeben. Es ist eine Klasse, also benutze den Punkt auf dem Klassennamen von add. Denken Sie daran, dass wir früher, als wir QuerySelectorAll verwendet haben, eine HTML-Sammlung zurückgeben wird , die wir mit forEach durchlaufen können. Wählen Sie zuerst alle unsere Schaltflächen mit AddButtons aus. Die Methode ForEach, forEach, übernimmt jede Funktion, die für jedes der Elemente ausgeführt werden soll , das sich in unserer Sammlung befindet. Daher benötigt jedes Element auch einen Variablennamen. Wir rufen diesen Knopf auf, um es einfach zu halten. Dann können wir, genau wie wir es oben mit unserem einzelnen Element angeschaut haben, auch addEventListener verwenden. Wir können auf unseren button.addEventListener zugreifen. Dann werden wir drinnen nach einem Klickereignis suchen , das durch ein Komma getrennt ist. Wir möchten dann eine Funktion ausführen. Wir haben noch keine Funktion erstellt, aber wir werden dies in nur einer Sekunde tun. Ich nenne das AddToFavourites. So fügen wir unseren Event-Listener zu jedem der Schaltflächen in unserer Schleife hinzu. Dann können wir fortfahren und diese Funktion erstellen. Das war AddToFavourites. Jetzt fügen wir einfach eine Testwarnung hinzu, um sicherzustellen, dass alles funktioniert. Ich füge hinzu. Sagen Sie dies und klicken Sie zum Browser unten auf unseren Stern. Das ist unsere Warnung, klicken Sie auf einige andere Elemente, um sicherzustellen, dass dies nicht funktioniert. Dann können wir unseren zweiten Stern ausprobieren. Dies wird jetzt zu unseren beiden Sternen hinzugefügt. Auf diese Weise fügen wir mehreren Elementen einen Ereignis-Listener hinzu, aber oft möchten wir vielleicht auch feststellen können, auf welches der Elemente tatsächlich geklickt wurde , wenn wir nur ein CSS oder etwas sehr Generisches hinzufügen . Es spielt keine Rolle, auf welches wir klicken. Aber für unseren speziellen Anwendungsfall möchten wir vielleicht genau wissen, auf welches Rezept geklickt wurde. Dann könnten wir diese Rezeptseite umleiten und sicherstellen, dass die richtige Seite zu unseren Favoriten hinzugefügt wird. Der Weg dazu besteht zusammen mit vielen anderen Dingen darin, auf die Ereignisdaten zuzugreifen. Um auf unsere Ereignisdaten innerhalb der Funktion zuzugreifen, übergeben wir sie als Parameter. Ich nenne diese Variable e, aber ihr Name liegt ganz bei uns, aber es ist üblich, dass sie Event oder kurz e heißt. Es enthält das Ereignisobjekt. Dieses Ereignisobjekt enthält eine riesige Menge an Daten, auf die wir zugreifen können. Das wirst du sehen. Platzieren Sie in ein Konsolenprotokoll mit dem Wert e und entfernen Sie unser [unhörbar] für dieses Beispiel, aktualisieren Sie dann den Browser und öffnen die Entwicklertools in der Konsole und klicken Sie auf einen dieser Sterne. Dies gibt uns dann Zugang zu allen Veranstaltungsinformationen. Da wir eine Maus benutzt haben, ist dies ein Zeigerereignis, das uns viele verschiedene Informationen in Form eines Objekts liefert. Wir können das mit den geschweiften Klammern sehen und wir haben viele Schlüsselwertpaare. Zum Beispiel können wir die Position des Klicks sehen, der die X- und die Y-Achse ist. Wir können etwas sehen, das man Bubbles nennt, die wir uns sehr bald ansehen werden, und viele weitere Informationen zu diesem Ereignis. Eine der am häufigsten verwendeten Informationen innerhalb dieses Ereignisses ist der Zielabschnitt. Wenn wir dies öffnen, erhalten wir dadurch Zugriff auf unsere Elemente, auf die wir geklickt haben. In unserem Fall würde der Zugriff auf e.target innerhalb von JavaScript auf unsere Span-Elemente und alle darin enthaltenen Informationen zugreifen. Unser Anwendungsfall ist jedoch etwas komplexer. Wenn wir uns die Struktur unseres Codes auf unserer Indexseite ansehen , möchten wir den Inhalt unserer Überschrift der vierten Ebene abrufen , um dies zu unserer Favoritenliste hinzuzufügen. Aber wenn wir gerade hier auf dieses Spanelement klicken, wie greifen wir dann von zwei Zeilen unten auf die Informationen zu? Nun, die Antwort liegt auch in diesem Zielabschnitt. Es ist alles alphabetisch. Wenn Sie zum p-Bereich scrollen, müssen wir als Erstes eine Ebene zu unserem Artikel erhöhen. Dieser Artikel ist der übergeordnete Wrapper für all diese Informationen. Wir können auf all diese Inhalte innerhalb des übergeordneten Knotens zugreifen . Wir können den Artikel nur hier sehen. Mach das auf. Dies enthält, wenn wir nach unten scrollen, eine Liste von Kindern in Form einer HTML-Sammlung. Innerhalb der Kinder können wir sehen, dass wir die Span-Elemente mit der Klasse von Add oben haben. Dann unser Bild, unsere Überschrift Level 4 und dann das Div unten unten. Wir können auf alle diese Objektinformationen genauso zugreifen , wie Sie es mit anderen Objekten tun würden. Gehen wir zu unseren Events. Was wir tun müssen, ist, auf das Ziel zuzugreifen, das der erste Abschnitt ist, und dann auf den übergeordneten Knoten. Nach dem Elternknoten kamen die Kinder. Da es sich bei der Kinderbereich um eine HTML-Sammlung handelt, greifen wir durch die Indexnummer darauf zu. Genau wie bei einem Array übergeben wir diese eckigen Klammern und die Indexzahl von zwei, die eine Überschrift der Ebene 4 ist. Lasst uns das speichern und prüfen, dass dies unsere Überschrift Level 4 enthält. Aktualisieren. Wenn wir nun eines dieser Ereignisse mit den Sternen abfeuern, wird es uns unseren h4 Spicy Bean Burger geben. Unser zweiter, aktualisieren. Wir probieren das Ultimate Vegan aus. Gut. Wir haben jetzt die Elemente, die Sie wollen. Jetzt können wir dies untersuchen und den Namen mit unserem inneren Text auswählen. Also Children.InnerText. Versuch es noch einmal. Klicken Sie auf die Sterne und dies wird dann den Text für jedes unserer Rezepte angezeigt. Dies ist ein ziemlich langer Weg, um den Rezeptnamen zu erhalten, den Sie möchten, aber manchmal müssen wir, um die richtigen Informationen zu erhalten, nur weiter in das Objekt eingraben , um die Informationen zu erhalten, die wir benötigen. Ich werde keine Favoritenliste für dieses Projekt erstellen, aber so könnten wir es tun. Sie könnten den Namen für jeden dieser Burger abrufen und ihn dann in ein Array oder sogar eine Datenbank schieben. Eine der Informationen, die wir auch innerhalb des Ereignisobjekts sehen , war etwas, das Bubbles genannt wird. Das werden wir uns in den kommenden Videos ansehen , wenn wir alles über die Verbreitung von Ereignissen erfahren. 47. Event-Ausbreitung: In diesem Video wird sich etwas Wichtiges ansehen, das hinter den Kulissen passiert, wenn es um Ereignisse geht. Noch besser ist, dass wir in unserem Startup-Projekt einen weiteren Event-Listener hinzufügen . Öffnen Sie das Startprojekt, bei dem es sich um Ereignispropagation handelt, und dann sehen Sie im Browser, dass wir das gleiche Projekt haben , das wir aus dem vorherigen Video durchgeführt haben. Wenn wir uns den Rezeptabschnitt unten ansehen, haben wir unsere beiden Rezepte und möchten vielleicht die Funktionalität der Rezepte erweitern . Zum Beispiel könnten wir auf eins klicken und dann könnten wir das Rezept erweitern. Wir könnten dies in einem Pop-up öffnen oder sogar die gesamte Rezeptseite umleiten. Wir gehen in diesem Ordner zu unserer events.js und simulieren dies dann indem wir zuerst unsere Rezepte auswählen. Unsere beiden Rezepte sind, falls Sie sich erinnern, in den Artikelabschnitten gespeichert. Wir werden damit beginnen, diese beiden Artikel zu ergreifen und diese in einer Konstante zu speichern. Lasst uns das einrichten. Unsere Konstante und wir werden Rezepttitel sagen und diese auf Dokument setzen und dann mehrere Elemente deaktivieren Wir verwenden Abfrageauswahl alle in unserem Artikel übergeben. Da dies mehrere Elemente zurückgibt, müssen wir unsere Rezepttitel durchlaufen, und wir können dies mit einer für jede Schleife tun. Für jeden nehmen wir eine Funktion auf, die für jedes unserer Elemente ausgeführt wird . In unserem Fall haben wir zwei separate Elemente. Wir speichern diese innerhalb einer Variablen namens title. Jetzt durchlaufen wir diese beiden Artikel, was wir tun möchten , ist, einen Event-Listener zu beiden hinzuzufügen. Wir haben uns vorher angeschaut, wie das geht, wir wählen zuerst alle einzelnen Elemente aus, dann können wir den Add Event Listener verwenden. Dies hört auf ein Klickereignis und führt dann eine Funktion namens Redirect aus. Natürlich haben wir diese Umleitungsfunktion noch nicht erstellt , lassen Sie uns dies oben erstellen. Das alles, was Sie tun werden, ist, eine Warnung zu erstellen. Lassen Sie uns wissen, dass das funktioniert. Wir sagen, Rezept hat geklickt. Außerdem können wir die Ereignisdaten weitergeben. Zurück zum Browser und lade die Seite neu. Klicken Sie auf einen dieser Artikel und dieser ruft dann unsere Funktion auf, sobald Sie fertig Wir können dies auch mit dem zweiten Artikel versuchen. Das funktioniert alles wie erwartet. Aber was ist, wenn wir versuchen, auf den Stern zu klicken? Zuallererst sehen wir den Titel Ultimate Vegan, und dies haben wir in den vorherigen Videos eingerichtet. Aber was ist, wenn wir auf „Okay“ klicken? Nun, wir sehen dann unsere zweite Schicht, die Rezept geklickt wird. Wir erwarten das vielleicht nicht, weil wir auf den Stern und nicht auf den eigentlichen Artikel geklickt haben . Nun, der Grund dafür liegt an verschiedenen Phasen, die während des Ereignisses aufgetreten sind. In modernen Browsern werden Event-Handler standardmäßig etwas tun, das als Bubbling bezeichnet wird. Wenn Sie an eine Blase im Wasser denken, wird eine Blase immer nach oben schweben und das passiert mit unseren Ereignissen. Wir können das besser sehen, wenn wir in unsere index.html gehen und dann einen unserer Artikel finden. Wenn wir ein Ereignis im Browser auslösen, z. B. das Klicken auf ein Element, führt die Sprudelphase dazu, dass es nicht nur dieses Klickereignis setzt, sondern auch jedes Innere anderer Eltern auslöst Elemente auch. Wenn wir auf diese Schaltfläche Hinzufügen klicken, wird es daher auch zu den Elementen der Eltern aufblasen, die der Artikel ist, und löst auch Ereignisse aus, die mit diesem Artikel verbunden sind. Nicht nur dieser übergeordnete Artikel sprudelt auch weiter zu den anderen Eltern, wie z. B. einem div, diesem Abschnitt, und er wird bis zum Anfang des Körpers, zum HTML, zum Dokument und dann weitergehen bis zum Anfang des Körpers, zum HTML, zum Dokument und dann weitergehen HTML, zum Dokument endlich das Window-Objekt. Es wird auch alle Ereignisse auslösen , die mit diesen Elementen verbunden sind. Diese sprudelnden Ereignisse können nützlich sein. Anstatt beispielsweise vielen verschiedenen untergeordneten Elementen einen Ereignis-Listener hinzuzufügen, könnten wir den Elementen eines Elternteils einfach einen einzelnen Ereignis-Listener hinzufügen und dies testen, indem wir dem Body ein einfaches Ereignis hinzufügen. Gehen wir zum öffnenden Körperabschnitt. Wir fügen einen Inline-Ereignishandler namens On-Click hinzu und setzen diese auf eine Warnung, die die Zeichenfolge des Bodys ausgeben wird. Aktualisieren Sie nun den Browser, klicken Sie auf alle Elemente, die zu unserem Artikel gehören, so dass das Rezept angeklickt wird und dann auch unser Körperelement auf dem Weg nach oben ausgelöst wurde. Um dieses Beispiel zu entfernen, benötigen wir dies nicht innerhalb unseres Projekts, aber dies gibt uns einen guten Hinweis darauf was im Browser vor sich geht. Es gibt auch das Gegenteil und das nennt man die Erfassungsphase. Dies beginnt ganz oben, nämlich das Fensterobjekt, und läuft dann ganz unten durch unsere Elemente nach unten, indem jedes Ereignis ausgeführt wird, das an eines der Elemente auf der Art und Weise. Dies ist ein Blubbern und Erfassen, die sich beide auf Feuerereignisse beziehen, wenn sie auf dem Weg nach oben oder nach unten sind, und es gibt auch eine dritte Amtszeit, die als Ziel bezeichnet wird. Das Ziel sind die eigentlichen Elemente, die Ereignisse auslösen, wie das gerade erstellte Artikel-Ereignis . wissen, dass andere verschachtelte Ereignisse auch auf dem Weg nach oben ausgelöst werden , haben wir einige verschiedene Möglichkeiten, wie wir damit umgehen wollen. Wir wollen vielleicht immer noch, dass alle Ereignisse ausgelöst werden, aber vielleicht tun wir das Gegenteil von dem, was wir derzeit haben. Derzeit möchten wir auf unsere Schaltfläche „Hinzufügen“ klicken, diese wird zuerst ausgelöst, wenn Sie darauf klicken, gefolgt vom äußeren Artikelelement. Wir sehen dies in der Reihenfolge der Warnung im Browser. Aber vielleicht möchten wir sie auch in umgekehrter Reihenfolge abfeuern, oder vielleicht wollen wir nicht eines der Ereignisse überhaupt ausgelöst wird, nur die Ereignisse für die Elemente, auf die wir geklickt haben, und es ist eine Möglichkeit, beides abzudecken Situationen. Zunächst einmal schauen wir uns an, wie die Reihenfolge, in der diese Ereignisse ausgelöst werden, rückgängig machen können, und wie wir dies tun, wenn wir nur im Browser nachsehen , wenn wir auf den Stern klicken, sehen wir der Titel, der ultimativ vegan ist, gefolgt von dem Artikel-Event, auf das Rezept geklickt wurde. Dies funktioniert von innen nach außen und wir werden dies rückgängig machen, indem wir dies auf die Erfassungsphase umstellen. Um dies zu tun, besteht darin, in unsere Ereignisse zu gehen und dann in unseren Add Event Listener einen dritten Wert hinzuzufügen, der durch ein Komma getrennt ist, und wir setzen dies auf wahr. True aktiviert die Erfassungsphase anstelle des Standardsprudelns. Wenn wir wollten, könnten wir dies auch als Optionsobjekt einrichten, bei dem wir die Erfassung auf „true“ festlegen. Beide Ansätze sind genau gleich und in Ordnung zu verwenden. Wachheit, von der Sprudelung bis zur Erfassungsphase zu laufen , bedeutet, dass wenn wir jetzt auf unsere Schaltfläche klicken , der hier der Add-Abschnitt ist, anstatt von innen nach außen zu arbeiten, Das externe Artikel-Event wird zuerst gefeuert, gefolgt von dieser Kunst. Wir können dies versuchen, wenn wir den Browser aktualisieren , klicken Sie auf den Stern. Wir sehen zuerst das Rezept, das mit dem Artikel verknüpft war, gefolgt von unseren Span-Elementen kurz danach. Der Gesamtbegriff für dieses Blubbern und die Erfassungsphase wird Ereignisausbreitung genannt , und wir können diese Ausbreitung auch vollständig stoppen. Dies würde bedeuten, dass nur das genaue Element, das Trigger ausgeführt wird, anstatt Overs innerhalb des Baums. Wenn wir zum Beispiel auf den Start geklickt wir nur die Funktion „Zu Favoriten hinzufügen“ und nicht die, die wir zuvor erstellt haben, ausführen wollten , können wir in diese Funktion springen und wir können auf unser Ereignis zugreifen Informationen, die uns Zugriff auf eine Funktion namens Stop Propagation ermöglichen. Wir können das Optionsobjekt auch von unten entfernen, das die Erfassungsphase festlegt. Aktualisieren Sie den Browser und wenn wir dies jetzt versuchen , indem wir auf den Stern klicken, können wir sehen, dass nur der Titel ultimative Vegan ausgeführt wird. Klicken Sie auf „Okay“, wir sehen keine anderen Ereignisse ausgelöst. Dies kann ziemlich komplex sein, wenn Sie das erste Mal in dieses Ding eingeführt wurden. Aber der einfache Weg, sich daran zu erinnern ist, dass wir, wenn Sie mehrere Ereignisse haben, eine Option haben, bei der wir eines dieser Ereignisse für die übergeordneten Elemente oder die untergeordneten Elemente auslösen möchten dieser Ereignisse für die übergeordneten Elemente oder die untergeordneten , oder wie wir es gerade getan haben entdeckte, dass wir auch die Reihenfolge rückgängig machen und auch jede Vermehrung stoppen können und auch vollständig. Der Grund, warum wir sowohl die Eroberungs- als auch die sprudelnden Phasen haben , ist historisch. Vor langer Zeit, als die Browser weniger standardisiert waren, nutzten einige Browser die Erfassungsphase und einige verwendeten das Bubbling, was dann zum aktuellen Standard führte, bei dem beide jetzt in modernen Browsern implementiert sind. 48. Events einmal durchführen: Willkommen zurück. Wir werden uns jetzt ansehen, wie wir ein Event nur ein einziges Mal durchführen können . Wir springen in die aktuelle Datei , die Once Events Running Events ist, und öffnen diese im Browser. Dies hat auch eine angehängte Datei events.js mit dem ähnlichen Beispiel wie das , was wir in den vorherigen Videos angesehen haben. Wir wissen von den Stern-Buttons oben, wir all diese durchlaufen werden, die forEach-Schleife im EventListener, die jetzt für einen Klick auflistet und dann unsere AddToFavorite-Funktion ausführt. Alles was es tut, ist eine einfache Warnung mit dem Text zu erstellen, der entweder der ultimative Veganer oder der würzige Bohnenburger ist . Etwas früher, als wir uns verschiedene Möglichkeiten angeschaut haben , auf Ereignisse zu hören. Ich habe erwähnt, dass es ein bisschen mehr zu addEventListener gibt als das, wofür wir es derzeit verwenden. Wir haben uns gerade eines der Features zuvor angeschaut, nämlich ein Optionsobjekt hinzuzufügen und die Erfassungsphase auf „true“ festzulegen. Zusammen mit diesem ist eine weitere Möglichkeit, das Ereignis einzuschränken, das nur einmal aufgerufen wird. Das ist ziemlich einfach, alles, was wir tun müssen, ist, dies einmal zu ändern und dies auf wahr zu setzen. Mal sehen, welche Auswirkungen dies im Browser hat. Wenn wir nun einen der Sterne neu laden und anklicken, sehen wir den Titel „Ultimate Vegan“. Das funktioniert alles völlig gut, aber was ist , wenn Sie versuchen, dies ein zweites Mal anzuklicken? Das zweite Mal sehen wir den Text des ultimativen Veganers nicht , stattdessen sehen wir den Text des Rezepts angeklickt. Dies ist sinnvoll, da wir den Ereignis-Listener für den Titel so eingestellt haben , dass er immer nur einmal ausgeführt wird. Daher wird es auf den umgebenden Artikel zurückgreifen , da das Stars-Event nicht mehr aktiv ist. Dies ist eine wirklich großartige Möglichkeit, einen Einmal-Use-Ereignis-Listener hinzuzufügen , der immer nur einmal aufgerufen wird. 49. Verhindern des Standardverhaltens und die passive Option: Wenn wir ein Ereignis auslösen, hat es auch ein Standardverhalten , das innerhalb des Browsers auftritt. Dies ist sinnvoll, weil wir möchten, dass die Veranstaltung tatsächlich etwas tut. Ein einfaches Beispiel ist ein Kontrollkästchen. Lassen Sie uns in die richtigen Startdateien springen, die Standardverhalten verhindern und die passive Option vorbeugen, und öffnen Sie die index.html. Gehen wir nach dem allerletzten Abschnitt nach unten, und direkt über unseren Skripten erstellen wir auch eine Eingabe mit dem Typ des Kontrollkästchens und der ID des Kontrollkästchens. Speichern wir das und öffnen Sie im selben Ordner wie events.js. Wir können anfangen, dieses Element zu greifen. Irgendwo drin ist es in Ordnung und wir werden uns einen Verweis auf dieses Kontrollkästchen holen diese in einer Konstante aufbewahren. Wir schreiben document.queryselector, und dann werden wir es mit Hash in der ID übergeben. Die ID, die wir der Eingabe gegeben haben, war das Kontrollkästchen, und dann können wir mit einer Methode auf unser Kontrollkästchen zugreifen, die addEventListener ist, und dann hören wir auf einen Klick auf dieses Element. Dies muss auch eine Funktion auslösen , die wir HandleClick aufrufen, und diese Funktion dann direkt oben einrichten. Die Funktion HandleClick und seine Funktion müssen ebenfalls auf die Ereignisdaten zugreifen, also geben Sie dies als Parameter an und wir führen vorerst ein einfaches Konsolenprotokoll mit e.target durch. Da es sich um ein Kontrollkästchen handelt, können wir auch auf die geprüfte Eigenschaft zugreifen. Dies sollte einen Wert „true“ oder „False“ zurückgeben wenn die Eingabe aktiviert ist oder nicht. Rüber zum Browser, aktualisieren Sie es, und wir werden das auch ein bisschen größer machen. Springe in die Konsole. Wir können es einfach gut sehen, sehen Sie das ganz unten, also klicken Sie darauf und wir sehen, dass dies überprüft wird, weil es stimmt. Wir können dies deaktivieren und dies wird das Ergebnis von Falsch sein. Wir können die Liste umschalten und diese Umschaltaktion ist das Standardverhalten, aber wenn wir dieses Standardverhalten nicht wollten, könnten wir den Standard verhindern und genau das behandeln , was wir selbst passieren wollen. Wir gehen zurück zu unserem Skript, das die Ereignisse und scrollen zu der Funktion AddToFavourites. Früher haben wir auf die Ereignisdaten zugegriffen und eine Methode namens stopPropagation verwendet. Ähnlich wie bei diesem können wir auch eine andere Methode namens PreventDefault verwenden . Wie zu erwarten, ist dies auch das Ereignisobjekt verfügbar. Wir können dies innerhalb unserer HandleClick-Funktion verwenden. Greifen Sie oben auf unsere Ereignisse zu, rufen wir die Methode auf, die PreventDefault ist , die wiederum das Standardverhalten im Browser stoppt, wodurch auch der Wert des Kontrollkästchens umgeschaltet wird. Wir werden das mal ausprobieren. Wenn wir aktualisieren, überprüfen Sie den Postausgang unten; dies ist wahr. Wenn wir weiter klicken, ist dies immer nur das Ergebnis von „true“. Wir sehen keinen falschen Wert, und wir sehen auch nie, dass dieses Kontrollkästchen ein Häkchen enthält. leben jetzt frei, alles zu tun, was wir wollen, mit diesem Ereignis innerhalb unserer Funktion. Auch unten in der addEventListener Methode können wir auch einen dritten Wert hinzufügen, bei dem es sich um ein Optionsobjekt handelt , bei dem wir die passive Option auf „true“ einstellen können . Wenn Sie dies auf „true“ setzen, wird der PreventDefault immer davon abgehalten , jemals aufgerufen zu werden. Ich speichere das und sehe, was im Browser passiert. Aktualisieren und wenn wir auf unser Kontrollkästchen klicken, können wir sehen, dass wir nicht in der Lage sind, Default innerhalb des EventListener zu verhindern. Dies liegt daran, dass, wenn wir passiv auf „true“ festlegen, wird dies verhindern, dass PreventDefault jemals aufgerufen wird. Wir können das sehen, wir werden unser ursprüngliches Verhalten, zwischen wahr und falsch umzuschalten, wieder unser ursprüngliches Verhalten, zwischen wahr und falsch umzuschalten einsetzen und wir sehen auch das Häkchen im Kontrollkästchen. Sie fragen sich vielleicht, warum wir den Standardwert innerhalb der Funktion verhindern, aber wir überschreiben dies innerhalb des EventListener. Nun, ein Grund könnte sein, wir vielleicht andere Entwickler davon abhalten möchten , in Zukunft etwas zu tun , wenn wir uns auf das Standardverhalten verlassen. Die Verwendung der passiven Option kann auch zu einer besseren Leistung führen. Ein Beispiel dafür ist auf mobilen Geräten, bei denen Entwickler manchmal das Standard-Scrollverhalten verhindern um eine benutzerdefinierte, ausgefallene Art des Scrollens zu implementieren. Wenn wir jedoch so etwas Benutzerdefiniertes nicht machen ist es schlecht, den Browser durch Hinzufügen der passiven Option wissen zu lassen . Daher muss der Browser keine Dinge selbst herausfinden , die es können nehmen Sie sich Zeit und behindern Sie auch die Leistung. Zurück zu unserer Index-Seite und wir können diese Eingabe genau hier entfernen, und wir werden uns jetzt ein häufiger verwendetes Beispiel ansehen, um das Standardverhalten zu verhindern , das bei Verwendung mit Formularen verwendet wird. Ein Beispiel dafür ist ein Anmeldeformular, also erstellen Sie einen neuen Abschnitt mit der Anmeldeklasse. Hier drin eine Überschrift der Stufe 3 mit dem Titel „Registrieren“ oder wir können dies über unseren Posteingang ausruhen. Direkt darunter können wir anfangen, unser Formular zu erstellen, und dann erstellen wir in den Formularelementen ein neues div für jeden dieser Abschnitte. Zuallererst wird das Label für den Namen des Benutzers verwendet, also sagen wir für den Namen, der die Namensbezeichnung mit dem Doppelpunkt übergibt . Die Eingaben, das ist die Art der Steuer. Um mit unserem Label übereinstimmen, geben wir auch die ID des Namens weiter. Dieses zweite Div wird nur für die E-Mail gedacht, also kopieren und einfügen und ändern sie in die entsprechende E-Mail. Das dritte und das letzte div wird für das Senden verwendet werden, also erstellen Sie eine Eingabe mit der Art des Absendens und auch der ID des Absendens. Da wir auch unser Kontrollkästchen von früher entfernt haben, können wir auch zu den Ereignissen zurückkehren unsere Funktion und den EventListener entfernen. Nehmen wir an, dieser Endtest, das sieht im Browser gut aus. Es gibt unseren Titel, den Namen und die E-Mail-Eingaben zusammen mit unserem Senden. Wenn wir das Formular absenden, besteht das Standardverhalten darin, das Formular an einen Back-End-Webserver zu senden und dann möglicherweise etwas wie eine Weiterleitung auf eine Erfolgsseite durchzuführen. Offensichtlich haben wir keine zusätzliche Seite, auf die wir umleiten können, daher werden wir auf dieselbe Seite umleiten , was wiederum dazu führt, dass die Seite neu geladen wird. Das Neuladen der Seite verliert alle Formulardaten, die darin verschachtelt sind. Wenn wir hier etwas hinzufügen; nur ein Beispiel ist in Ordnung, klicken Sie auf „Absenden“, wir können ein Beispiel dafür sehen. Wir sehen, dass die Seite neu geladen wurde und wir verlieren auch die Formulardaten aus diesen Feldern. Nun, es gibt vielleicht Vorkommen bei denen wir diese Daten zuerst erfassen und nutzen wollen , bevor alles weg ist. Ein Beispiel dafür wäre, die Formulardaten möglicherweise zu validieren , bevor sie an den Server gesendet werden. Da wir gerade erst nachgeschlagen haben, ob wir diese Daten vor dem erneuten Laden erfassen möchten , müssen wir das Standardverhalten des Formulars verhindern. Gehen Sie dazu zu unseren Ereignissen zurück und wir werden zunächst das Formular und die Eingabeelemente erfassen. Sagen wir, dass const form gleich document.querySelector sein wird , wo wir das Formularelement auswählen. Wenn wir dies noch zwei Mal kopieren und einfügen, ist der zweite für den Benutzernamen und wir geben diesem auch eine ID, die dem Namen entspricht. Die dritte ist für die UserEmail. Als Nächstes holen wir uns unser Formular und fügen einen EventListener hinzu , der jetzt zum Absenden des Formulars verwendet wird. Der Grund, warum wir dies tun und auf das Submit-Ereignis hören können , liegt darin, dass wir innerhalb unserer Index-Seite die Art des Absendens hinzugefügt haben. Trennen Sie es durch ein Komma, wir lösen eine Funktion namens HandleFormSubmit und richten diese dann direkt oben ein. Wie Sie es erwarten würden, da wir das Standardverhalten verhindern müssen , greifen wir auf unser Ereignisobjekt zu und erstellen dann ein Konsolenprotokoll, das unseren Benutzernamen erfasst. Alles, was wir hier getan haben, ist unser UserName-Element zu greifen, aber wenn wir den Wert erhalten möchten, der vom Benutzer eingegeben wird , müssen wir auf den Wert zugreifen. Was die Ergebnisse angeht, aktualisieren Sie sie. Platzieren Sie in der Konsole einen beliebigen Namen hier. An jede E-Mail benennen und senden. Sie werden dort sehr schnell sehen, dass der Benutzername von Chris in der Konsole platziert wurde und dann sehr schnell alle Daten verschwinden. Wie Sie erwarten würden, besteht die Möglichkeit, dies zu verhindern, darin, auf unser Ereignisobjekt zuzugreifen und genau wie bevor wir das Standardverhalten verhindern können. Wir sagen dies und probieren es noch einmal aus, fügen den Namen hinzu, und die E-Mail ist in Ordnung und klicken dann auf „Absenden“. Jetzt sind unsere Daten immer noch vorhanden. Wir haben unser Konsolenprotokoll, und auch innerhalb der Eingabe haben wir den Namen und die E-Mail-Eingaben. Gut. Jetzt haben wir Zugriff auf all diese Informationen, bevor sie verschwinden. Wir können jetzt den Namen und die E-Mail validieren und im richtigen Format überprüfen, und im richtigen Format überprüfen bevor wir sie an den Server senden. Ich werde nur eine sehr einfache Validierungsprüfung für dieses Beispiel durchführen , um zu sehen, ob der Benutzer einen Namen mit einer if-Anweisung eingegeben hat . Wir haben es noch nicht behandelt, ob Aussagen noch nicht behandelt werden, aber sie sind einfach eine Möglichkeit zu überprüfen, ob etwas stimmt. Wir können dies innerhalb unserer Funktion tun , besteht darin, auf das Schlüsselwort if zuzugreifen und dann eine Bedingung in die Klammern zu platzieren. Wir möchten prüfen, ob der UserName.Value, der die Textzeichenfolge ist, einer leeren Zeichenfolge entspricht. Wenn dies der Fall ist, öffnen wir einige geschweifte Klammern genau wie den Funktionskörper und platzieren sie in etwas, das Sie ausführen möchten. Lassen Sie uns einfach eine Warnung mit der Aufschrift Bitte geben Sie Ihren Namen und kehren Sie dann aus dieser Erklärung zurück. Jetzt speichern wir das und laden den Browser neu, klicken Sie auf „Absenden“. Unsere Warnung wurde oben ausgeführt, versuchen wir dies mit einigen Daten, die darin platziert sind. Da sind wir los. Jetzt hat der Benutzername eher einen Wert als eine leere Zeichenfolge. Wir sehen diese Warnung nicht mehr im Browser, daher haben wir die Möglichkeit, mit den Daten alles zu tun, was wir wollen , bevor wir sie an den Server senden. Denken Sie jedoch daran, dass wir, da die Seite nicht mehr neu geladen wird, auch leer und diese Formulareingaben selbst behandeln müssen . Das ist auch ziemlich einfach, wir können dies innerhalb unserer Funktion direkt unter der if-Anweisung tun. Was wir tun müssen, ist unseren Benutzernamen abzurufen, auf den Wert zuzugreifen und diesen auf eine leere Zeichenfolge zu setzen. Das Gleiche gilt für die E-Mail, auch für eine leere Zeichenfolge. Darunter könnten wir dies mit jeder gewünschten Weise an unseren Server senden . Probieren wir das mal aus. Wir können die Formulareingaben überprüfen, wir klären. Aktualisieren, fügen Sie unsere Daten hinzu, klicken Sie auf „Absenden“ und alles hat erfolgreich funktioniert. Es entfernt auch unseren Namen und die E-Mail-Daten. Es ist üblich, dieses Ding bei der Verwendung von Frameworks oder Bibliotheken zu sehen . Wenn Sie in der Vergangenheit jemals etwas wie React oder Vue.js verwendet haben, haben Sie dies möglicherweise in der Vergangenheit verwendet, wenn mit Formulareingaben arbeiten. Als Nächstes beenden wir unseren Blick auf Ereignisse, indem wir alle Ereignisse entfernen wenn sie nicht mehr benötigt werden. 50. Entfernen von Event-Listeners: Ich hatte bisher eine ziemliche Übung, Ereignisse zu erstellen, und wir haben uns auch angeschaut, wie wir die Option hinzufügen können wenn Sie ein Listener sind, um nur einmal ein einziges Ereignis auszuführen. Sobald dies passiert, wird der Ereignis-Listener dann aus den Elementen entfernt. Aber wir können Ereignis-Listener auch manuell entfernen , wir können sie entfernen, wenn sie nicht mehr benötigt oder verwendet werden, und diese Entfernung ist in kleineren Projekten nicht unerlässlich, aber sobald wir zu einem größeren Projekt kommen, bereinigen Sie alle alte ungenutzte Event-Listener können die Effizienz wirklich verbessern. Es bedeutet auch, dass wir dasselbe Element verwenden können, um verschiedene Dinge zu tun , indem diese Ereignis-Listener hinzufügen und entfernen. Springen Sie in die Chrome-Datei, die Ereignis-Listener entfernt, und wenn Sie dies im Browser öffnen, werden Sie feststellen, dass wir uns vom Burger-Projekt-Setup entfernt haben. Wir haben ein einfaches Beispiel, also haben Sie ein Span-Element, und dann wird innerhalb der P-Elemente eine Startpunktzahl von Null haben. Ziel hier ist es, auf diese Schaltfläche „Hinzufügen“ zu klicken , um die Punktzahl zu erhöhen, und dann verwenden wir die Schaltfläche Abbrechen um den Ereignis-Listener zu entfernen. Dies verlinkt auch auf unsere events.js im selben Ordner, und wenn wir darauf springen, haben wir einen Verweis auf alle drei unserer Elemente. Wir haben den Add-Button, wir haben den Abbrechen-Button und dann die Ausgabe, die unsere Nummer ist. Was wir hier drinnen tun ist, einen Event-Listener zu erstellen , den wir in Zukunft entfernen werden. Dieser Ereignis-Listener wird an unseren Add-Button angehängt, also fügen wir dies wie gewohnt hinzu. Dies jetzt für einen Klick und löst dann eine Funktion aus, die als Vergrößerung bezeichnet wird . Das sollte alles bekannt sein. Wir werden jetzt unsere erhöhte Funktion direkt oben erstellen. Was soll diese Funktion tun? Nun, wir müssen diese Ausgabe auswählen , die dem aktuellen Wert von Null entspricht. Dies ist ein p-Element. Wir möchten den aktuellen Wert auswählen und ihn dann um eins erhöhen. Zuallererst besteht die Möglichkeit, unsere Ausgabe auszuwählen. Wir können den inneren Textinhalt ändern und diesen auf einen neuen Wert zurücksetzen. Derzeit möchten wir jedes Mal, wenn wir auf diese Schaltfläche klicken, den Wert eines hinzufügen , aber eine Sache, an die wir uns erinnern müssen ist, dass wir den inneren Text haben. Nun, hier fügen wir eine Zahl hinzu. Was wir also zuerst tun müssen, ist, unseren inneren Text in eine Zahl umzuwandeln . Wo Sie dies tun können, ist auf die Zahlenfunktion zuzugreifen, und wir werden dann den aktuellen Output.InnerText abrufen. Dies wird dies dann in eine Zahl verwandeln, und dann fügen wir eine hinzu. Versuchen wir es und speichern Sie die Datei und aktualisieren Sie es. Klicken Sie auf Hinzufügen und jedes Mal, wenn ich darauf klicke, wird dies um den Wert von eins erhöht. Als Nächstes müssen wir auch auf einen Klick auf diesen Abbrechen-Button achten . Dies ist so ziemlich eine Wiederholung des obigen Prozesses. Wir holen uns einen Verweis auf unseren Abbrechen-Button. Wir fügen den Event-Listener hinzu. Lassen Sie uns jetzt für das Click-Ereignis und rufen Sie dann eine Funktion namens stopListener auf. Diese Last wird diese Funktion erzeugen. Legen Sie es vorerst einfach in ein Abbruchprotokoll, damit Sie wissen, dass dieses läuft. Probieren wir das aus, aktualisieren den Browser und springen Sie in die Entwicklertools, springen Sie in den Abbruch. Schaltfläche „Abbrechen“ nimmt nun unsere Protokolle auf. Um diesen Abbrechen-Button zu erhalten, entfernen Sie den Ereignis-Listener tatsächlich aus unserer Schaltfläche „Hinzufügen“. Was wir tun müssen, ist auf eine Methode namens remove event Listener zuzugreifen . Dies ist ziemlich einfach nicht unser Stornierungsprotokoll Wir können dies entfernen. Wir können auf die Schaltfläche „Hinzufügen“ zugreifen und den Ereignis-Listener entfernen aufrufen. Sagen Sie dies, und wir versuchen es aus, aktualisieren den Browser, klicken auf die Schaltfläche „Hinzufügen“, was den Wert erhöht. Klicken Sie auf die Schaltfläche Abbrechen, sehen Sie einen Fehler innerhalb des Abbruchs an, sagen Sie in zwei Argumenten, und wenn wir versuchen, auf die Schaltfläche Hinzufügen zu klicken, wird der Ereignis-Listener noch nicht abgebrochen. Dies liegt daran, dass wir auch dieselben Parameter übergeben müssen , die wir beim Hinzufügen des Ereignis-Listener verwendet haben. Daher müssen wir den Klick und auch den Funktionsaufruf aktualisieren entfernen , und wir werden versuchen hinzuzufügen, was in Ordnung ist. Wir werden den Ereignis-Listener entfernen, der abbrechen würde. Jetzt sehen wir keine Fehler, und wenn wir versuchen, auf die Schaltfläche „Hinzufügen“ zu klicken, werden keine weiteren Aktualisierungen stattfinden. Wie wir gerade gesehen haben, müssen wir sicherstellen, dass die Parameter auch genau gleich sind. Derzeit haben wir das Click-Ereignis, das jetzt vier Jahre alt sein wird, und dies wird in derselben Funktion aufgerufen. Wenn wir jedoch versuchen, einen anderen Ereignis-Listener zu entfernen, z. B. dies bei Mouseover zu ändern, könnten wir dies sagen und dies noch einmal ausprobieren. Die Schaltfläche „Hinzufügen“ funktioniert. Wenn wir den Ereignis-Listener jedoch abbrechen, funktioniert die Schaltfläche „Hinzufügen“ weiterhin, da wir einen anderen Ereignistyp haben. Lassen Sie es uns wieder ändern, um zu klicken. Wenn wir das Optionsobjekt hätten, wie wir zum Beispiel zuvor nachgeschlagen haben, könnten wir die Erfassungsphase auf wahr einstellen. Wenn wir es jetzt neu laden, versuchen wir es noch einmal aus, wir werden versuchen abzubrechen. Die Schaltfläche „Hinzufügen“ funktioniert weiterhin. Dies liegt daran, dass wir nicht genau dieselben Parameter in unserem Remove Event-Listener haben genau dieselben Parameter , daher wird es als anderes Ereignis angesehen. Wenn wir möchten, dass dies wie erwartet funktioniert , müssen wir dies auch kopieren. füge den dritten Parameter hinzu, teste dies aus. Wir werden versuchen zu stornieren, und jetzt können wir keine weiteren Zahlen mehr hinzufügen. Dies müssen wir tun, um einen Event-Listener in jeder Phase unseres Programms zu entfernen . Wie wir gesehen haben, müssen wir auch sicherstellen, dass alle Parameter genau gleich sind. Andernfalls würde dies als ein anderes Ereignis angesehen werden. 51. HTML Collection oder NodeList?: In diesem Abschnitt haben wir verschiedene DOM-Elemente mit verschiedenen Methoden gesammelt . Wir haben DOM-Elemente nach Klassennamen, nach ID und auch mit dem Abfrageselektor ausgewählt . Als wir mehrere Elemente gleichzeitig ausgewählt haben, bekamen wir auch entweder eine HTML-Sammlung oder eine NodeList zurück. Wie bereits versprochen, werden wir uns jetzt den Unterschied zwischen den beiden ansehen. Im Allgemeinen spielt es oft keine Rolle, welche wir haben. Beide enthalten mehrere Werte in einem Array-ähnlichen Format, das wir verwenden können, wie wir möchten, wie zum Beispiel darüber schleifen. Aber wenn Sie an den Unterschieden interessiert sind, werden wir sie jetzt in diesem Video behandeln. Springe in die Akte dieser Lektion und drinnen haben wir eine ungeordnete Liste, wir machen vier verschiedene Listenelemente. Wenn Sie genau hinsehen, sehen Sie, dass die ersten drei Listen-Items die Klasse der Listen-Item haben, und der letzte hat die Klasse der aktiven. Dies wird bald wichtig werden, innerhalb der script.js. Innerhalb des Skripts werden wir einen Blick darauf werfen, wie wir den Inhalt all dieser Listenelemente abrufen, alle Selektor abfragen und Elemente nach Klassennamen abrufen können den Inhalt all dieser Listenelemente abrufen, alle Selektor abfragen . Zuerst erstellen wir eine Konstante namens statisch, und wir werden sehen warum, in nur einem Moment. Stellen Sie dies auf document.queryselectorall ein, wir werden alle unsere Listen-Items und diese Klassen abrufen. Genau wie wir es im HTML sehen, werden wir diese mit der Klasse des Listenelements abrufen. Erstellen Sie danach eine zweite Konstante namens live. Dies ist gleich dem Dokument. Ich werde die gleichen Listen-Items schnappen, aber diesmal mit getElementsByClassName. Schnappen Sie sich die Listenelemente und wir brauchen den Punkt nicht da wir bereits wissen, dass wir den Klassennamen greifen. , Wenn Sie sich von früh an nicht erinnern, wann wir den Abfrageselektor verwenden, wird dies eine Knotenliste zurückgeben, wenn Sie sich von Anfang an nicht erinnern. Stellen Sie sicher, dass dies alle Abfrageselektor ist da wir mehrere Elemente abrufen. Dies wird eine Knotenliste zurückgeben und wenn wir getElementsByClassName verwenden, wird eine HTML-Sammlung zurückgegeben. Wir können dies testen, wenn wir ein Konsolenprotokoll für den Wert statisch erstellen. Dupliziere dies und der zweite wird live sein. Aktualisieren Sie bei geöffneter Konsole. Hier ist unsere NodeList und auch unsere HTML-Sammlung. Beide haben einige Ähnlichkeiten und die erste ist, dass sie beide eine Eigentumslinie haben. Wir können das sehen, wir greifen in diesen beiden Konsolenprotokollen auf .length zu. Aktualisieren Sie und wir können sehen, dass beide drei separate Elemente haben. Eine andere Ähnlichkeit ist auch, wenn wir die Länge entfernen, können wir auch die eckigen Klammern verwenden, um auf jede Eigenschaft nach der Indexnummer zuzugreifen. Das funktioniert für statisch und auch live. Dies gibt den ausgewählten Einzelwert zurück. Neben diesen Ähnlichkeiten gibt es aber auch einige wichtige Unterschiede. Früher haben wir über etwas gesprochen, das Nodes genannt wird, und sagten, dass wir verschiedene Typen innerhalb des DOM haben können. Wir haben Elementknoten, wir haben Attributknoten und auch die Textknoten. Dies sind alles Werte, die innerhalb einer NodeList zurückgegeben werden können . Bei einer HTML-Sammlung können diese jedoch nur HTML-Elemente enthalten. Oft wird dies keine größeren Probleme verursachen, aber es kann nützlich sein, es zu wissen. Ein Hinweis auf das nächste was wir uns ansehen werden, ist der Name dieser Konstanten. Eine NodeList, die wir mit Query Selector all zurückbekommen, gibt eine statische Auflistung zurück. Eine HTML-Sammlung gilt als live. Was das bedeutet, ist, dass beim Aktualisieren des DOM nur die Live-Collection einer der Änderungen bewusst ist. Um diesen Test zu sehen, was wir tun werden, wenn wir wieder auf unsere Indexseite springen, werden wir dazu bringen, dass unser Item 4 dieselbe Klasse von Listenelementen hat. Wir werden dann sehen, welche dieser beiden Verweise auf dieselben Elemente in der Konsole aktualisiert wird . Schnell, kurz bevor wir das tun, werden wir diese eckigen Klammern auch verschieben. Manchmal, wenn wir mehrere Konsolenprotokolle wie diese haben, ist es einfacher, beide in einige geschweifte Klammern zu wickeln . Der Grund, warum wir, wenn wir uns die Konsole im Moment ansehen, nicht sehen, welcher davon welche ist. Wenn wir dies speichern und aktualisieren, verwandeln diese geschweiften Klammern diese beiden nun in Objekte, die uns einen Eigenschaftsnamen von statisch und live geben. Wir können den Unterschied zwischen diesen beiden Protokollen deutlich erkennen. Kommen wir nun zur Aufgabe zurück, das vierte Listenelement zu aktualisieren, um die Klasse des Listenelements zu haben. Zuerst müssen wir uns einen Hinweis darauf holen. Wir sagen const, und wir werden aktiv sagen, und wir setzen dies auf documents.queryselector. Wir holen uns unseren vierten Listeneintrag , der diese Klasse von aktiv hat. Dann richte ich eine Set-Timeout-Funktion ein, die diese Elemente nach einer bestimmten Zeit aktualisieren wird . Set-Timeout nimmt eine Funktion auf, die ausgeführt wird. Auch kurz nach der Funktion als zweites Argument geben wir die Zeitverzögerung ein. Nach 3.000 Millisekunden, also drei Sekunden, werden wir den Inhalt dieser Funktion ausführen. Alles, was wir hier tun müssen, ist unsere aktiven Elemente auszuwählen und die Klassenliste zu löschen, die Klassenliste zu löschen, in der wir die Add-Methode verwenden können um eine neue Klasse hinzuzufügen. Die Klasse, die Sie hinzufügen möchten, ist List-Item, machen Sie dies genauso wie die vorherigen drei Elemente. Dann können wir auch innerhalb dieser Funktion die beiden Konsolenprotokolle nach oben verschieben und sehen, was passiert, nachdem wir das Update durchgeführt haben. Speichern, laden Sie den Browser neu und geben Sie diese drei Sekunden, um die Funktion auszuführen. Die statische NodeList hat nur die drei Originalelemente, nun, die Live-Sammlung wurde aktualisiert. Dies beinhaltet auch den vierten Punkt, den wir gerade hinzugefügt haben. 52. Mini-Challenge: Entwerfen einer dunklen Modus-Schaltfläche: Willkommen am Ende dieses Abschnitts. Als kleine Mini-Herausforderung möchte ich, dass Sie weitermachen und replizieren, was wir hier auf dem Bildschirm sehen können. Wir haben etwas sehr einfaches HTML. Der entscheidende Teil ist offen obere Ecke. Ich möchte, dass Sie JavaScript verwenden, um den Klick des Benutzers auf diese Schaltfläche zu reagieren und dann zwischen dem Licht- und dem Dunkelmodus umzuschalten und dies zu tun, ist eigentlich nicht so schwierig, wie es aussieht. Alles was wir haben, wenn wir in die Startdateien gehen, ist eine [unhörbare] Indexseite mit allen Texten, genau wie Sie hier sehen, haben wir unsere Stylesheets und dann derzeit im Stylesheet haben wir den Körper -Abschnitt, der die Standardfarbe auf den Lichtmodus setzt, haben wir die helle Hintergrundfarbe und auch den dunkleren Text. Ich möchte, dass Sie dann auf ein Klick-Ereignis auf der Schaltfläche hören und dann die Klasse der Dunkelheit hinzufügen. Dies wird das Gegenteil bewirken, wir werden die hellere Farbe für den Text und auch die dunklere Hintergrundfarbe festlegen , uns mit JavaScript ausprobieren auf den Klick in der Dunkelmodus-Klasse antworten. Wenn Sie dann auch Vertrauen ausfüllen, wäre es gut, wenn Sie eine IF-Anweisung hinzufügen könnten , wie wir es in einem vorherigen Video angesehen haben. Überprüfen Sie auch, ob der Dunkelmodus derzeit aktiviert ist. Wenn dies der Fall ist, entfernen wir diese Klasse, die dann wieder in diese Klasse, die dann den Lichtzustand wechselt. Als kleiner Leitfaden, um dies über die Mozilla-Website zu unterstützen, können wir eine Methode namens enthält verwenden , und wir können diese verwenden, um zu überprüfen, ob unsere Elemente eine bestimmte Klasse enthalten. In unserem Fall werden wir alle Klassen überprüfen, die dem Körper hinzugefügt wurden , und dann prüfen wir ob er die dunkle Klasse enthält. Wenn ja, werden wir es dann entfernen wollen. uns aus, machen Sie sich keine Sorgen, wenn Sie auf dem Weg stecken bleiben, Sie können jederzeit auf dieses Video zurückgreifen, um eine Anleitung zu erhalten. zurück auf der Indexseite Gehen wir zurück auf der Indexseite zum Header-Bereich. Sie können hier sehen, dass wir die erste Schaltfläche haben , die der Mond ist, und dann haben wir direkt darunter die HTML-Entität , die für die Sonne sein wird. Lassen Sie uns jetzt mit meiner Lösung fortfahren und wenn Ihre ein bisschen anders aussieht , ist es völlig in Ordnung. Springen Sie in das Skript innerhalb des Skriptabschnitts Als Erstes müssen wir unseren Button greifen und diese in der Variablen speichern, wobei document.QuerySelector in unserer Schaltfläche angezeigt wird unseren Button greifen und diese in der Variablen speichern, . Dies ist ein Verweis auf unsere Schaltfläche , die wir gerade im HTML gesehen haben , und wir haben nur diesen einzigen Button, ist in Ordnung, wie wir es oft getan haben, wir greifen dann auf unser Button-Element zu. Wir können dann einen Ereignis-Listener hinzufügen und dies wird auf ein Klickereignis hören, dies löst eine Funktion aus und rufen wir diese Funktion ToggleDarkMode auf, die wir dann direkt oben einrichten können. Zurück zu unseren Stylesheets öffnen wir das einfach und werfen einen Blick hinein. Wie wir bereits gesehen haben, hat der Body Section den Standardlichtmodus aktiviert. Was wir dann tun können, ist diese dunkle Klasse zum Körper hinzuzufügen , die dann sowohl die Farbe als auch den Hintergrund außer Kraft sowohl die Farbe als auch den setzt, aber nur bevor wir dies tun, müssen wir den Körper tatsächlich auswählen und diesen in einer Konstante speichern, document.QuerySelector, das ist im Körper. Jetzt haben wir einen Verweis auf diesen Körper, wir können dies innerhalb unserer Funktion auswählen und wir können dies verwenden , um unsere neue dunkle Klasse hinzuzufügen, war Klassenliste, wir verwenden die Add-Methode, wo wir füge die Klasse der Dunkelheit hinzu. Jetzt, damit wir unsere Indexseite im Browser öffnen unsere Indexseite im , und dies ist unser erster Schritt. Wir haben den Lichtmodus standardmäßig aktiviert und wenn wir jetzt auf das Mondsymbol klicken, endet dies bei der Dunkelklasse und auch in den entsprechenden Farben. Dies ist der einfachere Teil, alles, was wir hier getan haben, ist eine Klasse hinzuzufügen, aber jetzt brauchen wir eine Möglichkeit , das Gegenteil herauszufinden und diese dunkle Klasse zu entfernen. Um dies zu tun, können wir eine IF-Anweisung innerhalb unserer Funktion hinzufügen , und dies wird prüfen, ob die dunkle Klasse bereits angewendet wurde , bevor wir sie direkt unten hinzufügen. Wir können die Contents-Methode verwenden , die wir uns gerade im Browser angeschaut haben. Was wir innerhalb der IF-Anweisung tun müssen, ist zu prüfen, ob der Körper diese dunkle Klasse enthält. Wir werden dies zuerst in einem Konsolenprotokoll fett überprüfen, wir können auf den Body, die Klassenliste zugreifen und dann der Contents-Methode überprüfen, ob diese dunkle Klasse angewendet wurde. Wie Sie in der Dokumentation sehen können, gibt dies einen booleschen Wert von true oder false zurück, wir können diesen dann innerhalb der IF-Anweisung verwenden. Dieses Konsolenprotokoll befindet sich ganz oben in der Funktion, wir prüfen am Anfang, ob dies zutrifft , und kurz nachdem wir dies hinzugefügt haben, prüfen wir, ob dies ganz am Ende zutrifft, speichern dies und weiter im Browser springe in die Entwicklertools, lade neu und in die Konsole. Es mag unsere leere IF-Anweisung nicht, wir werden diese einfach entfernen und aktualisieren und jetzt, wenn wir unseren Button umschalten, sehen wir zunächst den Wert false, da das erste Konsolenprotokoll oben in unserer Funktion steht aber dann ist unser zweiter wahr , weil wir diese dunkle Klasse zu unserem Körper hinzugefügt haben. Großartig, jetzt wissen wir, dass das funktioniert, wir können unsere Konsolenprotokolle entfernen und wir können dies jetzt auf unsere IF-Anweisungen anwenden. Genau wie die Protokolle prüfen wir, ob die body.classlist die Klasse von Dark enthält, ob der darin enthaltene Code ausgeführt wird und welchen Code möchten wir genau ausführen? Nun, wenn wir darüber nachdenken, haben wir versucht , den Dunkelmodus ein- und auszuschalten, der Dunkelmodus ist bereits angewendet, wir möchten diese Klasse aus dem Körper entfernen, wir können dies tun, indem wir auf den Körper zugreifen . classlist und verwenden Sie dann die remove -Methode, die unsere dunkle Klasse entfernt, speichern Sie diese und probieren Sie dies im Browser aus, der Standardwert ist der Lichtmodus. Wir haben jetzt den Dunkelmodus aber wenn wir erneut versuchen, darauf zu klicken, kehrt er noch nicht in unseren Lichtmodus zurück. Der Grund dafür liegt darin, dass das Innere unserer Funktion, was auch immer wir zu Beginn dieser Funktion tun, immer noch in der Dark-Modus-Klasse angewendet wird , und der Weg dies zu umgehen, befindet sich in unseren IF-Anweisungen. Wenn wir das Schlüsselwort return hinzufügen, wenn die IF-Anweisung wahr ist und der darin enthaltene Code ausgeführt wird, bricht diese return-Anweisung aus unserer Funktion aus, der Code unten wird nicht ausgeführt. Wenn die IF-Anweisung ausgelöst wird, wird tatsächlich nur dieser Codeblock ausgeführt. Wenn es nicht ausgelöst wird, wird dieser Abschnitt unten stattdessen ausgeführt. Probieren Sie dies noch einmal aus und aktualisieren Sie den Browser. Unser Toggle Button funktioniert jetzt korrekt. Die restlichen Schritte bestanden darin dieses Symbol in der oberen Ecke zu ändern, um zwischen Sonne und Mond zu wechseln. Wir haben bereits Zugriff auf unseren Button, sodass wir diesen innerhalb unserer Funktion auswählen können. Erstens greifen wir direkt über den Return-Anweisungen auf unsere Schaltfläche zu und können den inneren HTML-Code so ändern , dass er unserer HTML-Entität entspricht. In dieser IF-Anweisung entfernen wir den Dunkelmodus, dann möchten wir eine Referenz des Mondes angeben und ihn dann erneut auswählen. Gehe zu unserer Indexseite, nimm die Entität die der Mond ist, der koreaktiv ist, also wähle dies aus, füge diese als Zeichenfolge ein und direkt darunter können wir auch die Farbe dieser Elemente mit dem style -Eigenschaft, legen Sie die Farbe auf einen RGB-Wert von 62, 62, 62 fest. Außerhalb der IF-Anweisung möchten wir das Gegenteil tun, wenn wir beide Zeilen kopieren, fügen wir sie einfach unten in unserer Funktion hinzu. Das innere HTML wird unser Mondsymbol sein , das ist dieses im Kommentar, dann speicherst du es, fügst auch die Farbe hinzu, ich werde mich für Aqua entscheiden. Wir probieren das aus und schalten in den Dunkelmodus um. Ich schaue dann darauf, den Lichtmodus mit dem Sonnensymbol wieder zu aktivieren , klicke darauf und das wird dann den Mond wieder einsetzen. Wir können dann wieder in den Dunkelmodus wechseln. 53. Videoplayer-Projekt: Ersteller der Benutzeroberfläche (UI): He. Willkommen zurück in unserer neuen Rubrik. Dieser Abschnitt wird verwendet, um einige Praxisprojekte zu erstellen , um das, was wir bisher gelernt haben, zu verstärken. Wir werden die Dinge mit einem Videoplayer-Projekt beginnen . HTML verfügt über einen nativen Videoplayer mit Steuerelementen zum Abspielen und Anhalten des Videos. Aber wir können diese Steuerelemente auch entfernen und einen vollständig benutzerdefinierten Player erstellen. Wir tun dies mit einigen Eigenschaften, Methoden und Ereignissen, die uns zur Verfügung stehen. Genau als kurze Vorschau werden wir das erstellen und dies ist die endgültige Version. Oben haben wir unsere Videoanzeige, in der die volle Breite des Browsers ist, unten haben wir einen Fortschrittsbalken und dann haben wir die Steuerelemente unten. Wie zu erwarten, können wir auf den Play-Button klicken , damit das Video beginnt und die Dinge mit dem Fortschrittsbalken beginnt. Wir können pausieren, wenn das Video über Audio verfügt, können wir auch den Lautstärkepegel steuern und auch die Wiedergabegeschwindigkeit kann gesteuert werden. Wir können das langsamer machen, wir können die Dinge beschleunigen und wir können das Video auch überspringen , indem wir auch rückwärts und vorwärts gehen. Um die Dinge anzufangen, springen Sie in die Stars Akten. Ich muss in den neuen Bereich gehen, der Nummer 5 ist, in das Video-Player-Projekt springen. Wenn Sie die Indexseite öffnen, werden Sie sehen, dass wir einen ziemlich einfachen Starter haben. Wir haben keinen Inhalt, alles, was wir hier tun, ist, ihn mit unseren Stylesheets und auch mit unserer script.js zu verknüpfen . Das Skript ist eine leere Datei, also erstellen wir das alles selbst aber wir haben einen Vorsprung mit dem Stylesheet. Dies gibt uns nur ein grundlegendes Styling und Layout, damit wir uns auf das JavaScript konzentrieren können. Außerdem wird ein Video bereitgestellt, bei dem es sich eine MP4-Datei handelt und das ist das gleiche, das Sie gerade in der endgültigen Version gesehen haben. Sie können dies aber auch durch ein Video Ihrer Wahl ersetzen , wenn Sie es bevorzugen, alles funktioniert genau gleich. Öffnen wir zunächst unsere Indexseite im Browser, kopieren Sie den Pfad zu dieser Datei, fügen Sie diese ein und wie erwartet, gibt es noch keinen Inhalt auf dem Bildschirm. Wir beginnen innerhalb des Hauptbereichs, ich verwende die HTML-Videoelemente und dies ist ein Wrapper für den Inhalt , den wir darin platzieren werden. Wenn Sie die nativen Videoelemente oder sogar die Audio-Elemente verwendet haben , dies ziemlich vertraut, wenn nicht, ist Video nur ein Wrapper, bei dem wir die Quelle für unsere Videodateien bereitstellen. Die Quelle wird im Inneren mit den Quellelementen bereitgestellt. Dies enthält keinen Inhalt darin, daher haben wir nur das einzelne Tag. Wir müssen es nicht einfach so schließen, stattdessen verwenden wir dies, um die Quelle für unsere Dateien bereitzustellen , die wir abspielen möchten , und in unserem Fall ist es die video.mp4. Ein zweites Attribut, das wir hinzufügen können, ist der Videotyp, und in unserem Fall ist dies die Art von Video und es ist ein MP4-Format. Das Videoelement unterstützt auch andere Typen. Dies fügt jedoch auch nur einen Text hinzu , der ein Fallback-Text ist , wenn das Video nicht unterstützt wird. Dies ist heutzutage kein wirkliches Problem da der Videoplayer in allen Browsern wirklich gut unterstützt wird aber es lohnt sich, dies einzufügen, nur für alle Fälle. Angenommen, Ihr Browser unterstützt kein HTML5-Video Wenn wir dies also zunächst im Browser öffnen, aktualisieren Sie die Seite, wir haben effektiv ein Standbild, wir können darauf klicken, wir können spielen. Wir können dies tun, besteht darin, die nativen HTML5-Videosteuerelemente zu verwenden . Aktivieren Sie dies, es ist ziemlich einfach, wir gehen einfach in den Video-Wrapper und fügen die Steuerelemente hinzu. Dies ermöglicht die Standard-Video-Steuerelemente , die wir jetzt unten sehen können . Wir können das spielen. Wir haben die verstrichene Zeit, die Gesamtzeit des Videos, wir haben einen Fortschrittsbalken und wir können auch Dinge wie die Lautstärke steuern, wir können dies auf Vollbildmodus umschalten. Außerdem haben wir einige Optionen für die Wiedergabegeschwindigkeit und auch das Bild-in-Bild zu aktivieren. Natürlich ist das alles wirklich gut und es ist großartig, einen nativen Videoplayer zu haben , für unsere Situation lernt er uns nichts über JavaScript.` Was ich gerne tun würde, ist diese nativen Steuerelemente zu entfernen Entfernen des Controls Attribut und erstellen Sie diese Schaltflächen neu um mit dem Video zu interagieren, spielen Sie es mit JavaScript ab. Wo wir das tun könnten, wenn wir auf die Mozilla-Website gehen , die developer.mozilla.org ist, suchen Sie nach Videos. Das ist eine Minute hier. Im Inneren sehen wir ein Beispiel, das nichts ist, was wir bisher noch nicht gesehen haben. Wir haben den Video-Wrapper, wir haben das Controls Attribut, wir haben die Quelle für unsere Videodateien und dann die Fallback-Texte, wenn der Videoplayer nicht unterstützt wird. Wir haben verschiedene andere Attribute, wie zum Beispiel, wenn Sie möchten, dass das Video auch abgespielt wird und auch wenn wir ein bisschen weiter gehen, haben wir Zugriff auf verschiedene Veranstaltungen. Während der Wiedergabe unseres Videos werden verschiedene Ereignisse konfiguriert , z. B. wenn das Video abgespielt wird, das wenn das Video abgespielt wird, wenn es angehalten wird und auch den Videofortschritt wie die Uhrzeit aktualisiert wird. Dieses Videoelement erbt auch Methoden von einer übergeordneten API namens HTML-Medienelemente. Lassen Sie uns danach suchen, scrollen Sie dies nach oben, HTML, Medienelemente und auch diese Ereignisse, für die wir jetzt auflisten können. Dieses Medienelement hat Eigenschaften und Methoden wie die Fähigkeit, Impulse abzuspielen, wir können die Lautstärke ändern und wir können sehen wie lange die Medien gespielt haben. Wir können diese sehen, wenn wir etwas weiter nach unten scrollen, wir hätten verschiedene Eigenschaften. Wir können die Steuerelemente auch von hier aus umschalten , wenn wir wollten, wir könnten die aktuelle Uhrzeit des Videos überprüfen , während es abgespielt wird, wir können die Dauer des Videos überprüfen, wie lange es dauert, wir können eine Schleife das Video, wir können das Video auch stumm schalten, und wenn wir nach unten scrollen, haben wir auch die verschiedenen Methoden, die wir auch verwenden können. Wir haben einige nützliche Methoden wie die Möglichkeit, ein Video abzuspielen und zu pausieren , und wir werden diese in unseren Projekten nutzen. Unsere Videoelemente, die wir hier verwenden Zugriff, indem sie all diese Eigenschaften und Methoden erben. Natürlich benötigen reguläre Methoden wie ein Dif keinen Zugriff auf diese zusätzlichen Methoden, weshalb diese vererbt werden müssen. Aber warum fügen Sie diese zusätzlichen Methoden und Eigenschaften nicht einfach direkt an diese Videoelemente an? Warum müssen wir sie überhaupt erben? Wir haben irgendwelche separaten Mittel, andere Elemente können sie auch nutzen. dies ansieht, können andere Elemente wie die Audio-Elemente auch man sich dies ansieht, können andere Elemente wie die Audio-Elemente auch dieselben Methoden und Eigenschaften wie Wiedergabe und Pause verwenden , was bedeutet, dass wir diese nicht duplizieren müssen, um sie hinzuzufügen sowohl zum Video- als auch zu den Audio-Elementen. Auch dieses HTML-Medienelement ist Teil einer Sammlung verschiedener Web-APIs, die uns Zugriff auf die Möglichkeiten vieler erstaunlicher Dinge im Browser ermöglichen. In der Tat ist eine dieser aufgelisteten Web-APIs die DOM-API. Dies ist diejenige, die wir im letzten Abschnitt verwendet haben , um mit unseren DOM-Elementen zu interagieren. Zum Beispiel sind dies unter anderem die HTML-Canvas-Elemente, die verschiedene Zeichnungsfunktionen ermöglichen. Das ist genau oben. Es ermöglicht das Zeichnen im Browser und wir werden uns diesen auch später ansehen. Wir haben auch Dinge wie die Geolocation-API, damit Benutzer ihren Standort teilen können. Wir haben Drag-and-Drop, mit dem wir Elemente auf der Seite verschieben und an bestimmte Orte ablegen können. Wir werden diese Medieneigenschaften und -methoden sehr bald verwenden , aber zuerst müssen wir einige HTML-Steuerelemente erstellen, denen wir sie aktivieren werden. Lassen Sie uns diese innerhalb des Körperbereichs direkt unter dem Video erstellen . Dadurch wird ein neuer Abschnitt mit der Klasse der Steuerelemente erstellt. Dies wird nur unser CSS auslösen und lassen Sie uns diesen Abschnitt öffnen. Ganz oben beginnen wir mit einem Fortschrittsbalken, genau wie wir es in der endgültigen Version sehen, und dann erstellen wir verschiedene neue Abschnitte von oben nach unten. Von oben haben wir den Fortschrittsbalken, er befindet sich im Wertattribut, das anfangs der Wert von Null sein wird und wir werden diesen Wert aktualisieren, wenn ein Videofortschritt aktualisiert wird. Als nächstes ein div-Abschnitt , der der Wrapper für die Schaltflächen „Wiedergabe“ und „Pause“ sein wird . Die erste Schaltfläche erkennt das Spiel und da dies mit JavaScript gesteuert wird, benötigt dies eine eindeutige ID. Das kann Play sein, und damit du unser CSS eintrittst, geben wir dieser hier Klasse eine Runde. Duplizieren Sie diese und ändern Sie die ID Pause und auch den Text, geben Sie diesem einen „Speichern“ und „Aktualisieren“ den Browser. Gut. Natürlich werden diese noch nichts tun, weil wir diese mit JavaScript abrufen und alle Eigenschaften und Methoden auslösen müssen mit JavaScript abrufen und alle Eigenschaften und Methoden auslösen , die wir zuvor nachgeschlagen haben. Der nächste Abschnitt ist für das Volume, also erstellen wir direkt unter unserem letzten Div ein neues. Die Klasse von Align. Von links nach rechts erstellen wir ein Span-Element und dies wird den Lautstärkepegel reduzieren, also sagen wir die Lautstärke negativ in der Mitte und die Eingabe, die ein Bereichsschieberegler sein wird. Die ID ist gleich dem Volumen. Dann können wir auch die Mindest - und Maximalwerte für diese Eingabe steuern . Das Minimum wird gleich Null sein und das Maximum ist gleich eins. Dies verwenden wir innerhalb von JavaScript. Wir greifen den Bereich zwischen Null und Eins. Das erkannte Volume wird vom Benutzer ausgewählt. Wir können auch in verschiedenen Phasen von Null auf eins springen , und wir können dies mit diesem Schritt tun , der 0,1 entspricht. Dies bedeutet, dass jedes Mal, wenn wir diesen Kreis bewegen, dies in 0,1 Schritten springen wird, was uns im Grunde 10 Schritte gibt. Danach knapp unter einer zweiten Spanne Elemente und dieses soll die Lautstärke erhöhen. Wir sagen Volume Plus. Da sind wir. Der nächste Abschnitt bezieht sich auf diese Wiedergabegeschwindigkeiten, also werden es sich um verschiedene Tasten handeln, die von 0,5 bis zu einer doppelten Geschwindigkeit reichen. Um diese konsistente Stelle in einem Div beizubehalten, wird die erste Taste für die Wiedergabegeschwindigkeit von 0,5, die Geschwindigkeitsklasse, verwendet die Wiedergabegeschwindigkeit von 0,5, , und kopieren und fügen Sie diese dann noch dreimal ein. Dies wird für einen sein, nämlich die reguläre Wiedergabegeschwindigkeit, 1,5, und dann doppelt unsere reguläre Geschwindigkeit. Der letzte Abschnitt, wieder in einem Div, wird für unsere Rücken- und Vorwärts-Buttons sein. Letzte Schaltfläche, wir können einige HTML-Entitäten verwenden, um diese linke und die richtige Richtung zu erhalten. Entität für die erste ist nimm diese innerhalb von JavaScript mit einer eindeutigen ID, die gleich zurück ist, und auch die Klasse von Skip. Dupliziere dies, und das ist für vorwärts. Wir verwenden dieselbe Klasse, wo die Entität das ist, und dies gibt uns das Forward-Symbol. Versuchen wir es mal. „Aktualisieren“ und unsere Steuerung ist jetzt im Browser abgeschlossen. Natürlich werden sie nichts tun, weil es sich nur um normale HTML-Elemente handelt. Wir müssen diese innerhalb unseres Drehbuchs kontrollieren. Lasst uns in unser Skript springen und wir können jedes dieser Elemente mit seiner eindeutigen ID greifen . Öffnen Sie unsere Skripte und greifen nur auf jede dieser Steuerelemente zu, sondern benötigen auch einen Verweis auf unser eigentliches Video. Benötigen Sie einen Verweis auf alle Videoelemente oder den Wrapper, da diese Elemente auf alle Eigenschaften, Methoden und Ereignisse zugreifen können , die es uns ermöglichen, den Player zu steuern. Der document.QuerySelector, übergeben Sie das Video. Wir werden das Gleiche für jede unserer Kontrollen tun. Wir müssen auf unsere Fortschrittsleiste zugreifen, da wir dies mit JavaScript aktualisieren müssen, wir müssen auf das Spiel zugreifen und pausieren. Wir möchten auf die Lautstärkeeingabe, alle verschiedenen Geschwindigkeitstasten und schließlich auf die Zurück- und Vorwärtstasten zugreifen alle verschiedenen Geschwindigkeitstasten . Wir machen das von oben nach unten. Der nächste ist für den Fortschrittsbalken und wir verwenden den Abfrageselektor. Als nächstes haben wir die Play- und Pause-Buttons. Dieser ist eine ID, wir benutzen den Hash, die ID des Spiels und lassen Sie uns das duplizieren. Die zweite ist Pause. Bis zum nächsten brauchen wir das Volumen. Wir greifen den Eingabetyp mit der ID des Volumes auf, wir duplizieren diesen und ändern diesen in Volume. Der nächste, wenn wir zu unserer Index-Seite zurückkehren, wird alle vier unserer Buttons auswählen. Wir haben keine ID für jeden von diesen, es wird viel einfacher sein, wenn wir diese nach der Klasse auswählen, sodass wir die Abfrageauswahl verwenden können, um diese zu erfassen. Dann werden wir im nächsten Video feststellen , welche Schaltfläche ausgewählt wurde. Die nächste Konstante ist die Vorwärtsgeschwindigkeit und dieses Mal müssen wir alle den Abfrage-Selektor verwenden, einen Punkt verwenden, da dies eine Klasse ist, und dann sind die letzten beiden für unsere Zurück- und Vorwärtsschaltflächen. Dieses Mal sind wir wieder bei den IDs, also verwenden wir einen Hash. Dies ist für unseren Zurück-Button, duplizieren Sie dies und ändern Sie dies, um vorwärts zu sein. Gut. Wir machen gute Fortschritte mit diesem Videoplayer. Wir haben jetzt die Steuerelemente hinzugefügt. Wir haben über unsere Variablen Zugriff auf all diese Steuerelemente , und im nächsten Video können wir damit beginnen, Ereignisse, Eigenschaften und Methoden hinzuzufügen, um dann unseren Videoplayer zu steuern. 54. Videoplayer-Projekt: Video-Ereignisse, Eigenschaften und Methoden: Im vorherigen Video haben wir uns diese HTML-Medienelemente kurz angeschaut . Wir diskutierten, dass es einige Eigenschaften und Methoden hat, die wir nutzen können. Das werden wir jetzt in unserem JavaScript tun. Wenn wir nach unten scrollen, haben wir etwas, das als aktuelle Uhrzeit bezeichnet wird, und das können wir verwenden, um die aktuelle Wiedergabezeit in Sekunden zu erfassen . Geh ein bisschen weiter runter. Wir haben auch etwas, das als Dauer bezeichnet wird. Dies ist die Gesamtlänge des Videos. Wir werden das auch später in diesem Video brauchen. Etwas weiter unten nach unten sollten wir auch einige Methoden zur Verfügung haben. Hier können wir Methoden wie Play und Pause nutzen . Natürlich werden diese für unser Projekt wirklich nützlich sein . Gehen wir zu unserer script.js und implementieren diese hier. Das Spielen und die Pause ist ziemlich einfach. Alles, was wir tun müssen, ist unsere speziellen Elemente zu greifen und dann einen Event-Listener hinzuzufügen. Lassen Sie uns jetzt kostenlos klicken und dann können wir diese Methoden ausführen. Innerhalb unseres Videoplayers, innerhalb unseres HTML, haben wir diese Schaltflächen bereits zum Abspielen und Pausieren eingerichtet, und in unserem Skript haben wir bereits einen Verweis auf beide Elemente. Wir können damit beginnen, auf den Play-Button und dann auf den Event-Listener zuzugreifen . Wir hören uns auf das Klick-Event an. Sie könnten entweder eine Inline-Funktion in hier hinzufügen oder Sie können diese separat hinzufügen. Ich füge einfach diesen Inline; Funktionsnamen des Spiels hinzu. Was möchten Sie dann in dieser Funktion machen? Nun, was wir tun müssen, ist, auf unser Video zuzugreifen, das unsere Videoelemente sind, und da dies alle Eigenschaften und Methoden von den HTML-Medienelementen erbt , können wir diese Methoden verwenden, die wir uns gerade angeschaut haben. und was wir brauchen ist Spiel. Wir können das ausprobieren. Testen wir unseren Videoplayer, aktualisieren, klicken auf „Play“ und er aktualisiert das Video sofort. Natürlich funktioniert der Pause-Button noch nicht, aber wenn wir zu unserem JavaScript zurückkehren, können wir darauf zugreifen und genau dasselbe tun , indem wir einen Event-Listener hinzufügen. Für das Klickereignis führen wir eine Funktion namens Pause aus. Pause wird ziemlich gleich aussehen. Wir müssen nur auf unser Video und die Post-Methode zugreifen. Dann können wir auch testen, dass dies auch funktioniert. Spiel, das ist in Ordnung. Dann pausieren Sie, und dies wird dann unser Video pausieren. Ebenso können diese beiden Tasten auch schön sein, das Video abzuspielen und anzuhalten, wenn wir oben auf das eigentliche Video klicken. Auch einige Spieler erlauben es dir , dies mit der Leertaste zu tun. Dadurch wird eine Funktion erstellt, die Sie zwischen dem Spiel- und dem Pausestatus umschalten. Schritt eins, wir kisten unsere Funktion ein, um das Spiel umzuschalten. Der erste Teil dieser Funktion erkennt, ob das Video bereits angehalten wurde. Wenn ja, führen wir die Play-Funktion aus. Wenn nicht, machen wir weiter und halten inne. Wir erstellen hier eine if-Anweisung, die überprüft, ob das Video angehalten wird. Wie man weiß, dass das funktionieren wird. Nun, wenn wir zur Dokumentation zurückkehren und zu den Eigenschaften scrollen, haben wir Zugriff auf eine schreibgeschützte Eigenschaft namens pausiert, die dann einen wahren oder falschen Wert zurückgibt. In unserem Fall möchten wir, wenn das Video angehalten wird, das Gegenteil tun und die Wiedergabemethode ausführen. Wenn das stimmt, können wir auch aus dieser if-Anweisung zurückkehren. Wenn dies nicht stimmt, was bedeutet, dass das Video nicht angehalten wird, möchten wir das Video nicht pausieren. Damit dies funktioniert, müssen wir auf unsere Videoelemente zugreifen, die in dieser Videokonstante gespeichert sind. Der Platz ist unten unten, video.addeventlistener. Wir werden jetzt für ein Klick-Event in diesem Video auflisten und dann unsere Funktion ausführen, bei der die Wiedergabe umgeschaltet wird. Speichern Sie dies und weiter im Browser, laden Sie es erneut. Da sich dies derzeit im pausierten Zustand befindet, was innerhalb der if-Anweisungen zutrifft, sollten wir nun darauf klicken und dann das Video abspielen können . Klicken Sie darauf und das sollte funktionieren. Wir klicken dann noch einmal darauf. Der zweite Klick macht das Gegenteil und pausiert. Gut. Das funktioniert jetzt alles. Das nächste, wie bereits erwähnt, besteht darin, auch zwischen dem Spiel- und Pausestatus umzuschalten , wenn der Benutzer auf die Leertaste klickt. Wenn Sie die Leertaste drücken, ist diese an kein einzelnes Element gebunden. Was wir tun können, um auf die Leertaste zu achten , ist das Hinzufügen eines Ereignis-Listener zum eigentlichen Dokument. Schnappen wir uns das, wählen Sie Ereignis-Listener hinzufügen aus. Wir möchten uns für ein Key Down Event auflisten. Diese Taste ist gedrückt, wenn eine Taste auf der Tastatur gedrückt wird. Dies führt dann eine Funktion aus. Bevor wir unsere Toggle-Play-Funktion ausführen, denken Sie daran, dass wir darauf achten jede Taste auf dem Board gedrückt wird. Was wir tun müssen, ist zuerst zu erkennen, ob die Leertaste gedrückt wird oder eine andere Taste. Wir können dies tun, indem wir auf die Ereignisinformationen zugreifen und in die Funktion übergehen. Dann können wir einen Blick in die Veranstaltungsinformationen werfen. Speichern Sie dies, aktualisieren Sie, öffnen Sie die Entwicklertools und springen Sie in die Konsole. Was wir jetzt tun müssen, ist eine beliebige Taste hier zu drücken. Dies hat unsere Tastaturereignisse unausgelöst. Wenn wir dies öffnen, wird uns diese Code-Eigenschaft für dieses Objekt genau sagen, welche Tastaturtaste gedrückt wurde. In meinem Fall drücke ich die Leertaste, die der Code des Leerzeichens ist. Wir können jetzt innerhalb unserer Funktion darauf zugreifen. Anstelle des Konsolenprotokolls prüfen wir, ob der event.code der Zeichenfolge entspricht, die genau hier mit dieser Zeichenfolge übereinstimmt. Dann wollen wir unsere Toggle-Play-Funktion ausführen. Das ist das Ergebnis, runter und aktualisieren. Wenn wir nun die Leertaste drücken, wird unsere Funktion erneut ausgeführt und sie wird pausiert. Sie werden auch feststellen, dass wenn Sie andere Tastaturtasten drücken, diese Funktion nicht umschalten. Gut. Wenn wir nach unten gehen, ist das Nächste, was wir haben, dieser Lautstärkeregler. Wenn wir auf die Indexseite gehen, können wir sehen, dass dies durch die Eingabe mit dem Bereichstyp gesteuert wird. Der Bereich, den wir hier festgelegt haben, ist ein Minimum von Null und maximal eins. Null ist also still und Nummer eins ist die maximale Lautstärke. Wenn Sie die Folien verwenden, wird es in Schritten von 0,1 des vertikalen Verweises des Skripts mit dieser Volume-Konstante nach oben oder unten gehen in Schritten von 0,1 des vertikalen Verweises des Skripts mit dieser Volume-Konstante nach oben oder unten 0,1 des vertikalen Verweises des Skripts . Wählen Sie dies aus. Wir fügen dann einen Event-Listener hinzu. Wir möchten auf ein Eingabeereignis achten. Dies bedeutet, dass der Benutzer die Eingabe verschoben hat. Dies löst wiederum eine Funktion aus, die als Lautstärke ändern bezeichnet wird. Zurück zur Mozilla-Dokumentation. Wir können hier drinnen sehen. Wir haben auch Zugang zu einer Volume-Eigenschaft. Wir müssen sicherstellen, dass die Lautstärke genau mit unserem Bereichsschieberegler übereinstimmt. Wir können dies tun, indem wir auf unser video.volume zugreifen, das ist diese Eigenschaft genau hier, und dann möchten wir festlegen, dass dies einem neuen Wert entspricht. Dieser neue Wert ist der Wert unseres Volumenbereichs. Oben oben haben wir Zugriff auf das gesamte Volume, das ist dieser Eingang gerade hier. Dies ist nur ein Verweis auf das eigentliche Element. Wenn der Wert des Schiebereglers auf Zugriffe mit der Punktwerteigenschaft trifft . Probieren wir das mal aus. Speichern und aktualisieren. Es kann spielen. Wenn Sie nun die Lautstärke nach oben und unten schieben, wenn Sie hier einen Unterschied in den Lautstärkepegeln aufgebaut den Lautstärkepegeln haben, haben wir als Nächstes unsere vier Tasten, die verlangsamen und beschleunigen werden Wiedergabe des Videos. In unserem Skript verwenden wir den Abfrageselektor alle, um alle diese Netztasten auszuwählen und diese in der Geschwindigkeitsvariablen zu installieren. Dies bedeutet, dass wir Zugriff auf alle vier dieser Schaltflächen haben. Wir brauchen auch eine Möglichkeit, die besonderen Werte zu erfassen. Dadurch können wir ein benutzerdefiniertes Attribut namens Datengeschwindigkeit hinzufügen. Dies wird gleich dem Wert von 0.5 sein und dann kopieren wir dies einfach fügen es in unseren nächsten Button ein. Dieser ist der Wert von eins. Der dritte ist 1,5 und der letzte ist die doppelte Wiedergabegeschwindigkeit, also zwei. Dies ist nur ein benutzerdefiniertes Attribut und wir beginnen im Allgemeinen benutzerdefinierte Attribute mit diesem Datenpräfix. Wir wissen aus früheren Videos, dass wir auf die Werte eines dieser Attribute zugreifen können . Zurück zum Skript und wir können damit beginnen einen EventListener zu einer dieser Schaltflächen hinzuzufügen. dem Skript nach unten auf alle vier Schaltflächen zu, Greifen Sie mit dem Skript nach unten auf alle vier Schaltflächen zu, die Sie in der Geschwindigkeitskonstante gespeichert haben . Da wir mehrere Werte haben, wird forEach über Breite schleifen. Kundenfunktion, die für jeden unserer Schaltflächen ausgeführt wird , speichere ich einen Verweis auf jede unserer Schaltflächen innerhalb einer Variablen und greife dann auf alle Schaltflächen zu. Fügen Sie einen EventListener hinzu. Wir werden gerade für ein Klickereignis und führen dann eine Funktion namens setSelected aus. Außerdem haben wir das noch nicht erstellt, also erstellen wir dies einfach oben, setSelected wie im Funktionstext. Diese Funktion ist dafür verantwortlich, zwei Dinge zu tun. Wenn das Video derzeit nicht abgespielt wird, können wir zunächst auf eine dieser Schaltflächen klicken, aber zuerst möchten wir mit der Wiedergabe beginnen. Wir machen das genau wie oben mit video.play, geben Sie das in unsere Funktion ein. Dann möchten wir das zweite, was wir tun möchten, die jeweilige Wiedergabegeschwindigkeit auswählen. Das heißt, wir benötigen Zugriff auf unsere Veranstaltungsinformationen. Dann verwenden wir wie immer e.target, um auf die einzelnen Elemente zuzugreifen. Wir können dann getAttribute verwenden, das wir uns in der Vergangenheit angeschaut haben, um unser Kundendaten-Geschwindigkeitsattribut zu erhalten. Dies sollte uns nun Zugang zu unseren Werten geben, die zwischen 0,5 und 2 liegen. Wir brauchen auch eine Möglichkeit, diesen Wert auf unser Video festzulegen. Greifen Sie zunächst auf unser Video und dann haben wir in der Dokumentation eine andere Eigenschaftsvariable namens PlayBackRate. Greifen Sie also darauf zu. Dies entspricht dem Volumen unseres Attributs. Probieren wir das mal aus. Lade die Seite. Dann versuchen wir 0.5, was sehr langsam ist. Einzelne Geschwindigkeit, 1,5 und dann die doppelte Geschwindigkeit. Gut. Während dieses Video abgespielt wird, möchten wir auch den Fortschrittsbalken ganz oben aktualisieren . Um dies zu tun, können wir auf einige verschiedene Ereignisse zugreifen. Wir können dies tun, indem wir einige Eigenschaften nutzen , die als Dauer und CurrentTime bezeichnet werden. Im Wahrscheinlichkeitsbereich haben wir ganz oben die CurrentTime, die die äquivalente Wiedergabezeit in Sekunden ist, und auch die Dauer des Videos. Wir können diese beiden Eigenschaften verwenden, um den Wert des Fortschrittsbalkens zu einem bestimmten Zeitpunkt zu berechnen des Fortschrittsbalkens zu einem bestimmten Zeitpunkt , aber wir müssen dies auch regelmäßig tun. Leider gibt es einige Ereignisse, für die wir jetzt auflisten können , wenn wir zum Ereignisbereich scrollen. Unten unten unter Ereignissen haben wir ein Ereignis namens timeupdate, das jedes Mal ausgelöst wird, wenn das CurrentTime-Attribut aktualisiert wurde. heißt, wir können jetzt hören, wie die aktuelle Uhrzeit aktualisiert wird , und dann jedes Mal den Fortschrittsbalken neu berechnen. Schritt 1, wir erstellen eine neue Funktion die den Fortschrittsbalken tatsächlich aktualisiert, und dann rufen wir dies bei jedem Update auf. Großartige Funktion namens updateProgress. Wir könnten den Fortschrittsbalken sofort aktualisieren, aber zuerst fügen wir eine schnelle if-Anweisung hinzu, die prüfen wird, ob das Video.CurrentTime größer als der Wert von Null ist. Dies wird nur ausgeführt, wenn das Video abgespielt wurde, und wir können dann auf unsere Fortschrittsleiste zugreifen. Dies wird in der Fortschrittskonstante gespeichert. Stellen Sie den Wert ein. Dieser Wert kann berechnet werden, indem die CurrentTime durch die Dauer dividiert wird. So können Video.CurrentTime leicht Eigenschaften, die wir uns gerade angeschaut haben, teilen Sie dies durch das video.duration. Um diese Funktion ausführen zu können, müssen wir einem Videoplayer einen Ereignis-Listener hinzufügen . Greifen Sie auf das Video zu, fügen Sie EventListener hinzu und dieses Mal sind wir jetzt nicht für einen Klick aufgeführt, wir möchten jetzt eine der integrierten Methoden auflisten. Die integrierte Methode ist dieses timeupdate, das dann unsere Update-Fortschrittsfunktion aufruft. Testen wir das im Browser. Klicken Sie auf Abspielen. Sobald dies mit unserer Wiedergabe beginnt, werden wir dann die Aktualisierung unserer Fortschrittsleiste veranlassen. Pause, und das wird aufhören. Gut. Wir werden auch versuchen, die langsame Geschwindigkeit einzustellen und es verlangsamt sie. Auch die schnellste Geschwindigkeit wird dies erhöhen. Wir sind fast mit unserem Videoplayer da und das Letzte, worum wir uns kümmern müssen , sind diese Zurück- und Vorwärts-Buttons. Die Möglichkeit, diese einzurichten, besteht darin, auch die CurrentTime zu nutzen , und dann ziehen wir eine Reihe von Sekunden ab und erhöhen auch die Anzahl der Sekunden, je nachdem, auf welche Schaltfläche geklickt wurde. Wir alle haben Zugriff auf diese beiden Schaltflächen mit den Zurück- und Vorwärtskonstanten. Es kann mit der back-Variablen indem Sie einen EventListener hinzufügen. Ist jetzt für einen Klick, der dann eine Funktion ausführen wird. Wir rufen dies zurück und greifen dann auf unseren Videoplayer zu, um CurrentTime mit dem Subtraktionszuweisungsoperator zu antworten CurrentTime mit dem . Ich setze dies auf einen Wert von fünf, und dies wird fünf Sekunden abziehen und dann die CurrentTime auf gleich dem neuen Wert zurücksetzen . Dies ist einfach nur eine Abkürzung und es wäre genau das Gleiche wie Video.CurrentTime ist gleich Video.CurrentTime Take Away Five. Beide sind also genau gleich. Im Gegenteil, wir können dies einfach kopieren und einfügen. Dieses Mal müssen wir auf den Vorwärts-Button achten. Die Funktion kann auch vorwärts aufgerufen werden. Diesmal ist der einzige Unterschied, dass wir die Zeit um fünf Sekunden erhöhen möchten . Probieren wir das mal aus. Aktualisieren, was ich weiterleitet, und dies wird den Fortschrittsbalken aktualisieren. Klicken Sie zurück. Dies wird fünf Sekunden von unserer CurrentTime entfernt sein. 55. Spiel: Ablegen der Formen: Erstellen der Benutzeroberfläche: Willkommen zurück. Wir haben ein lustiges kleines Spiel um diesen Abschnitt zu beenden , der ein Shape-Drop-Spiel sein wird. Dies wird die HTML-Drag-and-Drop-API nutzen, was bedeutet, dass wir all diese Shapes erstellen können. Wir haben oben einen Abschnitt mit leeren Konturen und dann die Formen unten. Der Benutzer kann diese dann ziehen und der richtigen übereinstimmenden Position ablegen. Jede dieser Formen auf der Unterseite hat oben eine entsprechende Form. Wenn Sie diese richtig haben, erhöhen wir den Punktestand. Sie verstehen diese falsch, dieser Punktestand wird um eins abgezogen. Beginnen Sie mit diesem Video, indem Sie den gesamten HTML-Code erstellen, also im Grunde die Benutzeroberfläche. In den kommenden Videos machen wir das alles mit JavaScript zum Laufen. Dieses Projekt wird eine andere Web-API verwenden, bei der es sich um die Drag-and-Drop-API handelt. Die Drag & Drop-API gibt uns Zugriff auf verschiedene Drag-Events, die wir innerhalb von JavaScript verwenden können. Wir können darauf achten, wann ein Element angefangen hat zu ziehen. Wir können darauf achten, wann der Drag endet. Wir können uns anhören, wann ein Gegenstand hinübergezogen wird, wenn es ein bestimmtes Ziel hinterlassen hat, und auch darauf achten, wann dieser Gegenstand abgelegt wurde. Das werden wir in den kommenden Videos verwenden. Aber jetzt gehen wir zu den Projektdateien und wir beginnen innerhalb der Indexseite. Innerhalb des Shape-Drop-Spiels ist dies eine ziemlich einfache Indexseite. andere Hälfte ist unsere sehr grundlegende Struktur , die mit einer leeren script.js verknüpft ist. Lasst uns mit diesem Projekt beginnen. Ich habe bereits ein paar Stile hinzugefügt. Alles, was wir hier getan haben, ist einige Klassen hinzuzufügen , die mit verschiedenen Formen verknüpft sind. Zum Beispiel haben wir verschiedene Rechtecke, wir haben Pillen, wir haben Quadrate. Jeder davon ist in der Regel die Breite und die Höhe. Wir haben eine Hintergrundfarbe, und einige von ihnen haben auch einen Grenzradius. Wir springen in unseren HTML, wir erstellen all diese Elemente und verknüpfen diese mit den richtigen Klassen. Das Skript ist leer für die zukünftigen Videos und wir beginnen in der index.html. Springen wir hier hinein und in den Körperbereich. Der Körperabschnitt wird relativ einfach sein. Wenn wir uns das letzte Spiel ansehen, haben wir einen Headerbereich mit der Punktzahl und etwas Text und dann haben wir zwei separate Abschnitte unten. Jeder dieser Abschnitte wird eine div große Form haben. Dann verknüpfen wir diese einfach mit den Klassennamen, um jede dieser Formen und Farben bereitzustellen. Im Body-Bereich, in der Kopfzeile, die für einen ganz oberen Abschnitt sein wird. Wie Sie sehen können, ist das erste, was wir brauchen, eine Überschrift. Es ist h3. Wir sagen Punktestand, bei dem es sich nur um einen fest codierten Text handelt. Aber kurz danach brauchen wir einen dynamischen Wert. Wir können dies in einer Spanne umgeben, in die ID der Punktzahl platzieren und dann den Inhalt der Spanne später mit JavaScript ausfüllen . Eine Sache, die wir in dieser endgültigen Version nicht sehen können ist ein Button namens Play Again. Dies liegt daran, dass er gesagt hat, dass einige erst am Ende des Spiels erscheinen werden. Aber im Moment legen wir das ein und dann verstecken wir es später, um Play Again zu erkennen. Dann öffnen wir unsere Version im Browser. Kopieren Sie den Pfad zu unserem Index. Sie sollten sehen, dass alle vordefinierten Stile jetzt eingetreten sind. Das Letzte, was wir in diesem Header brauchen, ist der Text. Fügen Sie unter der Schaltfläche ein p-Element hinzu. Der Text von Drag, die bunten Formen in die passenden Löcher. Gut, nachdem wir das getan haben, gehen wir dann zu unseren beiden Abschnitten. Der obere Abschnitt wird der Drop-Bereich sein , weil wir die Shapes hier fallen gelassen haben , und der untere Teil wird der Drag-Abschnitt sein. Diese sind ziemlich gleich. Sie werden dieselben Klassennamen haben, um die Shapes zu erstellen. Wir fügen auch eine zusätzliche Klasse zum oberen Bereich hinzu. Sie haben nur den Umriss nicht die feste Hintergrundfarbe. Schauen wir uns das an. Sieht gut aus. Erstellen Sie nun direkt unter der Kopfzeile unseren ersten , der den oberen Abschnitt innerhalb eines Divs ist, und geben Sie uns eine Klasse des Drop-Abschnitts. Duplizieren Sie dies, und unser zweiter Abschnitt wird für den Drag-Bereich verwendet. Wir können alle Elemente verwenden, die Sie möchten, für jede dieser Formen, es wird nur ein leeres Element sein. Ich gehe für ein Div. Wir benötigen keinen Text oder Inhalt innerhalb des div, da wir die CSS-Klasse verwenden , um dies zu verknüpfen und das Shape auf der Seite zu erstellen. Zum Beispiel über die Klasse des Quadrats. Spar dir das auf. Square erscheint jetzt auf dem Bildschirm. Wir sehen dies, weil diese Quadratklasse innerhalb unserer styles.css, nur hier als Hintergrundfarbe und auch eine Breite und eine Höhe eingestellt hat. Dadurch wird unsere Form automatisch auf dem Bildschirm platziert. die zweite für alle übrigen Klassen Duplizieren Sie diese und die zweite für alle übrigen Klassen. Dieses ist für unser Rechteck, Nummer 3 ist für den Kreis, Nummer 4, Quadratzahl 2. Obwohl wir hier einige der gleichen Formen wie zwei verschiedene Quadrate haben , werden Sie feststellen, dass sie unterschiedlich groß sind , um das Spiel ein bisschen schwieriger zu machen . Wir haben das Quadrat Nummer 2. Der nächste ist für ovale Zahl 2 und Rechteck 2, Rechteck Nummer 3. nächste ist für Pille, Oval, dann endlich Pille Nummer 2. Speichern wir das und schauen uns unser Projekt an. Aktualisieren. Es gibt jetzt ovale Formen auf dem Bildschirm. Als nächstes müssen Sie im Grunde alle diese Abschnitte, alle Formen, kopieren und in unseren Drag-Bereich einfügen . Sogar alle unsere Formen sind jetzt vorhanden. Aber wir müssen jetzt den zweiten Abschnitt verwechseln , denn wenn wir nicht getan haben, hatten wir alle in der gleichen Reihenfolge wie oben, es wird wirklich einfach sein Spiel. Verwechsle einfach ein paar davon. Ich werde es genauso machen wie eine endgültige Version. Am Anfang haben wir das Rechteck, ist oben, das Quadrat, das dritte ist die Pille, Quadrat 2. Es spielt keine Rolle, ob deins anders oder dasselbe ist. Sie können es genau so machen, wie Sie es möchten. Oval 2, Pille Nummer 2 als nächstes, Kreis, Rechteck und dann Rechteck. Das ist völlig in Ordnung, solange es in einer anderen Reihenfolge ist als die oben genannte. Um unsere Shapes in beiden Abschnitten konsistent zu halten, haben wir denselben Klassennamen im oberen und unteren Bereich verwendet . Aber das Problem, das wir derzeit in unserer Version haben ist, dass die Formen oben diese Hintergrundfarbe haben. Was wir wollen, ist genau wie die endgültige Version, in der wir eine leere Gliederung haben. Wir können diese Formen hineinziehen, die dann die Hintergrundfarbe ausfüllen, um die Illusion zu vermitteln , dass die Form in ein Loch fallen gelassen wird. Wir können dies tun, indem wir eine zusätzliche Klasse hinzufügen. Wenn wir einen Blick in unsere Stylesheets werfen und dann nach unten gehen, haben wir diese Drop-Klasse. Dies ist sicherlich eine violette Grenze, die wir in der endgültigen Version um jede unserer Formen sehen . Wir haben auch jede Hintergrundfarbe entfernt. Jetzt können wir innerhalb unserer Indexseite im oberen Bereich diese Klasse hinzufügen, ich habe jede unserer Shapes gelöscht. Wir können dies kopieren und einfügen, wenn Sie möchten, oder Sie können dies eingeben. Orte für jede unserer Formen. Wir müssen sparen und schauen uns unsere eigene Version an. Aktualisieren. Jetzt habe ich eine leere Form, in die wir jetzt jedes dieser Elemente verschieben können. Wenn wir versuchen, eines dieser zu klicken und zu verschieben, sehen wir natürlich noch nicht die Drag-Ereignisse. Aber das ist etwas, das in den kommenden Videos aktiviert wird , wenn wir JavaScript verwenden. 56. Spiel: Ablegen der Formen: Drag and Drop-Events: Wie zu erwarten, platzieren Sie einfach normale HTML-Elemente, wie wir es hier haben. Wenn wir versuchen, auf eine dieser Shapes zu klicken und zu ziehen , passiert nichts. Machen Sie diese Shapes ziehbar, der erste Schritt besteht darin, ein Attribut namens ziehbar hinzuzufügen und diese auf „true“ festzulegen. Da wir alle wissen, dass die unteren Abschnitte ziehbar sind, fügen Sie den Drag-Abschnitt fügen Sie den Drag-Abschnitt und springen Sie dann in unsere erste Form. Stellen Sie ziehen fest, dass es einem Wert „true“ entspricht. Wenn wir nun versuchen, eines dieser Elemente zu aktualisieren und anzuklicken, können wir diese nun auf der Seite ziehen. Wir müssen immer noch Dinge wie die Drop-Zone einrichten , damit diese an Ort und Stelle fallen können. Aber im Moment ist dies unser erster Schritt, den wir unternehmen müssen. Kopieren Sie dies und fügen Sie dies in jede unserer zusätzlichen Formen ein. Ich soll das ausprobieren. Gut. Wir können sie jetzt alle bewegen, aber wir können noch nicht wirklich viel mit ihnen anfangen. Dies liegt daran, dass wir ein Setup benötigen, genau das , was wir in jeder Phase tun wollen. Die Drag & Drop-API hat verschiedene Ereignisse, auf die wir uns anhören können. Das haben wir uns zunächst im ersten Video angeschaut. Wir können diese innerhalb unserer Skripte nutzen, um in unsere scripts.js zu springen, die eine leere Datei sein sollte. Ganz oben werden wir zuerst alle unsere Knöpfe mit der Drop-Klasse zuschneiden . Auf der Indexseite haben alle obersten Abschnitte diesen Klassenabfall. Wir können query select all verwenden um alle diese Elemente zu beschneiden, und dann können wir diese Elemente durchlaufen und darauf achten, dass jedes Element den Abschnitten gelöscht wird. document.querySelectorAll wie in der Drop-Klasse, und dann können wir dies innerhalb einer Konstante namens dropzones speichern . Gut, jetzt haben wir Zugang zu all diesen Dropzones. Wir müssen diese dann durchlaufen und einen Ereignis-Listener hinzufügen, um auf einen Drop zu achten. Greifen Sie, alle Dropzones Konstante, Schleife über Warten auf jeden, wird Funktion ausführen. Dann wird jede dieser Formen an unsere Funktion übergehen. Nennen wir diese das Element, lassen Sie die Elemente fallen , damit jeder einzelne 1 einen Ereignis-Listener für das Drop-Ereignis hinzufügen können . Diese Drop-Ereignisse sind aufgrund der Drag & Drop-API aktiviert. Dies ist es, was wir hier sehen, wo ein Artikel auf das gültige Drop-Ziel abgelegt wird . Getrennt durch einen Kommunisten wird eine Funktion namens HandleDrop auslösen. Für jede Funktion direkt oben wird sie fallen. Dann ist alles, was wir vorerst tun in ein einfaches Konsolenprotokoll gelegt, zumindest funktioniert das jetzt. Der Text von fallen gelassen, also ist dies das Drop-Event, um das sich jetzt gekümmert hat. Das nächste, was wir tun müssen, ist, noch einmal auf das Drag-Event zu achten . Wir können dies mit einem Ereignis namens Drag Starts und zurück in den Abschnitt Drag-Events tun. Dies ist eine, die wir gerade hier brauchten. Dieses Ereignis wird ausgelöst, sobald der Benutzer anfängt, eines unserer ziehbaren Elemente einzuziehen . Was wir tun werden, ist, auf unser vollständiges Dokument zuzugreifen und einen Ereignis-Listener hinzuzufügen , um auf das Drag-Start-Ereignis für eines unserer Elemente zu achten . Platzieren Sie in Drag beginnt, wodurch dann eine Funktion namens HandleDragStart ausgeführt wird . Um dies direkt oben zu erstellen, handleDragStarts. Im Moment platzieren wir einfach noch einmal ein Konsolenprotokoll, überprüfen Sie, ob alles funktioniert. Drag beginnt, und dann kopieren und fügen wir diesen Abschnitt ein, den wir gerade erstellt haben, und fügen diesen unten hinzu. Der einzige Unterschied besteht darin, Drag Start durch Drag End zu ersetzen , das gleiche für das Konsolenprotokoll und auch den Ereignisnamen und die Funktion. Dies ist jetzt vorhanden, wir können dies jetzt testen, sicherstellen, dass Ihre Datei gespeichert ist und dann den Browser neu laden, in die Konsole fallen, und jetzt können wir das ausprobieren. Wenn wir auf eines unserer ziehbaren Elemente klicken, können wir diese verschieben und wir sehen das Drag-Start-Ereignis ausgelöst wurde. Lass das über eines unserer Elemente fallen. Wir sehen, dass das Ende der Schleppe ebenfalls abgefeuert ist. Aber eine Sache, die wir vermisst haben, ist dieses Konsolenprotokoll oder wurde gelöscht. Was wir erwarten würden, wenn wir über eine unserer Drop-Zonen gehen, die eine dieser Top-Shapes ist, und wir lassen Elemente überall darin fallen. Wir würden erwarten, dass dieses Konsolenprotokoll ausgelöst wird. Der Grund, warum wir nicht löschen können, ist dass das Standardverhalten darin besteht , dass Dinge standardmäßig auf eine Webseite fallen lassen . Wir müssen dieses Standardverhalten in unseren Dropzones verhindern . Wir können dies tun, indem wir auf ein Ereignis namens Dragover hören , und das bedeutet, dass wir ein Element in eine bestimmte Zone ziehen , in der wir möchten, dass es fallen gelassen wird. Ganz unten wird wieder alle unsere Dropzone durchlaufen und dann eine für jede Schleife durchführen , um auf unsere Dropzone zuzugreifen. Für jeden, das ist jede unserer leeren Formen. Führen Sie eine Funktion aus. Diese Funktion wird für jede unserer Formen einen Wert annehmen . Wir können auf den Wert zugreifen und dann einen Ereignis-Listener hinzufügen. Dieser Ereignis-Listener wird jetzt für ein Ereignis namens Dragover aufgeführt . Dies ist das Ereignis, das gerade hier ist, und es wird jedes Mal aufgerufen, wenn ein gezogenes Objekt über ein gültiges Drop-Ziel verschoben wird. Grundsätzlich möchten Sie alle Elemente in diesem oberen Bereich entfernen. Es wird dieses Ereignis namens Dragover auslösen, getrennt durch eine Komma Great Funktion namens AllowDrop, die wir dann direkt oben erstellen können. Wenn wir nun auf eines dieser Elemente klicken, ziehen Sie sie in unserer Version über eines dieser Dropszones um auf die Ereignisinformationen zuzugreifen, und dann können wir Prevent default aufrufen. Denken Sie daran, dass das Standardverhalten darin bestand , dies nicht zu löschen. Wir überschreiben jetzt, dass jetzt alle Funktionen über die Spitze aufgerufen werden. Versuchen wir es mal, speichern und aktualisieren. Ziehen Sie eine davon und lassen Sie sie dann auf ein Ziel fallen. Wir sehen jetzt den Text „gelöscht“, und unsere Funktion funktioniert jetzt korrekt. Gut. Jetzt wissen wir, dass diese Funktion funktioniert und alle übrigen auch feuern. Wir können jetzt anfangen, Dinge innerhalb unseres Spiels zu verwirklichen. Was wir tun wollen, ist nur zulassen eine bestimmte Form auf eine bestimmte Dropzone fallen gelassen wird. Zum Beispiel möchten wir nur, dass das Rechteck auf das Rechteck fallen gelassen wird und ein Kreis auf den Kreis innerhalb unserer index.html fallen gelassen wird. Eine Möglichkeit, dies zu tun, besteht darin , die bestimmten Klassen anzupassen Wenn wir also die Rechteckklasse ziehen, möchten wir nur, dass diese auf die Rechteckklasse in der Dropzone abgelegt wird . Um dies in unserer Handle-Drop-Funktion zu erreichen, müssen wir Zugriff auf unsere beiden Elemente haben . Wir müssen Zugriff auf das Element haben , das gezogen wurde, und auch auf die Elemente, über die wir fallen lassen. Wir können dann vergleichen, dass beide Klassen gleich sind. Bevor wir diesen Fall zulassen, können wir dies innerhalb unserer Funktion tun, indem auf die Ereignisinformationen zugreifen, und dies gibt uns Zugriff auf alle Elemente mit e.target. Wir können dann auf unsere Klassenliste zugreifen. Schauen wir uns das im Browser an. Aktualisieren, ziehen Sie das Rechteck und legen Sie es über eines unserer Elemente ab. Wir haben dies oben links über das Quadrat fallen gelassen, und wir erhalten eine Klassenliste zurück, die Drop und auch Square enthält. Dies ist genau das Gleiche wie das, was wir in unserem HTML sehen. Versuchen wir es noch einmal. Wir haben das Rechteck ausprobiert, und dieses funktioniert auch. So können wir auf die Klassen für die gelöschten Elemente zugreifen . Nun, wie greifen wir die Klassen für die gezogenen Elemente zu? Nun, eine gute Möglichkeit, dies zu tun, besteht darin, dies in einer Variablen oben auf unserer Seite zu speichern . Direkt über unseren Dropzones sagen wir lass selected. Wir können diesen Wert innerhalb der Funktion namens Handle Drag Start aktualisieren . Denken Sie daran, dass dies ausgelöst wird, sobald wir anfangen, auf eines unserer Elemente unten zu klicken , um den Drag-Prozess zu starten, und um dies zu tun, müssen wir auf die Ereignisinformationen zugreifen. Wir können das Konsolenprotokoll entfernen und dann unsere selektive Variable so aktualisieren , dass sie e.target entspricht. Das heißt jetzt, wenn wir zu einer Handle-Drop-Funktion oben zurückkehren , haben wir jetzt Zugriff auf diese beiden Elemente. Wir haben Zugriff auf die Klassenliste der Drop-Elemente, und oben haben wir auch Zugriff auf die gezogenen Elemente mit dieser Variable, die als ausgewählt bezeichnet wird. Jetzt können wir eine if-Anweisung erstellen, um zu prüfen, ob beide Elemente dieselben Klassen enthalten. Ich kann dies zuerst tun, indem ich auf unsere Klassenliste zugreife, f e.target.classList, dann haben wir Zugriff auf eine Methode namens contains. Was wir hier tun möchten, ist, dass wir prüfen ob das bestimmte Element, das wir ausgewählt haben , das gerade hier ist, dieselbe Klasse enthält wie dieses gerade hier. Wir können es in Selected.ClassName übergeben. Wir können den einzelnen Klassennamen für diesen verwenden, da wir wissen, dass eines dieser Drag-Elemente nur eine einzige Klasse enthalten wird. Wenn dies der Fall ist, öffnen wir die Kalibrierungen, übergeben das Konsolenprotokoll und wir können dies ändern, um den korrekten Text zu sein. Wir können dann aus dieser if-Aussage zurückkehren , wenn dies zutrifft. Wenn dies nicht stimmt, wird der Code direkt unten ausgeführt, wo wir ein Konsolenprotokoll mit dem falschen Text erstellen. Probieren wir das aus, aktualisieren Sie es einfach. Zuallererst versuchen wir das richtige Verhalten, also ein Quadrat, wir auf das richtige Quadrat ziehen, das ist dieses, und wir sehen richtig. Ziehen wir das auf ein falsches Element, wir erhalten den Text falsch. Sie können sehen, ob wir gerade hier zum letzten Spiel gehen, sobald wir eines dieser richtig bekommen haben, indem Sie diese nach rechts oder knapp oben ziehen. Diese Form wird jetzt aus dem unteren Bereich entfernt. So wie wir dies tun können, können wir innerhalb unserer if-Anweisungen jetzt das Konsolenprotokoll entfernen. Wir können die ausgewählten Elemente abrufen und sie rufen die remove -Methode auf. Testen wir dies, aktualisieren Sie es erneut und ziehen Sie ein Rechteck in ein Rechteck, und es entfernt dann das Rechteck aus dem unteren Abschnitt. Gut. Das nächste, was zu tun ist, wenn wir eine unserer Formen im richtigen Loch haben, besteht darin, sicherzustellen, dass die Hintergrundfarbe in die gleiche Farbe wie die Form geändert wird die gleiche Farbe wie die Form , die in Position gebracht wurde. Wenn wir dies einlassen, erbt es jetzt rote Hintergrundfarbe, gibt die Illusion, dass dies in eine bestimmte Form fallen gelassen wird . Nun, wie wir dies tun können, wenn wir uns unsere styles.css ansehen, der einzige Unterschied zwischen diesen beiden Formen, wie dieser und dieser, ist der einzige Unterschied zwischen diesen beiden Formen, wie dieser und dieser, dieser Hintergrund von keiner. Dies wird mit der Drop-Klasse versehen, die sich in allen oberen Abschnitten befindet. Alles, was wir tun müssen, wenn der Benutzer die richtige Form in das richtige Loch fällt , ist, diese Drop-Klasse zu entfernen und unser Skript zu öffnen. Dies ist der richtige Abschnitt innerhalb der if-Anweisung. Was wir tun werden, ist unsere Elemente mit e.target.classList zu greifen . Diese Klassenliste enthält eine Methode namens remove, wie in der Drop-Klasse, die dann diese Klasse einschließlich der Hintergrundfarbe entfernen würde diese Klasse einschließlich der Hintergrundfarbe die Hintergrundfarbe zu füllen lässt. Probieren wir das mal aus. Ziehen Sie eine dieser Shapes in das richtige Loch. Die Form wird jetzt von unten entfernt und jetzt wird die Hintergrundfarbe im Browser angezeigt. Prüfen wir, ob das in Ordnung ist, wenn wir es mit einem falschen versuchen. Gut. Das funktioniert jetzt alles gut, und wenn wir uns die endgültige Version ansehen, möchte ich zuletzt die Deckkraft ändern , wenn die Form gezogen wurde. Wenn wir das zum Beispiel wegbewegen, können wir sehen, dass sich die Form an der ursprünglichen Stelle gerade hier geändert hat, um eine hellere Farbe zu haben. Dasselbe, wenn wir rot bewegen, können wir sehen die hellere rote Form an Ort und Stelle geblieben ist, und dies lässt den Benutzer wissen, welche Form gerade zieht. Wir können dies tun, indem die Deckkraft in unserem Skript festlegen, und wir beginnen, wenn wir mit dem Drag-Start beginnen. Wählen Sie zunächst das Element mit e.targets.style.opacity aus. Nun, wir stellen die Deckkraft auf 0,5 ein. Dann können wir dies kopieren, und wir setzen es wieder auf eine innerhalb des Handle-Drag-Endes zurück. Wir brauchen kein Konsolenprotokoll mehr, fügen Sie es ein, wo wir den Wert auf eins festlegen können . Da wir nun auf die Ereignisinformationen zugreifen, müssen wir diese auch an unsere Funktion übergeben. Sparen Sie. Probieren wir das aus und in unsere Version. Sobald es beginnt, eine unserer Formen zu bewegen, ist die Form, die jetzt an Ort und Stelle bleibt , jetzt viel leichter. Dies ist die Drag-and-Drop-Funktionalität, die jetzt vorhanden ist, und im nächsten wird dieses Spiel verbessert , indem Sie den Benutzerstand hinzufügen, das Ende des Spiels bewältigen und das Spiel 2 mit unserem neu starten Schaltfläche „Wieder spielen“. 57. Spiel: Ablegen der Formen: Spielstand und Ende des Spiels: Das Spiel ist in Bezug auf das Drag-and-Drop nicht funktionsfähig. Aber um es noch besser zu machen, könnten wir die Punktzahl im Auge behalten und das Spiel auch am Ende zurücksetzen. wir zunächst damit, die Punktzahl anzugehen. Oben im Skript benötigen wir eine Variable, um dies zu speichern, also springe ich ganz nach oben und wir erstellen damit eine Variable und wir initialisieren eine Punktzahl mit dem Wert Null. Springen Sie in unserem Index auf diese Seite, wir haben bereits einen Punktebereich über der Spitze. Wir haben den Score-Text in der Überschrift der Stufe drei. Jetzt haben wir eine Spanne mit der ID der Punktzahl, die wir innerhalb unseres Skripts aktualisieren werden, und ein Ort, an dem wir die Punktzahl erhalten, wird sich innerhalb eines Handle-Drop-Abschnitts befinden. Springe hier rein. Hier prüfen wir, ob die richtige Form innerhalb der if-Anweisung fallen gelassen wurde . Wenn dies zutrifft, wird direkt über unserer Return-Anweisung auf unsere Score-Variable zugreifen und diese um den Wert eins erhöhen. Wir müssen dann unseren Span-Bereich aktualisieren, also erscheint er im Browser. Wir können dies tun, indem wir document.QuerySelector als ID des Scores greifen . Aber ich möchte den inneren Text auf unsere Score-Variable setzen. Wir können diese beiden Zeilen kopieren, gut funktionieren und dann könnten wir das Gegenteil direkt unten tun. Wenn wir das Konsolenprotokoll von falschen Stellen und Orten außerhalb der if-Anweisung entfernen , besteht der einzige Unterschied darin, dass wir eines von der Punktzahl abziehen. Versuchen wir dies, aktualisieren Sie den Browser, und wenn Sie eine der richtigen Formen ausprobieren, erhöht dies die Punktzahl. Versuchen wir es mit einer zweiten Nummer 2. Das ist alles gut und wenn wir eine falsche Form versuchen , wird dies in der Punktzahl jedes Mal vom Wert eines abgezogen. Wenn wir den Browser aktualisieren, sobald wir das Spiel beginnen, möchten wir auch sicherstellen, dass der aktuelle Punktestand auf Null eingestellt ist. Da wir bereits unseren Punktestand als Wert von Null initialisiert werden müssen. Wir können dieses Update auch kopieren und wir können dies direkt über unserer Funktion einstellen , also aktualisieren. Dies beginnt mit dem Wert Null. Versuchen Sie, ein Shape hineinzuziehen, und dies wird immer noch korrekt aktualisiert. Das nächste ist dieser Play-Button ganz oben. Wir möchten nur sicherstellen, dass dies sichtbar ist , sobald das Spiel beendet ist. Wenn wir die Seite aktualisieren, möchten wir derzeit die Schaltfläche Wiedergeben nicht sehen, da wir das Spiel bereits starten können, indem eines dieser Shapes ziehen. Wir werden außerhalb unserer Funktionen oben auf der Seite tun , wenn wir zunächst unseren Button greifen. document.querySelector übergibt eine Schaltfläche. Dies ist das Element, das wir für den Abschnitt gerade hier verwendet und dann speichern wir es innerhalb einer Konstante. Nennen wir das StartGamebTN. Zunächst müssen wir auf unsere Start-Game-Schaltfläche zugreifen und den Anzeigetyp auf „None“ einstellen . Die stileigenschaft von display gleich none. Dies wird zu Beginn des Spiels alle Buttons ausblenden. Dann erstellen wir zwei neue Funktionen. Eine Funktion wird damit umgehen, was mit dem Start des Spiels zu tun ist, und dann eine Funktion, um das Ende des Spiels zu bewältigen. Funktion und Spiel, während du diese vorerst einrichtest. Dann eine zweite Funktion direkt darunter, die für das Startspiel gedacht ist. Beginnen Sie mit der End-Game-Funktion und öffnen Sie die geschweiften Klammern und am Ende des Spiels möchten wir die Schaltfläche erneut einführen, möchten wir die Schaltfläche erneut einführen damit der Benutzer das Spiel neu starten kann. Alles, was wir tun müssen, ist diese Zeile hier zu kopieren in der wir den Anzeigetyp festlegen, und wir ersetzen dies, indem wir diese so ändern, dass sie in der Zeile ist. Dann müssen wir innerhalb der Startspielfunktion alles wieder in den ursprünglichen Zustand zurücksetzen. Dies beinhaltet die Punktzahl. Dies beinhaltet das Entfernen der Schaltfläche „Wiedergeben“ und das Verschieben dieser Shapes auch wieder in Position. Wir könnten das alles manuell machen, wenn Sie möchten, oder es ist viel einfacher, wenn wir die Seite aktualisieren, um den gleichen Effekt zu erzielen. Um dies zu tun, müssen wir auf das Window-Objekt zugreifen, dann den aktuellen Speicherort und dann eine Methode namens reload auswählen . Jetzt haben wir unsere beiden Funktionen, und tatsächlich müssen wir sie tatsächlich zur richtigen Zeit anrufen. Das Startspiel ist ziemlich einfach, wir rufen es einfach an, wenn auf die Schaltfläche „Wiedergeben“ geklickt wird. Ich habe auf diese Schaltfläche innerhalb des Startspiels verwiesen , um darauf zuzugreifen, und dann hören wir auf einen Klick, indem wir wie mit einem Klick an einem Event-Listener teilnehmen . Dann führen wir unsere Funktion aus, die das Spiel starten ist. Das Endspiel ist ein bisschen kniffliger. Wenn wir zur index.html und in den Drag-Bereich gehen. Jedes Mal ziehen wir eine davon erfolgreich in die gleiche Form, wie diese gerade hier. Das div im unteren Abschnitt wird dann verschwinden. Einer nach dem anderen bewegen wir jede dieser Formen. Das Spiel ist im Grunde vorbei, wenn der Wrapper , also der Drag-Sektion, keine untergeordneten Elemente mehr hat . Der Drag, den wir zuerst beginnen, indem unseren Drag-Abschnitt des Skripts zugreifen. Wir machen das in einem Handle Drop. Es hat Dinge raus. Wir beginnen innerhalb eines Konsolenprotokolls, in dem wir unseren Wrapper so document.QuerySelector auswählen . Dies hat die Klasse der Drag-Abschnitt und dann haben unsere Elemente Zugriff auf eine Eigenschaft durch die Anzahl der enthaltenen untergeordneten Elemente, die ChildElementCount genannt wird. Am Ende.ChildLementCount. Ich mache das nur ein bisschen größer, damit es sichtbarer ist. Speichern wir das und testen Sie dies im Browser. Öffne die Developer Tools und springe in die Konsole. Probieren wir das aus, unser Konsolenprotokoll wird am Anfang der Drop-Funktion ausgeführt. Sobald wir eine dieser Formen fallen lassen, wenn Sie dann die Funktion ausführen und uns den Wert 10 geben. Unser zweiter sollte neun sein und der Wert ist immer eins höher als der Betrag, den wir auf dem Bildschirm sehen. Derzeit haben wir den Wert von neun, wir sehen acht Elemente auf dem Bildschirm. Der Grund dafür ist, dass wir ein Konsolenprotokoll oben in der Funktion erstellen, bevor wir dieses Element tatsächlich entfernen. Effektiv ist das Spiel vorbei, wenn der aktuelle Wert eins ist. Anstelle des Konsolenprotokolls können wir dies entfernen und dies in eine if-Anweisung umwandeln eine if-Anweisung umwandeln , die geschweiften Klammern öffnen und prüfen, ob dieser Wert gleich eins ist. Wenn ja, rufen wir unsere End-Game-Funktion auf. Probieren wir das aus, was wir jetzt tun wollen, ist sicherzustellen, dass wir ans Ende des Spiels kommen. Sobald wir die letzte Form abgelegt haben, sollten wir nun die End-Game-Funktion ausführen, die sie mit Zugriff auf die Schaltfläche „Wiedergeben“ verknüpft. Aktualisieren Sie also, und ich werde jeden einzelnen davon nacheinander durchgehen und sicherstellen, dass all diese korrekt sind. Das ist einer, und wenn wir den letzten Platz fallen lassen, sehen wir jetzt, dass die Schaltfläche „Wiedergeben“ oben angezeigt wurde. Wir könnten diese Grenze auch unten entfernen, aber das ist vorerst in Ordnung. Wir können einfach annehmen, dass das funktioniert, das Spiel wieder. Die Funktion „Wiedergeben“ lädt nun unsere Seite neu und alles wieder in den ursprünglichen Zustand zurück. Wenn Sie wollen, wenn die Grenze ganz unten unten ist, können wir auch in der End-Spiel-Funktion sein, wir können den Drag-Abschnitt mit document.QuerySelector greifen. Da es sich um eine Klasse handelt, verwenden wir dot und greifen den Drag-Sektion. Aber der Stil, der Rahmen gleich dem Wert von „None“. Versuchen wir es noch einmal greifen Sie auf den Start des Spiels zu. Schließe dieses Spiel ab, indem du alle Shapes nach oben ziehst. Plus eins, da sind wir los. Unser Spiel, das jetzt auf dem Spielfeld endete, wurde nun vom Ende der Seite entfernt.