Zu den Kernelementen fast jedes Programms gehören Kontrollstrukturen. Mit ihnen prüft man logische Bedingungen und vollzieht dann bestimmte Reaktionen, je nachdem ob die Bedingung zutrifft oder nicht. So kann man prüfen, ob eine Variable einen bestimmten Wert hat oder nicht. Im ersten Fall führt man einen Zweig der Kontrollstruktur aus und führt die darin enthaltenen Anweisungen aus, im zweiten Fall geht das Programm in den anderen Zweig.
Die bekannteste Kontrollstruktur ist wohl die if-Anweisung (engl. if-statement). Mit ihr kann man die oben beschriebene Aufgabe erledigen: Man formuliert eine oder mehrere logische Bedingung (Wenn...) und verzweigt das Programm abhängig davon, ob die jeweilige Bedingung erfüllt ist (Dann...). Am besten wenden wir dies gleich auf unser Beispiel an:
Wir wollen den Nutzer in Abhängigkeit von der Tageszeit unterschiedlich begrüßen, mit "Guten Morgen.", "Guten Tag.", "Guten Abend." und "Gute Nacht.". Wie können wir eine entsprechende Bedingung formulieren? Welche Information/Variable brauchen wir dafür?
Wir haben ja für die Ausgabe der Uhrzeit anhand des Datums-Objekts die aktuelle Uhrzeit in Stunden bestimmt und in der Variable stunden gespeichert. Abhängig von der aktuellen Stunde können wir ja nun unterschiedliche Begrüßungen "triggern", wie genau die Intervalle sind, bleibt ja dem Geschmack des Programmierers überlassen. Eine Möglichkeit wäre:
"Guten Morgen." von 5:00 - 10:59 Uhr,
"Guten Tag." von 11:00 bis 16:59 Uhr,
"Guten Abend." von 17:00 bis 21:59 Uhr",
"Gute Nacht." von 22:00 bis 4:59 Uhr.
Nun müssen wir noch wissen, wie man eine if-Anweisung in JavaScript syntaktisch formuliert. Der formale Aufbau ist wie folgt:
if (logische Bedingung 1) {
Anweisung 1;
} else if (logische Bedingung 2) {
Anweisung 2;
} else {
Anweisung 3;
}
Die if-Anweisung beginnt erwartungsgemäß mit dem Schlüsselwort if. Die logischen Bedingungen werden in runde Klammern gefasst. Die auszuführenden Anweisungen stehen in geschweiften Klammern. Statt mehrerer separater if-Anweisungen kann man wie oben gezeigt auch eine Kombination der Wenn-Dann-Bedingungen formulieren, die alle möglichen Werte abdecken und somit immer sicher zu einer Reaktion auf die Werte einer Variablen führen. Hilfreich dabei ist die abschließende Bedingung else: So kann einem kein möglicher Wert "durchflutschen", denn die Anweisung im Zweig else wird immer dann ausgeführt, wenn die übrigen Bedingungen (unter if und else if) nicht zutreffen. Je nach Aufgabenstellung im Programm kann natürlich auch eine if-Anweisung ohne else ausreichen.
Nun setzen wir die konkrete if-Anweisung für unser Beispiel um. Abhängig von der aktuellen Stunde des Tages schreiben wir in eine Variable gruss einen unterschiedlichen Begrüßungstext.
<!DOCTYPE html>
<html>
<head>
<title>Hallo Welt</title>
<meta charset="UTF-8">
</head>
<body>
Inhalt der Seite
<script>
//Uhrzeit anhand des Datums-Objektes auslesen
var datum = new Date();
var stunden = datum.getHours();
var minuten = datum.getMinutes();
//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.";
}
//Ausgabetext generieren
var ausgabe = gruss + " Die aktuelle Uhrzeit: " + stunden + ":" + minuten;
//Nachrichtenfenster mit Ausgabetext öffnen
alert(ausgabe);
</script>
</body>
</html>
Zunächst testen wir im Browser, ob das so funktioniert. Es wird nun zusätzlich eine Begrüßung ausgegeben. Ob unsere if-Anweisung tatsächlich wie gewünscht funktioniert, können wir testen, indem wir die Systemzeit des Betriebssystems auf unterschiedliche Uhrzeiten einstellen und die Ausgabe kontrollieren.
In obigen Skript können wir nun auch sehen, wie wir logische Bedingungen in JavaScript formulieren können. Wir können mit den Größer- und Kleiner-Zeichen (<, >, <=, >=) einen Variablenwert (hier stunden) mit einem vorgegebenen Wert vergleichen. Diese Vergleiche können wir zusätzlich logisch verknüpfen über && (und) sowie || (oder). Zudem kann man auf Gleichheit (==) und Ungleichheit (!=) prüfen. Mit diesem Arsenal kann man verschiedenste Bedingungen prüfen und durch die if-Anweisung das Programm darauf "reagieren" lassen.
Auch unseren "Schönheitsfehler" mit den einstelligen Stunden- oder Minutenanzeigen können wir mit einer if-Anweisung beheben. Wir müssen doch eigentlich nur dann, wenn die Variablen stunden oder minuten einen Wert von kleiner als 10 haben, vor diesem Wert eine Null ergänzen. Ansonsten bleibt der Wert so wie er ist.
Dies ergänzen wir nun noch in unserem Skript:
<!DOCTYPE html>
<html>
<head>
<title>Hallo Welt</title>
<meta charset="UTF-8">
</head>
<body>
Inhalt der Seite
<script>
//Uhrzeit anhand des Datums-Objektes auslesen
var datum = new Date();
var stunden = datum.getHours();
var minuten = datum.getMinutes();
//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;
}
//Ausgabetext generieren
var ausgabe = gruss + " Die aktuelle Uhrzeit: " + stunden + ":" + minuten;
//Nachrichtenfenster mit Ausgabetext öffnen
alert(ausgabe);
</script>
</body>
</html>
Testen Sie die erweiterte Version im Browser mit einer Uhrzeit mit einstelliger Stunden oder Minuten. Die zusätzlichen zwei if-Anweisungen sind ja nicht sehr knifflig. Nicht sofort offensichtlich ist eventuell die Art, wie die Werte für Stunden und Minuten umgeformt werden. Statt eine neue Variable zu generieren (was auch möglich gewesen wäre und sinnvoll, wenn die ursprüngliche Variable noch später gebraucht worden wäre), haben wir die bestehenden Variablen "überschrieben". Wieso schreiben wir hier "0" in Anführungszeichen?
Dadurch erreichen wir, dass nicht zur Zahl 0 die aktuellen Stunden oder Minuten addiert werden - dies würde ja die Zahl nicht verändern. Indem wir die "0" durch die Anführungszeichen als Text behandeln und danach das Pluszeichen verwenden, signalisieren wir JavaScript, dass hier mit Textvariablen gearbeitet wird und es wandelt daher auch die Variablen stunden und minuten von numerischen in Textvariablen um (engl. type conversion). Dadurch wird innerhalb der if-Anweisung aus "8" nun "08" usw.
Nun haben wir einen ganz nette Anzeige und Umwandlung der Uhrzeit erreicht. Nicht so schön ist allerdings die Anzeige innerhalb des Nachrichtenfensters durch die Funktion alert. Wenn wir so eine Information auf einer Website anzeigen wollen, dann möchten wir sie wahrscheinlich mehr integrieren und den Nutzer nicht mit aufploppenden Fenstern ablenken. Wir sollten uns daher als nächstes damit beschäftigen, wie wir Elemente in der HTML-Struktur gezielt selektieren können und dann verändern, etwa indem wir den Inhalt des bisherigen Nachrichtenfensters einem Element als Textinhalt übergeben.
> weiter