Document 2023 – Teil 4: DOM (Erstellen, Zuhören und Reaktion auf Veranstaltungen)

1. Kurseinleitung – -: Woo Hoo, meine lieben Studenten. Willkommen, Willkommen zurück zu einem weiteren spannenden Kurs in einer ganzen Serie rund um den Dom. Ich bin Clyde, ich werde dein Lehrer sein, und ich hoffe, du folgst mit, weil jede Klasse auf sich selbst aufbaut. Aber diese Klasse kann unabhängig oder iCloud nehmen, was das an dieser Klasse möglich ist, ist alles über Ereignisse. Nun, wenn Venen wichtig sind, um zu verstehen, wenn es um die Arbeit geht, denn oft wollen Sie nicht nur das DOM beeinflussen. Sie möchten nicht mit einer Web-App beginnen, bis ein Ereignis eintritt. Was meine ich mit einer Veranstaltung? Nun, es gibt viele verschiedene Arten von Ereignissen und jede Art von Ereignis hat ihre eigenen Eigenschaften und Methoden an sie angehängt. Ereignisse wie Keyup-Events. Wenn der Benutzer auf die Tastatur tippt, was ist mit einem Klick-Ereignis? Das ist eine gemeinsame, wenn ein Benutzer auf eine Schaltfläche klickt, manchmal möchten Sie etwas angezeigt werden, manchmal eine Scroller-Vene, manchmal ein Seitenlade-Ereignis, die Liste geht weiter, sie sind Tonnen davon. Aber bevor wir überhaupt auf die verschiedenen Arten von Venen zu bekommen, müssen Sie verstehen, dass Ereignisse gebracht nur die Ereignisse verstehen. Sie müssen den Unterschied zwischen Ereignis-Listener und Ereignishandlern verstehen. Sie müssen verstehen, wie die auf der Seite. Und wir haben eine Vielzahl von Möglichkeiten, wie wir dies tun können. Wir können Inline-Ereignis-Listener, Inline-Ereigniseigenschaften verwenden, und wir können die addEventListener Methode verwenden. Also werde ich all das besprechen. Ich werde über die Vor- und Nachteile der Verwendung eines übereinander diskutieren. Ich werde empfehlen, was ich denke, ist der beste Ansatz, der wirklich Spaß machen wird. Also ohne weiteres meine Idee Studenten, Lassen Sie uns in den ersten Vortrag über DOM Events bekommen, Icon Gewicht, Audios. 2. Was ist ein Ereignis: Wir kommen in sie ein. Super, super aufgeregt. Ich bin super amped und ein ganzer Po2. Dies wird ein wirklich großartiger Kurs über fortgeschrittene Techniken sein, wenn es um DOM-Manipulation geht. Und warum ist dieser Kurs so spannend? Nun, aus dem einfachen Grund, dass Sie bis jetzt, wenn Sie die DOM-Grundlagen lernen, so ziemlich nur gesehen haben, wie Sie das DOM in der Konsole ändern können. Und das bedeutet, dass es vorübergehend ist. Mit anderen Worten, jedes Mal, wenn die Seite aktualisiert wurde, gingen unsere Änderungen verloren. Ziel in diesem Kurs ist es, das bisher Gelernte zu kombinieren um dynamische Seiten zu erstellen. Und um dies zu tun, müssen wir ein einfaches Wort verstehen, das sehr kompliziertes Thema hat, Ereignisse. Okay, dünne Wand, was sind Ereignisse? Lass mich diesen Stein schnappen und ihn auf den Bildschirm werfen. Okay, das ist die Frage, was ist ein Ereignis? Nun, ich mag immer die Klammer einfach an den Rissen zu starten und Ereignis ist nur eine Aktion, die ein Benutzer oder ein Browser ergriffen hat. Und die vielen verschiedenen Arten von Ereignissen, wie wenn ein Benutzer mit der Maus über ein Element bewegt, wenn ein Benutzer auf ein Element klickt, ein Formular sendet, kann der Browser sogar die Adern senden, wenn die Seite geladen wird. Was ist, wenn ein Benutzer eine Taste drückt? Dies sind nur einige Beispiele für verschiedene Arten von Ereignissen, aber sie sind viele, viele mehr. Wir wissen also, dass ein Ereignis eine Aktion ist, die der Benutzer-Browser ausführt. Wichtig ist jedoch, dass immer ein Ereignis im Browser stattfindet. Ok, cool. Auf einem sehr hohen Niveau wissen wir, was ein Event ist. Wir wissen, dass irgendwie seltsam stattfindet. Aber wie verwenden wir Ereignisse, um sich auf dieses Wort zu konzentrieren? Wie greifen wir auf diese Veranstaltungen zu? Wie interagieren wir mit ihnen? Wie hören wir auf diese Ereignisse? Und die Antwort ist Trommelrolle. Javascript. Das ist richtig. Javascript im Event ist JavaScript-verwandt. Und durch Codierung von JavaScript-Antworten, die bei einem Ereignis ausgeführt werden. Da Entwickler Nachrichten an unsere Benutzer anzeigen können, können wir Tochter, Reaktor-Button Klick und viele, viele andere Dinge validieren . Es ist sehr, sehr aufregend, dass es einen Vorbehalt gibt. Ich möchte nur sagen, ja, Webby-Venen auf nicht Teil der Kern-JavaScript-Sprache. Benehmen Sie sich diese Unterscheidung im Hinterkopf. Was ich also sagen möchte, ist, dass die Venen selbst uns von der DOM-API gegeben werden. Erinnern Sie sich an die im Browser integrierten DOM-APIs. Javascript ist nur eine der vielen Sprachen, die wir normalerweise verwenden, um auf diese Ereignisse zuzugreifen und mit ihnen zu interagieren. Macht das irgendwie Sinn? Ich hoffe es. Und mach dir keine Sorgen, wenn du ein bisschen verloren bist. Alles, was wir in diesem Kurs über Ereignisse ins Detail geraten werden. Du wirst wirklich Großmeister werden und Ereignisse, die ich super, super aufgeregt bin. Bleiben Sie motiviert, machen Sie weiter. Und wir sehen uns in der nächsten Vorlesung. 3. Zwei wichtigsten Dinge, die man kennen: Denken Sie daran, dass Ereignisse entscheidend sind, um die Front-End-Entwicklung zu verstehen und zu meistern. Und deshalb werde ich ziemlich viel Zeit in diesem ersten Abschnitt des Kurses verbringen, um Ereignisse in Adern zu erklären , sind nur Aktionen, die vom Benutzer oder vom Browser ausgeführt werden. Obwohl Sie eine Funktion ausführen können, wenn Ihre Seite geladen wird, möchten Sie meistens Code ausführen, wenn der Benutzer etwas tut, z. B. wenn ein Benutzer auf einen Link in das Formular klickt , der die Maus über ein Objekt bewegt oder etwas anderes tut. Und denken Sie daran, dass alle diese Aktionen Ereignisse genannt werden. Und wie ich in der vorherigen Vorlesung erwähnt, viele verschiedene Arten von Veranstaltungen. Und sie haben jeweils ihren eigenen Namen. Zum Beispiel, wenn ein Benutzer auf eine Schaltfläche klickt, Überraschung, dass Klick-Ereignis ausgelöst wird. Wenn der Benutzer eine Taste drückt. Ein Tastendruckereignis wird ausgelöst, wenn Ihr Browser alle Daten vom Server enthält und lädt, ein Lastereignis ausgelöst wird. Also denken Sie daran, genau wie in Ihrem persönlichen Leben, haben Sie viele verschiedene Veranstaltungen, wie eine Geburtstagsfeier, eine Hochzeitsveranstaltung, et cetera, et cetra. Dasselbe passiert in Ihrem Browser. Sie sind Ereignisse, die die ganze Zeit passieren. Ok? Okay, du kapierst es mittlerweile. Lasst uns weitermachen. Sie müssen zwei Dinge verstehen, um Ereignisse zu meistern, und sie sind nicht so schwierig. Was sind sie? Erstens müssen wir jeden Ereignis-Listener verstehen. Was ist ein Ereignis-Listener? Es ist ziemlich intuitiv. Eigentlich. Ein Ereignis-Listener fügt eine ansprechende Schnittstelle an ein Element. Kühle Köpfe, ein bisschen ein Bissen Wasser. Ich meine, denk so darüber nach. Wenn wir einen Listener an ein Element anhängen, erlauben wir diesem bestimmten Element zu warten und zu warten, bis ein bestimmtes Ereignis ausgelöst wird. Zweitens, ergibt Sinn. Mach dir keine Sorgen, wenn du das noch nicht ganz verstehst. Wir werden viele, viele Beispiele in diesem Kurs sehen . Moment verstehen Sie nur, dass wir einen Listener auf ein Element setzen müssen , um auf ein bestimmtes Ereignis zu hören. Und es gibt nicht nur eine Art des Zuhörens. Sie sind drei Möglichkeiten, Ereignis-Listener Elementen zuzuweisen. Wir haben Inline-Ereignis-Listener in Zeileneigenschaften, oder wir können Ereignis-Listener verwenden. Und wir werden über alle drei dieser Methoden gehen, um sicherzustellen, dass Sie mit jedem Weg vertraut sind und Ereignis ausgelöst werden kann. Und dann werden wir natürlich die Vor- und Nachteile jeder Methode diskutieren. Okay, also haben wir über den Ereignis-Zuhörer gesprochen. Was denkst du, ist das zweitwichtigste, wenn es um das Ereignis geht? Denk drüber nach. Kannst du raten? Wir haben ein Element, das auf ein Ereignis hört und jetzt sagen, dass ein Ereignis tatsächlich passiert. Was passiert als Nächstes? Jetzt bin ich sicher, dass du es erraten hast. Wir brauchen einen Handler, wir brauchen eine Art Ausführung. Wir müssen dem Browser sagen, okay, Cool, was machst du? Und das bringt uns zu Ereignishandlern. Der wichtige Punkt zu beachten ist, dass jedes verfügbare Ereignis, ein Click-Ereignis, ein Keypress-Ereignis, exzentrische cetera, einen Ereignishandler haben muss. Und ein Ereignishandler nur einen Codeblock. Normalerweise läuft eine JavaScript-Funktion, die Sie und ich als Programmierer schreiben , wenn das Ereignis passiert. Und wenn ein Ereignis passiert, als Programm ist wie mit ausgefallenen Worten, also verwenden wir einfach das Wort Kämpfe. Wenn ein Ereignis ausgelöst wird. Wir führen diese Handler-Funktion aus. Und ein bisschen FYI, viele Leute, und wenn Sie anfangen, diese Dinge zu googeln, haben viele Entwickler oft EventHandlers als Ereignis-Listener bezeichnet. Und obwohl sie ziemlich nah sind, sie, streng genommen auf nicht die gleiche Sache. Obwohl sie immer im Tandem arbeiten, arbeiten sie zusammen. Denken Sie daran, dass der Hörer auf das Ereignis hört, das passiert. Und der Handler ist der Code, der als Reaktion auf dieses Ereignis ausgeführt wird. Im Moment möchte ich eigentlich nur hier eine Pause machen. Sie haben in sehr, sehr wichtige Dinge aufgenommen , wenn es um das Ereignis geht. Und ich möchte, dass du innewohnst. Ich möchte, dass du nur, ich will, dass das eindringt. Und im nächsten Vortrag möchte ich, dass wir uns diese Zuhörermethoden etwas genauer ansehen. 4. Inline: In Ordnung, holen wir uns dort ab, wo wir aufgehört haben. Denken Sie daran, wir sprachen über, äh, Adern und wir mussten die beiden wichtigsten Dinge verstehen, um Moskauer Ereignisse zu ermöglichen , und das waren Event-Zuhörer und Event-Handler. Im Moment möchte ich, dass wir uns auf den Hörer konzentrieren. Und insbesondere möchte ich mir die verschiedenen Möglichkeiten ansehen, wie wir Zuhörer zu einem Element hinzufügen können. Und um dein Gedächtnis zu jagen. Es gab drei Möglichkeiten, wie wir mit drei verschiedenen Möglichkeiten Zuhörer zu Elementen hinzufügen konnten. Inline-Ereignis-Listener in Zeileneigenschaften und Ereignis-Listener. Seltsam, es ist nicht sehr intuitiv, aber ich möchte, dass wir jeden besprechen. Und dabei haben Sie ein viel intuitiveres Gefühl, wie sie funktionieren. Also ist ich Gast kein besserer Ort, um dann mit der allerersten Methode, Inline-Ereignis-Listener, zu beginnen . Nun, was ich möchte, dass wir annehmen, dass wir eine Schaltfläche auf unserer Seite haben und wenn auf diese Schaltfläche geklickt wird, ist alles, was wir in tun gegangen sind, Alarmbereitschaft, Boom, für den Benutzer. Eine sehr einfache Seite. Nichts Schickes. Also, wie würden wir das dann schreiben? Zunächst einmal brauchen wir unser HTML. Unser HTML besteht aus einem Button-Element. Innerhalb des Button-Elements geschieht dies, wo Magie geschieht. Wie Sie sehen können, schreiben wir onclick, wir weisen das einer Funktion namens Boom zu. Mach dir keine Sorgen darüber, wie das alles funktioniert und wo wir das onclick bekommen. Moment erkennen Sie nur, dass dieses onclick-Ereignis oder das onclick-Wort uns von der DOM-API zur Verfügung gestellt wird. Wir weisen es dann dem Wert von Boom zu. Und das Brennen in unserem Fall wird JavaScript sein. Es wird eine JavaScript-Funktion sein, die wir ausführen. Das bedeutet ja, wir müssen JavaScript schreiben. Wir können diese Inline-und Skript-Tags setzen oder es kann in einer externen Datei sein. Aber hier geht's. Wir haben unser JavaScript. Wir definieren eine Funktion namens Boom. Und ja, wir warnen nur Brennen auf dem Bildschirm. Dies meine lieben Studenten ist ein Inline-EventListener. Aber lassen Sie mich Ihnen zeigen, wie es funktioniert. Lassen Sie mich einfach zu unserem Codier-Editor springen und lassen Sie es uns in Aktion sehen. Okay, mal sehen, wie ein Inline-Ereignis-Listener funktioniert. Und in diesem Kurs werden Sie sehen, wie ich Visual Studio-Code viel verwende. Erstens, es ist kostenlos. Zweitens, es ist genial. Und drittens müssen wir einen Texteditor verwenden, und das ist nur der, den ich gewählt habe. Jetzt, wenn ich Visual Studio Code verwende, verwende auch Live Server und möchte Server in seinem sehr grundlegenden Kern, weil es mir erlaubt, meinen Computer als Server auszuführen. Also, was ich tun kann, ist, wenn ich die Dinge im HTML automatisch ändere und den Browser aktualisieren würde. Wenn Sie mehr wissen wollen, fragen Sie mich bitte in Q&A. Ansonsten ist es super, super einfach zu dominant visueller Studio-Code. Schauen Sie sich die Registerkarte „Erweiterungen“ an und laden Sie dann Live Server herunter. Aber genug gesagt, schauen wir uns einen Inline-Ereignis-Listener an und wie es funktioniert. Der Ausgangspunkt ist, unser HTML zu schreiben. Sie können hier sehen, ich habe eine leere Seite. Also lassen Sie uns einfach eine sehr leere HTML-Vorlage aufsetzen. Dann möchte ich ein body-Tag innerhalb eines body-Tags erstellen, lassen Sie uns diese Schaltfläche einfügen. Und natürlich, nennen wir es Click Me. Und was müssen wir tun? Das ist richtig. Wir müssen diese inline EventListener Eigenschaft hinzufügen und es heißt onclick. Auch dies wird uns von der DOM-API gegeben. Das ist kein Wort, das ich gewählt habe. Wir müssen dieses Wort auf Klick verwenden. Wenn wir auf das Click-Ereignis hören wollen, dann müssen wir als nächstes einen Ereignishandler definieren. Es wird jedes Mal aufgerufen, wenn dieses Ereignis gefeuert wird. Und in diesem Fall möchte ich eine Funktion namens Boom definieren, wir haben dies durchgemacht, wir haben dies gesehen. Also gehen wir hin. So HTML. Aber jetzt, wenn wir das speichern und Sie wissen was, lassen Sie mich einfach entfernen, indem Sie auf die Schaltfläche klicken, die wir in der unteren rechten Ecke sehen, das ist von Live Server. Und das erlaubt mir, dies tatsächlich in einem Browserleben anzuzeigen. Klicken Sie auf diese Schaltfläche. Und los geht's. Dies sind Click Me Button, die wir in unserem HTML definiert. Aber wenn ich darauf klicke, passiert nichts, richtig? Und wenn wir dieses Dokument überprüfen, sollten wir eine Art Fehler in der Konsole sehen. Also ja, die Konsole aktualisieren und lassen Sie uns auf die Schaltfläche klicken. Boom, ist nicht definiert. Das macht völlig Sinn, Rechte. Und das ist, warum wir unser JavaScript einschließen müssen , weil wir zwei definiert Boom-Funktion haben. Gehen wir zurück zu unserem Code. Es ist jetzt enthalten Skript-Tags. Und ich weiß, dass es nicht ideal ist, Inline-JavaScript zu haben, aber weißt du was? Dies ist so ein einfaches Beispiel. Es wird gut für unsere Zwecke sein. Alles, was wir jetzt tun müssen, ist eine Funktion namens Bu zu definieren. Natürlich müssen wir die Funktion Schlüsselwort in JavaScript innerhalb definieren einen Funktionsnamen verwenden, der in diesem Fall Boom genannt wird. Und in den geschweiften Klammern können wir das Fleisch unserer Funktion definieren. In diesem Fall wollen wir nur den Boom alarmieren, auf den Bildschirm. Also, wenn wir das speichern, gehen Sie zurück zu unserem Browser. Lassen Sie uns das jetzt entfernen. Und wenn wir auf diesen Knopf klicken, Boom, haben wir diese Warnung. Wie cool war das? Und das ist ein Inline-Ereignis-Listener. Ehrfürchtig. Ich bin sicher, Sie können sehen, wie einfach und intuitiv es tatsächlich ist. Und wenn, Warum wussten Sie, dass dieser Inline-EventListener die früheste Methode zur Registrierung von Ereignishandlern im Web gefunden ist. Ziemlich interessant. Das ist also irgendwie der Ausgangspunkt. Dies war der Einstiegspunkt in Ereignis-Listener. Wie cool. Und es scheint einfach, als Event-Handler-Attribute zu verwenden. Wenn Sie einfach etwas wirklich schnell tun, dass sie schnell unüberschaubar und ineffizient werden. Aber wie auch immer, wir werden später mehr darüber diskutieren. Lassen Sie mich Ihnen keine Spoilerwarnung geben. 5. Inline: Bevor wir weitermachen, wollte ich nur energisch zwischen Event-Listener und Event-Handlern befreien. onclick Eigenschaft ist die schwache Listener Eigenschaft, die in dieser Situation verwendet wird. Es ist im Wesentlichen wie jede andere Eigenschaft, die wir für eine Schaltfläche verwenden würden, wie zum Beispiel Textinhalt oder Stil. Aber in diesem Fall wissen wir, dass es eine spezielle Art von Eigenschaft ist, denn wenn wir es gleich einem Code setzen, wissen wir, dass curdle ausgeführt wird, wenn das Ereignis auf der Schaltfläche ausgelöst wird. Bedenken Sie also, dass onclick der Zuhörer ist. Dieser Boom ist natürlich der eigentliche Ereignishandler. Okay, okay, du hast uns, lass uns weitermachen. Wir haben in Zeile Ereignis-Listener gesehen, es ist jetzt Zeit, in Linieneigenschaften zu betrachten. Und wieder mit Inland-Eigenschaften, werden wir unser HTML brauchen und wir werden JavaScript brauchen. Aber wie Sie sehen werden, ist unser Code etwas anders geschrieben. Mit dem HTML haben wir buchstäblich nur ein Button-Element. Wie einfach und intuitiv ist, dass wir keinen zusätzlichen Code haben. Es ist nicht so chaotisch, weil wir gerade ein Tastenelement mit Click Me haben, Geschmack zwischen den Tags, etwas Unschärfe. Ich werde JavaScript muss dann ein bisschen komplizierter sein, aber zumindest das zusammen und an einem Ort. Also das erste, was wir tun müssen, und wir haben das in Teil 1 unserer Serie gesehen. Wir wissen das. Das erste, was ist, dass wir diese Schaltfläche greifen müssen und hier beginnen wir mit dem Dokument, der Standard-Webseite. Wir greifen auf eine Eigenschaft namens QuerySelector. Und natürlich greifen wir Knopf hoch. Jetzt in unserem JavaScript können wir eine Inline-Eigenschaft namens hinzufügen, Sie haben es beim Klicken erraten. Und denken Sie daran, dass in Zeileneigenschaften sehr speziell, denn wenn dieses Ereignis ausgelöst wird, wird automatisch der Code ausgeführt, dem wir diese Eigenschaft zuweisen. Ja, wir weisen den Code-Alarm zu. Boom, Schauen wir es uns in unserem Codierungs-Editor an. Jetzt wollen wir uns in Linieneigenschaften anschauen und wie sie funktionieren. Lassen Sie uns also unseren Code aus dem vorherigen Beispiel hier löschen. Und fangen wir einfach mit unserem Knopf an. Und natürlich ist unser HTML jetzt noch einfacher, oder? Wir haben einen Bus und gepoolt klicken Sie mich. Aber an diesem Punkt haben wir keinen Listener, keinen Ereignis-Listener an dieses Element jede Nacht angehängt . Und deshalb bekommt unser JavaScript ein bisschen komplizierter Impfstoffe. Aber dann ist zumindest unser ganzer Code in einem Block, der nicht zwischen HTML und dem JavaScript aufgeteilt ist. Also erster Schritt besteht darin, unser Skript-Tag zu erstellen, wie wir im Beispiel gesehen haben. Und steil. Eins. Lesen Sie Ihre Elemente. Wir wollen nach oben Knopf greifen, weil das ist, was wir wollen, um zu befestigen. Nennen wir es einfach Button btn. Und natürlich sind wir mit dem aus Teil 1 sehr vertraut. Wir müssen in unserem Dokumentobjekt beginnen. Haben wir nicht. Xy ist eine Eigenschaft namens QuerySelector. Auch wir können es anders machen, ist dies die Art und Weise, die ich verwenden möchte , und wir wollen jemanden Tiere sehen. Also gehen wir hin. Wir sind tatsächlich weg. Zweiter Schritt. Erinnerst du dich? Lasst uns schreiben. Wir müssen die Adern und Code hinzufügen, um auszuführen. Es ist also ziemlich einfach. Wir greifen einfach unsere Schaltfläche hinein, wollen Eigenschaft zu allen hinzufügen onclick, nicht wahr? Und wieder, dieses onclick Wort wird uns von der DOM-API gegeben und bleibt. Aber was passiert, wenn dieses Click-Ereignis ausgelöst wird? Der Code, den wir diese onclick Eigenschaft zuweisen, wird automatisch ausgeführt. Das ist es, was wir jetzt tun müssen. Wir müssen es einen Codeblock unterschreiben. Hier. Ich werde die neue Ära benutzen. Wenn Sie nicht wissen, was das ist, sollten Sie nicht betonen. Ich habe dich abgedeckt. Ich habe einen ganzen Kurs über JavaScript gemacht. Wir reden über solche Sachen. Es ist eigentlich die JavaScript komplette Oma Kreise genannt, Frieden. Du kannst es nicht lassen, wenn du es schon weißt. Lasst uns weitermachen. Los geht's. Also gehen wir hin. Und natürlich, in diesen geschweiften Klammern ist, wo das Rindfleisch, das Herz unseres Codes gehört. Und ja, ich kenne Erdenfälle nicht sehr beefy, denn alles, was wir tun, ist, dass wir Segen auf dem Bildschirm alarmieren. Haben Sie es also? Dies ist eine Inline-Eigenschaft. Und es wird eine Inline-Eigenschaft genannt, weil wir auf diese Weise darüber nachdenken werden. Unser HTML ist nur Standard. Wir tun nichts Besonderes. In unserem JavaScript. Wir fügen diese Inline-Eigenschaft namens onclick hinzu, und sie muss nicht immer aufgeklickt werden. Ihre ganze Fülle von Dingen, die wir hier hinzufügen können. Wir schauen uns nur das onclick-Ereignis an. Wir müssen das als Eigenschaft zu unserer Schaltfläche hinzufügen. Und dann definieren wir natürlich den Code, der ausgeführt wird. Wir haben VTE trotz vernetzt. Wenn wir zu unserem Browser zurückkehren, aktualisieren, klicken Sie auf diese Schaltfläche, und da gehen wir. Bombenmission abgeschlossen. 6. Die The: Gut gemacht in der Nähe von Helium, kommen auf dem Weg, wir haben gerade in Linie Eigenschaften gesehen, Hoffnung wird immer intuitiver und ich hoffe, Sie haben Spaß. Also gehen wir hin. Wir haben uns Inline-Ereignis-Listener angesehen. Wir haben uns Inline-Eigenschaften angesehen. Das dritte und letzte, was wir besprechen müssen, sind jetzt Ereignis-Listener. Auch hier brauchen wir HTML und JavaScript. Wie HTML sehr einfach sein kann, genau wie wenn wir in Zeileneigenschaften verwendet haben. Und genau wie, wenn wir uns in Linieneigenschaften angesehen haben, müssen wir all unsere Magie in das JavaScript selbst einbeziehen. Der erste Schritt ist, dass wir den Knopf greifen müssen. Wir wissen schon, wie man das macht. Ich werde nur einen Abfrage-Selektor verwenden, um dieses Muster zu passen. Es ist jetzt haben wir das, aber ein Ende JavaScript, was ich jetzt tun möchte, ist, dass ich einen Ereignis-Listener verwenden möchte. Also, was wir tun, ist, dass wir auf unsere Schaltfläche zugreifen und wir fügen diese Eigenschaft namens Add Event Listener. Auch dies ist ein Schlüsselwort, das uns von der DOM-API zur Verfügung gestellt wird. Es braucht zwei Argumente und wir werden später noch viel genauer darauf eingehen. Mach dir keine Sorgen, erkenne einfach, dass zwei Argumente nötig sind. Das erste Argument ist, was das Ereignis ist, auf das wir hören wollen, und das zweite Argument ist der Ereignishandler. Hier wollen wir auf das Click-Ereignis hören und wir wollen einen Ereignishandler namens boom ausführen. Mit anderen Worten, wir wollen eine Funktion namens Boom definieren und Schulden ausführen, was der letzte Schritt ist. Wir definieren eine Funktion namens Boom, die ausgeführt wird, wenn dieses Ereignis ausgelöst wird. Diese Methode, addEventListener, diese dritte Lösung hat einige Vorteile. Erstens ist es der neueste Standard, der die Zuweisung oder mehr als eine Funktion als Ereignis-Listener zu einem Ereignis ermöglicht . Das ist wirklich das coole Ding daran. Und natürlich kommt es auch mit einer Fülle anderer nützlicher Optionen. Nochmals, mach dir noch keine Sorgen um das Detail. Wir schauen nur auf die hohe Ebene hier, Lassen Sie uns zum Codierungs-Editor springen und sehen, wie das in Aktion funktioniert. Wir sind fast, fast fertig erfreulich und sie tun es, so gut. Jetzt werden wir über die neuere Methode sprechen, und das ist die addEventListener Methode. Wie funktioniert das? Nun, wir fangen an, löschen einfach alles. Wir beginnen für diese Schaltfläche, dass Klicken Sie auf mich. Wieder. Unser HTML ist sehr, sehr sauber. Es ist nicht chaotisch. Und alles, was wir jetzt tun, muss in JavaScript geschrieben werden, was man argumentieren könnte, macht das JavaScript komplizierter. Gegenargument dazu ist, dass wenigstens alles an einem Ort ist. So macht es Ihren Code viel wartbarer. Sobald Ihre Website beginnt immer komplexer zu werden, hoffe, dass es Sinn macht. Aber schauen wir uns ein Beispiel an. Schritt 1 ist was? Das ist richtig. Es ist das gleiche wie die vorherige Methode. Wir müssen das Element finden, an das wir einen Ereignis-Listener anhängen möchten. In diesem Fall ist es der Taktstock. Suchen Sie also die Elemente, denen wir einen Ereignis-Listener hinzufügen möchten. Und ja, eingetragen setzen Sie es in eine Variable namens Schaltfläche. Natürlich greifen wir auf unser Dokument zu, wir greifen auf die Eigenschaft namens QuerySelector mit auf das Dokument zu und wir greifen unsere Schaltfläche. Also, wenn auch eine gute, Jetzt haben wir unseren Knopf. Weißt du, wie das funktioniert, während was dann der nächste Schritt ist? Der nächste Schritt ist, dass wir diese Methode hinzufügen müssen, fügen Sie Ereignis-Listener zu dieser Schaltfläche. Stick, um den Add Event Listener zu unserer Schaltfläche hinzuzufügen. Also alles, was wir dafür tun müssen, wenn wir auf unsere Schaltfläche zugreifen. Wir fügen dann diese Add-Ereignis-Listener-Eigenschaft zu unserer Schaltfläche hinzu. Und diese addEventListener Eigenschaft ist eine neuere Methode. Es ist großartig. Es ist wirklich, wirklich gut und Sie werden später in diesem Kurs sehen, warum. Und wie ich bereits erwähnt habe, braucht es zwei Argumente. Das erste Argument ist das Ereignis, auf das wir hören möchten, das Klick hat. Und das zweite Element oder das zweite Argument ist die Funktion, die wir ausführen möchten, die wir in diesem Fall einfach Boom nennen, was uns auf den dritten Schritt bringt. Und das ist, um diese Boom-Funktion zu definieren. Schritt drei führt Fein. Auslegerfunktion. Und los geht's. Lassen Sie uns einfach das Funktionsschlüsselwort verwenden, das uns von JavaScript gegeben wird. Wir definieren dann eine Funktion namens Boom. Und natürlich unser Boom, das wird nur ein langweiliger Boom-Alarm. Da gehen wir. Und wenn wir das speichern und wir gehen zu unserem Browser und wir klicken auf diesen Button. Boom, fertig und bestäubt. 7. Zusammenfassung: Wen du hast, um eine unglaubliche Menge Walden zu haben. Also haben wir uns die Inline-Abenteuerlichkeit in Linieneigenschaften angesehen und jetzt haben wir gerade Ereignis-Listener in Aktion gesehen. Aber die eine Sache, die ich hier darauf hinweisen möchte, ist, dass, egal welche Methode wir verwendet haben, dass Sie überhaupt drei genau das gleiche Ergebnis produzieren. Also, wenn es um sehr einfache Beispiele wie das geht, das wir jetzt verwenden, wo es nur ein einfaches Schaltflächenklick-Ereignis ist. Das spielt wirklich keine Rolle, welche Methode Sie verwenden. Weißt du, diese Dinge haben nur aufgehört, wirklich wichtig zu werden, wenn du aufhörst zu mobbing. Eine viel kompliziertere Wissenschaft. Aber wie auch immer, Genug gesagt, Sie verstehen, sind alle drei Arbeiten, die wir jetzt diskutieren werden diese Methoden im Detail, wie wir gehen weiter. Und wenn Sie so etwas wie ich sind, jucken Sie, sich konkreter und solider Beispiele zu machen. Und vertrau mir, wir werden dort hängen Namen hängen. Wir werden in diesem Kurs in coole, coole Dinge geraten. Wir sehen uns in der nächsten Vorlesung. 8. Inline Event Lister – detaillierte Übersicht: Bevor wir anfangen, weiter fortgeschritten zu werden, möchte ich jetzt nur noch ein bisschen genauer zusammenfassen. Jede der drei Methoden, die wir gerade besprochen haben, wie Ereignis-Listener zu einem Element hinzuzufügen. Und der allererste, den wir besprochen haben, war dieser Inline-Ereignis-Listener. Und wie Sie wissen, ist dies der einfachste Weg. Es ist der einfachste Weg, um Ereignisse zu verstehen. Aber wie Sie in Kürze sehen werden, sollten sie im Allgemeinen nicht über Test- und Bildungszwecke hinaus verwendet werden, aber es ist ein guter Ausgangspunkt, und deshalb haben wir es uns angesehen. Und Sie erinnern sich an die Syntax, erinnern Sie sich härter Schmutz, bösartig, kühlen Sie dieses Beispiel hier einer Taste. Dies ist unser HTML und wir wissen, dass ein Inline-Ereignis-Listener ein bisschen chaotischer ist. Es ist nicht nur gerade HTML wie folgt, oder? Wir müssen ein Attribut hinzufügen, wir müssen eine Eigenschaft zu dieser Schaltfläche hinzufügen. Und in diesem Beispiel, nehmen wir an, wir wollen auf das Click-Ereignis hören . Wie würden wir es tun? Nun, wie ich bin sicher, dass Sie erraten haben, und wie Sie sich erinnern, müssen wir diesen Eigenschaftswert namens onclick zu dieser Schaltfläche hinzufügen. Und wie ich bereits erwähnt habe, ist dies onclick ein DOM-API-Schlüsselwort. Wir müssen diese spezifische Rechtschreibung und damit Wort verwenden. Wenn wir es falsch schreiben, wird es nicht funktionieren. Also fügen wir dieses Attribut zu der Schaltfläche hinzu. Was machen wir denn? Nun, dann müssen wir ihm einen Wert zuweisen, oder? Und das tun wir mit dem Gleichheitszeichen. Und das letzte, was wir tun müssen, ist, dass wir die Funktion definieren müssen, die aufgerufen wird, wenn dieses onclick-Ereignis ausgelöst wird. Und in unserem Beispiel haben wir eine Funktion namens Boom definiert. Und wir hatten diese Funktion in einem separaten Skript definiert , dass wir kein Skript haben müssen. In der Tat können wir unser JavaScript auch direkt in Zeile schreiben. Lassen Sie uns zum Beispiel nur Hallo auf den Bildschirm aufmerksam machen. Da haben wir es. Wir haben jetzt einen gültigen Inline-EventListener auf dem Bildschirm. Und wie Sie sehen können, ist es irgendwie intuitiv in der Wirtschaft, da wir wissen, dass diese Alert-Funktion automatisch jedes Mal ausgeführt wird , wenn ein Klick-Ereignis auf diesem Muster ausgelöst wird. Um zusammenzufassen, schreiben wir unseren Klick-Listener, AKA on click. Und in diesem Fall schreiben wir auch unseren Handler AKA, die Alert-Funktion inline innerhalb unserer HTML-Datei. Alles ist gut und gut, aber diese Methode ist nicht großartig. Nun, warum ist es nicht großartig? Wie gesagt, könnte es einfach erscheinen, ein Event Handler-Attribut zu verwenden , wenn Sie nur etwas wirklich schnell tun, dass es schnell unüberschaubar, ineffizient und nicht suchmaschinenfreundlich werden kann . Im Allgemeinen ist es keine gute Idee, Ihr HTML und JavaScript zu mischen , da es schwer zu übergeben wird. Ihr JavaScript an einem Ort zu halten, ist ein viel besserer Ansatz. Und wenn es sich in einer separaten Datei befindet, können Sie auf mehrere HTML-Dokumente anwenden, sogar in einer einzigen Datei, Inline-Ereignishandler auf keine gute Idee. Zum Beispiel wäre eine Schaltfläche in Ordnung. Aber was passiert, wenn du 100 Knöpfe hattest? Sie müssten 100 Attribute zu einer Datei hinzufügen. Es würde sich schnell in einen Wartungsalptraum verwandeln. Und nur für den Fall, dass du meine Stimme noch nicht satt hast, möchte ich diesen Punkt noch einmal nach Hause fahren. Sie können einen Inline-Ereignis-Listener mit dem Schreiben von Inline-CSS für ein HTML-Element vergleichen. Es ist einfach keine tolle Idee. Es ist viel praktischer, ein separates Stylesheet von Klassen zu pflegen und dann Inline-Stile für jedes Element auf Ihrer Seite zu erstellen. Und in ähnlicher Weise ist es einfach machbar, unser JavaScript in einer völlig separaten Skriptdatei zu pflegen . Dann fügen Sie JavaScript-Ereignishandler und Listener zu jedem Element in unserem HTML-Inline hinzu. Es ergibt einfach keinen Sinn. Ich bin mir sicher, wir haben es. Aber bevor wir mit der Diskussion der nächsten Methode fortfahren, möchte ich, dass wir uns jetzt ein praktisches, cooles, lustiges Beispiel für die Verwendung eines Inline-EventListener ansehen . Und ich weiß, dass es nicht die beste Vorgehensweise ist. Aber vertrau mir, lerne diese Grundlagen und Aliens Punkte. Ich bin jetzt, wir hoffen, dass Sie es sich leisten können. Also sehe ich dich in der nächsten Vorlesung. Nehmen wir an, finden Sie gut Ihren Computer auf, machen Sie sich bereit, mit mir zu programmieren. Siehst du jetzt. 9. Challenge für Inline Event Lister – Intro: Erstes praktisches Beispiel, super, super aufgeregt. Ich habe meinen Kaffee, hält mich am Laufen. Ich liebe es für den neuen. Einfach nett. Es hält mich sowieso da draußen. Sie können auf dem Hintergrund hier des Bildschirms zu sehen, dachte ich, eine sehr einfache Website. In der Tat ist es eine wirklich lustige Website. Und alles, was ich tun möchte, ist, dass ich Farben ändern will und es nicht kann, aber ich möchte unseren Code auf eine sehr praktische Weise aussetzen, außer für eine Sache. Und das ist, dass wir einen Inline-Ereignis-Listener verwenden. Ich weiß, und ich sage immer weiter, dass es nicht der beste Ansatz ist, aber es sind die Grundlagen, die ich überlegen möchte , und Sie müssen die Grundlagen verstehen, bevor wir anfangen, weiter fortgeschritten zu werden. Verstehen Sie auch, warum die Dinge auf eine bestimmte Weise gemacht wurden. Sie verstehen, warum Code in gewisser Weise vorangeschritten ist. Nur wenn du das verstehst, wo es herkam, weißt du, wie es entstanden ist. Das wird also ein wirklich lustiger Vortrag sein. Ich werde das mit dir codieren. Wenn Sie die Art des Setups nicht codieren möchten, Mach dir keine Sorgen, ich werde das in einer separaten Datei zur Verfügung stellen, aber ich ermutige Sie sehr, mit ihm zu codieren. Sobald Sie es codiert haben, wird das der Ausgangspunkt sein. Dann werde ich es Ihnen übergeben und ich möchte, dass Sie versuchen, das JavaScript zu lösen. Ich möchte, dass Sie versuchen, auf das DOM und Ed, diesen Inline-EventListener zuzugreifen. Sie sollten wissen, wie es zu tun war und was wollen wir passieren? Nun, wir haben hier zwei Knöpfe. Die eine Taste auf. Wie wäre es, alles gut zu machen? Und wie du es erraten hast, wird alles blau. Und dann haben wir nur den gleichen Knopf. Aber es stellt sich heraus, dass wir sehr einfaches Beispiel lesen können. Wenn ein Spaß, worauf warten wir? Lassen Sie uns in die nimmt es springen, wie es aufgehört zu schneiden. Und ich werde zuerst diese Seite aufbauen, den vollständigen Code, die Lösung mit Ihnen. Also ermutige ich Sie sehr, mit mir zu programmieren. Wenn Sie nicht wollen, ist das auch in Ordnung und die Vorlage basierte Zuweisung zur Verfügung gestellt, und ich werde Sie auf dem Bild sehen. 10. Challenge für Inline Event: Okay, jetzt fangen wir an. Und wie Sie sehen können, habe ich eine leere Visual Studio-Codedatei vor mir. Ich habe nichts enthalten, also lasst uns die Basis unserer Website ziehen. Öffnen wir diese Ordnerstruktur und lassen Sie uns eine Datei namens index.html erstellen. Wir können es gebrauchen, wir können es jetzt verstecken. Und dann beginnen wir mit einer Basis-HTML-Dateivorlage und einem Titel. Wir können Farben ändern. Ziemlich selbsterklärend ist erklärend ist ein Metall in unserem Körper. Dies ist, dass wir HTML-Sit-ups werden, lassen Sie uns ein H1-Tag. Und natürlich können wir sagen, dass dies eine wirklich lustige Website ist. Geben wir unserem H1-Tag eine ID von Ich weiß nicht, Titel. Okay, bevor ich weiter gehe, Was ist wirklich cool ist, dass wir Live Server verwenden können und wir können sehen, wie er diese Seite im laufenden Betrieb kühn in Echtzeit. Also lasst uns das machen. Los geht's. Also gibt es unsere H1-Bilder, setzen sie in den Aufzug und sie betrachten, wie ist das? Und wir können unseren Code auf der linken Seite und das Ergebnis unseres Codes auf der rechten Seite sehen . Es ist ziemlich praktisch. Es ist jetzt erstellen Sie einen Absatz mit einer ID des ersten Absatzes. Und im Absatz können wir einfach Wall-E sagen. Das Wasser ist ein tolles Haustier. Da gehen wir. Wir können natürlich einen anderen Absatz haben, mit der ID des zweiten Graphen. Und hier drinnen können wir einfach ein paar Worte schreiben. Vali isst viele Graphen. Speichern Sie das, und Sie können es in unserem Browser aktualisiert sehen. Und dann denken Sie daran, dass wir zwei Knöpfe hatten, oder? Dies wird mit inline EventListener ins Spiel kommen. Also lassen Sie uns das in einem div mit einer Klasse von Wrapper lesen. Und wir können zwei Knöpfe haben. Der erste Knopf kann sagen, wie wäre es, alles blau zu machen? Und der zweite Knopf kann sagen, wie wäre es, alles rot zu machen? Und wenn ich das speichere, sollten wir unsere Buttons in unserem Browser haben. Da gehen wir. Lassen Sie das Styling schrecklich aussieht. Also lassen Sie uns nur der Vollständigkeit willen, Edit Style Table in unserem Head Abschnitt. Und es ist nur ein bisschen aufpeppen. Ich weiß, es wird nicht großartig. Dies ist nicht einige Phantasie Schnickschnack Website, aber lassen Sie uns nur verbessern es ein wenig. Das erste, was wir tun können, ist, dass wir alles auf das Zentrum ausrichten können. So können wir unser H1 und unseren Absatz nehmen und wir können einfach die Linie in die Mitte nehmen. Da gehen wir. Aufgeführt beginnend zu kommen, richtig. Lasst uns jetzt unsere Schaltflächen starten. Erstens können wir sie als Blöcke anzeigen. Jede Taste ist also ein eigener Block. Lassen Sie uns etwas Marge hinzufügen. Es fängt schon an, besser auszusehen. Und das nächste, was ich jetzt tun möchte, ist, dass ich diesen Knöpfen zusammen mit unserem Geschmack scheinen möchte. Also können wir einfach an den Rand gehen. Links ist Wasser. Und natürlich können wir gehen Margenrechte wird geändert. Und das sollte alles scheinen. Cool. Hat Bashar gelöscht? Ich denke, das ist gut genug, um loszulegen, oder? Also lassen Sie mich einfach diesen Texteditor hier vergrößern. Also, hier geht's. Hier ist unser Basisdokument, unser Skelett. Ich möchte das Video an dieser Stelle direkt dort pausieren. Ich möchte, dass du über zwei Dinge nachdenkst. Erstens, ich möchte, dass Sie darüber nachdenken, wie Sie jedem dieser Balance einen Inline-Ereignis-Listener hinzufügen können . Und in, ich möchte, dass Sie darüber nachdenken, wie wir unser Enzym schreiben sollen. Und ich möchte, dass Sie eine separate JavaScript-Datei einfügen , um Ihre Handzettel zu schreiben. Also denken Sie nur darüber nach, wie wir das tun können. Und in der nächsten Vorlesung werde ich die Lösung mit Ihnen durchgehen. Ich zeige dir, wie ich es machen würde. Siehst du jetzt. 11. Challenge für Inline Event Lister – Lösung: Wie bist du gegangen? Ich hoffe, Sie haben es ausprobiert und es spielt keine Rolle, ob Sie es falsch oder richtig verstanden haben. Das Wichtigste ist, dass du es versucht hast, und so lernt man , und dafür bin ich hier, um dir zu helfen, wenn du stecken bleibst. Also lasst uns knacken. Schauen wir uns die Lösung zusammen an. Erstens, lassen Sie mich entfernen, nur damit Sie den Bildschirm in voller Größe sehen können. Da gehen wir. Und es schneidet nicht die Lösung. Also, hier geht's. Wir haben unsere Knöpfe, aber nichts würde passieren, oder? Wenn wir hier zurück zu unserem Browser gehen. Und lasst uns das größer machen. Wenn ich auf diese Schaltfläche klicke, passiert nichts. Es macht Sinn, richtig? Weil wir dem Browser nicht angewiesen haben, etwas zu tun, wenn auf die Schaltfläche geklickt wird. Und deshalb müssen wir unseren Inline-EventListener hinzufügen. Und erinnerst du dich, wie man es macht? Was ist der erste Schritt? Probieren wir es aus. Wir müssen die Attribute zu jeder Schaltfläche hinzufügen. Was ist die Veranstaltung, auf die wir hören wollen? Es heißt onclick, richtig? Obwohl wir dieses onclick-Attribut jetzt haben, wird nichts passieren, weil wir tatsächlich einen Listener angehängt haben, aber wir haben keinen Handler definiert. Wenn wir also wieder auf diese Schaltfläche klicken , wird nichts passieren. Damit wir etwas geschehen können, müssen wir uns und Event-Handler zuweisen. Also lasst uns das machen. Lassen Sie uns ihm einen Ereignishandler in Ja zuweisen, wir könnten all unser JavaScript einschließen, wenn noch dünn, aber wir wollen das nicht tun. Es wird chaotisch. Und wie ich in der vorherigen Vorlesung sagte, möchte ich, dass wir unser JavaScript in einer separaten Datei schreiben. Lassen Sie uns nun eine Funktion ausführen. Und lassen Sie uns diese Funktion nennen, weil wir alles gedreht haben. Dies nennt einfach diese Funktion blau und wir werden diese Funktion ausführen. Auf der zweiten Taste. Wir können genau das Gleiche tun. Wir können einen Klick-Listener hinzufügen. Und in diesem Fall können wir eine Funktion namens lesen ausführen. Sehr einfache Fledermäuse, wenn wir in unseren Browser gehen, okay, Was ich tun will, ist, dass ich dieses Dokument inspizieren und ich will auf die Konsole gehen. Was denkst du, wird passieren, wenn ich auf, sagen wir, wie wäre es mit allem, was blau ist? Was denkst du, wird passieren, wenn ich auf diesen Button klicke? Wir sollten einen Fehler bekommen. Lwe ist nicht definiert, weil wir versuchen, eine JavaScript-Funktion namens blue auszuführen, aber wir haben den Code noch nicht geschrieben, was wir jetzt tun werden. In unserem HTML können wir ein Skript-Tag einschließen. Und natürlich kann unser Skript auf unsere eigene Datei verweisen. Nennen wir es einfach App.js. Und innerhalb unserer Ordnerstruktur können wir eine neue Datei namens app.js erstellen. Es ist wirklich, wirklich einfach und wie wir unser JavaScript einbinden können. Also lassen Sie mich das minimieren, also haben wir einen größeren Bildschirm. Und was ist der erste Schritt? Du machst einen Schritt zurück. Wir haben alle unsere HTML mit dem, was unsere Schaltflächen definiert. Wir haben einen Ereignis-Listener an diese Schaltfläche angehängt. Und jetzt haben wir gesagt, 50 Handler. Wir möchten, dass der Parser eine Funktion namens loop und eine Funktion namens read für diese Schaltfläche ausführen . Das ist, wo wir jetzt sind. Der POS wird zu HTML gelangen. Das wird dieses Ereignis auslösen, wenn der Benutzer klickt. Es wird dann nach dieser Funktion in neuer JavaScript-Datei suchen und wie wir sind. Also, was wollen wir passieren? Nun, es gibt ein paar Möglichkeiten, wie wir diese Lösung erreichen können. Wir können es auf eine sehr schnelle und böse Art und Weise tun. In diesem Fall können wir unseren Körper einer ganzen Seite greifen und den Geschmack eines ganzen Körpers ändern, um alles blau zu lesen. Das ist der faule Ansatz. Und in vielen Fällen, wenn Ihre Seiten sehr pingelig und dynamisch, Sehnsucht und ich will Farben bestimmter Elemente ändern. Was ich tun will, ist, dass ich die Elemente greifen möchte, die wir bewirken wollen. Es wird der erste Schritt in unserem JavaScript sein. Und wenn wir hier zu unserer Indexdatei gehen, wollen wir die H1 auf Blau ändern, und wir wollen diese beiden Absätze in Blau ändern. Das ist alles, was wir tun wollten. Der erste Schritt wird also sein, diese Elemente zu greifen. Der zweite Schritt wird sein, die Attribute dieser Elemente entweder blau oder rot zu ändern . Die Theorie geht so einfach. Also lasst uns in sie stecken bleiben. Der erste Schritt, greifen die Elemente, wollen wir ändern. Und natürlich wollen wir drei Dinge direkt ändern. Also werde ich eine JavaScript-Variable namens title definieren. Wir werden auf das Dokumentobjekt zugreifen. Dieses Dokumentobjekt ist, wie Sie wissen, die Wurzel unserer Webseite und ehrliches Dokument. Wir haben viele Eigenschaften. Der, den ich dieses get-Element nach ID verwenden möchte. Und natürlich haben wir ihm eine ID des Titels gegeben. Dann gehen wir zurück zu unserer Indexseite. Wir können sehen, dass wir dem eine ID des Titels gegeben haben. Unsere Absätze haben dann eine Vorstellung von Absatz 1 und Absatz 2. So können wir hier gehen und wir können jetzt parallel definieren. Wir können die gleiche Funktion verwenden. Aber ja, wir haben den ersten Absatz. Und natürlich können wir das duplizieren. Wir können sagen, dass Eltern zu. Und es wird nicht der erste Absatz sein, es wird der zweite Absatz sein. Heute gehen wir, Wir haben buchstäblich unseren ersten Schritt beendet. Der zweite Schritt besteht nun darin, unsere blauen und roten Funktionen zu definieren. Beginnen wir also mit dem blauen Funktionskleber. Das Fleisch unseres Codes ist innerhalb dieser geschweiften Klammern. Nun möchte ich, dass wir eine Variable namens Farbe definieren. Und wir werden zuweisen, dass der Wert der Überraschung, Überraschung blau, denn das ist die Farbe, die wir alles ändern wollen. Was will ich als Nächstes tun? Wir müssen nun auf unseren Titel und unsere beiden Absätze zugreifen und die Farbe in Blau ändern. Es ist wirklich so einfach. Und das ist kein Kurs auf CSS, aber ich gehe davon aus, dass Sie einige Kenntnisse in CSS und HTML haben. Und die vielen Möglichkeiten, um wieder eine Katze zu häuten, werde ich die SEC-Attributmethode verwenden. Das erste Argument dieser Methode ist, was wir beeinflussen wollen oder was wir wollen darauf zugreifen. Und natürlich wollen wir auf das style-Attribut dieses Elements zugreifen. Und natürlich ist das zweite Argument der Wert, den wir aufgeben wollen. In diesem Fall wollen wir die Farbe ändern, keine Sorge. So können wir es so machen. Wir können Farbe gehen. Und natürlich können wir einfach unsere Kovariaten hinzufügen. Los geht's. Das sollte richtig funktionieren? Und wenn wir zu unserem Browser gehen, lassen Sie uns einfach die Konsole löschen und klicken Sie auf diese alles in blauer Taste. Und Boom, das ist eine wirklich lustige Website, aber im Moment haben wir nur die H geändert. Wir haben die beiden Absätze nicht geändert. Also lasst uns das schnell machen. Wir können überschüssiges Paar eins. Wir können sitzen Es ist Attribut wieder der Stil. Und jetzt wollen wir die Farbe ändern. Aber dieses Mal möchte ich Template-Literale verwenden, ist eine neuere Syntax. Und wenn Sie nicht sicher sind, dass diese sind, überprüfen Sie bitte meine JavaScript komplette Großmeister-Kurs. Wenn du weißt, was sie sind, großartig, wirst du folgen können. Also hier wollen wir unser Farbattribut beeinflussen und wir wollen, dass auf den Wert gesetzt werden. Hallo. Da gehen wir. Und wenn ich das speichern und zurück zu unserem Browser gehen, Lassen Sie uns auf diese Schaltfläche klicken. Wir haben das H1 buchstäblich geändert und den ersten Absatz geändert. Ja. Und natürlich wird dies denken, und das ändert den Absatz 2. Also werden wir tun, ist diese Zeile zu duplizieren und sie zu übergeordnetem ändern, um gesetzt zu lassen. Und wenn wir zurück zu unserem Browser, klicken Sie auf die Schaltfläche, alles wird zu blau geändert, wie wir erwarten würden, Mission abgeschlossen alle Diana, Dies ist so genial. Also, jetzt gehen wir zurück und lassen Sie uns dasselbe für Rot tun. In der Tat müssen wir nur diese Funktion kopieren, diese Funktion einfügen und blau ändern. Um zu lesen. Es ist alles, was wir tun müssen. N wie dieses Finale, das ist alles plötzlich musst du mir zustimmen. Und es ist so einfach, wenn Sie den Hund loslassen, der diese Dinge tut. Und eine Sache, die ich erwähnen möchte, ist, dass wir die Funktionen wie diese duplizieren und zwei Variablen definieren können , die Farbe innerhalb jeder Funktion genannt werden, weil sie einen lokalen Bereich oder Blockbereich hatten. Wenn Sie nicht sicher sind, was ich meine, wieder, überprüfen Sie bitte meine JavaScript komplette Großmeister-Kurs. Aber es sollte jetzt funktionieren, wir sollten fertig sein. Wenn wir unseren Browser haben, haben wir zwei Tasten. Lassen Sie mich einfach diese Konsole entfernen. Wenn Sie auf das erste der Sache klicken, wird blau, wenn wir auf das Lesen klicken, alles wird rot. Sie würden buchstäblich Janet und es erzählte uns ein paar Minuten hilfreich, wenn wir besser gehen, Code JavaScript-Datei als unsere Indexdatei. Hier ist ein praktisches Beispiel für die Verwendung eines Inline-Ereignis-Listener, um tatsächlich einen Ereignis-Listener an die Schaltfläche, das onclick-Ereignis, anzuhängen. Und dann haben wir auch einen Ereignishandler in einer separaten JavaScript-Datei implementiert , so gut gemacht. Ich bin super, super beeindruckt davon, viel Spaß zu haben. Aber jetzt möchte ich auf die anderen Methoden eingehen, die wir besprochen haben und Beispiele dafür betrachten. Wir sehen uns in der nächsten Vorlesung. 12. Inline – detaillierte Übersicht: In Ordnung, also haben wir Inline-Event-Handler besprochen. Der nächste Schritt ist für uns, den anderen Typ zu diskutieren, und das wird die Inline-Eigenschaftenmethode genannt. Dies ist eine sehr ähnliche Möglichkeit, einen Listener zu einem Element zum Inline-Ereignis-Listener hinzuzufügen. Außer hier sitzen wir die Eigenschaft eines Elements, indem wir JavaScript verwenden. Anstatt das Attribut in HTML zu verwenden, macht wirtschaftliche Szenen. Das Setup wird also sehr ähnlich sein. Zum Beispiel brauchen wir noch Up-Button HTML-Element, aber jetzt müssen wir nicht mehr die onclick blue Funktion, zum Beispiel, in das HTML-Mockup selbst. Aber wir müssen immer noch einen Handler definieren, nicht wahr? Das eigentliche Handzettel, diese Funktion. Es wird auch ziemlich ähnlich bleiben. Aber jetzt müssen wir nur auf das Button-Element in JavaScript zugreifen , bevor wir die Funktion in JavaScript schreiben. Der erste Schritt wird also sein, als zwei Achsen zu haben. Diese Schaltfläche in JavaScript, ja, wir können einfach die Abfrage verwenden, wählen Sie eine Schaltfläche. Natürlich können wir gut darauf zugreifen. ID, Klassenname, Tag, Name, Zitrusfrüchte, cetera. Ja, wir haben gerade den Abfrage-Selektor verwendet. Lassen Sie mich einfach diese Seite umblättern. Denken Sie daran, unter beiden Ansätzen und durch beide Ansätze sind bedeutungslos. Inline-Eigenschaftenansatz im Vergleich zu einem Inline-EventListener, den wir in der vorherigen Vorlesung gesehen haben. Und diese beiden Ansätze, die wir schließlich einen Ereignis-Listener anhängen , ist eine Eigenschaft auf unserem HTML-Element. Beide erreichen das Gleiche. Aber die Verwendung einer Inline-Eigenschaft ist etwas besser, als unseren Ereignis-Listener direkt in unsere HTML-Datei zu schreiben. Warum ist es besser? Nun, zumindest jetzt ist Ihr HTML-Mockup sehr billig und wir haben all unser Fleisch in einer JavaScript-Datei. Es ist einfach einfacher, es ist wartungsfähiger. Aber wenn man sagt, dass es immer noch nicht der beste Ansatz ist und es unter einigen der gleichen Hürden leidet. Und eine andere interessante Sache in einer anderen sehr ärgerlichen Sache, die passiert, ist, wenn Sie versuchen mehrere separate Objekteigenschaften auf das gleiche Element zu setzen, wird es dazu führen, dass alle außer dem letzten überschrieben werden. Das kann also ziemlich ärgerlich sein. Fledermäuse, ich schätze, du weißt, was als nächstes DEJ kommt, du, das ist richtig. Ich möchte mir ein anderes wirklich cooles praktisches Beispiel ansehen. Wir sehen uns in der nächsten Vorlesung. 13. Challenge für inline – Intro: In Ordnung, Sie kennen mich, ich liebe praktische Beispiele und das hier macht wirklich, wirklich Spaß. Also schauen wir uns den Bildschirm hinter mir an. Sie können sehen, wir haben gerade einige Lorem Ipsum Text mit einem Knopf, der sagt, Knie drücken und mehr zeigen. War das etwa? Nun, lasst uns Oma Maus. Und lasst uns auf diese Schaltfläche klicken. Sie können ein paar Dinge bemerken. Erstens, wir haben die Kiste erweitert. So können Sie jetzt mehr Text lesen. Und der Text auf der Schaltfläche hat sich nicht geändert, um einen Zusammenbruch von jetzt zu sagen. Ich kann klicken, lassen Sie uns jetzt natürlich unsere Box und das Wort jetzt auf dieser Schaltfläche ändert sich, um darauf zu erweitern. Cooles Beispiel. Und Sie können anfangen zu sehen, dass wir hier weiter fortgeschritten sind. Aber ja, wieder, ich möchte nicht, dass wir zur Verwendung der neuen AddEventListener Methode springen. Ich möchte, dass wir das aufbauen. Sie haben also im vorherigen Test gesehen, wir den Inline-Ereignishandler verwendet haben. Hier möchte ich, dass wir die Inline-Eigenschaftenmethode zum Hinzufügen von Ereignis-Listener verwenden. Und denken Sie daran, beide Ansätze sind sehr ähnlich. Alles, was wir tun, ist das Hinzufügen einer Eigenschaft zu der HTML-Button hier. Aber wir tun es, in diesem Fall verschiedene Wege zu finden, um es über JavaScript zu tun. Das ist also der einleitende Geschmack. Es wird wirklich Spaß machen, ähnlich wie die vorherige. Ich werde unseren Code zusammen aufschreiben. Sehr, sehr gut für dich, um mit mir zu codieren. Aber wieder, Sie müssen nicht die Farbe des Skelettdokuments, HTML-Dokument für Sie als Ressource für die nächste Vorlesung, die bitte, Ich ermutige Sie sehr, mit mir zu programmieren. Und dann werden wir in der nächsten Vorlesung offensichtlich gemeinsam die Lösung durchlaufen. Ich hoffe, Sie haben Spaß könnte sein und bleiben motiviert. Und wir sehen uns in der nächsten Vorlesung. 14. Challenge für inline – Erstelle unseren HTML: Also los geht's. Wieder. Ich beginne mit einer leeren Vorlage hier in Visual Studio-Code. Also lasst uns knacken. Fangen wir an, dies zu programmieren. Gehen Sie einfach in unseren Ordner hier und lassen Sie uns eine Datei namens index.html erstellen. Und natürlich können wir einfach mit einer HTML5-Vorlage beginnen. Der Titel kann Inline-Eigenschaften sein. Lassen Sie uns das loswerden, damit Sie sehen können, was los ist. Und es ist vorher, Lassen Sie uns Live-Server öffnen , nur so können wir mit der Programmierung beginnen und sehen, was wir zur gleichen Zeit tun. Hier gehen wir, in einem wird mich verwickeln, mich einfach loswerden, damit du sehen kannst, was los ist. Audios. Also los geht's. Fangen wir an zu codieren. Jetzt werde ich nur ein div mit einer ID von Inhalten haben weil auf diese Weise unser Inhalt alle gute Praxis sein wird. Und dann möchte ich Absatz-Tags und ich möchte lorem ipsum Text in jedem. Also können wir das einfach machen und Lorem Ipsum können wir retten. Und jetzt können Sie auf einem Bildschirm sehen, wir haben gerade zwei Absätze mit langweiligen alten Lorem Ipsum Text. Nichts Besonderes. Das ist also unser Hauptinhalt. Die andere Sache, die ich tun möchte, ist, dass ich diese kleinen Knopfrechte hinzufügen möchte, aber ich möchte Ihnen nur neue Möglichkeiten zeigen, Dinge in Ihrem Code zu tun. Es gibt nie einen Weg, eine Katze zu häuten. Also hier, anstatt eine Schaltfläche zu verwenden, werde ich nur ein Anker-Tag verwenden. Und ich werde einen Ausweis der Show mehr haben. Lasst uns durch die HREF kommen. Also gehen wir hin. Und das kann mich genau sein und mehr zeigen. Und wenn wir das retten, sieht es so aus, als ob ein Loch langweilig wird, oder? Aber keine Sorge, wir werden es in Kürze stylen. In der Tat, lasst es uns jetzt stylen. Gehen wir mit in unseren Kopfbereich. Und wieder, anstatt CSS inline zu schreiben, was keine gute Idee ist, LET Referenz in externe Datei. Also lassen Sie uns ein Link-Tag hier und unsere Vorhöfe, wenn wir es einfach nennen können, ich weiß nicht, styles.css. Gehen wir hier zu unserer Ordnerstruktur. Und es ist eine intuitive Datei namens styles.css. Also los geht's. Lassen Sie uns das loswerden und lassen Sie uns einfach unsere Seite ein bisschen funky aussehen. Ich will auf unser Körperelement zugreifen. Und lasst uns einfach den Hintergrund für die ganze Seite ändern. Triple E, fehlende Scheinwerfer, weiches Grau. Sieht nett aus. Und dann möchte ich auf die Inhalte zugreifen. Gehen Sie zurück zu unserem HTML. Erinnerst du dich daran? Es ist dieses div-Tag mit der ID des Inhalts. Und das enthält nur bis zu Absätzen. Also in einem Feature, wir stylen unsere beiden Absätze. Das erste, was wir tun können, ist, dass wir die Breite auf 400 Pixel ändern können. Da gehen wir. So können Sie sehen, dass wir es auf eine kleinere Größe komprimiert haben. Und wir können diesen Hintergrund ändern, nur um ihn vom tatsächlichen Hintergrund der verbleibenden Seite zu unterscheiden , um Dreifach-F. Also ist es weiß, es ist schön. Wir können uns natürlich etwas Polsterung geben. Ich will keine Polsterung oben. Lassen Sie uns das entfernen. Ja, das ist besser. Und sollten wir diese Schriftart ändern? Und ich schätze, das können wir. Nehmen wir hier einen Schwan, Gill Sans oder weniger. Ja, komm schon, schön aussehend, funky. Du musst zugeben, was können wir sonst noch tun? Wir können die Farbe des tatsächlichen Textes ändern. Sie können sehen, dass ich sehr einfache Zahlen verwende. Ja. Es ist wie ein schönes dunkleres Grau. Was wir jetzt tun können, ist, dass ich alles, was dieses ganze Content-Div braucht, in die Mitte unserer Seite verschieben möchte. Also natürlich können wir Marge Knie verwenden und die linke und rechte können verändert werden, um das Ding in die Mitte zu bringen. Da gehen wir, es sieht gut aus. Und jetzt möchte ich eine maximale Höhe von 100 hinzufügen. Und entweder sind sie nur Zufallszahl ein 148 Pixel. Da gehen wir. Und Überlauf kann versteckt werden. Da gehen wir. So können Sie sehen, dass unsere Takes jetzt abgeschnitten wird, was Sinn ergibt, richtig? Der einzige Zweck der Übung. Und wie ich bereits erwähnt habe, ist dies kein Kurs auf CSS, okay? Aber ich möchte hier nur eine Übergangs-CSS-Eigenschaft hinzufügen. Suche Art eines glatten Übergangs, wenn er bei maximaler Höhe geöffnet wird. Okay, also möchte ich einen Übergang hinzufügen. Ich möchte natürlich, dass dies zutrifft, wenn wir die max height Eigenschaft beeinflussen. Und sagen wir nur 0,7 Sekunden. Also gehen wir hin. Das ist unser cooles Div. Jetzt möchte ich nur diesen Anker-Tag stylen, den wir dort haben, aber stylen Sie das und lassen Sie es wie einen Knopf aussehen. Erstens, wie greifen wir darauf zu? Nun, wenn wir zu unserer Indexseite gehen oder nennen wir es, wir hatten eine ID von Show more. Gehen wir zu Stilen. Und schauen wir uns das hier an. Zeigen Sie mehr. Da gehen wir. Lassen Sie uns zuerst diesen Hintergrund ändern, um 36, a2 und 167 zu sagen. Das ist eine schöne blaue Farbe. Ich mag es. Und dann können wir diesen Text in weiß ändern, weil wir erwischt haben, dass ich ihn jetzt kaum lesen kann. Da gehen wir. Das sieht besser aus. Es hat die Schriftfamilie so geändert, dass sie mit der obigen übereinstimmt. Schriftfamilie. Ja, das sollte besser sein. Jetzt können wir natürlich Polsterung hinzufügen, damit es einfach besser aussieht. Wir können auch eine Breite von 100 und 40 Pixel definieren. Lasst uns die Schrift ein bisschen größer machen. So können wir 18 Pixel gehen. Und nur um pedantisch zu sein, möchte ich den Text innerhalb des Knopfes in der Mitte setzen. Also lasst uns einfach eine Linie zum siento nehmen. Sie werden wahrscheinlich keinen großen Unterschied bemerken. Ja, ich hatte nicht viel anderes bemerkt. Und dann lassen Sie uns Ränder hinzufügen, um dieses Ding in die Mitte zu bringen. Also möchte ich auch einen Rand nach oben hinzufügen. Und dann lassen Sie uns das natürlich sehen. Und dann der Cursor, ich wollte darauf hinweisen, hmm, warum sintert sich dieser Knopf nicht? Weißt du, was ich nicht getan habe? Ich habe dies nicht als Blockelement definiert. Okay, wir müssen Block anzeigen. Und das sollte funktionieren. Wieder. Zum Glück habe ich mich dort für eine Sekunde Sorgen gemacht. Okay, cool. Also hier ist unsere Skelett-Crew. Während das sehr, sehr cool war , haben wir unser Setup. Aber offensichtlich, was passiert jetzt, wenn ich auf diese Schaltfläche klicke, Anker-Tag? Nichts passiert. Und das ist es, was ich will, dass du jetzt versuchst, zu lösen. Und so denken Sie daran, was wir tun wollen, Inline-Eigenschaften verwenden zu wollen, aka eigentlich alles in unsere JavaScript-Datei zu setzen und fügen Sie eine Eigenschaft namens onclick zu diesem Anker-Tag in unserem JavaScript hinzu. Und dann wollen wir natürlich alles öffnen und das alles. Also gib es mal. Wenn du die Antwort nicht kennst, mach dir keine Sorgen, dafür bin ich hier. Und im nächsten Abschnitt, lasst uns etwas Spaß haben und lasst uns die Lösung machen, um es zu bekommen. Ich kann nicht warten. 15. Challenge für inline – Lösung: Okay, also hier sind wir. Hier haben wir letztes Mal aufgehört. Und wenn du siehst, ob ich diesen Knopf drücke, passiert nichts. Was sind also die Schritte, die wir ergreifen müssen, um dies zum Laufen zu bringen? Nun, erstens müssen wir von unserem DOM zu Dingen kommen. Wir müssen dieses Content-div greifen. Warum brauchen wir, um ihre Inhalte zu greifen? Div wird sich jetzt daran erinnern, dass wir seine Höhe eingeschränkt haben. Wir haben es tatsächlich abgeschnitten. Wenn wir dieses Element inspizieren. Und wir schauen uns dieses div selbst an. Sie können in der unteren rechten Ecke sehen, dass wir die Höhe dieses div auf 148 Pixel beschränkt haben . Und ja, wir haben Padding von 20 bearbeitet, was uns ein bisschen HDL gibt, was wild darüber schwebt. Wir können sehen, dass die Höhe ein 168 ist, es ist ein 148 plus die Polsterung. Und wenn wir zu unserem Code zurückkehren, ist das genau das, was wir in diesem Inhalt angegeben haben. Div, maximale Höhe, ein 148 Pixel und Polsterung von 20. Und wenn wir zu unserem HTML gehen, wird diese Idee von Inhalten in unser div-Tag eingewickelt. Und wir haben gerade bei hohen Temperaturen eingeschränkt. Also, wenn wir hierher zurückgehen, ist das das erste, was wir tun müssen. Wir müssen diese Content-Box greifen und seine Höhe ändern, wenn die Schaltfläche angeklickt wird. Was mich zu der zweiten Sache bringt, die wir brauchen, um ein Netz zu bekommen, ist dieser Knopf. Und wir müssen auf diese Schaltfläche aus zwei Gründen zugreifen. Erstens, wenn wir auf diese Schaltfläche klicken, möchten wir das Styling dieses div ändern. Und zwei, wir wollen auch den Text dieser Schaltfläche schmutzig ändern. Also fängt an, Sinn zu machen. Ich hoffe es. Aber wenn es nicht tut, mach dir keine Sorgen, wir werden uns jetzt darum kümmern. Also, was sollten wir als Erstes tun? Nun, das erste, was ich tun will, ist, wenn wir auf diesen Button klicken, ging ich, um eine bestimmte Klausel anzuwenden, dieses ganze div. Und dann muss Klausel es öffnen. Es muss diese maximale Höhe größer machen. Das erste, was ich in unserem Texteditor hier tun möchte , ist, dass ich zu unseren Stilen gehen möchte und eine 12 einen Stil definieren , der nur angewendet wird, wenn die Box geschlossen ist und wir klicken, um sie zu öffnen. Irgendwie ergibt es Sinn. Mach dir keine Sorgen, wenn es nicht genau davon abhängt, was ich kurz meine. Alles, was ich tun möchte, ist, dass ich unsere Content-Box packen möchte, denn das ist, was wir beeinflussen wollen. Und wir werden diese Klasse hinzufügen, und ich werde es vorerst eine offene Klasse nennen. Und wenn ihre Klassen aktiviert sind, was wir tun wollen, ist, dass wir die maximale Höhe Armee halten wollen. Und wir wollen, dass diese Box von 148 Pixeln auf viel größer, viel höher wächst. Deshalb verwende ich nur eine beliebige Zahl, 1000 Pixel. Und natürlich wollte ich ein schöner reibungsloser Übergang sein. Wenn die Eigenschaft max height geändert wird, wir an, es dauert zwei Sekunden. Wie sieht das aus? Also haben wir alle unsere CSS. Jetzt müssen wir tatsächlich unsere Event-Listener hinzufügen und wir tun das mit JavaScript. Alles, was wir hier tun müssen, ist, dass wir ein Skript-Tag hinzufügen müssen. Und wieder, das nenne es einfach eine App ab.js Datei. Wir können hier auf unsere Ordnerstruktur zugreifen. Sie können sehen, dass ich hier nur zwei Dateien habe, Index und CSS. Wir müssen jetzt tun, ist einfach unsere app.js Datei hinzufügen und ich schließe das. Und wie können wir anfangen, das Rindfleisch das Herz unserer Website zu schreiben. Und Schritt 1, um sich zu erinnern, was es war. Das ist richtig. Wir müssen das div-Element und den Taktstock packen. Also werde ich eine Variable in JavaScript-Aufrufen definieren. Ich weiß es nicht, nennen wir es Inhalte, weil dort unsere Hauptinhalte sitzen und es hat eine ID von Inhalten. Wir greifen auf unser Dokumentobjekt zu. Auf diesem Objekt greifen wir auf seine Eigenschaft zu, erhalten Element nach ID. Und natürlich wurde die ID, die wir angegeben haben, Inhalt genannt. Also gehen wir hin. Da ist unser Inhalt. Jetzt möchte ich unseren Knopf greifen und ich weiß, dass wir nicht wirklich schnelle End Button-Elemente. Wir haben es in einen Anker-Tag eingewickelt. Ich habe das getan, nur um dir verschiedene Möglichkeiten zu zeigen, dasselbe zu tun. Aber in diesem Fall möchte ich es immer noch einen Knopf nennen. Wieder. Wir greifen auf unser Dokument zu. Wir greifen auf diese Eigenschaft zu, erhalten Element nach ID. Und wie nennen wir es nochmal. Gehen wir zu unserem HTML. Die Idee, mehr zu zeigen. Hier haben wir IoT Show. Heute gehen wir, können wir uns unsere beiden Sachen holen. Und meine lieben Freunde, das ist das Herz davon Schritt. Und das bedeutet, ein Ereignis, einen Listener und einen Handler über den Inline-Eigenschaftenansatz hinzuzufügen . Denken Sie daran, wie es geht. Erstens, wollen wir unseren Event-Listener auf die Schaltfläche hinzufügen? Wir möchten, dass jedes Mal, wenn ein Benutzer auf diese Schaltfläche klickt, eine Vereinbarung ausgelöst wird. Ausgangspunkt ist der Zugriff auf unsere Schaltfläche. Jetzt haben wir unseren Knopf. Was wir jetzt tun müssen, ist, dass wir dies in Nicht-Eigentum hinzufügen müssen. Der Ereignis-Listener. Wie machen wir das? Wir werden Punktnotation verwenden und wir möchten einen Klick-Listener auf diese Schaltfläche hinzufügen, keine Sorge. Und dann werde ich die neue Pfeilsyntax verwenden, um eine Funktion zu definieren, die automatisch ausgelöst wird, wenn das Ereignis eingestellt wird. Also ist das ganze Fleisch unseres Codes innerhalb dieses Blocks. Zu diesem Zeitpunkt wurde die Schaltfläche überprüft. Und jetzt haben wir irgendwie zwei Gabeln im Straßenjahr. Die Box ist bereits geöffnet und die Schaltflächen wurden bereits beschnitten und Sie nehmen es erneut, um es zu reduzieren. Alle. Das Feld ist bereits ausgeblendet, und Sie klicken zum ersten Mal auf die Schaltfläche, um es zu erweitern. Und wann immer Sie diese Gabeln auf der Straße bekommen, wann immer Sie diese Art der Kisten öffnen oder wenn die Kisten zusammengebrochen sind. Das ist richtig, du hast es erraten. Wir müssen die if-Anweisungen verwenden. Wie schreiben wir diese if-Anweisungen? Alles gibt es ein paar Möglichkeiten, es zu tun. Wie immer, sagen Sie immer die vielen Möglichkeiten, um eine Katze zu häuten, wenn es um die Programmierung geht. Ich werde es nur sehr einfach halten. Und ich gehe jetzt davon aus, dass die Box geschlossen ist, dass die Tasten nie verbunden waren. Und wenn die Schaltfläche nie geklickt wurde, wissen wir, dass der Klassenname von open nicht der sein würde. Zum Beispiel, wenn wir auf die Indexdatei gehen aus div Tag gefeiert ID des Inhalts hat keine Klasse, oder? Wir haben keine Klasse hinzugefügt. Erinnerst du dich an das Stylesheet Wir haben diese offene Klasse, die die maximale Höhe dieses div ändert. Aber wir haben diese offene Klasse nicht hinzugefügt. Jede Krankenschwester, die wir kennen, ist, dass die Inhaltsdosis geschlossen ist. Sein ClassName wird gleich nichts sein. Es wird leer sein. dann in diesem Fall Was wollen wirdann in diesem Falltun? Nun, wir wollen die Box erweitern. Das macht seitdem, richtig? Und wenn wir die Box erweitern, wie machen wir es? Wir müssen diesen Klassennamen von offen hinzufügen. Alles, was wir tun müssen, ist auf dieses div zuzugreifen. Wir müssen dann auf seine ClassName-Eigenschaft zugreifen, weil wir wollen, dass sie Klassennamen bearbeiten und wir gingen in zuweisen, dass der Klasse von open. Jetzt wissen wir, dass sich die Box erweitern wird. Das zweite, was wir tun wollen, vergessen Sie nicht, da wir auf unsere Schaltfläche zugreifen und seine innere HTML-Eigenschaft ändern wollen, um jetzt zusammenzubrechen. Also da haben wir es. Das ist, wenn die Kisten geschlossen und jetzt haben wir sie geöffnet. Natürlich müssen wir uns mit dem anderen Szenario auseinandersetzen, da es offen ist und du willst, dass es zusammenbricht. Also müssen wir ausgehen. Und jetzt wollen wir natürlich die Kiste zusammenbrechen. Und wie können wir die Kiste zusammenbrechen? Nun, das erste, was wir tun müssen, ist, dass wir auf den ganzen div-Tag-Inhalt zugreifen müssen. Wir müssen dann auf seine Klassennamen-Eigenschaft zugreifen und wir müssen diesem einen Wert von nichts geben und das wird automatisch die Box verkleinern. Verirren Sie sich nicht. Erinnern Sie sich, warum PR vor der Box? Nun, wir haben diese Stile und unser Stylesheet. Wenn dieses div-Tag die Klasse geöffnet hat, wissen wir, dass seine maximale Höhe bis zu 1000 Pixel betragen kann. Während, wenn wir diese offene Klasse entfernen, wird es auf die Standard-CSS-Stile zurückgesetzt, die eine maximale Höhe von 148 Pixel hat, was bedeutet, dass es schrumpfen wird, macht es. Also gehen wir zurück zu unserer JavaScript-Datei. Das letzte, was wir tun müssen, Sie haben es erraten, wie wir die innere HTML-Eigenschaft auf unserer Schaltfläche ändern müssen, um zu erweitern. Wie funktioniert eine Droge und diese Idee von Freunden sollte funktionieren? Gehen wir zu unserem Browser. Aktualisieren und klicken Sie auf diese Schaltfläche Vision. Wie genial ist das? Du musst zugeben, dass das hübsch, ziemlich episch ist. Dies ist erfrischt, was ich tun kann, um es mehr Art von Extrem zu machen, ist, dass wir tatsächlich mehr Lorem Ipsum Text hier hinzufügen und wieder bearbeiten können . Gehen wir zurück zu unserem Browser und lassen Sie uns Button. Sie würden sich mehr aufteilen. Sie können es nur ein bisschen mehr sehen. Beta setzen. Das ist großartig, nicht wahr? Alles fertig? Ich ernsthaft. Und Sie können anfangen zu sehen, wie wir, sobald Sie die Grundlagen und die Grundlagen verstehen, weiter wachsen und immer weiter fortgeschritten werden können. Und es macht Szenen, während wir weitermachen und nicht im Detail verloren gehen. Denken Sie daran, was wir getan haben. Wir haben gerade einen Ereignis-Listener an diese Erweiterung angehängt, gut diese Schaltfläche hier. Wir haben einen Ereignis-Listener hinzugefügt, der auf ein Click-Ereignis abhört , wenn die Boxen seinen aktuellen Status geschlossen haben. Jetzt auf dem Bildschirm wissen wir, dass wir dann eine Klausel der offenen hinzufügen wollten , wenn auf diese Schaltfläche geklickt wird und es Ihnen tatsächlich beweisen. Lassen Sie uns dieses Dokument hier überprüfen. Lasst uns die Leiche öffnen. Und Sie können hier sehen, es hat 0 Klassennamen auf im Moment, die nichts oder nichts suchen. Wenn wir auf diese Schaltfläche klicken, denken Sie daran, dass wir einen Vorteil bearbeiten, dass heute Schaltfläche. Wenn auf diese Schaltfläche geklickt wird und die Felder ausgeblendet sind, werden wir einen Klassennamen namens Öffnen hinzufügen. Wie genial ist das? Wir haben gerade einen Klassennamen von open dynamisch bearbeitet. Und natürlich, wenn das passiert, haben wir eine ganz andere Reihe von Stilen angewendet, um dann deren Inhalt es viel höher macht. Ja, wir bearbeiten ein bisschen CSS Styling. Wir bearbeiten eine Übergangsaufnahme, so dass es nicht einfach passiert ist. So kommt allmählich dorthin. Wir ändern auch das innere HTML des Buttons. Also gibt es eine Menge, die wir in diesem Vortrag gemacht haben und wir werden darauf aufbauen. Also bin ich super, super aufgeregt, weiterzumachen. Wir sehen uns bald. 16. Die addEventListener() – detaillierte Übersicht: Es ist der Moment, auf den wir alle gewartet haben, und das kommt auf die neueste Ausgabe der DOM-API, wenn es um Ereignishandler und Ereignis-Listener geht, es ist die Add-Ereignis-Listener-Methode. Dies ist, was der Ereignis-Listener bei den Rissen ist und der Ereignis-Listener nach einem Ereignis für ein Element beobachtet. Wir weisen kein Ereignis direkt auf eine Eigenschaft dieses Elements zu. Denken Sie daran, die anderen beiden Ansätze in Line Ereignishandlern und Inline-Eigenschaften und Ansätze, die wir eine Eigenschaft an das Element anhängen. Und eine Eigenschaft ist zufällig der Ereignis-Listener, dass dies hier nicht der Fall ist. Stattdessen verwenden wir die addEventListener Methode, um einen Listener und einen Handler anzuhängen , Sie haben es erraten. Und es ist ziemlich intuitiv. Dieses Ereignis Listener, Wand, hören oder beobachten für ein Ereignis, das auf dem HTML-Element ausgelöst wird, das wir angehängt haben. Da ist nichts Unheimliches oder Seltsames da. Jetzt. Aber an diesem Punkt fragen Sie sich vielleicht, ist das AddEventListener von JavaScript, ist das ein Teil der JavaScript-Sprache? Und die kurze Antwort auf diese Frage ist, nein. Es ist nicht von JavaScript. In der Tat ist es von der DOM-API. Worüber spreche ich, wenn ich weiter über diese APIs spreche? Wall, wenn wir Code schreiben, gibt es eine ganze Reihe von Web-APIs, die wir direkt aus der Box verwenden können. Was sind einige dieser APIs und reden darüber, wenn wir h mit dem, was die Geschichte API, Speicher, WebSockets, Dateisystem-APIs haben. Sie sind eine Tonne von ihnen. Und das sind alle separate Art von API, separate Systeme, die im Browser ausgeführt werden. Und natürlich ist eine davon die DOM-API und Netze, wie dieser Ereignis-Listener hinzufügt, von dem er kommt. Der Grund, warum so viele Leute zwischen JavaScript und dem, was die DOM-API ist verwirrt werden könnten , ist, dass Web-APIs auf meist verwendeten das Skript zurückziehen. Aber wie ich bereits erwähnt habe, müssen wir JavaScript nicht strikt verwenden, um seine Web-APIs zu manipulieren und darauf zuzugreifen. Es passiert einfach so zu 99 Prozent der Zeit. Dafür verwenden wir JavaScript. Und ich denke, da muss die Verwirrung hineinkommen. Aber bedenken Sie, dass der AddEventListener nicht JavaScript ist, aber okay, Bereits, Sie haben es. Lasst uns weitermachen. Die Frage, die du jetzt wahrscheinlich stellst, ist cool. Wie funktioniert dieser Ereignishandler? Nun, der Ausgangspunkt ist, die eigentliche Syntax zu verwenden , um die Wörter add event, Listener zu schreiben. Das ist ein Ausgangspunkt. Aber leider ist es nicht so einfach wie dieses. Die AddEventListener -Methode verwendet zwei obligatorische Parameter. Nun, was sind sie? Der erste Parameter ist das Ereignis, macht Sinn Strang und die Adern natürlich, ist die Aktion, auf die wir achten wollen. Zum Beispiel, wenn wir zuvor die Gasse Beispiele verwenden, haben wir auf das onclick-Ereignis geachtet, dass es sich um eine ganze Menge anderer Ereignisse handelt. Wir werden in Kürze auf sie eingehen. Das ist also der erste Parameter. Was ist der zweite Parameter? In der Programmiergemeinschaft und in dieser Methode wird es die Callback-Funktion genannt. Und ich will nicht, dass du dich eingeschüchtert fühlst von all diesen großen, ausgefallenen Worten. Die Callback-Funktion ist nur unser Ereignishandler. Mit anderen Worten, wichtig ist, dass diese Callback-Funktion automatisch den Venenumfang übernimmt. Und dieser Parameter hat eine Eigenschaft namens target. Und das Ziel, auch bekannt als das Element, das das Ereignis findet, wird uns in dieser Callback-Funktion automatisch übergeben. Was meine ich also mit dem Ziel und dem Element, das das Ereignis ausgelöst hat. Nun, wenn wir gerade alles auf dem Bildschirm loswerden, werden Sie mir zustimmen, dass der Ereignis-Listener zu etwas hinzugefügt werden muss, richtig? Es muss zu einem Element hinzugefügt werden. Und es ist das Element, das als Ziel bezeichnet wird, ist irgendwie sinnvoll. Keine Sorge, wir werden in diesem Kurs viel näher eingehen. Und ich möchte mir natürlich Beispiele ansehen. Aber bevor wir es tun, möchte ich nur noch ein bisschen mehr über diese ganze Tasche reden. Was ist eine Callback-Funktion? Nun, lasst uns zur nächsten Vorlesung springen, um es herauszufinden. 17. Was ist eine Callback-Funktion: Bevor wir weitermachen und anfangen, Herausforderungen zu tun und neue, verbesserte und fortschrittlichere Dinge zu betrachten . Wie ich schon sagte, OK, ich möchte nur einen Schritt zurück gehen und diesen Rückruf ein bisschen genauer besprechen. Denken Sie daran, dass Sie sich nicht einschüchtern. Ein Callback ist nur eine Funktion, die abgerufen wird, um etwas anderes passiert ist. Es ist alles, was eine Callback-Funktion ist. Und wir wissen, dass das erste Argument die Add-Ereignis-Listener-Methode das Ereignis war, auf das wir abhören möchten, zum Beispiel ein onclick-Ereignis. Das zweite Argument war der Ereignishandler , der in unserem Fall wissen wir, dass es sich um eine Callback-Funktion handelt. Diese Callback-Funktion wird automatisch ausgeführt, wenn das Ereignis ausgelöst wird. Denken Sie daran, dass die Definition eines Callbacks eine Funktion ist, die aufgerufen wird, nachdem etwas mit etwas passiert ist, in unserem Fall ist, dass das Ereignis ausgelöst wird. Und was wirklich cool an diesem spezifischen Callback ist, wenn wir die addEventListener Methode verwenden , ist, dass wir automatisch viele Daten über dieses Ereignis erhalten, was wirklich, wirklich nützlich sein kann. Welche Art von Informationen erhalten wir zurück? Dinge wie das Ziel, an dem das Ereignis aufgetreten ist, die Art des Ereignisses, das aufgetreten ist, et cetera, et cetera. Anstatt nur Wörter auf dem Bildschirm zu betrachten, lassen Sie uns zu Visual Studio Code springen. Lassen Sie uns schnell einen Callback codieren, und lassen Sie uns sehen, was tatsächlich zu uns zurückkehrt. Lassen Sie uns das in Aktion sehen. Alles klar, Lassen Sie uns diese Callback-Funktion in Aktion sehen. Sehr, ganz einfach. Ich habe hier mit einer leeren Datei index.html begonnen. Und lassen Sie uns einen sehr schnellen Ereignis-Listener codieren. Und mal sehen, was eigentlich Baptisten in eine Schultasche verwandelt. Wir werden eine sehr einfache HTML-Seite im Körper sitzen wollen. Lass uns einfach ein H1-Tag haben. Und das Schlagen kann nur Callbacks möglich sein. Da gehen wir, Das ist alles, was ich möchte, dass unser HTML enthält. Und lassen Sie uns einfach einen Ereignis-Listener zu diesem 81-Tag hinzufügen. Und mal sehen, was uns zurückgeworfen wird. Also natürlich müssen wir unser Skript hinzufügen. Ja, der erste Schritt ist natürlich, das H1-Tag. Also lassen Sie uns eine als Dokumente und Missbrauch des Abfrage-Selektors definieren. Und lasst uns unser H1 schnappen. Das nächste, was wir tun möchten, ist, dass wir die Add-Ereignis-Listener-Methode an dieses H1-Element anhängen möchten. Also beginnen wir mit dem Zugriff auf unser H1-Element und automatisch, und denken Sie daran, dass diese APIs sprechen, es hat automatisch diese Add-Ereignis-Listener-Methode uns direkt aus der Box auf diesem Element zur Verfügung. Sehr, sehr cool. Denken Sie daran, es braucht zwei Argumente. Das erste Argument ist das Ereignis, und das Ereignis hier ist das click-Ereignis. Und was ist das zweite Argument? Das ist richtig, Es ist die Callback-Funktion. Also werde ich nur noch einmal die Fehler-Syntax verwenden. Hier ist unsere Pfeilfunktion. Das ganze zweite Argument ist unser Rückruf. Lassen Sie sich nicht einschüchtern. Das ist alles, was es ist. Nur die Funktion wird ausgeführt, wenn dieses Ereignis passiert. Und denken Sie daran, was wir gesagt haben, dass diese Callback-Funktion automatisch die Ereignisdaten hat. Lassen Sie mich Ihnen zeigen, was ich meine. Wir können einfach in dem Fall eine Schule von Daten übergeben. Und dann können wir natürlich nur diese Daten ausloggen. Diese Variable, die ich noch diese Daten einfüge, wird uns automatisch gegeben. Du kannst es nennen, wie immer du willst. Sie können es a nennen, Sie können es B nennen, Sie können es c nennen. Wir haben es gerade genannt Punkte oder eine Variable, die wir definieren einen Namen, der uns automatisch von der Callback-Funktion gegeben wird, wenn dieses Ereignis in Ordnung ist. Lassen Sie mich Ihnen zeigen, was ich meine. Lass uns das einfach retten. Gehen wir zu unserem Browser. Lassen Sie uns das untersuchen. Lassen Sie uns auffrischen. Los geht's. Wir haben unsere Seite Callbacks sind auch net, unsere H1-Tag. Es hat eine Konsole. Wenn ich diesen anklicke, was denkst du, wird passieren? Wir werden zuerst, das Click-Ereignis wird ausgelöst. Und zweitens haben wir Seed, um die Daten, die wir vom Callback erhalten, zu konsolenprotokollieren. Also sollten wir das Konsolenprotokoll ihrer Tochter sehen. Ich klicke darauf. Die wir gehen. Sie können hier sehen, dass die Tochter, die wir bekommen, dieses Maus-Event ist. Wir wissen, dass das Click-Ereignis von der Maus aus auftritt. Und Sie können das öffnen und wir haben eine ganze Reihe von Eigenschaften und Methoden. Wie genial ist das? Und innerhalb dieser MouseY Adern haben wir diese Eigenschaft namens Ziel. Denken Sie daran, dass das Ziel das eigentliche Element war, das das Ereignis selbst findet. In diesem Fall ist das Ziel das H1-Tag. Also gehen wir hin. Wie cool ist das? Und denken Sie daran, wenn wir diese Callback-Funktion verwenden, erhalten wir eine ganze Menge Tochter über das eigentliche Ereignis selbst automatisch gegeben. So gibt es uns eine Menge Power, viel Flexibilität als Programmierer, weil wir mehr Informationen haben. Ich hoffe, es macht Sinn. Das ist genug gesagt, lasst uns weitermachen. 18. Challenge für event – Intro: Du weißt, dass ich Beispiele liebe, weshalb ich noch ein anderes machen muss. Und wir haben wirklich einige wirklich coole Beispiele in diesem Kurs gesehen , die Sie praktisch auf Ihre eigenen Websites anwenden können. Dies ist keine Ausnahme und es ist ziemlich nützlich weil Sie ein paar verschiedene Arten von Techniken lernen werden. Ja, es wird eine lustige, lustige Vorlesung. Also, was wollen Sie nicht tun? Nun, Sie können sehen, dies ist der Kreis klicken Website Challenge. Und wie Sie sicher erraten haben, müssen wir auf den Kreis klicken. Wenn der Benutzer auf den Kreis klickt, ändern sich die Farben. Ziemlich pfiffig. Fledermäuse Es gibt nur wenige Dinge, die ich möchte, dass Sie auf der Website tun. Erstens möchte ich, dass Sie hinzufügen, dass bis unter den Kreis dauert. Dies ist reine DOM-Manipulation, dynamisch. Ich möchte nicht, dass Sie aufhören, dass Ihr HTML einnimmt. Zweitens möchte ich, dass Sie diese Kreisdynamik hinzufügen. Drittens möchte ich, dass Sie dem Kreis einen Zuhörer hinzufügen, insbesondere ein Kritik-Hörereignis zu diesem Kreis. Und ich möchte, dass Sie die AED ist acht Listener Methode verwenden. Und schließlich müssen wir einen Handler hinzufügen, oder? Und was soll dieser Handler tun? Wir möchten, dass der Handler die Farbe des Kreises ändert. Aber ich möchte, dass du es zufällig machst. Ich werde ehrlich zu dir sein. Ich erwarte nicht, dass du weißt, wie das geht, aber gib es mal, versuche es so weit wie möglich zu kommen. Und dann, wie meine vorherigen Beispiele, bin ich sicher, dass Sie mit dem Prozess sehr vertraut sind. In der nächsten Vorlesung werde ich die allgemeine Struktur des Wissenschaftlers codieren. Dann der folgende Link, John wird durch die Lösung mit Ihnen gehen. Es wird also eine Menge Spaß machen. Wir werden JavaScript-Objekt überschüssigen müssen , nur um eine Art Zufallszahl hier zu erstellen, weil wir zufällige Farben wollen. Also wird es später genial werden. Ich bin wirklich, wirklich aufgeregt. 19. Challenge für event – Erstelle unseren HTML: Wie immer fangen wir mit nichts an. Entschuldigung, Lassen Sie uns knacken und lassen Sie uns einfach einen Ordner hier namens index.html erstellen. Kann das klein machen. Und lasst uns knacken. Und das beginnt einfach mit einer HTML5-Vorlage. Der Titel des Dokuments kann Kreis Herausforderung sein. Das erste, was ich tun möchte, ist, dass ich erstellen möchte, wir wissen was, lassen Sie mich den Browser öffnen. Also lassen Sie uns Live-Server starten. Wir haben, damit wir sehen können, was wir tun. Es ist immer, immer nützlich. Das erste, was ich tun möchte, ist, dass ich ein div mit einer ID von main erstellen möchte. Und dieses div kann einfach sagen, willkommen zu kreisen, klicken und speichern, und sie würden gehen, Sie können das Ergebnis in unserem Browser sehen. Und dann möchte ich, dass ein anderes div dem Benutzer nur beschreibt, was wir wollen, dass sie tun. Und wir können einfach sagen, klicken Sie auf den runden Ball, um seine Farbe zufällig zu ändern. Wir gehen, es macht alles Sinn. Und jetzt möchte ich, dass wir unseren eigentlichen Kreis kreieren. Und ich erinnere mich, was ich in der vorherigen Vorlesung gesagt habe. Ich möchte, dass du das dynamisch machst. Also alles, was ich tun möchte, ist, dass ich ein div mit einer ID von Wrapper haben möchte. Und hier möchte ich, dass wir unseren Kreis setzen. In der Tat können wir hier einen Kommentar sagen Kreis einfügen hier. Und wir können es vielleicht in ein div namens Kreis mit einer Idee von Kreis setzen. Da gehen wir. Es kann ein leeres div sein, denn wie ich bereits erwähnt habe, wollen wir dies dynamisch machen. Statistiken unser div, das einen Kreis enthalten wird und alles, was wir tun müssen, um den Kreis hier tatsächlich einzufügen, ist Stile darauf anzuwenden, CSS-Stile, wir werden es in Kürze tun. Das Letzte ist, dass wir den Text unterhalb des Kreises einfügen müssen, keine Sorge. Und wieder, ich werde diese Notiz einfach unten in ein div-Tag und dieses div-Tag setzen und eine ID von Notizen haben. Und wieder können wir ein leeres div-Tag für unser Buch haben, ist ich möchte, dass wir dies hinzufügen, diesmal über JavaScript dynamisch. Also hier gehen wir, Hier ist unser HTML. Sie können sehen, wie einfach es ist. Wir sind hier nicht allzu kompliziert, aber es ist eine sehr, sehr wertvolle Übung. Was ich möchte, dass wir jetzt tun, bevor ich diesen Vortrag aufhöre, ist ich möchte, dass wir nur einige besitzen Website hinzufügen , weil es ziemlich Mischung aussieht. Also innerhalb des head-Elements, Lassen Sie uns zu einer externen CSS-Datei verknüpfen, und lassen Sie uns es unter styles.css nennen. Also, wenn wir einfach zu unserem Projekt Groot gehen, Yeah, und wir fügen eine andere Datei namens styles.css. Wir sollten in der Lage sein, das ganz schön zu gestalten. Das erste, was ich tun will, ist, dass ich einen wirklich coolen Hintergrund haben möchte, fast eine Gradienten Art von Look and Feel. So, dass Stil unser HTML. Und es ist eine fiktive Hintergrundeigenschaft. Und ich möchte auf einen Stil zugreifen, der als radiale Verläufe bezeichnet wird. Und es braucht hier verschiedene Argumente. Wir werden das passieren, machen es einfach grau und schwarz. So sehr einfach. Speichern Sie das. Und da gehen wir. Ich weiß, es sieht besser aus, jetzt wird es besser. Ich verspreche es. Post können wir kaum auslesen nimmt köstliche machen, Ich werde es weit nehmen. Los geht's. Zumindest können wir lesen, dass es besser geht. Lassen Sie uns etwas Polsterung an der Spitze der Schlauchaussicht hinzufügen. Ja. Und es wird größer und lassen Sie uns jetzt verschieben oder nicht in die Mitte nehmen , so dass wir Text-Ausrichtung Mitte gehen können. Los geht's. Es bringt mich. Wir haben immer noch nicht ganz David, wir kriegen es. Ich möchte jetzt unser div mit der Haupt-ID stylen. Gehen wir zurück zu unserem HTML. Es ist da. Willkommen im Kreis. Klicken Sie auf. Ich möchte Stil ankündigen, dass wir die ID von Maine wollen. Und wie man weiß, wir können Schriftgewicht, wir können es fett machen. Und vielleicht können wir die Schriftgröße ein wenig erhöhen. Ich versuche nur Dinge zu tun, die es ein bisschen besser machen. Da gehen wir. Und jetzt möchte ich den Rep stylen. Also, wenn wir zum Index gehen, werde ich Sie daran erinnern, was das ist. Wir haben dieses div mit der ID von Wrapper , der unseren Kreis halten wird. Lasst uns das wählen. Also brauchen wir die ID von. Und wieder, wir wollen, dass in der Mitte platziert. Also werden wir Ränder machen und für links und rechts ändern. Und das gerade jetzt die Höhe und die Breite angeben. Die Höhe ist nur machen es, ich weiß nicht, 12 er und die Breite. Und lass es uns etwas weniger machen. Lass uns einen Teenager machen. Ok. So können Sie sehen, dass es beginnt, Abbas zu ersparen. Der Akt fängt an, viel besser auszusehen. Und natürlich ist der nächste Schritt, unseren Kreis tatsächlich zu machen, um ihn tatsächlich anzuzeigen. Ja, machen wir das. Denken Sie daran, dass das div einen idealen Kreis hatte. Das erste, was ich auf dem Kreis tun möchte, und das wird sehr wichtig werden, vor allem in der nächsten Vorlesung ist auf 12, ändern Sie seine Farbe, seine Hintergrundfarbe. Und D sind verschiedene Möglichkeiten, wie wir das tun können. Ich werde tatsächlich einen Bonus Vortrag darüber haben, wie das alles funktioniert. Moment, nur erkennen, dass ich das Hex-Farbformat verwenden werde. Das ist es, was ich tun werde. Lassen Sie uns die Hintergrundfarbe und Nicht-Eliten eingefügten Wert ändern. Sie müssen immer mit dem Hashtag beginnen, wenn es um Higgs-Werte geht. Und jetzt besteht es aus separaten Zeichen. Die Farbe, die ich machen werde, ist wie eine orangefarbene Art von Farbe, mit der ich anfangen muss. Es wird sein, wenn 63 und dann 47. Das retten wir. Wir haben unsere Hintergrundfarbe, aber bedenken Sie diese Taube, warum wir jetzt keine Hintergrundfarbe sehen, ist, dass dieses div selbst keine Höhe oder Breite hat. Das ist also in einer Höhe von 200 Pixeln und einer Breite von 200 Pixeln. Wie sieht das aus? Da gehen wir. Es ist aber ein Quadrat, sind das, was los ist. Keine Sorge, wir werden es jetzt in einen Kreis schaffen. Du weißt, wie man es zu einem Kreis macht. Wir müssen nur den Grenzradius vortäuschen, oder? Umrandungsradius Und das wurde zu 100 Prozent gemacht. Da gehen wir. Das ist jetzt Kreis. Und können Sie sehen, die Kreise fast berühren es berührt den Geschmack klicken Sie auf ihr Onboard ändert Farbe. Ich mag es nicht. Also lassen Sie uns einfach etwas Rand zu den oberen 20 Pixeln hinzufügen. Da gehen wir. Dann Historiker gut aussehen. Und das letzte, was ich tun will, ist, dass wir unsere Notizen unten rechts haben. Ich möchte nur, dass wir es stylen, obwohl wir den Text nicht bearbeitet haben. Also, was ich tun will, ist , dass ich die Notiz packen will, und ich will nicht, dass sie auf dem Kreis feststeckt, ich bin gegangen, um nach unten zu drücken. Also nochmal, wir werden nur den Rand oben vortäuschen. Das sollte gut aussehen. Wenn nicht, ändern wir es später, aber los geht's. Hier möchte ich Ihnen alles überlassen. Ich will dir das Geld geben. Das wird jetzt fantastisch sein. Offensichtlich, wenn ich auf diesen Kreis klicke, tut nichts. Ich möchte, dass du das tust. Und ich möchte, dass Sie Ihren Ereignishandler-Code in eine separate JavaScript-Datei einfügen. Wir müssen uns an gute Praktiken gewöhnen. Und denken Sie nur darüber nach, was Sie tun müssen. Ich möchte einen Ereignis-Listener an dieses Kreis-div mit der ID des Servers anhängen. Sie möchten dann auf welches Ereignis warten und das Click-Ereignis ausprobiert haben. Und dann müssen wir irgendwie eine zufällige Farbe erzeugen. Und wenn Sie hier zu unserem Stylesheet gehen und Sie sich unseren Kreis, Hintergrundfarbe, diesen x-Wert ansehen . Es muss nach dem Zufallsprinzip generiert werden. Und es könnte ein bisschen knifflig für dich sein. Keine Sorge, ich werde es mit dir in der nächsten Vorlesung durchmachen. Ich werde zwei Parteien haben, die nie Bonusvortrag darüber haben , wie genau unser Code funktionieren wird. Denn es ist wirklich faszinierend und es wird immer besser. 20. Challenge für event – Lösung: Woo hoo, ich hoffe, du hattest Spaß und ich hoffe, es mal zu gehen. Ich sage immer, es spielt keine Rolle, ob du es richtig oder falsch hast. Der Punkt ist, dass du es versucht hast. Also hier sind wir. Seit der letzten Vorlesung habe ich buchstäblich nichts getan. Und fangen wir an zu schneiden und es macht die Lösung nicht zusammen. Lassen Sie mich zunächst loswerden, damit Sie den Bildschirm besser sehen können. Was machen wir? Was ist der Ausgangspunkt? Will? Zunächst lassen Sie uns diese Notiz innerhalb dieses div-Tags mit der ID der Notiz hinzufügen, die der Schüler dynamisch zuerst. Und denken Sie daran, was ich bei einem Test gesagt habe, um Law Handler-Code in eine separate JavaScript-Datei aufzunehmen . Alles, was wir hier tun müssen, ist, dass wir ein Skript-Tag einfügen müssen. Ja, wir müssen eine andere Datei beziehen. Nennen wir es einfach app.js. Wir können hier zu unserer Wurzelstruktur gehen. Wir können eine Datei namens app.js hinzufügen. Da gehen wir. Ende zum Hinzufügen. Dies dauert dynamisch unten, ist das einfachste, und deshalb möchte ich, dass wir damit beginnen. Weißt du, wie wir es machen würden? Es hat eine Index-HTML-Datei. Erstens, wo wollen wir diesen Text hinzufügen? Das ist richtig, wir möchten innerhalb eines div-Tags mit einer ID der Notiz bearbeiten. Das erste, was wir tun müssen, ist, dass wir das aus dem DOM holen müssen. Mach dir keine Sorgen. Gehen wir hierher. Schritt 1 nimmt dynamisch zum div. Und hier werde ich nur eine schnelle und böse Art tun, es zu tun , als das Dokumentobjekt zu greifen, weil dies der Ausgangspunkt ist. Dies ist die Wurzel unserer Webseite. Dort haben wir eine Methode namens getElementById. Wir wissen, dass der Ausweis eine Notiz ist. Und welche Eigenschaft wollen wir auf dieses Element zugreifen? Wir wollen darauf zugreifen. Wir können Ticks Inhalt tun, zum Beispiel können wir in HTML tun, es spielt keine Rolle. Und wir wollen den Inhalt ändern, nicht. Und wir können sagen, was wir wollen. Dies ist reine DOM-Manipulation. Wie sieht es aus? Und wenn ich speichere, erscheint es in unserem Browser. Wie cool ist das? Ich hoffe, du wirst aufgeregt. Es ist wirklich, wirklich erstaunliches Zeug. Aber das war das leichte Stück. Jetzt muss R1 weiterentwickelt werden. Ich möchte, dass wir jetzt mit Schritt 2 fortfahren, und das ändert die Hintergrundfarbe des Kreises bei einem Klick-Ereignis. Wie würden wir das tun? Wird wieder eine staatliche Bank nehmen. Was ist der erste Schritt? Der erste Schritt ist, dass wir den Kreis irgendwie greifen müssen, keine Sorge, denn daran wollen wir den Hörer anbringen. Also lassen Sie uns eine JavaScript-Variable definieren, initiiert nennen es Kreis aus Mangel an einem besseren Wort. Und lassen Sie es dem Wert dieses ganzen div zuweisen, das einkreist. Also natürlich beginnen wir mit unserem Wurzelelement unserer Seite, das ist das Dokument, das wir auf eine Eigenschaft namens getElementById zugreifen und die ID, die wir es genannt haben, war Kreis. Denken Sie daran, ob ich unsere Indexdatei könnte. Wir wollen auf die Hintergrundeigenschaft dieses div mit der ID des Kreises zugreifen. Zum ersten APR ist, dass wir jetzt diesen Kreis haben. Super, das ist ein toller Job. Der zweite Schritt ist, was zu tun? Wir müssen den Ereignis-Listener anhängen. Also greifen wir auf unseren Kreis zu. Denken Sie daran, dass jedes Element Zugriff auf die Methode add event listener hat. Und die AddEventListener -Methode hat zwei Argumente. Es hat tatsächlich mehr, aber mach dir keine Sorgen darüber, dass es jetzt zwei obligatorische Argumente hat. Der erste ist der tatsächliche Ereignistyp. In diesem Fall möchten wir darauf achten, dass der Clicker behandelt wurde. Und das zweite Argument ist unsere Handler-Funktion. Und nennen wir einfach unsere Funktion changecolor. Bisher ziemlich intuitiv. Und das bringt uns auf den letzten Teil dieser Lösung. Dies ist, wo die Zähler, hier wird der fortschrittlichste Code sein. Und dann müssen wir unsere Handler-Funktion definieren. Im Moment haben wir einen Ereignis-Listener an den Kreis angehängt. Wir sagten, dass wir eine Funktion namens Farbe ändern ausführen wollten, wenn sie angeklickt wird. Aber natürlich haben wir diese Farbwechselfunktion noch nicht definiert. Lass uns das jetzt machen. Also natürlich lassen Sie uns JavaScript-Funktionsschlüsselwort verwenden. Und wir nannten es Farbwechsel, nicht wahr? Und wie wir das Fleisch unseres Codes bekommen haben, wird innerhalb dieser beiden geschweiften Klammern sein. Wer hat Pflege? Also, wo fangen wir an? Und das wird vielleicht ein bisschen verwirrend, aber vertrau mir, in der nächsten Vorlesung werde ich genau erklären, wie dieser Code funktioniert. Der erste Schritt, den ich tun möchte, ist, dass ich eine zufällige Farbe erzeugen möchte. Sobald ich zufällig Farbe im Hex-Format generiert habe, ging ich dann, um eine Hintergrundfarbe dieses div zuzuweisen, wird dieser Kreis zu dieser zufälligen Farbe, die wir dem wirtschaftlichen Sinn generiert haben. So ist der erste Tipp auf eins, um eine zufällige Farbe zu erzeugen. Lassen Sie uns also eine JavaScript-Variable definieren, die zufällige Farbe genannt wird. Nun, was ich möchte, dass wir auf das Mathematik-Objekt von JavaScript zugreifen. Und keine Sorge, wir bekommen in jedem Browser automatisch direkt aus der Box Zugriff . Jeder Browser hat diese Funktionen zur Verfügung. Es ist ein mathematisches Objekt. Es ist wirklich, wirklich genial. Und auf diesem Kartenobjekt gibt es eine Methode namens random. Und wie Sie erwarten würden, diese Zufallsmethode eine Zufallszahl zurück. Aber wie Sie hier auf meiner IDE sehen, gibt es mir einen Hinweis. Es sagt, dass es eine Zahl zwischen 01 zurückgibt. Was es Ihnen jedoch nicht sagt, ist, dass es die Zahl 0 enthält, aber es wird nie die Nummer 1 enthalten. Mit anderen Worten, es wird eine Zahl größer oder gleich 0, aber kleiner als eins. Cool, also das ist, was die Math.Random Funktion tut. Aber du würdest mir an diesem Punkt zustimmen, wenn ich das nur mache, werden wir eine Zahl zwischen 01 bekommen, was uns nicht wirklich sehr hilft. Es wird uns nur eine sehr begrenzte Reichweite geben. In der Tat, es wird uns geben, wenn wir wie alle Runden machen, geben wir uns eine Nummer. Nicht gut genug für uns. Also müssen wir es mit einer Zahl multiplizieren. Nun, mit welcher Zahl multiplizieren wir es? In diesem Fall wird die Zahl 1600000777 bis 16. Mach dir keine Sorgen. Ich werde Ihnen erklären, wie ich zu dieser Nummer komme. Aber vorerst ist das die Farbpalette, die uns zur Verfügung steht. Aka es sind die Mengen an verschiedenen Farben, die wir zufällig erzeugen können. Also, wie cool ist das? Oh Mann, es tut mir leid, ich bin immer wieder aufgetaucht. Ja, aber das ist wichtig. Wenn wir hier bleiben würden, wäre nicht genug. Lassen Sie mich Ihnen zeigen, warum. Ich nur Konsole protokollieren diese zufällige Farbe. Ok, und es ist öffnen Sie die Konsole und unseren Browser. Wenn wir nun auf den Kreis klicken, Mannitol auf den Kreis klicken, aber wir können auf diese Zahl schauen. Also ja, wir produzieren Zufallszahlen, was genial ist. Können Sie sehen, wie es all diese Dezimalstellen erzeugt, diese Gleitkommazahlen. Das wollen wir nicht. Wir wollen diese Zahlen runden. Ok? Also schneidet es nicht ganz für uns. Deshalb möchte ich in diesem Code jetzt tun, dass ich dies auf die nächste ganze Zahl runden möchte. So können wir den gesamten Betrag in Klammern einschließen und wir können auf eine andere JavaScript-Array-Methode namens Floor zugreifen. Also greifen wir die Matte Schnittstelle und wir führen eine Methode namens Boden. Da gehst du. Und das sollte die Zahlen runden. Also, wenn wir jetzt unsere Konsole wieder öffnen, Konsole, und lassen Sie uns auf den Kreis klicken. Jetzt siehst du, dass wir uns fertig machen. Ehrfürchtig, runde Zahlen. Ja. Aber Sie denken vielleicht an sich selbst an diesem Punkt, Clyde, das ist nicht das gleiche wie die Hex-Werte, die wir in unserem Stylesheet geschrieben haben, ihrem Haupt. Aber wenn ich zurück zu unserem Stylesheet, wir als unsere Kreis Hintergrundfarbe, da gehen wir. Sie können sehen, dass wir ein paar Würfe da reingeschoben haben. Und das ist der Punkt mit diesem ganzen hexadezimalen System. Es enthält tatsächlich 16 Zeichen. Es geht von 0 auf neun, aber hatten wir nicht die Buchstaben a, b, c, d , e und f. Wie bekommen wir diese zufälligen Zeichen? Wie bekommen wir diese Zahlen in Hexadezimalformat? Wird zum Glück für uns, gibt es eine andere Funktion namens string. Und wieder werde ich erweitern, was genau das in der Bonusvorlesung ist. Für jetzt, verstehen Sie einfach, dass es auf Nummer nimmt und es in jede Basis konvertiert, die Sie das Argument angeben. Ja, es wird Basis 16 sein, weil wir wissen, dass die hexadezimalen Werte wieder 16 verschiedene Zufallswerte annehmen können. Ich werde das in der nächsten Vorlesung erklären. Keine Sorge, geht auf so lassen Sie uns jetzt zurück zu unserer JavaScript-Datei. Und die andere Sache, die ich tun möchte, ist, dass ich eine Funktion namens ToString implementieren möchte, wie ich gerade erwähnt habe, und es braucht ein Argument. Und das ist die Basis, die Sie verwenden möchten. Und wir wollen Basis 16 verwenden. Ooh, ich weiß, es ist eine ziemlich lange Linie, aber keine Sorge, wenn wir das jetzt speichern und wir darauf zugreifen, sollte unsere Konsole funktionieren. Und wir klicken auf den Kreis. Wie genial ist das? Es produziert buchstäblich hexadezimale Werte. Ja, wir haben den Hash nicht vor uns, was wir jetzt tun werden. Aber wir haben einen zufälligen hexadezimalen Wert nach oben erzeugt. Ehrfürchtig. Ich hoffe, du hast wirklich Spaß. Wir haben so weit getan und wir fast Tag, haben wir fast getan. Das letzte, was wir jetzt tun müssen, ist, dass wir eine zufällige Farbe produziert haben. Wir müssen jetzt die Hintergrundfarbe dieses div beeinflussen, und wir müssen es zufällige Farbe berühren. Also lasst uns das schnell machen. Wir können diese Konsole jetzt löschen, weil wir wissen, dass wir die richtigen Werte erhalten. Der nächste Schritt ist der Zugang zu unserem Kreis. Denken Sie daran, dass wir den Kreis bereits haben. Wir existieren, um Element nach ID-Methode zu erhalten. Und wir haben dieses ganze div jetzt zur Verfügung. Also alles, was wir dann tun müssen, ist, dass wir seine Stil-Eigenschaft beeinflussen wollen. Mach dir keine Sorgen. Und mit auf dem Stil möchten wir die Hintergrundfarbe beeinflussen. Das wollen wir ändern. Und wir wollen es einem Wert zuweisen. Und ich werde hier Vorlagenliterale verwenden. Wenn Sie nicht wissen, was sie sind, überprüfen Sie bitte meine JavaScript komplette Großmeister-Kurs. Wenn du weißt, was sie größer sind, als du mitverfolgen könntest. Was ist das erste, was wir in unsere Template-Literale einfügen wollen? Das ist richtig. Wir müssen unseren Hashtag setzen. Denken Sie daran, das ist die einzige Sache, die wir vermissen, als wir unsere zufällige Farbe erzeugt haben. Dann geradeaus, dass wir unsere zufällige Farbe einfügen wollen. Und meine lieben Studenten, das ist es. Du bist gerade fertig. Es ist eine ziemlich fortgeschrittene Sache, nicht wahr? Und keine Sorge, ich werde in der nächsten Vorlesung erweitern, Bonusvortrag darüber, wie diese ganze Mathematik zufällig funktioniert und wie wir zu den 16.7 Millionen Amber gekommen sind. Aber vorerst hast du es getan. Lasst uns das erweitern. Lassen Sie uns darauf klicken und ich habe das nicht einmal getestet, ich hoffe, es funktioniert, aber lassen Sie mich ankreuzen. Mission abgeschlossen. Wie toll mich dieses Zeug wirklich begeistert. Ich hoffe, du hattest Spaß. Ich hoffe, Sie haben durch diesen Vortrag viel gelernt, wirklich viel fortgeschrittener zu werden. Jetzt fügen wir Zuhörer-Elemente hinzu. Wir fügen Takes dynamisch innerhalb des Listens für das Click-Ereignis über die neue Add-Ereignis-Listener-Methode hinzu. Und dann haben wir natürlich unseren Handler-Code in einer separaten JavaScript-Datei. So gut gemacht. Ich bin wirklich beeindruckt. Und lassen Sie mich einfach ein paar Bonusblätter. Lassen Sie mich nur nicht erklären, dass diese ganze hexadezimale funktioniert und wie Farben funktionieren, wenn es um CSS und den Browser geht. Wir sehen uns in der nächsten Vorlesung. 21. Verschiedene Wegweisen, um eine Farbe zu definieren: Mann, was ist gerade passiert? Wir schauen uns die vorherige Vorlesung an. Denken Sie daran, dass wir jedes Mal, wenn auf den Kreis geklickt wurde, eine zufällige Farbe erzeugen mussten. Und wie haben wir das gemacht? Nun, denken Sie daran, dass wir zuerst diesen Kreis greifen mussten, indem Sie die get-Element-by-ID-Methode verwenden. Und sobald wir das hatten, mussten wir jedes Mal eine Zufallszahl erzeugen, wenn dieser Kreis mit Zufallszahl angeklickt wurde musste bei 0 Entität beginnen, um den ganzen Weg zu sechzehn Millionen, siebenhundert und sieben bis 15. - Ja. Das habe ich nicht falsch verstanden. Das ist eine Fünf am Ende. Beachten Sie, wie wir einen R-Code setzen. Aber keine Sorge, ich werde das in diesem Vortrag erklären. Also, wie ich bereits erwähnt habe, und warum haben wir diese Zahlen verwendet? Nun, lassen Sie uns das loswerden, indem wir uns ansehen wie wir tatsächlich Farben in unserem Code setzen. Die Farbe kann auf eine der folgenden drei Arten definiert werden. Verwenden eines Schlüsselworts. Mit dem hs sind alle zylindrischen Koordinatensystem. Und mit Hilfe des kubischen RGB-Koordinatensystems. Dies ist kein Kurs auf CSA, also werde ich sehr schnell und kurz darüber sein. Schauen wir uns zuerst die Schlüsselwort-Methode an. Hierbei handelt es sich um die Groß- und Kleinschreibung, die eine bestimmte Farbe darstellen. Beispiele sind die Schlüsselwörter rot, blau, tomate, light see green, et cetera, et cetera und FYI. Sie sind etwa eine 140 Spaltennamen insgesamt, give-and-take. Und das sind die intuitivsten, dass es uns nicht so viel Flexibilität gibt. Ok, Cool. Was ist dieses zylindrische HSL-Koordinatensystem? Wie funktioniert das? Nun, dies definiert eine Farbe entsprechend ihrem Farbton, Sättigung und Leichtigkeit. Und es gibt eine zusätzliche Alpha-Komponente, die die Farbtransparenz darstellt. Und schließlich schauen wir uns dieses kubische RGB-Koordinatensystem an. Wie funktioniert das? Erstens, denken Sie daran, dass dies die ist, die wir in unserem Verkosterszenario verwendet. Und vielleicht sehr intuitiv definiert das RGB-Modell eine Farbe entsprechend seinen roten, grünen und blauen Komponenten. Und was super interessant ist, ist, dass RGB-Farben mit zwei Methoden definiert werden können. Durch die hexadezimale Methode, die wir verwendet haben. Und durch funktionale Notationen, wie die Verwendung der RGB-Funktionsmethode. Aber wie ich bereits erwähnt habe, verwenden wir das Hexadezimalformat. Bevor ich mit diesen Farben fortfahre, lass mich einfach auf die Konsole springen. Lassen Sie mich Ihnen zeigen, was ich mit diesen drei Methoden meine. Wir nennen es Slash vier Methoden, weil Sie bestimmte Methoden im RGB-System haben. Bilder zeigen Ihnen, was ich meine. Lass uns jetzt rüber springen. Und Sie können in diesem addEventListener Methodentests sehen, die wir durchgemacht haben, wir verwenden das hexadezimale Format, aber es gibt andere Möglichkeiten, die uns genau das gleiche Ergebnis geben. Und es kommt nur auf persönliche Vorlieben an. Es gibt keinen falschen oder richtigen Weg. Lassen Sie mich Ihnen einige der anderen Möglichkeiten zeigen, wie wir es tun können. Also lasst uns diese Hintergrundfarbe auskommentieren. So gibt es jetzt keine Hintergrundfarbe. Was wir tun können, ist, dass wir den RGB verwenden können , der nur aus roten, grünen und blauen Werten zwischen 0 und 255 besteht . Wenn wir jetzt 255, 1909 und 71 setzen und wir sparen, erhalten wir genau die gleichen Farben, die wir vorher hatten. Aber das ist nicht der einzige Weg, oder? Nein, wir haben eine andere Methode. Also lassen Sie uns jetzt Farbtonsättigung und Leichtigkeit Methode verwenden. Und wenn wir Werte neun und 100 Prozent und 64% setzen , und wir speichern das und wir werden das kommentieren. Es ist genau die gleiche Farbe, aber das sind nicht die einzigen Möglichkeiten, gibt es? - Nicht? Oben auf meinem Kopf kann ich mir vorstellen, auch den Namen der Farbe als Geschmack zu verwenden. Also, was ich damit meine, na ja, lasst uns die Hintergrundfarbeigenschaft schnappen, und es heißt Tomate. Und wenn wir das speichern und das kommentieren, ist es genau die gleiche Farbe. Und Sie können hier sehen, wenn ich all diese auskommentiere, meine IDE gibt Ihnen Hinweise, welche Farbe sie haben und jetzt alles gleich ist. Das ist also mein Punkt. Es gibt viele verschiedene Möglichkeiten, eine Katze zu häuten. Wenn Sie zurück in die Vorlesung springen. 22. Bit gegen 300: Okay, großartig, also hoffe ich, das ergibt Sinn. Aber lassen Sie uns weitermachen. Wir haben es nicht auf die Micelle, lasst uns das alles loswerden. Und lassen Sie uns dieses RGB-System diskutieren. Insbesondere möchte ich, dass wir dieses Hexadezimalformat diskutieren. Du denkst vielleicht, Clyde, warum benutzt er hexadezimal? Der Grund für mich nur, es ist intuitiv und diese hexadezimalen Zahlen sind sehr natürlich für Computer. Warum sie natürlich für Computer sind, weil Computer speichern und behandeln binäre Ziffern. Und wie wir in Kürze sehen werden, bilden vier binäre Ziffern eine hexadezimale Ziffer. Mach dir keine Sorgen, wenn du dir den Kopf kratzt. Wir werden in Kürze reinkommen. Das erste, was wir besprechen müssen, ist, dass wir dieses Konzept einer binären Ziffer besprechen müssen. Und in der Computerwelt wird das Wort binäre Ziffer oft auf das Wort aber BIT gekürzt. Siehst du diese grünen Liter, sie , okay, na ja, was ist eine binäre Ziffer? Eine binäre Ziffer kann nur 0 oder eins sein, und aus diesem Grund ist auch eine magische Zahl 2. Die meisten Computerfreaks da draußen, alle Signale innerhalb eines Computers haben zwei und nur zwei verschiedene Tage für binäre Werte. 01. Sie können also irgendwie davon ausgehen, dass es 01 ist, eingeschaltet ist, oder 0 kann falsch sein und man kann wahr sein. In der Computer-Terminologie wird eine Information, die entweder eine 0 oder eine speichern kann , als Wette bezeichnet. Mit anderen Worten, ein Bit repräsentiert Werte von 0 zu eins, IE kann es zwei Werte darstellen. Setzen Sie zwei Bits zusammen, und Sie können 012 oder drei repräsentieren. Aka Sie können vier Werte darstellen, drei, aber Sarah auf sieben Werte oder acht Werte insgesamt darstellen. Vier Bits bedeutet, dass Sie zwei auf die Stärke von vier darstellen können, das ist 16 verschiedene Veranstaltungsorte. Ich denke, wir können ad infinitum gehen, aber die Formel ist einfach. X-Bits können zwei bis zur Potenz von x-Werten darstellen. Und deshalb ist zwei eine Nummer, die für Computerspiele sehr wichtig ist. Diese werden die Basis 2 Zahlen genannt. So wie Basis 10 Zahlen sind für uns sehr wichtig. Menschen, fino teen, Finger auf unserer Hand. Tina, hundertzehnhundert, et cetra, et cetera. Das sind sehr wichtige Zahlen für den Menschen. Während viele Computerfreaks die Zahlen 2, 4, 8, 16, 32, 64, 128, 256, sechs Zitronencetra kennen . Und du wirst den Sinn von all dem in einer Sekunde sehen. Ok? Also das ist ein bisschen, ein bisschen wird schließlich ein Byte. Irgendwann kamen die frühen Computeringenieure mit Biss als nächste Einheit über ein wenig. Ein Byte ist nur als acht Bits definiert. Und das bedeutet, dass ein Bytes zwei mit der Potenz von acht Zahlen oder 256 verschiedenen Werten darstellen kann . Und wenn einer der Mindestwert eines Bytes 0 ist und der Maximalwert eines Bytes 255 ist. Oder wenn wir es in binärer Form betrachten wollen, werden es nur die acht Bits sein, die alle eins sind. Wer das angewendet hat, ist eine großartige Theorie, aber ich habe die Theorie satt. Warum wird das für uns wichtig? Praktisch? Gute Frage. Also lasst uns zurück zu unserer hexadezimalen Zahl springen. Denken Sie daran, dass wir mit einem Hashtag begonnen haben, und es wurde von sechs Ziffern gefolgt, um sich daran zu erinnern. Und bedenken Sie auch, wie bereits erwähnt, definiert das RGB-System Zahlen basierend auf roten, grünen und blauen Werten. Und im Hexadezimalsystem beziehen sich die ersten beiden Ziffern auf das Lesen. Die zweiten beiden grünen und die letzten beiden beziehen sich auf Blau. Stack macht irgendwie Sinn. Aber lassen Sie uns einen Blick auf einen dieser Werte werfen. Hexadezimalwerte können von 0 bis zum Zeichen liegen. Wenn mit anderen Worten, eine hexadezimale Ziffer 16 verschiedene Werte haben kann. Ein Kunde, der cool ist, aber es gibt nicht nur eine Ziffer für jede Farbe. Ich sehe, dass die beiden Ziffern sagen, und das ist eine gute Frage. Jetzt haben wir zwei Ziffern, jede kann 16 verschiedene Werte haben. Dies bedeutet, dass zwei hexadezimale Ziffern zusammen so kombiniert 16 mal 16 ist 256 verschiedene Farben machen können . Das beginnt irgendwie Sinn zu ergeben. So wissen wir, dass die Rate 256 verschiedene Farben annehmen kann. Das Grün kann 256 nehmen, und das Blau, was bedeutet, dass sie 16777216 sind, verschiedene Farbtöne, die durch das Hexadezimalformat produziert werden können. Woo Hoo. Ich hoffe, das sprengt dir den Verstand. Es ist wirklich faszinierend. Also, um zu meiner Logik zurückzukommen, ja, meine Aussage, dass hexadezimale Zahlen auf natürlichen Computern. Warum ist es für Computer natürlich? Die meisten einfach, weil jede hexadezimale Ziffer, so dass Sie wissen, die rot und die grüne und die blaue. Diese können als ein Byte und Bytes sehr, sehr praktisch gespeichert werden, wenn es um die Computerwelt geht, die ein ASCII-Zeichen halten kann. Und ebenso wichtig ist, dass ein Byte die de facto standardmäßige Mindestgröße der Tochter für die Speicherspeicherung ist. Und wenn ich, ich, es ist auch die minimale Größe von CPU und anderen Peripherieregistern. Nimmt dies auch als Bytes gespeichert. Unicode-Campus- oder Skripte werden normalerweise als Bytes über UTF8 codiert. Der Punkt, den ich ansprechen möchte, ist, dass Bisse sehr, sehr nützlich sind , wenn es um Computer geht. Und das ist der Grund, warum die hexadezimale Art von Format oder System, mich am intuitivsten Sinn macht. Und du denkst vielleicht, cool, wir können 16,77 Millionen Farben produzieren. Ist das genug? Und ja, es genügt. Das menschliche Auge kann nur bis zu 10 Millionen Farben unterscheiden. ist also viel mehr als genug, 16,7 Millionen zu haben. Aber Sie haben eine gute Frage gestellt und um ehrlich zu sein, gibt es andere Standards da draußen, zum Beispiel haben Sie vielleicht gezähmt gesehen, aber HDR, bezieht sich dies auf die Farbtiefe, wobei jeder RGB-Wert 30 Bit beträgt, daher zehn Bits pro Kanal anstatt unsere acht Bits. Aber wieder, es ist eine Art von Zeigern, weil das menschliche Auge nur nach einer bestimmten Menge von Farben unterscheiden kann. Du kennst das alte Sprichwort warum etwas reparieren, wenn es nicht kaputt ist. Aber zurück zu unserem Code, genau deshalb haben wir die Funktion geschrieben. Wir wollen eine Zufallszahl erzeugen. Und wir wollten eine Zufallszahl bis 16777216 erzeugen. Denken Sie daran, die mathematische Zufallsfunktion, die von JavaScript stammt, die eine Zahl zwischen 0 erzeugt, die inklusive ist und eine, die exklusiv ist. Somit ist die obige oder erzeugen Werte zwischen 0 und 16, dreifach 7.999215. Und dann verwenden wir die Mathe-Floor-Methode, um auf die nächste ganze Zahl zu runden. Und ich habe das sehr bewusst gemacht, denn jetzt, wenn wir auf die ganze Zahl runden, stimmen Sie mir zu, wir werden Werte zwischen 0 einschließlich und 16777215 einschließlich erhalten. Und Hals ist genau das, was ich wollte. Dieser Wert, 16, dreifach sieben bis 15, wird in hexadezimalen Wert konvertiert. Wenn FF, FF, FF, was habe ich zu viele f's getan, sie bedeuten, nur sechs f's sein. Daher ist das die höchste Zahl, die wir für hexadezimale Konvertierung wollen. Und wenn Sie das mit der Zahl 0 einschließen, erzeugt es 161717, 16 eindeutige Werte. Wer? Ich hoffe, das ergibt Sinn. Aber denken Sie daran, wir haben nicht angehalten. Ja, wir haben die Floor-Funktion hinzugefügt und dann mussten wir auch die toString-Methode hinzufügen. Also in der nächsten Vorlesung, weil das jetzt ziemlich lange wird, möchte ich nur kurz die ToString-Methode erwähnen, wie das funktioniert. Ich hoffe, Sie lernen eine Tonne, hoffen, dass Sie Spaß haben, und wir sehen uns, wir sehen uns in der nächsten Vorlesung. 23. Wie funktioniert die toString(): Wir sind fast fertig und sind so weit gekommen. Also hängen Sie da rein. Das wird der letzte Vortrag über uns sein. Also werden wir nur, wir haben jetzt eine zufällig generierte Hexadezimalzahl. Und bevor wir weiter gehen, möchte ich Sie nur daran erinnern, was dieses mathematische Objekt ist. Es ist ein JavaScript-Objekt, das uns automatisch in jedem Browser zur Verfügung steht. Das ist also einfach genug. Wir verwenden nur die Math.Random und die Math.Floor-Methoden. Und durch die Verwendung dieser beiden Methoden, haben wir jetzt eine Zahl Ergebnisse im Bereich von 0 und 1, sechs, dreifach sieben bis 15. Denken Sie daran, unser Hex-Format, es kann von 0, zwei Fs reichen. Zahlen zu haben ist also nicht genug. Und genau das ist, warum wir auf die toString-Methode zugreifen müssen. Diese Methode konvertiert ein Objekt oder eine Zahl, in unserem Fall haben Sie es in eine Zeichenfolge erraten. Und die gute Nachricht für uns ist, dass jedes Objekt eine ToString-Methode hat. Und fast alles in JavaScript ist ein Objekt, einschließlich dessen, was wir gerade produziert haben. Ja, ich nummeriere. Und diese ToString-Funktion akzeptiert eine einzelne optionale Parameterbasis. Die Basis gibt nur an, wie die ganze Zahl in einer Zeichenfolge dargestellt werden soll. Also sagen wir, wir haben eine Variable namens num definiert. Und lassen Sie uns nur für Argumente, nehmen Sie an, dass diese Zahl 1, 2, 3 ist. Was ist, wenn wir auf diese ToString-Methode zugreifen, aber wir haben es als Basis 2 getan, wird sich daran erinnern, dass Basis zwei binär ist, dh wir haben nur zwei Ziffern, 01. Wenn wir also auf die ToString-Methode als Basis 2 auf dieser Zahl zugreifen, würden wir das Ergebnis in binärer Form zurückgegeben, die für 1011 ist. Aber in unserem Fall haben wir nicht Basis zwei Grad verwendet, würden Sie basierend 16 verwendet werden. Denken Sie daran, hexadezimal ist Basis 16. Es besteht aus 16 verschiedenen Symbolen. So wird die obige toString-Methode die 123 in hexadezimale Form konvertieren. Es wird im obigen Beispiel, mit unserer Nummer 1, 2, 3, den Wert sieben zurückgeben. Und das ist, warum wir toString-Methode auf unserer Zahl verwenden, um es in Hexadezimalformat zu konvertieren. Ich hoffe, es ergibt Sinn. Ich hoffe, Sie haben viel angenehmer mit dem, was wir gerade getan haben. Und wie immer sind wir noch nicht fertig. Wir haben noch viel mehr zu lernen. Also genug, um auf das zu springen. Jetzt gehen wir weiter. 24. Event-Typen – Maus und Tastatur: Wir haben über Inline-Ereignishandler, Ereignishandler-Eigenschaften und Ereignis-Listener gelernt . Und in den meisten Fällen haben wir uns immer das Click-Ereignis angesehen. Aber als ich immer wieder auf den OEM anspielte, viele weitere Ereignisse im DOM. Und das bringt mich zu diesem Vortrag. Und ich möchte, dass wir gemeinsame Ereignisse besprechen. Und durch gemeinsame Ereignisse sind nur mittlere Ereignisse, die Sie am meisten begegnen werden. Aber zuerst machen wir einen Schritt zurück. Dummy-Venen sind nur Dinge, die passiert sind. Meistens wird ein Ereignis durch Benutzeraktion ausgelöst. Beispiel: Klicken Sie auf eine Maustaste oder tippen Sie auf eine Tastatur. Und wir wissen, dass bei jedem Event, egal ob es sich um ein Klick-Ereignis oder ein Tastatur-Event handelt, jedes Ereignis einzigartig ist. Es ist ein Objekt mit seinen eigenen Eigenschaften und Methoden. Dies ist ein wichtiger Punkt, über den ich hinausgehen möchte, und wir werden in Kürze Beispiele dafür sehen. Und sehr wichtig ist, dass alle Ereignisse vom Ereignisobjekt erben. Es ist eine Schnittstelle, die jedes Ereignis darstellt, das im DOM stattfindet. Und ja, jedes einzelne Ereignis, egal welchen Typ es sich handelt, erbt von diesem Ereignisobjekt. Dies könnte eine IV gewesen sein, die von einer Benutzeraktion eingedrungen wurde oder von einer API generiert worden sein könnte. Zum Beispiel, um den Fortschritt einer asynchronen Aufgabe darzustellen. Das Ereignis hätte programmgesteuert ausgelöst werden können. Sie hätten das Ereignis definieren und an das angegebene Ziel senden können , indem Sie das Venenziel und den Versand in Druckmethode verwenden. Keine Sorge, ein ERD könnte ein bisschen verwirrendes Phänomen sein. Bedenken Sie nur, dass der Punkt, den ich zu machen versuche, ist, dass es viele Arten von Vivienne sind, von denen einige andere Schnittstellen verwenden, die auf dem Hauptereignisobjekt basieren, diese schwache Schnittstelle hier. Und was wirklich cool ist, ist, dass das C schwache Objekt den Standardsatz von Eigenschaften und Methoden enthält, die allen Ereignissen gemeinsam sind. Okay, ich erwähne immer wieder, dass es Tonnen von verschiedenen Adern sind, aber was sind sie? Nun, wir haben buchstäblich eine Fülle von verschiedenen Typen. Einige von ihnen können Sie hier auf dem Bildschirm sehen. Aber wie ich bereits erwähnt habe, möchte ich nur, dass wir uns die gemeinsamen Ereignisse hier ansehen, bekannt als die Adern, denen wir die meisten S-Wave-Entwickler begegnen werden. Also lasst uns all das andere Geräusch loswerden. Und schauen wir uns einige andere gemeinsame Ereignisse an, die uns zur Verfügung stehen. Und ich weiß, dass Sie sich diese grungy ansehen könnten, oder sie nur fünf gängige Ereignisse und Antworten. - Ja. Wie die meisten der Adern, auf die wir hören werden werden in eine dieser fünf Kategorien fallen. Mausereignisse gehören, wie Sie wissen, zu den am häufigsten verwendeten Ereignissen. Und sie beziehen sich nur auf Ereignisse, bei denen das Klicken Schaltflächen auf der Maus oder das Bewegen des Mauszeigers erforderlich ist. Was ich mit Schweben und breiter meine, sieht ein schwebendes Ereignis. Nun, denken Sie daran, wenn wir mit der Maus in und Maus im Tandem verlassen, wir so ziemlich schaffen einen Hover-Effekt, der so lange dauert, wie der Mauszeiger auf Element ist. Und wir wissen, dass ein Klick-Ereignis ein zusammengesetztes Ereignis ist , das aus einer Kombination aus Maus nach unten und Maus nach oben besteht. Es gibt also wirklich viel, was wir mit dieser Maus-Kategorie tun können. Aber wir haben nicht nur Mausereignisse, Dewey. Wir haben auch eine ganze Reihe von Tastatur-Events. Und wie der Name schon sagt, werden Tastaturereignisse für Tastaturaktionen wie Drücken einer Taste, Heben einer Taste, Halten einer Taste usw. verwendet. Sie können feststellen, auf dem Bildschirm hier haben wir ein Key-Down-Event und Keypress-Ereignis am Tag irgendwie das gleiche. Ja, sie sind ähnlich, aber sie sind nicht genau gleich. - Schlüssel. Dom quittiert jede Taste, die gedrückt wird, während Tastendruck Tasten ausgibt , auch wenn es Tasten ausschließt, die kein Zeichen erzeugen. Zum Beispiel, wie die Umschalttasten out, delete, et cetera, et cetera. Und denken Sie daran, wie ich gesagt habe, dass jeder einzelne Ereignistyp seine eigenen Eigenschaften und Methoden hat. Nun, die Tastatur ist keine Ausnahme. Sie haben einen bestimmten Satz von Eigenschaften für den Zugriff in uns Informationen über einzelne Schlüssel dann umarmt haben. Lassen Sie mich Ihnen ein kurzes Beispiel zeigen. 25. Keydown: Denken Sie daran, was ich gesagt habe, dass jedes einzelne Ereignis seine eigenen einzigartigen Eigenschaften und Methoden zur Verfügung hat . Nun, jetzt möchte ich mir das Key Down Event ansehen, weil wir uns Tastaturereignisse ansehen. Also dachte ich, dies ist ein guter Zeitpunkt, um aufzuhören und ein Beispiel anzuschauen. Wie immer beginne ich mit einer sehr leeren Datei, weil ich möchte, dass wir gemeinsam codieren. Ich möchte eine sehr einfache HTML-Seite mit einem Körper erstellen. Und im Körper will ich nur ein Skript-Tag. Ich möchte nicht einmal HTML einschließen. Das wird ganz einfach sein. Und was ich tun will, ist, dass ich auf ein Schlüssel-Event im gesamten Dokument hören will. So greifen wir auf unser Dokumentobjekt zu, und darauf fügen wir den AddEventListener hinzu. Das Ereignis, das wir jetzt hören wollen, wird als „key down“ bezeichnet. Es spielt keine Rolle. Und ich möchte die Pfeilsyntax verwenden, um das Ereignis zu greifen. Und um die Daten zu bekommen. Das ist richtig, wir brauchen eine Variable und ich werde nur dieses variable Ereignis aufrufen. Und auf diesem Ereignisobjekt, das an uns zurückgegeben wird, gibt es eine Eigenschaft namens key. Diese Taste wird uns sagen, welche Taste auf unserer Tastatur gedrückt wurde. Und das ist es, was ich meine. Und minze, indem man sagt, dass jede einzelne Art von Veranstaltung ihre eigenen einzigartigen Eigenschaften hat. Das Click-Ereignis, es hat überhaupt keine Schlüsseleigenschaft, ich meine damit. Also, um es Ihnen zu beweisen, lasst uns Konsolenvene zum Schlüssel protokollieren. Also gehen wir zu tun, Lasst uns jetzt zu unserem Browser und Hoden gehen. Also natürlich sollten wir eine leere Seite bekommen, ist das, was wir erwarten. Der inspiziert dieses Dokument. Gehen wir zur Konsole, aktualisieren. Und nun lassen Sie mich die Taste a auf meiner Tastatur drücken. Schau dir diese Konsole an, protokolliert alle Werte, die ich auf meiner Tastatur drücke. Hallo Welt. Wie cool sind wir? Heute gehen wir. Dies ist nur ein Beispiel. Wenn Sie sehen möchten, welche Methoden und Eigenschaften für das gesamte Ereignis verfügbar sind, können wir nur tun, anstatt auf eine Eigenschaft für das Ereignis zuzugreifen, wir können einfach das gesamte Ereignis selbst protokollieren. Lassen Sie uns also aktualisieren und lassen Sie mich eine beliebige Taste drücken, nur meine Leertaste zum Beispiel. Und da gehen wir hin. Wir haben ein Tastatur-Event. Und innerhalb dieses Ereignisses können Sie seine Eigenschaften und Methoden sehen. Und da war übrigens der Schlüssel. Das war so und wie ich wusste, dass es eine Schlüsseleigenschaft für die starke Hoffnung gibt, dass es Sinn macht. Gehen wir zurück zur Vorlesung. 26. Event-Typen – Formulare: Herbert macht Szenen und hoffe, dass Sie Spaß haben. Also haben wir über die Tastaturereignisse gesprochen. Schauen wir uns die vier Treffen an. Und Sie können sich vorstellen, wie wichtig das ist. Für mich. Venen sind Aktionen, die sich auf Formulare beziehen, z. B. ausgewählte oder nicht ausgewählte Eingabeelemente und natürlich Formulare, die gesendet werden. Sie sind eine ganze Menge von Veranstaltungen, die uns zur Verfügung stehen, auf die wir in einem formalen Fokus aufpassen können, ziemlich interessant. Der Fokus wird erreicht, wenn ein Element ausgewählt wird, z. B. durch einen Mausklick oder wenn der Benutzer durch eine Form von Feuer navigiert, die Tabulatortaste. Und was super-duper interessant ist, dass JavaScript oft verwendet wird , um Formulare zu senden und die Täler bis zu einer Back-End-Sprache zu sehen. Und der Vorteil der Verwendung von JavaScript zum Naht von Formularen ist, dass es kein Neuladen der Seite erfordert, um das formale und JavaScript natürlich zu senden, kann auch verwendet werden, um beantwortete Eingabefelder zu validieren. Und du kennst mich mittlerweile, ich liebe Beispiele. Schauen wir uns jetzt ein Formularbeispiel an. Wie wir auf die Adern hören können und wie wir Daten aus einem Formular extrahieren und auf einem Bildschirm anzeigen können. Schauen wir uns mal an. 27. Form: Okay, also haben wir über Formulare gesprochen und wie wir mit Formularen interagieren können. Dies ist ein sehr einfaches und schnelles Beispiel. Hier auf dem Bildschirm können Sie sehen, dass es nicht so angenehm aussieht. Bilder werden vergrößert, damit Sie es etwas besser sehen können. Dieses Formular fragt nur nach dem Namen des Benutzers und sie wissen, was ihr Lieblingstier ist. Also können wir einfach meinen Namen schreiben. Und mein Lieblingstier, wie Sie wissen, ist ein Wasser. Geben Sie uns das ein. Ich möchte nur eine Nachricht zeigen, die sagt, Hi Clyde, ich würde gerne deine Togas tragen, bitte. Das hat also dynamisch aufgegriffen, was das Tier ist, das ich gewählt habe und auch meinen Namen. Wie würden wir das machen? Nun, darum geht es in dieser Vorlesung. Also werde ich die Korrelation der Skelettseite hier fett. Und dann in der nächsten Vorlesung zeige ich Ihnen die Lösung. Also lasst es uns mal gehen. Das hat angefangen. Und hier gehen wir, legen Sie eine leere Seite oder Sie wissen, was ich tun werde, lassen Sie mich tatsächlich leere Browser auf der rechten Seite. Und ich werde sagen, dass auf der linken Seite, nur damit wir es zusammenziehen können und wir den Schritt-für-Schritt-Prozess sehen können. Der erste Schritt ist, lassen Sie uns eine sehr einfache HTML-Vorlagen erstellen. Und natürlich haben wir unseren Körper in unserem Körper. Lasst uns anfangen, unser Formular zu erstellen. Das erste, was ich tun will, ist, dass ich ein Etiketten-Tag haben möchte. Und wir können einfach Name sagen, bitte. Und natürlich können wir eine Eingabe vom Typ Text haben. Dies hat nur die ID des Namens. Wenn wir das speichern und wir gehen zu einem Browsertag, wir haben Namen bitte. Und wir können unseren Namen furchtbasiert eingeben, einfach, und Sie machen dies ein bisschen größer. Und dann können wir das ein bisschen reduzieren, nur damit alles auf einer Linie steht. Und die Geheimnisse haben eine Pause und Code. Und dann können wir mit der Implementierung unserer Dropdown-Liste beginnen und gewinnen. Wir können das in ein Etikett einwickeln. Lassen Sie mich diesen Herbst einfach entfernen. Und wir können die Frage stellen, was ist Ihr Lieblingstier? Und natürlich können wir hier ein ausgewähltes Tag haben. Die ID kann tierisch sein. Dann können wir unsere Möglichkeiten haben. Und wir haben einen Hund wird reden und Ket, und natürlich müssen die Werte Kriegsgespräch und Ket sein. Und wenn ich das speichere, lasst uns einfach diese Namenshand löschen. Wir brauchen sie nicht. Ich werde nur diesen Tag retten. Regatta ist Oszillationsbox mit Hund, Hund und Katze Soda. Weit so gut. Was brauchen wir als Nächstes? Nun, wir brauchen den Absende-Button, richtig? Ein weiterer Bruch das intuitive Muster jetzt, mit einer ID der Taste. Und der Button kann sagen, „Senden“, wie ist das? Jetzt möchte ich das letzte, was ich hinzufügen möchte, ist, wenn der Benutzer auf zugelassen klickt, wir zeigen diese Nachricht direkt am unteren Rand an, wir brauchen ein HTML-Element zum Einfügen, das in nimmt. Also möchte ich ein div-Element mit der ID der Nachricht hinzufügen. Und im Moment kann dieses div-Tag leer sein. Das ist ganz in Ordnung. Und was ist dann der nächste Schritt? Nun, der nächste Schritt ist Drumroll. So greifen Sie mit JavaScript auf das DOM zu. Hier kommt der Spaß ins Spiel. Alles, was wir jetzt tun müssen, ist, dass wir unser Skript-Tag hinzufügen müssen. Und das ist irgendwie so, wie ich es dir überlassen möchte. Aber bevor ich nur bedenke, wenn wir anfangen, auf Dinge aus einem Eingabefeld zuzugreifen, ist das, was wir zu uns zurückgeben, oft ein Objekt, das ein bisschen ein Hinweis ist. Und denken Sie darüber nach, wenn Sie versuchen, auf den Namen des Benutzers zuzugreifen , ohne Ihnen zu sagen, was die Lösung ist, denken Sie einfach an die Phase, die Sie machen müssen. Nun, erstens müssen Sie einen Ereignis-Listener an etwas anhängen. Was willst du? Ein Text, der zwei getestet worden war. Das ist richtig. Wir fügen es an die Schaltfläche „Senden“ an. Und auf welches Ereignis hören Sie? Sie denken nur für das Click-Ereignis. Denn wenn der Benutzer auf diese Schaltfläche klickt, möchten Sie, dass etwas passiert. Und dann müssen Sie so ziemlich nur Ihren Ereignishandler definieren, diese Callback-Funktion. Sie müssen alle Dinge definieren, die Sie passieren möchten. Das ist alles, was es dazu gibt. Gib es mal los. Und in der nächsten Vorlesung werde ich mit Ihnen durch die Lösung gehen. 28. Form – Hinzufügen von JavaScript: Ok. Hast du es mal gefahren? Ich hoffe, Sir. Also fangen wir an, Moskito anzugehen. Was hat Stick angeboten. Nun, der erste Schritt ist hier. Lassen Sie mich eigentlich nur einen Kommentar machen. Nun, lassen Sie uns über JavaScript EBITDA auf das DOM zugreifen, und deshalb fügen wir diese Skript-Tags ein. Was ist der erste Schritt? Wenn der Benutzer auf „Senden“ klickt, soll ein Ereignis ausgelöst werden. Und als nächstes, wenn wir wollen, dass unser Handler-Code ausgeführt wird, nicht wahr? Also Schritt eins, greifen Sie den Knopf, und mittlerweile wissen wir genau, wie das geht. Wir definieren eine Variable namens Schaltfläche. Wir greifen mit unserem Hals auf unser Dokumentobjekt zu, wir greifen auf eine Methode namens get element by ID zu. Und was bedeutet die ID der Schaltfläche? Aber sehr intuitiv nennen wir es Button. Da gehen wir. Da ist unser Knopf. Lassen Sie mich das einfach größer machen. Sie müssen nicht auf den Browser schauen. Also gehen wir hin. Das ist Schritt eins. Schritt zwei. Schritt zwei ist das Hinzufügen unseres Ereignis-Listener zu der Schaltfläche. Und ja, wir greifen diesen Knopf. Wir werden auf die Add-Ereignis-Listener-Methode zugreifen. Das Ereignis, das wir hören möchten, das Click-Ereignis. Und das zweite Argument ist die Definition unserer Handler-Funktion. In diesem Fall rufen wir es einfach auf Knopfklick aus Mangel an einem besseren Wort. Und das war auch Stock, nicht wahr? Fügen Sie den Ereignis-Listener hinzu. Los geht's. Und der dritte und letzte Schritt ist was? 3, 2, 1, sicher, dass Sie es bereits erraten haben. Es definiert unsere Handler-Funktion. Und natürlich beginnen wir mit der Verwendung von JavaScript-Funktionsschlüsselwort, wir haben es auf Knopfklick aufgerufen. Und all das heiße und Rindfleisch unseres Codes wird innerhalb dieser geschweiften Klammern sein. Also gehen wir hin. Was wollen wir jetzt passieren? Nun, wenn ich nach oben scrolle, ja, denken Sie daran, dass wir dieses div mit ID der Nachricht haben. Im Moment ist es nur ein leeres div-Tag. Setzen Sie, was wir tun wollen, ist, dass wir laufen, um alle Eingaben aus dem Formular zu greifen und sie mit inaktiven einfügen. Das erste, was wir tun müssen, ist, dass wir auf dieses div zugreifen müssen. Wir müssen einen Hinweis darauf haben. Wir können seine nimmt Eigenschaft enthalten ändern. Lassen Sie uns eine JavaScript-Variable namens Nachricht definieren, wenn zwei. Wir wissen also, was es ist und wir wissen, dass wir darauf zugreifen können, indem wir das Dokumentobjekt verwenden. Wir können dann auf get Element durch ID und die ID davon ist Nachricht zugreifen. Und jetzt wollen wir den Namen des Benutzers und das Formular, das dieses Problem zuerst angeht, greifen, denken Sie vielleicht, dass wir es tun, indem Sie einen Namen definieren. Wir greifen auf das Dokument zu, wir erhalten Element nach ID und die ID ist Name. Du denkst vielleicht, dass wir das so machen. Wir scrollen nach oben. Sie können sehen, dass wir dieses Eingabefeld und ID des Namens gegeben haben. Aber wenn wir dies tun, melden Sie sich diese Konsole nur aus, Konsolenprotokollname. Was würden Sie erwarten, zu sehen? Denken Sie daran, dass ich Ihnen in der vorherigen Vorlesung einen Hinweis gegeben habe. Nun, das ist die Konsole hier öffnen. Mach das ein bisschen größer. Wenn unser Name ist, hat er Geld. Und wir gehen zu unserer Konsole und klicken auf Absenden, was glauben Sie, wird passieren? Wie Sie sehen können, ist das, was an uns zurückgegeben wird, nicht der tatsächliche Wert, aber es ist wieder ein Objekt. Und was wir jetzt tun müssen, ist, dass wir tatsächlich auf eine Eigenschaft namens Wert auf diesem Ticket zugreifen müssen , den Wert dieses Eingabetextes. Was wir hier mit Konsolenprotokoll Haupt tun, wir wollen eigentlich nicht, dass eine Konsole den Namen protokolliert, wir wollen, dass es der tatsächliche Wert sein. Und wenn ich etwas drinnen schreibe und ich gehe, gehen wir los, wir bekommen den tatsächlichen Wert. Also ergibt das irgendwie Sinn? Also lasst uns das jetzt schließen. Gehen wir zurück zu unserem Texteditor. Was ich also tun möchte, ist, dass wir nicht auf den Namen selbst zugreifen wollen , weil das uns das gesamte Objekt zurückgibt, das wir auf diese Eigenschaft namens Wert zugreifen möchten. Und natürlich ist der nächste Schritt, das Tier auszuwählen, das der Benutzer gewählt hat, oder? So spätes Tierdokument erhalten Element nach ID. Wieder. Wir haben es mit einer ID des Tieres definiert. Und wieder wollen wir auf die Werteigenschaft dieses Objekts zugreifen. Wenn wir nach oben scrollen, können Sie sehen, dass wir diesem Selektionselement eine ID von Tieren gegeben haben. So wählte ich hier das Wort Tier , das falsch gestoppt wurde. Und so gehen wir hin. An dieser Stelle haben wir alle Informationen, die wir brauchen. Der letzte und letzte Schritt besteht darin, diese Informationen als Text zu diesem div hinzuzufügen. So können wir jetzt LED-Ausgabemeldung gehen. Blättern Sie hier nach unten. Alles, was wir tun müssen, ist auf unsere Nachricht div zuzugreifen. Wir möchten den Textinhalt ändern, und hier kann ich Template-Literale verwenden. Was wollen wir sagen? Nun, es wäre unhöflich, wenn wir nicht Hallo sagen und ihn beim Namen begrüßen würden. Und dann wollen wir nur sagen, ich würde gerne dein Tier haben, bitte. Und wenn wir das speichern und wir zu unserem Browser gehen, sollte alles funktionieren. Wenn unser Name Wally ist und das Lieblingstier eine Katze ist, und du gehst, Holly, würde ich gerne dein Katzenstück haben. Und da gehen wir. Wir haben buchstäblich eine Art der Formulare verwendet, ja, mit Exit-Werten innerhalb der Formulare. Und wir haben in den Bildschirm sehr intuitiv angezeigt, sehr einfach. Ich hoffe, es ergibt Sinn und ich werde Spaß haben. Lasst uns weitermachen. 29. Event-Typen – Berührung und Fenster: Wen wir Schwein durch diese genial kreuzten. Lassen Sie uns nicht über diese Berührungsereignisse sprechen. Was sind das? Worum geht es denn? Nun, erstens möchte ich eine empfindliche wurde so nur auf Touch-fähigen Geräten wie Smartphones und Touchscreen-Laptops ausgelöst . Während diese Berührungsschluchten gut brauchten, lassen Sie uns darüber nachdenken. Mousey Venen wie auf Klick und Maus bewegen. Sie werden auf den meisten Browsern und Geräten ausgelöst. Für Smartphones und iPads und dergleichen wird die Mausbewegung jedoch nicht einmal ausgelöst, die Mausbewegung jedoch nicht einmal ausgelöst weil der Inhalt den Finger über das Telefon schwebt, zum Beispiel einige Smartphones oder das Hinzufügen von Nähten, wird dies einige mehr hinzufügen Smartphones, sollten in Zukunft keine Mausbewegungen nehmen. Aber in Fällen, in denen Sie die Maus und Bohnen nicht verwenden möchten. Wir haben diese Berührungsereignisse. Und das letzte, was ich jetzt diskutieren möchte, sind diese Fenster er gewinnt Android Sache lohnt sich, mich zu lange auf schön hüpfen weil sie ziemlich selbsterklärend sind. Sie können warten, wenn der Benutzer eine Seite nach unten scrollt für neue Größe die Seite von der Seite geladen wird, et cetera, et cetera. Sehr, sehr nützlich. singt. Cool. Aber wie auch immer, wir haben es in unglaublichen Mengen getan. Wir sind sehr, sehr weit weg. So gut gemacht. Serie D, ich denke, Sie müssen all diese Dinge, die Sie bisher gelernt haben, nehmen Sie eine Verschnaufpause, Pause, einen Kaffee, und einfach stolz auf sich selbst sein. Sears Zähne kommen durch einen Sturz weg, dass, bevor wir auf den nächsten Abschnitt gehen, Ich möchte nur, dass wir unsere Hand bei ein paar Herausforderungen versuchen. Ich bin super aufgeregt. Ich hoffe, du bist es auch. Ich seh dich jetzt. 30. Kursprojekt – Intro: Oder seltsam, das wird ein wirklich, wirklich Spaß ein paar Vorträge zu sprechen sehr kurz über Formen und wie sie funktionieren. Was ich übrigens möchte, dass wir zusammen bauen, ist genau das, was du gerade auf dem Bildschirm vor dir siehst. Und ich werde HTML und CSS von Grund auf neu programmieren, was soll ich tun? Natürlich sollten die Benutzer in der Lage sein, den Namen einzugeben. Sie können jetzt sehen, wenn ich auf dieses Eingabetextfeld geklickt habe, das Styling dieses unteren Rahmens hat sich gerade geändert. Und sagen wir, die Benutzertypen, Bob, Luka, cool. Das heißt, ich möchte, dass Sie es anzeigen, darunter, diesen Wert dieses Eingabefeld zu nehmen und es unten anzuzeigen. Und Sie können sehen, dass dies in Echtzeit geschieht. Es wird also sehr interessant sein. Wir werden auf das Eingangsereignis hören. Übrigens, was ist mit dem Zeichen von nlm? Wird, wenn der Benutzer darauf klickt, Ich ging Sie, um anzuzeigen, dass ein Submit-Ereignis ausgelöst wurde. Und ich möchte, dass du den Zeitstempel anzeigst. Und gib mir nur eine Sekunde. Lassen Sie mich diese Seite schnell aktualisieren. Lassen Sie mich einfach schnell mit etwas Code vermissen. Geben Sie mir zwei Sekunden. Okay, ich bin jetzt wieder da. Was ich möchte, dass du auch tust, ist, dass du anfängst, mit diesem Fokus-Event auf Formulare herumzuspielst. Also, was ich damit meine, na ja, wenn der Benutzer auf dieses Eingabetextfeld klickt, möchte seine Hintergrundfarbe und den Text übrigens ändern, denn jetzt, wenn der Benutzer Bob tippt, nimmt diese Bob-Eingabe nicht mehr weiß, ist es schwarz. Und wir können eine Menge anderer Dinge auf Formen tun. Dies ist kein Kurs auf Formularen. Ich werde relativ schnell sein. Aber du kannst wirklich nicht viel tun. Zum Beispiel, wenn wir Bob kopieren, wenn ich das hervorheben und oben drücken Sie einfach die Steuerung C auf meiner Tastatur. Während wir uns das ansehen, erhalten wir eine Warnung, die besagt, dass Sie Geschmack kopiert haben. Sie sind also wirklich eine Menge Ereignisse, auf die wir hören können wenn es um Formen dieser Herstellung von Szenen geht. Also würde ich Spaß haben. Und wir sehen uns in den nächsten Vorträgen. 31. Kursprojekt – Erstelle unseren HTML: Willkommen bei der Schulvorlesung. Okay, cool. Auf der linken Seite haben wir unseren Visual Studio Code-Editor. Auf der rechten Seite haben wir unseren Browser. Und im Interesse der Zeit werde ich superschnell gehen. Ja, ich werde nur schnell den HTML schneiden. Ich werde die CSAs in Echtzeit mit Ihnen teilen. Aber das ist kein Kurs auf CSS oder HTML. Also werde ich relativ schnell gehen. Wenn du nicht mitmachen willst, ist es völlig okay. Ich habe die HTML- und CSS-Dateien unten in den Ressourcen zur Verfügung gestellt. Also ohne weiteres, lassen Sie uns codieren. In Ordnung, also lass mich anfangen, unser HTML zu programmieren. Lassen Sie uns einfach eine sehr, sehr einfache Vorlagen einrichten. Alles, was ich jetzt tun werde, ist ein Header-Element zu erstellen. Und natürlich müssen wir auf unseren Stil verlinken, style.css Datei. Also, was wir noch tun werden, und übrigens, Sie können ganz oben in meinem Editor sehen, ich habe drei Dateien, meinen Index, HTML-Datei, styles.css und eine App-Datei, und ist nichts anderes in meinem Verzeichnis, das alles hat, was ich habe erstellte Wand. Ich habe diese Textdatei hier ohne Grund erstellt. Lassen Sie mich das löschen. Da gehen wir. So können Sie sehen, dass ich nur drei Dateien habe, besonders wenn ich es habe und sie alle leer sind. Also gehen wir hin. Wir haben unsere Kopfpartie gemacht und es ist jetzt verrottet unseren Körper. Und das ist es, worum ich mich kümmern will, richtig? Wir wollen uns mit Formularen beschäftigen. Und das schafft hier nur eine Klausel und nennt es eine coole Form. Wir brauchen in diesem Fall keine Aktion. Wir werden keine GET-Anfrage und Post-Anfrage an einen Server senden, also können Sie das ignorieren. Und da gehen wir. Da ist unser Formular. Wir können vorerst alles abwickeln. Und lassen Sie uns ein Label erstellen. Und das kann der Name des Benutzers sein. Los geht's. Und mit Indien können wir es vielleicht ein Span-Tag in Ihren Namen haben, die Hauptstädte in Ihren Namen. Und dann natürlich, wenn wir das speichern und wir aktualisieren, wird unser Browser nur fremde Takes sein. Was wir jetzt brauchen, ist dieses Eingabefeld, keine Sorge. Eingabetyp ist gleich Text ist in Ordnung. Nur langsam wegen der Vollständigkeit, auch wenn wir keinen Scheck verwenden werden. Dies sagen nur, dass dies Name ist, der Name des Benutzers. Und wenn wir das speichern, sind dies Eingabefeld. Also gehen wir hin. Wir haben den Namen des Benutzers. Das einzige andere, was ich ging als Submit-Button. Lassen Sie uns ein anderes Beschriftungselement erstellen. Lassen Sie uns das Etikett löschen. Und hier können wir nur ein Eingabefeld haben, aber vom Typ senden. Wir gehen Arten von MIT. Der Wert kann registriert werden. Nun, als Beispiel, Lassen Sie uns einfach ein großes U haben, speichern Sie das und Knie als unsere Anmelde-Button. Also gehen wir hin. Das ist buchstäblich alles, was ich von uns will. Hier unten möchte ich ein Skript-Tag einschließen und unsere app.js Datei referenzieren. Also da hast du es. Eine sehr, sehr einfache Form, die kein ganzes Jahr benötigt. Wir werden einige sehr interessante Dinge lernen. Und als Entwickler werden Sie die ganze Zeit über Formulare laufen. Also, bevor wir fortfahren, habe ich gerade das Styling der CSS beendet und wir werden die einfachen langweiligen alten nimmt nehmen, die Sie jetzt auf dem Bildschirm sehen. Und wir können es in etwas sehr Cooles umwandeln. Gehen wir jetzt zu unserer styles.css Datei. Und es beginnt unser CSS zu programmieren. Und wieder, ich werde es sehr einfach halten. Das ist Zugang zu unserem Formular. Denken Sie daran, dass wir es in einer Klasse von coolen Form verpackt haben, die wir unsere Indexdatei erhalten. Sie können sehen, unser Formular ist in einer Klasse namens cool für Skoda CSS-Datei eingewickelt. Zunächst definieren wir seine Breite als 70 Prozent, nur damit sie sich nicht über den gesamten Bildschirm erstreckt. Und lassen Sie uns diesem einen coolen Hintergrund geben. Hintergrund. Und der Hintergrund kann RGB 6791117 sein. Das ist nur die Farbe, die ich gewählt habe. Weißt du was, wenn ich diese Breite auskommentiere, kannst du sehen, warum ich es getan habe. Wenn ich keine Breite angebe, dehnt sich der gesamte Block über den gesamten Bildschirm. Das will ich nicht. Deshalb habe ich mich auf 70% beschränkt. Hoffentlich macht es Heiligen und Schriftgröße. Wir müssen das nicht wirklich tun. Ich schätze. Wir können es einfach als ein Ziel definieren, das es bereits ist. Also lassen Sie mich die Zeitverschwendung löschen, oder was können wir hier noch hinzufügen? Will padding wäre schöner Effekt die obere Polsterung, die rechte und untere Polsterung können unterschiedlich sein und dann natürlich kann der Aufzug ausstehend zwei in dieser Hinsicht sein, es fängt wirklich an, besser aussehen OT, lassen Sie uns eine Grenze hinzufügen um die ganze Sache herum. Kann fünf Pixel durchgefärbt sein. Und jetzt lassen Sie uns einfach eine zufällige CALEA wählen, 5368 e. Wie sieht das aus? Das ist eine coole Grenze. Was ich jetzt tun will, ist, dass ich das in die Mitte des Bildschirms schieben möchte. Weil Sie sehen können, dass es nach links geschoben wird. Und es gibt einen sehr einfachen Weg, das zu tun. Und ich kann nur seine Marge beeinflussen und sagen, abfrage-basiert einfach ändern. Jetzt möchte ich das Styling des tatsächlichen Eingabefeldes fälschen. Also alles, was wir hier tun müssen, ist, dass ich auf unsere coole Form zugreifen möchte und ich möchte die Eingabe beeinflussen. Jetzt, wenn Sie eine ganze Menge von Eingaben haben, möchten Sie manchmal genauer angeben, was wir wollen. Hier wissen wir, dass der Typ Text ist. Das ist das Einzige, was wir vortäuschen wollen. Und was wir tun wollen, ist, dass wir wieder auf Alkylform zugreifen wollen, und wir wollen das Etikett passen. Ich möchte beides gleichzeitig danken. Erstens, was ich tun will, ist, dass ich eine andere Schriftfamilie finden wollte. Gerade jetzt ist es nur ein bisschen langweilig. Und sagen wir einfach, es ist Colibri. Es ist eigentlich alles andere los zu werden. Wie sieht das aus? Eigentlich? Denk, dieser Kerl Gleichgewicht. Ja, das ist besser. Und dann lassen Sie uns einfach eine Farbe definieren, AAA. Wenn sie, fangen wir an, besser zu werden. Jetzt scrollen wir einfach ein bisschen nach unten. Ich möchte, dass wir das Etikett vortäuschen. Und ich möchte, dass die Anzeigeeigenschaft auf Block gesetzt wird. Weit besser, denn dann zumindest jetzt können wir den Sendeordner aufteilen. Das macht Sinn. Das nächste, was ich jetzt tun möchte, ist, dass ich einfach etwas Marge unten hinzufügen möchte. Nur weil das Senden Schaltflächen, um dies zu schließen, sagen Sie 10 Pixel. Wie ist das? Ja, sie wurden besser. Jetzt möchte ich Ihnen eine andere Technik zeigen. Wir müssen es in diesem Fall nicht tun, aber es wird Ihnen nur helfen, zu lernen. Ich weiß, dass es kein Kurs in CSS ist, aber dass Sie sogar ein paar Dinge daraus lernen können. Ja, sagen wir einfach, wir wollen alle Span-Elemente auswählen. Weise die übergeordneten Elemente ist ein Beschriftungselement. Gerade kommentiert, beruhigen. Aber das will ich noch tun. Und wenn Sie das tun wollen, richtig, wenn ich 0 Indexdatei bekomme, können wir sehen, dass wir dieses Span-Element erhalten wollen und sein Elternteil ein Label ist. Das wollen wir hier machen. Alles, was wir tun müssen, ist, dass wir auf unsere coole Form zugreifen. Wir wollen, dass das Etikett das Elternteil ist. Und wir wollen auf das span-Element zugreifen, das ein Elternteil von Label hat, wie die coole raffinierte Art, das zu tun, ich möchte seine Breite von bösartigen definieren, sagen wir 150 Pixel. Und ich möchte diese Spannweite nach links schweben. Und es wird es viel besser aussehen lassen. Sieh dir das an. Wie cool ist das? Nun, was ich tun möchte, ist, wenn der Benutzer in dieses Eingabefeld eingibt, dies ist nur das einfache alte, langweilige Standardstyling, das auf einen Browser angewendet wird. Und ich mag zunächst nicht, Sie können die Zecken so breit sehen, so dass Sie es nicht einmal sehen können. Es hat dieses hässliche kleine Eingabefeld grau, was ich nicht mag. Es hat Grenzen, die ich nicht mag. Seid bemüht, kreativ zu werden. Oder wir müssen hier tun, ist, dass wir auf unser COO-Formular zugreifen müssen. Denken Sie daran, wir wollen auf unser Eingabe-Tag zugreifen und wenn Sie genauer sein wollen, können Sie, indem Sie die Eingabe-Zeit angeben, können wir wissen, dass sein Eingabetyp Text ist? Erstens, was ich tun möchte, ist, dass ich diesen Hintergrund in transparent ändern und wirklich anfangen, besser aussehen. Ich möchte auch die Grenze entfernen, um die sie sagt Grenze keiner. Sieh mal, wie gut wir kommen. Es ist sehr, sehr cool. Ich will da unten einen coolen, flippigen Rand haben. Es beendet es einfach. Dies sollte gestrichelte Grenze sagen. Wir können angeben, seine Farbe ist 15 bis 19 für 235. Wie funktioniert das? Ich finde, das sieht ziemlich cool aus. Jetzt einmal ein Umriss von keiner, naja, eigentlich vor nur mir Erotik, Umriss von keiner, aber lassen Sie mich auskommentieren. Was meine ich mit diesem Umriss? Wo Sie sehen können, wenn der Benutzer auf dieses Eingabetextfeld klickt, diesen blauen Rahmen, der diese Aufnahme umreißt. Das will ich nicht. Wenn wir also zu keiner gehen und der Benutzer auf sein Eingabetextfeld klickt, gibt es keine Gliederung. Das ist alles, was ich dort getan habe. Nun, ich möchte, dass die untere Grenze etwas breiter ist. Verdächtig geben Sie eine Breite von 300 Pixel an. So sieht wirklich besser aus. Und ändern Sie einfach den Schriftstil in Kursiv. Ich werde aufstellen. Ich finde es sehr cool. Wow, das ist cool. Nun, was ich tun möchte, ist, wenn der Benutzer beginnt, in dieses Eingabefeld zu tippen, möchten wir dem Benutzer zeigen, dass er sich im aktuellen Textfeld befinden. Vor allem, wenn Sie mehr als ein Jahr hatten, wissen Sie, Vorname, Nachname, exzentrisch, cetera. Also wollen wir nun auf die Fokus-Eigenschaft zugreifen. Also alles, was wir hier wieder tun müssen, diese Xs sind cool. Telefon. Geben Sie die Eingabe an. Sie müssen diese Spitze nicht angeben. Ich zeige Ihnen nur, dass dies eine Möglichkeit ist, das zu tun. Und natürlich möchten wir alle Stylings anwenden, wenn der Fokus in diesem Eingabetextfeld aktiviert ist. Und alles, was ich hier ändern möchte, können wir eine ganze Menge Dinge tun, die alles, was ich als das untere Styling zu einem Pixel gestrichelt ändern möchte . Und ändern wir es in RGB zu 17, 255 und 169. Wie sieht das aus wie eine gelbe Farbe? Wenn der Benutzer sich also auf dieses Textfeld konzentriert, ändert sich der untere Rand die Farbe. Lassen Sie mich einfach hineinzoomen. Kannst du es dort sehen? Wer wir fast sind, fast fertig. Das Letzte, was ich tun will, ist Style-Update zu lösen, melden Sie sich an. Und jetzt sieht das ziemlich langweilig aus. Wieder, das ist überschüssig. Eine coole Form. Lassen Sie uns dann das Eingabeelement angeben, das wir wollen. Aber in diesem Fall schmeckt der Typ nicht, dass der Typ eine Submit-Schaltfläche ist. Los geht's. Was können wir tun? Wir können die Schriftfamilie tatsächlich in Calibri ändern. Schriftfamilie zu Calibri. Wie sieht das aus? Begierig? Ich finde, das sieht cool aus. Schriftarten sind jedoch ein bisschen kleiner geworden. Also möchte ich Schriftgröße ein m machen, das gleiche wie oben. Die setzen Sie den Rand nach oben. Identische aus bewegen die Dunkelheit. Ruhig genug. Ja, das ist besser. Lassen Sie uns die Hintergrundfarbe auf 57686 Uhr ändern. Es wird besser. Ich will keine Grenze, also lasst uns das entfernen. Hatte jetzt leicht abgerundete Ränder. Also der Grenzradius, lassen Sie uns nur als fünf Pixel haben. Jetzt fängt an, besser auszusehen. Es ist Haarpolsterung. Acht Pixel, zwei Pixel, acht Pixel, zwei Pixel. Wie sieht das aus? Stein nahm Masse zu beginnen, wie ein tatsächlicher Knopf auszusehen. Und schließlich können Sie kaum lesen, dass alles, was ich jetzt tun will, ist seine Farbe zu ändern. Einfach. 202 und weiter bis 19. Wie sieht das auf Einsen und das ganze Wochenende RBG, Ich werde GB. Los geht's. Viel, viel bessere Crew jetzt, wenn der Benutzer darüber schwebt, tut er nichts und ich wollte, also wieder, wir greifen auf unsere coole Form. Wir x ist unser Eingabefeld. Dieser, den wir kennen, ist ein Submit-Typ von Eingabe. Und wir wollen das Styling beeinflussen. Natürlich, wenn der Benutzer darüber schwebt. Und alles, was ich hier tun möchte, weil ich nur den Hintergrund auf 39, 40, 60 ändern möchte, ein Solo zu tun. Wenn der Benutzer also darüber schwebt, können Sie sehen, dass es dunkel wird. Also gehen wir hin. Ich habe dir gesagt, dass es hier ein sehr, sehr einfacher Vortrag sein wird. Wir haben gerade das HTML und das CSS gemacht. Und jetzt möchte ich, dass wir anfangen, JavaScript hinzuzufügen. Ich möchte, dass wir anfangen, mit diesem Formular zu arbeiten, nur damit Sie ein bisschen ein Feld bekommen können, wie Formulare funktionieren. Dies ist kein Kurs über Formulare, die buchstäblich Stunden dauern würden , um alles durchzugehen, um Formulare zu machen. Aber ich werde Ihnen in sehr kurzer Zeit sehr wertvolle Informationen geben. Also bleiben Sie motiviert und wir sehen uns in der nächsten Vorlesung. 32. Kurs-Projekt – Class und Zeitstempel: Sollen wir gehen? Wir beginnen genau dort, wo wir in der vorherigen Vorlesung aufgehört haben. Wir haben gerade unser HTML und unser CSS gestartet. Auf der rechten Seite haben wir unseren Ausgang. Aber natürlich passiert momentan nichts. Was möchte ich dir zuerst zeigen? Was ist, schauen Sie sich einfach unsere Form an. Also lassen Sie mich diesen Browser erweitern. Lassen Sie mich auf 100 Prozent verkleinern. Nun, eigentlich sind die Formen, aber lange, nicht wahr? Also hat sie einen Opcode-Cookie. Scrollen wir nach oben. Ja, ich denke, das sunnitische Prozent ist zu viel leckeres Gericht wäre 50%. Und es sieht viel besser aus. Ich will nicht mehr damit zappeln. Ok. Am ersten Tag möchte ich Ihnen zeigen, dass wir direkt von der Konsole aus auf unsere Formulare zugreifen können , sehr einfach und sehr einfach. Und eine der Möglichkeiten, wie wir auf alle Formulare auf unserer gesamten Seite zugreifen können, um auf das Dokumentobjekt zuzugreifen. Auf diesem Dokumentobjekt gibt es eine Eigenschaft namens forms. Es ist buchstäblich tot einfach und was uns zurückgegeben wird, ist eine HTMLCollection. Wir wissen bereits über HTML-Kollisionen in Reihe eins dieser zweiteiligen Serie. Dass es im Grunde zu uns eine HTMLCollection mit allen unseren Formen zurückgeben wird, in diesem Fall die Länge Welpen eins, weil wir nur eine Form haben. Und natürlich sind diese mit Klasse der kühlen Form gebildet. So können wir auf Formulare innerhalb unseres Dokuments zugreifen. Das ist das erste, was ich dir zeigen wollte. Das zweite, was ich tun möchte, ist, warum wir nicht haben, dass der Benutzer den Namen auf eine Schuld eingeben, die angezeigt werden soll. Unten ist eine Art Szenen zu machen. Wie würden wir das tun? Nun, erstens möchte ich, dass wir ein Absatzelement erstellen. Und dann mit JavaScript möchte ich, dass wir dynamisch hinzufügen, was der Benutzer in diesem Eingabefeld eingegeben hat, zu seinem Absatzelement. Lassen Sie mich Ihnen zeigen, was ich meine. Also lassen Sie uns zu unserer Indexdatei gehen und ich möchte mit jetzt voll bearbeiten. Also hier können wir nur ein Absatzelement haben und ihm eine ID der Ausgabe geben. Natürlich ist es gerade leer. Und dann können wir in unseren Stilen anfangen, es zu stylen. Und ich werde nur sehr, sehr einfaches Styling anwenden , weil ich darüber nicht harfen möchte. Und ich gebe nur die Polsterung an die Spitze eines Namens. Brett oben. Ich gebe ihm einen Massenrand oben auf einem Pixel, solide RGBA des AD1, 174 bis 28 und Nullpunkt für 45 Jahre, um diese Transparenz zu reduzieren. Und damit wollte ich die ganze Kiste betonen. Schriftgröße. Wir können ein Ziel haben und die Farbe kann nur dreifach Blatt sein. Ok, da gehen wir. Also haben wir definiert, wie unsere Ausgabe aussehen soll. Wir haben ihm einen Rand oben gegeben, weshalb wir ihn sehen, aber noch ist nichts angezeigt. Wie ich bereits erwähnt habe, wenn der Benutzer seinen Namen tippt, Bob, wollte ich, dass er unten angezeigt wird. Wie würden wir das tun? Nun, es ist sehr einfach. Ein Typ, sehr, sehr einfach. Alles, was wir tun müssen, ist mit der Programmierung JavaScript, um auf das DOM zuzugreifen, und wir wissen, wie das geht. Wir haben schon viele Beispiele gemacht. Lassen Sie uns zunächst auf unser Dokumentobjekt am Hals zugreifen. Wir können auf einen Abfrage-Selektor zugreifen und wir sind voll. Und auf diesem Formular möchten wir einen Ereignis-Listener hinzufügen. Und der Ereignis-Listener, auf den wir hören wollen, ist was wird dies sehr interessant mit Formen. Dies ist einer der Punkte, die ich machen möchte, dass wenn auf eine Schaltfläche in einem Formular geklickt wird, ein Submit-Ereignis auf dem Formular selbst ausgelöst wird, nicht auf der Schaltfläche im eigentlichen Formular selbst. Das ist eines der Dinge, die Sie wirklich Ihren Kopf umwickeln müssen weil es für Sie als Entwickler sehr wichtig sein wird. Haben Sie es? Großartig. Das war's also. Er weiß wahrscheinlich bereits, dass wir für ein Submit-Ereignis auf diesem Formular hören werden. Dann können wir natürlich unsere Hand definieren und ich mache es direkt in diesem Code genau hier. Was werden wir tun? Ich möchte unsere Ausgabe holen. Wenn der Benutzer Bob eingibt, gingen wir, um diesen Text zu greifen und wir wollen es in diesem Absatz mit ID der Ausgabe anzeigen. Also ganz oben in unserer Datei ihn, warum greifen wir nicht unser Ausgabe-Absatzelement. Ich tippe heute nicht sehr gut. Und ist nur sagen, dass wir definieren, dass als Variable Ausgabe genannt wird, dass sie Dokument Element für ID sein wird. Und die ID, die wir ihm gegeben haben, wurde ausgegeben. Sie gehen, also haben wir unseren Ausgang. Alles, was wir jetzt tun wollen, ist, dass wir unsere Ausgabe auf unseren Ausgaben greifen wollen, dass Absatz, wir wollen seine Text-Content-Eigenschaft beeinflussen. Und ja, ich werde Vorlagen verwenden, Literale. Wenn Sie nicht wissen, was zu schließen schien, überprüfen Sie bitte meinen JavaScript kompletten Großmeister-Kurs. Ein sehr, sehr cool. Aber ich möchte hier nur sagen, dass auf ein Submit-Event abgefeuert wurde. Und es wird das Dollarzeichen geschweifte Klammern verwendet, um nur unseren Zeitstempel anzuzeigen. Um den Zeitstempel anzuzeigen, müssen wir auf unser Event selbst zugreifen. Und dazu müssen wir diese Callback-Funktion geben, eine Variable, in die wir sie einfügen. Und wie ich bereits erwähnt habe, wir es in eine Variable namens e gesetzt . Wir haben eine Variable namens e, und darauf haben wir einen Zeitstempel. Also gehen wir hin. Das ist alles, was ich tun möchte, ist Code hier auszuweiten. Dann gehen wir zurück zu unserem Browser und fangen wir an, das Wort baba einzugeben. Also haben wir Bob und wenn ich auf Anmelden klicke, jetzt, was ist da passiert? Was gerade passiert ist, aber kurz angezeigt und dann verschwand es. Lassen Sie mich es Ihnen nochmal zeigen. Lass uns abreden. Klicken wir jetzt auf die Anmeldung. Es wird angezeigt und verschwindet dann. Was ist los? Ok. Lassen Sie mich einen Schritt zurück. Denken Sie daran, das erste, was ich wollte, dass Sie die Formulare verstehen, ist, dass jedes Mal, wenn auf eine Schaltfläche innerhalb eines Formulars geklickt wird, ein Submit-Ereignis ausgelöst wird. Erinnern Sie sich daran, dass ich das erweitern kann. Eigentlich ist es nicht nur eine Schaltfläche, denn wie Sie bereits wissen, war die Anmeldung jetzt kein Buttonelement. Wir haben es in ein Eingabeelement mit dem Typ von submit eingewickelt. Also lassen Sie mich meine Aussage korrigieren, die soeben gesagt hat, wird ein Submit-Ereignis auf einem Formular ausgelöst, wenn Eva at Button geklickt wird oder ein Eingabeelement, das Typ submit hat, Zack Hanna, Sinn macht. Das ist also das erste, was ich wollte. Die zweite Sache, wenn es um Formulare geht, ist, dass ein Standard? Szenen die Form Tochter zu Ihrer eigenen URL Urin Website. Und wenn es das tut, verursacht es eine Seitenaktualisierung. Das ist das Standardverhalten. Also lassen Sie mich nicht einmal etwas in das Eingabefeld eingeben und klicken Sie auf Anmelden. Nun, schauen Sie in die obere linke Ecke passierte. Lasst uns aufstehen. Es verursacht eine Auffrischung. Aber keine Sorge, wir haben aufgerufen verhindern Standard emittiert. Ich werde in das letzte Projekt dieses Kurses eingehen. Also mach dir jetzt keine Sorgen, ich werde später darüber reden. Für jetzt, nur verstehen, dass wir dieses Standardverhalten stoppen können. Also, da wir gehen, Hope macht Szenen, aber lasst uns wieder in unseren Code springen. Also, um Verhalten zu verhindern, und wieder, werde ich später in den Kurs auf uns Sedona, Spin zu langhand oder niedrige ANA jetzt tun, möchte ich auf unser Ereignisobjekt zugreifen, das wir in einer Variablen namens e setzen. Und auf diesem Objekt haben wir eine Methode namens default verhindern. Wenn wir das jetzt speichern und zu unserer Website zurückkehren, der Benutzer Bob ein und klickt auf Anmelden. Nun, da gehen wir. Ja, wir haben verhindert, dass die Seite erfrischt. Und jetzt bekommt unser Absatzelement mit ID der Ausgabe diesen Text, zeigt ihn an. Wie cool ist das? Und wir wissen, wenn auf diese Eingabe geklickt wird, wird ein Submit-Ereignis ausgelöst. Wer? Okay, das ist also irgendwie mit Formen, Gewohnheiten zu arbeiten , ein bisschen Szenen zu machen, aber ich will nicht aufhören. Ja, ich will mit ein paar weiteren Events rumspielen. In der nächsten Vorlesung möchte ich also anfangen, Dinge wie, wissen Sie, ein Input-Event und das Fokus-Event zu betrachten . Ich möchte anfangen zu sehen, wie wir diese nutzen können. Sah Hoffnung, Sie sind als Amp-Design. Wir sehen uns in der nächsten Vorlesung. 33. Kurs-Projekt – mit dem -: Wie ich bereits erwähnt habe, möchte ich mit ein paar gleichmäßigeren Typen herumspielen. A, weil es Spaß macht und B, denn es ist sehr, sehr wertvoll für Sie. Sie werden diese die ganze Zeit in Ihrer Programmierkarriere verwenden. Also lasst uns knacken. Ich möchte unsere Eingabe greifen, greifen Sie unser Eingabetextfeld. Weil wir das ziemlich viel benutzen werden. Und um dies zu tun, Lassen Sie uns eine JavaScript-Variable namens Name Text definieren. Und lasst uns es greifen, indem wir auf den Abfrageselektor in unserem Dokument zugreifen. Und was wollen wir für alles suchen, was wir wollen, um unser Eingabefeld zu bekommen, aber nicht das Submit. So können wir genauer sein. Ja. Wir können sagen, dass es vom Typ Text sein muss. Macht das Sinn? Und da gehen wir. Wir haben buchstäblich, wie benannt nimmt Box. Okay, das nächste, was ich tun will, ist, dass ich auf ein Input-Event hören möchte. Und das Ereignis wird jedes Mal ausgelöst, wenn sich der Wert der Eingabe in diesem Textfeld ändert. Wie hören wir auf diese Veranstaltung? Erstens möchte ich einen Kommentar machen, der nur sagt, lasst uns mit verschiedenen Typen herumspielen. Scrollen wir nach unten. Es ist gedacht, Codierung. Das erste, was ich tun möchte, ist, dass ich greifen möchte, ich werde Variablen nennen, mit nur Rest definieren, das ist das Eingabefeld. Ich möchte dann einen Ereignis-Listener namens input hinzufügen. Und dann möchte ich unsere Handler-Funktion direkt in hier ausführen. Alles, was ich tun möchte, ist, dass ich auf unsere Ausgabevariablen zugreifen möchte. Denken Sie daran, scrollen app, das ist unser Absatz Element. Und alles, was ich tun möchte, ist, dass ich die Text-Content-Eigenschaft passe. Und wieder werde ich Template-Literale verwenden. Der eingegebene Wert ist. Und was hier sehr cool ist, ist, dass jedes Eingabeelement innerhalb Ihrer Seite, die DOM-API uns Zugriff auf eine Menge Eigenschaften in diesem Eingabefeld gibt. Und einer von ihnen wird als Werteigenschaft bezeichnet. Und es gibt uns eine Überraschung, Überraschung. Der Wert, der in dieses Eingabefeld eingegeben wurde. Alles, was wir tun müssen, ist das Eingabefeld zu greifen, das wir in einer Variablen namens Name Text definiert haben und auf seine Werteigenschaft zugreifen. Es ist wirklich einfach. Und wenn wir jetzt auf unsere Seite gehen und wir Bob B, B eingeben , können Sie sehen, dass es den Text unten in Echtzeit aktualisiert. Ich kenne auch Baba, Baba, Baba, Baba, Baba. Also gehen wir hin. Sie können sehen, wie einfach es ist, mit Formularen zu arbeiten. Und wenn wir zu unserem Code zurückkehren, ja, denken Sie vielleicht Clyde, dieses Eingabeereignis, das nicht spezifisch geformt ist und Sie wären 100 Prozent richtig. Es ist nicht nur mit Formularen verwandt, dass ich Ihnen nur verschiedene Möglichkeiten zeige, wie wir Ereignisse mit innerer Form hören können. Und in der vorherigen Vorlesung erwähnt, dass wir das Fokus-Event haben. Also, warum spielen wir nicht damit herum? Und obwohl es möglicherweise nicht schön aussieht, wenn der Benutzer dieses Eingabefeld eingibt oder sich darauf konzentriert. Warum ändern wir nicht einfach diese Hintergrundfarbe? Also zeige ich dir einfach, wie das funktioniert. Also, um das zu tun, wieder, Lassen Sie uns auf unser Eingabeelement zugreifen, die wir in eine Variable namens Namen Text setzen. Ich möchte einen Ereignis-Listener hinzufügen. Und dieses Mal lassen Sie uns auf ein Fokus-Event hören. Und jetzt möchte ich unser Event selbst packen und es in eine Variable namens e setzen , und wir werden später im Kurs darauf eingehen. Also mach dir keine Sorgen, wenn du jetzt nicht ganz verstehst. Aber alles, was ich hier tun möchte, ist, dass ich unser Event selbst packen möchte. Ich möchte dieses Ziel bekommen, bekannt als es dieser Input selbst sein wird, der das Ereignis abwehrt. Wir wollen diese Stil-Eigenschaft auf mich beeinflussen. Wir wollen den Hintergrund ändern und wir können den Hintergrund zu hellblau ändern. Also gehen wir zurück. Lassen Sie uns nun klicken und das Eingabefeld. Und da gehen wir. Das ist der hellblaue Hintergrund. Und natürlich, dass y das schrecklich nimmt. So kannst du auch hier reingehen. Wir haben gut auf und ändern Ihr Hintergrundwissen. Wollen wir die Farbe und die Farbe ändern, die wir einfach zu schwarz ändern. Ich zeige dir nur, was du tun kannst. Offensichtlich. Meiner Meinung nach sieht es nicht so schön aus wie vorher. Das ist nur ein Beispiel dafür, dass wir diese Eingabe verwenden. O von versehentlich hatte die Anmeldung ankreuzen. Jetzt gehen wir hin. Lassen Sie mich die Seite aktualisieren. Gehen wir zurück zu unserem Code und so können wir das Fokus-Event so verwenden , wie ich irgendwie Sinn erhalte. Ich hoffe, und ja, ich versuche nur, Ihnen einen Geschmack zu geben, was Sie mit einigen dieser Dinge tun können. Wir haben auch eine Kopie von Venen, Einfügen Ereignisse, wenn der Benutzer kopiert und fügt Dinge, eine Kaffeebohnen, Schnitte, nimmt, und Schatten, um Ihnen einen Begrenzer zu zeigen, zeigen Sie. Also Listen, xs sind Text benannt. Auch hier scrollen Sie einfach nach unten. Ja, ich wollte nicht wirklich darauf eingehen, aber jetzt, da ich das erwähnte, lass es mich dir einfach schnell zeigen. Lassen Sie uns einen Ereignis-Listener namens Kopie hinzufügen. Und wieder, das ist einfach unseren Handler direkt in dieser Funktion hier auszuführen. Und das warnt nur etwas auf dem Bildschirm. Sie haben, Sie haben Text kopiert. Ich meine, mit all dem Zeug kannst du wirklich kreativ werden. Oh, da gehen wir. Gehen wir zurück zu unserem Browser. Geben wir Bob und Bob ein, und lassen Sie mich es hervorheben und Control C auf meiner Tastatur gehen. Kopieren. Und da gehen wir, wir bekommen eine Warnung, die besagt, dass Sie Text kopiert haben. Das Gleiche würde gelten. Natürlich, wenn wir hier einfügen, gehen Sie zurück zu unserem Browser. Sie haben nicht kopiert, Sie haben Text eingefügt. Wenn wir zurück zu unserem Browser gehen, haben wir darüber gesprochen, dass wir kopieren, sorry, Bob, wir kopieren es. Wir löschen alles genug. Ich kleben. Wir können Sie darauf hinweisen, dass Sie den Text einfügen. Ich schätze, du fängst an, ein paar molekulare Formen zu bekommen. Jetzt fängst du an zu sehen, wie einfach es ist, mit den Adern innerhalb der Formen zu arbeiten und nimmst dieses Wissen nicht für selbstverständlich. Sie haben wirklich viel in sehr kurzer Zeit gelernt. Sie wissen, dass ein Formular jedes Mal ein Sendeereignis sendet, wenn auf eine Schaltfläche zum Absenden geklickt wird. Oder wenn auf ein Eingabeelement geklickt wird, das den Typ „Übermitteln“ hat. Und Sie wissen, dass ein Formular die Seite standardmäßig aktualisiert hat, was wir es übrigens verhindern, und Sie wissen, wie Sie jetzt mit Ereignissen arbeiten, wenn in einem Formular. Ich weiß also, dass es sehr einfache Beispiele sind, aber ernsthaft, es wird Ihnen in Zukunft sehr helfen. Wir beginnen also erst mit diesem Kurs. Also lasst uns hier nicht aufhören. Lasst uns jetzt weiter sehen. 34. Kurs Outro: Oh, gut, und Mauern unnachgiebig so weit in den ganzen Kurs. Und für den Abschluss dieser Klasse bist du wirklich Gelehrter Walden. Ich hatte eine Menge Spaß. Und in dieser Klasse wissen Sie jetzt über VTS. Sie kennen die verschiedenen Arten von Ereignis-Listener, die wir an die Seite anhängen können. Sie wissen, was ein Ereignis-Listener ist, was ein Ereignishandler ist. Dass es beim nächsten Verlust immer einen Buttermann gibt. Aber in der nächsten Klasse werden wir ein sehr fortgeschrittenes Konzept diskutieren , wenn es um Dinge geht. Und das heißt, wir werden uns die Knotenhierarchie anschauen und dann werden wir als INK, Public und Event, Capturing, zwei sehr wichtige Konzepte diskutieren , wenn es um die Arbeit mit dem DOM geht. Also kann ich wirklich nicht warten. Also sind wir noch nicht ganz fertig mit Medien HOT, nur ein oder zwei weitere Klassen später. hoffe, Sie haben so viel Spaß wie ich, aber Sie werden sehen, wie einige wieder eine Verschnaufpause machen. Genießen Sie die Aussicht ist schön und ich sehe Sie medea Student in der sehr, sehr nächsten Verlust. Vielen Dank.