Document 2023 – Teil 6: DOM Final Project. Erweiterte und lustige Beispiele

1. Kurseinführung – Echtes Projekt: Hey, Meine lieben Schüler machen diese sehr letzte Klasse in dieser ganzen Serie über das DOM, das Document Object Model, My name's guide. Ich werde strenger sein. Und bis zu diesem Punkt haben wir ja gemacht, viele Beispiele, aber meistens Theorie. Und wer liebt die Theorie, richtig? Und das ist der Grund, warum diese Klasse sitzt herum und macht ein ganzes Projekt zusammen. Es wird super Spaß machen. Es wird viel Ihres Wissens über das DOM anwenden , das Sie über Dinge wie Event-Bubbling und Capturing testen wird. Es wird Ihre Fähigkeit testen, Elemente zum DOM hinzuzufügen. Es wird Ihre Fähigkeit, Arten von Ereignissen zu hören, Keyup-Ereignisse, Änderung der Adern zu testen , und sogar einreichen Ereignisse auf das Format wird faszinierend und gut gemacht für die Folgen entlang. Wenn Sie, wenn Sie ein Neuankömmling sind, Wenn dies Ihre allererste Klasse von Simeon, willkommen, willkommen. , gib es mal. Ich werde das HTML, das CSS, das JavaScript mit Ihnen codieren . Es spielt also keine Rolle, welches Niveau Sie haben. Ich bin ja, ich bin dein Lehrer, dieser hier, ja. Also, ohne weiteres, lasst uns in diese sehr, sehr coolen Projekte einsteigen. Und Conway, ich kann wirklich nicht. Ich habe so viel Spaß. Aber genug gesagt, lassen Sie mich jetzt zu meinem Computer gehen und spät beginnen, zusammen zu programmieren. 2. Was aufbauen wir?: Hey, ihr kommt alle zu diesem letzten Projekt, das episch sein wird und ich bin super, super aufgeregt. Und ich weiß, dass es wie ein sehr einfaches Beispiel aussehen wird. Aber ein, es verstärkt wirklich alle Dinge, die wir bisher in diesem Kurs gelernt haben und die Tricks und Fähigkeiten, die Sie in diesem Abschnitt gelernt haben, werden Sie in der Lage sein, auf Ihre ganz eigenen Websites anzuwenden. Es wird Ihnen wirklich helfen, vorwärts zu gehen. Also hoffe ich, Sie haben viel Spaß. Aber auf dem Weg hoffe ich wirklich, Ihnen sehr nützliche und praktische Methoden beizubringen. Also, was ist das letzte Projekt? Worum geht es denn? Nun, wie Sie sehen können, haben wir es unsere Shopaholics Website genannt, und es enthält nur eine Einkaufsliste. Ich weiß, es scheint sehr einfach zu sein, aber es ist eine Menge los. Also, was sind die Dinge, die wir in diesem Projekt tun werden? Wir werden erstens, wenn der Benutzer mit der Maus über jedes Element in der Liste bewegt, können Sie dort sehen, dass wir diese Grenze hervorheben, dass Lift Grenze spezifisch sein. Nur damit der Benutzer weiß, dass er darüber schwebt. Wenn er auf einen Gegenstand klickt, passiert nichts. Aber wie Sie auf der rechten Seite sehen, diese, diese Schaltfläche Löschen, wieder, wenn der Benutzer schwebt darüber, Wir sind krank, dass Styling-Eigenschaft. Und natürlich, wenn der Benutzer löscht, sagen Sie diese Pizza, wir wollen, dass aus dem Dom entfernt. Was ist mit dem Zucker und Gewürz? Ist der Benutzer löscht, dass. Wir wollen, dass das vollständig entfernt wird. Also das ist das erste, was ich möchte, dass du darüber nachdenkst, wie du es tun kannst. Es ist nicht so schwierig. Aber nochmal, wir müssen auf einige Ereignisse hören, nicht wahr? Speziell das Click-Ereignis? Das ist eine Sache, die ich will, dass du tust. Die andere Sache, welcher Fall Sie bereits erraten haben , ist, dass ich möchte, dass der Benutzer Elemente zur Liste hinzufügen kann. Wenn der Benutzer beispielsweise etwas wie Bier eingibt, fügen Sie Klicks hinzu, wird es dynamisch zur Liste hinzugefügt. Und hier, weil wir ein Formular verwenden, hören wir tatsächlich auf das Submit-Ereignis. Natürlich, wenn der Benutzer gehen und Bier aus der Liste löschen möchte, kann er dies tun. Das macht also alles intuitiv Sinn. Was ist mit diesem Kontrollkästchen „Liste ausblenden“? Will hier werden wir für eine andere Art von Ereignissen zu hören, die sich ändernden Gewinne. Und wenn der Benutzer das überprüft, dann verstecken wir einfach alles. Ich weiß, du denkst vielleicht, warum solltest du dich gegen ShoppingList verstecken wollen? Und fair genug, Das ist eine sehr gültige Frage. Denken Sie daran, dass wir Fähigkeiten lernen. - Ja. Ich versuche, Sie auszurüsten, dies in anderen Situationen zu verwenden , die für Ihre Web-App gelten. Also, wenn der Benutzer das deaktiviert, offensichtlich ist alles wieder normal, worum handelt es sich bei den Suchelementen um das Kästchen? Nun, es ermöglicht dem Benutzer, nach Artikeln in der Einkaufsliste zu suchen. Und wir werden nicht auf ein Klick-Event hören. Ja, weil es kein Häkchen gibt, werden wir auf ein Schlüssel-Event hören. Schauen wir uns ein Beispiel an. Nehmen wir an, der Benutzer hat ein paar Dinge auf der ShoppingList, wie, ich weiß nicht, Zucker, Müsli, Tag du hast. Nun, wenn der Benutzer, sagen wir Zucker, wir wollen nur die Elemente anzeigen, die mit diesem Text übereinstimmen, aber genau hinsehen. Beachten Sie, dass alle Verwendungen in diesem Fall als Kleinbuchstaben, eine gated Stola übereinstimmte mit dem Zucker unten, obwohl der Zucker unten einen Kapitalfall hat. Und ebenso, wenn der Benutzer alle Großbuchstaben eingibt, ist es immer noch Mencius, weil wir nicht möchten, dass dies Groß-/Kleinschreibung beachtet. Also bedenken Sie das. Da gehen wir hin. Sie können sehen, dass dies ein wirklich lustiges Projekt sein wird. Ich bin super, super aufgeregt. Ich hoffe, ich habe Ihnen genug von einer Art von einem hochrangigen Überblick gegeben , um zu verstehen, was wir brauchen, um mutig zu sein, im Hinterkopf zu behalten. Ich werde alles von Grund auf neu bauen. Ich werde ein HTML von Grund auf neu erstellen, das CSS. Wir werden JavaScript zusammen schneiden. Das wird episch sein, sind super, super Antwort. Wir sehen uns in der nächsten Vorlesung. 3. Einkaufsliste: So haben Sie gesehen, wie Wilderei auf Ihre aufgeregt aussehen wird , sich zu engagieren. Und wir können dieses Projekt weiter ausbauen. Wir können uns weiter verbessern. Aber was sind die Fähigkeiten, die Sie bis jetzt gelernt haben, sind wirklich, wirklich erstaunlich. Und ich möchte es Ihnen in diesem letzten Abschnitt beweisen. Also hoffe, Sie genießen es, aber Sie könnten kratzen und versteckt sein. Nun, was ist daran beteiligt, diese gesamte Struktur zu schaffen? Nun, lassen Sie mich Ihnen das jetzt zeigen. Es ist gut. Das ist gut. Und das wird noch besser sein. Denn jetzt sind wir auf dem Endprojekt. Das wird wirklich Spaß machen. Es wird sehr interaktiv sein und es wird sehr praktisch für Ihre Karriere sein , denn im Moment werden wir eine Shopping-Website bauen. Wir werden es einem Benutzer erlauben, Artikel zu einer Einkaufsliste hinzuzufügen. Löschen Sie diese Elemente aus einer Einkaufsliste, blenden Sie alle diese Elemente aus einer Einkaufsliste aus. Wir werden sogar in etwas ganz auf Schriftarten bekommen, und das ist Suchelemente in ihnen, diese Einkaufsliste. Also bin ich super, super aufgeregt. Eine Umarmung jenseits zweier. Lassen Sie mich kurz erläutern, was wir in diesem abschließenden Projekt tun werden. Adios. Bis jetzt haben wir nur Schnipsel von dem gesehen, was wir mit dem DOM tun können und nicht. Im ersten Teil meiner DOM-Serie haben wir viel über das Durchlaufen des DOM, den Zugriff auf Elemente im DOM, das Erstellen von Elementen im DOM, das Entfernen von Elementen aus dem DOM, das Klonen von Elementen in diesem erweiterten DOM Serie in diesem speziellen Kurs, den Sie gerade jetzt tun, haben wir einen Schritt weiter gegangen, nicht wahr? Wir sind wirklich in die Adern gegangen, wie sie funktionieren. Wir sind in die Gefangennahme gegen Bubbling gegangen. Wir sind in Hierarchien gegangen. Wir haben einen unglaublich langen Weg zurückgelegt. Es ist jetzt an der Zeit, alle unsere Fähigkeiten auf die Probe zu stellen von Bolding und die gesamte Web-Seite zu bekommen. Okay, das ist großartig. Was wollen wir damit tun? Nun, zuerst nennen wir es unsere Shopaholics Seiten, denn wir sind Shopaholics und wir wollen einfach den Supermarkt gehen und eine Menge Dinge kaufen. Und weil es eine Shopaholics Seite ist, brauchen wir die Möglichkeit, Lebensmittelartikel zu bearbeiten, einen Lebensmittelartikel zu finden dann Lebensmittelartikel aus unserer Liste zu löschen. Clan am besten zum General lässt mich das nach oben strecken. Was genau werden wir abdecken? Nun, erstens müssen wir im DOM navigieren. Und Sie werden sehen, dass wir das DOM ändern müssen , wenn Sie einen Kicks löschen verwenden. Wir möchten, dass ein Artikel entfernt wird. Zum Beispiel, wenn sie ein Element hinzufügen, wollten wir Todd Don bearbeiten, zum Beispiel. Wir müssen CSS manipulieren. Wir müssen mit Formularen und Ereignissen interagieren. Wir müssen JavaScript verwenden, um neue Elemente zum DOM hinzuzufügen. Wie ich bereits erwähnt habe, müssen wir Elemente aus dem DOM entfernen. Und ich möchte wirklich, dass wir auch in ein Mode-Schriftart-Thema kommen, und so suchen wir FADH Summen im DOM. Also zeige ich Ihnen, Sie können sehen, dass wir in diesem letzten Abschnitt viel tun. Lass uns aufstellen, trinken wir etwas Kaffee und lassen uns knacken. Ich seh dich jetzt. 4. Aufbau von HTML: Komm schon. Du musst sein, dass das nicht das letzte Projekt ist. Ich bin so aufgeregt. Also ja, wir gehen, ich habe eine Decke. Visual Studio-Code, nimmt Änderungen auf der linken Seite, der IDE, und auf der rechten Seite haben wir unseren Browser, nur damit wir sehen können, tun. Und bevor ich hineinspringe, geht Henry ins Detail, ich möchte nur sagen, dass wir es stückweise nähern können. Wir werden es Schritt für Schritt durchgehen, diese Vorlesung. Jetzt möchte ich nur, dass wir uns das HTML und das nächste H0 ansehen, wir können es so gestalten, dass es wirklich schön aussieht, wenn Sie die Bolding des HTML und SESAC überspringen möchten . Oh, willkommen, das zu tun. Und springen Sie einfach in die Herzen der Manipulation des DOM, aber ermutigen Sie sehr, zu folgen und ohne weiteres, lasst uns loslegen. Mal sehen, wie wir sind. Wir haben unser letztes Projekt, leere Akte. Alles, was ich tun möchte, ist, dass ich mit einer sehr einfachen HTML-Vorlage beginnen möchte. Wir können einen Kopfbereich für jetzt haben, lasst uns einfach einen Titel für alle Seiten haben. Und der Titel kann ShoppingList sein. Und unter dem Kopf, natürlich, können wir unseren Kumpel haben. Das ist wirklich das Fleisch unseres HTML wird sitzen. Nun, bevor wir es gesehen haben, ist es immer eine gute Idee, sich vorzustellen, was Sie in Ihrem Kopf wollen , denn wir müssen das auf eine sehr logische Weise strukturieren. Wie sollen wir es strukturieren, lässt mich auf eine sehr grundlegende Ebene zurückgreifen. Wir können dies später hinzufügen, aber das ist, was wir zunächst mutigen Unruhen wollen. Und der Schwitzpunkt, den ich immer gerne mache, ist, dass ich das ganze Ding innerhalb seines eigenen div-Tags lesen möchte . Und wir können dem einen Ausweis von Rapa geben. Das ist ein Ausgangspunkt. Wir möchten, dass unsere gesamte Art von Einkaufsliste innerhalb eines Eltern-div ist. Aber immer eine gute Idee, dies zu tun. Es ist immer eine gute Idee, Dinge in kühlere zu übergeordnete Elementsätze zu unterteilen. Das erste, was ich tun möchte, wenn wir jetzt mit einem Netz suchen, möchte ich drei High-Level-Waschbecken machen. Wenn Sie sich das ansehen, können Sie sehen, dass wir es irgendwie in drei Abschnitte zerlegen können. Ich möchte einen Header haben oder sie wollen diese Summe haben, eine 100 Ecke schnell in einer Form. Und schließlich möchte ich diese ganze Liste in ihrem eigenen div korrekt haben. So möchte ich es strukturieren, übertreiben, wie viele Möglichkeiten, um eine Katze zu häuten. Aber Sie können hier sehen, wir werden ein Gesamtdiv haben. Und darin können wir drei übergeordnete Elemente auf sehr hoher Ebene haben, einen Header, ein Formular und ein Diff. Macht es Sinn? Alles klar, dann lass uns das machen. Lass es uns tun. Ja. Und das div, das wir speichern, können wir eine Vorstellung von RAM geben. Also gehen wir hin. Das ist in der Flut innerhalb des div. Denken Sie daran, wir haben drei Dinge gewonnen. Wir wollen schlagen. Was wollten wir sonst noch? Wir wollten ein Formular. Und was wollten wir sonst noch? Wir wollten ein anderes div. Da gehen wir. Und das ist nur sehr hoch. Und ja, wir werden später all diese Ausweise und Dinge geben. Für jetzt, das ist, was wir haben, Lassen Sie uns denken, war versteckt. Und erinnere dich daran, wie ich versteckt werde. Es ist der grüne Abschnitt ganz oben. Und wieder möchte ich es in seinem eigenen gesamten übergeordneten Element darstellen. Dies ist schnell in einer Dosis, wird es eine ID der Seite oben geben. Dann siehst du, dass ich haha ein paar Dinge hat, nicht wahr? Gehen wir zu hassen von Shopaholics, Sache, gehen Sie zur Beschreibung, meine Einkaufsliste. Und dann ist es irgendwie den Suchabschnitt bekommen, den ich mieten werde und eine vollständige oder veraltete beginnen, dies zu strukturieren. Wir werden unser schnelles Div für die ganze Heizung und den Hals haben. Wir können nur eine ID von Seite oben haben. Und in diesem Header haben wir die Überschrift. Und es ist nur ein Hass von Hollich. Und nur damit wir es später stylen können, Lassen Sie uns eine Klasse von unter keinen Titel geben. Wie ist das? Und wie wir so weit aussehen mit literarischen. Ich habe gerade eine Überschrift und ich werde durchstöbern. Ziemlich unkompliziert und wir haben es noch einen langen Weg vor uns gesagt. Das ist also nicht das Ding darunter, dass wir eine Beschreibung haben, erinnerst du dich? Und ich werde es nur in einem Absatz-Tag lesen. Und ich werde nur meine Einkaufsliste sagen. Hey, wir gehen. Und das letzte, was ich jetzt Haider wollte, ist diese ganze Suchfunktionalität, die ziemlich fortgeschritten ist als Art von Bonus zusätzlich auf diese setzen. Und das kommen wir am Ende. So können wir eine Suchfunktion haben. Da gehen wir. Und wie ich bereits erwähnt habe, möchte ich es in einen Ordner und eine Liste einschließen, geben Sie einfach den vollständigen Namen und die ID des Suchelements an. Denn das ist es, was diese Form tun wird. Sofort. Wir können einfach die Aktion löschen und ist ein ehemaliger, Ich wollte, dass dieser Schaum eine Eingabe-Box Zeitgeschmack haben und wir können einen Platzhalter von Suchelementen haben. Und denken Sie daran, was das Suchelement oder Funktionalitäten tun wird. Es wird dem Benutzer ermöglichen, Schlüsselwörter zu suchen , um zu sehen, ob diese Schlüsselwörter oder in der Einkaufsliste. Zum Beispiel, wenn er gegen die Art und Weise, die Sie bearbeitet haben Koch ganzheitlich auf Cola und alle Elemente, die Kokosnüsse haben, werden angezeigt. Es wird also ziemlich cool, ziemlich fortgeschritten. Also gehen wir hin. Das ist unser Eingabeelement. Und andere Dinge, die ich hier hinzufügen möchte. Nur die Möglichkeit für den Benutzer, ältere darunter aufgelistet zu verstecken und anzuzeigen. Und ich könnte es an anderen Orten setzen. Weißt du was, Jimmy hat eine Such- und Ausblendfunktion gekühlt. Lassen Sie mich einfach sagen, dass das auf ihn geantwortet wird. Ja, das ist besser. Und wie ich schon sagte, wir könnten das woanders hinstellen. Ich will es nur sagen, ja, denn so sehe ich es in meinem Kopf. Und so haben wir unseren Beitrag. Das nächste, was ich will, ist diejenige, die ich ein div-Tag enthalten habe. Und wir können dem einen Ausweis der Wange geben. Und es kann ein Label für Verstecken sein. Und wenn der Benutzer darauf klickt, wollen wir uns verstecken. Die Liste bleibt alle Marine. Und offensichtlich brauchen wir jetzt die eigentliche Checkbox, nicht wahr? So kann der Eingabe-Datentyp geformt werden. Und wir können ihm auch eine ID von heiß geben. Ja. Gut gemacht. Wir haben gerade unseren Header abgeschlossen. Das wird der gesamte hohe Abschnitt sein. Mach dir keine Sorgen um die CSAs. Wir werden hineinkommen. Dann in der nächsten Vorlesung möchte ich nur, dass wir unseren HTML dehnen. Und dann werden Sie sehen, wie einfach und schnell es ist, um schnell Stile hinzuzufügen, um es schön zu machen. Also, da gehen wir, das ist unser Header. Das nächste, was wir tun wollen, ist, was würde es unser Image wieder abkühlen? Das nächste, was wir tun wollen, ist, dass wir diese Form in der Mitte beenden wollen. Richtig? Das wollen wir nom machen. Also lasst uns das Eigenkapital machen. Wie machen wir das? Nun, lassen Sie uns diese Aktion hier loswerden und geben wir diesem eine ID von AddItem, denn darum geht es in diesem Formular. Es geht darum, dass der Benutzer Elemente zur Einkaufsliste hinzufügt. Und wir brauchen ein Eingabefeld, verwenden wir nicht wird in Yen tippen. Und ich wollte Halter platzieren, nicht innerhalb des Tages Platzhalter. Was möchten Sie kaufen? Und dann, nachdem der Benutzer eingetippt hat, was sie kaufen wollen, haben wir einen Knopf namens plötzlich es einfach bearbeiten Button und wir können EDx haben. Dann gehen wir zur Formgebung. Was hier los ist. Und ich nur 72 auf das Wort der Schließung Tag. Also gehen wir hin. Ich glaube, das macht Heilige. Und jetzt sind wir auf dem letzten Abschnitt. Wieder. Das ist cool up das Bild. Und Sie können den letzten Artikel sehen, Nick, wir brauchen, ist diese Artikel zu kaufen Abschnitt. Und wir werden das auch in eine Dosis einpacken. Sie können sehen, es hat eine Überschrift und es hat all diese Listenelemente. Und dann hat es auch diese Lösch-Buttons. Und was wir tun werden, ist, dass wir lesen, uns daran erinnern können, was sie geplaudert haben, und Venendelegation. Wir gingen, um alle diese Listenelemente innerhalb eines übergeordneten Elements zu lesen. Also lasst uns es in ein übergeordnetes UL-Element einwickeln, und dann gehen wir von dort aus. Also, hier geht's. Wir haben alle div Element. Wir wollen alles aufzeichnen und geben wir ihm eine ID von Lebensmittellisten, weil das ist, worum es bei diesem div geht. Und dann haben wir auch zu hassen getan Tweaking Items zu kaufen. Aber es ist etwas kleiner als 81, tut er es. Also machen wir es zu einer H2-Heizung. Und wir können sagen, Artikel zu kaufen. Sex hat tatsächlich ein großes T und B. Und dann geben wir diesem auch eine Klasse von Skelett. Und jetzt kommen wir auf all diese Verbündeten, diese und Listen von Gegenständen. Und denken Sie daran, was ich gesagt habe, wir wollen es in eine Rapa umwickeln und wir werden das mit einem UL-Tag machen. Ziemlich unkompliziert. Und darin haben wir jede unserer Listen. Also natürlich haben wir einen Verbündeten Tag und jeder Gegenstand hat zwei Dinge verrotten. Und es hat das eigentliche Element selbst. Und dann hat es diese Art von Lösch-Button auf der rechten Seite. Und wieder gibt es viele Möglichkeiten, eine Katze zu häuten, also werde ich nur beide in einem Spannelement lesen. Diejenigen, die eine Klasse von Item haben, weil es der Gegenstand ist, mit dem wir es zu tun haben. Das gibt nur ein Wort von MLK, das Sie haben. Sie können es im Browser sehen. Und dann wird andere Spanne eine Klasse von Delete haben. Und ich werde das Wort löschen lassen. Da gehen wir. Und da haben wir es. Also haben wir unseren allerersten Artikel und alles, was wir jetzt tun müssen, ist dass wir diese LI-Elemente einfach kopieren und einfügen können. Der nächste Punkt kann Zucker und Gewürz sein. Wie sieht das aus? Wir können es nochmal kopieren. Und hier können wir etwas trinken Cola. Und wieder, das heißt BIA Alert Ei. Lassen Sie uns eine weitere hier tun und wir können Peta sagen und Peripherie sagen, Margarita. Wenn ich das richtig geschrieben habe, hoffe ich es. Das ist also unser HTML. Wenn Sie sich unseren Browser hier ansehen, sieht es schrecklich aus. In der Tat, ich werde übel, sogar wenn ich es mir anschaue. Und es wird das sein, was wir in der nächsten Vorlesung tun. Lassen Sie uns das verschönern. Dadurch sieht es wirklich funky aus. Und wenn wir zurück zu unserem Code gehen, denken Sie daran, dass wir nur unser HTML gemacht haben und es ist eine sehr, sehr einfache Seite. Wir haben alles in diesem div einer ID mit Rapa gelesen. Alles wird in d verfolgt, und dann teilen wir es einfach in drei Abschnitte auf. Verrottet. Ich kann diese COVID sogar strukturieren. Ich kann sagen, Abschnitt eins. Sagen Sie Abschnitt 2 war diese Art von Form, wo wir Elemente hinzufügen. Und dann ist der dritte und letzte Abschnitt Abschnitt Abschnitt 3. Und das bedeutet, dass die Liste dem Benutzer angezeigt wird und dem Benutzer erlaubt, Elemente aus der Liste zu löschen. Also, als eine Art Heiliger zu machen, ist es sehr einfach. Gehen Sie durch, pausieren Sie das Video, und in der nächsten Vorlesung, Lassen Sie uns das Styling beginnen und Sie werden sehen wie Spaß Signieren ist, weil Sie von so etwas gehen. Und ich werde nach etwas wirklich Erstaunlichem suchen. Wir sehen uns. 5. Aufbau des CSS: Willkommen zurück. Und Sie können sehen, dass wir genau dort abholen, wo wir aufgehört haben. Sie können sehen, wie abscheulich das aussieht. Ich sehe nur Dinge in der hinteren Ecke, nur weil es so hässlich aussieht. Aber betonen Sie nicht diesen Willen, in diesem Vortrag geht es darum, wir werden CSAC zusammen machen. Und Sie können hier sehen, ich habe gerade eine Decke CSS-Datei erstellt. Das ist alles, was ich getan habe. Alles, was wir in unserem Kopfabschnitt tun müssen, ist einen Verweis auf unsere CSS-Datei, die styles.css genannt werden. Also lasst uns hineingehen. Gehen wir zu unserer CSS-Datei, und lassen Sie uns anfangen, dies schöner zu machen. Das erste, was ich tun will, ist, dass wir ganz oben anfangen und mit unserem ganzen Körper arbeiten. Alles, was ich tun möchte, ist die Schriftfamilie zu ändern, lasst uns etwas Schönes machen oder Cambria. Wie fühlt sich das an? Es sind all diese kleinen Dinge, übrigens, das macht Ihre Website viel mehr Unterstützung der nur macht es aussehen, als wäre es Liebhaber gewesen und wurde mit k Farben erstellt. Nun, ich wollte nur schwarz halten. Schwarz. Schwarz kann sehr intensiv sein. Also lasst es uns einfach etwas aus schwarz haben. Da gehen wir. Und die Liter können ganz nah beieinander. Also will ich nur, ich werde dazu führen, dass die Eigenschaft Abstand gleich bei einem Pixel ist. Bereich. Sieht ein bisschen besser aus. Das nächste, was ich tun möchte, ist, dass Sie das H1-Tag sehen können und das H2-Tag ziemlich fett sind. Ich möchte das nur entfernen. Also lassen Sie uns einfach einen Zwilling und H2 wählen. Und lasst uns einfach einen Kommentar hier haben, damit wir uns erinnern, warum wir das entfernt haben. Und was ich tun will, ist Schriftgewichte. Sagen wir einfach, es ist normal, viel besser. Und der eine, und wir fangen an, unseren Header zu stylen. Erinnerst du dich an den großen grünen Kopf? Okay, also fangen wir an, mit Allah Hitter zu arbeiten. Und denken Sie daran, welchen Ausweis wir ihm gegeben haben. Wir haben unseren HTML. Wir können hier sehen, wir haben unsere Kopfzeile. Dann haben wir alles in einem div mit einer ID von Seite oben zerstört. Kannst du es sehen? Gehen wir also zu unseren Stilen hier und lassen Sie uns auf unser Element mit einer ID der Seite oben zugreifen. Also wissen wir jetzt, dass wir uns mit diesem gesamten Rep im Header-Abschnitt beschäftigen. Erstens möchte ich unsere Hintergrundfarbe auf 10, 7 und 11 ändern. Dann haben wir, und die Polsterung sieht schockierend aus. Also lasst uns einfach mit Polsterung umgehen. Und die vielen Möglichkeiten, wie Sie Polsterung tun können und ihm vier Werte geben und die Spitze tun, heben Sie rechts unten. Aber wenn wir ihm nur zwei Werte geben, zum Beispiel Team-Pixel und 0, die ersten Team-Pixel als Umgang mit der oberen und unteren Polsterung und eine 0 Pixel, die sich mit der linken und rechten. Das macht Sinn. Also sollten wir jetzt Lücken oben und unten sehen. Speichern Sie das. Das ist genau das, was passiert ist. Also kommen wir dorthin. Der nächste Punkt, was wir tun können, ist, warum fangen wir nicht wirklich an, den gesamten Abschluss zu beeinflussen, das gesamte div, um unseren Index zu vergessen. Und möchte nur einen Schritt zurück machen und diesen Wrapper mit dem Styling beginnen weil ich möchte, dass die Stile auf alle Elemente in diesem Wrapper angewendet werden sollen. Also lassen Sie uns es eigentlich über dieser Seite oben tun, weil es für mich mehr Sinn macht, von außen zu behandeln, die meisten Elemente werden immer detaillierter, niedriger nach unten die CSS-Seite. Also hier wollen wir auf unsere ID der rata Rechte zugreifen. Und erstens möchte ich nicht, dass das über den gesamten Bildschirm gestreckt wird. Gib ihm einfach eine Breite oder 90 Prozent. Da gehen wir. So können Sie sehen, selbst wenn wir dies ein bisschen größer machen, Sie können sehen, dass es nicht ganz so ist, dass es sich über den gesamten Bildschirm erstreckt. Da gehen wir. Einfach einfacher zu sehen, was unser Fixierer. Und ich möchte diesem eine maximale Breite geben. Und sagen wir, die maximale Breite ist 100 Pixel. Wie sieht das aus? Nicht wirklich viel zu tun, denke ich, weil unsere Bildschirme ziemlich groß, wie es ist. Und dann fangen wir an, uns ein bisschen Spielraum zu geben. Wieder, der obere und untere Rand, wollen wir 20 Pixel sein. Und dann wollen wir dem gesamten div Wrapper direkt auf erscheinen. Das ist eigentlich das, was ich von Anfang an tun wollte. Also können wir das einfach als Altar machen. Und da gehen wir. Es schien, dass auf unserer Seite Zeit hat, irgendwie lebendig zu werden. Das nächste, was ich tun will, ist, dass ich jetzt ihren wirklich coolen Box-Schatten-Rock hinzufügen möchte. Wir wollen, dass das wirklich genial aussieht. Lassen Sie uns eine Kastenschatteneigenschaft machen. Und ich möchte ihm drei Werte geben. Erstens möchte ich ihm den x-Offset-Wert geben , der ihn einfach rechts von dieser Box schieben wird. Und ich will, dass das sechs Pixel ist. Die nächste Eingabe für die Eigenschaft „Box-Schatten“ ist die Y-Offsets. Also wollte ich eigentlich der Schatten sein, der rechts von der Box ist. Und unten. Also wieder möchte ich ihm einen positiven Wert von zwei Pixeln geben. Und dann wollte ich nur einen blauen Radius haben. Ich wollte irgendwie verschwommen aussehen. Und ich möchte dem eine Fünf-Pixel-Größe geben. Und schließlich wollen wir ihm eine Farbe geben, oder? Und das gibt ihm nur eine Fünf. Wie ist diese Spalte, die gut aussieht Fahrten und Sie können sehen, es beginnt zu fallen, beginnen, geformt zu haben. Die andere Sache, die ich tun möchte, ist, dass ich eine Polsterung von 20 Pixeln haben möchte. Wie sieht das aus? Sieht besser aus. Und das letzte, was ich tun will, ist, dass ich eine Grenze haben will. Möchten Sie einen Rahmen mit einem Pixel Volumenkörper haben? Und sagen wir einfach zwei auf 12121. Und wir können es ein bisschen transparent machen, sagt es. Ich denke, das sieht gut aus. Also all diese kleinen Details, die eine Seite wirklich wow aussehen lassen. Okay, Sie können sehen, wie wir angefangen haben, unseren Header zu stylen, aber es ist nicht ganz Diagnose. Wir wollen es besser aussehen lassen. Also lasst uns auf Seite oben zugreifen und lasst uns spezifischere Kenntnisse sein. Hallo, ich bin einer. Und lassen Sie uns auch genau das Gleiche hier machen, Seite oben, aber lassen Sie uns unseren Absatz verlassen. Artikel weil x das Wort meine Einkaufsliste. Und lasst uns die Linie nehmen. Nette Dinge für den Weihnachtsmann. Sieht gut aus, endlos, verwirrt einfach mit Rand. Sagen wir mal halb AIM. Ziel. Sieht das aus? Jetzt denke ich, das sieht gut aus. Und natürlich das nächste, was ich stylen möchte, ist dieses Eingabefeld. Also das x ist das. Und ich werde aufhören, schneller durch dies ist kein Kurs auf CSS. Und ich hoffe nur, dass du ein oder zwei Dinge lernst, während du mit mir mitmachst. Um dies aufzuhören, können wir natürlich angepasst werden. Wie sieht das aus? Vielleicht ist es ein bisschen viel. Lassen Sie uns maximale Breite von 250 gehen. Wie sieht das aus? Das sieht besser aus. Marge. Oben und unten. Ich möchte etwas Marge anwenden und dann möchte ich sagen, ich möchte, dass die Anzeige ein Block ist. Sonst bedroht es das unter uns aufgeführte Fell. Deshalb schien, wenn ich Marge von modifiziert verwende, das nicht zu mögen. Deshalb wollte ich Display-Block machen. Und lassen Sie uns etwas Polsterung hinzufügen. Oh, das sieht einfach wunderschön aus, nicht wahr? Und natürlich fügen wir einen Rahmen von einem Pixel-Solid hinzu. RGB, 2.7212212210 Was bedeutet Unternehmen? Ja, das sieht schön aus. Schriftgröße, wir können sagen, ist ein M, machen Sie es einfach ein bisschen größer. Und was ist mit der Farbe? Mal sehen, wie unsere neunundvierzig, neunundvierzig , neunundvierzig. Mann, ich denke, das fängt an, wirklich scharf zu sehen. Und natürlich, das Letzte, was ich in diesem Haidt tun will, ist, dieses Kontrollkästchen zu stylen. Also, was haben wir ihm noch einmal gegeben? Gehen wir zu unserem HTML. Es gibt ein Häkchen. Als ich ein, wieder, das Kontrollkästchen würde eine ID von Shake geben. Denken Sie daran, dass wir ihm eine ID der Änderung gegeben haben. Also, wenn wir hier gehen, können wir ID der maximalen Breite gehen. Wir können es zu einem 180 Pixel geben. Nun lassen Sie uns scheinen wahr es Rand, oben und unten Team Pixel und heben und Rock. Wir wollen es zentrieren. Und dann wollen wir die Leitung ins Zentrum nehmen. Da gehen wir. So dass Ausblendliste beginnt, Gestalt zu nehmen. Aber es sind immer noch keine 100 Prozent, richtig. Warum nicht? Ja. Weißt du, was es ist? Ich möchte dieses eigentliche Kontrollkästchen tatsächlich stylen, dieses Eingabe-Kontrollkästchen mit der Idee von hohem Stil-Eigenkapital. Also lasst uns hierher gehen. Was wir tun wollen, ist, dass wir auf unsere gefälschte ID zugreifen wollen, aber jetzt wollen wir das stylen. Eigentlich nimmt Bob's mit der Vorstellung von schwer zu tun. Und ich denke, das wird mit 18 Prozent Marge von 0 funktionieren. Und es ist wahr, dass wir immer Inline-Block anzeigen. Ich denke, das sollte funktionieren, weil die Bilddaten es neben diesen Ausblendlisten platzieren. Rette ein Ego. Cool, da gehen wir. Wir werden langsam, langsam fangen einen Affen, wie sie sagen. Also, hier geht's. Wir haben unseren netten coolen als einen Header gestylt. Ich bin einer, der das Video hier nur pausieren kann, weil es ein bisschen lang wird und ich weiß, dass es manchmal schön ist, eine Pause zu machen. Wir sind einen langen Weg gekommen und in der nächsten Vorlesung werden wir einfach fertig machen. Wir werden mit den unteren zwei Abschnitten, dem Formular und dem div mit dem Gesetz seit Dubai beenden , und es sollte relativ schnell sein. Wir sehen uns in der nächsten Vorlesung. 6. Erstelle die CSS: Okay, das ist, wo wir aufgehört haben. Denken Sie daran, wir begannen Spionage Header hier und wir haben irgendwie das Aufheizen beendet, aber lassen Sie uns mit dem Verlust an diesen Abschnitten fortfahren. Hen, erinnerst du dich, wie sie aussehen? Ich möchte das eine und ein Formular auf ein rep das andere und ein div-Element umschließen. Und wir werden es einfach so gestalten, dass sie funky oder seltsam aussehen. Also lassen Sie uns seine volle fortsetzen. Und wenn Sie zur Indexdatei gehen und wir hier nach unten scrollen, können Sie sehen, dass wir ihm eine ID von Ed Element gegeben haben. Also lasst uns dieses Element greifen, Element hinzufügen, und lasst es uns manipulieren. Was ist das Ziel? Und das schien es zu sein. Okay, das ist für jetzt in Ordnung. Und ich rutschte ganz gleich typischerweise in einer Aktieneinreichung, die Besonderheiten davon, aka die tatsächliche Eingabe und diese Taste. Also lassen Sie uns tatsächlich alle Eingaben starten. Also wollen wir auf die Flut von zugreifen, und wir wollen jetzt sehr spezifisch sein. Wir möchten mit dem Styling dieses Eingabeelements beginnen. Das erste, was ich tun möchte, ist, dass ich das Eingabefeld größer machen möchte. Siehst du, wie es nicht ganz groß genug ist? Lassen Sie uns die Breite von 300 Pixeln machen. Ist es groß genug? Sollte okay sein, wir können es später immer ändern. Das nächste, was ich tun möchte, ist, dass ich das in ein Eingabefeld machen möchte. Es ist Underdog-Element. Also wollte ich die ganze Breite aufnehmen. Also würden wir xis Anzeigeblock wählen. Wie ist das? Ja, das fügt nur etwas Spielraum hinzu, um es besser aussehen zu lassen. Lasst uns etwas Polsterung geben. Was können wir sonst noch tun? Lasst uns diese Grenze ändern. Ein Pixel fest, zwei auf sechs bis 16 bis 16. Hey Leute, nur ein schönes Hellgrau. Wir wollen diese Dinge nicht im Gesicht des Benutzers. Wir wollen, dass alles sehr subtil ist. Und lassen Sie uns die Schriftgröße stachelig erhöhen. Sieht besser aus. Vielleicht sollten wir die Grenze leicht kurven. Also werde ich nur einen Grenzradius hinzufügen, zwei Pixel. Hat diesen Blick. Jetzt denke ich, es sieht aus wie eine Flasche. Ich sagte, das ist sehr, sehr subtil. Der Randradius, die ersten beiden Pixel, ist oben links auf der Tafel. Ich runde es nur so leicht ab. Und dann verloren zwei Pixel ist nur Styling. Und die untere Lift, Ich mag nur subtile Dinge in der Größe, die gerade ein bekommen Sie ein gutes Gefühl darüber, wenn Sie auf einer Seite landen und Sie wissen, und Liebe wurde in sie gesetzt. Aber wir mussten dieses Indium nicht haben. Und was können wir sonst noch tun? Box-Dimensionierung, Border-Box, wie sieht es aus? Die andere Sache, die ich tun möchte, ist, dass ich dieses linke Knie überfluten werde. Wir müssen raten. Ich möchte Elemente hinzufügen, um auf der rechten Seite zu sein. Konkret wollten wir Schaltfläche direkt hinzufügen, um auf der rechten Seite zu diesem Eingabekucksuck angezeigt werden. Okay, also kriegen wir mich, wir kriegen mich. Denk daran, warum ich heute den Fluss gegeben habe. Wenn es war, weil wir beide Elemente jagen, speziell, dass Schaltfläche hinzufügen, um auf der rechten Seite dieses Eingabefeld zu sein. Der steinige Grund, warum wir das getan haben, und jetzt müssen wir natürlich auf diesen Knopf zugreifen. Fangen wir an. Also wollen wir auf das übergeordnete Formularelement zugreifen. Innerhalb dessen. Wenn wir tatsächlich stoppen wollen Knopf den Dipol, Es ist Punkte und Manipulation der Tasten was? Das sieht Beta aus. Ich wollte einen Cursor, sich offensichtlich ändert, wenn der Benutzer darüber schwebt, damit er weiß, dass es eine Schaltfläche ist. Degas war zwei Kilowatt. Wie zeigt sich das? Und alles, was wir nicht sehen können. Das ist okay. Wir fügen einen Hintergrund und einen Hintergrund hinzu. Ich wählte gerade eine CALEA, 32. Siehe 77 D. Wie sieht das aus? Los geht's und fangen an, lebendig zu werden. Wir können uns einbetten. Wie ist das? Sieh mal? Sehen wir, wir bekommen mich, Lassen Sie uns diese Grenze ändern eine Pixel feste Serie. Oder wenn, wenn, sagen, wie funktioniert das insgesamt? Jetzt kann ich die Schriftgröße leicht erhöhen. Jetzt können wir Marge hinzufügen. Sieh es dir an, dass ein OBS aufgestellt ist. Denken Sie daran, dass wir die gleiche Marge über uns wie das Eingabefeld verwenden , und deshalb sind diese beiden aufeinander ausgerichtet. Und schließlich können wir auf unsere Artikel machen Bisektion bekommen. Dieser letzte, letzte Abschnitt. Denken Sie daran, dies ist ein offensichtliches Element, das übergeordnete div-Element ist spezifisch, und wir möchten dies jetzt lösen. Scrollen wir nach unten. Ja, und lasst uns darauf zugreifen. Was IT getan hat, geben wir es wieder und wenn wir Abschnitt 3 scrollen, eine ID der Lebensmittelliste Name, die Sie in der Lebensmittelliste mit einem H2-Tag sehen können. Und dann haben wir die UL-Elemente und alle unsere Listengegenstände, speziell Gang-Artikel, um ein Wrack innerhalb verbündeter Elemente zu kaufen. Wieder. Denk daran, dass ich sie als Erstes als Überschuss machen will, ich werde Einkaufsliste und geben wir ihm etwas Spielraum. Ja, also fängt wirklich gut aus. Und dann möchte ich genauer sein. Also möchte ich Lebensmittellisten schnappen. Aber jetzt lasst uns die UL-Elemente stylen. Erstens möchte ich diese Aufzählungspunkte entfernen. Aufzählungspunkte. Es wird eklig sein. Wie machen wir das? Nun, wir greifen nur auf die List-Style-Eigenschaft zu und wir ändern ihren Wert in keine. Tag, an dem wir Kugelpunkte haben, sind weg. Und dann möchte ich die andere Sache, die ich tun möchte, entfernen Sie die Standardauffüllung, die mit SQL-Element einhergeht. Entfernen Sie die Standardauffüllung. Entschuldigung, vielleicht bin ich spezifischer, weil das nicht das ist, was Golson CSA ist. Also versuche ich sehr schnell zu gehen. Ähm, zögern Sie nicht, diesen Vortrag zu überspringen, wenn Sie über Bord gehen. Aber dann müssen Sie die Standard-Polsterung entfernt haben. Nun, was ich tun möchte, will wieder nicht spezifisch sein, aber ich möchte anfangen, die Liste der Verbündeten zu manipulieren, XY South Lebensmittellisten-ID. Aber jetzt lasst uns auf unsere Listenelemente zugreifen. Ich möchte, dass jedes Listenelement Padding hat, die IGA. Und denken Sie daran, wie, wenn wir den Mauszeiger über jede dieser Listenelemente bewegen, wir irgendwie einen linken Rand hatten und Angeles Fotos hervorgehoben. Das will ich wissen. Sagen wir, fünf Pixel solide. Und der Truck. Ja, das sieht gut aus. Eine weitere Überschwemmung aufeinander, aber keine Sorge, wir werden jeden Spielraum haben, seit wir lebendig werden. Und dann können Sie alle aus Löschungen sehen derzeit ist nur schmeckt. Und denken Sie daran, wir wickeln sie in eine Span-Tag ist nur gehen Sie zu HTML. Wie haben wir das gemacht? Wir wickeln es in eine Span-Tag, erlaubt die Leads. Wir gaben ihm eine Klasse des Löschens. Erinnerst du dich daran? Also gerade jetzt ist es nur langweilig alten Geschmack. Was wir tun wollen, ist, dass wir es weiterverfolgen wollen. Und wie ich bereits erwähnt habe, haben wir ihm eine Klausel gegeben. Löschen. Also 50. Lass es uns schweben, oder? Ja, Oh, das ist cool. Lassen Sie uns also eine coole Hintergrundfarbe geben. Hat extra OK. Jetzt sieht es gut aus. Lassen Sie uns eine Polsterung geben und wir werden sehen, dass es im Moment schrecklich aussieht. Los geht's, es wird lebendig. Ich will die Grenze C machen. Sie können sehen, wie er sehr quetschig hinzufügt. Also lasst uns das einfach bis zum Grenzradius runden. Und lasst uns alle vier Ecken um vier Pixel runden. Hey Leute, es ist nur subtil. Ich möchte, dass sich der Cursor des Benutzers offensichtlich ändert, wenn er die Maus über die Schaltfläche setzt. Und lasst uns die ID schwarz loswerden und es zu einer weißen Farbe machen. Der Kerl. Aber jetzt, wenn sie ein Pferd über löschen verwenden, möchte ich CUDA spezifizieren, um zu ändern. Ich wollte nur eine nette Benutzererfahrung sein. Alles, was wir tun müssen, ist die überschüssige Off-Klausel von Löschungen und fast das Löschen zu schließen, wenn der Benutzer darüber schwebt. Wir wollen bestimmte Stile zu lösen beeinflussen, wollen wir beeinflussen ist diese Hintergrundfront und wir werden nur gehen 20 2020. Degas. Wie cool sieht das aus? Das ist großartig und Sie können sehen, wir alle, ich denke, wir haben es getan, wie wir es mit dem Finden der Seiten getan haben. Weißt du was? Ich erinnerte mich nur, wenn wir den Mauszeiger über diese Löschstile bewegen, aber nicht diese Grenzen. Ja, er ist mutigster. Bleiben Sie grau, wenn Sie den Mauszeiger über ein Listenelement bewegen. Also lassen Sie mich das schnell machen. das Styling Wir wollendas Stylingauf den LI-Tags fälschen, aber natürlich nur, wenn sie eine heiße war wütend. Wollen wir die Rahmenfarbe ändern, nicht wahr? Farbe da, 43, 43 Hunderte HLC. Wir bewegen uns über all das. Sieh einfach wunderschön aus. Übrigens, Ich traf gerade da 43, 43 mit der Löschfarbe, die ich treffen kann. Beide Farben sind also genau gleich. Aber sie werden eine Menge Spaß haben, nicht viel zu lernen. Und Richtlinien von Listen dauert ziemlich lange, aber ich habe das buchstäblich von Grund auf neu codiert. Jetzt hast du gesehen, wie ich es gemacht habe. Alles scheint zu arbeiten aussehen lisinopril, Büro gesehen, nichts funktioniert. Wenn wir auf Löschen klicken. Wenn wir versuchen zu sagen, ich will Zucker kaufen, MLK, was ich nicht weiß, was das ist, aber wenn wir das hinzufügen, passiert nichts. Wenn wir die Liste verstecken und nichts passiert. Und natürlich, wenn wir versuchen, sagen wir, MLK zu suchen , passiert nichts. Das ist es, worum es bei der nächsten Stufe geht. Wir setzen all unser Wissen, das wir gelernt haben, im DOM in den kommenden Vorträgen. Also viel Spaß, genieße es, und ich sehe dich. 7. Schnelle Zusammenfassung: Rohöl, Gas, und werden wir ins Herz kommen und Mittel zur Manipulation des DOM? Es wird wirklich aufregend, wirklich amped. So können Sie auf dem Bildschirm sehen und ziemlich gut aussehen, Es sieht ziemlich funky aus, aber natürlich gibt es keine Funktionalität. Bevor wir anfangen. Ich will dir nur ein paar Dinge zeigen. Ich will dir nur eine Zusammenfassung auf hoher Ebene geben. Also, wenn wir dieses Dokument hier überprüfen und wir auf die Konsole gehen, was sind einige der Dinge, die ich Sie nur über mich zusammenfassen möchte. Zoomen Sie einfach ein wenig hinein. Ja. Was also nicht lesen will, hat dich nur auf ein paar Dinge gehalten. Erstens, denken Sie daran, wie wir unseren Code strukturiert haben. Und ich möchte, dass wir beginnen, indem wir uns ansehen, wie er einen Gegenstand dynamisch zum langsamsten hatte. also einen Schritt zurück machen, denken Sie daran, wie wir unseren Code strukturiert haben. Wir haben unser UL-Element genommen und wir haben Listen unterschrieben. Und wir haben das ganze Ding innerhalb eines div-Tags gelesen. Und das div-Tag hat eine ID von Lebensmittellisten oder den Lebensmittelartikel. Werfen wir einen Blick hier. Gehen wir zu unserem Code. Lassen Sie uns Lebensmittelliste, die da draußen in diesem div ist. Denken Sie daran, dass wir es so strukturiert haben, dass, wenn wir eine UL-Elemente haben und innerhalb, dass wir alle unsere Listenelemente haben. Was für diese Fans. Und der Name jedes Lebensmittelartikels befindet sich in einem Span-Element mit einem Klassennamen des Elements. Erinnern Sie sich daran, während wir weitermachen. Ok, worauf soll ich Sie zusammenfassen? Nun, schauen wir uns ein paar Dinge an. Cookie auf hohem Niveau, nur um die zu bekommen, nur um uns zum Nachdenken zu bringen. Erstens, wie können wir auf Artikel starke Dominanz zugreifen? Erinnerst du dich an das? Ich bin sicher, was wir tun können, ist, dass wir eine Variable namens Lebensmittelartikel definieren können. Und dann können wir auf unser Dokumentobjekt im Netz zugreifen. Wir können den QuerySelector zugreifen. Und es funktioniert sehr ähnlich wie andere korrelierte Bibliotheken da draußen wie jQuery. Wir können sehr spezifisch sein. Was soll ich meine? Nehmen wir an, wir möchten auf das dritte Element in dieser Liste zugreifen. Etwas zu trinken, Cola. Wie würden wir das tun? Nun, ich zeige Ihnen, was wir tun können, ist, dass wir zuerst sehr breit sein können, indem auf das gesamte div mit einer ID der Lebensmittelliste zugreifen. Darin wollen wir auf einen Verbündeten zuzugreifen, der auf jeden dieser Elemente in der Liste hinweist. Aber in diesem Fall wollten wir das dritte Element sein, damit wir auf das dritte Kind zugreifen können. Aber jetzt wollen wir auch nicht, dass das gesamte LI-Tag an uns zurückgesendet wird. Wir brauchen nur einen, den tatsächlichen Geschmack, etwas zu trinken, EG Cola. Wir wollen diesen Lösch-Button nicht auch. So können wir sogar noch genauer sein. Wir können sagen, okay, Cool, wir wollen das Ding, das uns zurückgegeben wird. Wir wollen nur, dass es Item-Klausel ist. Denn wenn Sie sich erinnern, ob ich aufgetreten ist, können Sie hier sehen, dass die Spanne mit etwas zu trinken ET Kirk einen Klassennamen von Element-Sets hat. Alles, was wir hier getan haben. Und das sollte es sein. Wenn wir versuchen, auf unser Lebensmittelgeschäft zuzugreifen. Wie toll ist es, dass wir zu uns zurückkehren? Das befreite Element, wir gingen Kuckuck. Ok. Wie werden wir zu uns zurückgebracht? Alle Listenelemente. Während Sie vielleicht denken, okay, lassen Sie uns eine Variable definieren, die Lebensmittelartikel genannt wird. Es ist beendet Dokument den Abfrage-Selektor. Und sagen wir, wir wollen alle Listenelemente. Wieder können wir auf unsere gesamte Rapa-Lebensmittelliste zugreifen und wir können einfach sagen, hören, geben Sie uns den Verbündeten. Oh, oh, natürlich, Lebensmittelartikel. Ich wollte ein ACI-Lebensmittelgeschäft. Und wenn wir das ausführen und versuchen, andere zu trösten, passiert etwas Seltsames. Y's geben uns die Konsole Menge Lebensmittelartikel. Ich wollte, dass es Gegenstände sind. Und wenn wir das tun, werden wir nur die erste Verbündete Technologie bekommen. Da denken Sie daran, dass die Abfrageauswahl ein Element aus dem DOM zurückgibt. Wie geben wir alle Elemente im DOM zurück? Lasst uns das schreiben, klären Sie das einfach. Damit er anfangen kann. Wieder. Das ist richtig. Wir können die Abfrage Selektor alle konkret verwenden. Also lassen Sie uns gehen LET Lebensmittelartikel gleich Dokument Abfrage Selektor alle. Und ja, wir können es versuchen. Wir können auf unsere Lebensmittelliste zugreifen, alle LI-Tags. Und diese Konsole meldet sich das ab. Und sie gehen wir, wir bekommen eine Knotenliste zurück zu uns. Und wenn wir diese Knotenliste öffnen, bekommen wir jeden einzelnen unserer Texte. Aber es ist unauffällig. Erinnern Sie sich, wie wir auf Elemente in der Knotenliste zugreifen können? Nun, Sie können darauf wie ein normales Array zugreifen. Also, wenn Sie den ersten Verbündeten wollen, können wir einfach die Klammern machen und 0, das wird uns das erste LI-Tag geben. Natürlich, wenn Sie die zweite wollen, können Sie die Nummer 1 setzen und das wird Ihnen die zweite geben, und so weiter und so weiter. Ziemlich unkompliziert. Und wie können wir es nennen, Zyklus durch all diese Elemente dynamisch. Wir können die für jede Methode verwenden. Und wir haben all das Unbekannte durchgemacht. Ich gebe Ihnen nur eine kurze Zusammenfassung. Aber warum können wir die ForEach-Methode verwenden? Es wird, weil es eine Knotenliste ist. Wenn wir andere Zugriffsmethoden wie Abfrage-Selektor verwenden, haben wir keinen Zugriff auf die für jeden. Ich meine, wenn wir bestimmte verwenden, die eine ArrayList an uns zurückgeben, wie zum Beispiel Abfrageselektor. Also, wie funktioniert das? Nun, wir können auf unsere Lebensmittel zugreifen. Wir können auf die für jede Methode zugreifen. Dann können wir für jeden Artikel sagen, dass wir eine bestimmte Funktion ausführen möchten. Und unter nein, nehmen wir an, wir wollen auf das Element zugreifen und wir wollen seine Takes ändern contin Eigenschaft zu sein. Glaubst du, das klappt? Die haka-Artikel, die so eine Möglichkeit ist, können wir durch alle Elemente in der Liste iterieren und aufhören, seinen Inhalt zu manipulieren. Etwas anderes, das wir tun können, wenn Sie etwas nicht überschreiben wollen , ist, dass Sie es je anhängen können sie bereits. Also, was wir tun können, zum Beispiel, ist unsere Lebensmittelliste Artikel nehmen, die foreach. Und anstatt den gesamten Textinhalt etwas Neues zuzuweisen, können wir es einfach anhängen und Ihre gemalten, indem Sie das Addition-Symbol einschließen. Und ja, wir können einfach sagen, dass das ein Lebensmittelartikel ist, der sieht, ob das funktioniert. Hand. Da gehen wir. Jetzt haben wir gerade etwas Neues hinzugefügt. Wir können weiterhin mit diesem spielen und unendlich sie und macht wirklich Spaß. Ich wollte Ihnen nur eine sehr hohe Art von Zusammenfassung oder Zusammenfassung dessen geben , was wir in früheren Vorträgen getan haben. Die andere Sache, kurz bevor ich diesen Vortrag beende, ist, gehen wir zu den Elementen hier. Lassen Sie uns das alles loswerden. Und denken Sie daran, dass wir mit all diesen Dingen arbeiten. Wir arbeiten mit Knoten. Denken Sie daran, alles ist so ziemlich ein Knoten im DOM. Wir haben Elementknoten und Elementnase oder sehr unkompliziert, es ist wie dieses div hier als Elementnote. Aber wir haben nicht nur Elementknoten. Dewey, wir haben eine ganze Reihe von verschiedenen Typen. Wir haben häufig Knoten, zum Beispiel können Sie sehen ja, Abschnitt 1, Abschnitt 2, 6 und 3. Das sind Kommentare, Notizen. Wir haben nicht nur gemeinsame Knoten sind Dewey. Und wir haben eine Menge Dinge. Wir haben Geschmacksknoten. Wir öffnen eine dieser Dosis, wir öffnen die URL. Und jetzt nehme ich, ich meine, wir gingen die Leiter jetzt hinauf. Es ist also nicht genau das gleiche wie unser HTML. Aber diese braucht es Knoten über Lebensmittelartikel, wie es zur Kenntnis nimmt, wir haben nicht nur Takes Knoten, wir haben auch ein Attribut Knoten. Zum Beispiel hat dieses H2-Tag ein Attribut mit einer Eigenschaft namens Klausel, und wir haben ihm einen Wert von title gegeben. Also, da gehst du. Ich hoffe, das ist Tokyo Gedächtnis. Ich hoffe, das macht Heilige. Aber genug für mich. Ich habe das Gefühl, dass es an der Zeit ist, in den unheimlichen Aspekt der Arbeit zu kommen. Also bin ich super, super aufgeregt und sehe dich in der nächsten Vorlesung. 8. DOM-Elemente entfernen – die alte Art: Also reden wir über Codierung. Alles, was ich getan habe, ist, dass ich eine JavaScript-Datei namens app.js hinzugefügt habe. Wenn wir also unseren Index haben und nach unten gehen, müssen wir das Skript hinzufügen, nicht wahr? Und wir haben es app.js genannt. Also gehen wir hin. Und ich habe gerade eine leere Punkt-js-Datei im selben Verzeichnis erstellt , ist, dass wir uns den Index in der styles.css hinzufügen. Also, was ich getan habe und das erste, was ich tun möchte, ist, dass wir das auf eine stückweise Art und Weise nehmen. Ich möchte, dass wir jedes Stück anpacken, das Erdöl. Das erste, was ich tun möchte, ist, dass wir in der Lage sein, einen Artikel aus der Liste zu löschen. Wenn wir zu unserem Browser gehen, können wir gehen, Sie können sehen, wir haben diese Lösch-Buttons. Und natürlich passiert im Moment, wenn wir darauf klicken, nichts. Also mal sehen, was das zuerst ist, wie würden wir es tun? Erstens möchte ich Ihnen den ineffizienten Weg zeigen, dies zu tun. Und dann möchte ich, dass Sie das Video pausieren und ich möchte, dass Sie versuchen Ereignis-Bubbling und sogar Delegation zu nutzen. Aber zuerst gehen wir mit dem ineffizienten Ansatz , den Sie möglicherweise viel im Entwicklercode sehen. Deswegen wollte ich, dass Sie sich dessen bewusst sind. Also ja, wir alle zurück und ich werde sagen, wie wir das machen können. Wir werden zuerst, ich möchte unseren Code beschriften, so dass es nur hier zum Stillstand gekommen ist und Elemente löschen, verrotten und ich werde nur diese SAM-Links kopieren. Da gehen wir. Und eine Möglichkeit, dies zu tun, besteht darin, jedem dieser Schaltflächen Ereignis-Listener hinzuzufügen. Der erste Schritt wäre also, all diese Knöpfe zu greifen, oder? Und wir können das tun, indem wir eine Variable namens Lessons definieren. Sofortige Vergrößerung, Ja, damit Sie diese Beta sehen können, wollen wir auf die Dokumente zugreifen, wir haben den Abfrage-Selektor. Alle auf dem Abfrage-Selektor wollen wir die äußere div halten Lebensmittelliste greifen und auf Namen wollen wir jede von ihnen greifen. Ich eliminiere das. Denken Sie daran, dass erfordert eine Kosten für das Löschen. Es hat also eine Klasse von Eliten. Und wenn wir das auf dem Bildschirm ausloggen, lasst uns voran gehen. Und wenn wir dies überprüfen, würde auf die Konsole gehen. Wir sollten eine Knotenliste sehen und ich werde Modus-Liste ist hier und ich sprach vier Elemente, spielt keine Rolle. Und es ist jeder dieser Knöpfe. Also, hier geht's. Wir haben Zugang zu den Knöpfen. Gehen wir zurück zu 6 Datentyp. Und der ineffiziente Weg der alten Schule besteht darin, jede Schaltfläche zu durchlaufen und Ereignis-Listener hinzuzufügen. Wie würden wir das tun? Nun, sogar in der Zusammenfassung Video gezeigt, dass wir für jede macht es zugreifen konnten. Also lasst uns das machen. Lassen Sie uns auf unsere Schaltflächen Variable zugreifen. Und dann können wir auf diese ForEach-Methode zugreifen. Wir können jeden Knopf in der für jede Schleife greifen, und dann können wir Dinge tun, um es. Und in diesem Fall wollen wir diesen Knopf greifen und wir wollen alle gerade jetzt gemacht hinzufügen, die Adern, auf die wir hören wollen und jeder Knopf ist ein Klick-Ereignis. Und dann wollen wir natürlich unseren Handler ausführen. Denken Sie daran, dass Hand Gates ein Ereignisobjekt gegeben , das wir in einer Variablen alten II definieren. Übrigens führe ich nur Olivin Hand direkt in dieser Funktion aus. Was passiert nun, wenn der Benutzer auf diese Schaltfläche klickt? Dies wollen wir zu den Eltern navigieren nicht twittern, und dann möchten wir diesen Zeitraum löschen. Wir wollen also eine neue Variable definieren. Wir wollen eine Variable namens ally definieren, zum Beispiel, weil sie in einem Verbündeten Element gehalten wird. Und damit verbündete Elemente wird das Ziel sein. Bringt die Schaltfläche, auf die wir gerade geklickt haben, und es wird seine übergeordneten Elemente sein. Macht das Sinn? Denk daran, was wir getan haben. Die Benutzer haben auf diese Schaltfläche geklickt. Wir haben jetzt zu dem Verbündeten Tag navigiert, das zu dünn ist. Und sagen wir, jetzt wollen wir die alte Schule entfernen Kind und Methode verwenden. Wir machen das. Denken Sie daran, in diesem Kurs haben wir uns gesehen, naja, es ist irgendwie seltsam, weil wir zu der LI gelangen, die wir nicht auf seine Eltern zugreifen mussten und dann sein Kind entfernen mussten, um sich selbst zu entfernen. Ich weiß, es hört sich komisch an. Also müssen wir auf unsere Variable zugreifen, wir müssen dann auf sein übergeordnetes Element zugreifen, und dann können wir Kreide entfernen. Und natürlich ist das Kind, das wir entfernen wollen, selbst. Mal sehen, ob dieser Code funktioniert, bevor wir anfangen, ihn zu verbessern. Lassen Sie uns den Browser runter gehen und es versucht, Kinderklasse zu verschieben. Rauchableitend Was habe ich falsch gemacht? Gehen wir zur Konsole oben. Entfernte untergeordnete Elemente sind keine Funktion. Entfernte untergeordnete Elemente sind keine Funktion. Warum? Sollte ein Großbuchstabe C sein? Kühlt, hier ist der JavaScript-Parser quälend Knie genau. Also das Ego, wenn ein Kapital C setzen, das funktionieren sollte, Astronomie bewegt Zucker und Gewürz und es ist entfernt. Wie cool etwas zu trinken, Pizza und MLK. Tag gehen wir, wenn alles gelöscht. Wie genial. Aber da ich alt bin, gehen wir zu unserem Code. Dies ist nicht der effizienteste Weg, dies zu tun. Ich möchte, dass du das Video hier aufhörst. Weißt du was? Ich werde das Video hier stoppen. In der nächsten Vorlesung werden wir die neue und verbesserte Art und Weise tun, genau das Gleiche zu tun. Aber wir werden Ereignis-Bubbling verwenden, jede Event-Delegation, die, bevor ich diese Lösung verschenke, einen Nachdenken gibt. Und in der nächsten Vorlesung schneiden wir es zusammen aus. 9. DOM-Elemente entfernen – die neue Art: Erstens, wie sollen wir das strukturieren? Und es nutzt sogar sprudelnd. Wenn wir unsere Indexdatei hier bekommen und nach oben scrollen, werden Sie feststellen, dass wir diese riesigen Eulenelemente haben, nicht wahr? Warum setzen wir also nicht unseren Ereignis-Listener darauf und er kann all die klickenden Beans hören, die sie aufblasen. Also lasst uns das machen. Also lassen Sie uns all diesen Code löschen, weil er sehr, sehr ineffizient ist. Also werden wir einen Ereignis-Listener auf diese UL-Elemente hinzufügen. Der erste Schritt ist offensichtlich, dass wir dieses UL-Element greifen müssen. Also lassen Sie uns das tun, indem Sie eine Variable namens Lebensmittelliste definieren. Du gehörst. Aus Mangel an einem besseren Wort können wir hier auf unser Dokument zugreifen. Wir können auf den Abfrageselektor zugreifen, da wir nur ein Element benötigen, oder? Und um genau zu sein, können wir innerhalb unserer Lebensmittelliste Wrapper suchen. Und darin wollen wir alles packen, was ihr alle nehmt. Nun, was wir tun wollen, ist, dass wir unseren Ereignis-Listener hinzufügen wollen. Also, wie machen wir das? Nun, wir greifen unsere URL-Elemente. Es hat eine Methode namens AddEventListener. Wir werden für alle Klick-Ereignis zu hören, und dann werden wir eine Handler-Funktion ausführen. Und nennen wir es einfach entfernen. So können wir hier eine Handler-Funktion definieren. Wir werden JavaScript-Funktionsschlüsselwort verwenden, wir haben es entfernt genannt. Und los geht's. Die Herzen von Opcode liegt innerhalb dieser lockigen oder Indizes. Wir werden im Ereignisobjekt existieren. Wir wissen, dass wir es in eine Variable setzen müssen. Wir nennen es typischerweise Variable E. Und wir werden auf eine Art von Venen-Tada-Drop zugreifen müssen , weil die US-Aktion das Wort MLK sagt. Wir möchten das Element nicht aus der Liste löschen. Es ist nur, wenn der Benutzer auf die Schaltfläche Löschen klickt. Aka erinnern Sie sich daran, dass es eine Klasse von Löschen hat. Es ist nur in diesem Fall, wo wir diese Funktion tatsächlich ausführen wollen. Lassen Sie uns zunächst eine Zielvariable definieren. Und sie können das eigentliche Ziel sein, AKA dieses Element, das einen DVT phi. Wir können uns ändern, wenn das Ziel, wenn es Krosnick ist, Dean zu entfernen, wir wollen, dass etwas passiert. Neuronen, wir wollen diese Funktion ausführen. Andernfalls wollen wir nichts in einem Rabat passieren , wenn der Benutzer auf dieses Band geklickt hat und wir gingen in das übergeordnete Element zu greifen, das das gesamte LI-Element ist. Also lassen Sie uns eine andere Variable namens ally definieren. Und wir wissen, dass es die Ziele sein wird, das wird sein übergeordnetes Element sein. Macht das irgendwie Sinn? Dann alles, was wir tun müssen, ist natürlich XY-Set-Elemente und verwenden Sie die neue und verbesserte Entfernungsmethode auf uns. Heute gehen wir, ich hoffe, dass dies viele Szenen macht und das ist eine viel bessere Möglichkeit, unseren Code zu strukturieren. Gehen wir also zu unserem Browser und lassen Sie uns sehen, ob das funktioniert. Lassen Sie uns versuchen, MLC zu löschen. Es funktioniert nicht. Was habe ich falsch gemacht? Gehen wir zur Konsole. Es ist also nicht einmal zu sehen, dass. Es ist nicht einmal in der Auslösung dieses Click-Ereignisses. Gehen wir hierher. Oh, du weißt, was ich denke, der Fall sein könnte. Ja, der Klassenname ist nicht entfernt Widerstand. Wenn wir hier zum Index gehen, ja, das ist vielleicht das Problem. Der Klassenname wird gelöscht. Wie wir sehen können, ist es nicht zu entfernen. Das sollte gestrichen werden. Gehen wir zurück zum Browser. Lassen Sie uns versuchen, Versicherung Bias zu löschen. Dies ist also ein viel besserer Weg, um unseren Code zu strukturieren und wir verwenden wirklich eine Menge von Durcheinander fortgeschrittener Konzepte mit Sanftheit Ziele. So wie ich Sinn macht, hoffe ich es, aber im nächsten Alter und lassen Sie uns weiter zu ihnen, wir haben das Löschen von Elementen logisch getan, der nächste Schritt sollte herausfinden, wie man Elemente zur Liste hinzufügen kann. Du kannst es selbst ausprobieren. Wenn wir zum Browser gehen, bleiben. Aber was wir wollen, wollen wir, dass der Benutzer etwas in das Eingabefeld eingeben oder wenn der Benutzer auf Anzeige klickt. Wir wollten die Bearbeitung dynamisch in die Liste des Darlehens. Wie würden wir das machen? Überlegen Sie es, und im nächsten Vortrag werden wir es ausprogrammieren, um es zu bekommen. Sinon. 10. Einführung in Formulare: Also jetzt kommen wir in das Hinzufügen von Elementen zu einer Liste. Es wird wirklich aufregend und hoffend und ich habe in diesem Vortrag eine Menge gelernt. Also, wo fangen wir an? Nun, bevor wir anfangen, Codierung, sind Reifen fast nicht fertig. Lama Kaffee. Es war diese Klasse. Wie auch immer, wie ich schon sagte, bevor wir mit dem Programmieren beginnen, möchte ich, dass wir Formulare etwas detaillierter besprechen. Denken Sie daran, in Teil eins dieser DOM-Serie, haben wir den Zugriff auf die Eigenschaft des Formulars in unserem Dokument diskutiert. Lassen Sie mich Ihnen zeigen, was ich meine. Nur ich erinnere dich daran. Also gehen wir zu unserer Konsole. Jetzt gehen wir und wie greifen wir zuerst auf unsere Formulare Maulwurf zu, greifen wir auf unser Dokument zu, die Wurzel unserer Takeaway-Seite und ehrliches Dokument macht eine Standardeigenschaft, die uns vom DOM genannt Formulare zur Verfügung gestellt wird. Und es ist so einfach und was uns zurückgegeben wird, ist eine HTMLCollection. Wir haben das in Serie eins viel detaillierter durchgemacht. Aber wenn wir diese HTMLCollection öffnen, können wir sehen, dass wir zwei Formulare haben. Und das macht Sinn. Es repräsentiert buchstäblich nur unsere Formulare in unserem HTML. Wenn wir vorkommen. Dies ist unsere index.html Datei. Wir können sehen, dass wir zwei Formen haben. Das erste Formular befindet sich in unserem Header-Abschnitt, und dann hat es eine ID des Suchelements. Wir werden später darauf eingehen. Moment wollen wir uns mit Abschnitt 2 befassen. Twittern Sie nicht SRC-konform. Das ist, wo der Benutzer in Element eingeben, die er zur Liste hinzufügen möchten, und klicken Sie auf Add said making saints. Also, wenn wir zurück zu unserem Browser, Wie existieren wir bei vier? Nun, es gibt ein paar Möglichkeiten und wir können damit irgendwie wie ein Array in einigen Fällen umgehen. Insbesondere wenn wir auf Elemente aus dieser HTML-Sammlung zugreifen möchten, was meine ich damit? Nun, wir können genau auf diese Form zugreifen. Wir haben gewonnen, indem wir auf das Eigentum des Formulars zugreifen. Und dann behandeln Sie es wie ein Array, indem Sie die eckigen Klammern verwenden. Und wir können das zweite Element im Array beenden. Und das ist die Form, die wir wollen. Das ist ein Weg, wie wir es tun können. Ein anderer Weg, wie wir es tun können, ist, dass wir tatsächlich als Argument hineingehen können. Es ist ID, und wir wissen, dass es eine ID von add item hat. Wir geben das zurück und wir bekommen genau das Gleiche. Okay, das ist also ein bisschen wie ein Rückblick. Es ist nur ein bisschen eine FYI auf der Seite. Bevor wir mit dem Programmieren beginnen, muss ich Ihnen noch etwas zeigen. Und das ist es, was mit Formen passiert. Zwei Dinge passieren. Zum einen wird ein Submit-Ereignis ausgelöst. Das zweite, was passiert, ist, dass die gesamte Seite nicht aktualisiert wird. Lassen Sie mich Ihnen zeigen, was ich meine. Nehmen wir an, der Benutzer löscht alle Elemente, aber die letzte in dieser Pizza. Wenn wir nun MLC hinzufügen möchten und der Benutzer klickt auf Anzeige, denken Sie daran, was das Standardverhalten ist. Man muss senden Ereignis ausgelöst wird und auf die gesamte Seite neu geladen. Klicken Sie auf Hinzufügen. Und sie würden die gesamte Seite neu laden. Und Sie können in der oberen linken Ecke unseres Browsers sehen, jedes Mal, wenn akribisch Add Button aktualisiert wird. Watt. Wir wollen diesen Dewey nicht, aber das Glück für uns ist die Art und Weise, wie wir das Standardverhalten verhindern können. Lassen Sie mich einfach schnell auf den Bildschirm springen und lassen Sie mich ein wenig mehr darüber reden. 11. Standard-Verhalten für die Formgebung, die: Bevor wir mit unserem Formular beginnen, denke ich, dass Sie wirklich verstehen müssen, wie einige Ereignisse Standardverhalten auslösen und was wir als Entwickler tun können , um zu steuern, welche Art von verhindern, dass das Standardverhalten passiert. Also, hier geht's. Ich habe eine leere Visual Studio-Codedatei geöffnet. Und ich möchte, dass wir uns die Ankermarke ansehen. Was passiert, wenn wir auf einen Link klicken? Was ist das Standardverhalten? Und ich zeige Ihnen, dass Sie bereits wissen, dass das Standardverhalten darin besteht, ein neues Browserfenster nach diesem Link zu öffnen , lassen Sie mich Ihnen zeigen, was ich meine. Also, hier geht's. Lassen Sie uns einfach eine index.html Datei erstellen, eine HTML-Vorlage in hier können wir buchstäblich ein Körperelement und nur ein Anker-Tag mit einem Link haben. Und das verlinken Sie es einfach mit Google. Es kann jede Größe haben, die wir wollen. Das nächste, was ich tun möchte, ist, dass ich einen Live-Server eröffnen möchte. Lassen Sie uns unseren Live-Server schnell öffnen. Warte auf Russland. Es kommt. Natürlich, haben Sie einen intuitiven Geschmack. Dumme mich. Gehen wir zu Google. Und lassen Sie uns das auf der linken Seite des Bildschirms nehmen. Und da gehen wir. Es ist auf Link. Und was passiert, wenn wir auf diesen Link klicken? Ich bin sicher, dass Sie es wissen. Der Nutzer wird zu Google.com weitergeleitet. Okay, das ist ein sehr einfaches Beispiel. Aber wie würden wir dieses Standardverhalten verhindern? Nun, lassen Sie mich schnell zu einer Präsentation springen und reden wir darüber. Wie ich gerade erwähnt habe, weisen viele HTML-Elemente ein Standardverhalten auf, wenn wir mit ihm interagieren. Welche Art von Elementen jemals Standardverhalten? Die Bilder sagen viele. Wenn ein Benutzer beispielsweise auf ein Textfeld klickt, gibt das Standardverhalten an, dass der Box-Fokus mit einer kleinen blinkenden Cursorperiode nimmt. Wir alle wissen das, wenn wir in das Eingabetextfeld gehen, keine Sorge. Mit unserem Mausrad in einem scrollbaren Bereich scrollen Sie in Richtung, dass wir mit diesem kleinen Mausrad scrollen. Wenn Sie ein Kontrollkästchen aktivieren, wird dieser Änderungsstatus ein- oder ausgeschaltet. Wenn Sie auf einen Link klicken, öffnet ein Anker-Tag-Link eine neue Seite und leitet den Benutzer zu diesem Link. All dies sind Beispiele für Bolzen in Reaktionen auf Ereignisse, unser Browser weiß instinktiv, was zu tun ist. Die gute Nachricht für uns ist jedoch, dass wir dieses Standardverhalten deaktivieren können und wenn wir es nicht wollen. Und wir können dies tun, weil wir eine Menge Kontrolle über den Browser haben, hat Entwickler. Okay, cool, es ist alles gut und gut, aber wie schalten wir dieses Standardverhalten aus? Wenn wir dieses Standardverhalten drehen wollen oder wir können die Provinz Standardfunktion aufrufen. Diese Funktion muss aufgerufen werden, wenn auf ein Ereignis auf dem Element reagiert sollte Standardreaktion, die wir ignorieren möchten. Denken Sie also daran, dass wir auf dem Ereignisobjekt selbst darauf zugreifen müssen. Und ich bin heute Träger guter Nachrichten, weil die PreventDefault-Methode für viele Elemente verwendet werden kann, wie Links, Eingabefelder, Formulare, Checkboxen, cetera, et cetera. Aber jetzt gehen wir zurück zu unserem Beispiel des Anker-Tags und lassen Sie uns sehen, wie wir verhindern können, dass seine Standardaktion passiert. Macht das Sinn? Ich hoffe es. Aber wie greifen wir auf die PreventDefault-Methode zu? Nun, gehen wir zurück zu unserem Texteditor. Lasst uns diese Süße erweitern. Wie würden wir darauf zugreifen, woher es kommt und wie funktioniert es? Nun, erstens wollen wir JavaScript verwenden. Also lassen Sie uns ein Skript-Tag am Ende unserer Datei hinzufügen. Das erste, was wir tun wollen, ist, dass wir auf diesen Anker-Tag zugreifen wollen. Und das wissen wir mittlerweile. Es handelt sich um viele verschiedene Zugriffsmethoden. Lassen Sie uns es in eine JavaScript-Variable setzen, und geben wir dieser Variablen einen Namen sagen, Anker. Wir können auf diese Variable zugreifen, indem wir starten und ich werde Objekt dokumentieren. Und am Tag haben wir viele x's Methoden. Die, die ich jetzt verwenden werde, ist getElementsByTagName. Der Tag-Name, den wir wollen, ist unser Anker-Tag. Und denken Sie daran, was dieser GetElementsByTagName zu uns zurückgibt. Es gibt uns eine HTMLCollection zurück. Hier zu stoppen hat nicht genug. Wir müssen tatsächlich dem Browser mitteilen, welches Element in der Sammlung wir wollen. In diesem Fall gibt es nur ein Element in der Sammlung. Wir möchten also auf den allerersten Artikel in der Sammlung zugreifen. Also, da gehst du hin. Wir haben einen Anker-Anhänger. Alles, was wir jetzt tun wollen, ist, dass wir einen Ereignis-Listener anhängen müssen. Tun wir das nicht? Klicken Sie auf Ereignis-Listener? Wir können das tun, indem wir auf unsere Variable im Netz zugreifen. Wir haben eine Standardmethode, die uns vom Browser mit dem Namen add event listener zur Verfügung gestellt wird. Wir haben das schon viele Male durchgemacht und Sie werden wahrscheinlich ziemlich langweilig von dieser Banane. Und anstatt unseren eigenen benutzerdefinierten Event-Handler in einer anderen Funktion zu definieren, werde ich es einfach innerhalb des zweiten Arguments tun. Und ich werde die Pfeilsyntax verwenden. Drei-Wege-einfach. Es ist nur ein Platz dort. Also gehen wir hin. Dies ist unsere Handler-Funktion. Und was wollen wir tun? Nun, erstens wollen wir das Standardverhalten verhindern. Dieses Standardverhalten wird auf dem Ereignisobjekt selbst gefunden. Und erinnern Sie sich, wie Sie auf dieses Ereignisobjekt zugreifen können? Wir müssen es in eine Variable setzen, und wir setzen es in der Regel in eine Variable namens e. Also alles, was wir tun müssen, um den Standard zu verhindern, ist, dass wir auf dieses Ereignisobjekt zugreifen müssen , auf die sie eine Methode namens default verhindern. Und weil es eine Funktion ist, will, weil es eine Methode ist, müssen wir ihr durch Klammern folgen. Heute gehen wir und wir verhinderten das Standardverhalten. Und nur um für Gesundheit cooles Beispiel zu beenden, was ich tun möchte, ist, dass ich auf ANCA-Variable zugreifen möchte und dann möchte ich den Textinhalt ändern. Und wir können einfach sagen, dass Standardverhalten verhindert wurde. Was ist los? Ja, du hast es. Wir haben und wenn wir gehen, Es ist alles Browser. Erweitern Sie die USA. Gehen wir zurück und aktualisieren Sie unsere Seite. Was denkst du jetzt passieren wird, lass mich einfach hineinzoomen. Was denken Sie, wird die Null haben, wenn der Benutzer auf diesen Link klickt. Nun, versuchen wir es. Lassen Sie uns auf den Link klicken. Es ist cool, es spielt keine Rolle. Jetzt haben Sie gerade gelernt, wie Sie das Standardverhalten verhindern können. A. Wir haben nicht auf Google weitergeleitet und geändert haben, kümmert sich um diese Wut, wenn wir darauf klicken. Also gehen wir hin. Ich wollte Ihnen nur zeigen, wie wir anfangen können mehr Kontrolle über das Standardverhalten zu bekommen. Natürlich haben wir uns im Moment nicht mit dem Formular beschäftigt, aber das werden wir in der nächsten Vorlesung machen. Wir werden mit diesem Formular beginnen, mit dem der Benutzer Elemente zur ShoppingList hinzufügen möchte. Wir sehen uns jetzt. 12. Teile dynamisch hinzufügen: Jetzt kommen wir in das wirklich aufregende Stück, um Artikel auf unserer Seite hinzuzufügen. Wie tun wir es wird, wenn wir zu unserer app.js Datei gehen, können Sie hier sehen wir haben Löschen von Elementen getan. Also lassen Sie mich das einfach kopieren. Unruhen zu treffen und es ist ununterbrochen. Erstellen Sie einen neuen Abschnitt, in dem wir jetzt Elemente hinzufügen möchten. Wo fangen wir an? Nun, wenn wir zu unserer Datei index.html gehen und wenn wir in unserer Indexdatei nach unten scrollen, kommen wir zum Alice Abschnitt zwei, dies ist unser Formular mit dem Benutzer fügt ein Element hinzu und erinnern sich an das Standardverhalten einer vollen. Immer wenn wir eine Schaltfläche in einem vollen sehen und der Benutzer auf diese Schaltfläche klickt, wird ein Submit-Ereignis ausgelöst, aber nicht auf der Schaltfläche selbst, die auf diesem Formularelement ausgelöst wird. Also der allererste, wenn wir tun wollen, ist, dass wir auf das Submit-Ereignis auf dem Formularelement hören wollen, nicht wahr? Aber dann wollen wir Schuldenausfälle verhindern. Wenn wir also zu unserer Datei app.js gehen, der erste Schritt darin, dieses Formularelement zu greifen. Und um dies zu tun, lassen Sie uns es in eine Variable setzen, die ein Array-Format genannt wird. Und wir können auf unser Dokumentobjekt zugreifen. Darauf können wir eine Methode namens get Element nach ID zugreifen und wir gaben ihm eine ID von addItem. Denken Sie daran, dass unsere Indexdatei, Angesichts dieser Form, eine ID von AddItem. Sehen Sie, wie wir mit Zugang zu unserer vollen jetzt gehen. Das nächste, was wir tun wollen, ist, dass wir einen Ereignis-Listener hinzufügen möchten. Hängen wir nicht einen Ereignis-Listener an? So greifen wir auf unser Formular und unsere Variable zu. Wir wollen dann einen Ereignis-Listener hinzufügen, aber dieses Ereignis ist kein Klick-Ereignis ist uns. Es ist eine eingereichte. Darauf wollen wir hören. Und dann wollen wir natürlich eine Handler-Funktion ausführen. Wir werden auf dieses Ereignisobjekt zugreifen. Denken Sie daran, wir müssen, um diese Standardmethode zu verhindern, werden wir es in eine Variable namens e setzen. Dann werden wir die neue und verbesserte Pfeilsyntax verwenden. Und wir werden definieren, wie ein Handler innerhalb dieser geschweiften Klammern funktioniert. Das erste, was wir tun wollen, ist, dass wir verhindern wollen, dass die Seite erfrischt. Und um dies zu tun, müssen wir auf unser Ereignisobjekt zugreifen und wir verwenden die Standardmethode. Ja, wir haben es. Gehen wir zu unserer Indexdatei und ziehen wir unsere Website auf Live Server. Dafür wird vergrößert oder verkleinert auf 100 Prozent. Und sagen wir, der Benutzer löscht alle Elemente außer einem und dann schreiben sie etwas in die Luft und klicken Sie auf Hinzufügen. Sie können jetzt sehen, dass die Seite nicht aktualisiert wird. Also bekommt er eine langsam, aber sicher, gehen wir zurück zu unserem Code. Und gehen wir zurück zu unserer JavaScript-Datei. Was ist die nächste Aussage? Nun, wenn Sie auf unsere Website gehen, noch, wird der Benutzer geben Liter und Geschmack in dieses Eingabefeld auf, dass. Und was wollen wir, dass sie tun, ist, dass wir diese Eingabe ergreifen müssen. Es dauert innerhalb dieses Eingabefeld. Und dann müssen wir als Listenelement bearbeiten, wenn sie auf Hinzufügen klicken. Also lasst uns diesen Eingang schmackhaft schnappen. Und wie greifen wir Texte? Alles, was wir eine andere der Methoden von x verwenden können, die QuerySelector in diesem Fall verwenden, es ist alles, was wir hier tun müssen, ist Grab verwendet. Wir können die Benutzertabelle beenden, indem Sie einen Abfrage-Selektor verwenden und wir suchen nach den Eingabeelementen. Und im Eingabeelement gibt es eine Eigenschaft namens value, und es gibt uns den Wert im Eingabetextfeld zurück. Lassen Sie mich Ihnen zeigen, was ich meine. Also lassen Sie uns eine Variable namens Text definieren, und das wird sein, was der Benutzer in dieses Eingabefeld getippt hat. Wir müssen das Formular und das Eigentum packen. Und wie ich bereits erwähnt habe, können wir eine Zugriffsmethode namens Abfrage-Selektor verwenden. Jetzt können wir noch sehr spezifisch sein. Wir können nicht, wir können nicht einfach den Eingabe-Abfrage-Selektor verwenden und dann diesen Wert erhalten. Und um es Ihnen zu beweisen, Lassen Sie uns einfach die Konsole protokollieren den Text. Gehen wir zu unserem Browser. Und schauen wir uns die Konsole an. Und es ist Klavier gelehrt, MLK und klicken Sie auf Hinzufügen. Und sie würden mit dem MLK gehen, der uns buchstäblich angezeigt wird , der Wert von diesem Eingabefeld nimmt. Ich sagte doch, es ist nicht so schwieriger Fahrer. Aber gehen wir zurück zu unserem Texteditor. Wir können genauer sein. Angenommen, Sie haben ein paar verschiedene Arten von Eingabefeldern oder Elementen. Aber in diesem Fall wollen wir nur die mit Art der Geschmackskarte. Wir können das auch tun, um spezifischer innerhalb GUDDAT Browser zu sein, wieder, es ist nur reißen alles und sagen wir einfach Zucker Gewürz. Und wir klicken auf Hinzufügen und wir bekommen Spitzheit Chef. Das ist nur, wenn du genauer sein willst. Aber in diesem Fall wissen wir, dass wir nur eine Eingabe haben, also müssen wir das nicht handhaben. Wir können es einfach sehr, sehr einfach halten. Lassen Sie uns diese Konsole löschen, weil wir wissen, dass sie funktioniert. Was ist jetzt das nächste Date? Alleinstehende Mütter, wir wollen Listenelement in unserem Browser hinzufügen. Wir wollen buchstäblich einen weiteren Listeneintrag wie Zucker und Gewürze hinzufügen. Wir wollten ein neues hinzufügen. Und wie machen wir das? Nun, zuerst müssen wir uns sein Make-up ansehen. Index. Was bemerken Sie an jedem Artikel? Sie können sehen, dass es ein LI-Tag gibt. Und innerhalb jedes LI-Elements haben wir zwei Spannweiten. Der OneSpan hat eine Klasse von Elementen und das ist der Artikel, den der Benutzer kaufen möchte. Und dann ist die andere Spanne, die Löschtaste. Und natürlich haben wir verschiedene Klauseln, die diesen Stil definieren. Also, das ist, was wir jedes Mal erstellen müssen, wenn der Benutzer darauf klickt Hinzufügen Schaltfläche. Mach dir keine Sorgen. Gehen wir zurück zu unserer Akte. Und lass mich einfach rausziehen, was wir wollen. Das ist es, was wir wollen. Und ich werde, und die beiden Spannweiten. Also lassen Sie uns anfangen, weniger jetzt jedes Mal, wenn der Benutzer auf EdX Schaltfläche klickt. Also sagen wir hier, Elemente dynamisch zu erstellen. Und das haben wir in Teil 1 dieser DOM-Serie ausführlich durchgemacht. Also sollten Sie damit sehr vertraut sein. Schau dir dieses Bild jetzt an, was müssen wir zuerst erschaffen? Wir müssen eine Stunde schaffen, keine Sorge. Also lassen Sie uns eine Variable definieren, die verbündet genannt wird. Und natürlich können wir auf unser Dokument zugreifen und ist eine Methode namens Elemente erstellen. Das Element, das wir erstellen möchten, ist, dass Ally Elemente. Und dann müssen wir zwei weitere Elemente erstellen. Keine Sorge, wir brauchen einen für den Lebensmittelartikel und wir brauchen einen für die Schaltfläche Löschen. Also lassen Sie uns zwei Variablen definieren. Nehmen wir an, es ist Lebensmittelname, weil das der Name des Lebensmittelartikels ist, den wir zu unserer Liste hinzufügen. Und wir gehen zum Dokument. Natürlich müssen wir ein Element erstellen und in diesem Fall wird es ein Span-Element sein. Wir werden genau das Gleiche tun, aber wir brauchen jetzt keinen Lebensmittelnamen, brauchen wir, das ist richtig, einen Löschknopf. Also nennen wir es einfach Löschknopf. Und übrigens, ich weiß nicht, ob Sie es so klar sehen können, aber die IDE hat diese Variablennamen ausgegraut. Es ist eigentlich eine graue Farbe, nicht weiß und es ist grau, weil es uns sagt, dass wir diese Variablen noch nicht verwendet haben. Es ist also nur ein bisschen interessant, FYI. Also haben wir unsere Elemente erstellt. Wir wissen jetzt, dass die Spannen alle innerhalb des LI-Elements am Tag verschachtelt sind. können wir sehen. Also lasst uns das machen. Lassen Sie uns ein gemalt, um die LI-Elemente und wie erhalten wir Dinge, um Elemente? Auch hier haben wir dies bisher ausführlich gemacht. Alles, was wir tun müssen, ist x ESL LI-Element und wir greifen auf eine Eigenschaft zu, die ein schmerzhaftes Kind genannt wird. Das Kind, das wir in diesem Fall malen möchten, ist Lebensmittelgeschäft nach dem einen benannt und Sie haben die zweite gegossen, die wir abmalen möchten, dass diese Schaltfläche Löschen ist. Schaltfläche „Löschen“. Da gehen wir. Warum, glauben Sie, wird das funktionieren? Es würde tatsächlich funktionieren. Lass es uns retten. Skarabäus Rosa. Lassen Sie mich in der Hand über MS klicken Sie auf Hinzufügen. Es wird nicht zu unserem DOM hinzugefügt, oder? Und wieder haben wir dies in Reihe eins ausführlich diskutiert. Was jetzt passiert, ist, dass wir all diese Gegenstände erstellt haben, aber sie sind irgendwie im Weltraum herumschweben. Wir müssen es an das DOM anhängen, wir müssen es irgendwie an einen Elternteil anhängen. Also, wie machen wir das? Nun, wenn wir zu einem nächsten Herbst gehen, was haben wir gerade dieses UL-Element Erdnuss dazu geschnappt? Also, wenn wir wieder zu unserem Skript und ab.js Datei gehen, ist es nicht greifen Sie. Ich werde Element. Alles, was wir hier tun müssen, ist, dass wir zu spät sagen müssen, ich werde das Dokument sein. Holt Elemente wieder nach Tag-Namen. Wir können auf die coolen Sachen oder Turns und HTMLCollection zugreifen und wir wollen das erste UL-Element darin. Alles, was wir jetzt tun müssen, ist, unsere neu geschaffenen Zitronen zum Domino zu berühren. Ist diese Art der Herstellung von S2? Ich hoffe es. Um es zu berühren, ist es sehr einfach. Wir greifen unser URL-Elternelement und wieder greifen wir auf ein schmerzhaftes Kind zu und das Kind, das wir anhängen möchten, ist der Verbündete. Macht das Sinn? Also gehen wir hin. Lass es uns retten. Gehen wir zu unserem Browser. Sagen wir mal, oder sagen wir Bier, nur um anders zu sein als das, was wir haben. Und lassen Sie uns hinzufügen. Und sieh dir das an. Wir haben buchstäblich den Verbündeten bearbeitet, aber wie Sie sehen können, haben wir keinen Geschmack darin, dass sie essen wie bevor wir uns damit beschäftigen, nimmt Aspekt, werfen Sie einen Blick auf unsere DAW Inspect out on, lassen Sie uns einen Blick auf die Elemente werfen. Wir haben dieses LI-Element buchstäblich dynamisch bearbeitet. Ja, die Spannweiten sind leer, aber Sie müssen unsere bisherigen Erfolge feiern und wir machen es in einem Stück Schritt für Schritt. Wenn wir es erneut tun und wir auf Hinzufügen klicken, können Sie sehen, dass es dynamisch bearbeitet wird, um den Hund. Sehr, sehr kühles und verbündetes Element mit zwei Spannweiten. Noch ein paar Dinge, die wir tun müssen, um irgendwie fertig zu werden. Das erste, was ist, dass wir Alt-Text hinzufügen müssen. Und die zweite Sache ist, dass wir diese Klauseln hinzufügen müssen. Ich möchte, dass du darüber nachdenkst, wie du das machst. Und in der nächsten Vorlesung beenden wir das zusammen. Wir sehen uns jetzt. 13. Kursen hinzufügen: Okay, also ja, wir alle genau dort, wo wir aufgehört haben. Und denken Sie daran, dass wir diese LI erstellt haben, Elemente dynamisch. Also haben wir irgendwie das Skelett an Ort und Stelle, dass wir das Fleisch hinzufügen müssen, oder? Wie machen wir das? Wir fügen zuerst den Inhalt hinzu. Das Element hat Outtakes Daten zusammen. Und lassen Sie uns sechs hinzufügen. Und denken Sie daran, wenn ich nach oben scrolle und auftrat, haben wir tatsächlich eine Variable namens Geschmäcker definiert, die wir noch nicht verwendet haben. Und das ist der Geschmack der USA ist in HTML in diesem Eingabe-Element-Feld geschrieben. Also lassen Sie uns das jetzt hinzufügen. Werden wir auch bearbeiten? Wenn Sie sich dieses Lebensmittelgeschäft Namen Artikel Decks Art und Weise wir hinzufügen möchten, die Eingabe nimmt Inhalt in Dentin. Alles, was wir tun müssen, ist, dass wir auf diesen variablen Lebensmittelnamen zugreifen müssen. Wir wollen, dass seine Textinhalte auf den Wert der unterzeichnet werden, die zustimmen, ist so einfach? Und sie enden mit einem Lösch-Button. Um Schaltflächenvariable zu löschen, die wir oben erstellt haben. Wir wollen auch Inhalt innerhalb dieses span Element setzen. Und der Inhalt Tag Wir eins ist nur eine sehr einfache führen. Und wenn wir zu unserem Browser gehen und nur diese Seite aktualisieren, lassen Sie uns hinzufügen BIA und es ist gut darin. Wie Sie sehen können, sind wir nicht ganz getan alles, was wir nicht richtig gelöst haben. Warum ist das Löschen, nicht nach rechts geschoben. Was ist los? Was ist, wenn wir unsere Divya öffnen und wir geben Artikel wir Knoten in der Lebensmittelliste. Wenn wir die URL öffnen und wir tatsächlich zu diesem LI-Tag gehen, Schauen wir uns an, was passiert. Wir haben den Geschmack bearbeitet, was fantastisch ist. Aber Sie können sehen, dass die Klassen darauf angewendet werden. Und was das bedeutet, ist natürlich, dass es kein Styling gibt. Wie fügen wir das hinzu? Gehen wir zurück, um Daten zu nehmen. Fangen wir an, darüber nachzudenken. Nehmen wir an, fügen Sie Klauseln hinzu. Wie fügen wir Wurfe hinzu? Willens Gewinn pro Tag sind ein paar Möglichkeiten. Wenn wir hier zu unserem Browser gehen, hat das unsere Konsole. Lassen Sie mich Ihnen einen Weg zeigen. Nehmen wir also zunächst an, dass unser Tankdokument Elemente nach Tag-Namen erhält. Und wir wollen das LI-Tag. Wenn wir das zurückgeben, erhalten wir und HTMLCollection. Und wir können sehen, dass wir nach LI-Tags gesucht haben. Wir wollen die, die wir nur hinzufügen werden, nicht über Edit. Also gehen wir hin. Jetzt sollten sie fünf sein. Ruten mit 50 Verbündeten. Tag überschreitet nicht den letzten. Die, die wir gerade einen ausgedruckten hinzugefügt haben, können wir sehen, del Know-Klauseln auf uns angewendet. Eine Möglichkeit, Klasse zu bearbeiten, besteht darin, sie einfach über die ClassName-Eigenschaftsmeter zu bearbeiten , zu kühlen. Also, was meine ich damit? Wir greifen nur auf diesen Gegenstand zu. Wir haben ClassName und wir können unsere eigene Klasse Mathematik hinzufügen. Sagen wir einfach, es schmeckt Ruten. Wenn wir jetzt diesen Verbündeten existieren und wir zu uns zurückgekehrt sind, können wir diese Bearbeitung sehen, diese Klasse der Geschmäcker. Also net ist ein Weg, aber was ist der große Untergang war das? Will, der Hauptuntergang ist, dass es alle anderen Klauseln außer Kraft setzt. Wir können das nur tun. Eine Klausel. Zum Beispiel. Die dritte, die ich nehme, ist die Pizza und hat uns jetzt seine falsche Namenseigenschaft ändern, um zu schmecken. Wenn wir das tun, und wir verlassen die LI überschrieben andere Klauseln, wenn es andere Würfe hatte. Übrigens, wenn wir zum Beispiel diesen Bandverlust des Elements beenden und ihn durch die ClassName-Eigenschaft überschreiben, wird es tatsächlich die Klasse des Elements entfernen. Macht das Heilige? Ich weiß, dass es ein bisschen verwirrend erscheinen mag, bedenken Sie nur, dass ich versuche, über die Klassennamen-Eigenschaft Verluste außer Kraft zu setzen. Sie können nicht mehr als eine hinzufügen. Sehen Sie gehen, Sie können sehen, dass der Klassenname ein bisschen ungeschickt ist. Sie haben immer um sie gepeitscht. Also sagen, jetzt wollten wir hinzufügen, auf dem Verbündeten, nehmen Sie eine andere Klasse. Wir könnten also auf diesen Verbündeten zugreifen. Der Klassenname, der Däne. Wir hätten die neuen Tröge darauf verketten können, sagen wir T2. Also, wenn wir das tun und wir auf Verbündete zugreifen, werden Sie ein anderes Problem sehen. G, was ist los? Ja, das bin ich. Heute musst du Tage. Das andere Problem, dass t-Statistik zu nichts. Woran müssen Sie sich erinnern, wenn Sie diese bearbeiten? Du musst eine CIA setzen. Das können sie. Wenn wir dann darauf zugreifen, sollte das funktionieren. Es hat den Geschmack als separater Klassenname, aber Sie können sehen, dass dies ein sehr umständlicher Weg ist. Es gibt einen viel besseren Weg. Was ist das? Erinnerst du dich? Gehen wir zurück zu unseren Textdaten. Was ist also der neue und verbesserte Weg, um Verluste dynamisch hinzuzufügen? Es verwendet die Klassenlisten-API, die von HTML5-Spezifikation eingeführt wurde. Das haben wir in früheren Vorträgen durchgemacht. Es hat viele coole Methoden zur Verfügung, Toggle entfernt oder Beispiele. Aber die, die wir verwenden möchten, ist hinzufügen und bearbeiten, super einfach zu bedienen. Alles, was wir tun müssen, ist, dass ich mich einfüge. Wir wollen dann auf die Liste API zugreifen, die Damon hat eine Methode namens add. Und wir wollen eine Klausel hinzufügen, nicht twittern. Und die Klasse wollen wir kalte Art und Weise hinzufügen, und wir wollen genau das gleiche mit Alt Delete-Taste tun. Wir wollen zugreifen oder löschen Schaltfläche, die Klassenliste API. Und wir wollen eine Klausel hinzufügen, kalt löschen. Wenn wir die USA und gehen Sie zu unserem Browser, können wir das löschen. Jetzt. Lassen Sie uns jetzt VIA hinzufügen, Lassen Sie uns auf Hinzufügen klicken. Und wie ist das? Wir werden nur ein bisschen sehen. So können Sie irgendwie sehen, dass es dynamisch hinzugefügt wurde. können wir nicht wieder löschen. Wir können sagen und zuhören, wir brauchen es nicht. Wir brauchen, was enden wird, das Theater auch hinzufügen kann. Awesome, lasst uns editieren. Dynamischer Schlüssel zum DOM. Nehmen Sie eine Verschnaufpause. Feiern Sie Ihre Erfolge, weil Sie lange, lange Weg kommen. Und Sie können beginnen, zu sehen, wie wir das Wissen, das wir in diesem gesamten Kurs gelernt haben, anwenden können , um dynamische Webseiten zu erstellen, Greenwald. Und jetzt möchte ich, dass wir weiterhin die Seiten dämpfen. Was können wir als Nächstes tun? Was haben wir mit den Ausblenden Listen, Checkbox neben Welle, wir kreuzen, dass Allah gesamte Einkaufsliste versteckt ist und darüber nachdenken, wie wir das tun können. Und dann der nächste Agent, der es ändern könnte. Complex, ich bin Sue Bananen, ich bin super aufgeregt. C nichts. 14. Verblühen und Aufblühen von unseren Listenelementen: Okay, also hier sind wir. Und der nächste Schritt ist, dieses versteckte Checkbox-Wiki zu bekommen. Wie Sie jetzt sehen können, wenn wir gehen und auf diese Listen ausblenden, passiert nichts. Wie würden wir das machen? Bevor wir mit dem Programmieren beginnen? Ich möchte, dass Sie etwas verstehen, wenn es darum geht, Kontrollkästchen und Hals ist ein einzigartiges Ereignis wird jedes Mal gefeuert, wenn wir ein Kontrollkästchen klicken. Es ist kein Klick-Event. Es ist eine Veränderung im Strahl, um es zu befriedigen. Also, wenn wir zu unserem Code gehen, Yeah, schauen wir uns unseren HTML an und wir schauen uns dieses div mit einer ID der Änderung an. Und wir sehen das Eingabe-Kontrollkästchen. Wir können sehen, dass ich Kontrollkästchen in diesem Eingabeelement diese Art von Kontrollkästchen zu finden. Und jedes Mal, wenn dieses Kontrollkästchen vollständig ist ein Änderungsereignis ausgelöst, das mit einer ID der Änderung zu diesem div aufbläst. Aber was genau ist diese Änderung Venen wird Übeltäter sehr schnell einen Überblick geben. Sie fragen sich vielleicht, dass wir das Wechselereignis herkommen. Und lassen Sie mich einfach sagen, dass es von der HTML-Elementschnittstelle geerbt wird. Und dann denken Sie vielleicht, wenn es von der HTML-Elemente-Schnittstelle kommt, bedeutet dies, dass alle Elemente Nachteil haben und dass es nicht der Fall ist. Die Änderung der schwächsten nur für einige Elemente verfügbar. Nicht alle. Zum Beispiel wird die Änderung vergeblich für die Eingabe eines selektierten Elements ausgelöst und dauert Zeit in Momenten, in denen die Änderung des Elementwerts vom Benutzer festgeschrieben wird. Und das bedeutet, dass für unser Kontrollkästchen, das wir gerade gesehen haben, ein Änderungsereignis jedes Mal ausgelöst wird, wenn die Hauptseite dieses und ändert i0 jedes Mal, wenn der Benutzer auf dieses Kontrollkästchen klickt. Und nur ein bisschen eine Datei, denken Sie vielleicht, dass dies dem oninput Ereignis sehr ähnlich ist. Aber der Unterschied, ja, subtile D auf Eingabeereignis tritt sofort aus, um den Wert eines Elements hat sich geändert. Während diese Änderung vergeblich zu Sony eingereicht windig und Venen, Art von als verlorener Fokus bieten wird, wurde der Inhalt geändert. Also, Zach, ich mache Sinn. Ich hoffe, so, aber nominiert die weiche Schneid es auf, Sie werden sehen, wie einfach es ist. Das ist also gut. Unsere JavaScript-Datei, die nach oben gestohlen wurde, wurde gerade bei Atomen gemacht. Lassen Sie uns das kopieren. Und jetzt wollen wir Gegenstände verstecken. Sieh mal, wie wir gehen. Wir haben unsere Herzelemente, hasst. Wie sollen wir mit uns umgehen? Was werden wir tun? Nun, auf viele, viele Arten, um eine Katze zu häuten. Wir könnten eine Vene Delegation gebrauchen. Wir konnten uns die Änderung von Anton insgesamt div anhören. Aber in diesem Fall will ich das nicht tun. Und deshalb können Sie nicht einfach eine Regel befolgen, wenn es um Codierung geht. Der Grund, warum ich hier keine Venendelegierung verwenden möchte, ist, dass Sie dann auf das Ereignisziel zugreifen müssen , um festzustellen, ob die Kontrollkästchen aktiviert sind oder nicht. Und ich denke nur, dass es ein einfacherer Weg ist, wenn wir einfach direkt an diesem Eingabeelement selbst arbeiten. Es gibt keinen Grund für uns, hier eine Venendelegation zu benutzen. Es nützt uns in keiner Weise. Also das erste, was ich tun möchte, ist, dass ich dieses Eingabeelement greifen möchte, AKA ich möchte, dass wir dieses Kontrollkästchen greifen. Also lassen Sie uns eine JavaScript-Variable definieren und nennen Sie es einfach Checkbox. Und das wird ein Dokument sein. Lassen Sie uns QuerySelector 1 ons Abfrage-Selektor verwenden. Und die Abfrageauswahl, die wir erhalten möchten, ist, dass wir diese Eingabe mit der ID alle erhalten möchten. Ich denke, wir sitzen eine Idee von HIV. Wenn wir zu unserer Indexdatei gehen, scrollen wir hier nach oben. Eingabeelement hat eine ID von cool, also haben wir das gerade bekommen. Gut. Der nächste Schritt ist ehrliche Kettenbox. Lassen Sie uns einen Ereignis-Listener hinzufügen. Aber Navi Venen, wir wollen für einen bestimmten Datensatz zu hören. Es ist die Veränderung. Und dann wollen wir natürlich eine Callback-Funktion ausführen sind Handler. Und wir werden das direkt in dieser Anzeigenlistener-Methode tun. Und was werden wir neu machen, eines der Dinge, die wir tun müssen, ist, dass wir bestimmen müssen, welches Element, Gesamtelement wir verstecken wollen. Also wieder, lasst uns zu unserem HTML gehen. Blättern Sie hier nach unten. Wir können in Abschnitt 3 sehen wir Allah ganze Lebensmittelliste innerhalb eines Gesamt-Eltern-Element mit einer ID der Lebensmittelliste gelesen haben. Und genau das ist der Grund, warum ich es immer liebte, meinen Code zu strukturieren, war ein Gesamtvertreter. Weil man nie weiß, welche Art von Codierung man in Zukunft machen will. Und er fügt sehr einfach für uns hinzu, es zu greifen und einfach zu verstecken. Also lassen Sie uns das einfach in Zeiten verstecken, so dass wir hier gehen. Das nächste, was ich tun will, ist die Lebensmittelliste zu definieren. Und dann kann wieder das Dokumentobjekt sein. Wir müssen das Datum beginnen und wir können Element nach ID bekommen und wir wissen, dass die ID Lebensmittellisten ist. Nächste Quoten und wir wollen sammeln, was ist der nächste Zustand wird, wenn die Kontrollkästchen, wir wollen alles versteckt ist zu betrügen Box ist deaktiviert. Wir wollten, denken wir, Shun. Und wann immer Sie zu dieser Gabelung auf der Straße kommen, verwenden wir eine if-Anweisung, die von JavaScript kommt. Also, wenn und was werden wir schmecken? Ja, zum Glück für uns, wenn ein Artikel geändert wird, hat es eine Eigenschaft namens Kette. Und dann wird Eigenschaft wahr sein, wenn sie geändert wird, und falsch, wenn sie nicht geändert wird. Also, was wollen wir sagen? Ja, wir wollen sagen, wenn das Kontrollkästchen geändert wird, wir wissen, dass es überhaupt in der Nähe von wahr überprüft wird. Was wollen wir dann passieren? Wollen wir uns unsere Lebensmittelliste holen, nicht wahr? Wir wollen auf eine solide Eigenschaft zugreifen, die Anzeigeeigenschaft auf, dass und wir wollen , dass auf Null gesetzt Symbol sonst speichern. Und wir wissen, dass die Aussage sonst bedeutet, dass es Jake ist. Nun, in diesem Fall wollen wir versuchen, unsere Lebensmittelliste zu schnappen. einmal, wir auf Stil Eigentum zugreifen. Das ist das Sklaveneigentum, das wir ändern wollen. Wir wollten ein Blocksatz werden, der Heilige Hoffnungen auf eine Nabe macht. In diesem Stadium können Sie beginnen zu verstehen, dass es sehr intuitiv ist , zu verstehen, wie die Venen funktionieren. Ja, in diesem Fall mussten wir wissen, dass wir uns das Änderungsereignis anhören mussten. Dass dies die Art von Dingen sind, die buchstäblich dauern Sie 30 Sekunden, um schnell Google. Und Sie erhalten die, Sie werden den Fluss von Code verstehen. Sie werden verstehen, wie Sie diese Dinge selbst programmieren können. Also wie auch immer, lassen Sie uns zu unserem Browser gehen. Die Zahnseide. Eine Trompete zu blasen heißt zu sehen, zu sehen, wie wir gehen, und lassen Sie uns unsere Liste verstecken. Lasst uns darauf klicken. Ich werde schön, wie es versteckt ist. Und wenn wir es deaktivieren, wird es wieder als Block angezeigt, wäre Amps, immer Spaß. Ich würde Autonomie lernen und Code debuggen, einfach Samen machen. Wenn nicht, schauen Sie sich das Video noch einmal an, wenn Sie Fragen haben und ihn im Q&A verloren haben, bin ich hier, um Ihnen zu helfen und wir sehen uns in der nächsten Phase. 15. Recap von den event: Ich kann nicht glauben, wie weit weg ein CRC ist. Gut gemacht. Das ist so cool. Ich hatte viel Spaß und hoffe, dass du auf dem Weg viel gelernt hast. Bevor wir jetzt eine ziemlich fortgeschrittene Sache bekommen , und das ist, dass wir durch den Suchfilter gehen. Ich möchte nur zusammenfassen, was wir getan haben. Denken Sie daran, dass es in diesem Kurs hauptsächlich um Ereignisse geht und es auf eine sehr fortgeschrittene Art und Weise zu verstehen , und wie wir die Abende in diesem sehr einfachen Beispiel verwenden , wo wir es auf verschiedene Arten verwendet haben. Schauen wir uns zum Beispiel diese Schaltfläche Löschen an. Denken Sie daran, wenn wir auf Löschen klicken entfernt es aus dem DOM. Aber wie machen wir es? Das ist richtig. Wir hörten auf das Veto von Contiki zu diesem bestimmten Element. Und dann nutzten wir die Lockerung der Delegation, nicht wahr? Weil wir auf dieses Click-Ereignis gehört haben, nicht auf jedem einzelnen Latein. Wir haben es auf dem UL-Tag angehört. Und dann, wenn dieses Ereignis zum UL-Tag aufgesprungen ist, könnten wir das Ziel bekommen, aka Holz kann herausfinden, welche Schaltfläche innerhalb des übergeordneten Elements das LI-Tag ist. Und dann entfernen wir das natürlich einfach aus dem DOM. Macht das irgendwie SSD? Und was ist dann mit dem EDx Fall passiert? Was haben wir dort gemacht? Nun, in diesem Fall haben wir auf das, nicht das Click-Ereignis gehört , weil wir entweder in einer Schaltfläche oder einer Eingabe kennen, diese Art vom Benutzer in einem Formular ausgelöst wird, wird ein Submit-Ereignis ausgelöst. Also fallen sie. Wir haben auf das Submit-Ereignis auf dem Formular selbst gehört. Und es war wirklich episch, denn sobald das eingereicht wurde, schuf Engel im Inneren ein neues Element on the fly. Wir bearbeiten seine Verluste dynamisch mit der Klassenlisten-API, und dann bearbeiten wir diese in unsere Liste. Deshalb ist eine Flotte oder OT-Huhn. Und wir klicken auf Hinzufügen. Es wird in das DOM und dynamisch bearbeitet. Und natürlich mussten wir das Standardverhalten einer Formulareinreichung wieder verhindern , oder? Wir mussten beweisen, dass der Standard ist. Und dann haben wir gerade diese Liste Checkbox abgedeckt. Und wieder haben wir kein Klick-Event angehört. Wir haben für ein Submit-Ereignis gehört. Wir haben auf das Änderungsereignis gehört, da ein Kontrollkästchen eine Änderung der Indexdatei jedes Mal hat, wenn sie sich ändern, Status weitergeht und weiter. Und ja, es gab nicht wirklich einen Bedarf für eine Delegation. Wir haben gerade auf diese Adern auf der eigentlichen Checkbox selbst gehört. Und natürlich, wenn ein Kontrollkästchen aktiviert ist, haben wir es geschnappt. Und wir haben seine Anzeigeeigenschaft an das Nanosystem gesteckt. Sehr lustig. Und Sie können sehen, dass wir den ganzen Weg durch verschiedene Ereignisse zugehört haben. Und deshalb habe ich dieses Beispiel gewählt, weil es viele verschiedene Typen durchläuft. Und Sie können sehen, wie logisch jeder ist. Es macht viele Szenen, wenn Sie intuitiv verstehen, was los ist. Jetzt reden wir darüber. Suche nach Elementen. Wenn sie verwenden eine beginnt Eingabe in einem Suchelement, wir wollen und müssen diese Elemente in dieser Liste unten zu töten. Auch hier werden wir nicht auf ein Klick-Ereignis hören , weil der Benutzer noch nichts klicken hat. Worauf werden wir hören? Wenn in diesem Fall werden wir für das Schlüsselereignis zu hören. Zum Beispiel, wenn der Benutzer drückt ihn auf der Tastatur, sobald sie heben den Finger, wollen wir, dass unsere Funktion durch alle Elemente zu suchen und ich werde Lebensmittellisten, die diesen Charakter haben, Amy. Wenn der Benutzername zum Beispiel I, L, K spricht , wollen wir dann den gesamten Textblock packen, das ganze Wort Maulwurf. Und wir wollen das durchsuchen, durch unsere Listen. Also das wird nur ein weiterer cooler V2 hören, fallen. Und wie Sie sehen werden, ist es nicht so schwierig. Du näherst dich ihm Schritt für Schritt. Ich habe von Zeichen gehört, um Sinn zu machen. Wenn es sich keine Sorgen macht, werden wir es gemeinsam durchmachen. Und wie Sie sehen werden, werden wir es Schritt für Schritt machen. Die eine Sache, die ich aufrechterhalten möchte. Wir werden es mit den Strahlen zu tun haben. Wir werden es mit Methoden zu tun haben, um diesen schwarzen Index zu löschen. Und wir werden auch durch Arrays schleifen und die foreach-Methode verwenden. Wenn Sie ein wenig verwirrt darüber sind, wie JavaScript funktioniert, schauen Sie sich bitte meinen kompletten JavaScript-Großmaster-Kurs oder irgendetwas an, das ist cool. Es ist auch ein lustiger Kurs. Und ich durchmache genau das, was JavaScript in diesem Kurs bedeutet. Also, wenn du verwirrt wurdest, ein paar verwirrt, verstehe diese Dinge. Also auf hohem Niveau, mach dir keine Sorgen, ich bin sicher, du wirst in der Lage sein, mitzuverfolgen. Aber dann muss ich blubber, Blubber. Lasst uns darauf eingehen und wir sehen uns in der nächsten Vorlesung. Hallo. 16. Wie man das Eingabefeld und dessen Wert: Ok. Ich habe gerade einen Haarschnitt. Ich fühle mich frisch, ich fühle mich gut. Und lasst uns in die Suchelemente kommen. Es ist sehr, sehr cool. Und wieder , wie machen wir es und wo fangen wir an? Nun, erstens können Sie sehen, dass wir dieses Eingabefeld haben und wir wissen aus unserem Code, dass wir dies in einer Form gelesen haben. Das allererste, was wir tun müssen, ist, dass wir dieses Formular greifen müssen. Wenn wir unseren Code bekommen und wir im Moment in unserer Indexdatei, können wir sehen, dass wir dieses gesamte Eingabefeld in einen Fall gelesen haben. Wir haben dieses Formular gegeben, eine ID des Suchelements wird weit so gut steigen. Aber wie greifen wir dieses Formular? Es gibt nur wenige Möglichkeiten, die unseren Browser bekommen. Gehen wir einfach zur Konsole. Los geht's. Es ist klar, wie greifen wir diesen ganzen Zoom in ein wenig, damit Sie sehen können, wie ich bereits erwähnt habe, es gibt nur wenige Möglichkeiten Lasst uns damit anfangen zu spielen. Sagen wir einfach Lead-Form entspricht document.getElementById. Und wie nannten wir es Suchelement. Mal sehen, ob das funktioniert und lassen Sie uns dieses Formular ausloggen. Also ja, wir bekommen das Formular, dass wir es öffnen. Wir brauchen die Eingabe direkt. Also vielleicht, was wir brauchen, um den venösen Zugang zu der Form zu tun. Und dann können wir natürlich einen Abfrage-Selektor machen. Und der Abfrage-Selektor ist, können wir die Eingabe erhalten. Würde das funktionieren? Und da gehen wir. So können wir das Formular bekommen. Ich kann die vielen anderen Möglichkeiten erwähnen, wenn wir zu unserem Code gehen oder wir tatsächlich nicht einmal zu unserem Code gehen müssen. Wir können einfach diesen Elementinspektor holen und uns diese Form ansehen. Wir haben uns keinen Ausweis gegeben. Also, was wir in unserem Code tun könnten, wie wir hier reingehen könnten, können wir diesem eine ID des Suchelements geben. Speichern Sie, dass wir zu unserem Browser zurückkehren können, löschen Sie die Konsole. Und lassen Sie uns jetzt Formular gleich Dokument definieren, Element für ID erhalten. Und die ID, die wir ihm gegeben haben, war Suchelement. So könnten sie ein anderer Weg sein. Das haben wir geliebt. Und wir bekommen den Eingangsbus. Sie sind viele Möglichkeiten, um eine Katze zu häuten, oder? Lasst uns das auffrischen. Lassen Sie uns die Konsole löschen. Gehen wir zu unserem Code und lassen Sie uns diese ID loswerden. Ich will dir nur einen anderen Weg zeigen. Und wir werden den Sway einen Opcode verwenden. Was wir tun werden, ist, dass wir eine Variable namens Form definieren. Und denken Sie daran, dass das Eigentum dieses Formulars in unserem Dokument war. Und das können wir nutzen, um auf Formulare zuzugreifen. Wenn wir also auf unser Dokument zugreifen und auf diese Eigenschaft zugreifen, die als Formulare bezeichnet wird, was gibt uns das? Lassen Sie uns alle Formulare auf unserer gesamten Seite, oder? Und wir haben nur zwei. Wir haben die Suchatome Form und wir haben auch dieses Formular regelmäßige Art und Weise, wie der Benutzer entscheiden kann, was er zur Liste hinzufügen möchte. Also wollen wir uns mit diesem zuerst gebildet hässlich beschäftigen. Eine Möglichkeit, das Formular zu verlassen, wäre also, auf unsere Formulare, HTMLCollection, zuzugreifen. Und dann gibt es noch ein paar Möglichkeiten, es zu tun. Wir können entweder auf das erste Element im Array zugreifen, das ganze Formular mit einer ID des Suchelements. Es ist ein anderer Weg, es zu tun. Und dann können wir natürlich auf unseren Abfrageselektor zugreifen. Und wir wollen das Eingabefeld bekommen. Und wir bewegen uns über das und wir bekommen zu dem, was wir wollen, Punkt durch all dies ist nur, um Ihnen ein intuitives Gefühl zu geben , wie viele verschiedene Möglichkeiten es gibt, etwas als Entwickler zu tun. Es hängt also nur von Ihrem Stil ab und was Sie sich am wohlsten fühlen. Okay, war das alles aus dem Weg? Fangen wir an. Der erste Schritt ist, dass wir dieses Eingabefeld nicht Woche greifen müssen, weil wir greifen müssen, dass die Eingabe des Benutzers dort nimmt. Also lasst uns jetzt anfangen zu codieren. Gehen wir zu unserer App-Datei. Das Letzte, was wir getan haben, war Dinge zu verstecken und lassen Sie uns das einfach kopieren. Und jetzt wollen wir nach Artikeln suchen. Und wie ich bereits erwähnt habe, ist das erste, was ich will dass wir uns dieses Sucheingabefeld schnappen. Also lassen Sie uns jetzt eine Konstante definieren, weil dies sich nie ändern wird, werden wir immer nur auf ein Sucheingabefeld verweisen. Nennen wir es „Suchen“. Und wir wissen übrigens, kurz bevor ich den Grund fortsetze, dass ich Großbuchstaben setze, sie sind nur Konvention, wenn Sie eine Konstante definieren, Variable, die, wenn Sie ändern, anderen Worten, um es in Großbuchstaben zu setzen. Wenn wir es später in unserem Code sehen, wissen wir, dass es eine Konstante ist. Also lasst uns diese Kiste schnappen. Das erste, was wir tun können, ist, dass wir auf unser Dokument zugreifen und dann auf das Eigentum dieses Formulars zugreifen können . Und wie wir gerade in der Konsole gesehen haben, wissen wir, dass wir es Suchelemente genannt haben. Das war die ID unseres vollständigen HTML. Und wir schauen uns diese Form an. Wir wissen, dass es eine ID des Suchelements hat. Genau deshalb mache ich es. Ja, es ist kein Artikel zu Artikel. So zum Glück habe ich dann unseren Hals überprüft wir wollen, natürlich x ist unsere Query Select API. Und wir wollen die Eingabe. Okay, alles auch. Gut, Wir haben unseren Beitrag. Was ist der nächste Schritt? Nun, jedes Mal, wenn der Benutzer die Taste nach unten drückt und diese Taste hebt, wollen wir auf dieses Schlüsselereignis hören. Probieren wir es aus. Es ist kein Klick-Event. Ja, der Benutzer übermittelt nichts, was nur buchstäblich Text eingibt. Was wir jetzt tun wollen, ist, dass wir Ereignis-Listener hinzufügen möchten. Also greifen wir unsere Konstante und wir greifen auf die Add-Ereignis-Listener-Methode zu. Und hier wollen wir auf den Schlüssel und die Liste hören. Definieren Sie einfach unsere Hand direkt hier und wir wollen auf dieses Ereignisobjekt zugreifen. Wie Sie sehen werden, verwenden Sie einfach die Fehlersyntax und unser Fleisch des Codes geht innerhalb dieser geschweiften Klammern. Nichts Neues. Du weißt schon, wer das hier ist. Und nur um sicherzustellen, dass das Keyup-Ereignis funktioniert, Lassen Sie uns einfach Konsolenprotokoll. Es funktioniert auf dem Bildschirm. Gehen wir also zu unserer Konsole, oder entschuldigen Sie, gehen wir zu unserem Browser. Gehen wir zur Konsole. Und lasst uns hier reingehen. Und jetzt, wenn ich eine Taste drücke, nenne sie Leertaste, kriegen wir es schlimmer. Ja. Wir wissen also, dass wir ein gültiges Ereignis in unserem Eingabefeld registriert haben, und ich werde das Eingabefeld durchsuchen. Und jedes Mal, wenn der Benutzer auf Aquino klickt, besitzen wir während dieses Ereignisses buchstäblich wahr und dieser Handler wird ausgeführt. Ufo, ich liebe dieses Zeug, so cool. Okay, also gehen wir zurück zu unserem Code und lassen Sie uns diese Konsole loswerden. Was ist jetzt der nächste Schritt? Wird der nächste Schritt ist, dass wir die tatsächliche Eingabe greifen wollen nimmt sich. Tun wir das nicht? Sagen Sie einfach, ja, nehmen wir den Text des Benutzers. Und wie machen wir das? Nun, es ist sehr einfach und um es Ihnen zu beweisen, lassen Sie uns eine Variable namens Text definieren. Und wir können auf unser Ereignisobjekt zugreifen, dieses Keyup-Ereignisobjekt. Wir können dann auf das Ziel zugreifen, das natürliche Schlüsselretinas ist, und wir wollen seinen Wert erhalten. Und wenn wir nur Protokolltext konsolen, sollten wir es sehen. Tom-Browser. Lass uns die Konsole runter gehen. Konsole und Fräulein lehrte nur den Brief ein.Also, was ich tun werde, wir haben Kinder Konsolenprotokoll auf dem Bildschirm, B, C, D. Das ist cool, richtig? Und Sie können beginnen zu sehen, wie wir auf die Einsätze und Neuheiten zugreifen können. Jetzt müssen wir anfangen, dies mit dem zu vergleichen, was in unserer Liste der Artikel zu kaufen ist. Aber das ist etwas hier. Ich will es dir zeigen. Wenn wir ein Kapital D und ein OG eingeben. Es wird zwischen Groß- und Kleinschreibung unterschieden, nicht wahr? Wir bekommen tatsächlich ein Kapital. Wenn Sie also in unseren Versuchen schauen, Listen auf der Seite zu kaufen und wir uns Milch ansehen, sehen wir es als Kapital M Also, wenn der Benutzer eine Meile eingibt, okay. Lassen Sie mich das noch mal machen. Für den Raum. Wenn die Verwendung von Zeit Rauch ohne Kapital M, nicht genau gleich zu den Kapitalhüllen überhaupt sein. Wenn der Benutzer Koch eingibt, wird es nicht genau mit dem Koks unter diesem Kleinbuchstaben übereinstimmen. Wie gehen wir mit diesem Problem um? Nun, eigentlich ist es einfacher, als du vielleicht denkst. Nun, wir müssen sicherstellen, dass, was auch immer es die Benutzertypen braucht, wir wollen es in Kleinbuchstaben konvertieren. Wir möchten, dass bei der Suche Groß- und Kleinschreibung nicht berücksichtigt wird Es spielt keine Rolle, wo die Benutzertypen von Groß- oder Kleinbuchstaben. Es sollte immer noch das eigentliche nur Wort selbst betrachten. Also, wie machen wir das? Nun, es ist sehr einfach. Lassen Sie uns diese Konsole loswerden. Ich werde kommentieren. Nehmen wir einfach an, lassen Sie uns die Takes des Benutzers greifen und es in Kleinbuchstaben konvertieren , indem Sie JavaScripts in Kleinbuchstaben Methode verwenden. Und es ist sehr einfach zu bedienen. Wir greifen, dass der Benutzer getippt und nativ zu uns direkt aus der Box nimmt , ist die zwei Kleinbuchstaben Methode, die uns von JavaScript zur Verfügung gestellt wird. Und wenn wir Log Listen noch einmal konsolen, tut mir leid, ich weiß, dass wir langsam gehen, aber es ist so wichtig für Sie, das zu verstehen. Gehen wir weiter, Kayla-Konsole. Und es ist Zeit MLK Hauptstädte. Aber Sie können sehen, dass wir alle Zeichen in Kleinbuchstaben konvertiert haben. Das ist fantastisch. Ich werde Spaß haben, eine Tonne zu lernen. Ich möchte hier anhalten und möchte, dass wir über diese ToLowerCase-Methode etwas detaillierter sprechen. Ich weiß, dass die meisten Dozenten gerade jetzt weitermachen werden, aber ich möchte, dass Sie genau verstehen, wie es funktioniert und wie unser Code funktioniert, weil es Ihnen nur helfen wird, ein großartiges Programm zu werden. Und so möchte ich nur, dass wir jetzt innehalten und eine Einheit, um ein wenig detaillierter zu diskutieren , was diese Kleinbuchstaben Methode macht und wie sie funktioniert. Wir sehen uns jetzt. 17. Einführung in die Unterseite:: Crew, ich schätze, was ich heute Morgen vom ersten Mal an getan habe, habe ich eine Yoga-Sitzung gemacht und bin zerbrochen in diesem Ding namens „Vogel des Paradieses“ genannt. Feuer hat mir den Kopf gejagt. Jedenfalls habe ich gerade eine Menge Schmerzen. Aber das sollte uns nicht aufhalten, etwas über JavaScript zu lernen. Und ganz speziell möchte ich, dass wir über diese Methode lernen, die Kleinbuchstaben genannt wird. Es klingt einfach, aber ich möchte nur, dass Sie genau verstehen, wie es funktioniert, weil es eine sehr, sehr nützliche Methode ist, die uns direkt von JavaScript aus zur Verfügung gestellt wird. Obwohl es keine Argumente braucht, ist es eine super praktische Methode. Warum? Nun, in vielen Fällen möchten Sie, dass Ihr Text oder Sie möchten, dass Ihre Strings Groß- und Kleinschreibung nicht berücksichtigt. Aka, du willst keine Hauptstädte zu einer Fälschung, was auch immer du tust. Wenn Sie beispielsweise eine Liste haben und ein Benutzer ein bestimmtes Wort eingibt, möchten Sie manchmal sehen oder vergleichen, ob dieses Wort in der Liste enthalten ist und Sie nicht möchten, dass Großbuchstaben Ihre Formeln ruinieren. In diesem Fall, warum nicht einfach alles in Kleinbuchstaben konvertieren? Und um das zu tun ist, verwenden wir die zwei Kleinbuchstaben emittiert. Also ohne weiteres, lassen Sie uns in den Präsentations-Cookie springen und es spricht immer noch über die zwei Kleinbuchstaben Methode, genießen. Was genau ist diese ToLowerCase-Methode? Sehr einfach alles, was es tut und es ist ziemlich intuitiv , dass Ihren Geschmack in Kleinbuchstaben umwandelt. Mit anderen Worten, die ToLowerCase -Methode gibt die aufrufende Zeichenfolge zurück, die Zeichenfolge, für die Sie sie aufgerufen haben. Es wandelt diesen Zeichenfolgenwert in Kleinbuchstaben um. Und ich könnte einfach aufhören. Ja, aber ich möchte, dass Sie nur ein wenig mehr über diese ToLowerCase-Methode wissen. Erstens ist es eine JavaScript-Funktion wird uns von der JavaScript-Sprache zur Verfügung gestellt. Suchen braucht keine Argumente, aber lass dich nicht täuschen. Es ist immer noch eine sehr mächtige Methode. Und was ich wirklich will, dass du verstehst, ja. Und ich möchte in diesem Punkt innehalten. Die Methode mit zwei Kleinbuchstaben ändert die ursprüngliche Zeichenfolge nicht. Stattdessen wird die neue modifizierte Zeichenfolge mit allen Kleinbuchstaben generiert. Lass mich rüber zur Konsole springen und ich zeige dir, was ich damit meine. Okay, wir wissen also, dass die Kleinbuchstaben Methode die ursprüngliche Zeichenfolge nicht beeinflusst. Ich will es dir jetzt nur beweisen. Wie soll ich da machen? Nun, lassen Sie uns eine Zeichenfolge erstellen und nennen sie einfach die Symptome originell. Und sagen wir einfach, wir machen das gleich verrückten Fröschen oder einfach nur, na ja, du weißt schon, verrückt. Wie geht's? Und dann lassen Sie uns einen neuen Satz erstellen. Also die Punktzahl, dass Satz niedriger. Und ja, ich möchte, dass wir auf unseren ursprünglichen Satz zugreifen. Und das ist es, was wir als Nächstes tun sollen. Ich möchte, dass wir auf die zwei Kleinbuchstaben zugreifen. Und was wirklich genial ist, ist, dass, weil wir eine Zeichenfolge haben und dieser Satz original straffe Zeichenfolge ist, wir automatisch Zugriff auf JavaScripts auf Kleinbuchstaben Methode haben. Wie greifen wir darauf zu, wenn wir mit der Punktnotation beenden? Und natürlich können wir einfach mit der Eingabe in Kleinbuchstaben beginnen und unsere IDE nimmt diese Methode bereits auf. Also kann ich einfach auf Tab öffnen und geschlossene Klammern klicken, um diese Methode auszuführen. Und wir sind fertig und bestäubt. Jetzt kann ich einen Browser öffnen und wir können Dinge auf dem Bildschirm protokollieren. Aber ich möchte etwas namens Cloaca verwenden. Wenn wir zu meinem Aussterben Tibia gehen, und ich fange an, schneller zu tippen. Wir können sehen, dass ich Aka in meiner IDE installiert habe. Es ist wirklich, wirklich nützlich, so sehr zu empfehlen. Und alles, was wir tun müssen, um Herd zu laufen ist, wir rufen buchstäblich das Suchfeld hier. Ich drücke Control Shift P auf meiner Tastatur, und ich möchte cloaca auf der aktuellen Datei starten. Es ist nur ein zusätzliches Plug-in und es erlaubt uns JavaScript in Echtzeit in dieser Datei auszuführen. Das tut es. Also los geht's und alles, was ich tun will, ist, dass ich den Satz original ausloggen möchte. Und Sie können sehen, dass die blauen Daten nimmt. Das ist, was getröstet wird, Beine, was wird uns von JavaScript zurückgegeben und der Walker arbeiten, es erlaubt uns nur zu sehen, wie eine Korrektur in Echtzeit für Sie sehr nützlich. Was denkst du, wird passieren, wenn wir den Satz tiefer zurückgeben? Ich bin sicher, dass Sie uns wahrscheinlich schon erraten haben. Nun, es wird passieren, ist, dass wir genau das Gleiche bekommen, das alles in Kleinbuchstaben. Aber was ich Ihnen beweisen konnte, ist, dass unser Urteilsspruch, ursprüngliche Satz, den wir zusammen geschrieben haben, unverändert ist. Diese ToLowerCase-Methode ändert diese ursprüngliche Zeichenfolge nicht. Okay, irgendwie heilige Menschen werden beobachtet. Lasst uns weitermachen. Okay, cool. Also haben wir gesehen, dass es die ursprüngliche Zeichenfolge nicht ändert. In der Tat erzeugt es eine neue. Aber zu diesem Zeitpunkt können Sie immer noch Ihren Kopf kratzen. Sie werden möglicherweise kühl und Lärm von JavaScript bereitgestellt. Aber wir kommen genau aus. Und der Beginn ist Drumroll, bitte. Es kommt aus dem String-Objekt in JavaScript. Und denken Sie daran, dass das String-Objekt ein globales Objekt für alle Strings ist. Wieder, lassen Sie mich auf die Konsole springen in Bildern zeigen Ihnen, wo wir es finden können. Lasst uns genau dort abholen, wo wir aufgehört haben. Denken Sie daran, dass wir den Satz geschrieben haben, wir haben ihn in Kleinbuchstaben umgewandelt. Jetzt will ich dir nur beweisen, dass es an einer Schnur sein muss. Eine Möglichkeit, dies zu tun, ist, dass wir den Typ des Operators verwenden. Das ist also Konsolenprotokoll. Und lasst uns gehen und wir wollen uns anschauen, was unser ursprünglicher Typ ist. Und wir können sehen, was uns von JavaScript zurückgegeben wird, ist ein String-Typ. Also kennen wir unsere Symptome. Ursprüngliche Variable ist eine Zeichenfolge, und deshalb könnten wir diese ToLowerCase-Methode ausführen. Aber Sie fragen sich wahrscheinlich, Weg ist diese genaue Methode von einem Howdy es sehen? Nun, es ist sehr, sehr einfach. Gehen wir einfach und öffnen Sie einen Browser. Also werde ich nur mit der rechten Maustaste auf mein Chrome Mu Cognito. Und gehen wir zum Konsolen-Cookie. Öffnen wir die Konsole. Vergrößern Sie mich, damit Sie sehen können, was los ist. Und es ist sehr einfach alles zu tun ist, dass ich trösten und tun möchte, übrigens, ist anders als Konsolenprotokoll es uns gibt, was wir wollen, es zu tun. Aber im JSON-ähnlichen Format, in einem baumartigen Format. Und natürlich möchte ich JavaScript-String-Objekt bekommen, denn denken Sie daran, dass wir wissen, dass unser ursprünglicher Satz eine Zeichenfolge ist. Also wissen wir, dass es vom Typ String ist. Und wenn wir die Schnur öffnen, und wieder, er ist nicht viel auf hier. Wir haben Links, wir haben Namen. Aber was wir uns ansehen wollen, ist dieser Prototyp weil er viele Methoden und Eigenschaften erbt. Und da es sich um eine Zeichenfolge handelt, es sich hier um einen Prototyp als String handelt, erhalten wir viele Methoden und Eigenschaften vom String-Typ. Und wenn wir nach unten scrollen, sollten wir zwei Kleinbuchstaben finden. Und da ist es. Wir haben es gefunden, weißt du, wo es herkommt. Ich hoffe, es ergibt Sinn. Wir sind noch nicht fertig. Also lasst uns wieder in die Vorlesung springen. Wir haben gesehen, dass es aus dem String-Objekt und einem hohen Fall kommt, es ist ziemlich intuitiv, dass nur mit Strings funktioniert. Wenn Sie versuchen, in anderen Datentypen zu analysieren, wie null undefined, wir sogar eine Zahl. Der JavaScript-Parser wird Ihnen einen Fehler auslösen. In der Tat erhalten Sie einen Typfehler. Stellen Sie also sicher, dass Sie den Typ nehmen, bevor Sie ihn in diese Funktion analysieren. Andernfalls stürzt Ihre App ab. Wovon rede ich? Nun, lassen Sie mich noch einmal zur Konsole springen und führen Gedanken zusammen codieren, nur um dies in Aktion zu sehen. Eine letzte Sache, bevor wir das beenden, denken Sie daran, dass wir sagen, dass es nur für einen String-Typ verwendet werden kann? Entschuldigung, scrollen wir nach oben. Wir sind gerade fertig. Wir werden genau dort abholen, wo wir die Konsole aufgehört haben. Also, was bedeutet das? Nun, das bedeutet, wenn wir eine Nummer haben, sagen wir einfach 85 und wir versuchen, auf Kleinbuchstaben zuzugreifen. Was denkst du, wird passieren? Nun, wir erhalten einen Syntaxfehler, ungültiges oder unerwartetes Token. Wir können es nicht toLowerCase-Methode für eine Nummer nennen. Das macht Sinn. Was ist mit einer Art Array? Also sagen wir, wir haben eine Moräne nur mit einem Gegenstand und heißen Bu. Und wir versuchen, Zugang zu Kleinbuchstaben ist wirtschaftlich. Wissen, dass wir einen Typfehler bekommen. Wir können diese Funktion dazu nicht aufrufen. Was ist mit undefiniert? Nun, wenn wir versuchen, wieder auf Kleinbuchstaben auf undefined zuzugreifen, wieder, wird es nicht funktionieren. Und was ist jetzt, wenn wir null versuchen? Ich denke, das wird funktionieren. Das ist also der Punkt, den ich ansprechen möchte. Wir können nur auf ToLowerCase Methode auf Strings zugreifen. Ich hoffe, Sie werden Spaß und haben viel gestritten. Dies ist also nur ein wenig mehr Details zur ToLowerCase-Methode, die Sie zuvor vielleicht nicht gekannt haben. Fahren Sie weiter, bleiben Sie motiviert. Und wir sehen uns in der nächsten Vorlesung. 18. Zugreifen und Looping über unsere Tags: In Ordnung, springen wir zurück in unser Projekt. Ich hoffe, du lernst viel. Wir haben bereits diese ToLowerCase-Methode gesehen. Es ist großartig. Verrottet. Und jetzt möchte ich, dass wir unsere Suche fortsetzen. Box ist eine Art von Vergleich der Benutzer nimmt, dass ihr Recht, Artikel zu kaufen. Und wir filtern nur für die Dinge , die der Benutzer in diesem Kontrollkästchen eingegeben wird dieses Eingabefeld, Sorry, so sind wir weit im Moment. Denken Sie daran, dass wir dieses Eingabefeld hier mit Suchelementen haben. Wir haben es geschafft, es mithilfe der Bezeichner, der DOM-Zugriffsmethoden zu finden . Und was wir auch getan haben, wie wir auf diesem Eingabefeld wissen, ist eine nützliche Eigenschaft namens Wert, die uns erlaubt, zu extrahieren, was der Benutzer in dieses Texteingabefeld eingegeben hat. Benannt, weil es eine Zeichenfolge ist, weil es ein Takes ist. Wir wissen, dass wir JavaScript in Kleinbuchstaben Methode verwenden können, um was der Benutzer eingegeben alle in Kleinbuchstaben zu konvertieren. Das ist genau, wo wir bis jetzt. Also schätze ich, der nächste Schritt ist, lasst uns in den Code springen und uns weitermachen. Sollen wir gehen? Wir haben buchstäblich geschnappt, dass Wert verwendet. Denken Sie daran, aus dem Venenziel, das Eingabefeld ist es als eine nützliche Eigenschaft namens Wert. Wir extrahieren den Wert des Benutzers , der eine Zeichenfolge ist, es ist ein Geschmack. Und deshalb greifen wir auf Javascripts zu Kleinbuchstaben Methoden zu, die gerade jetzt wissen wir, dass wir bekommen, was der Benutzer in Kleinbuchstaben eingegeben hat. Cool, Lassen Sie uns die Konsole löschen. Was ist der nächste Schritt? Wir wollen jetzt, dass wir alle LI-Tags schnappen. Denn was wir tun müssen, ist, dass wir alles vergleichen müssen, was der Benutzer eingegeben hat, mit jedem Element in der Liste vergleichen müssen. Es ist jeden LI-Tag zu packen. Der erste Schritt ist, dass ich unsere Lebensmittelliste finden wollte. Und das ist, natürlich haben wir das schon oft gemacht. Wir können hier einfach QuerySelector verwenden. Viele Möglichkeiten, um die Katze zu häuten, wenn es um die Programmierung geht. Und was will ich packen? Werde ich gerne unsere Lebensmittellisten-ID holen, und ich möchte alle UL-Elemente greifen. Also für Godot Index-Seite hier, nur um Ihnen zu zeigen, was wir tun. Wir scrollen nach unten zu Abschnitt drei faulen. Wir können sehen, dass wir alles in diesem div mit einer ID der Lebensmittelliste mieten. Ich möchte dieses UL-Tag greifen, weil dieses UL-Element alle Verbündeten darunter enthält. Es ist alles, was wir hier getan haben. Also haben wir diese Lebensmittelliste. Und jetzt möchte ich jede Liste, Element und Hals, die wir sagen können, ist beleuchtet Lebensmittel, weil wir wissen, es wird Plural ist mehr als ein LI-Tag. Und wir wissen, dass das die Lebensmittelliste sein wird. Und dann können wir die get-Elemente durch Tag-Name-Methode zugreifen. Auch dies wird uns von der DOM-API zur Verfügung gestellt. Es ist nicht von JavaScript. Da gehen wir. Jetzt haben wir alle unsere LI-Tags. So weit, so gut. Aber du würdest mir jetzt zustimmen, wir haben alle LI-Tags. Wir brauchen einen Weg, um all diese zu durchlaufen und zu konkurrieren. Sie schmecken nach dem, was der Benutzer eingegeben hat. Und wenn Sie sich von Teil 1 der Serie erinnern, dass getElementsByTagName uns eine HTMLCollection zurückgibt. Und diese HTMLCollection, obwohl sie wie ein Array aussieht und wie ein Array versiegelt, ist es kein ganz Array. Und weil es nicht ganz ein Array ist, haben wir nicht viele Array-Methoden. Und eine der Methoden, die ich in dieser spezifischen Übung verwenden möchte, ist die volle jede Methode. Um die ForEach-Methode zu verwenden, benötigen wir eine Möglichkeit, die HTMLCollection in ein Array zu konvertieren. Zach macht irgendwie Nähte. Denn wenn wir das tun können, können wir diese ForEach-Methode verwenden. Wie machen wir das? Nun, eine Möglichkeit besteht darin, auf das, was als Array von der Methode bekannt ist, zuzugreifen. Also, wenn wir das definieren, sagen Sie einfach hier, um zu konvertieren. Nun, sagen wir einfach, lassen Sie uns die Lebensmittel in ein Array konvertieren, damit wir auf die volle jede Methode zugreifen können. Eine Möglichkeit, dies zu tun, besteht darin, eine neue Variable zu definieren. Jetzt in JavaScript ist es als Lebensmittelgeschäft definieren, Lebensmittel Array. Und alles, was wir brauchen, um diese Achse JavaScript-Array zu tun. Und das Array, wir haben viele Eigenschaften und Methoden. Einer von ihnen wurde von gerufen. Und ich möchte ein Array aus dem Lebensmittelobjekt oder der Lebensmittelvariablen erstellen , die wir gerade erstellt haben. Das ist eine Menge zu nehmen und bevor ich weitermache, möchte ich wieder aufhören. Ich möchte Ihnen erklären, worum es bei diesem Array von der Methode geht. Wir haben hier ein Argument eingebracht, aber es braucht mehr. Also lasst uns innehalten. Lass uns eine Pause machen. Lasst uns in eine andere Vorlesung springen. Und ich möchte nur, dass wir dieses Array von der Methode im Detail betrachten. Ich hoffe, du hast Spaß und bleibst hoffentlich leer. Szene nach oben. 19. Einführung in Array.from(): Ich hoffe, Sie haben eine Menge Spaß in diesem Kurs. So sehr ich auch bin. Ich liebe es, diese Dinge zusammenzubringen und habe unterrichtet, was ich über viele, viele Jahre gelernt habe. Wie auch immer, das nächste, was ich wollte, dass wir sehr kurz diskutieren, ist ein weiteres sehr nützliches Bett, ein wenig erweiterte Funktion in JavaScript namens Array von. Und was macht diese Methode? Was die sehr, sehr, sehr grundlegende Ebene, alles, was es tut, ist, dass es ein Array erstellt, aber nicht aus einem Array, weil sie sinnlos wären. Es erstellt ein Array aus zwei Arten von verschiedenen Dingen. Erstellt ein Array aus einem und Array-ähnlichen Objekt. Und alles, was ich mit Datensatz meine, ist es ein Objekt, das eine Längeneigenschaft hat. Und zwei, Sie können ein Array aus einem iterierbaren Objekt erstellen, Dinge wie mentaler Zustand. Wie auch immer, das ist jetzt wichtiger. Das Wichtige zu verstehen ist, dass das Array von der Methode etwas annimmt und in ein Array konvertiert wird. Und warum wollen wir das tun? Nun, wenn wir es in etwas schaffen können, das wie ein Array ist, können wir uns bestimmte Methoden und Eigenschaften zur Verfügung haben , die wir auf diesem neu geschaffenen Objekt verwenden können, ein ganzes, zustandsenergieerzeugtes Array. Sag mal, dass irgendwie Sinn ergibt. Mach dir keine Sorgen, wenn es nicht das erste ist, was ich möchte, dass Sie verstehen, was das Array von der Methode ist, dass es sich im Array selbst befindet. Was ich damit meine, lass mich zur Konsole springen und es dir schnell zeigen. Ich habe meine Konsole geöffnet. Ja, und das Einzige, was ich Ihnen zeigen möchte, ist, wie Sie das von MTD finden können. Und wie ich bereits erwähnt habe, ist es auf dem Array-Objekt in JavaScript selbst. Wie kann ich beweisen, dass zwei erstens werden, lassen Sie uns einfach das Array herauströsten. Und wenn wir das tun, ja, das Array, das uns von JavaScript zur Verfügung gestellt wird. Wir öffnen das auf. Wir scrollen nach unten und da ist es. Die, ist die von macht es ziemlich einfach, oder? Also gehen wir hin. Wir wissen, dass das Array von der Methode, wie es auf dem Array-Objekt von JavaScript gefunden wird, irgendwie Sinn macht, oder? Aber wir sind noch nicht fertig. Lassen Sie mich in den Vortrag springen und lassen Sie uns über diese Methode etwas genauer sprechen . 20. Wie funktioniert die Array.from(): Also, was genau ist das Sub-Array von der Methode? Wir werden im Grunde sehr intuitiv verletzen, alles, was es tut, ist, dass es ein Array aus einem Array-ähnlichen Objekt erstellt, ein eigenes iterierbares Objekt. Aber ich will jetzt darauf hineinkommen. Ähnlich wie die toLowerCase-Methode ist das Array von der Methode eine reine JavaScript-Funktion. In der Tat wurde es als Teil von ES6 eingeführt. Es6, übrigens, war nur eine große Überholung und Upgrade auf t0 ist fünf und Sie wahrscheinlich nicht den Kopf kratzen, aber Sie haben vielleicht schon vergessen, woher kommt es. Und wir haben gerade gesehen, dass es vom Array-Objekt selbst stammt. Aber das sind alles Dinge, die Sie bereits wissen. Also, wie funktioniert es? Nun, es ist sehr einfach, auf diese Methode zuzugreifen. Wir beginnen mit dem Zugriff auf das Array-Objekt von JavaScript innerhalb von xi, der von -Methode. Und die front-Methode nimmt ein Argument und ihr Argument ist ein Array-ähnliches Objekt. Aber bevor wir mehr darüber reden, was es tut, sie zum Codierungs-Editor und führen zu sehen, wie es in Aktion funktioniert. Bevor wir anfangen, auf das Array von der Methode näher zu kommen, möchte ich nur, dass Sie verstehen, wie es funktioniert. Denk daran, was ich gesagt habe. Es muss ein Array-ähnliches Objekt auf iterierbarem Objekt sein, damit wir dieses Array von der Methode verwenden können. Also, wie funktioniert es? Nun, lassen Sie uns ein Array-ähnliches Objekt definieren. Und lassen Sie uns hier einfach sehr, sehr einfach sein. Sagen wir einfach, was der Fall ist. Also wissen wir, dass es in diesem Fall eine Zeichenfolge ist. Wie sieht das Array aus? Nun, erstens möchte ich nur sagen, auftauchen, gemeinsam auftreten. Offen. Kauket ermöglicht es uns, JavaScript in Echtzeit in unserem Texteditor auszuführen. Also müssen wir nicht weiter zum Browser springen, nur viel schneller, um Ihren Code zu erhöhen. Es ist wirklich praktisch. Jedenfalls. Wie funktioniert es? Nun, lassen Sie uns Konsole etwas protokollieren und lassen Sie uns auf JavaScript-Array-Objekt auf Namen zugreifen. Wir wissen, dass es eine Methode gibt, die von aufgerufen wird. Und wir wollen unser Array wie übergeben und wie Sie sehen können, braucht es unser Array-ähnliches Objekt wert und es wandelt es in ein Array um, das wirklich, wirklich genial ist. Und Sie können hier sehen, unser Array besteht nur aus jedem Liter in Röntgen. Und es ist, naja, es ist erledigt. Die Spitze zurück zur Vorlesung. Cool ist, dass sie Szenen machen. Wir haben uns ein sehr einfaches Beispiel angesehen, aber bedenken Sie nur, dass was dieses Array-ähnliche Objekt bedeutet? Es bedeutet nur, dass das Objekt eine length Eigenschaft und indizierte Elemente haben muss. Was meine ich damit? Nun, lassen Sie uns wieder auf die Konsole gehen, schauen Sie sich genau an, wovon ich rede. Chlorid Also haben wir uns dieses Beispiel hier angesehen, aber wie und warum funktioniert es? Denken Sie daran, das Array von der Methode wird nicht auf alles wie die Beschreibung Saison funktionieren , wie wir gesprochen haben, die nur auf Array-ähnlichen Objekten funktioniert. Und was das bedeutet, ist, dass das Objekt eine length Eigenschaft und D4 Indexelemente haben muss . Was soll ich meine? Nun, es ist an eine Konsole. Also lassen Sie mich mit der rechten Maustaste auf Google Chrome hier, neuer Inkognito-Modus. Und wir gehen zu einer Konsole und machen Szenen. Kannst du das X sehen? Und denken Sie daran, was wir sagen, lassen Sie uns einfach Hund Array-ähnliches Objekt als Wolf definieren. Und wir wissen, dass das Array von der Methode auf uns funktioniert. Wir haben gerade ein Beispiel dafür gesehen. Aber warum? Nun, um es Ihnen zu zeigen, lassen Sie uns dieses Array-Objekt konsolen und ich möchte auf sein Proton schauen. Und wenn wir das ausladen, wissen wir, dass es vom Typ String ist. Und wenn wir die String-Methode öffnen, Was großartig ist, ist, dass wir diese Link-Eigenschaft haben. Das meine ich mit einer Array-ähnlichen Objekt-ID muss dies richtig verknüpft haben, damit das Array von der Methode funktioniert. Also, da gehst du hin. Hope macht Szenen. Springen wir zurück in die Vorlesung oder ungerade. Also hoffe ich, es fängt an, für dich mehr Sinn zu machen. Und denken Sie daran, was ich vorhin gesagt habe, dass es mehr als ein Argument braucht. Eigentlich kann es bis zu drei Argumente dauern, kann eine Karte nehmen, und es kann dauern, worauf Sie sich beziehen möchten. Beachten Sie, dass diese Argumente optional sind. Wir müssen sie überhaupt nicht in diese Funktion setzen. Und viele Leute kombinieren tatsächlich das, dieses optionale Argument in dieser Kartenfunktion selbst. So oft werden Sie nur zwei Argumente im Array von der Methode sehen. Jedenfalls möchte ich nicht zu sehr ins Detail gehen. Ich kann Ihnen schnell zeigen, worum es auf der Karte geht. Also oben rüber zum Texteditor wieder. Und schauen wir uns an, wie das funktionieren würde. Last but not least, lassen Sie uns sehen, wie das zweite Argument für das Array von der Funktion funktioniert. Worum geht es denn? Nun, lassen Sie uns alles löschen, was wir zuvor auf unserem Bildschirm hatten. Und das definieren Sie ein Array ist nur sagen, dass unser Array einen Hund hat und Sie es erraten. Eine Katze. Freeway, einfach. Nun, was ich tun möchte, ist, dass ich eine Handler-Funktion definieren möchte. Ich möchte alles in diesem Array nehmen und möchte etwas auf dem Bildschirm abmelden. wird also JavaScript-Funktionsschlüsselwort verwendet. Nennen wir es Handler. Wir können es nennen, wie immer wir wollen. Die Hand wird in jedem Fall ein Tier nehmen. Und alles, was ich tun möchte, ist, dass ich nur Aussage zurückgeben möchte und ich werde hier Template-Literale verwenden. Und was ich sagen werde, ist, dass ich ein Tier sagen werde, das bereit ist zu gehen, zu Fuß, damit er geht. Das ist nichts zu tiefes. Es ist eine sehr, sehr einfache Funktion. Was will ich jetzt tun? Nun, lassen Sie uns die Konsole einloggen. Lassen Sie uns auf das Array von der Methode zugreifen. Wir wissen, dass wir auf diesen Array-Typ zugreifen wollen. Eine Hand, wie Sie hier sehen können. Wenn wir es nur mit einem Argument behalten, macht buchstäblich keinen Sinn für uns, dies zu tun, weil es bereits ein Array ist. Es hat also keinen Sinn, ein Array aus einem Array zu erstellen. Aber es ist das zweite Argument, dass die Karte, die ich will, dass wir verstehen. Und das zweite Argument ist, was wir als die Hand die Funktion definiert haben. Und dann gehen wir zu dem, was uns zurückgegeben wird. Auf dem Bildschirm ist ein Hund zu Fuß und Konto beim Gehen. Dies ist ein neues Array. Jetzt hat es ein brandneues Array erstellt und es wird aufgenommen, jedes Element im ursprünglichen Array, kostet es durch unsere Kartenfunktion, und es wird uns ein neues Array zurückgegeben. Weil sie irgendwie Sinn ergeben. Und darum geht es. Ich hoffe, du hast Spaß. Und ich denke, mittlerweile haben Sie irgendwie ein gutes intuitives Gefühl dafür, wie das funktioniert. So gut gemacht. Ich bin sehr, sehr beeindruckt. Da gehen wir. Ich hoffe, es fängt an, ein bisschen mehr Szenen zu machen. Und keine Sorge, wenn Sie in Ihrer Programmierkarriere auf diese stoßen, werden Sie es immer mehr verwenden und es wird viel intuitiver. Ich wollte nur, dass Sie über das Array von der Methode wissen, weil es ein kann sehr praktisch sein, was mich zum nächsten Thema bringt. Und deshalb müssen Sie über das Array von der Methode wissen. Warum habe ich es überhaupt in diesem Kurs besprochen? Wir werden, manchmal wollen wir mit Methoden arbeiten, die nur aus dem Array-Objekt verfügbar sind . Beispielsweise ist die für jede Methode nur für das Array-Objekt verfügbar. Und um auf diese Methode zuzugreifen, müssen wir manchmal das , was wir in unserem Code arbeiten, in ein Array konvertieren. Macht das Sinn? Und darüber hinaus das Array von der Methode äußerst nützlich. Es ermöglicht Ihnen, viele andere Dinge wie das Klonen von Arrays, Entfernen von Duplikaten, sogar das Füllen eines Arrays, et cetera, et cetera. Es gibt eine Menge Dinge, die Sie tun können. Und auf jeden Fall werden Sie weniger verwenden, wenn Sie mit DOM-Sammlungen arbeiten. Und es bringt mich zuerst zurück, manchmal wollen wir Methoden verwenden, die nur für das Array-Objekt verfügbar sind. Wenn Sie beispielsweise mit der DOM-Sammlung und HTMLCollection arbeiten , müssen wir dies manchmal in ein Array-Objekt konvertieren, um auf Methoden zuzugreifen, die wir wollen. Also denke ich, was ich zu sagen versuche, ist, dass es nützlich wenn Sie mit Array-ähnlichen Objekten begegnen und arbeiten. Es bietet ein wenig mehr Klarheit darüber, was diese Methode tut. Aber keine Sorge, wir kommen nur darauf ein. Also keine Panik, wenn du es nicht ganz verstehst. Äh, Th, es wird durch die Zeit kommen. Ich hoffe, Sie genossen diese coole bisher Huike, bleiben motiviert und ich sehe Sie in der nächsten Vorlesung. 21. Mit forEach: Okay, genau hier haben wir aufgehört. Wir haben unsere Lebensmittel Array erstellt, indem wir JavaScripts Array von der Methode verwenden. Was wollen wir als Nächstes tun? Nun, wir wollen dieses Array durchlaufen, aber denken Sie daran, wenn wir hier zu unserer Indexdatei gehen, haben wir buchstäblich jedes LI-Element als ein Element in einem Array und dann gehen Sie in Schuldposten und natürlich muss es sich erstrecken. Also schauen Sie sich das erste Element in unserem Array an. Es wird diese LI-Elemente sein. Und was wollen wir? Nun, wir wollen das erste Element Kind, richtig? Wir wollen nur mit diesem Artikel arbeiten, dieses MOOC-Wort hier. Szenen und Frauen, Teil 1 dieses Kurses, diskutierten wir verschiedene Verfahrensweisen. Wir diskutierten das erste Kind, das erste Element Kind, erinnern Sie sich an all diese Dinge? Ja, wir wollen sicherstellen, dass es ein Element ist. Wir wollen nicht zurückgekehrt werden, um zum Beispiel Schnee zu nehmen. Wir wollen also jedes Element im Array durchlaufen. Aber denken Sie daran, in jedem Fall sind wir gegangen, um zu greifen, was auch immer es ist. Wir wollen das erste Element Kind greifen. Und wir wollen, dass das Inhalt braucht, weil wir nur jene Spannweiten greifen wollen , die den eigentlichen Text haben, den wir vergleichen wollen. Und wieder, wir müssen all diese Geschmacksgegenstände in Kleinbuchstaben umwandeln , weil wir gegangen sind, um Äpfel mit Äpfeln zu konkurrieren. Gehen wir zurück zu unserer App. Und fangen wir an, das zu programmieren. Wo fangen wir an? Nun, lasst uns einfach einen Kommentar haben Ja, und durchlaufen jeden Lebensmittelartikel. Das wollen wir tun. Also, wie machen wir das? Wie machen wir Schleife durch jedes Lebensmittelgeschäft Artikel wird zuerst, müssen wir unser Array zu greifen. Und jetzt passiert die Magie. Wir können auf diese für jede Methode zugreifen. Und der Grund, warum wir darauf zugreifen können, ist, weil wir dieses Array von der Methode verwenden. Wir haben unsere Lebensmittel in eine Reihe umgewandelt, sagen wir, Heilige zu machen. Und wenn Sie nicht genau wissen, wie die ForEach-Methode funktioniert, schauen Sie sich bitte den kompletten Grandmaster-Kurs meines JavaScript an. Danke. Vielleicht wissen, wie es funktioniert. Es ist nicht ganz intuitiv. Alles, was es tut, ist, dass es jedes Element im Array durchläuft. Und es gibt uns das Element als Variable. Und wir können es nennen, was wir wollen. Lass uns einfach unser Lebensmittelgeschäft abkühlen. Wenn wir zur Indexdatei gehen, bleiben Sie schlecht, wenn wir die volle jede Methode verwenden, wird es uns jedes LI-Tag zurückwerfen. Wir haben gerade das Lebensmittelgeschäft angerufen. Es ist alles, was wir getan haben. Und ich werde nur die neue Pfeilsyntax verwenden. Und das ist wirklich das Herz unseres Kodex wird gehören. Erstes, was ich tun will, denken Sie daran, dass wir diesen Ally haben. Ich wollte das erste Element Kind packen. Also lassen Sie uns eine neue Variable definieren. Nennen wir es einen flüchtigen Namen, denn das ist, was wir durchlaufen wollen. Und wir wissen, dass das Lebensmittelgeschäft sein wird, das LI-Element ist. Aber jetzt wollen wir das erste Element Kind, nicht wahr? Und dann in diesem Kind, wollen wir auf seine Text-Content-Eigenschaft zugreifen. Wie genial ist das? Cool? Ich hoffe, es ergibt Sinn. Das ist eigentlich halt. Ja, das ist Konsole protokollieren Sie dies auf dem Bildschirm, nur damit wir sicherstellen können, dass wir uns richtig registrieren. Und es ist zu unserem Browser zu springen. Gehen wir zur Konsole. Lass uns das ein bisschen größer machen. Sklera es. Lassen Sie uns in unser Suchelement gehen und geben Sie ein Kapital ein. Wow, Dort gehen wir. Es wird buchstäblich durchsucht alle unsere Produkte, Milch, Zucker und Gewürze, etwas zu trinken und Pizza. Ich kann es wieder zerreißen. Du kannst jetzt reden, klein a, und es ist genau das Gleiche gemacht. Wie genial ist das? Mann? Ich habe eine Menge Spaß. Gehen wir zurück zu unserem Code hier. Wir wissen also, dass wir alle unsere Artikel erfolgreich durchlaufen haben und deren Textinhalt erhalten. Der nächste Schritt ist, denken Sie daran, wir keine Hauptstädte wollen. Wenn wir unseren Browser hier haben, haben wir Capital Store. Also, wenn der Benutzer Typen Schimmel, aber mit kleinen Zielen, Es wird nicht dieses MOOC mit einem Kapital entsprechen. Also, wie gehen wir damit um? Nun, das weißt du schon. Wir wissen, dass jeder Lebensmittelname vom Typ String ist. Und aus diesem Grund können wir Javascripts auf Kleinbuchstaben Methode zugreifen. Was wir jetzt tun wollen, ist, dass wir unseren ganzen Text in den Kleinbuchstaben umwandeln wollen. Dann tun wir, dass durch den Zugriff auf unsere Lebensmittel-Namen, wird tatsächlich lassen Sie uns eine neue Variable erstellen. Nennen wir es den Lebensmittelnamen. Und das ist unser Lebensmittelname. Und wir können Javascripts in Kleinbuchstaben verlassen, die wir getan haben, als ich Szenen mache. Also bekommen wir einen Namen. Was ist der nächste Schritt? Nun, der nächste Schritt ist, dass wir vergleichen wollen , ob der Benutzer mich nur noch zurückbringt, um zu sehen, wissen Sie, was ich meine? Wir gingen, um zu konkurrieren. Lassen Sie uns einfach die Konsole löschen und lassen Sie mich eingeben. Was wir wollen, ist, dass wir vergleichen wollen, ob der Benutzer MOOC eingibt. Wir möchten alle diese Bänder Artikel unten durchsuchen. Wir wollen sehen, ob das MLK irgendeinen Weg unten ist. Und wenn ja, wollen wir das zeigen. Und wenn nicht, wollen wir, dass alles andere verschwindet. Das ist es, was wir tun wollen. Also brauchen wir einen Weg, um zu vergleichen. Hey, wir haben uns MLK-String angesehen, ist sowieso in diesen Namen unten. Und wie machen wir das? Nun, ich möchte eine andere Methode in JavaScript verwenden, die index off genannt wird. Lassen Sie mich einen Kommentar hier jetzt kann ich sagen, jetzt können wir Index aus verwenden um zu sehen, ob unser Text innerhalb unseres Lebensmittelnamens gefunden werden kann. Wenn nichts gefunden wird, ein negativer Wert zurückgegeben. Und wir können uns verstecken. Der Artikel. Ist irgendwie Szenen zu machen. Ich weiß, es mag überwältigend erscheinen. Wir haben wirklich viel in dieser Übung durchgemacht. Ich meine, wir haben über das Array von der Methode gesprochen, die zwei Kleinbuchstaben Methode, und jetzt gibt es eine andere namens Index von. Aber vertrau mir, es wird dir so sehr helfen, in deiner Wellenlänge Korea. Also lasst uns zu einer neuen Vorlesung springen, bevor ich weitermache. Und ich möchte, dass Sie den Index der Methode verstehen und wie es funktioniert. Wir sehen uns genug. 22. Einführung in IndexOf(): Eine weitere sehr unglaubliche Funktion in JavaScript wird als Index der Funktion bekannt. Und was macht es? Nun, auf der sehr einfachen Ebene, die Ihnen sagt, ob ein bestimmtes Element in einem Array oder einer Zeichenfolge gefunden werden kann. Der Index von mxnet wurde dem 260-Sekunden-Standard in der fünften Ausgabe hinzugefügt. Was das bedeutet, ist, dass es gerade am dritten Dezember 2009 hinzugefügt wurde. Also, was ich versuche zu sagen, ist, dass Sie sich keine Sorgen um Browser machen müssen und diese Methode nicht integrieren. Jeder Browser heute ermöglicht es Ihnen, den Index der Methode zu verwenden. Okay, toller Kunde, alte Browser können einen Hund akzeptieren. Wie sieht es aus, wenn wir anfangen, es zu benutzen? Nun, erstens rufen Sie den Index der Methode auf, indem Sie seine Wörter eingeben, Es ist Schlüsselwörter Index off. Ein Dekan nimmt zwei Argumente an. Das erste Argument ist das Suchelement und alias das Element, nach dem Sie suchen möchten. Und das zweite Argument ist optional. Es ist der Ausgangspunkt Ihrer Suchtaste Mehr acht, wir werden Beispiele dafür in Kürze sehen. Das Ego, das ist irgendwie, wie es aussieht, ein hohes Niveau. Und wie ich bereits erwähnt habe, werden wir uns Beispiele ansehen. Aber bevor wir es tun, ist das etwas sehr Wichtiges, das Sie verstehen müssen. Und das ist die indexOf-Methode existiert nur für zwei Tochtertypen in JavaScript. Die erste Tochter oben, dass es beim Löschen existiert. Was ist ein Array? In JavaScript und Array als nur eine einzelne Variable, die verwendet wird, um verschiedene Elemente zu speichern. Und bedenken Sie, dass das JavaScript-Array ein globales Objekt ist, was bedeutet, dass Sie irgendwie von Ihnen aus darauf zugreifen können. Aber genug reden eigentlich wollen über zu unserem Texteditor springen und ich möchte anfangen, eine Gehaltserhöhung mit Ihnen zu programmieren. Und ich möchte anfangen, diesen Methodenindex zu betrachten, speziell auf Arrays. Lass uns zur Konsole springen und es spielt immer noch herum. 23. Mit der Inbetriebnahme von IndexOf() mit Arrays: Okay, also hier sind wir. Und ich möchte, dass wir anfangen, gemeinsam zu programmieren, aber ich möchte, dass wir Schritt für Schritt gehen, langsam, langsam einen Affen fangen. Das erste, was wir erwähnt haben, ist, dass dieser Index von auf Tochtertypen in JavaScript existiert. Und die oberste Ordnung, die wir uns ansehen, ist das Array. Also lassen Sie mich es Ihnen beweisen, bevor wir weiter in unserer Codierung gehen, ging ich zum Konsolenprotokoll. Alles Es ist nur Konsole machen das Array-Objekt aus. Wenn wir dies öffnen und wir uns seinen Prototyp ansehen, gibt es einen Index der Methode. Da gehen wir. Kannst du uns sehen? Also, jetzt habe ich Ihnen gerade bewiesen, dass es auf dem Array existiert, diesem globalen Array-Objekt in JavaScript. Da kommt es her. In Ordnung, jetzt gehen wir zu unserem Codierungs-Editor. Ich habe gerade eine leere Datei app.js geöffnet. Und ich laufe Caucus. Caucus, sehr nützlich, übrigens. Sehr nützlich. Ich sage es immer, aber es ist sehr gut. Okay, das erste, was ich irgendwie zu dir herüberkommen will, ist eins als Array. Nun, zuerst, lassen Sie uns ein Array erstellen. Und das benutzen wir durch die eckigen Klammern hier. Und ich möchte nur sagen, ich bin das erste Element. Ich bin das zweite Element. Und du hast es erraten, ich bin das dritte Element, C. Hier geht's los, Wir haben ein Array erstellt. Wir benutzen diese eckigen Klammern. Und wie greifen wir auf Arrays zu? Wir werden zuerst, was ich erwähnen möchte, ist, dass JavaScript-Arrays oder Sarah. Was meine ich damit? Ich meine nur, dass das erste Element eines Arrays immer bei Sarah indiziert ist. Und das letzte Element kann immer an dem Index gefunden werden, der dem Wert der Längeneigenschaft des Arrays minus 1 entspricht. Lassen Sie mich Ihnen zeigen, was ich meine. Also lasst uns unsere Konsole protokollieren. Und denken Sie daran, wie ich gesagt habe, dass es 0 indiziert ist x das erste Element im Array ist. Wir geben 0 ein. Ich bin das erste Element. Und natürlich können wir das für die nächsten Dinge tun, oder? Wir können 012 auf dem ersten und dem zweiten und dem dritten Element gehen. Das macht Sinn. Und die andere Sache, die ich erwähnen möchte, ist, dass jedes Array eine Längeneigenschaft hat. Also, wenn wir unser Array abmelden und wir auf diese Eigenschaft namens Links zugreifen, wissen wir, dass unser Array drei Elemente hat. So ein sehr praktischer Tipp, wenn es um Codierung geht. Und ich werde sogar hier reinkommen, wir können immer x ist der letzte Punkt in einem Array wie diesem. Und das ist sehr, sehr nützlich. Also bitte denken Sie daran. Bevor ich die Lösung austippe, denken Sie nur darüber nach, was wir gerade getan haben. Wir wissen, dass die Länge des Arrays drei ist. Und wenn Sie sich das Konsolenprotokoll direkt oben ansehen, wissen wir, dass wir auf das letzte Element zugegriffen haben, das ich Array verwende und den Index zwei. Da denken Sie daran, JavaScript-Arrays sind immer Index bei 0. Also wissen wir, dass das letzte Element im Array diese Array-Länge ist, die 3 minus 1 ist, was uns zu zwei bringt. Also alles, was ich zu sagen versuche, ist auf das letzte Element im Array zuzugreifen, alles, was wir tun müssen, ist auf unser Array zuzugreifen. Und jetzt, wenn Sie nicht wissen, was der Link ist, ist es sehr praktisch, auf die Link-Eigenschaft zuzugreifen, die in diesem Fall nicht definiert ist, da es kein viertes Element im Array gibt. So bist du immer minus1. Macht es Sinn? Ich hoffe es. Und Herbizide erhalten ein intuitiveres Gefühl, wie Arrays funktionieren. Die andere Sache, die ich erwähnen möchte, lasst uns einfach diesen Mann löschen, manchmal hassen es, Sachen zu löschen. Haben wir so lange damit verbracht, mir Punkte zu geben, und ich habe es einfach gelöscht, ein bisschen traurig, Mann oben das Chlorid. Aber wie auch immer, lassen Sie uns ein neues Array erstellen, 1, 2 und 3. Die andere Sache, die ich nur mit Arrays erwähnen möchte, ist, dass Sie die Punktnotation nicht verwenden können, um auf Elemente zuzugreifen. Dies ist ein wichtiger Punkt. Zum Beispiel, wenn wir unser Array konsolen und wir versuchen, das erste Element zu bekommen, wird es uns nicht erlauben, es zu tun. Wir erhalten tatsächlich einen Syntaxfehler. Also bedenken Sie das einfach. Und es ist nicht, weißt du, es gibt nichts Besonderes daran. In der Tat, JavaScript-Eigenschaften, die mit einer Ziffer beginnen, können nie mit der Dokumentation referenziert werden , war immer in der Verwendung von Klammernotation vorhanden. Die Nuance von JavaScript, Mach dir keine Sorgen, okay, aber du fragst dich wahrscheinlich Client, ich will nicht über Arrays lernen. Wir sind auf dem Thema Index von n. Sie sind 100 Prozent korrekt. Ich wollte dich nur irgendwie mit Arrays vertraut machen, bevor wir hineinspringen. Ok? Der Punkt, den ich mit Indexfällen machen möchte, ist, dass es den ersten Index zurückgibt , bei dem ein bestimmtes Element im Array gefunden werden kann. Wenn es nicht im Array vorhanden ist, wird ein negativer zurückgegeben. Was soll ich meine? Nun, lassen Sie uns ein Array namens Tiere definieren. Und es hat eine Warzenschweine, die eine Giraffe hat. Und da steht, ich habe einen Büffel. Und da steht, dass es eine Linie hat. Wie funktioniert es? Nun, schauen wir mal. Lassen Sie uns die Konsole protokollieren, damit wir tatsächlich das Ergebnis dessen sehen können, was wir produzieren. Die erste Sache, um auf unseren Index von zuzugreifen, ist der Zugriff auf ein Array. Und das Array, das wir betreten, ist unser Tier-Array. Wir wollen nun auf den Index der Methode zugreifen, die in alle Arrays integriert ist. Und suchen wir nach Reden. Was würden Sie erwarten, zu sehen? Wo befindet sich Warzenschweine? Das ist richtig, Es befindet sich bei Index 0. Denken Sie daran, JavaScript-Arrays sind immer an der Basis Sarah indiziert. Also, wenn wir versuchen, Warzenschweine zu finden, können wir sehen zurück zu uns ist 0. Das macht am sinnvollsten. Und ich werde diesen Code einfach duplizieren. Suchen wir jetzt nach Buffalo. Was denken Sie, die Indexnummern, die sein werden? Lasst uns aufstehen. Ich würde Nummer zwei erwarten. Mal sehen, ob das richtig ist. Nun, was ich tun will, ist, suchen wir nach Hund. Was glaubst du, wird mit Hunden passieren? Nun, wie ich bereits erwähnt habe, wenn es nicht gefunden wird, wird uns ein negativer zurückgegeben. Macht es Sinn? Also denken Sie daran, negativ bedeutet, dass es nicht gefunden wird. Und das letzte, was ich erwähnen möchte, kurz bevor wir weitermachen, ist, dass der Index der Methode Elemente in Ihrem Array mit strikter Gleichheit vergleicht. Mit anderen Worten, mit der gleichen Methode, die vom dreifachen Gleichheitszeichen verwendet wird. Denken Sie daran. Cool. Okay, Clyde hatte das alles gut und gut, aber wir verwenden nur ein Argument in diesem Array-Index. Ich möchte beides verwenden und ich verstehe es genauer. Nun, es ist gut, meinen Mitschüler zu hören. Lassen Sie uns alle diese Konsolen löschen. Lasst uns nun nach diesem vom Krieg zerrissenen Tier suchen, führt aber dazu, unseren Methodenindex zu sagen , dass wir nur in dem zweiten Punkt in unserem Array beginnen wollen, ein von Index eins an. Was glaubst du, wird dann passieren? Gehen wir also zu unserem zweiten Argument in dieser Methode. Und sagen wir, wir wollten mit dem zweiten Element im Array beginnen. Natürlich gibt es es es nicht, weil wir wissen, dass wir von Giraffe an schauen und es gibt kein Wasser. Sie sehen sich ein anderes Beispiel an, das jetzt auf Mozilla schauen. Und seine sagen unseren Index der Methode, um von sagen wir, das dritte Element in der Array-Nummer zwei zu suchen . Und in diesem Fall gibt es unsere Indexnummer zurück. Es ist also sehr, sehr cool und wir wissen, dass es existiert. So funktioniert ein zweites Argument. Zack, ich erhalte Sinn. Ich hoffe, wir haben viel mit Arrays gearbeitet, aber jetzt werde ich zurück zum Leckkanal springen. Eine besteht darin, den Typ der zweiten Ordnung zu betrachten, wo wir mit dieser Indexauth-Methode beginnen können. 24. Mit der Instandhaltung von Strings: Ich habe jede Menge Spaß. Ich hoffe, du hast viel gelernt. Gehen wir einfach dahin zurück, wo wir angefangen haben. Denken Sie daran, wir sagten, es existiert nur auf zwei Dollar-Typen. Dieser Index der Methode, die oberste Ordnung, die wir als Arrays betrachtet haben. Was denken Sie, ist der Typ zweiter Ordnung? Nun, es ist abgerollt, bitte. Diese Folie, die Sie hier betrachten, ist eine sehr wichtige, gibt Ihnen einen sehr hohen Überblick über diesen Methodenindex. Wir haben uns eine Menge Beispiele mit Arrays angesehen. Ich möchte diesen Vortrag jetzt abschließen, indem ich mir Beispiele anschaue , die mit Streichern arbeiten. Es fängt an zu sehen, wie das funktioniert. Es wird eine Menge Spaß machen. Vertrau mir. Hey, wow, das ist echt cool. Wir haben gerade Arrays gemacht, aber jetzt möchte ich, dass wir auf Strings kommen. Wie funktioniert das? Und es ist wirklich aufregend, du wirst jetzt sehen. Also lasst uns hineinspringen. Cool. Okay, wo fangen wir an? Das erste, was ich Ihnen hier zeigen möchte, ist, wenn wir auf unsere Konsole gehen, die Konsole entfernen, das Array. Lassen Sie uns einfach die Konsole löschen und lassen Sie uns dasselbe mit der Stärke tun. Ziemlich unkompliziert. Wir waren eine Schnur. Wir schauen uns seinen Prototyp an. Wir scrollen nach unten und sie, meine lieben Studenten Index davon ist die zweite Tochter spricht JavaScript-Technologie gibt uns Zugriff auf diese tolle nützliche Methode. Sagen Sie, ich wollte Ihnen nur beweisen, dass es auch bei dieser Tochter gefunden wird. Wenn wir zu unserem Codierungs-Editor zurückkehren, fangen wir an, dies in Aktion zu betrachten. Also lasst uns unsere Air Asia löschen. Wir haben uns Arrays angesehen. Es schafft jetzt, ich weiß nicht, einen Satz. Und es ist nur sagen, hallo, Welt. Das Universum. Oft wissen, was mit meinem Thema heute nicht stimmt. Begrüßt Sie. Dies sind Satz, den wir wissen, dass dies vom Typ String ist. Woher wissen wir das? Alle seine Konsole Protokolltyp Satz. Und es ist ziemlich offensichtlich, aber wir wissen, dass es eine Schnur ist. Weil wir wissen, dass es eine Schnur ist. Wir wissen, dass wir Zugang zum Methodenindex haben. Also lassen Sie uns eine Variable namens AIM definieren, das ist überschüssiger Satz. Und suchen wir nach etwas. Suchen wir nach dem Wort. Herzlich willkommen. Sehen wir uns hier als Todesfälle an. Warum denken Sie, das wäre Konsole abmelden auf dem Bildschirm und wir bekommen eine Nummer 26. Warum 26? Fangen wir an, zusammen zu zählen. Wir wissen, dass dies Index 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25. Und natürlich beginnt 26 Begrüßungen. Sehr, sehr nützliche Methode ist, einen konstanten Aufrufsatz wieder zu definieren. Und sagen wir einfach, Hey, lernen Sie viel in diesem Kurs? Ich hoffe, Sir. Lernen Sie weiter. Lassen Sie uns also anfangen, diesen Index zu verwenden. Lassen Sie uns anfangen, immer intuitiver Feld. Lassen Sie uns eine neue JavaScript-Variable namens Suchwort definieren. Das ist es, wonach wir suchen wollen. Und sagen wir, wir wollen nach dem Wort Lernen suchen. Wir können erstens sehen, direkt vom Fledermaus, wir haben zwei Worte, nicht wahr? Lernen und Lernen. Also bedenken Sie das einfach. Dies definiert also eine neue Variable, die zum ersten Mal aufgerufen wird. Und lasst uns auf unsere Satzkonstante zugreifen. Das ist Zugriff auf diesen Index der Methode. Und lassen Sie uns suchen, wird Wort suchen. Lassen Sie uns diese erste Zeitüberschreitung in der Konsole protokollieren. Es sind Hilfsmittel. Und wir wissen, dass es acht ist, weil es der achte Charakter von Anfang an ist dieses erste Lernwort. Aber wie greifen wir jetzt auf das zweite Lernwort zu? Wie würden wir das tun? Nun, lassen Sie mich Ihnen einen Hinweis geben. Lassen Sie uns das zweite Argument in der Index OLS Methode verwenden. Alles, was wir tun müssen, ist eine neue Variable zu definieren, die zweites Mal genannt wird. Lasst uns auf unseren Satz zugreifen. Ich habe gerade einen makellosen falsch Satz realisiert. Also würden sie gehen, lasst uns den Überschuss in Nick los. Was wir jetzt tun wollen, ist, dass wir nach unserem Suchwort suchen wollen, oder? Diesmal wollen wir den Ausgangspunkt nutzen. Und wo wollen wir mit diesem Gedanken anfangen, nachdem er gegründet wurde? Erster Gegenstand, der das erste Mal plus eins ist. Jetzt wissen wir, dass es unser Array durchsucht, aber erst beginnt, nachdem wir das erste Lernwort übergeben haben. Cu, hoffe, es ergibt Sinn. Wenn wir das ausloggen, kommen wir zu 44, das ist genau das, was wir erwarten würden. Verwendung von Index oder auf diese Weise kann in Ihrem Code sehr nützlich sein und Sie können viele Dinge damit machen. Ich weiß es nicht. Lassen Sie uns Ihnen ein Beispiel geben. Lassen Sie uns eine Variable namens Lösung 1 definieren. Lassen Sie uns Vorlagenliterale verwenden und sagen wir den Index des ersten. Und wir verwenden das variable Suchwort, Wort von Anfang an. Ist und es wird das erste Mal gehen. Und wenn wir das auf den Bildschirm zurückgeben, bekommen wir buchstäblich Konsolenprotokoll zu uns. Der Index des ersten Lernwortes von Anfang an ist acht. Wie genial ist das? Wir kombinieren viele Dinge, die wir Vorlagenliterale kombinieren, indem wir die geschweiften Klammern des Dollarzeichens kombinieren, um Ausdrücke und Variablen in unser Template-Literal zu integrieren . Es ist sehr, sehr cool und es wird Ihnen viel helfen auf dem Weg. Natürlich können wir die gleiche vollständige Lösung für die Lösung tun , was wir gerade kopiert haben, anstatt alles erneut zu tun. Wir wissen, dass dies die zweite Suche, die wir von Anfang an hatten, ist nicht das erste Mal. Zweites Mal. Und wenn wir das zurückgeben, bekommen wir genau dasselbe. Aber jetzt beziehen wir uns auf das zweite Lernwort. Cool. Tut mir leid, ich weiß, manchmal werde ich mitreißen und ich werde vielleicht etwas fortgeschrittener, als du es jetzt wissen musst. Aber vertrauen Sie mir, das wird Ihnen bei Ihrer Kodierung helfen. Und ich möchte, dass du ein Meister wirst. Ich hoffe, es macht Sinn. Die andere Sache, die ich Ihnen zeigen möchte, ist, dass wir alles löschen. Ich möchte Ihnen zeigen, dass der Index von Groß- und Kleinschreibung beachtet. Also, was ich meine, wir werden, wenn wir ein Wort haben und das Wort „Raten-Hund“ ist. Wenn wir jetzt Konsolenprotokoll und wir greifen auf unsere Wortzeichenfolge, greifen wir auf den Index der Methode und wir suchen nach Hund. Wir wissen, dass es existiert. Wieder, das würde Sinn ergeben, aber was ist, wenn wir das Gleiche tun? Aber ja, wir haben nach dem Wort Rot gesucht. Wie Sie sehen können, wird die Groß- und Kleinschreibung beachtet. Wir haben negative zurückgegeben, AKA es existiert nicht. Wenn wir das kleine r auf große R ändern, existiert es. In der Tat, das allererste Element in unserem Array. Ich hoffe, ihr alle lernt rechtzeitig. Das letzte, was ich durchkommen möchte, ist, dass 0 nicht zu wahr und negativ bewertet, die man nicht zu falsch auswertet. Denken Sie daran, wenn wir eine kleine r haben, Es ist eine negative. Es zwingt nicht zu falsch. Es ist eine Art seltsame Nuance, wenn es um diese Methode geht. Also, wie beweise ich Ihnen das? Lassen Sie mich es Ihnen beweisen, indem Sie JavaScripts, IF-Anweisung verwenden. Und was ich will, um zu konkurrieren, wie will sagen, wenn es ein Wort ist, verrotten, enthält, sagen Rate. Wenn dies zu false ausgewertet wird, dann lassen Sie uns diesen Code ausführen, der Konsolenprotokoll sagt. Dies ist der richtige Beginn. Beginn. Sonse Konsolenprotokoll, dies ist der falsche Beginn. Und jetzt wirst du ein Problem sehen. Sie werden sehen, dass wegen Kloake, was uns zurückgegeben wird, die falsche Antwort ist. Wir wissen, dass das kleine r in unserer Zeichenfolge nicht existieren sollte , weil es nur das Kapital R Rating hat. Warum schlagen wir also das zweite Konsolenprotokoll in unserer if-Anweisung? Der Grund dafür ist, dass der negative nicht falsch bewertet wird. Ein Vollrad trifft diesen Beginn und es ist die falsche Antwort. Daher versuche ich bei der Überprüfung, ob eine bestimmte Zeichenfolge in einer anderen Zeichenfolge existiert. Der richtige Weg ist, negative zu verwenden. Wenn wir zum Beispiel false durch negative ersetzen, warum funktioniert das nicht? Minus1 d wir gehen, wir bekommen diesmal die richtige Antwort. Sehr, sehr wichtige Punkte, die ich gerade mit Ihnen geteilt habe. Bitte bedenken Sie das. Also z Sie haben es. Schleife, verwenden Sie einfach Index alle für die Strahlen. Wir haben es nur mit Saiten benutzt. Wir haben verschiedene Möglichkeiten diskutiert, wie Sie eine GUI verwenden können, wissen, dass als K-Szenen, die haben, wir wissen, dass Sie nicht bei negativen zwingen 12 falsch. Und das sind ziemlich fortgeschrittene Themen. Also nehmen Sie es nicht für selbstverständlich, feiern Sie die kleinen Siege. Aber wie auch immer, gehen wir weiter und wir sehen uns in der nächsten Vorlesung. 25. Finishing von der search die: Wow, wir sind unglaublich weit weg, während Dianas ernsthaft Hand, ich weiß, manchmal kann es sehr entmutigend sein, all diese Dinge durchzugehen , weil Sie ständig neue Dinge lernen. Aber bleib bei mir. Du beinahe, fast fertig. Sie haben eine Menge nützlicher Informationen gelernt. Also sind wir immer, lass mich hier nach oben scrollen. Erinnerst du dich, was wir getan haben? Wir haben auf die TIP-Venen im Netzeingabetextfeld gehört. Da es sich um ein Eingabefeld handelt, erhalten wir eine Werteigenschaft, um diesen Wert zu erfassen, der innerhalb konvertiert in Kleinbuchstaben verwendet. Erster Schritt. Zweitens packen wir unsere Lebensmittelliste. In der Tat sind es immer Verbündete Elemente. Denken Sie daran, innerhalb eines und schleifen Sie sie durch. Um dies zu tun, mussten wir Netzliste in ein Array konvertieren. Wir verwenden JavaScript-Array von der Methode, weil es ein Array ist. Jetzt können wir auf diese für jede Methode zugreifen. Sie schleifen sich durch jedes LI-Element. Wir wollen dann für das erste Element in diesem Element blieb suchen. Aber wenn wir unsere Indexdatei bekommen, reicht dieses LI-Element nicht aus. Wir wollen diese ersten untergeordneten Elemente innerhalb des Verbündeten, weil das uns den tatsächlichen Lebensmittelartikel gibt, sagen Mixins. Wir konvertieren dann jedes dieser Elemente in Kleinbuchstaben. Und nun endlich wollen wir vergleichen, ob die Eingabe nimmt, dass der Benutzer mit jedem Lebensmittelartikel übereinstimmt. Und um das zu tun, werden wir den Index der Methode verwenden. Wir wissen, wie es funktioniert. Und wir werden mit JavaScripts, IF-Anweisung, und was wollen wir schmecken? Nun, wir wollen testen, ob dieser Lebensmittelname ganz in Kleinbuchstaben, ob die Takes, der Benutzer eingegeben hat, darin gefunden werden können. Und das nimmt den Benutzer eingegeben, wir setzen in eine Variable namens Text. Wir scrollen nach oben. Denken Sie daran, eine JavaScript-Variable namens Text zu finden, und das ist, was der Benutzer eingegeben hat. Also alles, was wir diese vergleichen wollen, wollen wir herausfinden, ob diese Zeichenfolge in jedem Lebensmittelnamen existiert. Und denken Sie daran, dass wir das Wort falsch nicht verwenden können, wir müssen negative verwenden. In diesem Fall, wenn es nicht existiert, wenn der Benutzer zum Beispiel Coke eingibt, und wir uns MLK anschauen, wissen wir, dass MLK den Geschmack Kirk nicht enthält und es wird negative zurückgeben, wenn das der Fall ist. Was soll er tun? Wollen wir das ganze Verbündete auf mich greifen, das wir in eine Variable namens Lebensmittelgeschäft setzen. Denken Sie daran, in R für jede Funktion, wir schleifen durch diese Verbündeten und wir setzen jede in eine Variable namens Lebensmittelgeschäft. Und alles, was wir tun müssen, ist Zugang zu Stil Eigentum. Und wir wollen seine Anzeigeeigenschaft beeinflussen. Und wir werden das in keines ändern. Stellen Sie Szenen zu machen. Sonst. Wenn wir wissen, dass es existiert, wissen wir, dass wir auf unsere Lebensmittelartikelanzeige zugreifen möchten. Und wir wollen, dass das als Blockelement angezeigt wird. Und diese Medea-Studenten sollten arbeiten. Also, wenn wir zu unserem Browser gehen und lassen Sie uns MLK eingeben, alles Kleinbuchstaben. Und sieh dir das an. Seniores Meerwasser. Das ist fantastisch. Versuchen wir es mit einem anderen. Versuchen wir, zu kochen. Etwas zu trinken. Es ergibt keinen Sinn. Gehen wir schnell zu unserem Code. Index-Datei. Es sollte etwas zu trinken sein. Speichern Sie das, gehen Sie hier. Und wir sind buchstäblich fertig. Wie genial ist das? Ernsthaft? Du musst diese Dinger feiern. Du hast eine unglaubliche Menge geleistet. Sehen Sie sich dieses ganze Beispiel an. Sehen Sie sich alle Gründe an, aus denen wir auf die Ereignisse mit Elementen aus dem DOM reagiert haben. Wir haben JavaScript-Methoden in beiden Methoden verwendet, native Objekte. Wir haben all diese Dinge verwendet, um mit dem DOM zu interagieren. Und das ist ein sehr einfaches Beispiel. Wir haben noch nicht einmal einen Webserver im Hintergrund. Wir haben das alle am Frontend gemacht. Wir haben uns verzögert oder gestoppt, wir verhinderten das Auftreten von Standardverhalten. Es gibt noch keine Wiedereinfrieren. Alles passiert live. Wir können Artikel löschen. Wir können Elemente zur Liste hinzufügen, z. B. einen Hund. Und dann können wir nach Gegenständen suchen, die nach einem Hund suchen. Und wir haben dafür gesorgt, dass Groß- und Kleinschreibung Wenn wir Daten löschen, kommt alles andere auf. Wir können auch Ratte haben. Ich werde auf einen Eid aufzählen, wie Olson wir so weit gekommen sind. Ich hoffe, Sie hatten viel Spaß in diesem Kurs. Und denk dran, wir müssen noch nicht aufhören. Wir können kleine Verbesserungen daran machen, was vielleicht werde ich ein paar Bonusstufen einschließen, es nur ein bisschen größer zu machen. Zum Beispiel, wenn ein Benutzer auf Ed für einen Hund klickt, wollen wir nicht noch in diesem Eingabefeld angezeigt nehmen. Können wir sogar vielleicht Registerkarten unten hinzufügen, wie der Benutzer ein bisschen Informationen haben kann. Hätten sie also wenige Verbesserungen haben, können wir dies tun. Aber gerade jetzt bist du ein unglaublich langer Weg gekommen, eine 12, um einfach mit Aufregung auf und ab zu springen. Walden, und wir sehen uns in ein paar Bonusvorträgen. Hallo. 26. Das input löschen: Wir sind auf dem nächsten, was ich will, ist, dass ich will, dass du nur herausfinden kannst, ob du es alleine schaffst . Deaktivieren Sie, dass der Benutzer in dieses Eingabefeld eingegeben wird , wenn er auf die Schaltfläche Bearbeiten klickt . Wenn der Benutzer beispielsweise Hund eingibt und auf Hinzufügen klickt, möchten wir nicht, dass dieser Hundestand angezeigt wird, wie wir es entfernen. Pausieren Sie das Video hier und in fünf Sekunden zeige ich Ihnen die Lösung. Es ist sehr, sehr einfach, es ausprobieren zu können. Ich hoffe, Sir. Was wollen wir also tun, ist, wenn der Benutzer auf eine Schaltfläche geklickt hat, wenn dieses Ereignis innerhalb eines ausgelöst wurde, eine klare, dass Texteingabe. Also müssen wir tun, ist unseren Code zu bekommen. Hier ist unser HTML, das ist gut, unsere JavaScript-Datei. Und wir sind zu dem Abschnitt hier mit dem Titel Artikel hinzufügen gegangen. Und denken Sie daran, wenn dieses Submit-Ereignis ganz am Ende ausgelöst wird. Nachdem wir die Benutzer gepackt haben Geschmack. Alles, was wir jetzt tun wollen, ist ein klarer Eingangsbus. Und dazu müssen wir nur auf unser gesamtes Formular zugreifen. Innerhalb dieses Formulars wollen wir auf dieses Eingabefeld zugreifen, nicht wahr? Das ist also die Verwendung von Abfrage-Selektor. Wir wollen nach dem Eingabefeld selbst suchen. Dann wollen wir auf seinen Wert zugreifen. Und es ist einfach, diesen Wert auf null zu setzen. Du gehst, um mir zustimmen, komm schon. Das ist sehr einfach. Wenn wir zurück zu unserem Browser und wir sprachen Hund, klicken wir auf Hinzufügen der Strenge. Es ist buchstäblich aus diesem Eingabefeld gelöscht. Sehr einfach. So können Sie wirklich sehen, wie wir unsere bestehenden Karten-basierten verbessern. Und so funktionieren viele Web-Apps. Weißt du, viele Leute gehen auf eine Seite und es ist so kompliziert. Sie denken, dass es so am Anfang war. Es ist nicht meistens, dass es schrittweise stückweise gemacht wird. Irgendwie, was wir hier machen. Einfach jedes Stück angehen, wie es herauskommt wo das nächste, was ich betrachten möchte, ist, dass ich Registerkarten am unteren Rand hinzufügen möchte. Nur weil ich denke, es macht Spaß und ich denke, es könnte eine oszillierende Kurve und eine schöne kleine Feder in deinem Kopf sein. Wir sehen uns in der nächsten Vorlesung. 27. Verbessere unsere Form – Was ich will, mit dem ich du aufbauen: Mann, wir haben einen unglaublich langen Weg zurückgelegt. Erstens, ich will nur Walden sagen, ich bin wirklich, wirklich beeindruckt und, und so das Alter der stecken bei mir. Was werden wir jetzt alles tun? Ich möchte, dass wir diese Registerkarten am Ende unserer Aufnahme hinzufügen, die Hollich-Liste. Und das wird super praktisch für Sie in Ihren eigenen Web-Apps sein , die es Ihnen ermöglichen, jede Show zu dynamisieren und Panels im laufenden Betrieb zu verstecken , indem Sie reines DOM und JavaScript zur Manipulation verwenden , die wirklich, wirklich nützlich ist. Also, was haben diese Registerkarten gemacht? Nun, erstens, wenn der Benutzer über sie schwebt, möchte ich stylen, um zu ändern. Du solltest wissen, wie man das macht. Wenn wir nun auf einen Tab klicken, bekommen wir diese Frage, wie nennst du eine gefälschte Nudel? Erstens können Sie feststellen, dass die Antwort nicht sofort angezeigt wird. Wir haben es in einen Knopf eingewickelt. Und natürlich werden wir für ein Klick-Ereignis auf dieser Schaltfläche hören. Und wenn auf die Schaltfläche geklickt wird, möchten wir, dass die Antwort angezeigt wird. So klickt der Benutzer auf einen Button und wir bekommen den Beginn und Betrüger. Ich weiß, ich weiß, dass so ein Dad Witz, aber zum Glück für mich bin ich kein Komiker. So betrachteten sie als die erste Registerkarte. Natürlich, wenn Sie klicken, oh, tatsächlich, bevor ich auf den nächsten Schritt klicke, bemerken Sie, dass der Lebensmittelscherz-Tab jetzt ein dunkleres Grau ist? Also irgendwie müssen wir Stil anwenden, um was auch immer hassen eine ausgewählte. Nun, wenn wir auf das andere Panel klicken, die Sie bekommen, dass hating Tab ist jetzt dunkler grau und ein weiteres Panel darunter wird angezeigt. So geehrt scheint ein sehr einfaches Beispiel zu sein, und es ist ein einfaches Beispiel, aber die Fähigkeiten, die Sie daraus lernen, werden sehr, sehr nützlich für Sie sein. Denken Sie also darüber nach, wie Sie all diese Dinge zusammenstellen können , und ich sehe Sie in der nächsten Vorlesung. 28. Die Tabs aufbauen: Okay, also fangen wir an, diese Registerkarten hinzuzufügen. Wie machen wir es? Das Speichern von Punkten besteht natürlich darin, den HTML-Code zusammen zu schreiben. Also lasst uns hier gehen. Kommen wir zum Ende des Drecks hier drüben. Und ich möchte ein neues div erstellen. Denken Sie daran, dass wir Amigo Abschnitt zum Hinzufügen von Tabs suchen müssen. Los geht's. Nur damit wir wissen, was im Instruktion-Opcode ganz schön los ist. Los geht's. Ich möchte einen neuen Datensatz erstellen und dies nenne dies einfach die Registerkarte Ribbon. Ziemlich einfach. Und weißt du, es ist nützlich. Lassen Sie uns unseren Browser auf der rechten Seite haben, damit wir sehen können, was los ist , dass wir codieren und wie soll ich mit diesen Bändern arbeiten? Lassen Sie uns nur eine Überschrift zuerst in der Überschriftenliste haben. Definieren Sie einfach unser Schlagen innerhalb dieser Ansicht, alle Elemente und geben Sie ihm eine Klasse des Treffens. Und natürlich haben wir LI-Tags darunter. Ich markiere darunter. Lass uns das einen Witz machen. Könnte alles sein, was du willst, und lass uns noch einen machen. Und es ist ja. Wussten Sie, dass Diego zwei Überschriften sind. Lassen Sie mich es einfach tun und das Wissen Bennett T-Konto möchte diese Tochter null zugeschrieben hinzufügen. Ich mache mir keine Sorgen, was das ist. Ich werde es erklären. In der Tat werde ich gerade entschieden haben, dass ich einen ganzen Vortrag darüber machen werde. Also keine Panik, und ich werde diese Tochter anrufen. Klicken Sie auf. Okay, das ist abgeschnitten, wir können definieren, wie wir wollen. Ich wollte nur angeklickt werden, weil es offensichtlich ausgelöst wird, wenn der Benutzer darauf klickt. Und ich wollte schätzen, um Witz zu sein, aber ich möchte IDs insgesamt, die Sie später sehen werden, weshalb ich das tue. Deshalb werde ich es zum Hashtag-Witz machen. Und lassen Sie uns eine Klasse geben, damit wir sie in unserem CSS stylen können. Wir können sagen, Sie wissen, standardmäßig wollen wir, dass etwas aktiv ist. Smith, sagt sie, wird Spaß haben. Und dann auf dem zweiten Verbündeten möchte ich ein weiteres ganzes Panel umschalten. Also möchte ich seinem Tochterattribut noch einmal etwas hinzufügen. Ich werde es wieder angeklickt nennen. Und in diesem Fall geben wir ihm eine ID von Fakten oder einen Wert von ID-Effekten. Du wirst sehen, wie wir das benutzen. Keine Panik, bitte. Ich werde darauf zurückkommen. Also gehen wir hin. Dies sind UL-Element. Das nächste, was ich tun möchte, ist, dass ich zwei Panels erstellen möchte. Und diese Platten werden ein Gesamtprodukt sein. Wenn Sie auf den einen Schlag auf das eine Panel klicken, um zu zeigen, wenn Sie nahm, dass schlagen die anderen Panels gehen zu zeigen. Und lassen Sie uns Panel innerhalb eines div-Tags replizieren. Und der erste, mit dem ich mich beschäftigen möchte, ist dieser Witz. Also geben wir ihm eine ID des Witzes und eine Klasse von Panel. Macht das Sinn? Und was ist der Witz? Wie nennst du eine gefälschte Nudel? Wir retten das. Sie können sehen, dies sind Absatz und machen Sie sich keine Sorgen über das Styling. Wir werden uns darauf einlassen und antworten. Wir können in einen Absatz unten setzen hier ist in Pasta. Und es ist eine brillante Route. Das ist so ein Dad Witz. Also gehen wir hin. Das ist unsere erste von ich frage mich, dann machen Sie ein zweites div für unser zweites Panel. Das zweite Panel wird eine ID von Fakten haben. Und es wird auch eine Klasse von Panel haben. Und lassen Sie uns einfach einen Absatz sagen, das ist, was ich diese Woche über Essen gelernt habe. Und darunter können wir einfach einen weiteren Absatz mit Lorem Ipsum Text haben, egal, was es noch ist, wir speichern das. Sie können sehen, wie unsere Wissenschaftler schrecklich aussehen, Cool. Also, um zu verbessern, Art von Aussehen und Gefühl dieser, Lassen Sie uns in unsere CSS bekommen. Und es hörte auf, es ein wenig nach oben zu legen. Also lasst uns hier in unsere Stile gehen. Gehen wir nach unten. Wer hat viel himmlisch gemacht. Und lassen Sie uns jetzt ohne Tabs umgehen, wir sollten gut anfangen, wenn wir zu unserer Indexdatei gehen und mich nach oben scrollen, haben wir alle unsere Tabs in diesem div mit einer ID von Tab rep eingestuft. Also gehen wir zu unserem Stylesheet. Und was ich tun möchte, ist, dass ich auf unser Tip Wrapper UL Element zugreifen möchte. Aber jetzt möchte ich, dass wir definieren, was passiert, wenn wir den Mauszeiger über jedes einzelne dieser Elemente bewegen. Nun, erstens möchte ich, dass unser Hintergrund der gleiche ist wie die anderen Farben, die wir bekommen haben. Sie können sehen, dass meine Idee mir wirklich hilft. Wir haben da 43, 43. Und die Endlosen ändern die Textfarbe in Weiß. Wenn wir den Mauszeiger über jedes dieser Elemente bewegen, wird der Hintergrund und seine Schriftfarbe in Weiß geändert. Ein ziemlich cool. Und keine Sorge, wir werden das besser aussehen lassen. Lasst uns wieder auf unsere Registerkarte zugreifen, nicht brca reißen. Und lassen Sie uns jedes LI-Tag beeinflussen. Durstig. Ich möchte, dass jeder ein Inline-Block ist. Und tut mir leid, wenn ich schnell gehe, aber ich möchte, dass wir sehr schnell sind. Und weil dies kein Kurs auf CSS ist. Als nächstes fügen wir einige Polsterung von Hass ihn hinzu. Bei Männern ist es erstaunlich, wie schnell diese Dinge in kurzer Zeit einfach viel besser aussehen können. Sehr, sehr cool. Lassen Sie uns die Hintergrundfarbe ändern. Geben wir ihm einen leichten Randradius. Drei Pixel. Wie sieht das aus? Sieht ziemlich cool aus. Stellen wir sicher, dass wir wieder einen Cursor Punkte haben. Und dann lasst uns einfach ein bisschen Margenrechte geben. Sagen wir in Pixeln. Da gehst du. Du musst zugeben, dass das ziemlich ordentlich aussieht. Lassen Sie uns jetzt an unseren Panels arbeiten. Also wieder, ich möchte nur, dass wir wegen CSS kaskadierenden Regeln spezifisch sind. Ich möchte, dass wir diese Registerkarte Repre greifen, dann möchte ich, dass wir unsere divs mit Klasse von Panel und diesen Sternnoten greifen. Erstens, lassen Sie uns nichts anzeigen. Sie betrachten Sheila auf. wir ihm einfach etwas Spielraum. Wir wissen, was wir nicht sehen werden, was wir tun. Ja, lass uns das am Ende machen. Mal sehen, was wir tun. Sie betrachten so 0 bis m geben wir ihm eine Grenze. Ein Pixel, solide, dreifach D. Wie sieht es aus? Los geht's. Es bringt mich irgendwie eine Pause. Es braucht Polsterung. Das sieht schrecklich aus. Da gehen wir. Und geben wir ihm eine Kurve, Grenzen, Grenzradius, drei Pixel. Los geht's. Es sind all diese kleinen Berührungen, die uns so viel besser aussehen lassen, oder? Diese kleine leichte Kurve in der Grenze lässt es einfach so viel besser aussehen. Okay, jetzt verbergen wir alles. Da gehen wir, es ist weg. Wer, wieder, aus einer Stylingperspektive mit ziemlich viel getan. Aber diese beiden Dinge, die ich tun möchte, eine Einheit, wenn wir entweder auf Essen Witz klicken oder wussten Sie auf will, dass wir es ein bisschen anders stylen, so dass Sie wissen, es ist gelöscht. Also nennen wir das einen Akt des Stils. Das zweite, was ich tun möchte, ist, wenn die Panels geöffnet müssen wir irgendwie dynamisch eine Klasse hinzufügen, um sie anzuzeigen oder zu verstecken. Also lassen Sie uns jetzt ein bisschen mehr CSS zu dieser Datei hinzufügen. Wie ich bereits erwähnt habe, möchte ich ein bisschen mehr hinzufügen. Lassen Sie uns auf unseren Tab Wrapper zugreifen. Ich frage mich, dann verlässt das Panel mit der Klasse Panel. Und wie ich bereits erwähnt habe, werden wir diese aktive Klasse umschalten, oder? Und das alles, was tun wird, wenn es aktiv ist, ist, es wird es zeigen. Wir werden es als Block anzeigen. Das Letzte, was ich tun will, ist, dass ich auf unseren Tisch zugreifen will. Und wie ich bereits erwähnt habe, möchte ich eine Selected Class 2 hinzufügen, die, wenn ein Tab ausgewählt ist und seine Hintergrundfarbe auf ein anderes 139 geändert hat . 139, 139. Ich denke, das sollte funktionieren. Also gehen wir hin. Wir haben unser CSS gemacht. Ich denke, wenn wir Fehler sehen, werden sie auf dem Weg finden und wir werden sie beheben. Wenn wir unsere Indexdatei bekommen, denken Sie daran, lassen Sie mich das einfach erweitern. Denken Sie daran, was wir getan haben. Wir haben einen Wrapper für alle unsere Panels innerhalb der Netzhaut hinzugefügt. Wir haben einen Überschriftenabschnitt, den wir dieses UL-Tag geschrieben haben. Wir haben ihm eine Klasse von Schlagen gegeben, und wir haben zwei Tabs. Und wir bearbeiten diese Tochter geklickt Attribut. Was ist das? Ich werde in Kürze darauf eingehen. Innerhalb definiert unsere beiden Panels mit versteckten ihn für jetzt. Das wollen wir Klauseln hinzufügen. Wir wollen sie dynamisch hinzufügen, so dass einer angezeigt wird und wenn ein Benutzer auf eines dieser Panels klickt, die es anzeigt, wenn er auf das andere Panel klickt, verbirgt das vorherige und zeigt das neue. Denken Sie darüber nach, wie wir es schaffen können. Aber bevor wir darauf eingehen, lassen Sie mich einfach einen kurzen Vortrag über dieses tochtertickte Attribut halten. Wie funktioniert es und warum haben wir es? Wir sehen uns jetzt. 29. Was ist das the: Alles klar, worum geht es bei diesem Tochter-Attribut? Nun, zuerst hat HTML5 das Tochterattribut eingeführt, und es erlaubt uns, einige zusätzliche Informationen in unserem HTML-Element ohne besondere Bedeutung zu speichern . Treffen mit, können wir Art von Informationen in mir speichern und wir können mit diesen Informationen tun, wie wir diese keine harte und schnelle Regel, dass wir es nur in einem Umstand verwenden sollten. Wenn Sie also Daten zu HTML hinzufügen möchten, ist dies eine gute Möglichkeit, dies zu tun. Und keine Sorge, die Syntax ist super einfach. Alles, was wir tun müssen, ist ein Attribut mit einem Namen, der mit Tochter beginnt. Denken Sie daran, in unserem Beispiel, erinnern Sie sich an die Daten Strich geklickt, das war unser Attributname. Und sehr wichtig, denken Sie daran, um darauf zuzugreifen, müssen Sie JavaScript verwenden, um den Wert dieses Attributs zu lesen. Javascript und die Verwendung des Attributs gehen sehr Hand in Hand. Bilder loswerden dieser Folie, fliegenweg Verde. Und lassen Sie mich einfach sagen, dass das Lesen der Werte mit JavaScript, wenn wir auf dieses Datenattribut zugreifen möchten , auch sehr einfach ist. Alles, was wir tun müssen, ist die Punktnotation zu verwenden, war das Schlüsselwort, Tochter Seat, Objekt. Das war's. Also alles, was wir tun, ist, dass wir unsere Elemente greifen. Verwenden Sie die Punktnotation. Wir verwenden das Schlüsselwort Töchter. Es. Verwenden Sie dann erneut die Punktnotation. Und dann, um auf diesen Wert zugreifen zu können, fügen wir unseren Tochternamen ein. Denken Sie daran, in unserem Beispiel, das wir gerade gesehen haben, setzen wir den Namen abgeschnitten. Macht das irgendwie Sinn? Also wollte ich nur diesen sehr kurzen Moment nehmen, um diese Tochter sitzen Attribut in ein wenig detaillierter zu besprechen diese Tochter sitzen Attribut in , weil Sie es vielleicht noch nicht gesehen haben. Aber wie Sie in der nächsten Vorlesung sehen werden, hat es ein sehr, sehr praktisches Attribut, um Cold Harbor als sinnvoll zugänglich zu machen. Wenn nicht, mach dir keine Sorgen, wir werden es in den nächsten Minuten zerschneiden. Wir sehen uns in der nächsten Vorlesung. 30. Den ausgesuchte Kurs hinzufügen: Also hier sind wir. Wir sind damit beschäftigt, diese Registerkarten ganz unten hinzuzufügen. Wie Sie sehen können, klickt der Benutzer, nichts passiert. Also lasst uns zu unserem Texteditor springen und lasst uns anfangen, dieses JavaScript einzugeben. Ich will nicht, dass du darüber nachdenkst, wie du es machen kannst. Zuerst müssen wir auf einen Ereignis-Listener hören. Müssen wir nicht bestimmen, auf welche Registerkarte der Benutzer geklickt hat. Und wir können sogar hier plappern oder nutzen. Wir wissen, dass es heute alles aufblühen wird. Erinnerst du dich, dass wir diese beiden Hitter gelesen haben. Ich werde, Ich Tags in einem übergeordneten UL-Element. Verwenden Sie also Ereignis-Bubbling. Und natürlich, wenn es angeklickt wird, brauchen wir eine Möglichkeit, den Browser, das DOM, um diese entsprechende Strafe anzuzeigen. Daher müssen wir Klauseln dynamisch hinzufügen. Und wie machen wir das? Es gibt ein paar Möglichkeiten, aber ich möchte, dass Sie die Klassenlisten-API verwenden. Und denken Sie daran, dass es eine Methode namens Toggle gibt, die Sie ebenfalls verwenden sollen. Also pausieren Sie das Video hier und in den nächsten fünf Sekunden werde ich anfangen, die Lösung mit Ihnen zu schneiden. Viel Glück. Okay, ich habe gehört, du hast es ausprobiert. Das ist gut. Ich werde Daten als unsere Indexdatei texten. Lass uns die Punkt-JS-Datei herausbekommen. Und lasst uns anfangen zu codieren. Also lasst uns hier gehen und vielleicht nach unten, könnte es trotzdem in unsere Akte stecken. Lassen Sie uns einfach diesen Header kopieren. Es ist also gut, Ihren Code so zu strukturieren. Sonst wirst du es vergessen. Und es ist eine sehr einfache Website, so dass wir nicht mehrere JavaScript-Dateien benötigen. Normalerweise hättest du eine ganze Menge von verschiedenen. Okay, wo fangen wir an? Nun, erstens möchte ich mich mit unseren Überschriften und Listen befassen. Sagen wir einfach, lasst uns unser übergeordnetes UL-Tag schnappen. Denken Sie daran, dass wir unsere Indexdatei haben. Wir können hier sehen, dass wir unsere Überschriften in diesem Element gelesen haben. Gehen wir zurück zu unserem JavaScript hier und lassen Sie uns zuerst unsere Überschriften greifen. Wir wissen, wie man das jetzt macht, ihr alle Profis dabei. Lassen Sie uns QuerySelector verwenden. Und wir wollen Artikel mit Klasse, mich zu schlagen, gehen Sie hierher mit gegebener AQL, dieser Klasse des Schlagens. Also gehen wir hin. Nicht schwer, oder? Das nächste, was ich tun möchte, ist, dass ich auch unsere Panels definieren möchte. Beschreiben Sie unsere Überschriften und die Medien. Lassen Sie uns unsere Panels greifen und ist eine neue JavaScript-Variable namens Panels definiert. Und ja, wir wissen auch, wie man das macht. Abfrageselektor, alles, weil denken Sie daran, hier gibt es mehr als ein Panel. Und wir gaben ihm eine jede Klasse von Panel, um unsere Indexdatei zu erhalten. Wir gaben jedem div, jedem Panel seine eigene Klasse namens panel. Und wieder, es ist nicht schwer. Wir gehen nur Schritt für Schritt. Okay, das nächste, was ich tun möchte, ist, dass ich zwischen dem Tab wechseln möchte , auf den die Benutzer geklickt haben, weil ich es anders formatieren möchte. So sagen Sie einfach eine ausgewählte Elementvariable definieren. Wechseln Sie zwischen Klassen. Und ich gehe jetzt ein bisschen schneller, weil wir diese Dinge in früheren Herausforderungen und Übungen gemacht haben . Sie sollten also eine sehr gute Idee haben, wie das funktioniert. Aber lassen Sie uns eine Variable definieren, die als ausgewählte Panel bezeichnet wird. Und es beginnt damit, dass es als null definiert wird. Nun, wie ich in der Einleitung dazu erwähnt habe, möchte ich das Event-Bubbling nutzen. Lassen Sie uns Ereignis-Listener auf das UL übergeordnete Element anhängen. Wie machen wir das? Nun, wir wissen, dass wir es in einer JavaScript-Variablen namens hitting definiert haben, um, dass es eine Methode namens addEventListener gibt. Du wirst das wohl so einfach gleiten, dass du mit mir trägst. Es wird etwas komplizierter. Wir hören auf das Click-Ereignis auf mich. Und natürlich möchten wir unsere Handler-Funktion ausführen, verwenden Sie einfach die Pfeilsyntax. Sehr, sehr einfach. Das erste, was ich jetzt tun will, ist, dass wir finden, was ich, ich habe den CBT ausgelöst. Denken Sie an unsere Indexdatei, wir für diese beiden verbündeten Panzer halten. Und wenn der Benutzer eine nimmt, wollen wir herausfinden, auf welche geklickt wurde und wir möchten dynamisch einen Cluster hinzufügen. Los geht's. Lasst uns herausfinden, welcher Verbündete das Ereignis ausgelöst hat und wie machen wir das? Erinnerst du dich? Nun, sehr einfach. Wir definieren eine Variable namens target. Wir greifen auf unser Ereignis zu, werden dies ausführen, halten Sie einfach mit der Norm Schritt und wir definieren es nicht als Ereignis, wir haben es nur als E definiert und jedes Ereignis, das ausgegeben wird, hat eine Zieleigenschaft und das sagt uns, welches Element tatsächlich hat dieses Ereignis ausgelöst. Und sie jetzt, lassen Sie uns unsere Tochter verwenden, legt den Wert der Tochter fest. Dies wird bestimmen, welches Panel wir dem Benutzer angezeigt haben. Denken Sie daran, wir haben Alice angerufen, angeklickt. Du kannst es nennen, wie auch immer du willst. Und denken Sie daran, dass wir in diesem kurzen Vortrag erklärt haben, worum es bei diesem Datenattribut geht. Also, ja, lasst es uns holen. Ich werde Tochter wird das Ereignisziel sein. Und es hat eine Tochter gesetzt Eigenschaft. Denken Sie daran, dass wir dieses Schlüsselwort verwenden müssen und wir unsere angerufen angeklickt. Wir müssen, es ist wirklich so einfach. Cool. Okay, jetzt möchte ich, dass wir jedem dieser LI-Tags dynamisch eine Klausel hinzufügen. Um das zu tun, möchte ich die IF-Anweisung von JavaScript verwenden. Ich möchte, dass wir sagen, nun, wenn das Ziel, richtig, es ist eines dieser LI-Tags. Erstens muss der Tag-Name einem Verbündeten entsprechen. Wenn der Benutzer zwischen den Schaltflächen oder rechts neben der Schaltfläche und dem leeren Leerraum klickt, möchte ich, dass nichts passiert. Es ist also nur, wenn der Benutzer auf eines dieser LI-Tags klickt. Wenn das der Fall ist, entfernen wir das aktuell ausgewählte Element. Und wie machen wir das? Nun, wenn das flüssige Panel, das wir oben als null finden würden, wenn das ausgewählte Panel nicht gleich null ist, dann wissen wir, dass es aktiv ist. Wir wissen, dass eines dieser Tags aktiv ist. Und in diesem Fall wollen wir auf unser Panel zugreifen. Wir gingen, um seine Krallen Stange beeinflussen. Und wir wollen das tun, indem wir auf diese Klassenlisten-API zugreifen. Und wir haben das schon einmal durchgemacht, aber es hat eine Eigenschaft namens Toggle, was sehr, sehr nützlich ist. Und wir wollen eine Klausel umschalten, die wir gerade zufällig ausgewählt haben. Okay, jetzt haben wir das aktuell ausgewählte Element entfernt. Der nächste Schritt besteht darin, auf dem aktuellen Element zu enden, das ausgewählt wurde. Wir möchten die ausgewählte Klasse hinzufügen. Also gingen wir, um unseren Bleistift zu schnappen. Und wir wollen das als die neu angeklickte Verbündete Tech definieren. Und das Letzte, was wir tun wollen, ist, dass wir auf dieses Flüssigkeitsfeld zugreifen wollen. Wir wollen die Klassenliste API zugreifen x ist eine Eigenschaft namens total. Und natürlich möchten wir das ausgewählte hinzufügen. Macht das Sinn? Gehen wir zu unserem Browser. Lassen Sie uns auf einen klicken und bewegen Sie unsere Maus. Und Sie können sehen, dass unser CSS Styling angewendet hat. Wir haben dies buchstäblich dynamisch bearbeitet und klicken Sie auf die andere ändert. Und um es dir zu beweisen, was ich tun kann, ist, dass wir hier die Konsole öffnen, und lasst uns jetzt auf diesen degenerierten Knopf klicken. Wir können sehen und bearbeiten diese Klasse aufgerufen dynamisch. Wenn wir jetzt auf den Essen Witz klicken, Es ist die ausgewählte in der Nähe zu bearbeiten und es wird entfernt es von der anderen. Wie genial ist das? Gut gemacht? Und ich hoffe, du folgst mit. Ich hoffe, Sie finden, war intuitiver. Tut mir leid, ich weiß, dass ich hetze. Aber wir haben das schon mal getan. Wenn Sie Fragen haben, bin ich sehr, sehr glücklich, Ihnen zu helfen. Also bitte posten Sie sie auf Q&A. Aber ich hoffe, es ergibt Sinn. Wir haben einen unglaublich langen Weg zurückgelegt. Aber Sie wissen, was dieser Vortrag lange wird, ich möchte, dass Sie einfach innehalten, durchgehen, was wir gerade zusammen gelernt haben. Und dann in der nächsten Vorlesung, warum haben wir es fertig gemacht? Es wird episch sein. Ich sehe dich jetzt. 31. Zeigt und versteckt unsere Panels, wenn der Wegweiser geklickt wird:: Okay, lassen Sie uns mit unserem Code fortfahren. Ich habe jede Menge Spaß. Ich hoffe, du solltest das tun. Der nächste Schritt, den wir jetzt machen wollen, ist, dass wir die Strafe finden wollen, die wir zeigen wollen, oder? Weil wir auf den Registerkarten ticken, aber darunter ist nichts zu sehen. Wie machen wir das? Nun, wir wollen immer noch innerhalb des if-Blocks sein, oder? Weil wir nur wollen, dass dies geschieht, Es gibt Panels zu zeigen, wenn wir tatsächlich auf ein verbündetes Element geklickt haben. Aber jetzt ist es an der Zeit, das Panel zu finden, das wir zeigen möchten. Und diese Medea-Studenten sind genau der Grund, warum wir diese Tochter Attribute brauchten. Dies ist, wie wir es verwenden, definiert eine JavaScript-Variable namens Ziel-Panel. Weil dies die Zielstrafe ist. Wenn wir dem Benutzer zeigen wollen, wollen wir auf unser Dokumentobjekt im Netz zugreifen. Wir möchten auf eine Abfrage Selektor zugreifen. Und die Abfrage, die das Element ausgewählt wurde, nach dem wir suchen möchten, ist das Tochterattribut. Und denken Sie daran, was das Datenattribut ist. Es ist der Gegenstand, auf den wir geklickt haben. Denken Sie daran, wir haben es als Ziel definiert. Wir haben unsere Indexdatei. Es wird entweder die erste Verbündete Tabelle sein, das zweite LI-Tag. Wir haben ein Datenattribut namens clicked definiert, und es wird entweder einen Wert von ID von gioco haben, ideale Fakten. Und wir haben das erste Panel und die ID des Witzes im zweiten Panel gegeben, ID der Fakten. Also hoffe, das macht Sinn, warum wir es brauchten. Wir finden buchstäblich ihr Panel jetzt, das die ID ihres Datenattributs hat. Wer sich keine Sorgen macht, wenn du es nicht ganz verstehst, werden wir uns jetzt damit befassen. Das nächste, was ich tun will, ist, dass wir diese Panels durchlaufen wollen, richtig? Und wir wollen sicherstellen, dass das Zielpanel die Strafe klar ist. Und dann wollen wir in der Nähe bearbeiten. Und die Klasse, die wir hinzufügen möchten, heißt aktiv y. Nun, wenn wir zu unserem CSS gehen und wir hier nach unten scrollen, gibt die Klasse der aktiven ihm eine Anzeigeeigenschaft von Block. Das wollen wir tun. Und wenn wir in unserer JavaScript-Datei nach oben scrollen, denken Sie daran, ganz oben haben wir unsere Panels in einer Variablen namens Panels definiert. Wir haben gerade alle diese divs mit einer Klasse von Panel abgefragt. Verlieren Sie sich nicht im Detail. Alles, was wir jetzt tun, müssen wir bestimmen, ob das aktuell ausgewählte Panel das angezeigt wird und es zulassen. Sie denken wahrscheinlich, dass Sie denken, Client, wenn wir anfangen müssen, durch Panels zu schleifen, müssen wir unsere Liste in ein Array konvertieren. Also haben wir Zugriff auf die für jede Methode. Wenn Sie überhaupt angefangen haben, in dieser Richtung nachzudenken, ernsthaft, Gut gemacht. beginne mir zu beweisen, dass du wirklich ein wirklich guter Programmierer wirst. Fledermäuse in diesem Fall ist es ein bisschen einzigartig. Wenn wir hier in unserer JavaScript-Datei scrollen und wir sehen uns die Variable dieses Panels an. Wir haben eine Zugriffsmethode namens Abfrage Selektor alle verwendet. Und das Schlüsselwort hier ist alles. Wenn wir dies verwenden, haben wir keine HTMLCollection zurückgegeben. Wir sind ein Schriftsteller zurückgegeben. Und keine Liste ist ziemlich einzigartig, denn obwohl es kein Array out of the box ist, gibt es uns Zugriff auf die für jede Funktion, was wirklich, wirklich genial ist. Es bedeutet nur, dass wir die Umwandlung unserer Liste in ein Array umgehen können. Ich würde Sinn ergeben, aber lassen Sie uns wieder in unseren Code springen. Okay, also was machen wir? Nun, lassen Sie mich einfach hier sagen, um zu sehen, dass Sie sich erinnern, wir können die für jede Funktion verwenden, weil Abfrage-Selektor alle eine Knotenliste zurückgibt. Okay, Hoffe, das ergibt Sinn. Alles, was wir dann tun müssen, ist unsere Panels Knotenliste. Denken Sie daran, bei mir haben wir Zugriff darauf für jede Methode direkt aus der Box. Und lasst uns durch jedes Panel schleifen. Und es kann seine Verwendung der neuen Fehlersyntax nicht beenden, um unseren Code zu definieren. Alles, was wir tun wollen, ist, dass wir überprüfen wollen, ohne Strafe ist das gleiche wie das Zielpanel. Und Rest das Zielfeld ist das Element, das wir dem Benutzer zeigen möchten. Wenn das der Fall ist, wollen wir auf unser Panel mit A1 zugreifen, um auf die Klassenlisten-API zuzugreifen. Und wir wollen den Verlust bearbeiten. Und die Kosten, die wir als aktiv hinzufügen möchten. Richtig? Kannst du glauben, dass es so einfach ist? Sonst? Was wollen wir denn passieren? Das ist felsig, vermutlich vermutet. Wir wollen immer noch auf die Klassenlisten-API zugreifen, aber dieses Mal wollen wir die Klasse der aktiven entfernen. Hoffe, das funktioniert, weil ich sonst wie ein solches Mapping aussehen werde. Also hier gehen wir, hier werde ich Tabs. Lassen Sie uns auf Essen Witz klicken. Wow, da gehen wir. Klicken wir auf Dino. Und nun, ja, so cool. Bitte feiern Sie Ihre Erfolge. Spring hoch und runter, pumpt etwas Musik. Wir haben viel, viel Arbeit geleistet und das wird auch ziemlich fortgeschritten. Wie genial ist das? Fledermäuse? Weißt du was? Ich wollte noch eine Sache machen. Ich möchte nicht, dass die Antwort so angezeigt wird. Wie nennst du eine gefälschte Nudel? Und in Pasta zeigt es nur, was eine 12 ist. Warum konvertierst du das nicht, versuchst das zu konvertieren oder antwortest auf den Taktstock. Und wenn der Benutzer auf die Schaltfläche klickt, nur als die beginnende Anzeige benannt. Denken Sie darüber nach, wie Sie das tun können und warum halten wir nicht schnell einen weiteren Vortrag. Und ich zeige Ihnen, wie unser Wort es eingetippt hat und es ist sehr, sehr schnell. Sie werden sehen, das ist schnell und zuordnung. Wir sehen uns in der nächsten Vorlesung. 32. Einen dynamische Knopf hinzufügen: Wie ich bereits erwähnt habe, möchte ich, dass wir dies jetzt nicht direkt zeigen. Ich möchte, dass wir eine Schaltfläche hinzufügen, wenn der Benutzer auf eine Schaltfläche in einem Hahn klickt , sagt in der SCADA HTML hier angezeigt, und lassen Sie uns nach unten scrollen, um es gefälschte Nudel nennen ist diesen Absatz löschen. Ich möchte jetzt einen Schlagstock hinzufügen und dies gibt uns Taste und ID von Ausländern zeigen auf TV-Sets, was es tut. Und wir können einfach das Wort Antwort hier haben. Und lasst uns unsere Antwort unter uns haben. Dies wird es in einem Absatz-Tag und geben Sie ihm eine ID des Beginns. Wie ist das Abfluss kann leer sein, wenn wir zu unserem Browser gehen und wir auf Essen Witz klicken, da gehen wir. Da ist unser Knopf. Es ist sehr einfach, aber jetzt, wenn wir Tickets einkaufen, passiert nichts. Also, wie würden wir das machen? Nun, das ist ein JavaScript kommt ins Bild. Gehen wir zurück zu unserem Codierungs-Editor. Gehen wir zu unserer JavaScript-Datei und Leads jetzt. Wo bin ich? Scrollen Sie hier nach oben. Ja, wir müssen nicht mehr mit inet click-event sein. Also verwerfen Sie all diesen Code und es ist jetzt befassen sich mit Schaltfläche, um den Beginn anzuzeigen. Es wird sehr einfach sein. Das erste, was ich tun will, ist, greifen wir unseren Knopf. Nennen wir es Onset-Taste. Wir wissen, wie man das macht. Dokument. Erhalten Sie Element nach ID. Und der Ausweis, den wir ihm gegeben haben, war der Beginn der Show. Also gehen wir hin. Wir haben unseren Knopf. Alles, was wir jetzt tun müssen, ist, dass wir einen Ereignis-Listener direkt hinzufügen müssen, damit wir auch wissen, wie das geht. Wir greifen auf ATD namens AddEventListener zu. Damit wollen wir auf die Klick-Events hören. Und wenn das Click-Ereignis ausgelöst wird, lassen Sie uns einen Handler auslösen, den wir onset aufrufen, ist es definieren, indem Sie JavaScript-Funktionsschlüsselwort verwenden, die wir jetzt onset aufrufen. Es wird uns die Veranstaltung geben. In diesem Fall brauchen wir es eigentlich nicht. Also lassen Sie mich das wirklich löschen. Was wollen wir in diesem Handler machen? Denk darüber nach. Nun, erstens möchten wir diesem Absatz eine Klasse hinzufügen. Okay, ich möchte dynamisch bearbeiten, und ich möchte auch den Textinhalt ändern. Ich möchte die Antwort geben, und dann möchte ich den Knopf verstecken. Also gehen wir zurück zu unserer JavaScript-Datei und lassen Sie uns das tun. Also zuerst, lassen Sie uns auf unser Dokument zugreifen, Element für ID erhalten. Das ist gut. Dieser Absatz, den wir eine Vorstellung von Beginn gegeben haben. Und lassen Sie uns eine Klausel plus Listen hinzufügen. Innerhalb dieser API haben wir eine Add-Eigenschaft oder Methode und wir wollen ihr eine Klasse von Zucker geben. Und keine Sorge, wir werden es jetzt stylen. Lassen Sie uns dasselbe tun, aber jetzt möchte ich, dass ich das ändern möchte, braucht Inhalt. Also erhalten Sie Element nach ID. Wir wollen den Absatz bekommen. Wir wollen seine Takes Inhalt ändern. Und wir wollen, dass das der Beginn ist, was ein IM ist, Pasta in der Vergangenheit. Los geht's. Dann lasst uns endlich unseren Antwortknopf greifen. Lassen Sie uns Stil-Eigenschaft, seine Anzeigeeigenschaft, und setzen Sie es auf keine. Also, wenn wir jetzt zu unserem Browser gehen, klicken wir auf Essen Witz. Wir haben einen Knopf, wir klicken darauf und wir bekommen den Beginn, Woohoo. Das ist, lass es uns wählen, nur um es ein bisschen hübscher aussehen zu lassen. Wir wissen, dass wir diese Klassenliste hinzugefügt haben. Wir werden nur Klausel kürzer genannt. Alles, was wir tun müssen, ist, dass wir in unsere styles.css gehen können. Ja. Und wir können die Show verlassen. Es ist so einfach. Wir können seine Hintergrundfarbe ändern. Lass uns eine schöne gelbe Farbe machen. Hoffentlich sieht das schön aus. Wir können seine Breite definieren, ein 100 Pixel. Wir können ihm etwas Polsterung geben. Und geben wir ihm eine Grenze, nur um es zu beenden. Solide gelb. Ich will es etwas dunkler, die Grenze. Lassen Sie uns zu unserem Browser gehen. Und da gehen wir. Es sieht ziemlich richtig aus. Also, wenn wir Lebensmittel Witz erfrischen, was tun coole Wirkung Nudel. Wenn der Benutzer auf Antwort klickt, werden wir zu uns, einem Betrüger, zurückgeworfen. Ich kann nicht glauben, wie weit wir mit einem Baum gekommen sind. Verbessern Sie einfach unsere Seite Schritt für Schritt, ernsthaft und wirklich so lustig, ich hoffe, Sie haben Spaß, weil Sie wirklich eine Menge nützlicher Informationen gelernt haben , die Sie verwenden können, um Ihre Web-Apps anzuwenden. Ich bin super aufgeregt, Walden, danke, dass du bei mir bleibst. Ich hoffe, Sie haben diesen Kurs sehr genossen. Wenn Sie Fragen haben, posten Sie sie auf Q&A, ich bin hier, um Ihnen zu helfen und weiterzumachen, bleiben Sie motiviert. Und wir sehen uns in der nächsten Vorlesung. 33. Kurs und Serie: Wer könnte das wirklich sein? - Es? Alle guten Dinge gehen zu Ende, oder? Sera. Sera, du hast es so gut gemacht, führend und spät. Was ist die weibliche Version der Beine? Das Recht. Meine Damen und Herren, vielen Dank, liebe Studenten. Wir bleiben bei mir bei dieser ganzen Serie. Wenn das die Erstklassige ist, die du von mir gehört hast. Vielen Dank. Danke für den Sport. Ich würde viel Spaß machen, weil wir in diesem Verlust eine ganze Logik zusammen gebaut haben. Wirklich war in Ordnung. Und es gilt viele, wenn nicht alle, der Techniken, die ich Ihnen in früheren Klassen dieser DOM-Serie beigebracht habe. Nun, war wirklich cool, nicht wahr? Und halte es nicht für selbstverständlich. Du weißt jetzt, was die Kuppel ist. Wir wissen, was die Bombe ist, nicht da, wenn wir über die Stückliste sprechen, die Bombe, Sie wissen, wie sich das DOM von JavaScript und Python unterscheidet. Sie wissen jetzt, wie Sie auf das DOM zugreifen können. Erinnerst du dich an die Methoden von X? Sie wissen, wie Sie bei einer Bewegung im DOM durchqueren können. Denken Sie daran, die übergeordneten, untergeordneten und gleichgeordneten Beziehungen von Knoten zu verwenden, Sie wissen, wie Ereignisse funktionieren, woher sie kommen. Sie wissen, wie Ereignis-Listener an die Seite anhängen. Sie wissen, wie man JavaScript schreibt, um auf diese sicherlich Adern zu reagieren. Und natürlich, in dieser Klasse wissen Sie jetzt, wie man ein Projekt erstellt. Also hoffe ich wirklich, dass du in diesem Kurs eine Menge gelernt hast, aber ich brauchte lange, um zu erfahren, was ich in diesem Kurs gefühlt habe. Wirklich sind Hubbard Ihnen einen Hub vorschlagen? Es macht wirklich Ihren Lernprozess in der Web-Entwicklungsbranche viel schneller. Vielen Dank für all Ihre Unterstützung. Ich danke Ihnen vielmals. Bitte hinterlassen Sie eine Bewertung, wenn Sie den Kurs genossen haben, wenn Sie es nicht getan haben, lassen Sie es mich wissen und ich werde versuchen, zu verbessern. Ich bin nicht perfekt weit davon entfernt. Und bevor wir fertig sind, denken Sie daran, Ihre Hand bei der Aufgabe zu versuchen. Auf diese Weise schreibt einige Zuweisungen, dies war eine Aufgabe. Viel Spaß und ich hoffe, Sie eines Tages in einer zukünftigen Klasse von mir zu sehen. Vielen Dank. Vielen Dank. Vielen Dank. Und Audios.