Die Programmierung einer Stoppuhr soll hier ausführlicher dargestellt werden, da die Messung der Dauer für die Lösung einer Aufgabe die Lösung etwas spannender macht.
Eine Stoppuhr besteht im Prinzipt aus 3 Teilen:
1.
einer Anzeige:
2.
einer Startmöglichkeit:
3.
einer Stoppmöglichkeit:
Die Start- und Stoppmöglichkeiten wurden hier der Einfachheit halber als Schaltflächen implementiert. In einer realen Anwendung wird die Stoppuhr ebenfalls vom Anwender gestartet oder automatisch, wenn die Aufgabe am Bildschirm erscheint. Wenn die Aufgabe erledigt ist, wird die Stoppuhr dann vom Programm angehalten.
In der Informatik werden solche Ereignisse (Mausklick, Programmstart, Aufgabe richtig gelöst), die in einem Programm vorkommen, als "event" bezeichnet. Die Programmteile, die bei einem solchen Ereignis aufgerufen werden und das Ereignis "verarbeiten", sind die "event handler". Einige dieser Ereignisse/events werden direkt durch den Anwender ausgelöst (Mausklick), andere indirekt durch den Anwender (Programm wird gestartet, Aufgabe wird richtig gelöst), wiederum andere können vom Rechner aus initiiert werden (eine Sekunde ist vorbei, Uhrzeit muss neu angezeigt werden).
Bei einer Stoppuhr gibt es zunächst zwei Ereignisse, die vom Anwender direkt oder indirekt ausgelöst werden:
Diese beiden Ereignisse sind entsprechend in einer JavaScript function kodiert: StartTimer() und StopTimer().
Schließlich muss noch die Anzeige alle Sekunde mit der neuen Zeit aktualisiert werden. Um das zu realisieren, wird die Systemfunktion setTimeout() verwendet, die automatisch nach Ablauf der angegebenen Zeit die angegebene Funktion aufruf. In der oben beschriebenen Terminologie wird nach dem Ablauf der angegebenen Zeit vom Rechner ein "event" erzeugt, das von der angegebenen Funktion, dem "event handler" abgearbeitet wird.
Praktisch sieht das so aus: Die Routine, die die Uhrzeit anzeigt (ShowTime()), ruft bevor sie fertig ist als Letztes setTimeout() auf und legt dort fest, dass nach 1 Sekunde ShowTime() wiederum aufgerufen wird. So wird erreicht, dass die Uhrzeit jede Sekunde neu angezeigt wird. Stellt die Routine ShowTime() fest, dass in der Zwischenzeit die Stoppuhr angehalten wurde, wird weder die aktuelle Uhrzeit angezeigt noch die Funktion setTimeout() erneut aufgerufen, es passiert also danach nichts mehr.
Für die Berechnung der abgelaufenen Zeit wird beim Starten der Stoppuhr die aktuelle Tageszeit gemerkt (Variable dStartTime). Wird die Uhrzeit neu angezeigt, wird die Differenz zwischen der aktuellen Zeit und der Startzeit ausgerechnet und dargestellt. Damit kann die Stoppuhr auch in komplexeren Situationen eingesetzt werden: lediglich die Startzeit muss immer zur Verfügung stehen (könnte also auch in einem Cookie gespeichert werden oder als Parameter anderen HTML-Seiten zur Verfügung gestellt werden).
Beim Rechnen mit der Uhrzeit in JavaScript muss man wissen, dass in einer Variablen vom Typ Date immer nur Sekunden gespeichert sind (genauer gesagt: die Anzahl der Sekunden seit dem 01.01.1970 00:00). Erst bei der Darstellung wird diese Zahl in Tag, Monat, Jahr, Stunde, Minute, Sekunde umgerechnet und ausgegeben. Somit sind Differenzen wie Stoppzeit - Startzeit recht einfach auszurechnen.
Es umständlich ist leider die Ausgabe: intern werden immer als GMT- oder UTC-Zeiten gespeichert. UTC heißt Universal Coordinated Time und ist das gleiche wie Greenwich Mean Time. Für die Ausgabe wird dann immer noch die Abweichung zur GMT addiert. Wenn man nun einer Datumsvariable den Wert 0 zuweist, wird in Deutschland immer 01.01.1970 01:00 ausgegeben, weil wir hier eine Stunde hinter der Uhrzeit in Greenwich hinterher sind.
Da das Tagesdatum an sich nicht interessant ist und auch die Anzahl der Tage bei der Stoppuhr nicht angezeigt werden sollen, wird in dem Programm die Anzeige der Stoppuhr aus den Sekunden (getSecond()) und den Minuten (getMinute()) der Differenz gebildet, die Stunden werden als ganze Zahl der (Differenz in Sekunden) / (Sekunden pro Stunde) berechnet.
Weitere Details finden Sie in den Kommentaren im Code.