Webdesign mit JavaScript
Nick Heinle & Bill Pena
1.Auflage Juli 2002
ISBN 3-89721-275-7
282 Seiten
|
|
|
|
|
Webdesign mit JavaScriptNick Heinle & Bill Pena 1.Auflage Juli 2002 ISBN 3-89721-275-7 282 Seiten |
 |
 |
 |
 |
Falls Sie bereits andere Bücher über JavaScript gelesen haben, mußten Sie vielleicht zuerst endlose Seiten über Funktionen, Methoden, Operatoren usw. lesen, bevor Sie erfuhren, wie Sie ein ganz einfaches Skript schreiben. Wenn Sie JavaScript erst einmal besser kennen, müssen Sie diese und weitere Konzepte natürlich verstehen, aber Sie können Ihre Webseiten auch schon attraktiver gestalten, wenn Sie einfach direkt in JavaScript einsteigen.
Genau darum geht es in diesem Kapitel, an dessen Ende Sie bereits zwei praktische Skripte kennen werden: eines, mit dem Sie der Statuszeile beschreibende Kommentare hinzufügen, und eines, mit dem Sie den Besuchern Ihrer Website der Tageszeit angepaßte Seiten anbieten. Wichtiger ist jedoch, daß Sie dann verstehen werden, warum die Skripte das machen, was sie machen, und daß Sie bereit sein werden, tiefer in JavaScript einzusteigen.
In diesem Kapitel werden die folgenden Themen besprochen:
Wünschen Sie sich auch manchmal, daß Links sprechen könnten? Anders ausgedrückt: Wäre es nicht hilfreich, wenn man den Anwendern mitteilen könnte, was sie erwartet, wenn sie einen bestimmten Link anklicken? Mit JavaScript ist das ganz einfach.
Abbildung 1-1 zeigt die Website des O'Reilly Verlags. Die auf der Seite gezeigten Buchcover führen den Anwender zu der Katalogseite des jeweiligen Buches, wo er ausführliche Informationen zu diesem Buch findet. Allerdings teilt die Miniaturansicht des Buchumschlags dem Anwender nicht viel darüber mit, wohin er weitergeleitet wird, wenn er das Bild anklickt. Um dieses Problem zu lösen, können wir in der Statuszeile des Browsers eine kurze Beschreibung des Links anzeigen, sobald der Anwender den Cursor über ein Bild bewegt. Falls die Beschreibungen gut geschrieben sind, geben sie der Website einen nützlichen Kontext. Wenn man die Maus in unserem Beispiel über den Umschlag von XSLT bewegt, wird in der Statuszeile der Text »Klikken Sie hier, um auf die Katalogseite zu gelangen« angezeigt. Wie leicht das zu bewerkstelligen ist, zeigt das Beispiel 1-1.
<a href="http://www.oreilly.de/catalog/xsltger/" onMouseOver="window.status = 'Klicken Sie hier, um auf die Katalogseite zu gelangen'; return true;"> <img width="145" height="190" border="0" src="xslt.gif"></a>
Der Link im Beispiel 1-1 sieht zwar wie ein normaler Link aus, funktioniert offenbar aber etwas anders. Das Tag <a> enthält ein kleines JavaScript-Codefragment. Dieses beginnt (und der HTML-Code endet) mit onMouseOver, einem der integrierten Event-Handler von JavaScript. Ein Event-Handler ist Code, der dann ausgeführt wird, wenn ein Event auftritt. Was ist ein Event? Es ist etwas, das geschieht: Der Anwender zieht die Maus über einen Link, oder eine Seite wird geladen usw.
In diesem Fall haben wir es mit dem Event onMouseOver zu tun, das dann auftritt, wenn die Maus über den Link bewegt wird. Da sich dieser Event-Handler in dem Link befindet, der das Bild umgibt, tritt das Event nur dann auf, wenn die Maus über dieses eine Bild bewegt wird.
Event-Handler kann man in vielen Elementen der Seite verwenden, z.B. in Links, Formularschaltflächen und Bildern. Die Tabelle 1-1 nennt einige häufig verwendete Event-Handler, die JavaScript unterstützt, die Tags, in denen sie verwendet werden können, sowie das Event, das sie behandeln.
Der Code, der onMouseOver folgt, wird ausgeführt, wenn das Event auftritt (in diesem Fall also, wenn die Maus über den Link bewegt wird). Wenn Sie den Event-Handler mit geeignetem Code verbinden, erhalten Sie einen Link, der etwas macht, sobald man die Maus über den Link bewegt. Der Code im Beispiel 1-1 zeigt die Beschreibung in der Statuszeile des Browsers an.
Achten Sie darauf, daß hinter onMouseOver unbedingt ein Gleichheitszeichen (=) folgt. Das Gleichheitszeichen besagt: »Wenn onMouseOver auftritt, dann führe den folgenden Code aus.« Der Code, der dann folgt, muß in doppelte Anführungszeichen eingeschlossen sein, damit der Handler weiß, welchen Code er ausführen soll (den gesamten Code innerhalb der Anführungszeichen, nichts anderes). Um es in der Sprache der Programmierer auszudrücken: Das Gleichheitszeichen weist dem Event-Handler einen Wert zu. Natürlich sollte Ihnen dieses Konzept bereits bekannt sein, da Sie das Gleichheitszeichen in HTML ständig dazu verwenden, Attributen Werte zuzuweisen (z.B. <a href="seite.html">).
Nachdem Sie nun wissen, wie Sie onMouseOver verwenden, müssen wir uns mit dem Code befassen, der danach folgt:
"window.status =
'Klicken Sie hier, um auf die Katalogseite zu gelangen'; return true;"
Der Code weist die Statuszeile des Browsers (JavaScript bezeichnet sie als window.status) an, den Text »Klicken Sie hier, um auf die Katalogseite zu gelangen« anzuzeigen. Eigentlich ist das schon alles. Aber selbst derart einfacher Code enthält einige beachtenswerte Punkte:
So weit, so gut; aber was bedeuten die Wörter return true; am Ende dieses Codes? Im Moment brauchen Sie nur zu wissen, daß diese Wörter den Browser davon abhalten, in der Statuszeile wie üblich den URL anzuzeigen. Würden diese Wörter fehlen, dann könnte der Anwender unsere Nachricht in der Statuszeile niemals sehen, da sie sofort durch den URL überschrieben würde. Dieses return werden wir weiter unten in diesem Buch bei mehreren Skripten ausführlich besprechen.
Um dieses Skript in Ihrer Website zu verwenden, ersetzen Sie den Text zwischen den einfachen Anführungszeichen (sowie natürlich auch den URL und den Inhalt) einfach durch eigenen Text.
Falls Sie dieses Skript ausprobiert haben, haben Sie vermutlich festgestellt, daß der Text in der Statuszeile nicht direkt wieder verschwindet, wenn Sie die Maus vom Link wegbewegen. Um dieses Problem zu lösen, müssen wir dem Link einen zweiten Event-Handler einfügen, und zwar einen für onMouseOut-Events. Das Beispiel 1-2 zeigt diesen Event-Handler.
<a href="http://www.oreilly.de/catalog/xsltger/" onMouseOver="window.status = 'Klicken Sie hier, um auf die Katalogseite zu gelangen'; return true;" onMouseOut="window.status = '';"> <img width="145" height="190" border="0" src="xslt.gif"></a>
Der Code für den Event-Handler onMouseOut setzt window.status einfach auf eine leere Zeichenkette (''). Der Event-Handler onMouseOut wird ausgelöst, sobald sich die Maus vom Link wegbewegt, und löscht den Text aus der Statuszeile.
Nun werden Sie Ihr erstes echtes Skript schreiben; dafür müssen Sie einige neue Begriffe verstehen. Falls Sie bisher noch nicht programmiert haben (in C, C++, VB, Pascal oder einer anderen Sprache), ist dies genau das richtige Skript für Sie. Da das erste Beispiel JavaScript einbaute, war es eher ein erweitertes <a>-Tag als ein wirkliches Skript. Das zweite Beispiel ist komplexer.
Da die Anwender beim Surfen im Internet zu verschiedenen Tageszeiten unterschiedliche Ziele verfolgen, kann es Ihrer Website zugute kommen, wenn Sie tagsüber und nachts jeweils verschiedene Inhalte anbieten. So könnte ein Skigebiet z.B. tagsüber Informationen für Skifahrer wie etwa den Zustand der Loipen oder die Schneehöhe angeben und nachts über Übernachtungs- und Ausgehmöglichkeiten informieren. Die Homepage des Winter Park Ski Resort veranschaulicht diese Flexibilität, indem sie je nach Tageszeit unterschiedliche Bilder anzeigt. Abbildung 1-2 und Abbildung 1-3 zeigen zwei mögliche Seiten.
Wie macht man dies nun mit JavaScript? Kurz gesagt: Ein Skript prüft die Tageszeit und liefert dann den Tages- oder den Nacht-HTML-Code. In diesem kleinen Skript werden wir mehrere Begriffe klären:
Beispiel 1-3 zeigt den Code für eine Seite, die je nach Tageszeit unterschiedliche Inhalte darstellt. Im Anschluß an das Listing werden wir den Code ausführlicher erklären.
<html> <head> <title>Tag-und-Nacht-Skript</title> </head> <body> <script language="JavaScript"> <!-- var jetzt = new Date(); var stunde = jetzt.getHours(); if (stunde >= 4 && stunde <= 16) { document.bgColor = "#FFFFFF"; document.fgColor = "#000000"; document.write("<img height='150' width='250' src='foto-tag.jpg'>"); document.write("<p>Würden Sie jetzt nicht lieber im Pulverschnee "); document.write("skifahren, als vor dem Bildschirm zu sitzen?</p>"); } else { document.bgColor = "#000000"; document.fgColor = "#FFFFFF"; document.write("<img height='150' width='250' src='foto-nacht.jpg'>"); document.write("<p>Wollen Sie nicht noch einen trinken gehen, bevor "); document.write("Sie es sich nach dem langen Tag auf der Piste "); document.write("gemütlich machen?</p>"); } //--> </script> </body> </html>
Alle Skripte beginnen und enden mit demselben Element: dem Tag script. Das HTML-Dokument im Beispiel 1-3 ist im Grunde ein einziges großes script-Tag; der Body des Dokuments enthält keinerlei anderen Inhalt. Die Syntax sieht folgendermaßen aus:
<script language="JavaScript">
Der Browser betrachtet alles, was sich innerhalb des script-Tags befindet, als reinen JavaScript-Code und nichts anderes. An dieser Stelle werden sich die meisten Ihrer Skripte befinden. script-Tags kann man an jeder Stelle eines HTML-Dokuments einfügen, im Kopf ebenso wie im Body. In diesem Fall haben wir das script-Tag dort eingefügt, wo das Skript eine Seite ausgibt: im Body. In anderen Dokumenten werden Sie Funktionen sehen, die in einem script-Tag im Kopf des Dokuments definiert sind und dann an anderen Stellen der Seite in anderen script-Tags aufgerufen werden.
Vielleicht fragen Sie nun: »Warum enthält das script-Tag das Attribut language?« Der Grund hierfür ist, daß JavaScript nicht die einzige Skriptsprache für das Internet ist. Sie können auch VBScript verwenden, eine Skriptsprache, die auf der Programmiersprache Visual Basic beruht. Allerdings wird VBScript nur vom Internet Explorer unterstützt, weshalb es nur von begrenztem praktischen Nutzen ist.
Es gibt zwei Versionen von JavaScript, die jeweils von verschiedenen Browsern unterstützt werden. JavaScript 1.0 wurde im Netscape Navigator 2.0 eingeführt. Seitdem hat sich JavaScript zur Version 1.5 weiterentwickelt, die derzeit von Netscape 6 und Internet Explorer 5.5 und höher unterstützt wird. Außerdem wurde JavaScript unter dem Namen ECMAScript (ECMA-262) standardisiert.
Sind diese verschiedenen Versionen ein Grund zur Beunruhigung? Normalerweise nicht. Die meisten Skripte in diesem Buch verwenden Merkmale, die von allen in den letzten vier Jahren veröffentlichten Browsern unterstützt werden. Sofern dies nicht zutrifft, geben wir einen entsprechenden Hinweis. Falls ein Skript ein Merkmal aus der neuesten JavaScript-Version verwendet, müssen Sie an Ihrem script-Tag lediglich eine geringfügige Änderung vornehmen:
<script language="JavaScript 1.5">
Der erste Teil des Tag-und-Nacht-Skripts ermittelt anhand der Systemuhr im Rechner des Anwenders die Tageszeit. Hierfür verwendet es das Date-Objekt, das in JavaScript integriert ist:
var jetzt = new Date(); var stunde = jetzt.getHours();
Die erste Zeile erzeugt ein neues Date-Objekt und gibt ihm den Namen jetzt. Programmierer bezeichnen jetzt als Variable und meinen damit eigentlich nur, daß dies ein Name ist, der mit einer bestimmten Information verbunden ist. Von nun an können wir das aktuelle Datum und die Uhrzeit also als jetzt bezeichnen. Als nächstes sagt das Skript: »Nimm jetzt (das aktuelle Datum und die Uhrzeit), frage es nach der aktuellen Stunde (getHours()) und nenne die Antwort stunde.« Wie wir etwas weiter unten erläutern werden, ist getHours() eine Methode des Date-Objekts. Nun können wir auf die aktuelle Stunde also namentlich verweisen, indem wir die Variable stunde verwenden.
JavaScript vor sehr alten Browsern verstecken
Wenn Sie ein Skript in eine Webseite einfügen, besteht das einzige Problem darin, daß sehr alte Browser das Tag script nicht verstehen und den Code auf der Webseite als normalen Text anzeigen. Dieses Problem läßt sich mit HTML-Kommentaren jedoch leicht umgehen:
<script language="JavaScript"> <!-- Verbirg mich vor antiquierter Technologie. JavaScript-Code // Höre auf, mich zu verbergen. --> </script>
Ältere Browser ignorieren <script>-Tags und alles, was zwischen <!-- und --> steht. Diesen Kommentartyp kann man nur am Anfang und am Ende eines Skripts verwenden, und die Kommentare müssen unbedingt in einer eigenen Zeile stehen. Wenn Sie sie in dieselbe Zeile wie Code setzen, wird dieser Code auskommentiert, und Ihr Skript funktioniert nicht mehr. Weitere Einzelheiten zur Funktionsweise dieser Kommentare finden Sie weiter unten im Exkurs »Einige Kommentare«.
Wir haben dieses Verfahren zum Verbergen des Skripts im Beispiel 1-2 verwendet, damit Sie damit vertraut werden. In den weiteren Beispielen werden wir es jedoch nicht mehr verwenden, da heute eigentlich alle Browser das Tag script verstehen.
|
Wie Sie im Tag-und-Nacht-Skript sehen, wird eine Variable mit var und dem Namen der Variablen gesetzt. Sobald wir eine Variable gesetzt haben, können wir ihr einen Wert zuweisen, wofür wir das Gleichheitszeichen und den Anfangswert für die Variable angeben. Für jetzt und stunde haben wir dies bereits gemacht.
Nachdem wir die aktuelle Uhrzeit ermittelt haben, müssen wir noch etwas damit machen. Der einzige Zweck dieses Skripts besteht darin, mittels dieser Informationen den passenden Inhalt anzuzeigen (oder »auszugeben«, wie die Programmierer sagen).
Damit kommen wir zu einer der nützlichsten Verwendungsmöglichkeiten von JavaScript: zu der Möglichkeit, HTML-Code direkt auf einer Webseite »auszugeben«. Hierfür verwenden wir die Methode document.write():
document.write("<img height='150' width='250' src='foto-tag.jpg'>");
Alles, was im Aufruf von document.write() innerhalb der doppelten Anführungszeichen steht, wird auf der Seite ausgegeben. Dieses Beispiel gibt den HTML-Code aus, der das Bild anzeigt; auf dieselbe Art können Sie jedoch jeden Text oder HTML-Code ausgeben, also auch Tabellen, Formulare oder irgendetwas anderes.
Im Laufe dieses Buches werden Sie feststellen, daß ein Großteil der Arbeit mit JavaScript mit Funktionen und Methoden zu tun hat. In JavaScript ist eine Funktion einfach ein Name für eine Gruppe von Anweisungen an den Webbrowser. Die Methoden unterscheiden sich davon nur in einem Detail; Einzelheiten dazu finden Sie im Kasten »Objekte, Eigenschaften und Methoden« weiter hinten in diesem Kapitel. Einige Methoden wie z.B. document.write() sind in JavaScript integriert; in diesem Buch werden wir sehr viele integrierte Methoden verwenden. Außerdem können Sie in JavaScript eigene Funktionen definieren, was wir in Kapitel 2 besprechen werden.
Nun wissen Sie zwei Dinge: wie Sie die aktuelle Uhrzeit in Stunden bekommen und wie Sie die Seite ausgeben. Aber wie können Sie diese beiden Dinge so kombinieren, daß anhand der Uhrzeit der passende Inhalt ausgegeben wird? Hierfür verwenden Sie die sogenannte if-Anweisung. Das Grundkonzept der if-Anweisung ist sehr einfach: »Wenn diese Bedingung wahr ist, dann mache folgendes.« In JavaScript sieht die einfachste Form der if-Anweisung folgendermaßen aus:
if ( dies wahr ist ) { führe diesen Code aus }
Dieser Code sieht wie zergliederter englisch-deutscher Text aus, und das nicht ohne Grund: Immerhin ist auch JavaScript eine Sprache. Jede if-Anweisung besteht aus dem Wort if, dem eine in runde Klammern gesetzte Anweisung sowie ein in geschweifte Klammern gesetzter Codeblock folgen. Die runden Klammern enthalten die Bedingung, die geprüft werden soll, und die geschweiften Klammern enthalten den Code, der ausgeführt wird, falls die Bedingung erfüllt ist. Betrachten Sie z.B. den folgenden Code:
if (stunde > 22) {
document.write("Es wird langsam spät!");
}
Falls die Variable stunde größer als 22 ist, was bedeutet, daß es später als 22:00 Uhr ist (Stunden werden entsprechend der 24-Stunden-Uhr angegeben), dann gibt der Code eine Nachricht mit der Uhrzeit aus.
Eine if-Anweisung kann auch einen else-Abschnitt mit Code enthalten, der ausgeführt wird, falls die Bedingung nicht erfüllt ist:
if ( dies zutrifft ) { dann führe diesen Code aus } else { führe diesen Code aus }
Dieses Format verwenden wir im Tag-und-Nacht-Skript, wenn wir die Uhrzeit prüfen und das Bild und den Text anzeigen, die der Tageszeit angemessen sind. Zwischen 4:00 und 16:00 Uhr zeigen wir das Tagbild und zwischen 16:00 und 4:00 Uhr das Nachtbild. Der folgende Code zeigt eine vereinfachte Version des Codes aus dem Beispiel 1-3:
if (stunde >= 4 && stunde <= 16) {
document.write("<image src='foto-tag.jpg'>");
}
else {
document.write ("<image src='foto-nacht.jpg'>");
}
Die erste Zeile besagt: »Falls der Wert der Variablen stunde größer gleich 4 und kleiner gleich 16 ist, dann führe den Code in den geschweiften Klammern aus.« Das Größer-gleich-Zeichen (>=) und das Kleiner-gleich-Zeichen (<=) kennen Sie wahrscheinlich noch aus dem Mathematikunterricht; die beiden kaufmännischen Und-Zeichen (&&) bedeuten »und«.
Was geschieht, wenn es 19:00 Uhr ist? Da wir nicht auf diese Uhrzeit prüfen, trifft hier die else-Anweisung zu. Mit else sagen wir: »Falls die Bedingung nicht wahr ist, dann mache statt dessen folgendes.« Falls es 19:00 Uhr ist, ist es nicht zwischen 4:00 und 16:00 Uhr, und das Skript führt den Code aus, der hinter dem Wort else folgt. In unserem Fall gibt der Code also das Nachtbild und den passenden Text aus.
Nachdem Sie nun die Logik von if und else verstanden haben, wollen wir uns den tatsächlichen Code für diese Seiten ansehen. Beachten Sie, daß beide nicht nur unterschiedliche Bilder und Texte aufweisen, sondern auch verschiedene Hintergrund- und Textfarben.
Bei den Stunden zwischen 4 und 16 setzt das Skript die Hintergrundfarbe auf Weiß und die Textfarbe auf Schwarz, zeigt das Bild foto-tag.jpg an und gibt den Text über Skifahren im Pulverschnee aus. Liegt die Stunde nicht zwischen 4 und 16, dann weist die else-Anweisung das Skript an, die Hintergrundfarbe auf Schwarz und die Textfarbe auf Weiß zu setzen, das Bild foto-nacht.jpg anzuzeigen und den Text über einen guten Drink auszugeben.
Um die Farben zu ändern, müssen wir zwei Eigenschaften der aktuellen Webseite setzen. JavaScript bezeichnet diese Seite als das document-Objekt. Die Eigenschaften des document-Objekts beschreiben verschiedene Merkmale des Objekts. Wenn wir der Eigenschaft document.bgColor einen hexadezimalen Wert zuweisen, wird die Hintergrundfarbe geändert, und mit document.fgColor ändern wir die Textfarbe. Die Hintergrundfarbe können Sie jederzeit ändern, solange das Dokument existiert. In einigen Browsern kann die Eigenschaft für die Textfarbe jedoch nur beim Laden des Dokuments gesetzt werden. Sobald das Dokument angezeigt wird, sollten Sie diese Eigenschaft daher am besten unverändert lassen. Wie Sie die Farbe und das Erscheinungsbild von Text ad hoc ändern, erfahren Sie in Kapitel 9.
Im Tag-und-Nacht-Skript haben wir mit der Zeitangabe in Stunden gearbeitet. Natürlich ist es in JavaScript möglich, auf alle Bestandteile von Datum und Uhrzeit zuzugreifen, die entsprechende Syntax besteht jedoch nicht aus einfachem Englisch. Die Tabelle 1-2 zeigt, wie man die Werte für die verschiedenen Bestandteile des Datums ermittelt und in welcher Form sie zurückgegeben werden.
Vergessen Sie nicht: Wenn Sie Uhrzeiten und Daten von JavaScript holen, werden diese als Zahlen zurückgegeben, nicht als Wörter. Wenn Sie ein Date-Objekt also z.B. mit getDay() nach dem Wochentag fragen, erhalten Sie nicht den Namen des Tages (z.B. Sonntag oder Montag), sondern eine Zahl zwischen 0 und einschließlich 6. Für Datenbankanwendungen und ähnliches sind Zahlen zwar nützlicher, aber Sie sollten sie vielleicht dennoch in eine handlichere Form bringen. Sie können z.B. ein Skript schreiben, das getDay() sowie if-Anweisungen verwendet, um die numerischen Werte in die tatsächlichen Namen umzuwandeln. Das Beispiel 1-4 veranschaulicht dies.
<script language="JavaScript"> var jetzt = new Date(); var tag = jetzt.getDay(); var tagesname; if (tag == 0) { tagesname = "Sonntag"; } if (tag == 1) { tagesname = "Montag"; } if (tag == 2) { tagesname = "Dienstag"; } if (tag == 3) { tagesname = "Mittwoch"; } if (tag == 4) { tagesname = "Donnerstag"; } if (tag == 5) { tagesname = "Freitag"; } if (tag == 6) { tagesname = "Samstag"; } document.write("Heute ist " + tagesname + ". <br>"); </script>
Wie funktioniert dies nun? Zuerst wird ein neues Date-Objekt namens jetzt erzeugt, und der Wochentag in Zahlenform wird an die Variable tag übergeben. Anschließend vergleicht eine Folge von if-Anweisungen die Zahl des Tages mit seinem vollständigen Namen und speichert den Namen in der Variablen tagesname. Wenn tag z.B. 0 ist, muß Sonntag sein; wenn tag 1 ist, muß Montag sein usw. Schließlich wird der vollständige Name des Tages, der sich in der Variablen tagesname befindet, mit document.write() auf der Seite angezeigt. Beachten Sie, daß dieses Skript die Variable tagesname erstellt, ohne ihr dabei einen Wert zu geben; der Wert wird erst zugewiesen, wenn wir ermitteln, welcher Tag ist.
= = oder =
Achten Sie darauf, daß Beispiel 1-4 mit == den Wert von tag prüft und dann der Variablen tagesname mit = den passenden Wert zuweist:
if (tag == 2) { tagesname = "Dienstag"; }
Der Unterschied ist nicht groß, aber Sie müssen ihn verstehen, um Fehler im JavaScript-Code zu vermeiden.
Im Bedingungsteil einer if-Anweisung prüfen wir häufig, ob zwei Werte gleich sind. Der Gleichheitsoperator von JavaScript ist ==; jedesmal, wenn Sie zwei Werte auf ihre Gleichheit hin prüfen möchten, müssen Sie == verwenden. In der ersten Zeile der if-Anweisung sagen wir: »Falls tag gleich 2 ist...« Immer wenn Sie == sehen, sollten Sie es als »ist gleich« lesen. Mit != (gelesen als »ist nicht gleich«) können Sie zudem auf Ungleichheit prüfen.
In der zweiten Zeile der if-Anweisung weisen wir der Variablen tagesname mit = den Wert »Dienstag« zu. Sie könnten diesen Code zwar als »tagesname ist gleich Dienstag« lesen; sinnvoller ist es jedoch, wenn Sie sich angewöhnen, ihn als »tagesname wird der Wert Dienstag zugewiesen« zu lesen. In JavaScript (und den meisten anderen Programmiersprachen) wird = als Zuweisungsoperator bezeichnet. Man weist damit einer Variablen einen Wert zu. Die Zuweisung ist nicht dieselbe Operation wie das Prüfen auf Gleichheit. Daher gibt es zwei Operatoren.
|
Dieses Verfahren können Sie auf verschiedene Bestandteile des Datums anwenden, um ein Skript zu erstellen, das auf der Seite das vollständig formatierte Datum anzeigt (z.B. Montag, 10. Juli 2001). Am besten verwendet man dafür Arrays; damit befassen wir uns im Abschnitt »Das Datum richtig angeben« in Kapitel 5
Das Date-Objekt ist jedoch nicht auf den aktuellen Zeitpunkt beschränkt; auch für ein bestimmtes Datum in der Vergangenheit oder Zukunft können Sie ein Date-Objekt erzeugen. Mit allen folgenden Anweisungen können Sie z.B. ein Date-Objekt für den 31. Oktober 2002 erzeugen:
var dann = new Date("October 31, 2002");
var dann = new Date("October 31, 2002 00:00:00");
var dann = new Date("Oct 31, 2002");
var dann = new Date(2002, 9, 31);
Beachten Sie, daß Sie dem neuen Date-Objekt ein bestimmtes Datum übergeben. In JavaScript-Terminologie wird die Information, die Sie einem Objekt übergeben - sei es nun eine Zeichenkette oder sogar ein anderes Objekt -, als Argument bezeichnet. Wenn ein Objekt (oder eine Funktion) ein Argument erhält, verwendet das Objekt diese Daten bei der Durchführung seiner Arbeit. In unserem Fall verwendet das Date-Objekt das Argument, um ein Date-Objekt für das angegebene Datum zu erzeugen.
Dieses Merkmal des Date-Objekts verwendet man im allgemeinen dafür, einen Countdown für eine bestimmte Uhrzeit oder ein bestimmtes Datum zu erzeugen, also z.B. für Jubiläen, Produktveröffentlichungen usw. Falls Sie also ein Skript benötigen, das die Anzahl der Tage zwischen heute und Halloween anzeigt, erzeugen Sie ein Date-Objekt für das aktuelle Datum und eines für Halloween und ermitteln die Differenz durch Subtraktion. Das Skript im Beispiel 1-5 zeigt, wie Sie das machen.
<script language="JavaScript"> var jetzt = new Date(); var dann = new Date("October 31, 2002"); var zwischenzeit = dann.getTime() - jetzt.getTime(); zwischenzeit = Math.floor(zwischenzeit / (1000 * 60 * 60 * 24)); document.write ("Nur noch " + zwischenzeit + " Tage bis Halloween"); </script>
Zuerst erzeugt das Skript für das aktuelle Datum ein neues Date-Objekt namens jetzt und für Halloween ein Date-Objekt namens dann. Anschließend zieht es das aktuelle Datum, jetzt.getTime() , vom Datum von Halloween, dann.getTime(), ab und speichert den Ergebniswert (die zwischen den beiden Daten verbleibende Zeit) in der Variablen zwischenzeit. Damit haben wir in der Variablen zwischenzeit zwar den Zeitunterschied zwischen heute und Halloween, aber es besteht noch ein Problem: Es ist die Zeit in Millisekunden. Wir müssen die Millisekunden in Tage umwandeln. Hierfür dividieren wir zwischenzeit durch die Anzahl der Millisekunden in einem Tag (1.000 Millisekunden x 60 Sekunden x 60 Minuten x 24 Stunden):
zwischenzeit / (1000 * 60 * 60 * 24)
Die zeitliche Differenz in Tagen wird dann mit Math.floor() auf den nächstliegenden ganzen Tag abgerundet. Schließlich wird die Anzahl der Tage mit document.write() auf der Seite angezeigt.
| |
|
|
|
© 2002, O'Reilly Verlag GmbH & Co. KG