Grundlagen von JavaScript: Wie man mit Datum und Uhrzeit arbeitet

Einführung

Datum und Uhrzeit sind nicht nur wichtige Bestandteile des täglichen Lebens, sondern auch Teil der Computerprogrammierung. Ob Sie sie für die Buchung von Terminen oder die Anzeige eines Kalenders benötigen, es gibt viele Gründe, warum Sie Datum und Uhrzeit benötigen. Die Anwendungen von Datums- und Uhrzeitfunktionen sind umfangreich und äußerst vielseitig. Die Vielseitigkeit ergibt sich aus der Tatsache, dass Sie Uhrzeit und Datum basierend auf dem Benutzer konfigurieren können. Jeder Benutzer an einem anderen geografischen Standort erhält ein anderes Ergebnis basierend auf seiner Zeitzone. Diese Funktionen werden für Websites mit Terminschnittstellen und Buchungssystemen wie Restaurants verwendet.

Programmierer verwenden oft JavaScript, um Datums- und Uhrzeitfunktionen zu ihrer Website hinzuzufügen. Dies liegt daran, dass JavaScript bereits über eine integrierte Funktion verfügt für diese Aspekte. In diesem Tutorial werden wir das Date-Objekt im Detail untersuchen. Wir werden über die Methoden sprechen, mit denen Sie die idealen Einstellungen für Datum und Uhrzeit auf Ihrer Website konfigurieren können. Wir werden auch behandeln, wie Sie das Format ändern können und vieles mehr.

Was ist das Date-Objekt?

Wie wir gerade erwähnt haben, verfügt JavaScript über eine integrierte Funktion für Datum und Uhrzeit. Sie wird als Date-Objekt bezeichnet. Mit diesem Objekt können Sie zugehörige Daten für Datum und Uhrzeit ändern und verwalten. Wenn Sie eine Instanz für das Date erstellen, wird ein neues Objekt erstellt. Dieses Objekt entspricht den Datums- und Uhrzeiteinstellungen Ihres Computers zu diesem Zeitpunkt.

Um die Funktionsweise dieses Objekts besser zu verstehen, betrachten wir ein Beispiel. Wir erstellen zuerst eine Variable. Dann weisen wir ihr ein bestimmtes Datum zu. Nehmen wir an, der Tag ist Mittwoch und das Datum ist der 18. Oktober in der Zeitzone London (GMT). Werfen Sie einen Blick auf diese Konfiguration:

Unsere Ausgabe zeigt eine Datumszeichenfolge. Sie besteht aus den folgenden Daten:

Wochentag	Monat	Tag	Jahr	Stunde	Minute	Sekunde	Zeitzone
Wed	Oct	18	2017	12	41	34	GMT+0000 (UTC)

JavaScript erhält die Daten über einen Zeitstempel. Dieser Zeitstempel stammt aus der Unix-Zeit. Dies ist ein Wert, der die Anzahl der Millisekunden anzeigt, die seit dem 1. Januar 1970 um Mitternacht vergangen sind. Für den Benutzer erscheint das Datum in einem verständlichen Format. Wenn Sie diesen Zeitstempel erhalten möchten, müssen Sie die Methode getTime() wie folgt verwenden:

Obwohl dieser Wert verwirrend aussieht, repräsentiert er dasselbe wie die Datumszeichenfolge. Es ist einfach der 18. Oktober 2017.

Was ist die Epoch-Zeit?

Das nächste Konzept, das es zu lernen gilt, ist die Epoch-Zeit. Sie wird auch als Nullzeit bezeichnet. Sie können sie sich besser als die Datenzeichenfolge 01 Januar, 1970 00:00:00 Universal Time (UTC) und dem 0-Zeitstempel vorstellen. Um dies zu testen, erstellen Sie eine neue Variable. Weisen Sie sie dann einer neuen Date-Instanz mit einem 0 Zeitstempel zu:

Die Epoch-Zeit war früher der Standard für Programmierer. Es ist auch die Methode, mit der JavaScript die Zeit misst.

Formate zur Datumserstellung in JavaScript

Da wir nun wissen, wie man eine neue Date Instanz mit einer Zeichenfolge und einem Zeitstempel erstellt, können wir über die verschiedenen Formate sprechen. Es gibt vier Formate, die im Folgenden im Detail beschrieben werden:

Das bedeutet, dass Sie bei Bedarf bestimmte Daten und Uhrzeiten angeben können. Sie können auch einfach eine Datenzeichenfolge oder einen Zeitstempel verwenden, wie wir zuvor besprochen haben. Zum besseren Verständnis werden wir uns ansehen, wie man neue Date Objekte auf drei verschiedene Arten erstellt. Angenommen, unser Datum und unsere Uhrzeit sind der 4. Juli 1776 um 12:30 Uhr GMT:

