JavaScript Date Objekt

Das Date-Objekt dient der Speicherung von Datum- und Zeitangaben. Darüber hinaus stellt das Date-Objekt Methoden zur Umwandlung der gespeicherten Datum- und Zeitangaben in eine Zeichenkette (string) zur Verfügung. Mit Hilfe von Date lassen sich eine ganze Reihe von einfachen Effekten in eine Internetseite einbauen. Es lassen sich gar – wenn auch in begrenztem Maße – dynamische Inhalte erzeugen. Auf diese Weise läßt sich auch eine statische Internetseite ein wenig interessanter gestalten.

JavaScript Date Beispiel 1: Initialisierung eines Date-Objekts mit dem aktuellen Datum und der aktuellen Zeit

Das erste Beispiel zeigt, wie man das aktuelle Datum sowie die aktuelle Zeit ausgeben kann. Zu diesem Zweck wird zunächst eine Instanz des Datum-Objekts erzeugt und der Variablen d zugewiesen. Übergibt man, wie im vorliegenden Fall, bei der Erzeugung eines Datum-Objekts keine Parameter, so werden der Instanz das aktuelle Datum, wie auch die aktuelle Uhrzeit zugewiesen. In diesem Falle wird der Default-Constructor aufgerufen, welcher dies automatisch erledigt. Danach werden die einzelnen Komponenten der Uhrzeit mit führenden Nullen aufgefüllt und in String-Variablen (h, m, s für Stunden-, Minuten-, Sekundenkomponente) gespeichert, was lediglich der besseren Lesbarkeit dient.

Als nächstes werden Arrays mit den Namen der Wochentage und der Monate definiert. Da die Methoden getDay() und getMonth() nur den Index des jeweiligen Tages (0 = Sonntag .. 6 = Samstag) bzw. des entsprechenden Monats (0 = Januar .. 11 = Dezember) liefern, ist eine Übersetzung in ein verständliches Format nötig. Die Arrays spiegeln diese Zuordnungen wieder, indem der jeweilige Zugriffsindex den entsprechenden Tag bzw. Monat als Zeichenkette enthält. Zum Schluß werden die einzelnen Komponenten mit der Methode write des Document Objekts ausgegeben.

<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
  // Instanz von Datum-Objekt per Default-Konstruktor
  // erzeugen (mit aktuellem Datum/aktueller Zeit initialisieren)
  d = new Date ();
  // Komponenten der Uhrzeit mit führender 0 auffüllen, wenn Stunde,
  // Minute oder Sekunde kleiner 10 ist
  h = (d.getHours () < 10 ? '0' + d.getHours () : d.getHours ());
  m = (d.getMinutes () < 10 ? '0' + d.getMinutes () : d.getMinutes ());
  s = (d.getSeconds () < 10 ? '0' + d.getSeconds () : d.getSeconds ());
  // Namen von Wochentagen und Monaten im Jahr
  var wochentage = new Array ("Sonntag", "Montag", "Dienstag",
               "Mittwoch", "Donnerstag", "Freitag", "Samstag");
  var monate = new Array ("Januar", "Februar", "März", "April",
              "Mai", "Juni", "Juli", "August", "September",
              "Oktober", "November", "Dezember");
  // Datum und Uhrzeit ausgeben
  document.write ('Heute ist ' + wochentage[d.getDay ()]
                  + ', der ' + d.getDate () + '. '
                  + monate[d.getMonth ()] + ' '
                  + d.getFullYear ()
                  + '<br>und es ist jetzt '
                  + h + ':' + m + ':' + s + ' Uhr!');
// -->
</script>

Date in JavaScript Beispiel 2: Initialisierung mit einem festgelegten Datum/Zeit

Es gibt mehrere Möglichkeiten ein Datum-Objekt zu initialisieren. Im Folgenden Code-Abschnitt werden die unterschiedlichen Varianten der Initialisierung vorgestellt. Das Ergebnis der jeweiligen Variante können Sie durch einen Klick auf den jeweiligen Link in einem Meldungsfenster, welches mit der Alert Methode (gehört zum Window-Objekt) geöffnet wird, kontrollieren.

