Design der Eingabe- und Bedienelemente

Die Eingabe- und Bedienelemente sollen so aussehen:

Die Überschrift „Zeitberechnungen“ soll hier nicht stören. Sie kann ja auch jederzeit geändert werden.

• 1. Das Berechnungsdatum im Format [dd.mm.yyyy [Tag, Monat, Jahr]]. Die Eingabe kann über einen Kalender erfolgen oder über die Tastatur eingegeben werden.
• 2. Die Uhrzeit im Format [hh:mm [Stunde, Minute]]. Die Eingabe kann über eine grafische Auswahl von Stunde und Minute erfolgen oder über die Tastatur eingegeben werden.
• 3. Die Sekunden als Ganzzahl [0-59]. Die Eingabe kann über die Pfeiltasten inkrementiert oder über die Tastatur eingegeben werden.
• 4. Die Tausendstel-Sekunden als Ganzzahl [0-999]. Die Eingabe kann über die Pfeiltasten inkrementiert oder über die Tastatur eingegeben werden.
• 5. Das Kontrolldatum ist ein nicht auswählbares Textfeld und zeigt die zu verwendeten Werte noch einmal an.
• 6. + 7. Die Berechnung der einzelnen Werte. Sie kann manuell- oder automatisch erfolgen. Manuell = Nur nach dem Eingabedatum – Automatisch = Vom aktuellen Datum aus laufend in die Zukunft.
• 8. Die Wahl der Zeitzone. Sie wird beim Programmstart ermittelt, kann aber frei gewählt werden.
• 9. Die Wahl der Sommer- oder Winterzeit [DST]. Sie wird beim Programmstart ermittelt, kann aber frei gewählt werden.
• 10. Der Button Berechnen startet die Verarbeitung

Ein Klick auf das obige Bild startet die Internetseite für die Zeitberechnung in einem externen Popup-Fenster. Hier werden lediglich erst einmal die Eingabeelemmente angezeigt. Man kann das Datum der Berechnung wählen und die Angaben zur Zeitzone, wie auch Daylight Savings Time = Sommer/Winterzeit. Hier ist noch keine Funktionalität hinterlegt.

Aber schauen wir uns doch erst einmal den HTML- und CSS Quelltext an.

Zeile 1: Definition des Dokumententyps zur Überprüfung.

Zeile 2: HTML-Tag als Beginn des HTML-Dokuments. Es umspannt die Zeilen 3 – 237 und damit alles was zur HTML-Seite gehört. Hier wird definiert das es sich bei der Seite um Extended HTML [xhtml] handelt und die Sprache Deutsch ist. Abgeschlossen wird die Seite mit dem Schlusstag in Zeile 237, der immer den Namen des Elements angeführt durch einen „/“ Slash beinhaltet.

Zeilen 11-57: Innerhalb des Head-Tags = Header des HTML-Dokuments können mannigfache Deklarationen vorgenommen werden. Hier sehen wir die CSS = Cascade Style Sheet Definition für unsere Bedienelemente.

In den Zeilen 22-25 haben wir die ID-Selektor für das Body-Tag. Der ID-Selektor besteht aus dem „#“-Zeichen gefolgt von einem Namen. Hier also „#b“. Im body-Tag wird dann mit dem ID-Attribut der Name angegeben. Also „id=“b“. In Zeile 59 ist das zu lesen. Innerhalb der geschweiften Klammern „{…}“ findet man dann die unterschiedlichsten Style-Sheet Definitionen. Sie bestehen immer aus einem Schlüsselwort, gefolgt von einem „:“ und dahinter der Wert, abgeschlossen mit einem „;“. Alle weiteren Selektoren sind darunter zu lesen.

In den Zeilen 59-235 haben wir das Body-Tag. Es umschließt alles was auf der Seite dargestellt wird.

