Projekt Mondphasenberechnung

Bei diesem Projekt handelt es sich um ein Übungsprojekt. Das Projekt soll die benötigten Werte für die Berechnung der Mondphasen
darstellen. Grundlage hierfür sind die Ephemeridenberechnungen. Dazu gehören inbesondere die Zeitberechnungen, die im Universum
ja nicht immer gleichförmig verläuft, wie es unsere Uhrzeit darstellt. Der Mensch benötigt eine gleichförmig verlaufende Zeit um
seine Aktivitäten zu koordinieren.Zu den zu verwendenden Zeiten gehören insbesondere die UT = Universal Time = GMT = Greenwich Mean Time. Im Gegensatz dazu nennt sich
die Zeit, die die Zeitsender erzeugen UTC = Universal Time Coordinated. Hierbei handelt es sich um die UT erweiter um die Zeitzone
und/oder DST = Daylight Savings Time = Winter/Sommerzeit.Des weiteren um die siderische Zeit = Sternzeit an den unterschiedlichen Orten und einige weitere Zeiten. Dies wird sich dann aber aus dem Projekt ergeben.

Als Programmiersprache wird Javascript verwendet, eventuell auch jQuery. Zur Darstellung HTML und CSS. Die Darstellung auf dieser Homepage,
unter WordPress, lässt leider eine externe Datei mit CSS-Code nicht zu. Daher wird der Code in die HTML-Datei mit eingefügt.

Die Erstellung des Designs und der benötigten Algorithmen erfolgt Projekt begleitend, also „Learning by doing“. Beides kann sich
auch immer wieder einmal ändern. Ich gehen von keiner starren Vorgehensweise aus. Ich starte zuerst mit dem Design der Eingabedaten.

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.

Die Ausgabefelder #11. – #15. sollen so aussehen:

Der Quelltext-Snippet als Download: HTML-Quelltext zu den Ausgabeelementen ^[13]

Start des Programms: Zeitberechnung

Zurück [9]

Im Beitrag „Design der Eingabe- und Bedienelemente“ war die CSS-Formatierung noch im Kopf der HTML-Datei mit eingebunden. Wir lagern diesen CSS-Quellcode nun in eine externe Datei mit Namen „style.css“ aus.
Um dies zu erreichen benötigen wir einen Eintrag im Header des HTML-Quelltextes.

In Zeile 11 beginnt der Kopf der HTML-Datei und in Zeile 19 haben wir den Link zu unserer CSS Formatierungsdatei.

• „link ^[15]„. Legt fest in welcher Beziehung das aktuelle Dokument, die HTML-Datei, zu einem anderen Dokument, also hier die CSS-Datei steht.
• „href=“ … „. href = Hyperreferenz. Die URL zur CSS-Datei. Relative- und absolute Pfadangaben sind ebenfalls möglich.
• „rel=“stylesheet“. Hier wird die logische Beziehung des Dokuments festgelegt. Wird mittlerweile von den neueren Browsern ignoriert.
• type=“text/css“. der MIME Typ (Multipurpose Internet Mail Extensions) des Dokuments.
• „media=“screen“. Den Ausgabetypen der CSS-Formatierung angeben, also welches Ausgabemedium verwendet werden soll.

Style.css als Download: CSS-Formatierung in externer Datei. ^[16]

Das Universal Attribut für HTML-Tags „id=’Name'“ ist ein sogenannter Selektor ^[17], mit dem die Verbindung von der CSS-Formatierung zum HTML-Element hergestellt wird.

• „#b“. Der ID-Selektor für den body-Tag der HTML Datei. Hier wird von Zeile 5 – 8 die Hintergrund- und Schriftfarbe festgelegt.
• Für weitere Informationen lies bitte die Kommentarzeilen in der oben angegebenen CSS-Datei.

Man kann auch direkt am HTML-Element mit CSS Formatieren. Dazu dient das Attribut

style=“Key: value; ….“

„style“ gibt an, das es sich um eine CSS-Formatierung handelt. „key“ ist das Schlüsselwort gefolgt von einem „:“ [Colon]. „value“ der entsprechende Wert von „Key“ gefolgt von einem „;“ [Semicolon]. Mehrere durch Semikolon getrennte Paare können vorkommen.

Ausblick:

Nun kommen wir so langsam zur Javascript Programmierung. Da der Quellcode recht lang werden wird, ist es sinnvoll einzelne Programmier-Module zu verwenden. Dazu verwenden wir einige Quellcode Zeilen in unserer HTML Datei. Hier können wir dann unsere Module beliebig Einfügen. Die geschieht wieder im Header der HTML Datei.

Da unser Javascript Quellcode größer wird ist es sinnvoll, einzelne Problemlösungen in externe Module aufzuteilen. Per Standard kann man den Javascript Quellcode im Header der HTML-Datei oder aber an jedem beliebigen Ort innerhalb des Body’s plazieren. Wir entschließen uns für das Auslagern des Quellcodes. Dazu werden im Header der HTML-Datei einige Quellcodezeilen benötigt. Dazu gehört im wesentlichen eine Funktion incude(„Path to Source Code“). Schauen wir und den Quellcode einmal an.

• In Zeile 4 sehen wir ein auskommentiertes HTML Script-Tag. Aktiviert man dieses Tag, dann kann man das Framework für jQuery laden und auch verwenden. Wenn jemand seine Seiten mit WordPress hostet, kann man dies entfallen lassen, da WordPress jQuery selbst lädt.
• In Zeile 14-34 wird eine Windows Eventlistener Funktion installiert, die auf den Event „Load“ reagiert. In dem Fall wird mit der Ausführung des Javascript Quellcodes, innerhalb der Funktion, so lange gewartet, bis alle Elemente der HTML Seite geladen sind.
• In Zeile 17-26 ist die Funktion include() notiert. Sie hat einen Übergabeparameter „file“. Dies ist die URL der Javascript Quelldatei, die man hier Einfügen möchte.
• In Zeile 19 wird der Objekt Variablen „script“ der Wert eines neu erstellten HTML Script-Tags zugewiesen.
• In Zeile 20 wird dem Attribut „src“ des Script-Tags der Wert von „file“ übergeben, also der Pfad zur Quelldatei.
• In Zeile 21 wird dem Attribut „type“ der MIME-Typ des Quellcodes zugewiesen.
• In Zeile 22 wird dem Attribut „defer“ der Wert „true“ zugewiesen. Damit wird noch einmal definiert, dass erst alles auf der Seite geladen sein muss um den Quellcode auszuführen.
• In Zeile 24 wird über das Objekt des HTML-Tag Namen „head“ und dem ersten Vorkommen des head-Tags in der HTML-Seite ein neues HTML Script Tag als Child angehängt.
• In Zeile 29 + 32 wird jeweils über die Funktion „include()“, ein Javascript Quellcode Modul, aus dem aktuellen Verzeichnis „./“ und mit den Namen „init.js“ und „JulianDate.js“ angehängt.

Ausblick:

Als Nächstes befassen wir uns mit der Initialisierung der für die Datumsberechnung notwendigen Objekte, Variablen und Einstellungen. Dazu gehört auch die automatische- Ermittlung und Voreinstellung der Timezone und Sommer/Winterzeit, Berechnungsstart bei einem Klick auf den Button „Berechnen“, löschen von Ausgabefeldern und Behandlung der Radio Buttons für die Manuelle- und Automatische Berechnung.

Das Javascript Quellcode Modul „Init.js“ ist ein wenig größer und beinhaltet die vorbereitenden Datendefinitionen und Startroutinen des Programms.
Ich werde versuchen die Bedeutung der einzelnen Programmteile so einfach wie möglich zu erklären, aber es sind ja auch Kommentare im Quelltext enthalten.

In den Zeilen 11 – 33 werden die globalen Variablen definiert und initialisiert. Es handelt sich in der Regel um Variablen für die Datumsdarstellung, der Berechnung des Julianischen Datums und für die Zeitzone und Sommer/Winterzeit.

In den Zeilen 41 – 55 werden die Objekte der einzelnen HTML Eingabe/Ausgabe- und Bedienelemente aus den ID’s ermittelt und Variablen zugewiesen.

In den Zeile 69 wird die erste Funktion „setActualDateAndTime()“ gerufen und nach dem Laden aller Objekte der Seite auch ausgeführt. Sie steht im Quellcode von Zeile 92 – 115. Sie holt das aktuelle Datum und stellt es in den Eingabefeldern ein.

Wir schauen sie uns etwas genauer an.

In der Zeile 92 haben wir den Funktionsnamen „setActualDateAndTime()“ mit den leeren runden Klammern. Der Funktion werden damit keine Parameter übergeben.

Für weitere Informationen lesen Sie bitte die Kommentare im Quelltext.