Anzeige
Tutorialbeschreibung

Javascript und Ajax - Datum

Javascript und Ajax - Datum

In diese Kapitel geht es um die ausgabe und verarbeitung von Datum und Uhrzeit. Außerdem lernst du wie man mit Daten rechnet.


Das nun folgende Tutorial ist ein Auszug aus der 7. Auflage des Buches: JavaScript und Ajax von Christian Wenz.

Kapitel 5 Datum

JavaScript wird häufig dazu verwendet, Datumsinformationen auszugeben. Dafür gibt es ein eigenes Objekt: Date.

Bei dem Date-Objekt handelt es sich um ein Objekt, von dem man eine Instanz erzeugen kann, und zwar – analog zu Arrays – folgendermaßen:

var d = new Date();

Die Variable d ist jetzt eine Datumsvariable. Sie enthält das aktuelle Datum (inklusive Uhrzeit) auf dem lokalen Rechner (nicht auf dem Server), und zwar das Datum zu dem Zeitpunkt, zu dem die Instanz erzeugt worden ist. Wenn also nach der Generierung der Variablen d eine lange Schleife folgt, die mehrere Sekunden dauert, ändert d seinen Wert nicht.

Bei der Erzeugung der Instanz kann man die Datumsvariable auch direkt mit (anderen) Werten belegen. Dazu gibt es zwei Möglichkeiten:

var d = new Date(Jahr, Monat, Tag);

bzw.

var d = new Date(Jahr, Monat, Tag, Stunde, Minute, Sekunde);

Beachten Sie dazu unbedingt die unten stehenden Hinweise, insbesondere die für den Monatswert!

Man kann mit geeigneten Methoden den Wert der Variablen d ändern, beispielsweise Tag, Monat und Jahr. Natürlich hat das überhaupt keine Auswirkung auf die Systemzeit des Clients oder des Servers, das wäre ja aus Sicherheitsgründen völliger Wahnsinn: Lediglich der Wert der Variablen ändert sich.

Zu den Standardanwendungen des Date-Objekts gehören die Anzeige des aktuellen Datums sowie die Berechnung, wie viel Zeit zwischen zwei Daten liegt. Im Folgenden sollen diese beiden Möglichkeiten anhand von Beispielen erläutert werden.

 


5.1 Tagesdatum 
topBilder
topBilder

Hat man erst einmal eine Instanz des Date-Objekts erzeugt, kann man das genaue Datum mit entsprechenden Methoden abfragen. Wie unter UNIX generell üblich, speicherte JavaScript 1.0 jedes Datum als die Anzahl der Millisekunden seit dem 1. Januar 1970; in neueren Versionen ist das nicht mehr so. Da es ein wenig aufwändig wäre, aus diesem Wert die interessanteren Daten wie etwa die Jahreszahl herauszufinden, gibt es hierfür vorgefertigte Methoden. Eine komplette Liste befindet sich in der Referenz, in der folgenden Tabelle finden Sie lediglich die wichtigsten Methoden.

 

Tabelle 5.1     Die wichtigsten Methoden des Date-Objekts

Methode Beschreibung
  Aktueller Tag der Datumsvariablen (1...31)
  Aktueller Monat der Datumsvariablen minus eins (0...11)
  Aktuelles Jahr der Datumsvariablen; für den Wertebereich siehe den Abschnitt »Y2K«
  Aktuelle Stunde der Datumsvariablen (0...23)
  Aktuelle Minute der Datumsvariablen (0...59)
  Aktuelle Sekunde der Datumsvariablen (0...59)
  Aktuelle Millisekunden der Datumsvariablen (0...999)

 

Hiermit ist es recht einfach, das aktuelle Datum auszugeben. Will man auf Monatsnamen nicht verzichten, muss man diese wieder in einem Array speichern:

<html>
<head>
<title>Tagesdatum</title>
<script type="text/javascript"><!--
var monatsnamen = new Array(12);
monatsnamen[0] = "Januar"; monatsnamen[1]="Februar";
monatsnamen[2] = "März"; monatsnamen[3]="April";
monatsnamen[4] = "Mai"; monatsnamen[5]="Juni";
monatsnamen[6] = "Juli"; monatsnamen[7]="August";
monatsnamen[8] = "September"; monatsnamen[9]="Oktober";
monatsnamen[10] = "November";
monatsnamen[11]="Dezember";