Von Zeile 69-233 haben wir das table-Tag. Es umschließt den Tabelleninhalt. In den Tabellenzeilen und dessen -Spalten werden die einzelnen Eingabeelemente untergebracht. Ich führe hier nicht alle Eingabeelemente auf, man kann die Bedeutung in den Kommentaren des Quelltexts lesen. Exemplarisch die Zeile mit den Angaben zu Datum und Uhrzeit.

Von Zeile 85-110 haben wir die Zeile mit den Berechnungsrelevanten Daten von Datum und Uhrzeit. Vorgesehen sind hier einmal das Datum im Format [dd.mm.yyyy], also wie in Deutschland üblich Tag Monat und Jahr. Die Uhrzeit im Format [hh:mm:ss.hsec], also Stunde, Minute, Sekunde und tausendstel Sekunde.

Von Zeile 89-91 haben wir die Tabellenspalte für die Eingabe des Datums. Es handelt sich um ein Input-Tag vom Typ „Date“. Hier bekommen wir über einen grafischen Kalender die Daten für Tag, Monat und Jahr. Wir können sie aber auch über die Tastatur einzeln eingeben. Dazu muss man lediglich in das entsprechende Feld Klicken.

Von Zeile 95-97 haben wir die Tabellenspalte für die Eingabe der Uhrzeit. Es handelt sich um ein Input-Tag vom Typ „Time“. Hier bekommen wir über eine Stunden- und Minutenauflistung die Daten. Wir können sie aber auch über die Tastatur einzeln eingeben. Dazu muss man lediglich in das entsprechende Feld Klicken.

Von Zeile 101-103 haben wir die Tabellenspalte für die Eingabe der Sekunden. Es handelt sich um ein Input-Tag vom Typ „Number“. Hier bekommen wir über eine Rauf- und Runterzählmöglichkeit die Daten. Wir können sie aber auch über die Tastatur einzeln eingeben. Dazu muss man lediglich in das entsprechende Feld Klicken.

Von Zeile 107-109 haben wir die Tabellenspalte für die Eingabe der Millisekunden. Es handelt sich um ein Input-Tag vom Typ „Number“. Hier bekommen wir über eine Rauf- und Runterzählmöglichkeit die Daten. Wir können sie aber auch über die Tastatur einzeln eingeben. Dazu muss man lediglich in das entsprechende Feld Klicken.
Mit den Attributen „min=0“ und „max=999“ können wir den möglichen Wertebereich angeben. Mit „value=0“ wird der Wert festgelegt, der als Standard vorbelegt wird und „step=1“ gibt die Schrittweite an, mit hoch- oder runtergezählt wird, wenn man auf die Pfeile klickt.

Von Zeile 121-131 wird das eingegebene Datum noch einmal zur Kontrolle in einem Textfeld ausgegeben.

Von Zeile 143-159 sehen wir zwei Radio Buttons. Dies sind Input-Tags vom Typ „Radio“. Ein Funktionalität ist noch nicht hinterlegt, da sich beide zur selben Zeit aktivieren lassen. Bei Programmstart wird „Manuell“ automatisch aktiviert und dies bedeutet, dass die Werte nur für das eingegebene Datum berechnet werden.
Die Wahl „Automatisch“ wird eine Reihenberechnung mit animierten werten ergeben. Dabei gibt es dann mehrere Wahlmöglichkeiten, die aber erst später genau spezifiziert werden.

Von Zeile 170-212 haben wir zwei Select Boxen. Einmal für die Zeitzone und einmal für Sommer/Winterzeit. Bei Programmstart werden die Werte automatisch ermittelt und die Select Boxen darauf eingestellt. Man kann die Werte aber jederzeit abändern.

Von Zeile 223-227 haben wir den Button „Berechnen“. Ein Klick darauf startet den Programmlauf. Hier haben wir wieder einen Input-Tag vom Typ „Button“.

Ausblick:

Weiter gehen wird es mit der Javascript Programmierung und der Berechnung des Julianischen- aus dem eingegebenen Gregorianischen Datum. Dazu noch eine Rückrechnung des Gregorianischen- aus dem Julianischen Datum. Dasselbe mit dem Modifizierten Julianischen Datum.