Modifikation des Dokumentenobjektmodells (DOM) mit JavaScript | Laurence Svekis | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

Modifikation des Dokumentenobjektmodells (DOM) mit JavaScript

teacher avatar Laurence Svekis, Best Selling Course Instructor

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

15 Einheiten (1 Std. 36 Min.)
    • 1. Promo DOM

      2:42
    • 2. Einführung in die Arbeit mit JavaScript und der DOM

      2:54
    • 3. Was ist die DOM

      6:46
    • 4. JavaScript DOM Document Objekt

      5:50
    • 5. JavaScript getElementById

      6:56
    • 6. JavaScript DOM Auswahl von Elementen über Kurs und Tags

      6:34
    • 7. JavaScript die Document

      5:22
    • 8. JavaScript Update mit der DOM aktualisieren

      5:48
    • 9. JavaScript DOM onclick

      5:36
    • 10. JavaScript Mouse Mouse

      7:32
    • 11. JavaScript AddEventListener

      7:28
    • 12. JavaScript Queryselectorall mulitple Elemente event

      7:17
    • 13. JavaScript Weitere Elementauswahl

      6:03
    • 14. JavaScript Erstellen neuer Elemente

      6:27
    • 15. DOM und Form erstellen.

      13:01
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

208

Teilnehmer:innen

--

Projekte

Über diesen Kurs



manipulation der DOM

Das Lerne, wie du mit dem DOM interagierst, wird dich schnell mit mehr Interaktion auf deinen webpages. beginnen.

Das Document ist ein Modell deines HTML-Dokuments in JavaScript als Objekte.

Elemente befinden sich innerhalb der HTML-Seite, die vom Browser umgewandelt wird. JavaScript-Engine in dem Browser erstelle die Elemente als JavaScript Mit denen dir den Entwickler:innen viel zu arbeiten, die der Himmel ist die Grenze, mit dem du an diesem Punkt machen kannst. Du kannst mit diesen Objekte mit JavaScript kommunizieren und sie dann manipulate Alle Änderungen, die du vornimmst, werden innerhalb der Webseite selbst sichtbar.

Verwende JavaScript, um Elemente aus deinem HTML-Code auszuWÄHLen. Alle Elemente der Webseite werden innerhalb der DOM. Document Das Lernen von der besseren Verwendung des DOM ermöglicht dir, fortgeschrittene Benutzerinteraktionen zu erstellen und den Inhalt dynamisch zu aktualisieren.

Siehst dich, wie einfach es ist, Elemente auszuwählen und die Interaktiv zu machen.

Wähle jedes Element aus deinem HTML aus und erwecke es mit JavaScript zum Leben erwecken.

Von einem Kursleiter mit über 15 Jahren und einer in der Entwicklung in der echten Welt lernst, lernst du, wie du das DOM für deine Webprojekte verwendest.

Jedes Element ist ein Elementobjekt, das Details über das Objekt enthält. Die DOM ist wie ein Einstieg, um auf alle Funktionen zu gelangen, die bereits vorhanden sind. JavaScript gibt dir die Möglichkeit, die erste Tür zu öffnen und erstaunliche Dinge auf deiner Website zu machen.

Auswahl von Elementen aus deinem HTMLUpdate für das
HTML-
Füge die Ereignis-Trigger hinzu. Gestalte deine Elemente
dynamisch und validiere Am Ende des Kurses durch das Anfänge und
erkenne
dich, wie du den DOM innerhalb deiner Website bearbeitest.

Ich bin hier, um zu lernen, wie du deine eigenen Websites erstellen kannst und dich auf Fragen zu beantworten, die du vielleicht hast.

JavaScript ist die meiste Fähigkeiten in der Nachfrage und das Lerne, wie du mit JavaScript verwendest, wird dich von der Masse abheben.

Möchtest du mehr wissen, auf was du auf den ersten Schritt machst. Beginne damit, wie du auch innerhalb deiner Website noch heute DYNAMI- und INTERAKTIV Seiten erstellen kannst.

Triff deine:n Kursleiter:in

Teacher Profile Image

Laurence Svekis

Best Selling Course Instructor

Kursleiter:in