function tagesdatum() {
   var d = new Date();
   var datumsstring = d.getDate();
   datumsstring += "." + monatsnamen[d.getMonth()];
   datumsstring += "." + d.getYear();
   document.write(datumsstring);
}
//--></script>
</head>
<body>
<h1>Tagesdatum</h1>
Guten Tag, heute ist der
<script type="text/javascript"><!--
   tagesdatum();
//--></script>
!
</body>
</html>

Wenn Sie sich über die Ausgabe des Skripts etwas wundern (in Hinblick auf die Jahreszahl), dann lesen Sie weiter!

 

5.2 Y2K 
topBilder
topBilder

Auch JavaScript war von dem legendären Jahr-2000-(Y2K-)Problem betroffen, allerdings ist das hier nicht so schlimm wie in weiten Teilen der Wirtschaft. Probleme bereiten hier (natürlich) wieder Browser von anno Tobak. Die Krux liegt in der Methode getYear(). Je nach Browser werden manche Jahre anders interpretiert. Die folgende Tabelle zeigt auf, welche Rückgabewerte die verschiedenen JavaScript-Versionen bei den jeweiligen Zeiträumen vorschreiben. Dabei bedeutet »volle Jahreszahl« eine vierstellige Jahreszahl (außer natürlich bei Jahreszahlen vor 1000); »kurze Jahreszahl« bedeutet eine zweistellige Jahreszahl im 20. Jahrhundert, also etwa »99« statt »1999«.

 

Tabelle 5.2     Die Behandlung von Jahreszahlen in den verschiedenen JavaScript-Versionen

Zeitraum JS 1.0 JS 1.1/1.2 JS 1.3 und höher
<1970 Nicht unterstützt Volle Jahreszahl Jahreszahl minus 1900 (1800 wird durch –100 dargestellt)
1970...1999 Jahreszahl minus 1900 Kurze Jahreszahl Jahreszahl minus 1900
³2000 Jahreszahl minus 1900 Volle Jahreszahl Jahreszahl minus 1900

 

In der Praxis ist das nicht viel wert, weil beispielsweise der Internet Explorer 5/6 sich nicht an die Vorgaben hält und im Jahr 2002 als Jahreszahl auch tatsächlich 2002 zurückgibt (und nicht etwa 102). Die vorherige Tabelle wirkt zudem etwas einschüchternd. Ist es etwa nötig, mühsam eine Fallunterscheidung nach JavaScript-Versionen durchzuführen?

In der Praxis gibt es glücklicherweise einen relativ einfachen Ausweg. Üblicherweise liegen alle verwendeten Daten im Bereich von 1970 bis ins 21. Jahrhundert hinein. Eine Jahreszahl kleiner als 200 ist also um 1900 zu niedrig; andere Jahreszahlen sind – nehmen wir einfach einmal an – korrekt. Man kann also eine Funktion schreiben, die das Y2K-sichere Jahr zurückgibt:

function getYearY2K(d) {
   var y = d.getYear();
   if (y < 200) {
      return y + 1900;
   } else {
      return y;
   }
}

Ab JavaScript 1.3 (also in allen aktuellen Browsern) gibt es eine Methode getFullYear(), die grundsätzlich kein verkürztes Datum zurückgibt, sondern stets die volle Jahreszahl. Alle Browser, die heute eine messbare Verbreitung haben, sollten diese Methode unterstützen. Eine Alternative besteht darin, ein eigenes Datumsobjekt zu schreiben; das nötige Rüstwerkzeug bekommen Sie in Kapitel 13.

 

5.3 Mit Daten rechnen 
topBilder
topBilder

In JavaScript Version 1.0 wurden Datumswerte intern als die Anzahl der seit dem 1. Januar 1970 verstrichenen Millisekunden gespeichert. Diese auf den ersten Blick merkwürdig anmutende Vorgehensweise bietet einen großen Vorteil: Dadurch werden Rechenoperationen ermöglicht, die ansonsten nur sehr schwer und kompliziert zu implementieren gewesen wären.

Die Hauptanwendung ist hier die Berechnung der Differenz zweier Datumswerte. Wie viele Tage oder Stunden dauert es noch bis zum 1. 1. 2008? Wie viele Tage bin ich alt? Um wie viele Stunden ist mein Bruder/meine Schwester/mein Hund älter bzw. jünger?

