Javascript-Lexikon mit Wikipedia
Nachschlagefunktion für die Website
Aktueller als Glossar
Javascript-Lexikon mit Wikipedia
Enthalten Ihre Online-Texte Fachausdrücke oder Fremdwörter, die vielleicht nicht auf Anhieb von allen verstanden werden? Oder sollte die Bedeutung einzelner Begriffe oder Abkürzungen etwas genauer erläutert werden? Mit dem hier vorgestellten kleinen Javascript-Programm lösen Sie dieses Problem auf einfache Weise, indem Sie dem Anwender die Möglichkeit geben, unklare Begriffe selbst nachzuschlagen. Die Anfrage erfolgt per Doppelklick, und das Ergebnis wird sofort in einem zusätzlichen Fenster präsentiert.
Sie ersparen sich damit nicht nur die Zusammenstellung eines eigenen Glossars, sondern können auch sicher sein, dass die Suchergebnisse immer auf dem neuesten Stand sind. Wenn Sie diese direkte Nachschlagemöglichkeit anbieten, sollten Sie allerdings nicht vergessen, den Anwender darauf hinzuweisen.
Doppelklicks abfangen
Javascript-Lexikon mit Wikipedia
Die erste Funktion dient dazu, den erforderlichen Event-Handler zu registrieren. Sie sollte erst dann aufgerufen werden, nachdem die Seite vollständig geladen ist. Zu diesem Zweck verwenden Sie den Event-Handler onload im body-Tag des Dokuments.
function intro() {
if(w3c) {
var field = document.getElementById("dict");
field.addEventListener("dblclick",
fetchSel, true);
}
if(msie) {
var field = document.all.dict;
field.ondblclick = fetchSel;
}
}
Für die flexible Gestaltung des Skripts ist es sinnvoll, einen eigenen Bereich zu definieren, in dem der beabsichtigte Effekt eintritt. Die Variable zur Bezeichnung des Bereichs, in dem es möglich sein soll, Wörter per Doppelklick abzufragen, heißt im obigen Beispiel field. Mit ihr kann auf das HTML-Element mit dem ID-Namen dict zugegriffen werden.
Browser-Frage
Javascript-Lexikon mit Wikipedia
Die Zuweisung des Event-Handlers erfolgt dann in zwei verschiedenen Codezeilen. Dieses unterschiedliche Vorgehen ist notwendig, weil Events vom MS Internet Explorer und den neueren Browsern unterschiedlich angesprochen werden. Findet nun im field-Bereich ein Doppelklick statt, dann wird die noch zu definierende Funktion fetchSel aufgerufen.
Natürlich müssen an dieser Stelle die Variablen w3c und msie schon bekannt sein. Sie werden daher zu Beginn des Skripts auf die übliche Weise definiert:
var w3c = document.getElementById&&!document.all?1:0;
var msie = document.all?1:0;
Mit dieser Abfrage lassen sich die W3C-kompatiblen Browser vom MSIE unterscheiden. Sie wird deshalb auch Browserweiche genannt. Weil auch der MSIE die Methode getElementById() kennt, sollte das all-Objekt für die anderen Browser definitiv ausgeschlossen werden.
Speichern
Javascript-Lexikon mit Wikipedia
Es ist notwendig, den per Doppelklick selektierten Text zu speichern und unter Umständen auch zu bearbeiten, bevor er weitergereicht wird:
function fetchSel() {
if(document.selection) {
selected = document.selection.createRange().text;
if(selected != "") {
document.selection.empty();
}
}
else if(window.getSelection) {
selected = window.getSelection().toString();
selected = selected.replace
(/["!?;:,.]/g, "");
}
popup(selected);
}
Wegen der Browser-Unterschiede sind leider wieder zwei Skript-Zweige erforderlich: Den Text, den der Anwender im Dokument selektiert, ermitteln Sie mit der Methode getSelection() beziehungsweise dem selection-Objekt. Beachten Sie dabei, dass diese einmal zum document-Objekt, das andere Mal jedoch zum window-Objekt gehören. Bevor Sie den selektierten Text in der Variablen selected abspeichern, sollte in jedem Fall vorher geprüft werden, welches Verfahren dem Browser bekannt ist.
Das selection-Objekt unterstützt nur der Internet Explorer. Falls es existiert, wird mit der createRange()-Methode der markierte Text ermittelt.
Der zweite Skript-Zweig prüft, ob der Browser die getSelection()-Methode kennt. Dies sollte bei allen anderen neueren Browsern der Fall sein. Möglich ist hier allerdings ein kleines Problem mit Punkten, Anführungszeichen und anderen Satzzeichen, die unmittelbar vor oder hinter einem Wort folgen. Im Mozilla-Browser und seinen Derivaten werden Textstellen, die nicht durch Leerstellen voneinander getrennt sind, als zusammengehörig erfasst. Beim Doppelklick werden sie daher ebenfalls markiert. Da diese aber nicht zum eigentlichen Wort gehören, sollen sie auch nicht übertragen werden.
Bereinigung
Javascript-Lexikon mit Wikipedia
Um mögliche Satzzeichen herauszufiltern, benutzen Sie die Methode replace(). Mit Hilfe eines regulären Ausdrucks können Sie auf diese Weise beliebige Zeichen vollständig entfernen. Der Internet Explorer macht das allerdings automatisch und benötigt deshalb diesen Filter nicht. Hier sollten Sie stattdessen dafür sorgen, dass nach dem Abspeichern die Markierung wieder entfernt wird. Dies ist mit der Methode empty() zu bewerkstelligen. Am Schluss rufen Sie die nächste Funktion auf, der Sie den gespeicherten Text als lokale Variable übergeben.
Anfrage weiterleiten
Javascript-Lexikon mit Wikipedia
Der ausgewählte Text wird nun an einen beliebigen URL angefügt und in einem eigenen Browser-Fenster vom Server angefordert:
function popup(selected) {
var searchURL = "http://de.wikipedia.org/";
var attr = "wiki/" + escape(selected);
var param = "width=520,height=400";
param += ",left=260,top=60";
param += ",menubar=1";
param += ",location=1";
param += ",scrollbars=1";
param += ",resizable=1";
param += ",toolbar=1";
param += ",status=0";
if(selected != "") {
popWin = window.open(searchURL + attr,"s",param);
popWin.focus();
}
}
In der Variablen searchURL definieren Sie die vollständige Web-Adresse Ihres bevorzugten Lexikons. Im Beispiel ist das die deutsche Version von Wikipedia. Diese verfügt derzeit über etwa 265000 Artikel. Die an Wikipedia geschickten Anfragen haben einen zusätzlichen Vorteil: Sie werden nämlich in der Regel auch dann zum richtigen Artikel weitergeleitet, wenn sie im Plural erfolgen. Selbst wenn Sie nach »Träume« oder »träumen« suchen, erhalten Sie den Artikel zu »Traum«. Selbstverständlich können Sie stattdessen die umfangreichere englische Fassung von Wikipedia angeben oder eine andere Quelle. Auch das Fremdsprachen-Lexikon von dict.leo.org eignet sich für diese automatischen Abfragen hervorragend. Es steht derzeit für Englisch und Französisch zur Verfügung.
Konvertierung und Prüfroutinen
Javascript-Lexikon mit Wikipedia
In der Variablen attr definieren Sie dann etwaige an die Web-Adresse anzufügende Parameter oder Unterverzeichnisse und die übergebene Textsequenz. Mit der Funktion escape() sollten Sie noch im Text vorhandene Umlaute in entsprechende Ascii-Zahlenwerte konvertieren. Mit den anschließenden Parametern für das Popup können Sie dessen Größe, Aussehen und Position frei bestimmen. Wenn Sie wie oben die Parameter in nur einer Variablen zusammenfassen, behalten Sie den Überblick über die Eigenschaften des Fensters.
Dann prüfen Sie mit einer vorangestellten if-Abfrage, ob per Doppelklick überhaupt Text selektiert wurde. Ist das der Fall, dann wird das Popup mit der Methode window.open() geöffnet. Der Methode können Sie ganz einfach die vorher definierten Variablen übergeben. Mit der Methode focus() stellen Sie sicher, dass das neu geöffnete Fenster im Vordergrund erscheint.
Ausgabe
Javascript-Lexikon mit Wikipedia
Im HTML-Bereich des Dokuments brauchen Sie jetzt nur noch den zu selektierenden Text zwischen zwei div-Tags platzieren:
Alle im div-Bereich enthaltenen Wörter können dann im Browser durch Doppelklick an der angegebenen Adresse abgefragt werden. Sie können natürlich die Wörter, bei denen das Nachschlagen sinnvoll ist, besonders kennzeichnen oder farbig hervorheben.
Es sollte auch keine Schwierigkeiten bereiten, unterschiedliche Textbereiche innerhalb derselben Seite bei mehreren verschiedenen Online-Diensten abzufragen.
Alle Dateien zum Workshop finden Sie auf der Heft-CD und unterlistings.internet-pro.de.