JavaScript, die siebte (Zeit und Datum)

Übersicht: Die Uhr wird bunt

Die Uhr wird bunt

Ein Fenster allein macht noch nicht viel her, also wollen wir heute etwas interessantes in das Fenster hinein schreiben: die Uhrzeit! Hier gleich das Beispiel:

<html>
<head>
<title> Eine Uhr in Javascript </title>
<script language="JavaScript">
function meineUhr()
{
var AktuellesDatum=new Date();
var win;
win = window.open("", "Uhr","width=300,height=200,resizeable=yes");
win.document.open("text/html");
win.document.fgColor="#BFBFBF"; // Silber (!)
win.document.bgColor="#004477"; // Blauton
win.document.write("<br>" + AktuellesDatum);
win.document.write("<br>Dieses Fenster ist gleich weg!");
win.document.close();
win.setTimeout('window.close()',3000);
}// Ende der Funktion meineUhr
</script>
</head>
<body onload="meineUhr()">
<h2>Dies ist das Hauptfenster!</h2>
</body>
</html>

Hier wieder die Erklärungen zu diesem Beispiel:

Die Funktion meineUhr() ist so ähnlich aufgebaut wie beim letzten Mal, wo liegen die Unterschiede?
1. Das Dokument wird jetzt auch über win.document.open geöffnet, in Klammern wird der Typ des Dokumentes übergeben, hier "text/html"
2. Mit fgColor und bgColor bestimmen wir Vordergrund- (fg: foreground) bzw. Hintergrundfarbe (bg: background) des Dokumentes: unser Fenster wird bunt!
3. Diesmal wird das Fenster über window.close geschlossen: Der Aufruf ist trickreich innerhalb der Funktion setTimeout versteckt! setTimeout führt nach einem vorgegebenem Zeitintervall, hier 3000 ms (= 3 s), die als erstes Argument übergebene Funktion aus, hier window.close. Die Funktion setTimeout benötigt also zwei Parameter:
  - Erstens die Funktion, die ausgeführt werden soll, hier 'window.close'.
  - Und zweitens die Zeitangabe, nach der die Funktion ausgeführt werden soll, hier 3000.
Und die Uhrzeit? Die liefert uns die JavaScript-Funktion Date(). Wir merken uns die aktuelle Zeit in der Variablen AktuellesDatum und geben sie später aus:
```
win.document.write("<br>" + AktuellesDatum);
```

Zurück zur Übersicht

Aufgaben:
1. Gib das Beispiel oben mit htmledit ein, und speichere es unter dem Namen uhr1.htm in deinem Verzeichnis. Du sparst dir Arbeit, wenn du "fenster1.htm" nimmst und entsprechend veränderst.
2. So toll ist das mit der Uhrzeit noch nicht. Also holen wir uns jetzt Stunden, Minuten und Sekunden, und zwar auf folgende Weise:
```
stunden = AktuellesDatum.getHours();
minuten = AktuellesDatum.getMinutes();
sekunden = AktuellesDatum.getSeconds();
Zeit = stunden +":" + minuten + ":" + sekunden;
```
  Baue diese Zeile in deine Funktion meineUhr() ein, bevor du das Fenster öffnest, und ersetzte die Ausgabe von AktuellesDatum durch die Ausgabe von Zeit (Wo?). Wofür sind die Doppelpunkte gut? _______________________ (Abspeichern unter uhr2.htm)
3. Immer noch nicht überzeugend, nicht wahr . . .Ok, lösche die Zeilen übers Fenster, das sind die Zeilen die mit win anfangen außer der letzten Zeile, dort läßt du setTimeout stehen, änderst aber den Aufruf der Funktion ab: Statt 'window.close()' schreibst du 'meineUhr()', und statt 3000 halte ich 1000 für angemessen (Warum?). Fehlt noch die Ausgabe, die kommt in die Statuszeile! Schreibe vor den Befehl setTimeout die Zeile
```
window.status = Zeit;
```
  und speichere das Ganze unter dem Namen uhr3.htm ab!
4. Eine einfache Aufgabe: Nimm dein Fenster-Beispiel vom letzten Mal (fenster1.htm), und mache das Fenster bunt wie im Beispiel oben.

Zurück zur Übersicht

W. Spiegel, E-Mail: walter [dot] spiegel [at] web [dot] de