Sie nutzen dazu die Methode getTime() und ganz wenig Mathematik. Die Methode getTime() gibt die Zeit in der Datumsvariablen im Format »Millisekunden seit dem 1. 1. 1970« zurück. Wenn zwei Datumsvariablen vorliegen, deren zeitliche Differenz berechnet werden muss, so kann der Millisekundenwert beider Variablen voneinander abgezogen werden, und man hat das Ergebnis. Dieses liegt dann zwar in Millisekunden vor, aber die Umrechnung in handlichere Werte ist recht einfach. Eine Division durch 1000 ergibt Sekunden (eine Sekunde dauert 1000 Millisekunden); durch 1000 × 60 ergibt die Minuten (analog: 60 Sekunden sind eine Minute) und so fort. Die Division durch 1000 × 60 × 60 × 24 gibt die Zeit in Tagen an.

Noch wissen Sie nicht, wie man Benutzereingaben mit JavaScript abfängt; aus diesem Grund muss im folgenden Beispiel zum Testen an einer Variablen »herumgeschraubt« werden. Das Beispiel mit den Geburtsdaten ist heikel, wenn man vor dem 1. Januar 1970 geboren ist (aus Gründen der Abwärtskompatibilität), daher berechnen wir nun die zeitliche Differenz des Datums der Wiedervereinigung zum letzten »echten« Jahrtausendwechsel, also dem 1. 1. 2001:

<html>
<head>
<title>Jahrtausendwechsel</title>
<script type="text/javascript"><!--
var d = new Date(89, 9, 3);  //3.10.1989
var d2 = new Date(2001, 0, 1);  //1.1.2001
function differenz() {
   var dtime = d.getTime();
   var d2time = d2.getTime();
   var diff = d2time – dtime;
   var diffstring = (diff/1000) + " Sekunden";
   diffstring += " oder " + (diff/(1000*60)) +
   " Minuten";
   diffstring += " oder " + (diff/(1000*60*60)) +
   " Stunden";
   diffstring += " oder " + (diff/(1000*60*60*24)) +
   " Tage";
   document.write("Zeitunterschied: " + diffstring);
}
//--></script>
</head>
<body>
<h1>Zeitunterschied</h1>

<script type="text/javascript"><!--
   differenz();
//--></script>
</body>
</html>

Bilder

Abbildung 5.1     Mit Daten rechnen: Ein Zeitunterschied

 

5.4 Lokales Datumsformat 
topBilder
topBilder

Mit der Methode toLocaleString() können Sie einen Datumswert an die lokalen Einstellungen (das heißt, an die Sprachversion des Betriebssystems und an lokale Spracheinstellungen) anpassen. So recht funktioniert das aber erst mit neueren Internet-Explorer-Versionen, die die entsprechenden Informationen direkt aus den Daten in der Systemsteuerung holen (unter Windows; bei anderen Betriebssystemen stehen diese Informationen an anderer Stelle). Die folgende Tabelle zeigt, wie fünf Browserversionen das aktuelle Datum nach Anwendung von toLocaleString() ausgeben – bei identischen Einstellungen in der Systemsteuerung.

 

Tabelle 5.3     Die Ergebnisse von toLocaleString() bei deutschen Browserversionen

Browser Ausgabe (am 31. Dezember 2006, 12 Uhr mittags)
Netscape Navigator 4.x Sunday, December 31, 2006 12:00:00
Netscape 6.x/7.x Sunday, December 31, 2006 12:00:00
Netscape 8.x/Mozilla 1.x/Firefox Sonntag, 31. Dezember 2006 12:00:00
Internet Explorer 5.0x 12/31/2006 12:00:00
Internet Explorer 5.5/6/7 Sonntag, 31. Dezember 2006 12:00:00

 

Sie sehen also: Darauf können Sie sich leider nicht verlassen.

Das Tutorial ist ein Auszug aus der 7. Auflage des Buches von Christian Wenz:

JavaScript und Ajax - Das umfassende Handbuch
Galileo Computing, 853 Seiten, 8. aktualisierte Auflage

Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von Galileo Press.

Mehr Informationen zum aktualisierten Fachbuch für Webentwickler gibt es hier: JavaScript und Ajax
 
Alle Kapitel des Buches:
1 Grundlagen
2 JavaScript-Praxis
3 Professionelles JavaScript
4 Web 2.0 und Ajax
5 Kommunikation
6 Serverseitige Programmierung
7 Sicherheit
8 Praxis
9 Anhang
Bilder


 

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

x
×
×