DOM Manipulation in 1 Stunde - Buttons erstellen und mehr!

1. Einführung: Hallo und willkommen zu diesem Kurs zur DOM-Manipulation. Mein Name ist Taylor English. Ich werde dein Kursleiter sein, und ich freue mich sehr darauf. Ich habe diesen Kurs gemacht, damit Sie die DOM-Manipulation leicht verstehen können , damit Sie Spaß haben können, CSS zu ändern, Schaltflächen zu erstellen, Dinge zu tun Elemente programmgesteuert zu erstellen. Dafür ist dieser Kurs da. Und ich habe es für Anfänger leicht verständlich gemacht. Und erfahrene Leute werden es mögen, ich bin mir sicher, dass es Ihnen gefallen wird. Jetzt möchte ich durchgehen, worüber wir sprechen werden. Aber bevor ich das mache, möchte ich euch erzählen, wo weitere Videos wie dieses finden kannst. In anderen Klassen kannst du dir kostenlose Videos auf dem Computer ansehen, Tipps und Tricks und das Lösen von Problemen sowie einige Programmierung auf meinem YouTube-Kanal , der youtube.com slash C plus Hacker ist , alles buchstabiert. Es gibt viele großartige Tutorials. Ich habe einen Skillshare-Kurs, den du dir ansehen kannst , der Angular 11 für Anfänger genannt wird, was eigentlich auch für Angular 12 anwendbar ist, glaube ich. Aber es geht darum, Komponenten zu lernen, Routing-Services und all diese großartigen Dinge. Ich denke, dass es Ihnen wirklich gefällt , wenn Ihnen dieser Kurs Spaß macht. Und Sie können feststellen , dass ich unter diesem Link versuchen werde, dies in die Beschreibung dieser Klasse, dieses Videos, aufzunehmen. Es geht nur ein bisschen um mich. Ich bin ein Universitätsstudent, der Informatik studiert. Es gibt vielleicht eine gewisse Glaubwürdigkeit für dich, aber ehrlich gesagt liebe ich es einfach, dies zu lehren , und deshalb möchte ich es teilen. In dieser Klasse werden wir also fünf grundlegende Dinge besprechen. Zuerst zeige ich Ihnen, wie Sie Ihre Dateien einrichten. Dies ist nicht wirklich Teil der DOM-Manipulation, enthält aber einige wichtige Aspekte, wie das korrekte Verknüpfen Ihrer Dateien für Ihr JavaScript und CSS. Dann gehen wir los, wir werden in die Auswahl von Elementen springen , den HTML-Code abrufen und damit Dinge damit machen können, indem wir es in Variablen speichern. Dann werde ich darüber sprechen, Elemente programmgesteuert zu erstellen , damit Sie sie erstellen und per JavaScript an bestimmte Teile der Seite anhängen können. Dann werden wir darauf eingehen, Elemente mit CSS und solchen Dingen zu manipulieren . So können Sie die Farbe Ihrer Seite ändern. Sie können alle möglichen Dinge über das JavaScript erledigen. Und schließlich werden wir über Schaltflächen sprechen und wie Sie auf eine Schaltfläche klicken und Funktionen ausführen können , wenn Anweisungen schleifen. Wir werden auf das Zeug ein paar Details eingehen. Also hoffe ich, dass euch das gefällt. Es wird richtig Spaß machen. Und wir sehen uns im nächsten Video. 2. Einrichten deiner Umgebung: In Ordnung, es ist Zeit, mit unserer ersten Lektion anzufangen. Bevor wir uns also tatsächlich mit der DOM-Manipulation befassen, richten wir zunächst unsere Dateien, einfachen HTML -, JavaScript- und CSS-Dateien ein. Also lasst uns weitermachen und das machen. Sie möchten einen Ordner erstellen, in dem Sie an diesem Projekt arbeiten können. Ich habe meine DOM-Manipulation genannt. Du kannst deine anrufen, wie immer du willst. Ich werde in VS Code arbeiten, was ich wärmstens empfehle. Erstellen wir eine Datei und wir nennen das index.html. Jetzt fangen wir an. Lasst uns das aufheben. Erstellen Sie unsere HTML-Tags. Darin wollen wir unser Head-Tag, und innerhalb dessen wollen wir unser Titel-Tag. Ich sage nur Dom Relation. Jetzt unter dem Head Tag möchten Sie ein Körper-Tag setzen. Das meinte ich nicht. Okay. Innerhalb des Body-Tags können wir einfach sagen, lassen Sie uns ein Absatz-Tag setzen und Hallo Welt sagen. Erstellen wir nun eine JavaScript- und CSS-Datei , die wir in den nächsten Videos verwenden werden. Wir nennen das hier app.js. Um sicherzustellen, dass das funktioniert. Ich mache console.log. Hallo World. Schon wieder. Um das unter dem Body-Tag zu verknüpfen, setzen wir ein Skript-Quell-Tag und wir setzen app.js ein. Jetzt ist dies wichtig weil wir möchten, dass das JavaScript ausgeführt nachdem der Rest des HTML-Codes bereits angelegt wurde. Es geht hinter dem Body-Tag her. Die Syntax dafür ist Skript und dann Quelle gleich und dann der Name Ihrer JavaScript-Datei. Auch hier kannst du deine anrufen, wie immer du willst. Jetzt machen wir unser CSS. Ich nenne diese style.css , um sicherzustellen, dass das funktioniert. Machen Sie Körper und wir machen eine Hintergrundfarbe von Grün. Jetzt verknüpfen wir das Stylesheet, die style.css hier oben im Head Tag. Lassen Sie uns ein Link-Tag erstellen. Und du kannst hier runter zu CSS gehen, wenn du die Emmett-Abkürzung hast . Aber alles, was tun wird, ist Ihnen zu sagen , dass es dem Code mitteilt , dass es sich um ein Stylesheet und den Link zur style.css zu geben. Das ist also unsere grundlegende Syntax. Das ist alles, was wir wirklich brauchen, um loszulegen. Sehr einfache Website. Lass uns weitermachen und es. Jetzt werde ich in dieser Klasse eine VS-Code-Erweiterung verwenden, um dies zu testen. Und ich zeige dir , was das ist und wie man es bekommt. Mal sehen. Diese Erweiterung heißt Live Server. Wenn Sie hier im VS-Code zu Ihrem Tab Erweiterungen gehen, können Sie einfach suchen. Live-Server sollte eines der ersten Dinge sein, die auftauchen. Das wirst du einfach installieren wollen. Was das jetzt tun wird, ist , wenn wir in unsere HTML-Datei kommen, können wir mit der rechten Maustaste klicken und sagen Mit Live-Server öffnen. Wir können den Server auch hier anhalten. Und hier unten sollte es auch einen Button geben , auf dem Go Live steht. Dieser Button taucht nicht immer auf. Also verlasse ich mich normalerweise nur auf dieses Rechtsklickmenü. Wenn wir hier mit einem Live-Server öffnen, dann bekommen wir das. Wir erhalten unsere grüne Hello World, damit wir wissen, dass das Stylesheet ordnungsgemäß verbunden und konfiguriert ist . Der HTML-Code ist gut. Es heißt „Hello World“. Wenn wir unter Windows Control Shift I drücken, öffnet dies unsere Konsole und es heißt Hello World. Schon wieder. Wir wissen, dass alles ordnungsgemäß funktioniert oder JavaScript ordnungsgemäß verbunden ist. Alles funktioniert in dieser Front und Sie müssen sich keine Sorgen um diese Fehlermeldung machen. Es ist nicht besonders relevant für das, woran wir gerade arbeiten wollen. Aber das ist das grundlegende Setup. Nur eine kurze Zusammenfassung. Sie möchten drei Dateien, index.html, app.js und style.css. Und denken Sie daran, dass app.js in einem Skript-Tag unter dem Body-Tag verknüpft ist , aber immer noch in HTML. Und das Stylesheet befindet sich in einem Link-Tag oben im Kopf. Okay? Okay, wir sehen uns im nächsten. 3. Elemente auswählen: Okay, jetzt sprechen wir über die Auswahl von Elementen. Innerhalb von DOM-Manipulation. Es ist sehr wichtig , dass der Code weiß, wie man die verschiedenen HTML-Elemente erhält und Dinge damit erledigt. Wir gehen zunächst zu unserer Datei app.js. Wir können diese Log-Anweisung hier entfernen. Jetzt, derzeit auf unserer Website, haben wir unsere Hello World. Genau hier. Nehmen wir an, wir wollen helloworld auswählen , damit wir sie manipulieren oder etwas damit machen können. Im Moment ist hallo world nur ein Absatz-Tag. Es hat keine Klassen oder IDs. Ich zeige Ihnen, wie Sie es genau so auswählen, aber auch wie Sie es mit einer Klasse oder einer ID auswählen. Um es so auszuwählen, beginne ich mit der Verwendung einer ID oder einer Klasse. Beginnen wir mit einer ID innerhalb unserer Absatz-Tag-Typ-ID, und wir geben ihr einfach den Namen hallo. Gehen wir jetzt zu app.js. Und wir wollen das Absatz-Tag in einer Variablen speichern , damit wir Dinge damit machen können. Wir werden sagen, sagen wir, Paragraph gleich. Jetzt geben wir ein Dokument ein. Dokument greifen Sie auf das Dokumentobjektmodell zu. Das benutzen wir. Fast alle diese Befehle, wenn nicht alle von ihnen, beginnen mit dem Dokument. Wir sagen Document dot, holen Element für ID ab und stellen sicher, dass das D in ID Kleinbuchstaben ist. Jetzt ist VS Code wirklich großartig und sollte dir diese Dinge vorschlagen. Wenn dies nicht der Fall ist, checken Sie den Erweiterungsspeicher aus, um eine kostenlose JavaScript-Erweiterung zur Syntaxhervorhebung zu finden. Wir sagten, bekomme Element für ID. Die ID davon ist hallo. Wir setzen Klammern und sagen in einfachen Anführungszeichen Hallo. Was wir jetzt tun können, ist, dass wir eine console.log für das Absatzelement machen können . Und es wird uns zeigen, was wir tatsächlich ausgewählt haben , damit wir sehen können, was wir tun. Wenn wir es retten. Ich habe vergessen, im letzten Video zu erwähnen, jedes Mal, wenn wir Änderungen an diesen Dateien speichern, der Server, der Live-Server die Seite automatisch aktualisiert, damit Sie es nicht müssen. Wenn wir hier reinkommen, heißt es immer noch Hello World. Drücken Sie also Strg Shift. Ich glaube, das ist Command Shift I auf Mac. Wenn nicht, schauen Sie einfach nach, was dieser Befehl ist, Sie werden sehen, dass dieses Element protokolliert wurde. Wenn wir also auf den Code zurückblicken, sagten wir, dass der Absatz gleich document.getElementById ist. Was wir also getan haben, ist, dass wir das Element effektiv aus dem HTML herausgenommen haben und es auf diese Variable gesetzt haben. Lassen Sie uns das ein wenig untersuchen und lassen Sie mich Ihnen einige der Eigenschaften zeigen , die dies hat. Wenn wir hier zum Absatz gehen und Punkt drücken, wird das alle möglichen Dinge vorschlagen. Es gibt alle möglichen Attribute , auf die wir von diesem aus zugreifen können. Nehmen wir zum Beispiel an, wir möchten auf den darin enthaltenen Text zugreifen. Wir können TextContent sagen. Und jetzt protokollieren wir den Textinhalt , der HelloWorld ist. Jetzt gibt es eine Reihe von Dingen, auf die Sie von hier aus zugreifen können , und wir werden später mehr darauf eingehen , wenn wir Stile manipulieren und Schaltflächen in dieser Art von Dingen interaktiv machen. Aber im Moment wählen wir so ein Element aus. Sagen wir also, dass es einen Kurs hat. Wir machen das Gleiche mit Hallo, aber das wird eine Klasse sein. Anstatt „ get element by ID“ zu sagen, möchten wir get elements nach Klassennamen verwenden. Jetzt ist der Kurs, den wir hier eingelegt haben, Hallo. Mal sehen, was passiert , wenn wir das protokolliert haben. Sie können sehen, dass es eine sogenannte HTML-Sammlung hervorgebracht hat . Und wenn wir das öffnen, ist es ein Array. Das erste Element in Index 0 ist ein Absatz-Tag mit einer Klasse von Hallo. Was wäre, wenn wir das Element nur wollten? Wie wählen wir das aus? Nun, die Sache mit Klassen ist, dass mehrere Objekte eine Klasse haben können. Wenn Sie also die Elemente nach Klassennamen auswählen, erhält es ein Array von jedem Element, das diesen Klassennamen hat, auch wenn es nur einen gibt. Jetzt sind IDs anders, weil Sie nur eine ID auf ein Element setzen sollten. Wenn Sie also Element nach ID abrufen sagen, wird es Ihnen direkt da es nur ein Element mit dieser ID geben sollte. Wenn wir auf das spezifische Element zugreifen möchten, wissen wir, dass es innerhalb des Codes das erste ist, es ist der erste Ort, an dem wir diese Klasse von Hallo sehen. Gleich danach können wir Klammern setzen, um auf den 0ten Index zuzugreifen. Und das wird auf das erste Element zugreifen, das das Tag sein wird, das wir wollen. Wenn wir dies speichern und hierher zurückkehren, können Sie sehen, dass wir das ganze Element ausgewählt haben. Jetzt können wir dasselbe tun wenn wir keine Klasse oder ID verwenden. Nehmen wir zum Beispiel an, wir möchten nur alle Absatz-Tags auswählen. Ich kann es tun, ist hier raufkommen und sagen, Document Dot get Element nach Tag-Namen. Denken Sie daran, dass die Tags genau hier in den Karotten sind oder wie auch immer Sie diese Dinge nennen. Wir können alle Absatz-Tags abrufen, indem wir getElementsByTagName p für Absatz sagen , stellen Sie sicher, dass dies in Anführungszeichen steht. Was zeigt uns das? Auch dies zeigt uns eine HTML-Sammlung, da wir mehrere Elemente haben können , mehrere Absatz-Tags. Mal sehen, was es uns hier zeigt. Im 0 Breitenindex haben wir unser Absatz-Tag. Im ersten Index. Es hat auch etwas. Ich muss nachsehen, warum das so ist. Okay. Also habe ich eine Sekunde Pause gemacht und herausgefunden, was das Problem war. Das Problem war, dass ich in unserem HTML Tags für das Absatz-Tag öffnen musste , anstatt den Schrägstrich hier zu haben, um es zu schließen. Ups, es dachte, es gäbe zwei separate P-Tags. Das hab ich repariert. Und wenn wir zu app.js kommen, können wir sehen, dass getElementsByTagName steht , wir bekommen das p. Wenn wir dann hierher kommen und hier in Chrome schauen würden, können Sie sehen, dass es sich um ein Array mit nur einem Element handelt. Jetzt machen wir wieder das Gleiche. Wir können dasselbe tun wie bei Klassen, in denen wir den Nullwertindex auswählen und das genaue Tag sehen können . Wir haben gelernt, Elemente nach Tag, Name, ID und nach Klasse auszuwählen . Was kommt als Nächstes? Nehmen wir an, Sie möchten ein Element auswählen, das auf mehreren Attributen basiert und nicht nur auf seinem Tag, seiner Klasse oder seiner ID. Dort kommt der Abfrageselektor ins Spiel. Nehmen wir an, wir haben dieses Hello World-Absatz-Tag hier. Lass uns ihm eine Klasse von Hallo geben. Dann haben wir ein anderes Absatz-Tag , das auch eine Klasse von Hallo hat, aber es hat auch eine ID von, sagen wir Pfannkuchen. Wir können hier was sagen. Pfannkuchen sind erstaunlich. Wenn wir ausgeben, schauen wir mal, ob wir Elemente nach Tag-Namen erhalten , und das geben wir aus. Mal sehen was, was passiert. Okay, also haben wir das, dieses Array. Auch hier gibt es zwei Elemente. Selbst wenn wir sagen, get elements by className, sagen wir Hallo. Es wird zwei Objekte zurückgeben. Wir können also etwas weiter angeben, was wir wollen. Wenn ich möchte, dass es eine Klasse von Hallo und eine ID von Pfannkuchen hat , kann ich dort den Abfrageselektor verwenden. Was wir tun möchten, ist zu app.js zu kommen. Nehmen wir an, Dokumentpunktabfrageselektor. Abfrageselektor. Grundsätzlich können Sie ihm mehrere verschiedene Attribute eines Objekts geben und es wird sie finden, anstatt ID oder den Klassen- oder Tag-Namen anzugeben. Nehmen wir an, wir wollen ein Absatz-Tag und wir wissen, dass es eine Klasse von Hallo hat. Wir haben einen Punkt Hallo gesetzt. Der Grund, warum wir einen Punkt setzen, ist, dass dies die Syntax ist , die wir in unserem Stylesheet verwenden würden. Wenn wir zum Beispiel auf die Hallo Klasse zugreifen wollten , würden wir Punktkissen sagen, und dann geben wir ihm Stile. Das ist das Gleiche, was wir hier machen. Jetzt werden IDs mit Pfundzeichen ausgewählt. zeige ich dir in einer Minute. Lassen Sie uns das ausgeben und sehen, was auftaucht. Als wir die Hallo Klasse ausgewählt haben, wählte sie das erste Objekt aus , das ich finden konnte. Und so funktioniert der Abfrageselektor, wenn er das erste Objekt bindet , das Ihren Parametern entspricht. Aber das wollten wir nicht. Wir wollten, dass Pfannkuchen fantastisch sind. Wir können weiter angeben und Pfundzeichen Pfannkuchen sagen. Wenn du dich erinnerst, hatten wir hier die Idee von Pfannkuchen. Wenn wir das jetzt ausgeben, hat es das Element bekommen, das wir wollten. Da Pfannkuchen jedoch einen Ausweis , der es einzigartig macht und wir nicht wirklich all das brauchen. Wir können die meisten dieser Dinge loswerden und einfach eine ID von Pfannkuchen sagen , die den gleichen Effekt haben. Das ist spezifisch genug, um zu wissen, was wir wollen. Und so können Sie sehen, dass wir eine ähnliche Syntax haben , um dasselbe zu tun. Es gibt verschiedene Möglichkeiten, dies zu tun. Wenn ich Absatz zwei sage. Das ist also eine ziemlich ähnliche Syntax hier haben wir einen Abfrageselektor, der das erste mit einer Vorstellung von Pfannkuchen bekommt. Hier bekommen wir einfach was auch immer eine Vorstellung von Pfannkuchen hat. Sie können also sehen, dass es verschiedene Möglichkeiten gibt dieselben Dinge zu tun. Nun sagen wir, als wir uns das p dot hallo anschauten, tauchte es nur mit dem ersten auf, was ich gefunden habe, was QuerySelector macht. Was ist, wenn ich alles will , was jetzt dazu passt? Nun, was ich tun kann, ist, dass ich etwas namens QuerySelector verwenden kann . Alles, was wir in das Gleiche stecken werden. Wir sagen p dot hallo. Das gab uns dieses Knotenlisten-Array beiden Attributen. Warum haben Abfrageselektoren überhaupt wenn wir die anderen haben? Nun, QuerySelector ist, dass Sie viele dieser Art von verschiedenen Elementen auswählen müssen. Abfrageselektor kann nett sein da Sie sich nicht erinnern müssen. Holen Sie sich Element für ID, Element für Klassenzimmer. Das musst du nicht alles austippen. Sie sagen einfach einen Abfrageselektor und geben dann an, oh, diese ist eine Klasse, diese ist eine ID. Dieser ist nur ein Tag. Wenn wir also nur das Tag wollten, könnten wir den Punkt Hallo loswerden und einfach den Abfrageselektor all p. sagen. Und das wird alles finden, was ein p-Element ist. Dies sind die verschiedenen Möglichkeiten Elemente auszuwählen , und das wird sich sehr nützlich erweisen, wenn wir anfangen, CSS zu manipulieren und Schaltflächen und ähnliches zu verwenden. Wir sehen uns im nächsten. 4. Elemente erstellen: Jetzt lernen wir mehr über das Erstellen von Elementen. Grundsätzlich werden wir programmgesteuert verschiedene Tags erstellen, ihnen Klassen und IDs hinzufügen, Stile und all diese Dinge. Und wir fügen sie in die Seite ein. Lasst uns in unserer Datei app.js anfangen. Ich werde das alles entfernen. Nehmen wir an, wir möchten darunter einen Button erstellen. Ich werde auch die Pfannkuchen loswerden, die erstaunlich sind. Nehmen wir an, wir möchten darunter eine Schaltfläche erstellen, die später die Hintergrundfarbe der Seite ändert. Aber im Moment werden wir es einfach erstellen und auf die Seite legen. Was wir tun wollen, ist ein Element zu schaffen. Wir rufen diesen Button auf, werden sehr kreativ sein und sie auf das Element zum Erstellen von Dokumentpunkten setzen . Ähnlich wie die Selektoren, die wir verwendet haben, führen Sie einfache Anführungszeichen und dann den Namen des Tags aus, das ist Button. Wenn es ein Absatz-Tag wäre, würdest du sagen p. Wenn es ein Div-Tag wäre, sagst du einfach div. So ziemlich einfach. Wir haben einen Button erstellt. Jetzt hat dies nichts mit der Seite gemacht, da wir sie nur auf eine Variable setzen. Lass uns console.log das und sehen, was wir haben. Wir haben ein nur leeres Button-Tag. Fügen wir etwas Text hinzu. Um dies zu tun, müssen wir einen sogenannten Textknoten erstellen . Nehmen wir an, lassen Sie uns Text Knoten gleich Document Dot erstellen Textknoten. Nehmen wir an, wir wollen es sagen, Hintergrund und Farbe ändern. Wir ändern einfach die Farbe, um einfach zu sein. Wenn wir jetzt zurückgehen und nachschauen, haben wir das Lehrbuch erstellt, aber wir haben es nicht in den Button gelegt. Was wir also tun müssen, ist Button Dot Append zu sagen. Eigentlich werden wir Kind anhängen wird Textknoten sagen. Was das bedeutet, ist, dass die Schaltfläche oder der Text ein Kind ist oder im Grunde genommen innerhalb des Button-Tags ist. Wenn wir Save sagen, dann zeigt es uns, dass wir diesen Button hier haben. Und es hat all diese Attribute. Wir haben unseren Knopf. Wir wollen es auf die Seite stellen. Nehmen wir an, wir möchten es direkt nach diesem HelloWorld-Tag einfügen . Lassen Sie uns dies in eine ID ändern , um die Auswahl zu erleichtern. Was wir tun müssen, ist das HelloWorld-Tag auszuwählen und dann den Button „Put Our“ direkt danach zu setzen und daran anzuhängen. Was wir tun werden, ist Hello, World Equal Document Dot QuerySelector zu sagen . Und wir werden Pound Hallo sagen. Danach möchten wir sagen, dass helloworld dot den Button anhängt. Jetzt können Sie sehen, dass wir den Knopf direkt danach gesetzt haben. Es macht nichts, es ist nur Text und wir können darauf klicken. Aber das ist irgendwie cool, oder? Mal sehen. Wir haben es direkt nach der SMS. Um es etwas hübscher aussehen zu lassen, etwas einfacher anzusehen. Wir werden einige der Stile in style.css ändern. Gehe zu Button. Stile für die Schaltfläche, Alle Schaltflächen-Tags. Technisch gesehen möchten wir den Anzeigeblock sagen, da derzeit Schaltflächen standardmäßig auf eine Inline-Anzeige verfügen, was bedeutet, dass sie direkt neben Text oder anderen Objekten angezeigt werden können . Eine Blockanzeige. Wir legen es unter, es werden Blöcke angezeigt. Wenn wir Display-Block sagen , der darunter liegt, wollen wir ihm etwas Platz zwischen Hallo Welt und sich selbst geben . Also lasst uns tun, lasst uns einen Spielraum machen. Eigentlich wird es nur eine Marge machen. Top fünf Pixel, vielleicht zehn Pixel. Großartig. Wir haben unseren Button, wir haben ihn erstellt. Was können wir sonst noch mit diesem Button machen , während wir ihn erstellen? Das Interessante ist, dass es fast am einfachsten ist, den Button zu erstellen und alles darin zu legen alles darin bevor Sie ihn auf die Seite werfen. Jetzt kannst du es natürlich später auswählen und Dinge damit machen. Aber wenn Sie wissen, dass Sie eine Klasse sind, wenn Sie wissen, dass Sie Stile damit haben möchten, ist es am einfachsten, sie ganz in ein Paket zu legen , bevor Sie es an die Seite senden. Ich zeig dir was ich meine. Wir haben unseren Textknoten. Sagen wir mal. Wir möchten auch den Stil ändern. Jetzt im nächsten Video werde ich mehr auf Stilmanipulation und diese Art von Dingen eingehen . Aber ganz kurz, sagen wir, wir wollen. Aber lasst uns den Button-Punkt-Stil machen. Jetzt können wir Farbe sagen. Eigentlich wäre die Hintergrundfarbe, Farbe wäre nur der Text. Aber wenn wir Hintergrundfarbe sagen , könnten wir hellblau sagen. Sie werden feststellen, dass diese Syntax anders ist als CSS, und ich werde Ihnen vor dem nächsten Video kurz erzählen , wie das funktioniert. Wenn wir normalerweise in CSS wollen, dass die Schaltfläche blau, hellblau oder was auch immer ist, dann würden wir Hintergrund, Strichfarbe, hellblau sagen . Der Unterschied bei JavaScript darin, dass die Hintergrundfarbe ein einzelnes Wort mit CamelCase ist, so dass der erste Buchstabe Kleinbuchstabe und die folgenden Wörter in Großbuchstaben sind. Hintergrundfarbe, hellblau. Lasst uns das aufheben und das loswerden. Schauen wir es uns an. Es scheint nicht funktioniert zu haben. Mal sehen, wir haben einen Fehler Button Punktstil Punktfarbe ist keine Funktion. Was es also sagt ist, dass es sagt: Hey, du kannst dort keinen Parameter einsetzen, weil dies technisch gesehen wie eine Funktion behandelt und das kannst du nicht tun. Es sieht so aus, als wären wir das nicht das, was wir hier machen sollten. Anstatt es als Funktion zu verwenden, werden wir sagen, dass es hellblau ist. Probieren wir das mal aus. Es ist ein bisschen schwer zu sagen, aber es ist definitiv anders. Es ist nicht mehr weiß. Mal sehen, ob wir es anders machen können. Wir sagen einfach Blue. kannst du definitiv sehen, okay, aber was ist, wenn wir die Textfarbe ändern wollen ? Wir können sagen, Button Dot Style, Punktfarbe entspricht Weiß. Großartig. So hängen wir diese verschiedenen Objekte an. Wir müssen erschaffen. Stell dir vor, es ist wie eine Pyramide. Wir müssen auf der Basisebene unser Element, unseren Button. Und dann eine Ebene darüber, unseren Text oder irgendetwas anderes, das sich innerhalb des Objekts befinden könnte, erstellen wir. Eine Ebene darüber ist irgendwie unsere Stile und alles andere. Du könntest das mit jedem Element machen. Es muss kein Knopf sein. Es könnte ein div sein, es könnte ein Header-Tag sein. Du könntest wirklich machen, was du willst. Wir haben diesen Button in ein paar Videos eingefügt. Ich zeige Ihnen, wie Sie hier die Farbe des Hintergrunds ändern können, aber das ist nur eine kurze Ansicht des Erstellens von Elementen. Okay, wir sehen uns im nächsten. 5. Elemente manipulieren (insbesondere mit CSS): Okay, in diesem Video werden wir über die Manipulation von Elementen im DOM sprechen . Derzeit haben wir unseren Button hier, wir haben unsere Hello World. Wir haben unsere Hintergrundfarbe. Mal sehen, was wir mit diesen Elementen anfangen können, beginnend mit dieser Hintergrundfarbe. Meinung nach ist es nicht sehr schön . Lassen Sie uns es in eine schönere Farbe ändern. In unserer app.js werde ich nur etwas Speicherplatz schaffen und ein bisschen hierher kommen. Nehmen wir an, wir möchten den Körper auswählen, weil der Körper das ist, was wir verwendet haben , um eine Hintergrundfarbe von Grün zu erzeugen. Hier können wir Hintergrundfarbe sagen. Ups, tut mir leid. können wir. Zuerst müssen wir den Körper auswählen. Nehmen wir an, lassen Sie den Körper gleich Dokumentpunkt, holen Sie Element nach Tag-Namen. Sie könnten auch QuerySelector verwenden. Werde Leiche sagen. Ich glaube, man muss dieses vollständig kapitalisieren , weil es ein spezielles Tag ist. Mal sehen, ob das richtig funktioniert. Okay. Okay. Ja. Okay. Entschuldigung, ich habe mich geirrt. Dies muss nicht großgeschrieben werden. Was passiert ist, ist, als ich Körper genau hier eintippte und protokollierte, gab es uns diese HTML-Sammlung, im Wesentlichen eine Reihe von Elementen. Das ist es, was das ist. Und es hieß, okay, beim ersten Index, Index 0, haben wir ein Body-Tag. Es ist ein bisschen albern, weil der Tag-Selektor so funktioniert, dass er ein Array erstellt , weil wir mehrere Tags haben können. Wenn wir sagen, Elemente nach Tagnamen P abrufen , werden alle Absatz-Tags angezeigt. Jetzt hat es dasselbe mit dem Körper gemacht, aber wir können nur ein Körper-Tag haben. Was wir hier tun werden, ist Element 0 auszuwählen , das uns unseren Körper gegeben hat. Und Sie können sehen, dass es ausgewählt ist, wenn wir unseren Cursor darüber markieren, er wählt die ganze Seite aus. Und wenn du das öffnest, kannst du alles sehen. Alles ist da unten drin. Okay, jetzt haben wir die Leiche. Lassen Sie uns die Hintergrundfarbe ändern. Sagen wir also Körperstil. Mit Stil greifen wir auf die Style-Eigenschaft zu. Okay, sagen wir mal, dass die Hintergrundfarbe gleich ist. Lass es uns geben. Mal sehen, ob Hellrosa eine Farbe ist. Ich hab keine Ahnung. Lass es uns versuchen. Da sind wir los. Ja, das gefällt mir. Das ist eine schöne Farbe. Lassen Sie mich Ihnen den Unterschied zwischen den Funktionen zeigen , die wir zuvor verwendet haben, und diesen Gleichheitszeichen. Im letzten Video. Ich entdeckte, dass ich einen Fehler gemacht habe, wo ich versucht habe, Hintergrundfarbe zu verwenden. Mach so etwas, wo ich sagte wie Hintergrundfarbe, Klammern, Hellrosa. Aber die Sache ist, es ist keine Funktion. Textknoten erstellen ist eine Funktion. Es liest etwas aus Text. Element erstellen ist eine Funktion. Queryselector ist eine Funktion, aber dies sind Eigenschaften von Elementen. Lass mich dir zeigen, was ich meine. Wählen wir das, lassen Sie uns gut auswählen, wir können das Körper-Tag auswählen. Wir haben das Body-Tag bereits ausgewählt . Lasst es uns protokollieren. Lasst uns darauf klicken. Was kriegen wir? Der Körper ist vielleicht nicht das beste Beispiel. Versuchen wir es, versuchen wir es mit dem Knopf. Mal sehen wir mal. Tut mir leid. Körper-Tag. Das Body-Tag ist ein bisschen komisch, daher wählen wir unser Absatz-Tag mit der Aufschrift Hello World aus. Nur für dieses Beispiel. Sagen wir p für Absatz gleich. Dokument, Abfrageauswahl, Pfund, hallo. Dann genau darunter protokollieren wir P. Wir haben P genau hier protokolliert. Wir haben dieses Absatz-Tag ausgewählt. Aber was wir tun wollen, ist ein bisschen mehr Details zu erfahren, dass wir den P.Ball direkt hier im QuerySelector vor das Pfund stellen werden. Auf diese Weise können wir auf weitere Informationen darüber zugreifen. Es ist ein bisschen verwirrend. Aber wenn wir es einloggen, wirst du sehen, dass wir dieses P lb Hallo haben. Wenn wir darauf klicken, werden Sie sehen, dass es all diese Dinge gibt. Dies sind Eigenschaften unseres Absatz-Tags. Dieses Absatz-Tag hat unzählige Eigenschaften. Die meisten von ihnen sagen Null. Wir benutzen sie nicht. Aber einige von ihnen sind wir zum Beispiel Stil. Wenn Sie auf Stil klicken, sehen Sie eine Liste jedes Stils, im Grunde jeden möglichen Stil für dieses Objekt. Auch hier, von denen die meisten nicht benutzt wurden. Aber sagen wir, wir wollen die Farbe dieser Hallo Welt ändern. Dann können wir hier reinschauen und Farbe finden. Ich möchte Ihnen das zeigen, ist, Ihnen zu zeigen , warum dies keine Funktion ist. Y. Wenn wir versuchen, die Hintergrundfarbe des Körpers zu ändern, sagten wir, dass der Punkthintergrund im Körperpunktstil hellrosa entspricht. Wir haben das getan, weil dieses hellrosa, entschuldige, die Farbe eine Eigenschaft unter der Stileigenschaft für dieses Element war . Wenn das ein bisschen verwirrend war, ist es okay. Du musst dir darüber keine Sorgen machen. Wisse nur, dass wenn du Teil eines Elements, sein CSS, modifizierst , das passiert , wenn du darauf klickst, all diese Dinge. Dies sind Eigenschaften , die Sie gleich einem Wert festlegen , der sich von diesen Funktionen unterscheidet . nun im Zweifelsfall Wenn Sie nun im Zweifelsfall nach Änderungsstil und Hintergrundfarbe für ein Element online suchen , können Sie die Syntax dafür sehen , wenn Sie vergessen oder nachschlagen, Textknoten erstellen Sie können die Syntax von einer Website wie Mozilla - oder W3-Schulen sehen. Es gibt viele Websites , die Ihnen die genaue Syntax dieser Dinge mitteilen. Aber zurück zu dem, was wir taten, haben wir hier die Hintergrundfarbe geändert. Mal sehen, welche anderen Eigenschaften wir ändern können , während wir unser p-Tag auswählen. Wenn wir auf P klicken und Periode drücken, können wir alle möglichen Dinge sehen. Vielleicht möchten wir den Text ändern und hier auf den Textinhalt klicken. Wir wissen schon früher, dass der Textinhalt helloworld ist. Was ist, wenn ich das ändern möchte? Ich kann diese Eigenschaft auf „Ich mag Pi“ setzen. Jetzt können Sie sehen, dass das JavaScript dieses Element manipuliert hat , es hat sich geändert. Es ist TextContent-Eigenschaft. Wenn Sie möchten, würde ich Sie ermutigen, sich die Eigenschaften jedes Elements anzusehen. Sie können dies im VS-Code tun, indem Sie einfach die Punkte nach etwas drücken und durch diese Liste scrollen, Ihnen alle möglichen Dinge zu erzählen, auf die Sie zugreifen können. Zum Beispiel das nächste Geschwister, das Ihnen sagt, welches Element direkt daneben ist. Oder wir könnten nach innerem HTML suchen , das Ihnen zeigt, welches HTML darin enthalten ist. Sie können fragen, ob es ein bestimmtes Attribut hat. All diese Dinge eigentlich, Versuchen wir, dass man Attribut hat. Sagen wir mal. Ich zeige dir ein bisschen mehr Logik. Der Code mit diesem hat Attribute. Das werde ich los. Mal sehen, lasst uns eine if-Aussage machen. Wir sagen, wenn P die Attributfarbe hat, eine Attributfarbe hat, dann werden wir etwas tun. Es tut mir wirklich leid, nicht das Attribut der Farbe, das Attribut der Stilpunktfarbe. Ich bin mir nicht sicher, ob genau diese Syntax funktionieren wird, aber wir werden den Erfolg trösten. Mal sehen, was passiert. Sieht aus, als hätten wir nichts bekommen. Was ist, wenn wir einfach Stil sagen? Immer noch nichts? Vielleicht müssen wir eine Farbe hinzufügen. Versuchen wir es also, Punktfarbe im P-Punktstil entspricht Blau. Okay, also sieh dir das an. Es hat Erfolg protokolliert, weil festgestellt wurde, dass es das Attribut des Stils hat. Mal sehen, was passiert, wenn wir Punktfarbe stylen. Das funktioniert nicht dafür. Attribute in HTML-Elementen sind diese Dinge genau hier, die Sie in Anführungszeichen setzen, die Sie in das Element setzen. Also konnte ich sehen, ob hallo world eine Vorstellung von Hallo hat , indem ich hierher komme und sage, wenn, mal sehen, lass uns Punkt machen. Wir können p dot get attribut machen. Sagen wir, wir wollen die Farbe. Wir setzen das auf Blau. Was macht das? Es heißt, erhalte das Attribut der Farbe. Oh tut mir leid. Das machen wir nicht. Ich habe mich nur ein bisschen verteilt. Wir wollten den Ausweis wissen. Wenn das hallo war. Wir haben die Attribut-ID, die genau hier ist. Wir möchten sagen, ob diese Attribute Hallo gleich sind, dann trösten Sie einen Erfolg. Was es tut. Wenn wir sagen würden, ob es auf Wiedersehen ist, kein Erfolg. Sie können aus Overhead-Perspektive sehen, wie dies funktioniert , und sehen, dass es viele Möglichkeiten mit der JavaScript-Logik gibt Möglichkeiten mit der JavaScript-Logik in denen Sie if-Anweisungen verwenden können. Du könntest Schleifen gebrauchen. Zum Beispiel könnten Sie eine for-Schleife verwenden und sagen, dass für die Zahlen eins bis zehn diese Elemente erstellen oder ihre Farben ändern. Tu alle möglichen Dinge. Die Möglichkeiten sind im Grunde endlos. Also habe ich dir hier eine Menge Dinge gezeigt. Ich würde empfehlen, wenn etwas davon verwirrend wäre, versuchen Sie, das Video erneut anzusehen. Gehen Sie einfach Schritt für Schritt durch und erfahren Sie, was Sie tun können , um diese Objekte zu manipulieren. Aber wisse nur, dass eine grundlegende Zusammenfassung, jedes Element Eigenschaften hat, es hat Hunderte oder 800 Eigenschaften. Und einige dieser Immobilien haben Eigenschaften in ihnen. Zum Beispiel hat der Stil Farbe, Hintergrund, Farbe, Rand, all diese Dinge. Sie können mit diesen verschiedenen Funktionen auf diese zugreifen. Off von Elementen. Sie geben den Namen Ihrer Variablen ein und geben einen Zeitraum ein. Und es gibt dir allerlei Dinge. Ich würde diese erforschen. Wenn Sie nicht wissen, was einer ist, schauen Sie es online nach und es wird Ihnen die Syntax mitteilen. Es wird dir sagen, wie du es benutzt und all die Dinge, die du damit machen kannst. Aber wir sehen uns im nächsten Video, wenn wir diesen Button machen, tun Sie Dinge. Alles klar. 6. Interaktive Schaltflächen erstellen: In diesem Video werden wir unseren Button dazu bringen, ein paar coole Dinge zu machen. Wir werden die Farbe ändern lassen und vielleicht etwas in der Konsole ausgeben. Lasst uns anfangen. Um die Dinge vorerst ein bisschen einfacher zu machen, werde ich das kommentieren und unseren Button erstellen. Ich werde hart in das HTML codiert, nur um es ein bisschen einfacher zu manipulieren. Alles klar, wir haben unseren Farbwechsel Button. Nehmen wir an, wenn ich auf diesen Button klicke, möchte ich, dass er die Farbe in Blau ändert. Was wir also tun werden, ist, dass ich eine Funktion erstellen muss, die diese Farbe ändert, wenn sie ausgeführt wird. Schreiben wir die Funktion. Ich nenne das Farbe ändern. Im Moment machen wir einfach console.log und ändern die Farbe. Okay. Jetzt müssen wir dies in unserem HTML irgendwie auslösen. In unserem Button-Tag. Wir setzen ein Attribut namens onClick. Daraus kannst du also kommen. Aber wenn wir darauf klicken, wird es etwas tun. Und wir geben diese Funktion ein, ändern die Farbe und stellen sicher, dass Sie die Klammer haben. Sehr wichtig. Wenn ich auf diese Schaltfläche klicke, möchten wir, dass er die wechselnde Farbe protokolliert. Wenn ich die Konsole öffne und darauf klicke und die Farbe ändere , kannst du sehen, je mehr ich darauf klicke, desto mehr wiederholt sie diese Nachricht. Also lass uns jetzt was Cooles damit machen. Was wir tun wollen, ist, dass wir den Körper auswählen und seine Farbe ändern möchten. Also werden wir sagen, lass Körper gleich dokument dot. Holen Sie sich Elemente nach Tag-Namen, speichern Sie den Text. Und denken Sie daran , dass wir Elemente 0 auswählen müssen , um auf den Körper zuzugreifen. Und das machen wir, denn wenn wir Tags auswählen, erhält es ein Array von jedem Tag dieses Typs. Und der Körper macht das auch, obwohl wir nur ein Body-Tag verwenden. Wir wählen Körper aus. Und dann sagen wir Body Dot Style, Punkt-Hintergrundfarbe ist gleich blau. Wenn wir jetzt auf unseren Button klicken, haben wir einfach die Farbe in Blau geändert. Aber wenn Sie erneut darauf klicken, ändert es sich nicht zurück. Warum ist das so? Nun, wenn wir uns den Code ansehen, sagen wir ihm nur, dass er ihn in Blau ändern soll. Wenn wir die Seite aktualisieren, wird sie wieder grün. Aber sobald wir auf diesen Button klicken, blau. Also zeige ich dir, wie man Logik macht , um sie von einem zum anderen zu ändern. Nehmen wir an, wir haben dieses Tag genau hier ausgewählt. Ich werde das los. Lassen Sie uns eine if-Anweisung erstellen. Wir werden sagen, wenn die Punktfarbe im Körperpunktstil gleich ist, stellen Sie sicher, dass Sie die doppelte oder dreifache Gleichheit haben , damit Sie nicht einfach sind setzen Sie sie wie eine Variable, setzen Sie einen Wert auf eine Variable. Wir wollen ein Double oder Triple Equals, um sicherzustellen , dass wir eine Qualität vergleichen. Sie können den Unterschied zwischen doppelten und dreifachen Gleichheitszeichen auf der Linie nachschlagen . Wenn die Farbe grün ist, weil ich denke, dass wir das früher gewählt haben. Wenn es grün ist, ändern Sie es in Blau. Sonst bedeutet, dass die Hintergrundfarbe bereits blau oder etwas anderes ist. Andernfalls ändere es in grün. Was das sagt ist, dass es das Körperelement bekommt und es heißt: Okay, wenn die Hintergrundfarbe grün ist, ändere es in Blau. Wenn es blau ist, ändere es in grün, weil wir diese sonstere Aussage haben. Wenn es also nicht grün ist, ändere es in grün. Wir sehen es uns an. Da sind wir los. Wir wechseln zwischen Blau und Grün. Und jedes Mal, wenn wir darauf klicken. Wie Sie sehen können, gibt es hier eine Menge Texte in dieser if-Aussage und genau hier war das. Trend während dieses Kurses. Wenn Sie all diese Dinge nachschlagen, die wir erstellt haben, ist viel Text beteiligt. Das ist irgendwie die Natur von Vanille-JavaScript oder einfach nur JavaScript. Eine Möglichkeit, dies zu verkleinern, ist, wenn wir etwas mehrmals verwenden, zum Beispiel diese Hintergrundfarbe, können wir die Hintergrundfarbe auf eine Variable einstellen. Wir könnten sagen, lassen Sie Hintergrundfarbe gleich Körperpunktstil Punktfarbe. Auf diese Weise. Wir können diesen Hintergrundfarbe einfach beibehalten, der die Menge an Code, die wir benötigen, erheblich reduziert. Aber hat es funktioniert? Mal sehen. Es hat nicht funktioniert. Mal sehen, ob es irgendwelche Fehler gibt. Keine Fehler. Mir wurde klar, dass das Problem eine gute kleine Programmierstunde für uns beide ist. Siehe hier, ich stelle die Hintergrundfarbe gleich der aktuellen Hintergrundfarbe fest. Aber hier habe ich gerade die Farbe dieser Variablen geändert. Jetzt ist diese Variable, sobald sie gesagt wurde, vom Körperelement selbst gelöst. Wir ändern das, aber nicht das, was wir ändern wollen. Und deshalb entschuldige ich mich, ich habe einen kleinen Fehler gemacht, wenn ich dir das erklärt habe. Diese beiden Dinge müssten immer noch eine Punkt-Hintergrundfarbe im Körperpunktstil sein. Weil wir diese ursprüngliche Hintergrundfarbe ändern möchten , aber wir können die Hintergrundfarbe trotzdem so überprüfen. Verwendung dieser Variablen, wodurch die Lesbarkeit in der if-Anweisung verbessert wird. Da sind wir los. Jetzt haben wir es wieder zum Laufen gebracht. Es gibt vielleicht Möglichkeiten, dies zu umgehen, wenn wir uns mehr Zeit nehmen und uns damit beschäftigen würden. Aber Sie fragen sich vielleicht, was ist der Vorteil, dies hier oben zu erklären? Und dann das da unten. In dieser Situation gibt es nicht viel Nutzen. Wir könnten hier auf jeden Fall eine Punktfarbe im Body Dot Style ausschreiben . Aber sagen wir, wir wollten diese Hintergrundfarbe woanders verwenden . Und sagen Sie, nun, wenn Hintergrundfarbe Blob, Blob, es ist schön, es nur Kurzschrift zu haben und sehr lesbar, weil es wichtig ist , lesbaren Code zu haben. Du willst es dir ansehen und sehen, was du machst. Das ist ein kleiner Hinweis darauf, was wir mit der Hintergrundfarbe machen können. Jetzt gehen wir noch einen Schritt weiter und machen ein wenig console.log. Sagen wir, das wird blau sein und das hier. Während Wahnsinn, da gehst du. Konsolenpunkt-Log grün. Wenn wir jetzt das Terminal öffnen, gehen wir los. Blau, Grün, Blau, Grün Es ist irgendwie cool. Sie können sich alle möglichen Dinge vorstellen, die Sie damit machen. Während die reale Anwendung, nun, jede Website, auf die Sie gehen, im Grunde Buttons hat. Und wenn du dort auf JavaScript klickst, macht das alle möglichen coolen Dinge. Aufrufen von Funktionen, die Daten aus dem Internet abrufen, die Nachrichten senden. können Sie wirklich unbegrenzte Dinge dieser Funktionalität können Sie wirklich unbegrenzte Dinge tun. Das ist also nur ein sehr einfacher Blick darauf. Und es ist etwas, das ich früher mit Ihnen teilen wollte , als ich darüber sprach , Ihren Code mit Variablen zu verkürzen, ist, dass es eine Vielzahl von dem gibt was wir JavaScript-Frameworks nennen bei denen im Wesentlichen jemand JavaScript genommen und eine Version davon erstellt hat , die zusätzliche Funktionalität oder eine einfachere Syntax im Code hat. Das nennt man Framework. Und vielleicht haben Sie von diesen gehört, einige unserer jQuery Angular React View, sind alles JavaScript-Frameworks. Es sind nur verschiedene Arten, den Code zu schreiben. Sie haben jeweils eine andere Syntax, verschiedene Funktionen. Und wenn Sie also haben , dass der verkürzte Code für Sie wirklich wichtig ist, würde ich vorschlagen, ein Framework zu untersuchen. Es dauert einige Zeit, um zu lernen, aber es kann eine sehr lohnende Erfahrung sein. Oft, wenn Sie eine große komplexe App-Website haben eine große komplexe App-Website , mit der Sie Dinge tun möchten , mit DOM-Manipulation. Es kann schnell chaotisch werden. Ich meine, Sie können sich vorstellen, all diese Funktionen und nur diesen ganzen Code hier geschrieben zu haben. Es ist viel. Und das ist nur die Natur von Vanille-JavaScript oder einfachem JavaScript. Aber das ändert die Farbfunktion. Wenn ich das zum Beispiel in Angular machen würde, dauert es möglicherweise nur drei Codezeilen. Wer weiß es? Es kann einfach viel einfacher sein, Dinge schneller zu erledigen. Aber das ist, es ist wichtig, diese Dinge zu wissen, da viele dieser DOM-Manipulationsprinzipien, die wir mit einfachem JavaScript verwenden, in diesen anderen Frameworks verwendet werden . Ich weiß, dass ich Ihnen ein sehr einfaches Beispiel gezeigt habe einfach die Hintergrundfarbe über diesen Button ändern . Im nächsten Video werde ich über das Projekt sprechen , das Sie machen sollen. Das kann wirklich lohnend sein, das kann dir wirklich viel beibringen. Weil der beste Lehrer, den ich denke, es selbst macht. Es gräbt sich einfach ein und probiert Dinge aus. Ich werde ein bisschen darüber reden, aber das ist alles für dieses Video. Das ist nur eine kurze Zusammenfassung. Wir haben darüber gesprochen, unseren Button Dinge tun zu lassen. Also haben wir das onclick-Attribut verwendet und es auf eine Funktion festgelegt. Und diese Funktion ist wichtig. mussten wir darin erklären. Wir könnten tun, was immer wir wollten. Weißt du, du musst den HTML-Code nicht einmal manipulieren. Sie müssen die Seite nicht manipulieren. In dieser Funktion könnte es etwas ganz anderes machen. Es könnte Mathe berechnen. Es könnte, es gibt eine Reihe von Dingen. Aber im Grunde genommen haben wir die Elemente ausgewählt und eine if-Anweisung gemacht, um die Farbe je nachdem, auf welche Hintergrundfarbe eingestellt wurde, zu ändern . Okay. Wir sehen uns im nächsten Video. 7. Projekt/Abschluss: Okay Leute, ihr habt es bis zum letzten Video dieses DOM-Manipulationskurses geschafft . Du solltest stolz auf dich sein. Die Fähigkeiten, die Sie hier erlernt haben , werden in jeder Webentwicklung, die Sie machen, sehr wichtig sein. Und verbessern Sie einfach Ihr Programmierwissen insgesamt. sind Dinge, die mich wirklich faszinieren, die mir Spaß machen und ich hoffe, dass es Ihnen auch gefallen hat. Damit Sie ein bisschen weiter genießen können, damit Sie mehr erfahren können. Ich werde gerade ein bisschen über das Projekt sprechen . Für dieses Projekt ist es sehr einfach. Ich möchte nur, dass du erforschst jede Funktion erforschst, die du findest , was für dich interessant aussieht. Ich möchte, dass du es versuchst. Wenn Sie eine Vorstellung von etwas Einfachem haben, das Sie machen möchten, Hey, wenn ich auf diese Schaltfläche klicke, möchte ich den Text auf der Seite in etwas ändern. Oder ich berechne etwas Mathematik. Sie können einen einfachen Taschenrechner oder was auch immer Sie wollen. Ich möchte, dass Sie es ausprobieren, Funktionen erkunden, die Funktionen von VS-Code nutzen, den ich Ihnen beigebracht habe , sowie die Chrome Developer Tools, um die Attribute anzuzeigen und die Dinge auszuwählen, die Sie ändern möchten. Es gibt so viele Dinge, die du tun kannst. Sie könnten sogar versuchen, eine Webseite komplett aus der Flucht zu machen , mit Elementen, die von JavaScript erstellt wurden, ohne fest codiertes HTML oder CSS zu entkommen mit Elementen, die von JavaScript erstellt wurden . Das könnte eine coole Herausforderung sein. Aber wirklich möchte ich nur, dass du Spaß hast. Ich möchte, dass du deine Kreationen erforschst und mit anderen teilst. Wenn du etwas lernst, zeig es jemand anderem. Ich denke, dass es sich die Zeit nimmt, dies zu durchforsten , und ich habe es nicht selbst gelernt und deinen Erfolg mit anderen teilen, es wird sich einfach wirklich gut anfühlen. Ich hoffe, ihr habt diesen Kurs genossen. Ich hoffe, dass du mich mit diesem Projekt beschäftigst und es einfach 15 Minuten lang ausprobierst. Versuchen Sie, Objekte zu manipulieren, versuchen Sie etwas Cooles mit JavaScript und DOM-Manipulation zu machen. Wenn euch dieser Kurs gefallen hat, schau dir bitte meine anderen Kurse auf Skillshare an. Ich habe einen auf Angular und Komponenten, Dienste, allerlei Dinge, Routing. Dort gibt es einen großartigen Angular-Kurs. Ich würde empfehlen, es sich anzusehen und ich werde hoffentlich bald in Zukunft weitere Kurse veröffentlichen. Schauen Sie sich diese bitte auch an und teilen Sie diese mit Ihren Freunden. Das könnte wirklich von diesem Wissen profitieren. Aber bis dahin ist Mein Name Taylor und es war mir ein Vergnügen , dein Ausbilder zu sein. Und ich wünsche dir alles Gute.