Bei der ersten Variante wird nur das Datum übergeben (Parameterreihenfolge: Jahr, Monat, Tag). Hier wird die Uhrzeit automatisch auf Mitternacht des angegebenen Datums gesetzt. Beachten Sie bitte, dass die Monatsangabe auch hier mit 0 (für den Januar) beginnt. Die zweite Variante setzt gleich das Datum und die Uhrzeit auf den vorgegebenen Wert (Reihenfolge der Parameter: Jahr, Monat, Tag, Stunde, Minute, Sekunde).

Der dritte Fall setzt das Datum relativ zum 01.01.1970 als Timestamp. Hier wird die verstrichene Zeit – in Millisekunden – seit diesem Datum angegeben.

Mit der letzten Variante kann das Date-Objekt durch eine Zeichenkette initialisiert werden. Das String wird in englischer Schreibweise angegeben. Dabei wird der Monat entweder in der Kurzform oder ausgeschrieben angegeben (z.B. Mar oder auch March). Auf Groß- und Kleinschreibung muss nicht geachtet werden.

Nur Datum festgelegt: <a href="javascript:alert (new Date (1956, 7 ,8))">Geburtstag von Willi</a><br>
Datum und Uhrzeit festgelegt: <a href="javascript:alert (new Date (2006, 10, 11, 11, 11, 11))">Weiberfastnacht 2006</a><br>
Relativ zum 01.01.1970: <a href="javascript:alert ('1 Jahr nach Beginn des Computerzeitalters:\n' + new Date (365*24*60*60*1000) + '\n(Lokale Zeitangabe)')">1 Jahr Computerzeitalter</a><br>
Mit einem String: <a href="javascript:alert (new Date ('mar 12, 2006 14:30:00'))">Datum mit Zeichenkette</a>

Nur Datum festgelegt: Geburtstag von Willi
Datum und Uhrzeit festgelegt: Weiberfastnacht 2006
Relativ zum 01.01.1970: 1 Jahr Computerzeitalter
Mit einem String: Datum mit Zeichenkette

JavaScript Date/Time Beispiel 3: Änderung eines Datum-Objekts

Das folgende Beispiel zeigt, wie ein bereits initialisiertes Datum nachträglich geändert werden kann. Nach der Initialisierung des Datum-Objekts mit den aktuellen Datums- und Zeitwerten wird mit Hilfe der Methode setTime() der Folgetag gesetzt. Dies geschieht durch Addition der entsprechenden Anzahl von Millisekunden (24 Stunden * 60 Minuten * 60 Sekunden * 1000 um auf Millisekunden zu kommen), die innerhalb eines Tages auflaufen, mit der durch getTime() ermittelten Anzahl der Millisekunden, die seit 01.01.1970 vergangen sind. Damit enthält das Datum-Objekt nun den Folgetag zur selben Uhrzeit. SetTime und getTime setzen bzw. lesen den intern in Date gespeicherten Timestamp, der das Datum und die zugehörige Zeit definiert und die verstrichene Zeit seit dem 1.1.1970 darstellt. Am Ende wird das so gesetzte Datum entsprechend formatiert ausgegeben.

<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
  // Instanz von Datum-Objekt per Default-Konstruktor
  // erzeugen (mit aktueller Zeit initialisieren)
  d = new Date ();
  // Auf nächsten Tag um die selbe Zeit setzen
  d.setTime (d.getTime () + 24 * 60 * 60 * 1000);
  // Namen von Wochentagen und Monaten
  var wochentage = new Array ("Sonntag", "Montag", "Dienstag",
               "Mittwoch", "Donnerstag", "Freitag", "Samstag");
  var monate = new Array ("Januar", "Februar", "März", "April",
              "Mai", "Juni", "Juli", "August", "September",
              "Oktober", "November", "Dezember");
  // morgiges Datum ausgeben
  document.write ('Morgen ist ' + wochentage[d.getDay ()]
                  + ', der ' + d.getDate () + '. '
                  + monate[d.getMonth ()] + ' '
                  + d.getFullYear ());
// -->
</script>

weiter zu Seite 2 »