Wenn es darum geht, mächtige Webseiten zu erstellen, kommt man um JavaScript nicht herum. Die Script-Sprache eignet sich bestens, um beispielsweise die Validität von Formularen zu überprüfen oder interaktive Diaschauen zu kreieren. Auch komplette Shopping-Systeme mitsamt Einkaufskorb lassen sich in JavaScript programmieren.
Es müssen aber nicht immer riesige Projekte sein: JavaScript kommt auch zum Einsatz, wenn dem Surfer kleine Hilfeleistungen geboten werden sollen oder wenn es bloss darum geht, die Site mit kleinen Goodies spannender zu gestalten.
Und darum geht es in diesem Workshop. Wir zeigen Ihnen anhand von elf Beispielen, wie Sie dem Besucher Ihrer Seiten mit einfachen Mitteln mehr bieten können als Ihr Konkurrent. Die Exempel funktionieren in der vorliegenden Fassung nur mit den neueren Versionen von Internet Explorer. Für Netscapes Navigator wären Anpassungen an das spezielle Objekt-Modell nötig.
Wer eine Website betreibt, möchte natürlich auch möglichst viele Besucher auf seinen Seiten zählen können. Wenn das Angebot gut genug ist, ist das kein grosses Problem - die Surfer kommen von selbst. Häufiger kommen sie allerdings, wenn sie einen Bookmark gesetzt oder die Homepage gleich als Startseite des Browsers definiert haben.
Als Sitebetreiber muss man also ein hohes Interesse daran haben, dass die Surfer die eigenen Seiten bookmarken oder als Startseite wählen. Und man kann sie ruhig daran erinnern. Komfortabel für den Surfer wird es allerdings, wenn er für diese Vorgänge nur noch einen Link oder einen Button anklicken muss.
Das folgende kleine Script sorgt dafür, dass der Surfer bloss auf den Text klicken muss, um eine im Script vorgegebene Site als Startseite zu definieren.
Natürlich lässt sich dies problemlos auch über einen Button erledigen. Dazu muss bloss anstelle des Textes im Beispiel die Verknüpfung zum entsprechenden Bild eingefügt werden.
Die erste Anweisung sorgt dabei dafür, dass auf die Interna des Internet Explorer zugegriffen wird. Im zweiten Befehl wird dann der Wert für die neue Startseite übergeben.
Allerdings ändert der Internet Explorer seine Startseite nicht einfach so, sondern fragt zuerst den Anwender, ob er das wirklich will. Dieses Verhalten lässt sich nicht umgehen - glücklicherweise nicht! Gäbe es nämlich diese Möglichkeit, würde wohl jede Webseite automatisch als Startseite festgelegt. Die obigen Anweisungen müssten dazu bloss in eine Funktion eingebettet und per onLoad-Eventhandler aufgerufen werden.
Wer dem Surfer die Wahl lassen will, ob dieser seine Seiten als Startseite oder doch lieber nur als Bookmark eintragen will, der macht einfach einen zweiten Link respektive Button und ergänzt die Seite um folgendes Script.
Hierbei wird das Dialogfeld für Bookmarks geöffnet, sobald der Surfer mit der Maus über den Link oder Button fährt. Dem User obliegt es auch, den passenden Ordner auszusuchen und auf OK zu klicken.
In die Bookmarks übernommen werden die aktuelle URL sowie der Titel, wie er in der Titelleiste des Browsers angezeigt wird. Dabei lassen sich die Argumente location.href und document.title durch den Entwickler auch anpassen: Ersteres wird durch eine URL in Klartext ersetzt, letzteres durch den gewünschten Text, der dann im Bookmark-Ordner angezeigt wird.
Etwas aufwendiger wird es, wenn man mehrere Unterseiten hat und verhindern will, dass der Besucher diese bookmarkt. Genau genommen lässt sich das nämlich nicht verhindern: Es steht dem Surfer frei, was er in seine Favoriten aufnimmt und was nicht. Allerdings gibt es verschiedene Workarounds für dieses Problem.
Eine mögliche Lösung besteht in der Verwendung von Frames. Dazu wird zunächst ein unsichtbares Frameset erstellt, das wir hier default.htm nennen (der Name dieser Datei spielt keine Rolle, es muss sich aber um die im Server definierte Einstiegsseite handeln). Das Frameset sieht folgendermassen aus:
Beachten Sie dabei, dass das Frameset das geöffnete Browserfenster komplett füllt, und zwar nur mit einer Seite (index.htm). Diese Seite muss also die eigentliche Homepage sein. Allerdings muss auch die (leere) Seite _blank.htm existieren, wenn der User nicht eine Fehlermeldung erhalten soll.
Nun müssen wir noch dafür sorgen, dass die Unterseiten nicht gebookmarkt werden können. Dazu dient das folgende Script, das auf allen entsprechenden Pages eingefügt wird:
Dieses Script vergleicht die URL der Seite, die der Anwender bookmarken will, mit der eigenen URL. Sind sie identisch (was zu erwarten ist, wenn der User eine Unterseite bookmarkt), ändert das Script die URL in der Weise, dass sie auf das initiale Frameset zeigt.
Sie können auch verhindern, dass jemand auf seiner Website Links auf Ihre internen Seiten legt. Dazu wird der Referrer der fremden Page ausgelesen, von der der Surfer in Ihr Web gelangen will. Ist dieser nicht identisch mit dem Referrer, den eine eigene Seite mitliefern würde, wird der Surfer auf die Homepage umgeleitet.
Da eine Website meist aus zahlreichen Seiten besteht, die untereinander auch absolut verlinkt sein können, überprüft dieses Script bloss die Basis des Referrers. Natürlich kann man diese Basis beliebig anpassen; zu beachten ist bloss, dass die Anzahl Zeichen in der substring-Methode korrekt angegeben wird.
Oft ist es nützlich, wenn man dem Surfer mehr Informationen über einen Link zukommen lassen kann, als der Link-Titel selber hergibt. Am einfachsten geht das natürlich, indem man eine Erklärung gleich dazuschreibt.
Aus Design-Gründen ist es allerdings nicht immer möglich, zu allem und jedem noch einen umfangreichen Erklärungstext zu liefern. In solchen Fällen kann man sich mit Popup-Fenstern helfen oder die Erklärung in der Statuszeile anzeigen. Für letzteres zeigen wir hier drei Beispiele.
Im Normalfall ist die Statuszeile des Browsers leer. Erst wenn der Surfer mit der Maus über einen Link fährt, wird dessen URL angezeigt.
Mit einem kleinen Script lässt sich das so ändern, dass beispielsweise ein Hinweis auf spezielle Angebote oder besondere Features, vielleicht aber auch ganz lapidar der Site-Name in der Statusbar angezeigt werden.
Der Wert von defaultStatus bleibt dabei in der Statuszeile erhalten, bis er von einem anderen Ereignis überschrieben wird - etwa wenn der Anwender mit der Maus einen Link berührt.
Noch einfacher ist es, weitere Informationen zu einem Link in die Statusbar zu schreiben. Dafür braucht es noch nicht einmal ein eigentliches Script, sondern nur eine kleine Erweiterung des Link-Tags:
Fährt nun der Surfer mit der Maus über diesen Link, wird der vordefinierte Text in der Statuszeile angezeigt, verlässt er die Verknüpfung, ist die Statuszeile wieder leer (oder zeigt den oben vorgestellten Standardwert an).
Bei standardmässigen Links kann der Surfer in den meisten Fällen auch ohne Erklärungen auskommen. Anders sieht es manchmal bei ImageMaps aus. Diese sind nicht selten alles andere als selbsterklärend - umso wichtiger ist es, dem Anwender wenigstens in der Statuszeile eine kleine Hilfestellung zu bieten.
Der Code funktioniert ganz ähnlich wie beim letzten Beispiel, mit dem Unterschied, dass die Eventhandler nun in eine Map integriert sind.
Es gibt Fälle, da ist es durchaus nützlich, wenn ein Surfer einen Link gar nicht anzuklicken braucht, sondern sich die neue Seite automatisch öffnet. Praktisch wäre dies etwa bei Eingangstunneln in eine Website oder bei einleitend angezeigten Flash-Intros: Statt einen gut versteckten Skip-Button zu suchen und anzuklicken, könnte der Anwender mit der Maus über einen speziell gekennzeichneten Bereich des Intros fahren und würde automatisch auf die Hauptseite weitergeleitet. Mit dem nachfolgenden Script wird dazu allerdings immer ein neues Fenster geöffnet.
Dadurch sind allerdings auch komplett andere Anwendungsmöglichkeiten denkbar. Was beispielsweise den Site-Betreiber freuen, den Surfer dagegen eher ärgern dürfte, wäre das automatische Öffnen von per Banner beworbenen Websites: Sobald der User mit der Maus über das Banner fährt, öffnet sich die zugehörige Website in einem neuen Fenster.
Für diese Funktion genügen wenige Codezeilen, die sich direkt in den Link, der ein Banner sowieso standardmässig umgibt, integrieren lassen:
Über die Attribute des window.open-Befehls kann man auch noch entscheiden, ob das neu geöffnete Fenster eine Tool- und Scrollbar und eine Statuszeile haben soll, ob der Anwender es in der Grösse anpassen kann und welche Grösse es überhaupt haben soll. Die Erweiterung sieht so aus:
Auf diese Weise kann man dafür sorgen, dass sich zwar ein Fenster mit der neuen Site öffnet, dieses aber zunächst recht diskret bleibt. Will der Surfer mehr sehen, kann er das neue Fenster problemlos selber an die gewünschte Grösse anpassen.
Im vorhergehenden Beispiel haben wir ein Popup-Fenster mit der kürzest möglichen Variante, der window.open-Methode, direkt im Link geöffnet. Dieselbe Methode lässt sich auch in einem richtigen Script verwenden und eröffnet dadurch zusätzliche Kontrollmöglichkeiten.
Zunächst allerdings einige Worte zum richtigen Einsatz von Popup-Fenster. Diese sollten dem Surfer nämlich immer einen konkreten Nutzen bringen, ihn aber nach Möglichkeit nicht nerven. Natürlich ist das ein zweischneidiges Schwert, weil sich manche grundsätzlich durch jedes nicht explizit aufgerufene Fenster gestört fühlen - die grosse Masse allerdings weiss einen nicht allzu aufdringlichen Hinweis per Popup durchaus zu schätzen.
Denkbare Anwendungsmöglichkeiten eines Popup-Fensters wären etwa Hinweise auf neue Features der Site, Aktionen oder auch wichtige Anlässe in deren Umfeld. Ein Popup kann - wenn ständig geöffnet - durchaus auch der Navigation dienen, etwa als Fernsteuerung des Haupt-Browserfensters. Und nicht zuletzt lassen sich darin kleine Umfragen wunderbar unterbringen. Generell eignen sich Popup-Fenster für alle Ankündigungen, Hinweise oder Fragen, die eine gewisse Wichtigkeit und Dringlichkeit haben - denn nichts wird so beachtet wie ein unverlangt aufpoppendes Fenster.
Dieses Beispiel zeigt zweierlei: Einerseits bietet es eine Möglichkeit, wie mit einigen Funktionen ein Popup-Fenster geöffnet und geschlossen werden kann, sobald der aufrufende Link mit der Maus berührt wird respektive den Fokus verliert. Andererseits wird in Zeile 5 eine Möglichkeit gezeigt, wie man einen erklärenden Text an das neue Fenster übergibt. Auf diese Weise bietet sich das Script beispielsweise an, um einen Link oder einen beliebigen anderen Text im Hauptfenster mit zusätzlichen Erklärungen zu versehen: Sobald der User die Maus über ein Wort führt, könnte im aufspringenden Popup-Fenster eine Definition des Begriffs erscheinen.
Sehr gut eignen sich Popup-Fenster auch zur Navigation durch die Seite. Das Fenster, das ein Inhaltsverzeichnis, eine Sitemap oder etwas ähnliches beherbergt, dient damit als einfache Fernsteuerung.
Natürlich muss unsere Fernsteuerung einige Anforderungen erfüllen: Sie soll sich beim Laden der Seite automatisch öffnen, ständig im Vordergrund sichtbar sein und vom Anwender nicht geschlossen werden können. Die Links, die in der Fernsteuerung angeklickt werden, müssen korrekt an das Hauptfenster übergeben und dort geöffnet werden. Und nicht zuletzt muss sich die Fernsteuerung automatisch schliessen, sobald das Hauptfenster geschlossen wird oder sich der Surfer auf eine andere Site weiterbewegt.
Zwei dieser Anforderungen lassen sich mit JavaScript nicht komplett erfüllen: Einerseits lässt sich nicht verhindern, dass der User das Steuerungsfenster schliesst. Andererseits kann dem Fernsteuerungsfenster zwar mit dem Befehl BODY onBlur=self.focus() ein ständiger Fokus gegeben werden, was aber dazu führt, dass alle anderen offenen Browserfenster gestört werden und ein teils seltsames Verhalten zeigen. Zum Beispiel können sie dann nicht mehr problemlos geschlossen werden.
Um ein derartiges Navigationssystem zu realisieren, benötigen wir zwei HTML-Seiten und einige Scripts. Die eine Seite - zum Beispiel die Einstiegs- oder Homepage der Site - wird dabei ins Hauptfenster geladen. Die andere beinhaltet ausschliesslich die Navigationslinks. Die Scripts, die in beiden Seiten zu finden sind, bestimmen das Verhalten der Fenster.
Zunächst sorgen wir dafür, dass die Fernsteuerung zusammen mit der Hauptseite geladen wird. Dazu ergänzen wir den BODY-Tag der Hauptseite um folgenden Code:
Dieser Code sorgt dafür, dass die Funktion remote() gestartet wird, sobald die Hauptseite fertig geladen ist. Die Funktion ist dafür zuständig, dass das Remote-Fenster geöffnet und die richtige Seite geladen wird.
Die Funktion remote() besteht hauptsächlich aus der Konfiguration des Fernsteuerungsfensters (Zeile 4), der Definition des Hauptfensters (als opener in Zeile 5 bis 7) sowie der Übergabe der URL des Remote-Fensters an die Funktion. Alternativ könnte man die URL bereits in Zeile 4 als erstes Attribut des window.open-Kommandos eintragen.
Die Attribute dieses Kommandos ergeben im Beispiel ein "nacktes" Remote-Fenster ohne Menü- und Scrollbars und ohne Statuszeile. Selbstverständlich können Sie diese Attribute nach Belieben anpassen.
Im Fernsteuerungsfenster selber ist ebenfalls ein Script zu finden.
Dieses Script besteht aus zwei Funktionen: Die erste, open(url) (Zeilen 2 bis 4), übergibt die im HTML-Code zu definierenden Links an das Hauptfenster, wo sie geöffnet werden. Die zweite, closeWindow() (Zeilen 5 bis 7), schliesst das Remote-Fenster.
Nun müssen wir bloss noch die Links in die Fernsteuerung einbauen:
Nach diesem Muster lassen sich beliebig viele Links ins Navigationsfenster einbauen. Denkbar wäre etwa auch eine komplette Sitemap, und mit einer Imagemap liesse sich das Ganze sehr ansprechend gestalten. Nicht vergessen dürfen wir allerdings die Funktion, die das Fenster wieder schliesst. In unserem Beispiel erledigt das ein weiterer Link, den wir über ein Stylesheet ein wenig anders als von Standardlinks gewohnt formatieren:
Sobald der User mit der Maus auf den Link gelangt, wird das Fernsteuerungsfenster geschlossen.
Wie bereits erwähnt, bietet ein solches Popup-Fenster sehr vielfältige Einsatzmöglichkeiten. So kann mit den onLoad- und onUnload-Eventhandlern direkt vom Hauptfenster aus dafür gesorgt werden, dass ein passendes Popup automatisch geöffnet und wieder geschlossen wird, sobald man die entsprechende Seite verlässt. Per setTimeout-Befehl lassen sich die Fenster auch nach einer bestimmten Zeit automatisch wieder schliessen.
Besonders interessant ist aber die Möglichkeit, Formulardaten vom Popup-Fenster ans Hauptfenster zu übergeben. Auf diese Weise könnten etwa auszufüllende Formulare nach Bedarf in einem separaten Fenster angezeigt werden. Eine andere Möglichkeit ist das Anzeigen einer kurzen Umfrage, deren Resultate dann wiederum im Hauptfenster zu sehen sind.
Grundsätzlich bedarf das letzte Beispiel dafür bloss kleinerer Änderungen. Der Aufruf des Popup-Fensters bleibt gleich, ebenso die Funktion zum Schliessen des Fensters. Geändert wird die Funktion zur Übergabe der Werte an das Hauptfenster sowie natürlich der Inhalt des Remote-Fensters: Hier findet sich jetzt ein Formular statt einer Anzahl Links. Und schliesslich müssen im Hauptfenster die entsprechenden Formularfelder ebenfalls definiert werden, allerdings unsichtbar.
