Materialien zum Unterricht
Rechnen mit dem Datum
Es soll ein Programm geschrieben werden, dass die Tage zwischen einem
eingebenen Datum und dem aktuellen Datum berechnet.
- Schreibe ein Formular, dass vier einzeilige Textfelder und einen
Button hat. Lege die Größe der Felder nach den zu erwartenden
Eingaben fest.

Die Namen der Felder sind:
Feld |
ID |
Tag: |
tag |
Monat: |
monat |
Jahr: |
jahr |
Anzahl der Tage: |
ausgabe |
-
Der Button soll die Funktion tage() aufrufen. Diese Funktion berechnet die gesuchte Differenz und schreibt das Ergebnis in das Feld ausgaben.
Füge den Button sowie den Rahmen der Funktion ein und verknüpfe den Button über das event onClick mit der Funktion.
-
Erzeuge in der Funktion drei Variable tag, monat und jahr, denen der Inhalt der entsprechenden Felder aus dem Formular zugewiesen werden.
-
Es wird als nächstes ein Datumsobjekt erzeugt. Das ist eine Variable, die durch die Erstellung als Datumsobjekt alle möglichen Methoden und Eigenschaften bekommt, um mit Datumsangaben umzugehen.

Mit dieser Konstruktion wird der Variablen heute das aktuelle Datum zugewiesen. Teste es, indem du dem Wert des Ausgabfeldes diese Variable zuweist.
Dieses Bildschirmfoto wurde am 14. November 2016, einem Montag, um 13.16.05 Uhr gemacht. Die Angabe GMT+0100 bedeutet Mitteleuropäische Zeit. (GMT=Greenwich Mean Time=Zeit für
Greenwich =Westeuropäische Zeit)
-
Es wird ein zweites Datumsobjekt erzeugt, dass das eingegeben Datum enthält:

Lass dir auch von diesem Ojekt den Inhalt in dem Ausgabefeld anzeigen.

Der 17.12.210 ist z.B. ein Sonnabend. Beachte: In javaScript ist der Januar der 0. Monat. Deshalb muss
von der eingegebenen Monatszahl 1 abgezogen werden.
-
Nun kann problemlos die Differenz zwischen dem heutigen Tag und dem eingegebenen Tag berechnet werden.

Die Methode getTime() rechnet das dem Objekt zugewiesene Datum in eine Wert um, der der Anzahl der Millisekunden seit dem 1. Januar 1970 entspricht. Dabei werden z.B. die unterschiedlichen Monatslängen und Schalttage berücksichtigt.
Lass dir im Ausgabefeld den berechneten Wert anzeigen. Es ist gesuchte Zeitspanne in Millisekunden.
-
Rechne diese Zeitspanne im Tage um und lass die das Ergebnis wieder anzeigen.
-
Die Zeitspanne soll in ganzen Tagen angezeigt werden. Informiere dich in der Objekt-Referenz für JavaScript in SELFHTML über die Möglichkeit, wie mit dem Mathematik-Objekt Math die nächstkleinere ganze Zahl bestimmt werden kann.
Wende diese Methode auf dein bisheriges Ergebnis an und lass in dem Ausgabefeld diesen Wert ausgeben.
-
Füge vor das Eingabefeld, in dem die Anzahl der Tage steht, ein weiteres einzeiliges Eingabefeld ein. Dort soll bei einer positiven Zahl der Tage stehen: Anzahl der vergangenen Tage:
Ergibt die Berechnung eine negative Zahl, erscheint dort: Tage bis zum Termin:. Gleichzeitig soll die Tagesanzahl in eine positve Zahl umgewandelt werden.
- Nicht nur der herkömmliche Geburtstag kann gefeiert werden. Es lässt sich z.B. auch jeder Tag feiern, der durch 1000 teilbar ist, also etwa der 7000. Lebenstag.
Es wird davon ausgegengen, dass die berechneten Tage größer als 1000 sind. Falls nicht, muss über eine if-Verzweigung auch die Tage unter 1000 berücksichtigt werden.
- Die berechneten Tage müssen auf volle Tausender aufgerundet werden. Dazu ist die Funktion zum Runden auf die nächsthöhere Zahl zu verwenden. Wie man die Stellenzahl einstellt, steht in der Aufgabe 1, Teilaufgabe 3.
Erzeuge im Formular ein neues Feld und gibt die berechnete Zahl aus.
- Es müssen die vollen Tage berechnet werden, die bis dahin vergehen.
- Diese Zahl muss wieder in Millisekunden umgerechnet werden.
- Dieser Wert muss zu den Millisekunden für den heutigen Tag dazugezählt werden. (siehe Teilaufgabe 6)
Damit liegen die Millisekunden vor, die vom 1.1.1970 bis zu dem Feiertag vergehen. Die müssen nun in ein Datumsobjekt umgewandelt werden.
- Das erfolgt mit new Date(Millisekundenanzahl) (siehe Teilaufgabe 4 und 5)
- Fast fertig. Alles komplizierte an der Datumsberechnung hat der Computer gemacht. Jetzt muss das Datum noch ordentlich ausgegeben werden.
Erzeuge drei neue Formularfelder, in die Tag, Monat und Jahr des Feiertages eingetragen werden können.
- Die Zeile zum ausgeben des Tages kann z.B. so aussehen:
document.rechner.feiern_tag.value=datum_feiern.getDate();
Informiere dich bei SELFHTML über die anderen notwendigen Methoden des Date-Objektes.
(Beachte, dass der Monat bei 0 beginnt!!!)
- Fertig.
zurück