Wir wollen im nächsten Schritt ja nun eine ansprechendere Uhr programmieren. Zunächst fügen wir dazu zusätzlich zu den Stunden und Minuten noch Sekunden hinzu. Der Zugriff auf dieses Eigenschaft des Datums-Objektes erfolgt mit:
datum.getSeconds().
Nun müssen wir die Bestimmung und Ausgabe der Sekunden an den entsprechenden Stellen einfügen:
<!DOCTYPE html> <html> <head> <title>Hallo Welt</title> <meta charset="UTF-8"> </head> <body> <div id="gruss"></div> <div id="uhrzeit"></div> <script> //Uhrzeit anhand des Datums-Objektes auslesen var datum = new Date(); var stunden = datum.getHours(); var minuten = datum.getMinutes(); var sekunden = datum.getSeconds(); //if-Anweisung für unterschiedliche Begrüßung if(stunden > 4 && stunden < 11) { var gruss = "Guten Morgen."; } else if (stunden > 10 && stunden < 17) { var gruss = "Guten Tag."; } else if (stunden > 16 && stunden < 22) { var gruss = "Guten Abend."; } else { var gruss = "Gute Nacht."; } //Einstellige Stunden- und Minutenwerte umformen if(stunden < 10) { stunden = "0" + stunden; } if(minuten < 10) { minuten = "0" + minuten; } if(sekunden < 10) { sekunden = "0" + sekunden; } //Ausgabetext generieren document.getElementById("gruss").innerHTML=gruss; document.getElementById("uhrzeit").innerHTML=stunden+":"+minuten+":"+sekunden; </script> </body> </html>
Ein Test im Browser zeigt nun zusätzlich die Sekunden an. Aber die Sekunden werden nicht aktualisiert, d.h. die Uhrzeit wird nur einmal beim Laden der Seite bestimmt und bleibt danach stehen. Wir müssen also eine Möglichkeiten finden, die Uhrzeit jede Sekunde zu aktualisieren. Dabei hilft uns die JavaScript-Funktion setInterval. Dieser Funktion werden zwei Parameter übergeben:
- Die Funktion, die wiederholt ausgeführt werden soll.
- Der Abstand zwischen den Wiederholungen in Millisekunden
Ein Beispiel für den Einsatz dieser Zeitschleifen-Funktion wäre folgendes:
<script> setInterval(meinefunktion, 1000); </script>
Aber dieses Skript würde so noch nicht funktionieren. Denn wir haben ja noch keine eigene Funktion erstellt, die wir dadurch jede Sekunde aufrufen könnten. Bisher haben wir schließlich nur mit vorgefertigten Funktionen gearbeitet. Also ist es nun an der Zeit, dieses wichtige Instrument in jeder Programmiersprache zu erlernen. Und es ist im Grunde ganz einfach, selbst eine Funktion zu erstellen, man spricht auch von definieren (wie bei Variablen):
Am Anfang jeder Funktionsdefinition steht das Schlüsselwort function. Dann folgt eine selbst gewählter Name für die Funktion. Dann folgen in Klammern optional die Parameter, die an die Funktion übergeben werden können. Schreibt man z.B. eine Funktion, die das Produkt aus zwei Zahlen bestimmen soll, dann müsste man dieser Funktion natürlich die zwei Zahlen als Parameter übergeben, damit die Berechnung innerhalb der Funktion durchgeführt werden kann (hier ein Demo zum ausprobieren).
Im einfachsten Fall benötigen wir aber gar keine Parameter, dann bleibt die Klammer leer und man spricht von einer anonymen Funktion. Eingebaut in unser Beispiel:
<script> var zaehler=0; setInterval(meinefunktion, 1000); function meinefunktion() { console.log(zaehler); zaehler=zaehler+1; } </script>
Damit wir die eigene Funktion meinefunktion bei der Arbeit sehen können, geben wir den Inhalt einer numerischen Variablen zaehler über den Befehl console.log(zaehler) in der JavaScript-Konsole aus. Die Konsole ist ein hilfreicher Teil innerhalb der Entwicklertools: Hier erscheinen JavaScript-Fehler, die der Browser feststellt und eben auch Nachrichten, die man über console.log() ausgibt. Sie können dieses Skript auch im Browser testen: Im eigentlichen Browserfenster tut sich hier nicht viel. Wenn Sie aber die Konsole aufrufen, sehen Sie, wie jede Sekunde der Zähler nach oben gezählt wird. Neben dem zeitgesteuerten Aufruf per setInterval können Sie jede Funktion natürlich auch direkt aufrufen: hier wäre das der Aufruf meinefunktion().
Das kleine Beispiel können wir nun auf unsere Uhr übertragen. Wir müssen eigentlich nur um unser komplettes bisheriges Skript eine Funktion bauen und diese Funktion über setInterval jede Sekunde aufrufen. Damit wir nicht eine Sekunde warten müssen, bis die Uhrzeit erstmalig erscheint, rufen wir zusätzlich ganz am Anfang des Skripts unsere neue Funktion uhrzeitanzeige auf, dadurch wird die Funktion beim Ladens des Skripts sofort einmal aufgerufen:
<!DOCTYPE html> <html> <head> <title>Hallo Welt</title> <meta charset="UTF-8"> </head> <body> <div id="gruss"></div> <div id="uhrzeit"></div> <script> //Funktion "uhrzeitanzeige" einmalig sofort aufrufen uhrzeitanzeige(); //Jede Sekunde die Funktion "uhrzeitanzeige" aufrufen setInterval(uhrzeitanzeige, 1000); function uhrzeitanzeige() { //Funktion gibt die Uhrzeit aus //Uhrzeit anhand des Datums-Objektes auslesen var datum = new Date(); var stunden = datum.getHours(); var minuten = datum.getMinutes(); var sekunden = datum.getSeconds(); //if-Anweisung für unterschiedliche Begrüßung if(stunden > 4 && stunden < 11) { var gruss = "Guten Morgen."; } else if (stunden > 10 && stunden < 17) { var gruss = "Guten Tag."; } else if (stunden > 16 && stunden < 22) { var gruss = "Guten Abend."; } else { var gruss = "Gute Nacht."; } //Einstellige Stunden- und Minutenwerte umformen if(stunden < 10) { stunden = "0" + stunden; } if(minuten < 10) { minuten = "0" + minuten; } if(sekunden < 10) { sekunden = "0" + sekunden; } //Ausgabetext generieren document.getElementById("gruss").innerHTML=gruss; document.getElementById("uhrzeit").innerHTML=stunden+":"+minuten+":"+sekunden; } </script> </body> </html>
Sie können die laufende Uhr hier testen. Zwar ist die grundlegende Funktionalität der Uhr nun umgesetzt. Das Design ist aber noch eher traurig. Daher wollen wir mit etwas CSS die Uhr ein wenig "aufhübschen". Da wir die Uhr gerne am Rand des Browserfenster "anheften" wollen, fügen wir zunächst einen weiteren <div>-Container mit der ID "uhr" hinzu, der die beiden <div> umschließt:
<body> <div id="uhr"> <div id="gruss"></div> <div id="uhrzeit"></div> </div> </body>
Nun fügen wir der HTML-Markup im <head> noch ein Inline-Stylesheet hinzu, zunächst stylen wir die Elemente mit den IDs "gruss" und "uhrzeit":
<head> <title>Hallo Welt</title> <meta charset="UTF-8"> <style> #gruss, #uhrzeit { background-color: #dddddd; width: 140px; padding: 10px 0; font-family: arial, sans-serif; font-size: 16px; text-align: center; } #uhrzeit { background-color: #bbbbbb; } </style> </head>
Checken wir kurz das Ergebnis. Soweit ok, nun versehen wir noch den umschließenden Container mit einem Rand von einem Pixel Breite und positionieren ihn mit position:fixed fest an den rechten oberen Rand des Browserfensters:
<head> <title>Hallo Welt</title> <meta charset="UTF-8"> <style> #uhr { border: 1px solid #222; position: fixed; top: 10px; right: 0; } #gruss, #uhrzeit { background-color: #dddddd; width: 140px; padding: 10px 0; font-family: arial, sans-serif; font-size: 16px; text-align: center; } #uhrzeit { background-color: #bbbbbb; } </style> </head>
Wie sich diese Regel auswirkt, sehen wir im Browser. Wenn Sie das Browserfenster nun skalieren, sehen Sie noch besser die Wirkung von position:fixed. Es nimmt ein Element aus dem normalen Textfluss der Seite heraus und klebt es quasi fest an eine bestimmte Position vom Rand des Browserfensters aus. Diese Position kann horizontal entweder von rechts oder links aus angegeben werden (Eigenschaften left oder right), vertikal entweder von oben oder unten aus (Eigenschaften top oder bottom). Das komplette Skript sieht nun so aus:
<!DOCTYPE html> <html> <head> <title>Hallo Welt</title> <meta charset="UTF-8"> <style> #uhr { border: 1px solid #222; position: fixed; top: 10px; right: 0; } #gruss, #uhrzeit { background-color: #dddddd; width: 140px; padding: 10px 0; font-family: arial, sans-serif; font-size: 16px; text-align: center; } #uhrzeit { background-color: #bbbbbb; } </style> </head> <body> <div id="uhr"> <div id="gruss"></div> <div id="uhrzeit"></div> </div> <script> //Funktion "uhrzeitanzeige" einmalig sofort aufrufen uhrzeitanzeige(); //Jede Sekunde die Funktion "uhrzeitanzeige" aufrufen setInterval(uhrzeitanzeige, 1000); function uhrzeitanzeige() { //Funktion gibt die Uhrzeit aus //Uhrzeit anhand des Datums-Objektes auslesen var datum = new Date(); var stunden = datum.getHours(); var minuten = datum.getMinutes(); var sekunden = datum.getSeconds(); //if-Anweisung für unterschiedliche Begrüßung if(stunden > 4 && stunden < 11) { var gruss = "Guten Morgen."; } else if (stunden > 10 && stunden < 17) { var gruss = "Guten Tag."; } else if (stunden > 16 && stunden < 22) { var gruss = "Guten Abend."; } else { var gruss = "Gute Nacht."; } //Einstellige Stunden- und Minutenwerte umformen if(stunden < 10) { stunden = "0" + stunden; } if(minuten < 10) { minuten = "0" + minuten; } if(sekunden < 10) { sekunden = "0" + sekunden; } //Ausgabetext generieren document.getElementById("gruss").innerHTML=gruss; document.getElementById("uhrzeit").innerHTML=stunden+":"+minuten+":"+sekunden; } //function uhranzeige ende </script> </body> </html>
Nun wäre es noch ganz nett, wenn man die Uhr auf Knopfdruck ein- und ausblenden könnte. Und damit kommen wir zu einer essentiellen Aufgabe in fast allen Programmen, der Interaktion des Nutzers über ein User-Interface mit dem Programm. Diese Funktionalität implementieren wir im nächsten Abschnitt.
> weiter