Wie Sie sehen können, liefern alle drei Methoden dasselbe Datum als Ausgabe. Ein Unterschied besteht darin, dass der Zeitstempel mit einer negativen Zahl angezeigt wird, wenn Sie eine Zeit vor der Epoch-Zeit verwenden. Zudem sind Sekunden und Millisekunden in der Datums- und Uhrzeitmethode standardmäßig 0. Wenn Sie vergessen, eine Zahl einzugeben, wird diese ebenfalls standardmäßig auf 0 gesetzt.

Ein weiterer verwirrender Aspekt ist, dass der Juli durch 6 statt 7 dargestellt wird. Dies liegt daran, dass die Nummerierung mit 0 beginnt. Denken Sie an diese Dinge, wenn Sie die Instanzen erstellen.

Verwenden des get Befehls zum Abrufen des Datums

Nachdem das Datum nun eingestellt ist, wollen wir sehen, wie Sie auf seine Komponenten zugreifen können. Eine Möglichkeit besteht darin, den get Befehl zu verwenden. Diese Tabelle zeigt alle get Methoden für das Date -Objekt:

In diesem Beispiel weisen wir einer neuen Variablen ein neues Datum zu, den 31. Juli 1980:

So würde es aussehen, wenn Sie alle einzelnen Datumskomponenten mit dieser Methode abrufen würden:

In manchen Situationen benötigen Sie möglicherweise nur einen bestimmten Teil des Datums. Dazu können Sie diese Methoden verwenden. So können Sie überprüfen, ob es der 3. Oktober ist:

Das ist die Ausgabe, die Sie erhalten würden, wenn das Datum nicht der 3. Oktober wäre und Sie es daraufhin überprüfen würden.

Verwenden des set Befehls zum Ändern des Datums

Ähnlich wie bei den get Befehlen gibt es die set -Befehlsgegenstücke. Mit diesem Befehl können Sie die Datumskomponenten ändern. Diese Tabelle zeigt alle Methoden:

Angenommen, wir möchten die Variable birthday von 1997 in 1980:

Jetzt zeigt unsere Ausgabe das neue Jahr. Auf ähnliche Weise können Sie auch andere Komponenten des Datums ändern.

UTC-Datums-Methoden in JavaScript

Wenn Sie die Datumskomponenten mit der get-Methode extrahieren, erhalten Sie diese basierend auf den lokalen Systemeinstellungen der Zeitzone des Benutzers. Alternativ können Sie sie so konfigurieren, dass die Zeit basierend auf dem UTC-Standard berechnet wird. UTC steht für Coordinated Universal Time (koordinierte Weltzeit). Sie können dies mit der getUTC-Methode tun. Diese Tabelle zeigt alle UTC-Methoden für das Date -Objekt in JavaScript:

Wie Sie sehen können, ähneln alle Methoden den get -Befehlen. Die Ausgaben wären jedoch unterschiedlich. Sie können den Unterschied mit diesem Code testen:

Dieser Code zeigt Ihnen sowohl die aktuelle Stunde als auch die Stunde in der UTC-Zeitzone. Die Zahlen sind identisch, wenn Sie sich bereits in der UTC-Zeitzone befinden. Der Grund für die Verwendung von UTC ist, dass es Konsistenz über internationale Zonen und Regionen hinweg ermöglicht.

Fazit

Wir haben die verschiedenen Methoden für das Date-Objekt in diesem Tutorial behandelt. Dies beinhaltete, wie man die Datumskomponenten mit get abruft und wie man sie mit set ändert. Wir haben auch die UTC-Zeitzonen untersucht und wie man sie in JavaScript verwendet.

Letztendlich verfügt JavaScript über eine Vielzahl integrierter Funktionen für Datum und Uhrzeit. Dies macht die Programmierung komplexer Websites recht unkompliziert. Mehr über die Datums- und Uhrzeitfunktionen von JavaScript erfahren Sie im Mozilla Developer Network. Dieses Tutorial sollte Ihnen jedoch helfen, die Grundlagen abzudecken.

Hier sind weitere Ressourcen aus unserem Blog, die das Programmieren mit JavaScript erleichtern:

• JavaScript: Ein Tutorial zum Indizieren, Aufteilen und Bearbeiten von Strings
• Arbeiten mit JavaScript: Wie Prototypen und Vererbung funktionieren
• Ein Leitfaden zum Hinzufügen von JavaScript zu HTML
• Ein Überblick über das JSON-Datenaustauschformat

Viel Spaß beim Programmieren!