Daten mit dem JavaScript-Date-Objekt manipulieren

Einführung

In diesem Lab werden die Teilnehmer das leistungsstarke JavaScript-Date-Objekt erkunden und essentielle Techniken zum Manipulieren von Daten und Zeiten lernen. Durch einen umfassenden, praxisorientierten Ansatz werden die Schüler entdecken, wie man Date-Objekte mit verschiedenen Initialisierungsmethoden erstellt, spezifische Datumsbestandteile abruft, Datumsinformationen formatiert und anzeigt, Datumsangaben mit Setter-Methoden modifiziert und komplexe Datumsberechnungen durchführt.

Das Lab bietet praktische, schrittweise Anleitungen zum Arbeiten mit Daten in JavaScript und deckt grundlegende Fertigkeiten wie das Erstellen von Date-Objekten aus der aktuellen Zeit, spezifischen Zeitstempeln, Datumszeichenketten und Millisekunden seit der Unix-Epoche ab. Am Ende dieses Labs werden die Teilnehmer ein solides Verständnis der Datumsmanipulationstechniken erworben haben, was es ihnen ermöglicht, Datumsbezogene Aufgaben in ihren JavaScript-Anwendungen effektiv zu bewältigen.

Erstellen eines neuen Date-Objekts

In diesem Schritt lernst du, wie du in JavaScript neue Date-Objekte erstellst, was für das Arbeiten mit Daten und Zeiten grundlegend ist. Das JavaScript-Date-Objekt ermöglicht es dir, mit Daten und Zeiten leicht umzugehen.

Öffnen wir zunächst die WebIDE und erstellen im Verzeichnis ~/project eine neue JavaScript-Datei namens dates.js.

Erstelle ein neues Date-Objekt mit verschiedenen Initialisierungsmethoden:

// Erstellt ein Date-Objekt, das das aktuelle Datum und die aktuelle Uhrzeit repräsentiert
let currentDate = new Date();
console.log("Aktuelles Datum:", currentDate);

// Erstellt ein Date-Objekt mit einem bestimmten Datum und Zeitpunkt
let specificDate = new Date(2023, 5, 15, 10, 30, 0);
console.log("Bestimmtes Datum:", specificDate);

// Erstellt ein Date-Objekt aus einem Datumsstring
let stringDate = new Date("2023-06-15");
console.log("Datum aus String:", stringDate);

// Erstellt ein Date-Objekt mithilfe von Millisekunden seit der Unix-Epoche
let millisecondDate = new Date(1686816000000);
console.log("Datum aus Millisekunden:", millisecondDate);

Beispielausgabe:

Aktuelles Datum: Thu Jun 15 2023 12:00:00 GMT+0000 (Coordinated Universal Time)
Bestimmtes Datum: Thu Jun 15 2023 10:30:00 GMT+0000 (Coordinated Universal Time)
Datum aus String: Thu Jun 15 2023 00:00:00 GMT+0000 (Coordinated Universal Time)
Datum aus Millisekunden: Thu Jun 15 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Wichtige Punkte, die du dir merken solltest:

• new Date() erstellt ein Date-Objekt mit dem aktuellen Datum und der aktuellen Uhrzeit
• new Date(year, month, day, hours, minutes, seconds) ermöglicht das Erstellen eines bestimmten Datums
• Monate sind nullbasiert (0-11), sodass Juni durch 5 repräsentiert wird
• Du kannst Datumsangaben aus Zeichenketten oder Millisekunden seit der Unix-Epoche (1. Januar 1970) erstellen

Extrahieren der Komponenten des aktuellen Datums

In diesem Schritt lernst du, wie du spezifische Komponenten aus einem Date-Objekt extrahierst. Auf Grundlage des vorherigen Schritts verwenden wir die Datei dates.js, um verschiedene Methoden zur Extraktion von Datums- und Zeitkomponenten zu demonstrieren.

Öffne die Datei ~/project/dates.js und füge den folgenden Code hinzu:

// Erstellt ein Date-Objekt für das aktuelle Datum
let currentDate = new Date();

// Extrahiert die einzelnen Datums-Komponenten
let year = currentDate.getFullYear();
let month = currentDate.getMonth(); // 0-11 (0 = Januar)
let day = currentDate.getDate(); // Tag des Monats
let hours = currentDate.getHours();
let minutes = currentDate.getMinutes();
let seconds = currentDate.getSeconds();
let milliseconds = currentDate.getMilliseconds();

// Zeigt die einzelnen Komponenten an
console.log("Jahr:", year);
console.log("Monat:", month + 1); // Addiere 1, um die tatsächliche Monatennummer anzuzeigen
console.log("Tag des Monats:", day);
console.log("Stunden:", hours);
console.log("Minuten:", minutes);
console.log("Sekunden:", seconds);
console.log("Millisekunden:", milliseconds);

// Holt den Wochentag
let dayOfWeek = currentDate.getDay(); // 0-6 (0 = Sonntag)
console.log("Wochentag:", dayOfWeek);