Web Design and Web Development Course Author - Teaching over 1,000,000 students Globally both in person and online.    Google Developer Expert since 2020 GDE

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I create... Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Promo DOM: JavaScript-Manipulation der Morgendämmerung. Das ist das Dokumentobjekt. Beginnen Sie mit der Erstellung dynamischer und interaktiver Inhalte, um Ihre Webseiten wirklich zu erreichen. Lernen, wie man mit Dom interagiert, werden Sie schnell mit MAWR Interaction mit Ihrer Webseite Dokument Object Models ist ein Modell Ihres HTML-Dokuments dargestellt als JavaScript-Objekte. Elemente befinden sich innerhalb des HTML-Stadiums, der vom Browser gerendert wird. JavaScript-Engine erstellt dann Darstellungen dieser Elemente als JavaScript-Objekte, die wiederum gibt Ihnen und dem Entwickler eine ganze Menge Informationen zu arbeiten. Buchstäblich ist der Himmel die Grenze. Sie können mit diesen Objekten mit JavaScript auf kommunizieren, sie dann manipulieren und aktualisieren und sie natürlich ändern. Alle Änderungen, die Sie vornehmen, sind auf der Webseite sichtbar. Verwenden Sie JavaScript, um Elemente von Ihrem Alter bis Kälte auszuwählen. Alle Webseitenelemente werden innerhalb der Tür dargestellt. lernen, Saddam besser zu nutzen, können Sie erweiterte Benutzerinteraktionen erstellen und die Inhaltsdynamik aktualisieren. Sehen Sie, wie einfach es ist, Elemente auszuwählen und interaktiv zu gestalten. Wählen Sie ein beliebiges Element für mehr Tenure html Agent und erwecken Sie es zum Leben über Java-Skript. Dies ist von einem Instruktor mit über 15 Jahren Erfahrung in der realen Webentwicklung. Erfahren Sie, wie Sie die Morgendämmerung für Ihre Webprojekte verwenden. Jedes Element ist ein Elementobjekt, das Details zu diesem Objekt enthält. Dong ist wie eine Tür, um auf all diese Funktionen zugreifen zu können, die bereits in Ihrem Web Coat vorhanden ist . JavaScript gibt Ihnen die Möglichkeit, diese Tür zu öffnen und erstaunliche Dinge auf Ihrer Website passieren zu lassen. Erfahren Sie, wie Sie Elemente aus Ihren HTML-Aktualisierungselementen und HTML-Elementen im Handumdrehen auswählen. Bei Ereignis löst Stil aus. Ihre Elemente lesen und validieren Eingaben und eine ganze Menge dynamisch. Am Ende des Kurses haben Sie die Fähigkeiten und wissen, wie Sie die Morgendämmerung innerhalb Ihrer Website manipulieren können. Ich bin hier, um Ihnen zu helfen, Ihre eigenen Websites zu erstellen und bereit, alle Fragen zu beantworten Sie mögen. JavaScript ist die gefragteste Fähigkeit und lernen, wie man JavaScript verwendet, wird Ihnen helfen von der Masse zu trennen. Möchten Sie mehr wissen? Worauf wartest du? Machen Sie den ersten Schritt, schließen Sie sich jetzt an und lernen Sie, wie Sie dynamische und interaktive Webseitenauf Ihrer Website heutelanden auf Ihrer Website heute 2. Einführung in die Arbeit mit JavaScript und der DOM: Mein Name ist Lawrence, und ich werde dein Lehrer für diesen Kurs sein. Ich habe diesen Kurs erstellt, um all die erstaunlichen Dinge zu veranschaulichen, die mit JavaScript und mit der Morgendämmerung interagieren können . Das ist das Dokumentobjektmodell JavaScript. Manipulation der Morgendämmerung Beginnen Sie mit der Erstellung dynamischer und interaktiver Inhalte, um Ihre Webseiten wirklich zum Leben zu erwecken. Lernen, wie man mit der Morgendämmerung interagieren wird Sie schnell mit mawr Interaktion innerhalb Ihrer Webseiten Document Object Modell ist ein Modell Ihres HTML-Dokuments als JavaScript-Objekte dargestellt . Elemente befinden sich innerhalb der HTML-Seite, die vom Browser gerendert wird. JavaScript-Engine erstellt dann Darstellungen dieser Elemente als JavaScript-Objekte, die wiederum gibt Ihnen und dem Entwickler eine ganze Menge Informationen zu arbeiten. Buchstäblich ist der Himmel die Grenze. An dieser Stelle können Sie mit diesen Objekten mit JavaScript kommunizieren und sie manipulieren und aktualisieren und im Irak ändern. Alle Änderungen, die Sie vornehmen, werden auf der Webseite selbst sichtbar. Verwenden Sie JavaScript selektieren Sie Elemente aus Ihrem HTML-Code. Alle Webseitenelemente werden innerhalb des Hundes dargestellt. lernen, Saddam besser zu nutzen, können Sie fortschrittlichere Nutzerattraktionen erstellen und den Inhalt dynamisch aktualisieren. Sehen Sie, wie einfach es ist, Elemente auszuwählen und sie interagieren zu lassen. Wählen Sie ein beliebiges Element aus Ihrer HTML-Seite aus und erwecken Sie es mit JavaScript zum Leben. Disteln von einem Instruktor mit über 15 Jahren Erfahrung in der realen Webentwicklung. Erfahren Sie, wie Sie die Morgendämmerung für Ihre Webprojekte verwenden. Jedes Element ist ein Elementobjekt, das Details zu diesem Objekt enthält. Dawn ist wie eine Tür, um auf all diese Funktionen zugreifen zu können, die bereits in Ihrem Web-Court vorhanden ist . JavaScript gibt Ihnen die Möglichkeit, diese Tür zu öffnen und erstaunliche Dinge auf Ihrer Website passieren zu lassen. Erfahren Sie, wie Sie Elemente aus Ihren HTML-Aktualisierungselementen und HTML-Elementen im Handumdrehen auswählen. Bei Ereignis löst Stil aus. Ihre Elemente lesen und validieren Eingaben in einer ganzen Flasche dynamisch. Am Ende des Kurses haben Sie die Fähigkeiten und wissen, wie Sie die Morgendämmerung innerhalb Ihrer Website manipulieren können. Ich bin hier, um Ihnen zu helfen, ihre eigenen Websites zu erstellen und bereit, alle Fragen zu beantworten Sie haben können. JavaScript ist eine gefragteste Fähigkeit, und lernen, wie man JavaScript verwendet, wird Ihnen helfen, sich von der Masse zu trennen. Wollen Sie mehr wissen. Worauf wartest du? Machen Sie den ersten Schritt. Jetzt beitreten und lernen, wie Sie dynamische und interaktive Webseiten auf Ihrer Website erstellen können? 3. Was ist die DOM: in dieser Lektion. Ich möchte eine kurze Einführung in den Dom machen, wie wir den Dom sehen können, was er ist und wie wir beginnen können, mit der Morgendämmerung zu interagieren. Also, was ist die Morgendämmerung? Es ist die Abkürzung für Dokumentobjektmodell, und dies ist ein Objektmodell, das auf allen HTML-Elementen basiert. Es ist hier drüben auf der linken Seite. Ich habe meinen Editor geöffnet, und ich habe gerade eine wirklich einfache Webseite mit mehreren Elementen hier. Also habe ich ein paar HTML-Dibs. Ich habe hier ein paar Texte und so weiter. Und so all diese Informationen, wenn der Browser sieht und interpretiert, macht A mit diesem HTML-Code, es erstellt tatsächlich Dokumentobjekte in JavaScript und diese Luft zugänglich über JavaScript im Wesentlichen, was die oberste Ebene der Morgendämmerung ist, das werden die Fenster aus dem Fensterobjekt sein, und wir werden Ihnen durch die Lexx einige Lektionen zeigen, auch einige eingebaute Funktionen, die bereits innerhalb des Fensterobjekts verfügbar sind. Also, um tatsächlich zuzugreifen und zu sehen, was im Dom enthalten ist, können wir es in unserem Javascript ausgeben. Nun, wenn es um Javascript geht, haben wir mehrere Möglichkeiten, wo wir unsere Skript-Tags platzieren können, damit wir unsere Skript-Tags platzieren können . Manchmal sehen Sie Skript-Tags hier oben, und manchmal sehen Sie Skript-Tags hier unten. Und wenn es um das DOB geht, das eigentlich wichtig, wenn Ihr Platz in den Skript-Tags ist, dass wir sicherstellen wollen, dass dieser Inhalt zugänglich ist, bevor wir versuchen, darauf zuzugreifen. Und was das im Wesentlichen bedeutet, ist, dass die Browser tatsächlich, wenn es diesen HTML-Code rendert, es auch diesen Dom ausbaut. Und bis der gesamte HTML-Code gerendert ist, haben wir eigentlich nicht den vollständigen Inhalt der Morgendämmerung. Also haben wir Dinge beißen wie Standard. Also haben wir das Fensterobjekt, damit ich sehen kann, dass, wenn ich das Konsolenverzeichnis mache und wenn ich das Fenster aufliste und wenn ich das Konsolenverzeichnis wieder mache und ein journalistisches Dokument mache und was das tun wird, mir ein Element in meinem Konsolenprotokoll gibt , die ich öffnen kann und ich durchklicken kann, und ich kann tatsächlich alle verschiedenen Teile des Dong sehen. Also haben wir das Fenster hier oben und so. Sehen Sie, wir haben viele verschiedene Funktionen, die standardmäßig in diesem Fenster verfügbar sind. Und dann, natürlich, alle diese Luft über Javascript zugänglich. Und während wir die nächsten Lektionen durcharbeiten, werde ich Ihnen das noch viel detaillierter zeigen. Und wie Sie sehen können, gibt es hier wirklich eine Menge Informationen. Und es gibt eine Menge Zeug, das eso enthielt. Wir werden mit Warnungen arbeiten, und wir werden mit Eingabeaufforderungen und diesen eingebauten Funktionen arbeiten . Also müssen wir tun, ist sie mit dem Fensterobjekt aufzurufen, und dann erhalten wir Zugriff und das führt die Funktionalität, die in ihrer enthalten ist. Das war also nur das Windows-Objekt. Und jetzt haben wir das Dokumentobjekt und wir sehen, dass wir viele Informationen darin enthalten haben. Also das eigentlich, weil wir es hier oben geladen haben, bekommen wir nicht wirklich Zugriff auf alle Körperinhalte, und ich habe Skript-Tags unten, also werde ich Ihnen schnell zeigen, was passiert, wenn ich das Dokument auch unten. Also werden wir diese Seite neu laden und sehen, dass wir jetzt das Fenster produzieren. Das Dokument und wir produzieren auch ein zweites Dokument hier unten. Und der Unterschied hier ist, dass wir auch die Leiche haben, weil wir an diesem Punkt, sobald wir das Skript hier unten haben, eine Gelegenheit hatten. Laden Sie den Hauptinhalt innerhalb des Dokuments als auch, und wir können einige dieser Informationen sehen, die im Textkörper enthalten sind. Also haben wir das erste Kind dort, und so weiter. Wir haben all die verschiedenen Knoten, die wir nochmals genauer durchschauen werden. Dies war also, um nur zu demonstrieren, warum wir das dom entweder unten platzieren müssen und den gesamten Körperinhalt laden lassen müssen, oder wir können einen Funktionsaufruf initiieren. Wir können etwas hinzufügen, dasals Ereignis-Listener bezeichnet das , über den wir natürlich auch in späteren Lektionen sprechen werden. Und wenn wir in einem neuen Ereignis hinzufügen, Listener hier. Also vielleicht fügen wir es einfach hier rein, es ist die Spitze. Also werde ich Fenster machen. Und natürlich werden wir mehr darüber ins Detail eingehen. Zuhörer, wie wir durch die nächste Reihe von Lektionen Fortschritte. Eso Was wir tun, ist, dass wir einfach auf die Fensterspitze hören, und sobald es geladen ist, dann werden wir die Funktion ausführen. Und im Grunde, was das wird dio ist, dass es uns die Fähigkeit geben wird, die Körperinhalte als auch zu beherrschen . Also zeig dir, was jetzt passiert, wenn ich rausgehe und wenn ich es auffrische und wir sehen hier drinnen. Also jetzt hatten wir die Fähigkeit, den Körper und alle Körperinhalte zu laden, weil wir in diesem Ereignis-Listener hinzugefügt haben und dies tatsächlich eine Stabilität gab, um den Inhalt des Körpers zu sehen . Also im Grunde, was ist hier passiert? Als die Browns-Luft den Code durchlief, traf sie das Skript-Tag. Es fügte hinzu, In diesem Fall Listener, Listener, im Wesentlichen ein Trigger ist, der darauf wartet, dass etwas passiert und was es tut darauf wartet, dass das Fenster geladen wird. Und sobald das Fenster geladen ist, dann wissen wir, dass wir Zugriff auf das Dokument haben, uns gut, und sobald dieser Ereignis-Listener ausgelöst wird, können wir die Funktionalität durchlaufen. Aber durch den größten Teil des Kurses. Dies ist also nur eine Möglichkeit, auf die Informationen des Wohnheims zuzugreifen, wenn Sie den Code oben auf Ihrer Webseite platzieren . Und natürlich gibt es verschiedene Szenarien, wenn Sie sich entwickeln, so dass es Fälle gibt, in denen Sie es an der Spitze platzieren möchten. Und wenn Sie viele HTML-Inhalte haben, wie zum Beispiel Bilder, die geladen werden, dann möchten Sie vielleicht einen Platz an der Spitze. Aber mehr als wahrscheinlich und Best Practice ist in der Regel, diese Skript-Tags unten zu platzieren , und vor allem, wenn Sie mit Dylan-Inhalten interagieren, die Sie überhaupt in die Seite laden möchten . Jetzt, da wir das alles mit dem DOM durchgemacht haben, sind wir bereit, damit zu arbeiten. Die nächsten Lektionen zeigen Ihnen, wie Sie mit dem Dom arbeiten und dynamische interaktive Inhalte auf Ihrer Webseite erstellen , indem SieJavaScript verwenden, JavaScript verwenden, auf den Dom zugreifen und den Dummen manipulieren. Also all das kommt in der nächsten Reihe von Lektionen 4. JavaScript DOM Document Objekt: in der nächsten Reihe von Lektionen, werden wir durch das Dokumentobjektmodell suchen. Und das ist auch als die Morgendämmerung bekannt. Also werden wir uns ansehen, was die Morgendämmerung ist und wie es in JavaScript funktioniert. Die Dom und HTML zusammen ermöglichen es uns, auf eines der Elemente in unserer HTML-Seite zuzugreifen und mit JavaScript, wir sind in der Lage, diese Elemente zu manipulieren, sie zu aktualisieren, Interaktion zu erstellen und auch Inhalte von jedem eines der Elemente in unserem HTML-Code. Im Wesentlichen macht der Dom es wirklich, wirklich einfach, HTML-Elemente zuzugreifen. Also lassen Sie uns unsere Redakteure öffnen und wir werfen einen Blick auf die Morgendämmerung. Also, was ich hier habe, ist wirklich grundlegende Website, und ich musste keinen HTML-Code für diese legende Lektionen erstellen, weil wir etwas haben müssen , mit dem wir interagieren können. Also habe ich eine sehr einfache Webseite erstellt. Es ist gerade hier auf der rechten Seite gerendert, und ich werde auch mit den Google Chrome taub Tools, so dass wir öffnen können, dass auf Windows, schwächen drücken Kontrolle, Verschiebung I und öffnen Sie die oben. Es ist auch für Max verfügbar. Solange Sie Chrome verwenden, haben Sie Zugriff auf Dev Tools. Stellen Sie unsere tauben Werkzeuge auf. Vielleicht machen wir das größer, wenn wir unsere tauben Werkzeuge öffnen. Wir sehen, dass wir zunächst hier unter Elementen den gesamten Quellcode haben, den wir auf unserer Webseite betrachten. Aber wir haben auch unsere Quellen hier, so dass wir einige weitere Informationen über die Quelle und was in den Ressourcen des Gerichts enthalten ist, erhalten können , die in Elemente zurückgehen. Also für dieses Beispiel hier muss ich es nur ein wenig rausziehen und wir können sehen, dass wir Stile berechnet haben . Also haben wir unser Block-Modell für CSS. Wir haben Ereignis-Listener, also werden diese tatsächlich dom-Objekte sein. Also, was es tun wird, ist eigentlich zuzuhören. Also, wenn wir irgendwelche Ereignis-Listener in Javascript eingerichtet haben, werden sie dort sehen. Wir haben auch diese dom Breakpoints und wir haben Eigenschaften und wir öffnen Eigenschaften wie wir öffnen das HTML. Wir haben hier eine ganze Reihe von Informationen, also haben wir alles von html der Minderjährigen, um in ihrem Text zu schmelzen. Wir haben den Namensraum, den Sie sind. I. Wir haben hier nur eine ganze Reihe von Ereignis-Listern und Auslösern. Wir haben unsere äußere HTML und so weiter, also habe ich eine Menge Informationen, auf die wir Zugriff haben. Und im Wesentlichen sehen wir uns das an, wenn wir auf die Kuppel zugreifen, und was der Dom tut, ist es uns erlaubt, Zugriff auf Elemente innerhalb der Webseite zu erhalten, und das dom wird tatsächlich geladen, wenn die Webseite niedrig ist und es ist der Browser, der erzeugt die Morgendämmerung. Es erstellt alle Web-Elemente als Objekt und zerlegt sie in einem leicht zu verwaltenden und zugänglichen Modell, das ist das dom. Und im Wesentlichen ist es wie eine Baumkonstruktion. So ist es eine Konstruktion von mehreren Objekten mit höheren er so beginnend an der Spitze mit dem HTML. Also beginnend mit ihrem ersten Element und arbeiten den ganzen Weg nach unten. Also diese der Kopf, der Körper sind nur unter HTML, und wir können alles, was es nach unten arbeiten und auf eines der Objekte innerhalb der Kuppel zugreifen , die verfügbar ist. Jedes dieser Elemente hat seine eigenen Eigenschaften. Wenn wir diese in die Tiefe öffnen, können wir sehen, wann immer wir auf Schaltfläche eins klicken. Wir haben dort Immobilien, und es hat seine eigenen Eigenschaften. Also seine eigenen Event-Handler, es hat seinen eigenen inter html in ihrem Text und nur eine ganze Reihe von Informationen hier, auf die wir Zugriff haben. Und zur weiteren Definition, über den Dom. Es gibt eine bei Wikipedia hier, und es gibt Ihnen auch ein Dokument eine Illustration, wie der Dom funktioniert. Also haben wir das Fenster als äußeren Container. Dies ist also auch das Ein-Fenster-Objektmodell. Und das ist, wo, wenn wir JavaScript-Warnungen schreiben, dies ist, wo alle Funktionen sitzen und Geschichte Ort. Aber dann, wenn es um die Morgendämmerung geht, so ist dies eigentlich die Webseite und der Inhalt innerhalb dieser Webseite selbst. Also haben wir hier einige Beispiele für Links, Anker, Formen und eine ganze Reihe von verschiedenen Elementen. Also lass uns unseren Redakteur öffnen und was ich zuerst tun möchte, ist, dass ich den Hund einfach im Konsul auflisten möchte. Wir werden Konsul Log verwenden, aber wir werden Konsole D I R verwenden Das wird uns also eine Verzeichnisliste geben, die alles auflistet, was im Dokument enthalten ist . Also wieder, das ist dieses Dokumentobjekt und wir gehen aus und wir aktualisieren die Seite. Öffnen Sie unsere Konsole. Wir sehen, dass wir eine ganze Aufschlüsselung des gesamten Inhalts des Dokuments haben. Also, einschließlich der Leiche, und dann können wir von dort runtergehen und wir könnten eines der Elemente auswählen, auf denen wir Kinder haben . Dann haben wir den ganzen Weg runter. Also alle Vorfahren und Nachkommen, die verfügbar sind, und wir haben Zugriff auf sie, wie wir navigieren und Elemente auswählen, die wir wollen JavaScript und Interaktionen dio anwenden. Also werde ich Ihnen zeigen, wie das in den kommenden Lektionen zu tun ist. Und ich möchte nur vorstellen, was die Morgendämmerung ist, wie Sie Zugang zu Dummen bekommen und was Sie in der Kuppel selbst sehen können, wenn Sie taube Werkzeuge verwenden. Also in der nächsten Lektion werden wir beginnen, mit dem Dom zu interagieren und einige interaktive Javascript zu erstellen . Es kommt also in der nächsten Lektion auf. 5. JavaScript getElementById: Interaktion mit der Dawn ist einer meiner Lieblingsteile über JavaScript. Es öffnet die Tür Teoh eine ganze Menge Funktionalität über JavaScript, und das erste, was wir tun müssen, um mit diesen Elementen zu interagieren, ist Auswahl von Elementen, und dann können wir. Sobald wir die Elemente ausgewählt haben, die wir verwenden möchten, haben wir die Möglichkeit, diesen Elementinhalt zu erhalten und das Element zu manipulieren. Informationen, Attribute, Styling und so weiter. Und was JavaScript tut, ist, dass es uns die Möglichkeit gibt, diesen Inhalt in den HTML-Elementen zu ändern , die es uns erlaubt, zu ändern. CSS-Styling- und HTML-Elemente konnten auch Interaktionen erstellen, um Ereignisse einzurichten und diese Ereignisse die Ausführung von JavaScript-Code auslösen zu lassen. Wir können auch HTML oh Elemente hinzufügen und löschen. Und wir können wirklich eine ganze Menge über den Dom und JavaScript machen. Also lasst uns loslegen und einige Interaktionen innerhalb unserer Webseite erstellen. Öffnen Sie also Ihren Editor und in unserem Editor. Also haben wir hier einige wirklich grundlegende HTML, und das erste, was wir tun müssen, ist in der Lage zu sein, diese Elemente auszuwählen. Also haben wir hier unsere Körper-Tags. Wir haben hier ein paar Dips drin. Also sollte ich dies aktualisieren, um ein Körper mit dem Warum mit einem Kleinbuchstaben zu sein. Warum? Es stimmt also mit dem Rest des Gerichts überein. Und das erste, was wir tun müssen, ist, dass wir das Element auswählen müssen, mit dem wir anziehen wollen . Also wollen wir im Idealfall diese als tatsächliche Buttons machen und sie tatsächlich anklickbar machen. Das ist es, was wir in dieser Lektion tun wollen. Und ich sollte hier ein schnelles Update machen, wenn wir CSS verwenden. Und wenn wir auf die Klasse zugreifen wollen, müssen wir nur einen Periodenknopf machen. Und wir haben auch taub zahlreiche Möglichkeiten, um über CSS auf unsere Elemente zuzugreifen. Wenn Sie also mit CSS vertraut sind, wird einiges für Sie viel Sinn machen, wenn wir anfangen, Elemente zuzugreifen und auszuwählen . Also haben wir verschiedene Möglichkeiten, Elemente zu wählen schwächen ausgewählt über unsere RD schwächen, ausgewählt über Tag, und wir können auch nach unten durchqueren, so dass wir ein Elternteil auswählen und dann die Kinder des Elternteils auswählen und den ganzen Weg nach unten bewegen, so dass wir könnte sich die Nachkommen ansehen und auch auf diese Weise eine Auswahl treffen. So ähnlich wie wir bestimmte Elemente auswählen. Also, wenn ich diese Schaltfläche in CSS auswählen wollte, mache ich ein Hash-Tag, als ich Schaltfläche eins auswählen würde. Also mag ich den Namen nicht, und dann würde ich einige Eigenschaften eingeben. Wenn ich also die Hintergrundfarbe oder so etwas einstellen möchte, dann können wir das wirklich leicht machen, sobald wir tatsächlich eine Auswahl unseres Elements getroffen haben. Und wenn ich es auffrische, sehen wir, dass die Änderungen stattfinden. Es ist also die gleiche Idee, wenn wir Elemente mit JavaScript auswählen. Wenn wir also dasselbe Element auswählen möchten oder ein anderes auswählen möchten, müssen wir es nur innerhalb des HTML-Codes identifizieren. Und eine der einfachsten Möglichkeiten, es zu identifizieren, ist, es einfach zu greifen und ein Zeichen von sehr variablem Wert, um es zu tun, und wir werden es über das I D. So Dokument greifen . Also wählen wir dieses Dokumentobjekt und in JavaScript wieder aus, wenn wir Objekte auswählen, die wir speziell bei angehängten bestimmten Methoden an diese Objekte auswählen können und die, die wir verwenden werden, ist get element von I d wenn wir Objekte auswählen, die wir speziell bei angehängten bestimmten Methoden an diese Objekte auswählen könnenund die, die wir verwenden werden, ist get element von I d dann immer hier zu tun ist, müssen wir einrichten, dass ich d und identifizieren Sie es. Und was jetzt passiert, ist, dass, wenn ich konsole, loggen Sie sich die meine Ausgabevariablen aus und speichern Sie diese einfach und aktualisieren Sie sie würde unsere Konsole öffnen , so dass Sie alle Informationen sehen können, die hier enthalten sind. Also gehen wir zur Konsole und wir sehen tatsächlich, dass es nur die Elementinformationen auswählt. Also, wenn wir anstelle des Dokumentprotokolls tun, wenn wir Dokumentverzeichnis machen, geben Sie uns auch eine bessere Vorstellung von dem Inhalt dieses bestimmten Elements und all der dom-Interaktionen , die wir haben können, also haben wir die gleiche Sache, die wir , wo wir all diese Ereignisse haben, die wir daran anhängen können, können wir durchqueren, damit wir das nächste Geschwister sehen können. Wir können den Elternteil sehen. Wir können sehen. Das erste Kind ist eine Menge Informationen, die wir hier rausbekommen können. Eine, die wir zuerst betrachten werden, ist, dass wir uns diesen inneren Text oder inneren HTML-Code ansehen damit wir sehen, dass er genau den gleichen Inhalt enthält, der innerhalb von dort verfügbar ist. Nun, da wir dort eine Variable zugewiesen haben, können wir diesen Wert aktualisieren, indem wir meine Ausgabe und in ihrem HTML machen und wir können einen brandneuen Wert darauf anwenden . Also für den Moment werden wir neue Schaltfläche eingeben und diese aktualisieren und wir sehen, dass wir sofort den Inhalt hier in aktualisiert. Selbst wenn wir in unseren HTML-Code gehen, sehen wir, dass der Inhalt jetzt aktualisiert wurde. All diese Inhalte werden also über JavaScript aktualisiert. Also läuft der erste Durchlauf durch. Es setzt den Inhalt im HTML. Wenn es um das JavaScript geht, das sagt , OK, wir bekommen dieses Element von I d. Wir setzen die neue Variable ein. Meine Ausgabe wird all diese Objektinformationen enthalten, und das gibt uns die Möglichkeit, mit diesem Objekt zu interagieren und diesen inneren HTML-Code festzulegen. Nun, das ist das Gleiche, was wir mit innerem Text tun können. Und der Unterschied zwischen inter text und inter html ist natürlich, dass der innere Text alle Ihre Inhalte als Text anzeigt und Wenn wir inneres HTML machen und es aktualisieren, können wir sehen, dass es tatsächlich durchläuft und rendert es als HTML aus. Also haben wir diesen Zeilenumbruch, mit dem PR verbunden ist, und es macht es tatsächlich als neue Zeile heraus. In der nächsten Lektion werden wir uns ansehen, wie wir eine Auswahl auf andere Weise treffen können. Vielleicht wollen wir also keine Ideen verwenden. Wir müssen nicht unterschreiben. Ich fühle jedes einzelne Element. Vielleicht wollen wir Klassen benutzen, also werde ich dir zeigen, wie du das in der nächsten Lektion machen kannst. 6. JavaScript DOM Auswahl von Elementen über Kurs und Tags: In der letzten Lektion haben wir uns also angesehen, wie wir mit der Auswahl von Elementen aus unserer HTML-Seite beginnen können. Jetzt werden wir uns alternative Möglichkeiten der Auswahl von Elementen ansehen. So wissen wir, wenn wir CSS schwächen verwenden, wählen Sie es durch eine Klasse, wo Sie es durch I d auswählen können. So haben wir auch die gleichen Fähigkeiten, wenn wir zu Javascript und Auswahl an diesen Elementen kommt . Und deshalb ist es wichtig, wenn Sie HTML-Code erstellen . Teoh, überlegen Sie, wie Sie Ideen verwenden werden, wie Sie Klassen verwenden und wie Sie Elemente identifizieren, die diese Interaktion benötigen und Styling benötigen. In dieser Lektion werden wir uns ansehen, wie wir die meine Schaltflächen bekommen können und ich werde das Dokument auswählen. Und diesmal wird unsere Methode anders sein. Wir werden Get Elemente nach Namen verwenden. Und wir haben bemerkt, dass dies Plural ist, dass Elemente. Es ist Plural, weil angenommen wird, dass mehrere Elemente haben, und es wird tatsächlich Elemente nach Klassennamen bekommen, weil wir sie über den Klassennamen und die identifizierende Klasse identifizieren werden . Der Name ist B t n und was ich jetzt tun werde, ist ein A-Konsolenprotokoll. All diese Informationen raus, weil die Art und Weise, die präsentiert wird, etwas anders sein wird . Weil, denken Sie daran, hier haben wir die Möglichkeit, mehrere Elemente zurückgeben zu lassen, um dieses Objekt zu verdünnen, während wir uns durch I d identifizieren. Wir wissen, dass wir nur ein I d pro Seite dieses bestimmten Wertes haben. Also lasst uns unsere Seite aktualisieren wird geöffnet und inspizieren und sehen, was hier im Konsul kommt . Und das wird uns eine bessere Vorstellung davon geben, mit welcher Arbeit wir zur Verfügung haben. Also hier haben wir diese HTML-Sammlung, und anscheinend haben wir zwei Artikel in dieser Sammlung. Du hast also eine Null und eine Eins, und wir haben auch einen Bt und einen und einen BTM . Also hier identifiziert es sie über das I D. und hier identifiziert es sie, so wie es Aziz Artikel innerhalb des Objekts bestellt. Also haben wir unseren ersten Artikel in unserem zweiten Artikel dort aufgelistet. Also haben wir diese wieder geöffnet. Wir haben die ganze Liste von Informationen dort. Die Frage ist also wirklich, wie wir sie differenzieren und wie brechen wir diese aus? Eso schwächen, Wenden Sie an, was wir zuvor in JavaScript gelernt haben, wenn es um den Zugriff auf Inhalte wie Inhalte aus einem Array kommt und wenn Sie darauf zugreifen möchten, vielleicht wollen wir nicht auf die 1. 1 zugreifen, aber wir wollen auf die 2. 1 Wir können etwas tun wie diese, wo wir nur auf das zweite Element in der Sammlung schauen und wir sehen hier , wo wir es identifiziert haben. Und es kommt auf die gleiche Weise wie der Inhalt aus dem get-Element von I d. Hat, weil wir bereits wissen, dass wir zwei Elemente dort haben, wenn wir unseren HTML-Code betrachten , und normalerweise möchten Sie diese dynamisch behalten, damit Sie keine Hardcode eine Nummer. Aber das dient nur zu Demonstrationszwecken, denn ich bin mir bewusst, dass ich hier Tasten trennen muss, eine Null und eine eins, und so greife ich auf sie zu. Aber in der Regel möchten Sie diese dynamisch genug halten, damit Sie, wenn Sie dies tun, nicht immer alle verschiedenen Elemente zählen müssen, um sie identifizieren zu können . Ein weiteres Gewicht, wenn es darum geht, CSS Toe tatsächlich auf ein bestimmtes Element zuzugreifen, ist nur die Verwendung des Tag-Namens. Also, hier, wenn wir jedem der Dibs Zugriff geben wollen und vielleicht wollen wir eine Hintergrundfarbe auf sie setzen . Also, wenn Sie diese Art von Hintergrundfarbe tun wollen würde sagen, dass wir sehen, dass jetzt, all diese dibs erhalten diese Informationen und wir können wiederum, tun das gleiche mit JavaScript, wo wir auf meine Tags zugreifen können. Und das hier werden Dokumente sein, weil wir immer auf das Dokumentobjekt zugreifen. Und denken Sie daran, hier oben haben wir eine Liste aller Dokumentinformationen, auf die wir Zugriff haben , und dies gibt uns eine bessere Idee, um unsere Auswahl zu finden, wo wir auswählen was wir auswählen. Also diese wieder, das wird Plural sein, und es wird Elemente nach Tag-Namen bekommen, und das Tag, das wir auswählen werden, wird ein div sein, und ich werde dasselbe hier tun, wo wir uns ausloggen und Ich werde es das gesamte Objekt von Tags protokollieren. Also erfrischen Sie es. Wir sehen, dass wir relativ dieselbe Sache haben, die wir in den Klassen hatten, in denen wir drei Elemente hier innerhalb der Sammlung haben , und dann können wir sie separat identifizieren und auswählen, was auch immer wir verwenden möchten. Also für diesen Fall werde ich auf genau die gleiche zugreifen, die wir in den meinen Tasten getan haben, damit wir hier eine gewisse Konsistenz auf der Ausgabe haben. Also werde ich auf die Artikelnummer mit einem Index von eins s. Oh, das ist ähnlich wie eine Erhöhung, wo es beginnt 012 Aktualisieren Sie es und wir können sehen, dass wir jetzt in der Lage sind , dieses bestimmte Element herauszuziehen und darauf zuzugreifen und den Inhalt nach Bedarf zu aktualisieren JavaScript. Jede Webseite hat also bereits einige standardmäßige eingebaute Informationen. Und wir können all das sehen, wenn wir innerhalb unseres Dokumentenobjekts hierher kommen. Wir sehen also, dass wir die Mädchen haben. Wir haben auch Titel für die Webseite. Eso Vielleicht ist dieser nicht eingebaut, aber die meisten Webseiten definieren einen Titel, so dass wir Zugriff auf ihre bekommen können, so dass wir sehen können, dass wir buchstäblich Zugriff auf eine dieser Informationen über die Webseite haben. Und sobald wir Zugang dazu haben. Sobald wir es identifizieren können, können wir das aussuchen und manipulieren. Wir zeigen Ihnen also mehr davon und wie Sie alle diese Standardinformationen auswählen , die bereits auf der Webseite verfügbar sind, die Sie auch in Ihrem JavaScript verwenden können . Das werden wir dir in der nächsten Lektion zeigen. 7. JavaScript die Document: In den letzten Lektionen haben wir uns angesehen, wie wir Elemente innerhalb unserer Webseite konstruieren und zusätzlich zur Auswahl durch i d Auswahl nach Klassennamen auswählen nach Tag-Namen. Wir können sogar diese Elemente mit gleichmäßiger Konsistenz isolieren. Und genau wie wir es mit CSS tun, wo wir mehrere verschiedene Arten von Selektoren haben, können wir auch Abfrageselektor haben, den wir auch in unserem JavaScript verwenden können. Also werde ich das nur meine SCL für die Auswahl nennen. Und wieder greifen wir auf dieses Dokumentobjekt zu. Und das ist, wo wir das alles enthalten haben. Also der, den wir verwenden werden, wird Abfrageselektor sein, alles und was das tun wird? Wird dies alle Knoten der Elemente zurückgeben, die von dem Element abstammen , nach dem wir suchen? Eso, Abfrage, Selektor alles und vielleicht werden die, die wir wählen werden, mit einem Tuch BT-Ende, und ich weiß, dass wir das über den Klassennamen dort oben auswählen können. Aber das wird nur ein anderer Weg sein, falls Sie mehrere Dibs haben, die das Klasse-B-T-Ende haben. Also vielleicht von einer Spanne bt n und du willst das nicht einschließen. Also zeig dir einfach, wie das alles funktioniert. Also Auflisten der meine C l und wir sollten zu Artikeln Rücksendungen bekommen. Also nur Zeh, seien Sie sicher, dass wir es auffrischen werden. Werfen Sie einen Blick auf die Konsole und wir sehen, dass wir zwei Elemente in den zurückgegebenen Knoten aufgelistet haben. Wenn wir also die 2. 1 auswählen, erhalten wir genau die gleichen Informationen, die wir in den vorherigen Lektionen dort gemacht haben . Also hatten wir uns auch angeschaut, wie wir den inneren HTML aktualisieren können. Nehmen wir an, ich möchte diese Ausgabe ändern und ich möchte die Ausgabe so aktualisieren, dass sie der Titel der Webseite entspricht . Und wir haben bemerkt, dass wir innerhalb des Dokumentobjekts eine Liste von Titeln haben. Das wird also wirklich einfach zu dio-fähig sein. Und das ist eines dieser erstaunlichen Dinge mit Javascript, dass es einfach zu interagieren . Also zuerst möchte ich Dokument noch Element von D. machen und ich werde dieses Element mit der Idee der Ausgabe auswählen, ich werde den inneren HTML davon aktualisieren , und ich werde das Dokument gleich machen. Und hier wird es einfach wirklich unkompliziert sein, weil dies bereits im Objekt enthalten ist . Also könnte ich es einfach dem Dokumententitel entsprechen. Also lasst uns einfach sehen, was hier passiert, wenn ich die Seite aktualisiere und ich versuche, dies aus dem Raum zu räumen . Also bin ich in der Lage, die vollständige Codezeile dort zu sehen. Das ist, wenn wir es auffrischen. Wir sehen, dass wir den gleichen Titel hier oben haben, und wir füllten das Element mit dem I. D der Ausgabe mit dem gleichen Inhalt, den wir innerhalb des Titels zur Verfügung hatten. Nun ist dies die gleiche Sache, so dass wir jeden Inhalt innerhalb des Dokuments auswählen können. Eso Wir haben auch die u R l Also, wenn ich es aktualisieren, können wir sehen Sind Sie Earl und so weiter. Also können wir buchstäblich nur, wenn ich die Konsole geöffnet habe, jedes Stück Inhalt in dieser Konsole in diesem Dokument enthalten wir Zugriff haben also haben wir Basis Sie sind ich können wir verwenden. Wir können auf Zeichensatz zugreifen. Also, wenn Sie Zeichensatz auf diesem schreiben möchten, stellte sich heraus, ein wenig lang, aber wie Sie sehen können, ich Sie können einfach einen dieser Werte aussuchen. Alles, worauf Sie hier zugreifen wollten, haben Sie Zugriff darauf. Wenn Sie also die Domain erhalten möchten , müssen Sie nur das Dokumentobjekt aktualisieren. Und wir haben die Domain dort aufgelistet. Abgesehen davon, dass dieser Inhalt tatsächlich nur herausgezogen wird. Und natürlich, alle Variablen, die wir in JavaScript haben, können wir diese ausgeben. Wir können Manipulationen mit, ähm, über Funktionen und so weiter innerhalb unseres JavaScript-Court vornehmen. Daher haben wir auch mehr integrierte Funktionen, die innerhalb des DOM verfügbar sind, da wir die Möglichkeit haben , Dinge wie den Quellcode zu setzen. Sie haben auch die Möglichkeit, Styling und vieles mehr zu aktualisieren. Also in der nächsten Lektion werden wir einen Blick auf unsere Webseite werfen und wir werden einige der Styling aktualisieren . Also vielleicht mag ich diese blaugrün Farbe für den Knopf nicht. Ich habe es in Styling gesetzt. Nun, ich kann Javascript verwenden, um das und das gleiche mit dem Bild zu überschreiben. Vielleicht mag ich dieses Bild nicht und ich möchte, dass sich das Bild ändert und in den kommenden Lektionen werden Ihnen auch zeigen, wie Sie Ereignisse über das DOM auslösen können und das wird diese Interaktion schaffen, wo wir auf etwas klicken und etwas ändert. All dies kommt also in den nächsten Lektionen auf. 8. JavaScript Update mit der DOM aktualisieren: In dieser Lektion werden wir einige Updates an unserem aktuellen Code machen, und wir werden das Styling sowie vielleicht die Bildquelle hier aktualisieren. Dieser ist also als mein Bild identifiziert. Also das erste, was wir tun wollen, ist, dass wir dieses bestimmte Element auswählen und wir werden es nicht als eine Variable einrichten, wo es einfach ein Dokument machen wird, Element durch i d erhalten und dann dieses Element identifizieren, so dass man mein Bild und wir können diese Quellinformationen erhalten, die für das Bild verfügbar sind, damit wir tatsächlich auf die Attribute zugreifen können, da Attribute auch ein Objekt sind, das in meinem Bild enthalten ist. dies besser zu veranschaulichen, müssen wir vielleicht Konsolenprotokoll, nicht Informationen, nicht Informationen, und werfen Sie einen genaueren Blick auf das, was für uns verfügbar ist. Also, wenn ich das aktualisiere und ich nicht mit Lauren Pixel hier, so gibt es mir einige zufällige Bilder, also habe ich tatsächlich keine Kontrolle über die Bilder, die gezeigt werden. Hier geht es nur wieder in das Objekt zurück. Also mein Bildobjektelement enthält all diese Informationen und weil es ein Bild ist, haben wir auch s R. C. Dies ist also die Quelle dieses bestimmten Objekts. Also, um auszugeben, dass ich es einfach tun könnte, um es dort zu loggen, und wir können einen Blick auf die Quelle nehmen, gefolgt von sich selbst. Dies wird also einfach diese Quelldatei auflisten. Und genau wie wir es mit dem HTML getan haben, haben wir tatsächlich die Möglichkeit, ein Update darauf zu machen, anstatt es aufzulisten. Wenn ich einen neuen Wert festlegen wollte, müssten sie nur das Gleichheitszeichen tun und den Wert festlegen. Also werde ich einfach eine andere Laura, ähm, Pixel und Pixel Dot Com einstellen ähm, . Und das ist eine weitere lange. Hier waren s o noch 100 mal 100 und gehen Sie zurück zu unserer Webseite, schließen Sie das und neu geladen. Also, im Wesentlichen, was wird hier passieren? Es wird das Bild 400 um 200 laden, dann wird es das JavaScript treffen, und das JavaScript wird tatsächlich die Quelle dieses Bildes neu schreiben. Also klicke ich darauf. Und wenn ich zu inspizieren gehe und wenn wir uns den Quellcode des Bildes ansehen, sehen wir, dass es jetzt neu geschrieben wurde. Also ist es eigentlich Lauren wählt eine 100 mal 100 statt die Anfangsgröße von 400 mal 200 . Abgesehen von all dem können wir unser Styling anpassen. Also sagte ich vorher, wenn wir uns diesen neuen Knopf ansehen, vielleicht mögen wir diese blaugrün Farbe vielleicht nicht, oder Aqua Color und ich möchte das anpassen. Also, um das zu tun, muss ich einstellen und darauf zugreifen, dass ich d. wieder. Also werde ich einfach kopieren, hier und wieder raus, schauen, was wir uns zur Verfügung haben, damit wir Dio-Stil können. Und das wird im Wesentlichen alle Objektinformationen über den Stil zurückgeben. Also, wenn ich wirklich spezifisch sein will, wird Ihnen zeigen, was hier im Konsul hier auftaucht . Also werde ich Konsul, loggen Sie sich die Button-Informationen dort und CSS-Erklärung aus. Also haben wir Zugriff auf all diese Styling-Informationen und das Laden der Sachen in die Konsole gibt Ihnen wirklich eine gute Idee, um einen Überblick darüber, was Ihnen zur Verfügung steht. So haben wir hier buchstäblich über 100 verschiedene Möglichkeiten, dass wir Styling auf eso eine der häufigsten anwenden können . Vielleicht ist es wie eine Hintergrundfarbe. So haben wir bereits eine Hintergrundfarbe für seine eigene. Wir gehen auf unsere Hintergrundfarbe, wir sehen diese Hintergrundfarbe, so dass wir nichts dort eingestellt haben. Aber wir können diese Hintergrundfarbe immer einstellen. Also alles, was wir tun müssen, ist Stil zu tun und dann machen wir Hintergrundfarbe. Also lasst uns diese Hintergrundfarbe aktualisieren und wir werden sehen, was passiert. So tun Stil und Hintergrund. Diese ist also Hintergrundfarbe und jetzt müssen wir einen Farbwert zuweisen. Und ich werde einfach einen Standard machen, vielleicht rot oder so. Mal sehen, was passiert, wenn wir es auffrischen. Wir sehen, dass wir die Hintergrundfarbe ändern und jetzt, wenn ich hier hineingehe, kann ich sehen, dass ich die Hintergrundfarbe rot zugewiesen habe. Das ist also in die Morgendämmerung und der Dom versteht, dass jetzt diese Hintergrundfarbe rot ist und wir haben aktualisiert, dass über Javascript und wirklich buchstäblich, die Möglichkeiten sind endlos. Genau wie bei CSS können Sie auf eine dieser Eigenschaften zugreifen und Aktualisierungen vornehmen. Eso hier, wir haben unsere Standard hier so CSS Text, Hintergrund, Farbe rot. Dies würde also die aktuelle Steuer außer Kraft setzen, die innerhalb ihrer verfügbar ist und wir sehen, dass wir viele Optionen haben . In der nächsten Lektion werden wir einige Interaktivität einführen. Sie haben also diese Elemente hier. Sie sehen aus wie Schaltflächen, aber sie tun nichts, wenn Sie darauf klicken. der nächsten Lektion werden wir uns darum kümmern und wir werden anfangen, diese interaktive Komponente hinzuzufügen, die innerhalb des DOM verfügbar ist. Und es wird uns die Möglichkeit geben, diese Tasten tatsächlich anstelle von Elementen zu machen , die nicht Schaltflächen darstellen. Es kommt also in der nächsten Lektion auf. 9. JavaScript DOM onclick: Also in dieser Lektion werden wir einige Interaktion einführen. Also vielleicht, was wir passieren wollen, wenn wir auf diese Schaltflächen klicken, wollen wir, dass sie die Farbe ändern. Also wirklich, das ist in der letzten Lektion, die wir uns angesehen haben, wie wir das Styling des Elements aktualisieren können. In dieser Lektion werden wir uns ansehen, wie wir Interaktion hinzufügen können. Also das erste, was ich tun möchte, ist, dass ich den Knopf identifizieren möchte. Also vielleicht werde ich es einfach ein I d von variabler Taste eins geben. Und das wird unser Button-Objekt enthalten. Und wir werden einfach ein Dokument machen, denn wieder, mit diesem Dokumentobjekt, werden wir Element von i d bekommen und wir werden VTM eins als unser Element auswählen. Und jetzt können wir dieses BT und Objekt überall dort verwenden, wo wir es brauchen. Also, wenn ich BTM machen möchte und ich anwenden möchte, aktualisieren Sie den Stil und vielleicht möchte ich diese Hintergrundfarbe aktualisieren. Also Telefon, mach es gelb. Alles, was ich tun muss, ist Stil, Hintergrund, Farbe, Gelb. Ich aktualisiere es. Wir sehen, dass es bis zu gelb ist. Jetzt mal sehen, dass ich etwas Interaktion hinzufügen möchte Also möchte ich dies tatsächlich zu einer Schaltfläche machen anstatt nur zu sagen, klicken Sie mich tatsächlich wollen, um einen Klick zu erzeugen und das wird wirklich einfach immer zu tun ist BTM und wir können auf Klick tun Und was Dies tut, ist dies fügt den On Click-Ereignishandler zu diesem bestimmten Element hinzu, das wir ausgewählt haben, und vielleicht möchte ich eine Funktion ausführen. Also habe ich meine Funktion, die meinen Spaß rief und dann hier diese Funktion erstellen wird, so dass meine Fondsfunktion und ich irgendwelche Argumente dort übergeben konnte. Und vielleicht muss ich hier diesen Hintergrund stellen. Farbe ist gleich gelb. Lass uns gehen und ihn auffrischen. Und was hier passiert ist, ist, dass die Bereitstellung dieser Hintergrundfarbe Also was passiert ist, ist es bereits darauf klickt. Lassen Sie uns einfach etwas anderes hier hinzufügen, wo würde ein Dokument machen? Also vielleicht werde ich hier eine Ausgabe-Variable setzen, also werde ich das Put- und bekomme Element, das ich setzen und setzen Sie Abendessen html und wir setzen , dass auf geklickt. Es ist nicht, wenn wir den Code aktualisieren, den wir sehen, der bereits angeklickt sagt, so sieht es so aus, als ob es bereits durch diese Funktion läuft, obwohl wir nicht haben Wir haben nichts mit dieser Funktion getan. Und der Grund ist, dass, wenn ich die Funktion setze, das bei Klick ich nicht wirklich die geschweiften Klammern machen muss, wie ich es tun würde, denn wenn ich das tue , wird die Funktion ausgeschaltet. Lassen Sie uns nun die Seite neu laden. Und jetzt, wenn ich darauf klicke, wird das bei Klick ausgelöst. Und natürlich gibt es verschiedene Möglichkeiten, wie wir das auf Klick tun können. Also werde ich das auf einen Button klicken, um Ihnen zu zeigen, dass es nur verschiedene Möglichkeiten gibt, die Art der Funktionalität der Szene zu bewerten. Also werde ich BTM tun, um BTM zu wählen und für diese eine werde ich tun tiene auch auf Klick und diese ich werde es auch gleich. Und hier habe ich eine Funktion seit der völlig leeren Marke, die du funktionierst, ich werde erstellen und ich werde meine Programmierung hier drin haben. Also werde ich etwas von dem Zeug, das ich hier gemacht habe, kaffee, und vielleicht in Ordnung geklickt, und wir setzen den Hintergrund zwei gelb und sehen, was jetzt passiert. Also klicke ich darauf, wir werden angeklickt, um es zu klicken, wir werden angeklickt und so weiter. Dies, an der Wurzel der Dinge, ist eine der schnellsten Wege, um diese Dämmerung Interaktion zu erhalten. Und ich werde einfach den Konsul hier öffnen, damit wir uns eine bessere Vorstellung von den Eigenschaften machen können , die verfügbar sind. Also für die Schaltfläche, wenn ich nach unten gehe, kann ich sehen, dass ich hier eine Nicht-Click-Funktion habe, und ich habe etwas passiert, wenn es angeklickt wird, und wir haben auch die Möglichkeit, auf einen dieser Trigger zuzugreifen. Also haben wir den On-Click, den wir hier benutzen. Aber natürlich können wir jede dieser schwachen und verwenden, vor allem, wenn wir Formulare haben. Es gibt noch viel mehr Möglichkeiten, aber wir haben das auf Drachen. Nun, wir haben Maus-Events, die wir uns auch in den kommenden Lektionen ansehen werden. Also, wenn wir die Maus über bewegen, können wir diese Ereignisse abfeuern und so weiter. Siehst du, hier gibt es eine ganze Reihe verschiedener Möglichkeiten. Wir haben nicht die Mausräder, wann immer auf dem Rad. Immer wenn wir das Mausrad bewegen, können wir diese Interaktion auch auslösen. Es sind viele Optionen, und wir werden uns mehr von diesen Auslösern in den kommenden Lektionen ansehen. 10. JavaScript Mouse Mouse: In dieser Lektion werden wir also tiefer in all diese Ereignisse eintauchen, die auslösen konnten. Und vielleicht tun wir anstelle des On Click etwas, wo immer wir den Mauszeiger über etwas bewegen, wann immer die Maus vorbei ist, wir ändern es um einen Wert, und wenn wir gehen, und wenn wir gehen,können wir es ändern in einen anderen Wert. Also lassen Sie uns das ausprobieren und vielleicht befestigen wir es an mein Bild. Das erste, was wir tun möchten, ist, sind variabel, da dies wahrscheinlich eine der besten Möglichkeiten ist , mit diesen Dokumentobjekten zu interagieren. Vor allem erspart es uns die Mühe, immer wieder in sie rufen zu müssen, besonders wenn es statisch ist und sich nicht ändern wird. Aber wenn Sie mit Formularen arbeiten und wenn Sie Dinge ändern, dann müssen Sie möglicherweise eine andere Route tun, um Updates und Änderungen vorzunehmen eso. Wenn Sie ein Formular haben und einige Änderungen an Ihrer Erfassung dieser Informationen vornehmen, müssen Sie dies möglicherweise innerhalb der Funktion selbst tun, wenn das Ereignis ausgelöst wird. Also für diesen, einige, warum ich G bin und ich minus Zugriffsdokument und wieder werden wir einfach ein einfaches Get-Element von i d machen . Und das Element, das wir packen, ist das mein Bild und dann für das Bild selbst. Was ich tun möchte, ist, dass zu setzen, wenn wir den Mauszeiger über das Bild bewegen. Also werde ich all diese Erklärungen hier ganz oben stellen, und ich werde das ein bisschen auseinanderbrechen. Also statt eines Klicks weiter mein ich bin, ich bin G wir werden suchen Vielleicht können wir hier ein paar Maus-Events bekommen, also habe Maus runter. Geben Sie verlassen, bewegen Sie sich aus und über eso Einige von ihnen klingen vielleicht ähnlich. Einige Mäuse Maus, geben Sie die Maus über so Maus über wird weiterhin abfeuern, während wir über es sind. Aber Maus eingeben feuert aus der einen Zeit. So zeigen Sie einfach, was der Unterschied hier zwischen den verschiedenen Mausereignissen ist. Also gehen wir auf meine war zu tun. Also tun Sie auf Chaos über zuerst. Und wie wäre es, wenn wir meine Funktion tun und dann für die Funktion zu Was ich tun möchte, ist, dass ich einrichten möchte . Vielleicht könnten Sie eine Konsul Nachricht machen und die andere Sache, die interessant sein könnte, ist vielleicht können wir herausziehen und einige Informationen darüber erhalten, wo die Maus tatsächlich positioniert ist. Eso schwächen Tun Sie das auch, wenn wir abholen. also unser gesamtes Objekt hier betrachten, wenn wir es laden, haben wir einige Informationen darüber, dass die Maus selbst diese Ereignisinformationen aufnehmen kann. Also werden wir es einfach als E übergeben, und wir werden auch in der Konsole als e ausgeben und Ihnen zeigen, was hier passiert. Also öffne die Konsole. Und jetzt, jedes Mal, wenn die Maus vorbei ist, lösen wir unser Ereignis aus. Aber wir sehen, dass wir hier auch einige Event-Informationen haben. Also haben wir unseren Kunden Ex-Client klug. Wir haben die Position. Wir haben die Art von Ereignis, die passiert ist. Es war also eine Maus über, also können wir diese auch auflisten. Wenn ich also aufzählen wollte, was passiert, was dieses Ereignis ausgelöst hat, können wir sehen, dass ich so eng auflisten kann. Und genau wie bei allem anderen in der Morgendämmerung habe ich Zugriff auf all diese Informationen. Wenn ich also meine Koordinaten der Maus abholen möchte, habe ich meine X- und Y-Koordinaten, die ich habe , habe ich mein Ziel, damit ich herausfinden kann, wo ich bin, welches Ziel ich über bin und nur eine ganze Menge mehr Informationen. Das Ereignisobjekt ist eigentlich anders, als dies zu verwenden, weil dies uns nur den Inhalt dieses bestimmten Elements gibt . Also, wenn ich so etwas wie Konsolenprotokoll mache oder vielleicht könnte ich einen Konsul machen , das verzeichnen und aktualisieren. Also sind wir eigentlich, wann immer wir den Mauszeiger über, erhalten wir das dieses Objekt, das das initiierende Elementinhalt ihrer ist. Also haben Sie alle diese Informationen haben Zugriff darauf. Natürlich können wir den I. D. hier weitermachen. Und wir können ihm auch mawr Ereignisse zuweisen, wenn wir wollten, und nur wirklich eine ganze Menge mehr können wir ihm zuweisen. Dann. Natürlich können wir auch Natürlich können wir auch das Styling aktualisieren. Also, wenn ich so etwas tun wollte, wissen wir, dass dies das Objekt ist, das uns an diese Funktion auf der Maus geschickt hat, so dass ich diesen Stil tun kann und ich vielleicht die Hintergrundfarbe oder so etwas vervollständigen kann, oder das ist Eigentlich nicht funktionieren. Vielleicht kann ich eine Grenze machen. Lasst uns Grenze machen und wir werden es gleich einem Picks solide, blockiert und auffrischen. Also, wenn wir jetzt darüber schweben, oder vielleicht sollte ich so etwas wie Reds machen, ist es sichtbarer. Und jetzt, wann immer wir darüber schweben, bekommen wir diese Grenze eso gegenüber der Maus über. Wir müssen noch einen machen, vielleicht für die Maus. Also statt mit der Maus über die Maus, würde ich und für diesen, vielleicht nur drei finanzieren. Und für diese Funktion, vielleicht anstelle von Rot, werden wir Block machen und auf drei aktualisiert. Es ist deutlicher, was dort passiert. Mal sehen, was jetzt passiert, wenn ich rüber gehe, schwarz auszulesen und so weiter. Natürlich können wir auch die Ausgabe aktualisieren, so dass wir die Ausgabe von Vielleicht wollen wir die Mausposition X aktualisieren , und wir werden das gleich. Also wieder, wenn wir uns unser Maus-Event ansehen, haben wir Client-X-Informationen. Wir haben auch X da unten, also muss ich es tun, ist e. X, um diese Koordinate zu bekommen, und ich möchte das Gleiche hier tun. Also habe ich ihn X. Also jetzt sehen wir, dass das X Werte die Luft ändert, während wir uns bewegen. Also, wo immer wir eintreten, wir sehen, wir haben einen Maus-X-Wert und dann auch einen X-Wert, wo wir gehen. Also haben wir eine bessere Vorstellung davon, wo die Maus hineinkommt und wir haben eine bessere Vorstellung davon, wo wo ? X-Koordinate. Die Maus geht weg. All diese Informationen stehen uns zur Verfügung, und wir können wirklich darauf aufbauen über den Dom und JavaScript. 11. JavaScript AddEventListener: in der vorherigen Lektion haben wir uns angesehen, wie wir die Ereignis-Listener hinzufügen und im Wesentlichen die verschiedenen Ereignisse haben können. Feuern Sie ab, wenn wir eine Interaktion innerhalb unserer Webseite hatten. So ähnlich wie viele Dinge in JavaScript haben wir tatsächlich mehrere verschiedene Möglichkeiten, wie wir diese Ereignis-Listener hinzufügen können. Also werde ich diese Funktionen auf gleich halten Wir werden einfach wiederverwenden, daumen und tatsächlich Ereignis-Listener zu jedem dieser Objekte hinzufügen. Und die Art und Weise, wie wir das tun werden, ist, dass wir das Objekt identifizieren. Also genau wie das, was wir getan haben, bevor wir das my I am G hatten, bekam mein i m. G, und ich werde tatsächlich einen Anzeigen-Event-Listener machen. Und was dies tut, ist dies ermöglicht uns Teoh registrieren auf Ereignis-Listener auf einem einzigen Ziel, und dieses Ziel könnte in der Regel ein Element sein. Und die Vorteile, dies auf diese Weise zu tun, besteht darin, dass wir die Möglichkeit haben, mehrere Ereignis-Listener hinzuzufügen sowie viel mehr Funktionalität innerhalb der Ereignisse zu haben und mehr Kontrolle über die Ereignis-Listener haben, so dass wir sie hinzufügen können. Wir können auch diese Ereignis-Listener entfernen und wieder können wir mehrere verschiedene Typen haben, Ereignis-Listener. Also werden wir es als Ereignis-Listener identifizieren und wir werden den Ereignis-Listener abmelden , Beginnen Sie mit Klick und bemerken, dass dies nicht aktiviert ist. Klicken Sie darauf. Klicken Sie einfach auf. Und dann, natürlich, haben wir die gleiche Fähigkeit, in unserer Funktion zu tippen. Dort können wir auch die Ereignisinformationen übergeben, genau wie wir es in den anderen Ereignissen getan haben. Und wir können Konsul Recht, Ziege, diese Veranstaltung Informationen. Und natürlich können wir etwas wie Ausgabe aktualisieren und das innere HTML tun. Also, tatsächlich, etwas passiert, wenn dieses Ereignis ausgelöst wird, geklickt wird. Wenn wir also auf das Bild klicken, werden wir dieses Ereignis abfeuern und sehen, dass das in unserer Konsole abgefeuert wird . Und natürlich sehen wir, dass wir hier ein Ausgabe-Update zum inneren HTML haben. Also schauen Sie sich das wahrscheinlich an und sagen OK, na ja, das scheint ein bisschen länger als das, was wir anfangs gemacht haben, wo wir nur das mein Bild machen und wir würden das beim Klick hinzufügen. Und es ist sehr wahr, dass dies anfangs eine längere Möglichkeit scheint, die gleiche Art von Funktionalität zu tun . Aber in der Tat, wenn wir Ereignis-Listener hinzufügen, haben wir einige eindeutige Vorteile gegenüber der On-Click-Methode. Und einer der Vorteile ist, dass auf Click nicht in allen Browsern funktioniert. Möglicherweise haben Sie einige Probleme mit einigen älteren Versionen von Internet Explorer, und einige andere Browser übersetzen möglicherweise nicht unbedingt Click als ungeraden Ereignis-Listener. Der sicherste Weg, wenn Sie Ereignis-Listener hinzufügen, besteht darin, dies auf diese Weise zu tun, um Ereignis-Listener hinzuzufügen . Und natürlich ist der andere Vorteil, dass Sie beim Hinzufügen von Ereignis-Listener tatsächlich mehrere Ereignis-Listener zu diesem Ereignis hinzufügen können. Also, wenn ich mehrere Funktionen abfeuern möchte und ich Ihnen ein Beispiel dafür geben werde, also statt vielleicht einen Platz diese Funktion auf eigene Faust, ziehen Sie das heraus und machen Sie mehr Spaß, denn ich denke, das ist der nächste verfügbare und einfach aufgeräumt, dass ein Ein bisschen. Also, jetzt habe ich die Fähigkeit. Also, wenn ich auf Click tun möchte und ich meinen Fonds schreiben möchte, kann ich es so tun, wie ich es abfeuern kann. Und als Ereignis-Listener. Ich kann auch meinen Fonds berühren, aber zusätzlich habe ich nicht die Möglichkeit, einen zweiten Zuhörer daran zu befestigen. Aber mit diesem hier tun Sie das einfach zeigen, was der Unterschied hier sein wird. Also räumt die raus. Und zuerst werden wir durch diese Ereignis-Listener laufen, wo wir nicht wirklich das Hinzufügen dieses Zuhörers tun . Wir fügen nur das Ereignis innerhalb dieser Art von Funktionalität hinzu. Und so, für unsere Veranstaltung wurden diese abfeuern geklickt. Und vielleicht werden wir diese Ausgabe auf zwei geklickt aktualisieren und diesen Hintergrundstil ändern eso hier machen wir Grenze. Oder vielleicht können wir das einfach so halten, um die Hintergrundgrenze blau. Also lasst uns das auffrischen und sehen, was tatsächlich passiert. Also haben wir es auf dem Bild, und wenn wir darauf klicken, sehen wir, dass wir diesen roten Rand bekommen und es scheint auch über den blauen zu verpassen. Wir werden angeklickt s, wir bekommen die Mauskoordinaten und so weiter. Also bekommen wir nicht wirklich die 1. 1 Wir sehen nichts abfeuern. Es ist wahrscheinlich besser, wenn ich hier eine Konsole mache, und ich werde einfach meinen Fonds eingeben und ich muss damit umgehen, weil sonst die Funktion abfeuern wird, in der es ist. Vielleicht ist das also eine bessere Darstellung. Also aktualisieren wir das einfach noch einmal, sagen wir das. Aktualisieren Sie es. Und jetzt, wann immer wir über das Objekt sind und wir darauf klicken, sehen wir, dass wir nur meinen Spaß abfeuern. Also und im Gegensatz zu dem, als wir diese erste Art des Klicks auskommentierten, muss ich das wieder öffnen aktualisieren. Und jetzt, wenn wir darauf klicken, sehen wir, dass wir beide Funktionen tatsächlich abfeuern. Das ist also der Hauptunterschied, dass es uns die Möglichkeit gibt, mehrere Ereignishandler abzuschalten und auch Funktionalität und auch die Möglichkeit, diese Ereignis-Listener zu entfernen. Eine weitere zwei Vorteile für den Anzeigen-Event-Listener ist also die Semantik? Also im Grunde sehen wir, dass wir dieses Ereignis tatsächlich registrieren, während wir hier nicht sehen, dass die Registrierung des Ereignisses eso Manchmal kann es einige Verwirrung geben, dass dies nicht tatsächlich Ereignisse sind, die registriert sind. Eso Zuweisung der Ereignisse über den Anzeigen-Event-Listener macht nur viel sinnvoller und natürlich gibt es diese Kompatibilität mit älteren Browsern. Sie im Zweifelsfall VerwendenSie im Zweifelsfallden Ereignis-Listener. Und wenn Sie versuchen, ein schnelles Projekt zu erstellen oder einfach nur eine schnelle Funktionalität zum Testen des Status wünschen , dann können Sie immer mit dem On Click Weg gehen. In den nächsten Lektionen werden wir uns noch genauer ansehen, wie wir den Hund aktualisieren und mit ihm interagieren können. All das kommt also in den nächsten Lektionen auf. 12. JavaScript Queryselectorall mulitple Elemente event: in der vorherigen Lektion hatten wir uns nur mit diesem einen Element beschäftigen und Ereignis-Listener daran anhängen und auf diese einzelnen Elemente zugreifen, indem wir Element von I D bekommen haben. Aber wir müssen auch die Möglichkeit betrachten, dass wir vielleicht Zugriff auf etwas über Klasse oder wir wollen darauf zugreifen. Wir wollen auf mehrere verschiedene Elemente durch verschiedene Klassen, durch Tags und so weiter zugreifen . Und das ist, wo wir Abfrage-Selektor verwenden können. Also werde ich einen brandneuen Zugang einrichten, und ich werde auf all diese Tasten zugreifen. Und dann werde ich durch die Knöpfe schleifen und vielleicht etwas auf jedem einzelnen Knopf aktualisieren . Um das zu tun, muss ich das erste, was ich tun muss, ist, dass ich es mein Element auswählen muss. Also werde ich es Button E l für Schaltflächenelement und Dokumente nennen, und ich werde einfach den Abfrage-Selektor verwenden und Ihnen zeigen, was passiert, wenn ich den Abfrage-Selektor im Gegensatz zum Abfrage-Selektor verwende . Mit dem Abfrage-Selektor können wir alle Elemente mit der Klasse der Schaltfläche auswählen und vielleicht können wir Konsul Law diese Informationen oder das Konsul Verzeichnis aus dieser Information bekommen . Also ist es Taste 1. Und nur um Ihnen zu zeigen, was hier in der Konsole ausgegeben wird. Also, wenn ich es aktualisiere, sehen wir, dass wir Onley Luft die erste Taste auswählen und uns ein Abfrage-Selektor tut, ist es immer noch isoliert Onley den ersten verfügbaren Wert, der Schaltfläche enthält. Also wird es immer auf unsere 1. 1 zugreifen und wir können sehen, dass innerhalb von tauben Konsul hier, die Zugriff auf mich haben. Also, was, wenn ich dies in Abfrage-Selektor alle ändere Und wie wir von vorher wissen, dass wir eine Liste von vier verschiedenen oder jemand bekommen , der diesen BTM-Wert erfüllt Jetzt können wir das sogar ein paar Schritte weiter machen, wo wir das Komma trennen können. Also, wenn wir auf alle BTM-Klassen zugreifen wollen und vielleicht wollen wir sogar auf alle Dips zugreifen , so sehen, was hier passiert und wir erhalten eine Knotenliste von sechs wir sehen auch wichtig zu beachten, dass wir es nicht überschreiben. Also bekommen wir die Knöpfe. Wir kriegen die Dibs getrennt. Vielleicht wollen wir sogar so etwas wie mein Image oder so etwas machen. Also gehen Sie einfach zu aktualisieren, dass wir sehen, Holen Sie sich eine Notiz, eine Liste von fünf, damit wir unsere Listen nicht duplizieren. Das ist also definitiv eine gute Sache, weil wir nicht mehrere Elemente haben wollen und sie dann mehrmals in unserer Liste haben wollen. Was wir also auch tun können, ist, dass wir diese Liste von Elementen durchlaufen können, die sich als diese Schaltflächenelemente drehten . Und die Art und Weise, wie wir das tun können, ist, dass wir Länge verwenden können. Also haben wir es. Also werde ich nur Konsul, ausloggen und ich werde das aktualisieren und wir haben hier einen Wert, der die Länge enthält. Also sehen Sie, unter Nord List haben wir fünf. Aber wir haben auch ein Objekt mit dem Wert hier genannt length, und wir können dies nutzen und das innerhalb unserer Looping verwenden. Jetzt sehen wir, dass wir eine Länge von fünf haben und wir hier eine schnelle for-Schleife machen können, also werden wir gleich I 20 und wir werden das auch genauer betrachten. Bevorstehende eso Für jetzt werden wir einfach auf diesen dynamischen Wert der Länge schleifen, also was auch immer diese Länge ist, es spielt keine Rolle, weil wir sie dynamisch aufnehmen die Länge hier s, so dass es jeder sein könnte Variation. Und das gibt uns die Möglichkeit, jedes einzelne Element, das zurückgegeben wird, dynamisch zu durchlaufen . Und wir müssen I inkrementieren, um einen inkrementellen, inkrementellen Wert zu haben , damit wir tatsächlich auf alle verschiedenen Elemente zugreifen und diese durchlaufen können. Also Bt und e l und vielleicht, was wir tun wollen, ist, dass wir diesen inneren HTML bekommen wollen. Also vielleicht, was wir tun können, ist, dass wir Konsul ausloggen können, so dass wir hier rauskommen müssen, dass wir tatsächlich den nächsten Wert haben und wir sie durchlaufen können Konsul log und mal sehen, was hier passiert. Also werden sie nur diese Seite neu laden. Und jetzt sehen wir, dass wir all diesen inneren HTML-Code von jedem dieser Elemente erhalten, während es durch sie schleift . Und ich denke, ich sollte es entfernen dieses Bild, weil ich denke, das wird nur anfangen, Dinge zu verwirren. So sehen Sie, jetzt haben wir alle verschiedenen Schaltflächen durchgesehen, die wir zur Verfügung haben. Genau wie wir das hinzugefügt haben. Habe das innere HTML, als wir alle verschiedenen Elemente durchschauten, die uns zur Verfügung stehen. Wir können auch dasselbe tun, wo wir jedem einzelnen Ereignis-Listener hinzufügen, während wir durchlaufen. Vielleicht können wir ihnen Klick-Events hinzufügen und wir können eine Funktion abfeuern. Vielleicht können wir die Funktion „Mein Fonds“ übernehmen. Es ist jedes Mal, wenn auf eine von ihnen geklickt wird. Wir machen das einfach meine Fondsfunktion, und wir werden diese Informationen durchlaufen, also sieh mal, was jetzt passiert. Jedes Mal, wenn es klickt, werden diese Mausereignisse ausgelöst und wir bekommen auch die blauen Boxen dort, damit wir tatsächlich abholen und verstehen können , welche Informationen wir hier weitergegeben haben. Sogar wir haben die Event-Informationen. Aber wir können auch das I d bekommen, wenn wir wollen. Also, jetzt, wie wir klicken, bekommen wir tatsächlich das I. D des Elements und so weiter. Auf diese Weise fügen Sie Ereignisse zu mehreren Elementen hinzu. Und ich hatte all diese Ereignis-Listener, während Sie sie durchlaufen, und wir können dieses Styling einfach anwenden, und wir können hier nach Bedarf eine ganze Reihe verschiedener Funktionen ausführen. Was auch immer wir mit dem Dom interagieren und durchschleifen Sobald wir unsere Elemente ausgewählt haben , mit denen wir arbeiten möchten, in der nächsten Lektion werden wirin der nächsten Lektiontiefer in die Auswahl dieser verschiedenen Elemente eintauchen. Eso muss möglicherweise nicht unbedingt Klassen haben. Und ich weiß, wie wir durchqueren können und überprüfen Sie alle untergeordneten Knoten in Maine und so weiter. Also werde ich Ihnen zeigen, wie Sie das in der nächsten Lektion machen. 13. JavaScript Weitere Elementauswahl: Also diese Lektion werde ich Ihnen zeigen, wie ich Zugang zu all diesen Elementen bekommen kann, die tatsächlich durchqueren, was in der Morgendämmerung verfügbar ist. In der vorherigen Lektion haben wir Quick Query Selektor alle. Also haben wir auch eine andere Option. Also werde ich Variable machen und wir brauchen einen Container dafür. Also vielleicht machen wir Button Child-Notizen und wir werden Dokument machen und Element von i d bekommen und dieses Mal werden wir den Namen des Elternteils verwenden , der Haupt sein wird. Also das hier oben und wir werden alle untergeordneten Knoten auflisten, die wir zur Verfügung haben , es wird das ein bisschen größer machen. Also bleiben wir in einer Zeile. Eso was wir jetzt tun können, ist Konsul sich ausloggen oder Konsul Verzeichnis, dass Bt N. C. M. Also was auch immer in diesem Objekt enthalten ist, lassen Sie uns einfach einen Blick auf das werfen, was tatsächlich hier ausgegeben wird. So sehen Sie, dass wir neun untergeordnete Knoten haben, die hier aufgelistet sind, also haben wir Text. Die erste ist, wir haben gerade ein paar SMS hier auf Ben drinnen. Der nächste ist eigentlich die Schaltfläche, und dann der Text in der Schaltfläche und so weiter. Werfen wir einen Blick und eine Schleife durch alle verfügbaren untergeordneten Knoten und wir werden die Namen dieser Knoten bekommen . Also das nächste, was wir tun müssen, ist, was wir getan haben, bevor wir unsere typische Schleife hier einrichten und wir werden durchlaufen, während ich weniger als btm CN-Länge ist, weil wir wieder diesen Längenwert standardmäßig erhalten und dann müssen wir ich in orderto Schleife durch alle verfügbaren Werte. Und für diesen hier werden wir uns einfach nur ausloggen und wir werden BT und CNN Klammer aussuchen. Halten Sie, dass ich in dieser Klammer, während wir es durchschleifen, und wir werden diese Knotennamen auflisten , sobald sie verfügbar sind. Und im Wesentlichen werden wir sie alle im Konsul hier auflisten. Also ist es nur speichern, dass gehen Sie zurück auf den Hof und aktualisieren Sie es. Also jetzt sehen wir, dass wir tatsächlich die Werte hier aufgelistet bekommen. Im Wesentlichen haben wir neun Notizen in der Liste und sie sind alle hier aufgelistet, und wir listen tatsächlich den Inhalt jeder dieser neun Notizen auf, die uns zur Verfügung stehen . Sehen wir eigentlich sollte dieses hier loswerden, weil dies zu einigen der Verwirrung beiträgt . Also werde ich diese einfach auskommentieren und diesen eso wieder auffrischen. Hier ist unsere Liste mit neun Knoten. Die ersten Text Dave, Text Text Text von Text Div und schließlich Text als auch. Also, jetzt können wir es sogar einen Schritt weiter gehen, so dass wir etwas tun könnten, wie wenn der Knotenname und überprüfen, ob es gleich toe div ist. Und dann, wenn es ist, als was wir tun können, ist etwas zu setzen. Wenn es also gleich DIV ist, als wir ausgeben werden, schauen Sie sich hier eine Art Bracket-Problem an. Eso muss nur sicherstellen, dass ich diese Klammern an den richtigen Stellen hier abschließe. Also, Konsul meldet sich ab und ich glaube, ich vermisse hier immer noch einen. Wenn ich den Knotennamen auflisten und ich genauso einfach anstelle des Knotennamens könnte, könnte ich einfach so etwas wie i d tun und das würde alle I ds jedes einzelnen Elements innerhalb der Schleife auflisten. Und natürlich können wir immer noch durchgehen und Ereignis-Listener hinzufügen, wenn wir wollten. Also, wenn ich wollte, wie wir hier durchschleifen, möchte ich einen Ereignis-Listener eines Klicks hinzufügen, anstatt diesen, den ich gerade tun werde, ist, dass ich es anrufe, damit es nicht wirklich abfeuert. Und wir können die brandneuen Ereignis-Listener verwenden, die wir hinzugefügt haben, Refresh it und sollten natürlich nicht kopieren und einfügen, die Ursache, die anders sein wird. Unterschiedlicher Wert eso. Jetzt sehen wir, dass wir die gleiche Funktionalität erhalten, so dass alles wie zuvor funktioniert. Aber wir mussten nicht jeden dieser Knöpfe identifizieren. Wir kamen in Rate von den Eltern und wir holten alle Kinder und wir sahen diejenigen, die dibs mit Wir konnten sogar etwas mit der Klasse machen und so weiter. Es gibt eine Menge Informationen, die wir dort herausziehen können. Also haben wir in einer bedingten Anweisung hinzugefügt, um zu überprüfen, ob der Knoten ein div nennt. Wenn es ein div ist, fügen wir den Ereignis-Listener zu dieser Notiz hinzu, und dann erhalten wir die gleiche Funktionalität wie zuvor. Also wieder, eine Reihe von verschiedenen Möglichkeiten in einer Reihe von verschiedenen Ansätzen, dass Sie den gleichen Effekt erzielen können , wo Sie durch alle verschiedenen ausgewählten Elemente geschaut und Ihre Auswahl Ihrer Elemente innerhalb auf Ihrer Webseite. der nächsten Lektion werden wir uns also anschauen, wie man Elemente in der Morgendämmerung mit JavaScript erstellt , sie auch aktualisieren und anhängen und vieles mehr. Es kommt also alles in den nächsten Lektionen auf. 14. JavaScript Erstellen neuer Elemente: in dieser Lektion werde ich Ihnen zeigen, wie Sie ein brandneues Element in Ihrem HTML erstellen. Also hier haben wir einige typische Elemente. Wir haben hier eine Reihe von Schaltflächen, und vielleicht, wenn wir auf eine dieser Schaltflächen klicken, wollen wir beginnen, einige brandneue Elemente zu erstellen. Werfen wir einen Blick darauf, wie wir das machen würden. Also das erste, was wir tun wollen, ist bei einem Event-Listener Teoh the Element. Also müssen wir dieses Element identifizieren. So dokumentieren. Und wir werden einfach Element von i d bekommen, um die Dinge wirklich einfach und unkompliziert zu halten . Also, Bt und eins. Und wir werden es auf diesen ersten Knopf fangen. Und was wir tun werden, ist bei einem Ereignis-Listener, und so werden wir diesen Ereignis-Listener als Klick hinzufügen. Sobald wir also auf die erste Schaltfläche klicken, werden wir vielleicht eine Funktion ausführen. Also werde ich so etwas wie meinen Spaß hinzufügen und ich werde ein Gehirn erschaffen. Sie funktionieren für ihre, so sieht es aus, als würden wir wieder aus dem Raum, und ich versuche es gerne in einer Zeile zu halten, so dass es viel sichtbarer und leichter zu lesen ist. Also hier ist unsere Funktion. Mein Spaß. , wenn wir klicken, werden wir es an diese Funktion senden, und dann werden wir diese brandneuen Elemente erstellen. Dies ist eine Art wie unsere Elementfabrik, die unseren HTML aktualisiert und Code hinzufügt. Das erste, was wir tun wollen, ist, ein brandneues Element zu setzen. Also vielleicht werde ich neues l oder so etwas tun und dokumentieren, so dass es wieder, wir verwenden dieses Dokumentobjekt, und wir verwenden die Funktion, um Element zu erstellen. Und dies ermöglicht es uns, eine brandneue Attribute-Notiz zu erstellen, und dann gibt es diesen Wert zurück. Also lassen Sie uns einen H einen Typ erstellen. Also als Nächstes. Das nächste, was wir tun möchten, ist, dass wir tatsächlich etwas Inhalt zu diesem Element hinzufügen möchten , eso vielleicht etwas wie, ähm, Sie Inhalte machen ähm, und wieder in dieses Dokumentobjekt gehen, werden wir Textknoten erstellen, und Dies gibt es uns die Möglichkeit, in einigen Text hinzuzufügen. Also Anu h ein Tag. Es wird also der Text sein, der in diesem h ein Tag enthalten ist. Also, jetzt brauchen wir nur Teoh machen eine Kombination und herausfinden, wo wir bitte auf unserer Webseite sitzen wollen . Also wollen wir beide neu erstellten kombinieren, so dass das Attribut und dann der Text geschneit . Also möchten wir in diesem Kind dieses neue Inhaltsuntergeordnete Element in das neue Element hinzufügen. Die Art und Weise, wie wir das tun, ist neu E l und wir verwenden append child. Und dann wählen wir jetzt, dass wir das neue Content-Objekt. Also, jetzt haben wir diese neu erstellt jedes Tag mit Inhalt darin genannt Text darin, sagen Sie h ein Tag. Also, jetzt müssen wir herausfinden, wo wir eine Position wollen es. Also habe ich das schon. Ich würde hier setzen, ich habe nichts drin, also können wir es einfach unter Ausgabe hinzufügen. Also Ausgabe und wir werden das gleiche aufgebrachte Kind zu tun. Und dieses Mal werden wir die Ausgabe mit dem neuen E l schreiben und sehen, wie sich das herausstellt. Und vielleicht sollten wir Konsul einloggen, nur um sicherzustellen, dass alles abgefeuert wird, den Baum zu sammeln . Also mein Spaß und ich zitieren dort herum und sehen, wie sich das herausstellt. Lassen Sie uns also auffrischen und sehen, was passiert. Also jetzt, wann immer wir klicken und bevor wir fortfahren. Ich muss hier eine Korrektur vornehmen, weil dies erstellen Elemente sein sollte, die kein Attribut tatsächlich erstellen. Wir erschaffen ein Element. Eso gehen Sie einfach zurück in den Code und aktualisieren Sie ihn. Und jetzt sehen wir, dass wir in der Lage sind, alle Tags darüber zu erstellen. Also, wenn wir jetzt klicken, erstellen wir ein brandneues Element mit einem H one -Tag. Wenn wir in den Quellcode gehen und wir einen Blick darauf werfen, was innerhalb des Quellcodes verfügbar ist , sehen wir, dass wir eine ganze Reihe von diesen h one Tags haben, und wenn wir klicken und öffnen diese Quelle, sehen wir zusätzliche Tags erstellt wird. Wie erstellen Sie ganz neue Elemente im laufenden Betrieb mit dem Dom via JavaScript? Und natürlich gibt es noch viel mehr, was Sie weiterhin tun können, und Sie könnten daran arbeiten, all diese verschiedenen Funktionen zu verwenden. Eso, wir haben gerade eine Kombination hier gemacht. Wir haben einen Ereignis-Listener. Wir können auch eine beliebige Anzahl von verschiedenen Kombinationen dieser Ereignis-Listener haben. Diese Trigger, die durch Benutzerinteraktion ausgelöst werden und dann etwas dynamisch über JavaScript passiert haben . All das und noch viel mehr steht über die Morgendämmerung zur Verfügung. Und, natürlich, einer der Ausgangspunkt für die Arbeit mit der Morgendämmerung ist vielleicht zwei aufgelistet Ihre Konsolenkonsole D I R. Und listen Sie alle verfügbaren Dokumentinformationen auf und arbeiten Sie dann durch, dass machen ändert Updates nach Bedarf, einschließlich Hinzufügen von Elementen, Aktualisieren, Styling und vieles mehr. Dies ist also alles in der Konsole verfügbar. Also werfen Sie einen Blick durch und sehen Sie, was Sie mit JavaScript und dem DOM zusammen geschehen können. 15. DOM und Form erstellen.: in dieser Lektion. Ich möchte diesem HTML-Formular eine Formularüberprüfung hinzufügen, damit normalerweise ein Formular angezeigt wird und Sie sehen , dass es gerade seine Richtlinie senden kann. Und manchmal sehen Sie auf der Ereignisliste auf einem Tribute-Ereignis-Listener hier, wo Sie etwas Heißes haben, wie beim Senden, und dann ruft es zu einer Funktion auf . Also werden wir nichts davon jeder an Melone anfassen. Wir werden alle unsere Funktionalitätsrate in JavaScript tun ist das erste, was wir tun müssen, ist unsere Auswahl zu machen und wir haben das Formular gegeben und ich d So schwächen tun Dokument, bekommen Element durch i d , tun müssen, ist unsere Auswahl zu machen und wir haben das Formular gegeben und ich d So schwächen tun Dokument, bekommen Element durch i d Dies ist der einfachste Weg, um unsere Auswahl über das I d zu treffen und wir werden eine Auswahl aus dem Formular machen, und wir werden auch die Senden-Schaltfläche tun, so dass mein Formular, so dass das Element ist, das wir bekommen werden. Und dann wird der Zuhörer, den wir ersetzen werden, auf der Einreichung sein, und dann, was immer diese Einreichung abgefeuert wird, wenn das ausgelöst wird, wir werden diese Funktion durchlaufen. Also hier werde ich nur diese Funktion aufbauen. Also vielleicht, was wir tun wollen. Eso wollen wir beseitigen. Zuallererst möchten wir diese Standardaktion eliminieren. Also, wenn ich auf den Sende-Button geklickt habe, was tatsächlich passieren wird, ist, dass es einfach vorher einreichen wird, also möchte ich das beseitigen und wir können dies beseitigen, indem wir eine Rückgabe falsch machen. Also jetzt, wenn ich wieder hier raus gehe und wenn ich aktualisiere, so dass wir sehen , dass nichts passiert und das ist , weil wir das hergebracht haben, haben wir den Ereignis-Listener hier auf Submit und wenn es abfeuert, wurden nur falsch zurückgegeben . Also im Wesentlichen, was das bedeutet, ist, dass nichts eingereicht wird. Der nächste Punkt, den wir betrachten möchten, ist, dass wir auf die Schaltfläche „Senden“ schauen möchten und wir möchten dort auch einige zusätzliche Funktionen hinzufügen. Und natürlich könnten wir es auf verschiedene Arten tun. Also vielleicht, wenn wir Teoh wollten und wieder, wir werden get Element von i d verwenden und wir werden über die I d auswählen. Also Submit Button und dann diese, wir werden einfach einen einfachen Klick machen. Also, was auch immer es angeklickt wird. Wir werden vielleicht unsere Validierung abfeuern, also überprüfen Sie das Formular und erstellen Sie eine Funktion hier unten kann tatsächlich durch das Formular überprüfen. Also werden wir hier runter gehen und Funktionsüberprüfungsformular machen und dann vielleicht nur Konsul, sich vorerst ausloggen oder ich werde hier ein anderes div erstellen. Und ich wollte ihm eine schöne Vorstellung von der Ausgabe geben, so dass wir tatsächlich einige Inhalte hier einfügen können . Und ich werde variable Ausgabe signieren, damit es mein Container für das Dokument sein wird. Holen Sie sich Element von i d und dieses Mal wählen wir dieses Ausgabe-Element. Also, wenn wir das Formular überprüfen, wann immer wir auf diese Schaltfläche klicken, werden wir aktualisieren, würde ich setzen. Und wir werden diesen inneren HTML-Code aktualisieren und gleich angeklickt, so dass wir auf diese Weise nicht die Konsole öffnen müssen und die Dinge einfach viel sichtbarer machen. Einfacher zu sehen. Wir sehen also, dass jetzt, wann immer wir darauf klicken, wir angeklickt und wir beide tatsächlich abfeuern, weil standardmäßig diese Schaltfläche hier drüben, wir tatsächlich das Formular absenden, und hier drüben, wo wir tatsächlich das Formular absenden. Wir haben eine Rückkehr von falsch. Also haben wir hier zwei Möglichkeiten, die wir jetzt tun können. Wir können entweder mit diesem gehen, um das Formular zu validieren und zu überprüfen. Oder wir könnten das tun, um die vier zu bestätigen und zu überprüfen. Und ich muss zurück zum Formular hier oben, denn was ich tun möchte, ist, dass ich die Fähigkeit haben will , hier eine Bedingung zu tun. Ich möchte eine Reihe von Werten hier innerhalb des Formulars überprüfen, sie abholen und sie schnell überprüfen und sehen, ob sie gültig sind, wenn sie meine Anforderungen erfüllen. Also möchte ich all dies in derselben Funktion behalten. So konnte ich realistisch, ich könnte nur mit dieser Funktion als auch mit dem Check-Formular verknüpft werden. Also könnte ich eins von denen machen. Und ich könnte diesen Klick sogar einfach von der Schaltfläche entfernen. Es gibt ein paar verschiedene Optionen hier, aber im Moment werde ich es einfach so lassen, und ich werde anfangen, alle verschiedenen Elemente anzuschließen, mit denen ich interagieren möchte . Die erste 1, mit der ich interagieren möchte, ist das Namenselement. Also werde ich einen brandneuen Variablenzugriff dieses Element aus dem HTML unterzeichnen und wieder wird das Element von i d erhalten und das i d des Namens ist der Name so einfach dort . Und ich werde das einfach duplizieren für alle anderen zwei Elemente, die ich dort habe, und ich werde es verschönern, damit sie alle wirklich gut ausrichten. Also diese, die 2. 1 vielleicht können wir meine E-Mail machen und die 3. 1 wird mein MES für die Nachricht sein. Und jetzt müssen wir nur diese Ideen aufstellen. Also msg dort für die Nachricht und mailen Sie einfach für die E-Mail-Adresse. Jetzt mit HTML fünf. Das wirklich gute daran ist, dass, wenn dies keine gültige E-Mail hier ist, es tatsächlich nicht einreichen wird. Also, wenn ich so etwas habe und mich das einfach auffrischen lassen und mir gerade klar wurde, dass ich den, äh, Typ als Text habe äh, . Also hatte ich das mit Absicht für die Zwecke dieser Demonstration getan, denn wenn ich es als E-Mail habe, und wenn ich versuche, etwas zu veröffentlichen, das ist keine E-Mail. Html fünf hat diese Standard-Popup-Nachricht. Und natürlich können Sie sich darauf verlassen. Oder Sie können es noch einen Schritt weiter gehen und Ihre eigene Validierung aufbauen. Also werde ich weitermachen und meine eigene Validierung für die Validierung der E-Mail erstellen. Ich habe gerade eine schnelle Funktion. Ich werde hier kopieren und einfügen. Und im Wesentlichen, was diese Funktion tun wird, ist, dass sie überprüfen wird. Es wird diesen Wert der E-Mail nehmen, und es wird einen Scheck machen. Es wird also prüfen, ob es all diesen Kriterien entspricht. Also im Wesentlichen, was dies sagt, ist, dass es jede Art von Inhalt erlaubt. Wir suchen nach dem at Symbol und wir erlauben Zahlen Zeichen, und dann suchen wir nach einem Punkt und dann einige Zahlen und Zeichen als auch. Dies berücksichtigt also verschiedene Formate von E-Mail-Adressen und im Wesentlichen, solange es eine gültige E-Mail-Adresse ist und was wir hier zurückkehren, sind die Ergebnisse des Tests. Wenn also mein Scheck gültig ist, dann wird er wieder wahr werden, und wenn nicht, das falsch zurückkommen und wir können das in unsere Logik hier oben einarbeiten, wenn wir einen schnellen Check machen, um unsere Einreichung zu sehen -Prozess. Also die 1. 1, nach der ich suchen möchte, ist mein Name. Und um den Wert meines Namens zu erhalten, tippe ich einfach Wert ein. Also werde ich eine schnelle Überprüfung machen, um zu sehen, ob es Blank gleich ist, weil wir keine leeren Einsendungen haben wollen . Und wenn es gleich Blank ist, dann muss ich hier eine andere Variable erstellen. Das wird also nur eine leere Variable sein, und ich werde das als Container verwenden. Teoh, füllen Sie das auf und dann werde ich meine Überprüfung machen, um zu sehen, ob es einen Wert in diesem Behälter gibt , der ihn näht. Tun Sie einfach unsere Nachricht und angegebenen Wert des Namens, nicht ausgefüllt. Und ich möchte auch genau dasselbe für den anderen tun. Andere Werte, die ich aus irgendeinem Grund in meiner Form habe, haben einige Schwierigkeiten. Sie treffen die Auswahl. Eso Dies war nur verschönert es und ich muss Thies aktualisieren, um mit dem übereinzustimmen, was Meine Auswahl hier oben sind und anstelle des Namens. Ich werde E-Mail machen, nicht ausgefüllt und Nachricht nicht gefüllt und speichern Sie das. Und jetzt kann ich hier rüber gehen und eines der Probleme, die ich tatsächlich bin, das ich gerade betrachte , ist, dass ich nicht eine Nachricht gleich Nachricht mache. Also müssen wir angeborene Dinge zusammen zusammenbauen. Dies ist also für den Fall, dass wir mehrere Nachrichten haben, die wir Ausgabe wollen. Und ich werde auch etwas HTML hinzufügen, so dass wir diese tatsächlich auf neuen Zeilen haben, die ausgegeben werden. Und was wir jetzt auch tun werden, ist, dass wir diesen hier loswerden, und wir werden den inneren HTML-Code mit der Nachricht aktualisieren. Also lassen Sie uns einfach eine schnelle Überprüfung machen und sehen, was passiert. Also sehen wir jetzt, wenn wir den Namen ausfüllen, dass dieser verschwindet, sehen wir diese E-Mail und dann die Nachricht, und dann , sollten wir in der Lage sein,das Formular zu senden, wenn wir nichts in unserer Nachricht haben . Es ist also das nächste Stück Logik, das wir hinzufügen können. Und es gibt auch noch eine Sache, die wir hinzufügen können. Also noch eine Validierung, also werden wir das einfach trennen, und ich werde einen Scheck machen, um zu sehen, ob es eine gültige E-Mail ist. Also, wenn es eine gültige E-Mail als seine ist, ist es, so dass wir abfeuern wollten, wenn es nicht als wahr zurückgegeben wird, und wir wollen, dass die Nachricht stattfindet. Das ist eine Art von diesen Doppelnegativen, bei denen ich ein Nein habe. Und ich suche nach einem falschen Also gibt es eine Reihe von verschiedenen Möglichkeiten, dies zu schreiben. Aber im Moment wir es nur tun, äh, äh, innerhalb dieser Art von Format, also keine gültige E-Mail. Also werde ich das in die Nachrichtenzeichenfolge hinzufügen, und wir werden das einfach auffrischen und wir sehen, dass etwas schief gelaufen ist, also muss ich eine schnelle Überprüfung machen und ich sehe, dass ich eine der Klammern dort vergessen habe. Und jetzt sehen wir, dass wir keine gültige E-Mail haben, die ein weiteres schnelles Stück zu diesem Puzzle auf Was wir tun wollen, ist, dass wir tatsächlich eine andere Bedingung hier machen wollen, und wir werden nur überprüfen, ob es irgendwelche Inhalte in unserer Nachricht gibt. Ich bin mit der Art und Weise, wie wir das tun könnten, ist, dass wir die Länge davon überprüfen können. Also, wenn die Länge größer als Null ist als das, was wir tun werden, werden wir diese Nachricht hier ausgeben und auch wir werden False zurückgeben. Aber wenn wir keine Fehler haben, die wir geworfen haben, so dann schwächen Sie hier anders zu tun und wir können True zurückgeben. Also lassen Sie mich es einfach verschönern, um alles in Einklang zu bringen, es zu retten. Und jetzt, was hat es getestet? Also haben wir zuerst versucht, es zu setzen. Wir sehen, wir haben vier Dinge, die wir hier ausfüllen müssen. Wenn ich also beginne, den Namen auszufüllen, der verschwindet, verschwindet die E-Mail, aber wir sind immer noch nicht gültig. Wenn ich also eine gültige E-Mail-Adresse mache, dann sehen wir das, wenn wir versuchen, das einzureichen. Also muss ich mich das noch einmal ansehen und sehen, also muss ich diesen Teil nicht hier drin haben, also werden wir es noch einmal versuchen. Also geben wir eine gültige E-Mail-Adresse ein. Jetzt müssen wir nur noch die Nachricht ausfüllen. Also, wenn wir die Nachricht füllen, dann sind wir bereit zu gehen und wir schließen den Einreichungsprozess ab, und ich habe nichts, das PHP bildet. Deshalb gibt es mir das Objekt, das nicht gefunden wurde. Aber das ist im Wesentlichen, wie Sie wirklich schnell Dawn und Auswahl Ihrer HTML-Elemente verwenden können, um Ihre Validierung zu erstellen, überprüfen Sie Ihr Formular in Ihrem HTML-Code.