JavaScript-Projekt für Dummies: Altersrechner

1. Einführung: Das Projekt, das wir in diesem Video erstellen, ist ziemlich einfach. Also erstellen wir einen Altersrechner mit JavaScript. Da dieses Projekt für das Größte konzipiert ist, ist es ziemlich einfach und unkompliziert Und es gibt nur zwei Lernziele , die wir in diesem Projekt haben Das erste ist also das Erlernen der Implementierung der Kuppel in unserem JavaScript-Projekt, und das zweite besteht darin, ein Datumsobjekt zu verwenden und es auch zu manipulieren, um die gewünschten Ergebnisse zu erzielen 2. Altersberechner: Dies ist das Projekt, das wir in diesem Video erstellen werden , und wir werden den Altersrechner tatsächlich mit Hilfe von JavaScript erstellen . Also werden wir esTiml CSS nur im JavaScript verwenden. Zuallererst muss ich den VS-Code hier öffnen Also jetzt im VS-Code, was ich eigentlich tun muss, also müssen wir zurückgehen, und jetzt müssen wir sehen was wir in unserem Schätzcode tatsächlich tun müssen. Im Grunde brauchen wir also den Hering , der der Altersrechner sein wird, und dann haben wir diese Eingabe und Taste Und wenn wir danach hier den Eingabewert angeben, wählen wir einfach den Eingabewert Und wenn ich jetzt einfach auf Berechnen klicke, wird das Alter für uns im Format von Jahren, Monaten und Tagen berechnet . Also müssen wir dieses Projekt tatsächlich bauen. Also lass uns einfach zurückgehen. Und das Erste , was wir tun müssen, ist , unsere Struktur zu definieren Und innerhalb der Entwicklung brauchen wir die Anhörung, bei der es um die beiden geht Also schreibe ich einfach den Altersrechner auf. Und danach werde ich eine weitere Entwicklung haben, die die beiden Dinge beinhalten wird. Das erste wäre der Input. Es wird im Datumsformat sein, also müssen wir auf das Eingabedatum klicken. In Ordnung. Also brauche ich den Namen jetzt nicht, also werde ich diesen Wert einfach entfernen. Aber ich werde die ID hier hinzufügen. Also, da wir die Daten hier bekommen, werden wir D oder B hier aufschreiben Okay, danach, was wir hier tun müssen, müssen wir den Button hier haben Ich werde einfach den Button aufschreiben. Und innerhalb der Schaltfläche muss ich hier die ID hinzufügen. Also das wird, sagen wir, rechnen und hier im Text kann ich auch aufschreiben, rechnen. Und danach, was wir brauchen, brauchen wir hier einen Absatz, aber mit der ID, was das Ergebnis wäre, ja, genau das brauchen wir. Aber in diesem Absatz werden wir hier nichts haben. Okay? Weil der Text in unserem Absatz generiert wird, wenn wir ihm in der Eingabe einen Wert geben und wenn wir unsere Berechnungsfunktion ausführen. Im Moment wäre es also leer. Also lass uns das einfach speichern. Und was ich jetzt tun muss, ich muss das tatsächlich ausführen. Klicken wir also auf Mit Lifesaver öffnen Okay, das ist also etwas, das wir gerade in unserem Projekt haben Okay, also eine Sache, die ich hier hinzufügen muss, ist, dass ich unserem Projekt nicht am CSS arbeiten Also werde ich einfach das vorgefertigte CSS hinzufügen , das ich mit Hilfe von AIS erstellt habe. Ich werde das einfach benutzen. Aber im Moment fügen wir das nicht zu unserem Projekt hinzu. Wir werden das einfach im letzten Moment hinzufügen. Also, was wir jetzt tun müssen, müssen wir noch eine Sache hinzufügen, nämlich die JavaScript-Datei. Also werden wir es Main Door nennen, Jess. Okay, jetzt würde ich gerne in das volle Fenster gehen . Perfekt. Lass uns hier einfach die Größe erhöhen. Und jetzt wird es sichtbarer aussehen. Da wir hier also unser EstimL erstellt haben, ist das alles, was wir in unserer TML-Datei benötigen Jetzt müssen wir an unserer JavaScript-Datei arbeiten. In der JavaScript-Datei müssen wir nun zunächst verstehen, wie STML und JavaScript miteinander kommunizieren Sie kommunizieren also mit Hilfe von Dome. Also, wenn Sie nichts über die Kuppel wissen, werde ich Ihnen eine kleine Einführung in die Kuppel geben, wie sie funktioniert, was sie ist und wie wir sie verwenden können. Also dafür muss ich wieder in den Browser springen. Und ich habe hier einige Diagramme erstellt. Also lass uns hier mit dem Vollbild loslegen. Okay. Also zunächst muss ich dir hier eines zeigen, wie TML und CSS miteinander kommunizieren Also werde ich hier den Text hinzufügen , der der Dom sein wird, also das ist unsere Kuppel, und wir brauchen auch die Schätzung und JavaScript Also lege ich es einfach hierher und lege es einfach hier hin. Ich werde hier die Schätzung aufschreiben und ich werde hier JavaScript aufschreiben Die Art und Weise, wie Estimal und JavaScript miteinander kommunizieren, erfolgt also mit Hilfe von Dome Also werde ich hier einfach einen Flow erstellen. Okay? Also so werden wir das verbinden und wir können die Leitung auch hier drüben haben. Wenn Sie also etwas über den Untergang wissen und wenn Sie wissen, wie sie miteinander kommunizieren und was sie sind und wie wir das im Code verwenden können, können Sie diesen Teil der Erklärung des Doms überspringen Okay. Also, zuerst müssen wir verstehen, was ein Dom eigentlich ist. Dom ist also eigentlich die Funktion eines Browsers. Okay? Es ist eigentlich eine Browserfunktion. Es gibt also mehrere verschiedene Browserfunktionen , die wir in unserer Webanwendung verwenden. Dom ist also tatsächlich eine der Browserfunktionen , die wir in unserem Code verwenden. Also wofür es steht, es ist ein Dokumentobjektmodell und wie es eigentlich ist, wie es funktioniert. Dom ist also im Grunde die Programmier-API, okay, die wir für EstimL und Prüfungsdokumente verwenden Das ist also eigentlich eine API, die es uns ermöglicht, zwischen Javascript und Estimal zu kommunizieren Also, was wir damit eigentlich machen können. Im Grunde können wir also mit Hilfe von Dome auf die Schätzelemente zugreifen und sie mit Hilfe von JavaScript bearbeiten mit Hilfe von Dome auf die Schätzelemente zugreifen und sie mit Hilfe von JavaScript Okay, jetzt müssen wir die Struktur der Kuppel verstehen, Beispiel die Datenstruktur der Kuppel oder wie sie funktioniert oder wie sie strukturiert ist Sie können also sehen, dass die Kuppel das Javascript-Objekt ist und dass es im Baumformat strukturiert ist. Der Basispunkt oder der Zugangspunkt oder der Startpunkt des Doms ist also der Zugangspunkt oder der Startpunkt des Doms immer dann, wenn Sie den Dom in Ihrer JavaScript-Datei für Ihren Schätzcode verwenden möchten in Ihrer JavaScript-Datei für Ihren Schätzcode Sie beginnen immer mit einem Dokument Nach dem Dokument können Sie dann auf alle Schätzelemente zugreifen , die Sie in Ihrem Code haben Stammelement wird also immer Schätzwert sein . Nehmen wir an, Sie haben im Schätzcode das Haarelement und Sie haben auch das Körperelement, und im Körperelement haben Sie dann das Eschman-Element und das Absatzelement und Nehmen wir an, Sie möchten hier auf den Absatz zugreifen Also, was Sie jetzt tun müssen, zuerst werden Sie einfach das Dokument aufschreiben. Das wird der Einstiegspunkt sein, um den Domino-JavaScript-Code zu verwenden Also werden Sie zuerst das Dokument aufschreiben. Okay, lass mich es größer aussehen lassen. Also schreiben Sie zuerst das Dokument und verwenden es als JavaScript-Objekt. Da wir also wissen, dass wir hier die Punktnotation verwenden, um auf die Eigenschaften in unserem Javascript-Objekt zuzugreifen die Punktnotation verwenden, um auf die Eigenschaften in unserem Javascript-Objekt . Danach, was wir verwenden werden, werden wir einfach esTiml aufschreiben , weil das das Stammelement ist, und danach müssen wir den Hauptteil aufschreiben Ordnung. Wir müssen hier den Punkt hinzufügen, und danach werde ich den Absatz aufschreiben, wenn ich auf den Absatz zugreifen möchte. Aber nehmen wir an, wenn ich hier auf das H-ONE-Element zugreifen möchte, werde ich das H-ONE-Element hier aufschreiben. So funktioniert also das Dom-Objekt. Natürlich gibt es einfachere Möglichkeiten, auf die Elemente in unserem Schätzcode zuzugreifen, aber ich gebe Ihnen hier nur eine Vorstellung davon, wie es tatsächlich in Bezug auf die Baumstruktur funktioniert Also lass uns einfach löschen. Und danach müssen wir hier zwei verstehen. Und in der Kuppel haben wir zwei Dinge. Das erste sind die Eigenschaften, da dies das Javascript-Objekt ist, und das zweite sind die Methoden. Was Sie hier mit den Eigenschaften und Methoden machen können , ist also ziemlich einfach. Mit den Eigenschaften können Sie den Wert tatsächlich abrufen oder festlegen, wenn Sie den Inhalt eines Schätzelements ändern möchten , genau wie den Text oder etwas anderes. Und mit Hilfe der Methode können Sie eine Aktion für jedes Schätzelement ausführen , z. B. das Schätzelement hinzufügen oder löschen oder etwas anderes Es hat also zwei Dinge: die Eigenschaften und die Eigenschaften. Da wir nun wissen, wie die Kuppel funktioniert und wie sie tatsächlich funktioniert, werden wir jetzt wieder zu unserem JavaScript-Code zurückkehren und anfangen, unseren JavaScript-Code für unser Projekt zu schreiben Bevor ich das Projekt im Jz schreibe, möchte ich hier noch eine Sache erwähnen , nämlich dass ich das persönlich mache Nun ist es völlig optional, dass ich, ob Sie das tun wollen oder nicht, immer eine Art schrittweise Dokumentation über das Projekt aufschreibe , bevor ich den Code aufschreibe Es sieht also ungefähr so aus. Wenn ich es Ihnen hier zeigen kann, werde ich hier auf das Dokument eingehen. Auf dem Taschenrechner. Das ist also etwas, das ich schon einmal erstellt habe. Die Startschritte sind also eigentlich offensichtlich. Sie müssen die Estim-Datei erstellen, dann das Styling hinzufügen und dann die JavaScript-Datei erstellen Dann nach der JavaScript-Datei, was wir in unserem Code tun müssen Das müssen wir verstehen. Wenn Sie also immer diese Art von schrittweiser Dokumentation für Ihr Projekt aufschreiben , werden Sie Ihre Lösung tatsächlich erstellen , ohne den Code aufzuschreiben. Okay? Dies ist eine Art Lösung , die Sie als Referenz verwenden können , um Ihren Code aufzuschreiben. Nehmen wir das für unser Projekt an, das wir gerade erstellen, nämlich den Altersrechner. Das erste, was wir tun müssen, ist, in JavaScript haben mit Hilfe von Dom auf die Elemente zuzugreifen, die wir in unserem Schätzcode Und danach müssen wir eine Funktion erstellen , die das Alter berechnen kann Und danach müssen wir einen Event-Listener erstellen oder hinzufügen Deshalb werde ich den Event-Listener später auch erklären. Wenn Sie also sogar tiefer in Ihren Code eintauchen möchten, können Sie sogar die Schritte, die Sie ausführen werden, in Ihrer Funktion aufschreiben die Sie ausführen werden, in Ihrer Funktion Was ich hier getan habe, ist das, was Sie tun müssen, um eine Funktion zur Berechnung des Alters zu erstellen. Der erste Schritt ist das Abrufen des Eingabewerts, und Sie müssen immer daran denken, dass der Eingabewert immer im Format einer Zeichenfolge vorliegt, wenn Sie den Eingabewert aus dem Eingabeelement für die Schätzung abrufen . Deshalb müssen wir das in das Datenobjekt umwandeln , dann müssen wir die Formel hinzufügen, um unser Alter zu berechnen, und dann erhalten wir tatsächlich unseren Wert oder unser Ergebnis in Millisekunden Okay. Und dann müssen wir diese Millisekunden in Jahre, Monate und Tage umrechnen diese Millisekunden in Jahre, Monate So werden wir unsere Lösung auf unserem Projekt aufbauen unsere Lösung auf unserem Projekt Also werde ich jetzt einfach in unser Projekt einsteigen. Also das Erste ist, dass wir auf die Elemente zugreifen müssen. Also werde ich die Zugriffselemente aufschreiben. also auf das Element zugreifen, erstellen wir zuerst die Variablen hier. Ich werde Blei aufschreiben. Das wird also der Input sein. Also werde ich die Datumseingabe aufschreiben. Und hier schreibe ich das Dokument auf, weil ich auf meine Schätzdatei zugreifen wollte mit Hilfe von Java Sci Also werden wir den Dom benutzen. Und da wir gelernt haben, dass Sie für den Zugriff auf den Dom ein Dokument aufschreiben müssen. Und danach, okay, jetzt die Sache, die wir gelernt haben, also sagen wir, ich muss die Schätzung hier aufschreiben und hier einfach ein Konsolenprotokoll erstellen. Das ist also ein wirklich kurzes Beispiel nur um dir zu zeigen, wie das mit der Kuppel funktioniert Also werden wir das einfach speichern. Und jetzt müssen wir hier unseren JavaScript-Code hinzufügen. Also werde ich den Quellcode aufschreiben. Das werden die wichtigsten Dot Js sein. Jetzt gehe ich einfach zurück zu unserem Browser. Wir müssen zu einem Dokument zurückkehren. Wir müssen in die Inspektion gehen und auf Konsole klicken. Okay, im Moment können Sie hier sehen, dass es undefiniert ist. Offensichtlich, denn wenn Sie das Dokument aufschreiben, schreiben Sie hier direkt den Einstiegspunkt auf Deshalb müssen Sie die Schätzung jetzt nicht hier aufschreiben Sie können den Körper hier direkt aufschreiben. Okay? Also, wenn ich hier einfach den Hauptteil aufschreibe, kann ich auf mein Körperelement zugreifen, das wir in unserem Schätzcode im Javascript haben unserem Schätzcode im Javascript Also eine Sache, die ich bei der Erklärung der Kuppel hier falsch gemacht habe der Erklärung der Kuppel hier , dass wir den Stimulus nicht aufschreiben müssen. Okay? Also lass uns das einfach speichern und wir werden wieder hierher zurückkehren. Also gut, so wie Sie hier sehen können , haben wir unseren Körper hier. Nehmen wir an, ich möchte hier auf mein div-Element zugreifen Also wenn ich hier einfach das Div aufschreibe, wird das nicht funktionieren. Es wird uns immer einen undefinierten Wert geben , da unser Körperelement mehrere verschiedene untergeordnete Elemente hat Okay? Um auf die Elemente zuzugreifen , die wir in einem anderen Element haben, können Sie hier Kinder und Eigentum aufschreiben. Und wenn ich das hier speichere, kannst du jetzt auf alle Elemente zugreifen , die wir in unserem Körper haben. Wir haben also das div-Element und danach haben wir das script-Element. Und selbst wenn ich weiter auf das div-Element eingehe, können wir auf die Elemente zugreifen, die wir in diesem div-Element haben. Okay, was müssen wir tun, um auf die Elemente hier zuzugreifen? Wir müssen hier die quadratischen Pakete verwenden und jetzt müssen wir hier den Indexwert aufschreiben. Also hier, wenn ich Ihnen hier zeigen kann, dass wir diese Indexwerte hier für unsere Elemente haben . Um also auf das div-Element zuzugreifen, muss ich Null aufschreiben. Also haben wir hier die Null. Also wenn ich das speichere, wird auf unser Tauchelement zugegriffen. Wenn ich hier also weiter auf das Tauchelement eingehen möchte, werde ich die Kinder erneut aufschreiben. Jetzt können Sie alle Elemente sehen , die wir in unserem div-Element haben. Das ist also einer der zeitaufwändigen Wege, um auf ein Element in das Javascript zuzugreifen. Deshalb bevorzugen wir es nicht, dies zu verwenden. Wie können wir das dann nutzen? Wie können wir also wirklich schnell auf alle Elemente oder was auch immer das Element ist, das ich verwenden möchte, zugreifen das Element ist, das ich verwenden möchte, ? Es ist ziemlich einfach. Sie können die Methoden hier verwenden. Wir haben also diese drei verschiedenen Methoden , mit denen wir auf das Element zugreifen können. Wenn Sie also mit einem ID-Wert auf das Element zugreifen möchten, können Sie Get Element für ID aufschreiben. Wenn Sie die Elemente jedoch anhand des Klassennamens verwenden möchten, können Sie diese Methode hier einfach verwenden. Wenn Sie jedoch über ihren Namen auf sie zugreifen möchten, können Sie diese Methode verwenden. Sie können diese verschiedenen Methoden auch hier sehen. Und wir haben hier noch eine weitere Methode, nämlich den Abfrageselektor, mit dem wir auch auf all diese verschiedenen Arten auf das Element zugreifen können auch auf all diese verschiedenen Arten auf das Element zugreifen all diese verschiedenen Arten auf das Element Im Moment werden wir hier einfach Get Element by ID verwenden Für die Datumseingabe haben wir also den ID-Wert, der DOB ist Also werde ich hier einfach das Geburtsdatum aufschreiben. Und wenn Sie jetzt einfach das Konsolenprotokoll hier erstellen, können Sie meine Eingaben hier sehen Okay. Und genauso können wir auf unseren Button zugreifen. Also werde ich den Button hier aufschreiben. Also schreiben wir einfach die Berechnung auf und jetzt müssen wir diesen Vorgang wiederholen, also können wir das einfach kopieren und wir müssen es einfügen. Und was wir hier ändern müssen, ist nur unser ID-Wert. Lassen Sie mich das also einfach noch einmal überprüfen. Das war die Berechnung. Also können wir das einfach von hier kopieren. Und wir können das einfach hier einfügen. Okay? Ordnung. Also, was brauchen wir jetzt noch? Also ich denke, wir brauchen den Absatz auch hier. Also gehen wir zurück und können einfach eine weitere Variable erstellen , die das Ergebnis sein wird. Und hier, was ich tun muss, wir müssen diesen Vorgang wiederholen, dokumentieren, Element für ID abrufen. Jetzt müssen Sie hier den Namen der ID aufschreiben . Das ist es. Wir haben also Zugriff auf alle Elemente , die wir für unsere Funktion benötigen werden Okay? Also, was ich danach tun muss, muss ich eine Funktion erstellen. Um also eine Funktion zu erstellen, können Sie diese entweder im Fehlerfunktionsformat oder in den typischen Funktionsformaten erstellen , was auch immer Sie bevorzugen. Um das zu vereinfachen , werde ich das in unserem traditionellen Format vereinfachen Also werde ich die Funktion hier aufschreiben. Dann können wir den Namen unserer Funktion hinzufügen , die jede Funktion berechnen würde. Dann können wir unsere Klammern und dann die geschweiften Klammern hinzufügen und dann die geschweiften Klammern Okay, was wir jetzt tun müssen, zuerst werde ich hier das Konsolenprotokoll erstellen Und hier gebe ich hier nur das Consolog-Datum ein. Okay. Und eine Sache , die ich hier tun muss, ist, einen Event-Listener hinzuzufügen. Okay. Also, was ist ein Event-Listener? Im Grunde genommen handelt es sich bei unseren Schätzwerten die verschiedenen Ereignisse Wir können die Ereignisse so betrachten , als ob etwas mit unserem Element passiert Okay? Etwas passiert mit einem Element. Okay? Also zum Beispiel klickt jemand auf unseren Button. Das Klicken ist eine Art von Ereignis. Okay? Nehmen wir an, jemand bewegt Mauszeiger über unserem Text oder jemand bewegt sich einfach über ein sogenanntes Button-Dive-Element oder so, oder eine Eingabe, jemand ändert den Wert Okay? Wenn wir den Wert in der Eingabe ändern, fügen wir hier einfach ein weiteres Beispiel hinzu. Wenn wir den Wert in der Eingabe ändern, ist das Ändern des Werts eine Art Ereignis. Also, wie funktioniert der Event-Listener? Event-Listener bedeutet einfach, dass jedem Eintreten eines bestimmten Ereignisses natürlich definieren , dass Sie, wann immer dieses bestimmte Ereignis eintritt, dies oder Sie tun dies, oder sagen wir, Sie nennen dieses Funktier in etwa so Nehmen wir an, ich möchte einen Event-Listener hinzufügen, der jedes Mal, wenn ich hier auf meine Schaltfläche klicke Wenn ich also hierher zurückkehre, also jedes Mal, wenn ich auf diese Schaltfläche klicke, möchte ich, dass etwas passiert Ich möchte eine Funktion ausführen, ich möchte ein Konsolenprotokoll erstellen oder so etwas Ähnliches. Also, wie können wir das ziemlich einfach machen. Um also den Event-Listener zu Ihrem Element hinzuzufügen , was Sie im Grunde tun, werden Sie zunächst den Namen Ihres Elements aufschreiben , was auch immer es ist, es kann die Schaltfläche sein Es kann eingegeben werden, es kann ein Absatz oder etwas anderes sein. Dann schreibst du auf und fügst Event-Listener hinzu. Das ist also eine Methode hier. In dieser Methode müssen Sie also zwei Dinge definieren. Also das Erste wären die Ereignisse. Sie können diese Werte also hier sehen. Also wir haben den Abod, wir haben den Animations-Cancel, wir haben den Blur, wir haben Cancel, wir lassen Ken spielen Sie können also all diese verschiedenen Werte hier sehen. Das sind also alles verschiedene Arten von Ereignissen, die wir auf unseren Schätzwerten haben. Offensichtlich funktionieren nicht alle Ereignisse für alle Elemente. Nehmen wir an, die Schaltfläche kann das Klickereignis enthalten, also schreiben wir es einfach auf, klicken Sie hier. Also wähle ich einfach den Klick aus. Also hier im zweiten Wert oder im zweiten Argument werden Sie tatsächlich eine Callback-Funktion hinzufügen Okay, also eine Sache, die ich erwähnen musste, aber ich habe vergessen zu erwähnen, dass Sie ein grundlegendes Verständnis von Javascript haben müssen grundlegendes Verständnis von Javascript haben bevor Sie dieses Projekt durchführen Sie müssen verstehen, was die Variablen sind, was die Datentypen sind? Wie können Sie den Eingaben den Wert zuweisen? Wie kann man eine Funktion erstellen? Was sind die Arrays? Was sind die Objekte? Wie können Sie auf die Eigenschaften im Array oder auf die Objekte zugreifen ? Und wie können Sie eine Methode im JavaScript-Objekt erstellen? Und was ist die Callback-Funktion? Sie müssen also über ein gutes Verständnis von JavaScript verfügen , bevor Sie dieses Projekt erstellen Okay. Jetzt müssen wir hier die Callback-Funktion hinzufügen Aber als kurze Definition, die ich Ihnen zur Callback-Funktion geben kann, bedeutet die Callbank-Funktion einfach, dass Sie innerhalb einer anderen Funktion aufrufen Hier ist der Listener zum Hinzufügen von Ereignissen also eine Art Funktion. Und jetzt werden wir darin eine weitere Funktion definieren Sie können also direkt darin aufrufen und funktionieren oder Sie können die bereits definierte Funktion verwenden , die wir hier erstellt haben, oder ich kann das Consolo einfach hier ausführen. Lassen Sie uns jetzt einfach das Consolo hier machen. Also werde ich hoch vom Knopf aus aufschreiben. Perfekt. Okay, jetzt gehe ich einfach zurück zu unserem Browser. Okay, ein Problem, das Sie hier sehen werden, ist, dass wir dieses Konsolenprotokoll jedes Mal haben mussten , wenn wir auf diese Schaltfläche klicken. Okay, aber das haben wir schon. Also wenn ich jetzt einfach auf die Aktualisierung klicke, kannst du das sehen. Wir haben bereits dieses Konsolenprotokoll und wir wollen es nicht hier haben. Nun, was wir in unserem Code hier tun müssen : Wann immer Sie etwas in Ihrem Event-Listener zu Ihrer Callback-Funktion hinzufügen , müssen Sie dies in eine Funktion einbinden Okay? Nun, da wir wissen, dass wir zum Hinzufügen der Funktion zwei verschiedene Möglichkeiten haben: die Terena-Methode, die Art, wie wir die Funktion hier erstellt haben, und die zweite ist, dass Sie die Pfeilfunktion verwenden können Die Pfeilfunktion ist also ziemlich einfach. Sie können hier einfach die Klammern verwenden, hier einfach den Pfeil verwenden, und so binden Sie das Konsolenprotokoll in Ihre Pfeilfunktion Aber nehmen wir an, wenn Sie die Pfeilfunktion nicht verwenden möchten, schreiben wir die Funktion einfach hier auf, und jetzt müssen wir diesen Namen nicht hier aufschreiben , weil wir ihn als Callback verwenden Wir müssen hier die geschweiften Klammern verwenden, und das wird jetzt Also, wann immer wir auf Berechnen klicken, haben wir unseren Button Sie können die Änderung der Zahl also hier sehen. Da wir denselben Wert haben, wird dieser in der neuen Zeile nicht aktualisiert. Okay? Also funktioniert es einfach. Aber nehmen wir an, wenn Sie die Funktion hier direkt hinzufügen, würde es gut funktionieren. Okay? Aber wenn Sie dafür direkt einen Ausdruck hinzufügen möchten, müssen Sie ihn in die Funktion einbinden. Aber wir wollen dem eine direkte Funktion hinzufügen. Also werden wir hier einfach unsere Funktion hinzufügen. Also werden wir hier einfach das Alter aufschreiben und berechnen. Okay, wir müssen hier also keine Klammern hinzufügen. Es wird ohne die Klammer funktionieren. Okay? Wir müssen das nicht nennen. Wir müssen hier nur den Namen unserer Funktion hinzufügen. Also lass uns das speichern und jetzt, wann wir zurückgehen, und auf die Berechnung klicken. Wir werden hier unseren Input haben. Okay? Also so wird es funktionieren. Also haben wir unseren Event-Listener hinzugefügt. Wir haben unsere Funktion hinzugefügt. Wir haben Zugriff auf alle Elemente, die wir benötigen. Was wir jetzt tun müssen, ist die Hauptsache. Jetzt müssen wir an unserer Funktion arbeiten. Also müssen wir hier unsere Funktionalität ausführen. Okay. Wenn ich jetzt hierher zurückgehe, können Sie hier eine Sache sehen, dass wir mit der Eingabe nicht wirklich den Wert der Eingabe erhalten, da wir den Wert davon bekommen wollen. Wenn Sie also auf das Eingabeelement im Javascript zugreifen , um auf den Wert zuzugreifen, schreiben Sie hier immer die Eigenschaft auf, bei der es sich um einen Punktwert handelt. Wir werden den Punkt hier hinzufügen. Jetzt können Sie hier auf den Wert zugreifen. Wenn ich das also einfach speichere und einfach hierher zurückgehe und den Wert hier berechne, können Sie sehen, dass wir die leere Zeichenfolge haben, weil ich hier nichts zu unserer Dateneingabe hinzugefügt habe. Also fügen wir hier einfach irgendeinen Wert hinzu, also gehen wir zurück. Fügen wir hier jetzt einfach einen beliebigen Wert hinzu. Klicken Sie auf diesen Wert, klicken Sie auf Sieben, klicken Sie auf Berechnen. Jetzt kannst du das sehen. Wir haben hier unseren Datumswert. Okay. Also so werden wir den Wert ermitteln. Also muss ich hier eine weitere Variable erstellen, das wäre das Geburtsdatum oder wir können das Geburtsdatum aufschreiben, und wir werden hier das neue Datum aufschreiben Deshalb verwenden wir hier das neue Datum. Der Grund dafür ist, dass jedes Mal, wenn Sie den Wert aus dem Eingabeelement für die Schätzung abrufen , das wir haben, der Wert immer im Zeichenkettenformat zurückgegeben Wenn ich das Konsolenprotokoll hier also sehr schnell mache, also wir haben das Konsolenprotokoll, werden wir den Punktwert der Tageseingabe aufschreiben . Und um den Typ des Werts zu überprüfen, können wir hier einfach den Typ des Schlüsselworts aufschreiben und es wird uns den Datentyp unseres Werts mitteilen. Wenn ich also einfach auf Berechnen klicke, kannst du sehen, dass wir die Zeichenkettenwerte haben. Okay. Nun, was wir tun müssen, wir müssen tatsächlich konvertieren, also werde ich das einfach hier aufschreiben. Wir müssen diese Zeichenketteneingabe in ein Tagesobjekt umwandeln. Okay. Wenn Sie also mit dem Datumsobjekt nicht vertraut sind, können Sie das einfach googeln. Das Datumsobjekt ist also einfach das Objekt, das wir im Javascript haben das die Datumswerte am Datum behandelt. Okay, das tatsächliche Datum. Im Moment behandeln sie unseren Datumswert als Zeichenfolge. Aber wann immer wir dies in unser Datumsobjekt konvertieren, wird es als das echte Datum behandelt. Der Vorteil davon ist also, dass wir die Werte subtrahieren können, wir können die Daten voneinander subtrahieren Wir können sie hinzufügen, sodass wir viele Dinge mit dem Datenobjekt machen können viele Dinge mit dem Datenobjekt Nur als Referenz, ich werde es hier einfach aufschreiben. Wir werden zu Google gehen. Was können wir mit dem Datenobjekt im Java-Skript machen, und jetzt werden Sie in der Lage sein, alle Vorteile zu verstehen, die es hat. Sie können diese integrierten Methoden verwenden , um diese Daten zusammenzuführen und zu verwalten Sie haben also viele Vorteile dafür. Wir müssen das also tun , weil wir unser Geburtsdatum vom aktuellen Datum subtrahieren werden unser Geburtsdatum vom aktuellen Datum subtrahieren Was wir also tun müssen, um unseren Zeichenkettenwert in unser Datenobjekt umzuwandeln , ist, dass Sie hier einfach die neue Datumskonstruktorfunktion aufschreiben und dann den Wert eingeben, und dann den Wert eingeben Sie in das Datumsobjekt konvertieren möchten Wenn ich jetzt einfach das Konsolenprotokoll mache, werden wir unseren Wert im Datumsformat haben Wir gehen zurück zum Dokument und klicken auf Berechnen. Jetzt können Sie sehen, dass wir den Wert im Datumsformat haben. Ich brauche noch einen Wert, der der aktuelle Wert sein wird. Okay? Also fügen wir , sagen wir, heute hinzu, und das wird das neue Datum sein. Um nun das Datumsobjekt des heutigen Datums zu erstellen, müssen Sie nichts in die Klammern schreiben Dadurch erhalten Sie das Datumsobjekt des heutigen Datums oder des heutigen Werts Also wenn ich das einfach in der Konsole anmelde, wenn ich jetzt einfach auf Berechnen klicke, kannst du das sehen Wir haben unseren aktuellen Wert und der erste Wert ist das, was wir hier in der Eingabe angegeben haben. Okay, jetzt müssen wir noch eine Sache tun. Um das Alter zu berechnen, was wir eigentlich tun müssen, müssen wir unsere Geburtsdaten vom heutigen Wert subtrahieren unsere Geburtsdaten vom heutigen Wert Okay? Also das wären die Geburtsdaten und wir werden eine weitere Variable erstellen , nämlich das Alter. Jetzt schreibe ich einfach den heutigen Tag und Minus auf und jetzt schreiben wir das Geburtsdatum auf. Das ist der Vorteil, den wir mit dem Datenobjekt haben, dass Sie die Datumswerte direkt mit dem Datenobjekt subtrahieren können Datumswerte direkt mit dem Datenobjekt subtrahieren Also werden wir das Konsolenprotokoll hier noch einmal erstellen. Also, jetzt klicke ich zuerst auf Berechnen, Sie werden diesen numerischen Wert hier haben. Also, was ist das? Also das ist eigentlich dein Wert, dein Datumswert in Millisekunden Jetzt, da wir diesen Wert in Millisekunden berechnen, füge ich das als Befehl hinzu, um den Vorteil in Millisekunden zu ermitteln diesen Wert in Millisekunden berechnen, füge ich das als Befehl hinzu, um den Vorteil in Millisekunden zu ermitteln. Okay. Also, was wir jetzt tun müssen, müssen wir unsere Millisekunden in die Jahre, in die Monate und die Tage umrechnen Das ist eigentlich ein ziemlich kniffliger Teil. Wenn Sie das also zum ersten Mal tun, wird es Ihnen Probleme bereiten. Okay? Aber wenn du das in kleinere Schritte aufteilst, dann wird es leicht sein. Okay, der erste Schritt wäre also, dass ich mein Alter in die Jahre ändern muss, mein Alter in die Jahre ändern muss. Okay, also wie wirst du das machen? Okay? Also ist es ziemlich einfach. Da wir das zum ersten Mal machen , können wir das, was wir tun können, nehmen oder wir können im Internet nach dieser Lösung suchen . Okay. Also hier, ich wollte hier nur eine Sache hinzufügen. Ich baue dieses Projekt aus der Perspektive auf, dass Sie als Anfänger tun es als Anfänger tun und viele Dinge nicht wissen. Und das ist eigentlich in Ordnung , denn das ist der Prozess. Wenn Sie also nichts wissen und darauf eine Lösung aufbauen wollen , was tun Sie dann eigentlich? Sie suchen tatsächlich nach der Lösung. Also werde ich dir auch beibringen wie man nach der Lösung sucht oder wie man nach etwas sucht , das man nicht kennt. Also werden wir nach einer Lösung suchen. Der erste Schritt ist also, oder die erste Aufgabe besteht darin, unseren Millisekundenwert in Ohren umzurechnen Also gehen wir einfach zu Google. Okay. Jetzt haben wir also zwei Möglichkeiten. Wenn du das wirklich schnell machen willst, kannst du einfach zum Hut JBT gehen und ihn bitten, dir die Formel oder so etwas zu geben , um die Millisekundenwerte in das Ohr umzurechnen, oder du kannst auch bei Google danach suchen Okay. Also bei Google danach zu suchen ist eigentlich der traditionelle Weg oder der Weg, der vor der AA verwendet wurde, aber Sie können auch die AA verwenden, wenn Sie möchten. Aber die Idee ist, dass Sie die Lösung finden müssen. Man muss wissen, wie man die Lösung findet und all das Zeug. Also werde ich einfach aufschreiben, wie man in JavaScript Millisekunden in Jahre umwandelt Millisekunden in Jahre umwandelt Okay, wir können in das Datenobjekt schreiben. Also können wir diesen haben. Also werden wir das in das Es umwandeln. Das kannst du sehen. Wir haben tatsächlich eine Lösung, die wir erwarten oder die wir entwickeln werden. Also müssen wir die Millisekundenwerte in die s, Monate und die Daten umrechnen in die s, Monate und die Daten Also gehen wir einfach da runter, und jetzt können Sie die Lösung auf mehreren dieser verschiedenen Ressourcen finden auf mehreren dieser Was auch immer Sie bevorzugen, zu verwenden, was auch immer Ihnen leicht fällt, Sie können einfach da reingehen und der Lösung suchen. Also gehen wir in den So-Flow ein. Wir können in den Github gehen und auch nach dem Medium suchen , wenn es hier ein Medium gibt. Ich bin mir nicht sicher. Gehen wir hier also auf den SO-Flow ein. Sie können hier sehen, dass sie uns beim Takeover alle Lösungen oder den gesamten Zeitplan gegeben haben, den wir benötigten. Wenn Sie das also in Minuten umrechnen möchten, können Sie das einfach in den Fehlschlag umrechnen . Wenn du das in uns, Tage, Monate und Jahre umrechnen möchtest, kannst du das einfach von hier aus tun. Okay. Also was wir hier eigentlich tun müssen, ist ziemlich einfach. Jetzt gehen wir einfach zurück und versuchen, das Problem zu lösen, sagen wir, mit den Lösungen oder den Referenzen, die wir erstellt haben. Also werde ich einfach eine Variable erstellen, die Jahre ist. Okay. und danach, okay, da wir wissen, dass unser Alterswert in Millisekunden ist, also werde ich Sie fragen, ob wir, um die Millisekunden in Sekunden umzurechnen, welcher Wert, den wir benötigen, eigentlich die Tausend Also hier wäre der Alterswert, und danach, okay, da wir wissen, dass unser Alterswert in Millisekunden ist, also werde ich Sie fragen, ob wir, um die Millisekunden in Sekunden umzurechnen, welcher Wert, den wir benötigen, eigentlich die Tausend sind? Denn in einer einzigen Sekunde haben wir die tausend Millisekunden . Also werden wir hier einfach 1.000 Millisekunden aufschreiben, um unseren Millisekundenwert in Sekunden umzurechnen Nun, da wir das auch in Minuten umrechnen wollen , also wissen wir, dass wir in einer einzigen Minute die 60 Sekunden haben. Also werden wir das einfach mit 60 multiplizieren, und jetzt müssen wir diesen Wert in Rs umrechnen. Da wir also wissen, dass wir für ein einzelnes R 60 Minuten haben. Also werden wir hier einfach 60 hinzufügen. Und jetzt, da wir wissen, dass wir an einem einzigen Tag, wie viele Rs wir haben, es tatsächlich 24 sind. Wir werden hier einfach die 24 hinzufügen. Und jetzt würde das tatsächlich unsere H-Werte in Tage umrechnen. Das werden also die Tage sein, nicht die Jahre. Also werden wir einfach zuerst die Tage aufschreiben. Jetzt können wir mit Hilfe unserer Tageswerte all die Dinge berechnen, die wir benötigen. Jetzt können wir das auch mit dem CharGBT oder so nehmen mit dem CharGBT oder Wir können also einfach überprüfen , ob das funktionieren wird oder Also werde ich zum Char JBT gehen , um zu überprüfen, ob das funktionieren wird oder nicht Also werden wir hier einfach die GPD aufschreiben. Perfekt. So wirst du also Dinge fragen. Ich werde hier eine Aufforderung aufschreiben, mit der ich überprüfen möchte, ob ich mit diesem Code Millisekunden in Tage umrechne, wenn man bedenkt, dass das Alter Millisekunden ist wenn man bedenkt, dass das Alter . Alter ist der Millisekundenwert, ungefähr so. Okay, das ist also tatsächlich richtig. Also haben wir das ziemlich richtig gemacht. Okay, also eine Sache, die wir noch hinzufügen müssen, aber zuerst gehen wir wieder hierher zurück. Lass uns einfach ein Konsolenprotokoll über unsere Tage geben. Also spar dir das. Wir gehen zurück zum Dokument. Wir werden auf Berechnen klicken, und jetzt können Sie das sehen. Wir haben diese Werte im Laufe der Tage. Also haben wir einfach die Millisekunden in Tage umgerechnet. Sie können aber auch sehen, dass wir diese Dezimalwerte haben Jetzt wollen wir diese Werte nicht haben. Wir müssten also die mathematische Punktflussmethode verwenden. Also, was das eigentlich bewirken würde. Das wird unseren Wert also tatsächlich auf die nächste ganze Zahl runden . Okay. Also, ich speichere das einfach und wir werden unseren gesamten Wert hier haben, nicht den Dezimalwert. Okay, das ist also perfekt. Also das sind die Tage. Also, was wir tun müssen, jetzt müssen wir das zuerst in die Ohren umrechnen. Also schreiben wir links Ohren auf und das ist, sagen wir, Kumpel, Punkt Flow, und das sind Tage, geteilt durch 365. Und ich denke, wir müssen auch einige Dezimalwerte hinzufügen. Aber lass uns einfach wieder hierher zurückkehren. Lass uns das einfach mit in den Pfahlüberlauf nehmen. In Ordnung, ich denke, das ist perfekt. So können wir das auch später mit dem JAGPT überprüfen. Okay? Jetzt machen wir einfach das Consolo der Ohren. Das ist perfekt Lass uns einfach zurückgehen. Und hier auf rechnen klicken und schon tragen wir die Jahre. Also, wenn dein Geburtsdatum 2010 ist, dann wirst du etwa 14 Jahre alt sein. Wir haben also den Jahreswert. Jetzt müssen wir den Wert unseres Monats ermitteln. Wie werden Sie also den Wert des Monats ermitteln? Okay, um in die Monate umzurechnen, müssen wir zuerst die Erinnerungstage der Jahre ermitteln, müssen wir zuerst die Erinnerungstage der weil wir hier den Md-Punktfluss verwendet haben und der Wert tatsächlich abgerundet wird . Deshalb brauchen wir auch die Tage, das sind die verbleibenden Tage hier. Also, wie du das machen wirst, ist ziemlich einfach. Sie werden die verbleibenden Tage ungefähr so aufschreiben , und das wird, sagen wir, die Modulus-Division von Tagen sein , dann 365 So wird es funktionieren. Okay? Jetzt können Sie den Wert einfach hier abrufen. Sie können die verbleibenden Tage aufschreiben. Perfekt. Ich mache hier einfach den Consolo. Ordnung, also hier werde ich auch den mathematischen Punktboden hinzufügen , damit wir hier den Dezimalwert vermeiden können Also werden wir einfach diesen Wert hinzufügen. Okay, eine Sache hier: Zum ES-Wert,