// Holt den Zeitstempel (Millisekunden seit der Unix-Epoche)
let timestamp = currentDate.getTime();
console.log("Zeitstempel:", timestamp);

Beispielausgabe:

Jahr: 2023
Monat: 6
Tag des Monats: 15
Stunden: 12
Minuten: 30
Sekunden: 45
Millisekunden: 123
Wochentag: 4
Zeitstempel: 1686816045123

Wichtige Punkte, die du dir merken solltest:

• getFullYear() gibt das vierstellige Jahr zurück
• getMonth() gibt 0-11 zurück, daher addiere 1, um die tatsächliche Monatennummer zu erhalten
• getDate() gibt den Tag des Monats (1-31) zurück
• getDay() gibt den Wochentag (0-6) zurück
• getTime() gibt die Millisekunden seit dem 1. Januar 1970 zurück

Formatieren und Anzeigen von Datumsinformationen

In diesem Schritt lernst du verschiedene Methoden, um Datumsinformationen in JavaScript zu formatieren und anzuzeigen. Öffne die Datei ~/project/dates.js und füge den folgenden Code hinzu, um verschiedene Formatierungstechniken zu erkunden:

// Erstellt ein Date-Objekt für das aktuelle Datum
let currentDate = new Date();

// Methode 1: Verwenden von toLocaleDateString()
let localeDateString = currentDate.toLocaleDateString();
console.log("Lokaler Datumsstring:", localeDateString);

// Methode 2: Verwenden von toDateString()
let dateString = currentDate.toDateString();
console.log("Datumsstring:", dateString);

// Methode 3: Verwenden von toLocaleString()
let localeString = currentDate.toLocaleString();
console.log("Lokaler String:", localeString);

// Methode 4: Anpassende Formatierung
let customFormat =
  `${currentDate.getFullYear()}-` +
  `${(currentDate.getMonth() + 1).toString().padStart(2, "0")}-` +
  `${currentDate.getDate().toString().padStart(2, "0")}`;
console.log("Angepasstes Format:", customFormat);

// Methode 5: Internationalisierungs-API
let options = {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric"
};
let intlFormat = currentDate.toLocaleDateString("en-US", options);
console.log("Internationalisiertes Format:", intlFormat);

Beispielausgabe:

Lokaler Datumsstring: 15.06.2023
Datumsstring: Thu Jun 15 2023
Lokaler String: 15.06.2023, 12:30:45 PM
Angepasstes Format: 2023-06-15
Internationalisiertes Format: Thursday, June 15, 2023

Wichtige Punkte, die du dir merken solltest:

• toLocaleDateString() liefert eine lokalisierte Datumsrepräsentation
• toDateString() gibt einen menschenlesbaren Datumsstring zurück
• toLocaleString() enthält sowohl Datum als auch Zeit
• Die anpassende Formatierung ermöglicht eine präzise Kontrolle über die Datumsanzeige
• Die Internationalisierungs-API bietet erweiterte Lokalisierungsoptionen

Datum mit Setter-Methoden ändern

In diesem Schritt lernst du, wie du Datumsbestandteile mit den Setter-Methoden des JavaScript-Date-Objekts ändern kannst. Öffne die Datei ~/project/dates.js und füge den folgenden Code hinzu, um verschiedene Möglichkeiten zu erkunden, Datumswerte zu verändern:

// Erstellt ein neues Date-Objekt
let modifiableDate = new Date();
console.log("Ursprüngliches Datum:", modifiableDate);

// Setzt ein bestimmtes Jahr
modifiableDate.setFullYear(2024);
console.log("Nach dem Setzen des Jahres:", modifiableDate);

// Setzt den Monat (0-11, also 5 repräsentiert Juni)
modifiableDate.setMonth(5);
console.log("Nach dem Setzen des Monats:", modifiableDate);

// Setzt den Tag des Monats
modifiableDate.setDate(15);
console.log("Nach dem Setzen des Tages:", modifiableDate);

// Setzt die Stunden (0-23)
modifiableDate.setHours(14);
console.log("Nach dem Setzen der Stunden:", modifiableDate);

// Setzt die Minuten (0-59)
modifiableDate.setMinutes(30);
console.log("Nach dem Setzen der Minuten:", modifiableDate);

// Setzt die Sekunden (0-59)
modifiableDate.setSeconds(45);
console.log("Nach dem Setzen der Sekunden:", modifiableDate);

// Ketten von Setter-Methoden
let customDate = new Date();
customDate.setFullYear(2025).setMonth(11).setDate(31);
console.log("Benutzerdefiniertes Datum:", customDate);

Beispielausgabe:

Ursprüngliches Datum: Thu Jun 15 2023 12:30:45 GMT+0000
Nach dem Setzen des Jahres: Thu Jun 15 2024 12:30:45 GMT+0000
Nach dem Setzen des Monats: Thu Jun 15 2024 12:30:45 GMT+0000
Nach dem Setzen des Tages: Sat Jun 15 2024 12:30:45 GMT+0000
Nach dem Setzen der Stunden: Sat Jun 15 2024 14:30:45 GMT+0000
Nach dem Setzen der Minuten: Sat Jun 15 2024 14:30:45 GMT+0000
Nach dem Setzen der Sekunden: Sat Jun 15 2024 14:30:45 GMT+0000
Benutzerdefiniertes Datum: Wed Dec 31 2025 00:00:00 GMT+0000

Wichtige Punkte, die du dir merken solltest:

• Setter-Methoden ermöglichen eine präzise Änderung von Datumsbestandteilen
• Monate sind nullbasiert (0-11)
• Stunden verwenden das 24-Stunden-Format (0-23)
• Setter-Methoden ändern das ursprüngliche Date-Objekt
• Du kannst einige Setter-Methoden zur Vereinfachung verketteln

Datumsberechnungen durchführen

In diesem Schritt lernst du, wie du verschiedene Datumsberechnungen mit JavaScript-Date-Methoden durchführst. Öffne die Datei ~/project/dates.js und füge den folgenden Code hinzu, um verschiedene Datumsmanipulationsmethoden zu erkunden:

// Erstellt Date-Objekte für die Berechnungen
let currentDate = new Date();
let futureDate = new Date(currentDate.getTime());

// Fügt Tagen zu einem Datum hinzu
futureDate.setDate(currentDate.getDate() + 30);
console.log("Aktuelles Datum:", currentDate);
console.log("In 30 Tagen:", futureDate);

// Berechnet den Unterschied zwischen zwei Daten
let differenceInMilliseconds = futureDate.getTime() - currentDate.getTime();
let differenceInDays = Math.floor(
  differenceInMilliseconds / (1000 * 60 * 60 * 24)
);
console.log("Tage zwischen den Daten:", differenceInDays);

// Berechnet das Alter oder die vergangene Zeit
let birthDate = new Date("1990-01-01");
let ageInMilliseconds = currentDate.getTime() - birthDate.getTime();
let ageInYears = Math.floor(ageInMilliseconds / (1000 * 60 * 60 * 24 * 365.25));
console.log("Berechnetes Alter:", ageInYears);

// Findet den letzten Tag des aktuellen Monats
let lastDayOfMonth = new Date(
  currentDate.getFullYear(),
  currentDate.getMonth() + 1,
  0
);
console.log("Letzter Tag des aktuellen Monats:", lastDayOfMonth);

// Überprüft, ob ein Jahr ein Schaltjahr ist
function isLeapYear(year) {
  return new Date(year, 1, 29).getMonth() === 1;
}
console.log("Ist 2024 ein Schaltjahr?", isLeapYear(2024));

Beispielausgabe:

Aktuelles Datum: Thu Jun 15 2023 12:30:45 GMT+0000
In 30 Tagen: Sat Jul 15 2023 12:30:45 GMT+0000
Tage zwischen den Daten: 30
Berechnetes Alter: 33
Letzter Tag des aktuellen Monats: Wed Jun 30 2023 00:00:00 GMT+0000
Ist 2024 ein Schaltjahr? true

Wichtige Punkte, die du dir merken solltest:

• Verwende getTime(), um die Millisekunden für die Berechnungen zu erhalten
• Konvertiere Millisekunden in Tage, indem du entsprechend dividierst
• Du kannst Tage hinzufügen oder subtrahieren, indem du setDate() verwendest
• Berechne das Alter oder die Zeitdifferenzen zwischen Daten
• Überprüfe Schaltjahre, indem du den 29. Februar testest

Zusammenfassung

In diesem Lab haben die Teilnehmer gelernt, wie sie Datumsangaben mit dem JavaScript-Date-Objekt manipulieren, indem sie eine umfassende Untersuchung von Datumserstellung, -abrufung und -manipulationstechniken durchgeführt haben. Das Lab hat mehrere Ansätze zur Initialisierung von Date-Objekten behandelt, darunter das Erstellen von Datumsangaben, die den aktuellen Zeitpunkt repräsentieren, das Angeben von genauen Datumsangaben mit Parametern, das Analysieren von Datumsangaben aus Zeichenketten und das Generieren von Datumsangaben aus Millisekunden-Zeitstempeln.

Die praktischen Übungen haben Schlüsselfertigkeiten zur Behandlung von Datumsangaben in JavaScript gezeigt, wie das Extrahieren von spezifischen Datumsbestandteilen, das Formatieren von Datumsinformationen, das Anwenden von Setter-Methoden zur Änderung von Datumsangaben und das Durchführen von Datumsberechnungen. Die Teilnehmer haben praktische Erfahrungen mit nullbasierten Monatrepräsentationen gewonnen, verschiedene Strategien zur Initialisierung von Date-Objekten verstanden und die integrierten JavaScript-Methoden genutzt, um effektiv mit zeitlichen Daten in verschiedenen Programmierumgebungen umzugehen.