Beispiele: Mit dem Browser arbeiten in JavaScript

Einige Browser bieten in Sachen JavaScript einige Raffinessen an. Welche das sind, zeigen wir Ihnen hier.

Die verschiedenen Meldungsfenster

Java Script bietet die Möglichkeit Nachrichten auf den unterschiedlichsten Wegen zum Benutzer zu bringen - eine Möglichkeit sind die verschiedenen Meldungsfenster. Diese Fenster poppen beim Benutzer auf und enthalten Informationen. Der Benutzer kann die Seite erst dann weiter verwenden, wenn er das Fenster geschlossen hat. JavaScript gibt dem Entwickler dazu drei verschiedene Fenstertypen in die Hand:

Alert-Fenster

Ein Alert- oder Hinweisfenster ist ein einfaches kleines Fenster mit einem Text und einem OK-Button. Das Fenster wird durch die Methode alert des window-Objekts hervorgerufen. Die Methode erwartet einen String als Parameter, der den anzuzeigenden Text angibt. Ein Beispiel:

window.alert('Willkommen auf meiner Seite!');

Erzeugt folgendes Fenster:

Darstellung: Ein Alert-Fenster

Eingabe-Fenster

Eingabe-Fenster sind kleine Fenster, in die der Besucher einen Text eingeben kann. Ein solches Fenster wird durch die window.prompt-Methode erzeugt. Sie erwartet als ersten Parameter den anzuzeigenden Text. Als zweiter Parameter kann optional ein Vorgabetext angegeben werden. Dies wird als Vorlage in das Textfeld eingetragen. Außerdem gibt die Methode den Text zurück, der vom Benutzer eingegeben wurde. Beispiel:

a = window.prompt('Bitte geben Sie Ihren Namen ein!','Klaus');

Erzeugt folgendes Fenster:

Darstellung: Ein Eingabe-Fenster

Bestätigungs-Fenster

Wie der Name schon sagt, holt das Bestätigungs-Fenster eine Bestätigung ein. Es wird durch die window.confirm-Methode erzeugt und erwartet einen anzuzeigenden Text. Der Benutzer bekommt dann die Auswahl, ob er den Text bestätigen möchte (OK-Button) oder ob er diesen ablehnt (Abbrechen-Button). Die Methode gibt entsprechend true für eine Bestätigung und ansonsten false aus. Beispiel:

a = window.prompt('Bitte geben Sie Ihren Namen ein!','Klaus');
if(window.confirm('Sind sie wirklich der/die '+a+'?') == false)
{a = window.prompt('Bitte geben Sie Ihren Namen ein!','Klaus');}

Erzeugt folgendes Fenster:

Darstellung: Ein Bestätigungs-Fenster

Einen Dialog mit confirm anzeigen

Ein Zufallslink

Eine ganz nette Spielerei sind Zufallslinks. Wenn der User auf einen Link klickt, wird jedes Mal eine andere Seite angezeigt - eben eine per Zufall ausgewählte. Mit JavaScript läßt sich dies relativ einfach realisieren: Alles was wir brauchen ist ein Link, der mit einer JavaScript -Funktion verknüpft wird, ein Array von möglichen Zieladressen und eine Zufallsauswahl. Als HTML-Grundlage sollte der folgende Link ausreichend sein:

<a href="#" onclick="Zufallslink(); return false;">
Lassen Sie sich überraschen!
</a>

Im head-Bereich der Seite wird nun noch der restliche JavaScript -Teil notiert. Wir benötigen:

//Ein Array der Zieladressen:

var links = new Array(8);
links[0] = 'http://www.jan-winkler.de';
links[1] = 'https://www.a-coding-project.de';
links[2] = 'http://www.js-world.de';
links[3] = 'http://www.franzis.de';
links[4] = 'http://www.w3.org';
links[5] = 'http://www.microsoft.com';
links[6] = 'http://www.netscape.com';
links[7] = 'http://www.opera.com';

//Eine Funktion Zufallslink die die Auswahl trifft:

function Zufallslink()
{
i = Math.round(Math.random()*links.length)-1;
if(i == -1){i = 0}
location.href = links[i];
}

Da wir ein Array der Links verwenden und daraus zufällig einen Eintrag auswählen müssen, brauchen wir eine Zufallszahl. Sämtliche Zufallsprinzipien basieren irgendwo in einer zufälligen Zahl. Die Methode Math.random liefert uns diese - allerdings im Bereich von 0.0 bis 1.0. Da wir ein Array links haben, multiplizieren wir die Zufallszahl mit links.length und bilden aus der Kommazahl eine ganze Zahl mit Hilfe der Math.round-Methode. Letztlich wird 1 abgezogen, da der erste Index ja nicht 1 sondern 0 ist. Die Bedingung wurde deshalb eingebaut, da zwar ziemlich selten, aber doch manchmal die erzeuge Zufallszahl 0-1 sein kann. Die random-Methode erzeugt nach Wahrscheinlichkeit mehr Zahlen die ungleich 0 sind, sofern aber doch mal eine 0 ist, haben wir ein Problem wenn wir noch 1 abziehen, da das Array keinen Eintrag mit dem Index -1 hat. Sollte doch mal -1 herauskommen, setzten wir das einfach gleich 0.
In der letzten Zeile wird dann einfach die aktuelle Adresse geändert indem der location.href-Eigenschaft (anzuzeigende/angezeigte URL) ein Eintrag des Arrays übergeben wird.

Tip: Sehr wichtig bei diesem Beispiel ist, dass bei dem Link im Event-Handler als letztes ein return false steht (bricht das Ereignis ab). Würde dies dort nicht stehen würde der Besucher immer auf die im href-Attribut angegebene Adresse weitergeleitet werden (im Beispiel ist das #).

In der History blättern

Die History (oder auch Verlauf genannt) ist der Ort, wo der Browser die bereits besuchten Adressen speichert. Öffnet beispielsweise der Besucher sein Browserfenster und tippt eine Adresse ein, so hat er einen Eintrag in seiner History. Klickt er anschließend auf einen Link, so hat er einen weiteren Eintrag in der History und so weiter. JavaScript ermöglicht es nun, in der History zu springen. Sie können den Besucher auf eine zuvor besuchte Seite zurück schicken oder ihn auf die nächste Seite weiterleiten wenn er den Zurück-Button seines Browser gedrückt hat.
Nehmen wir an der Besucher befindet sich auf der Seite eines Buchverlags. Er schaut sich die Übersicht über ein Buch an und klickt dann auf einen Link, der ihn zum Inhaltsverzeichnis des Buches führt. Hat er es gelesen, möchte er natürlich wieder zurück zur Übersicht um zu sehen was es zu diesem Buch evtl. noch gibt (Probekapitel, Autoreninfos, Bestellung, ...). Um ihm die Arbeit zu erleichtern könnten Sie auf dieser Seite z.B. den folgenden Link anbieten:

<a href="javascript:history.back()">Zurück</a>

Mit Hilfe der history.back-Methode dirigiert der Browser den Besucher dann automatisch auf die zuvor besuchte Seite zurück. Aber auch der Gegenteil kann der Fall sein: Soll der Besucher beispielsweise nicht den Zurück-Button seines Browsers benutzen können, können Sie folgendes kleines Skript in Ihre Seite einbauen:

Hat der Besucher den Zurück-Button benutzt um auf diese Seite zu gelangen, so existiert in der History mindestens ein Eintrag nach dem aktuellen Eintrag. Die Methode history.go weist den Browser an so viele Seiten weiter zu springen wie die übergebene Zahl groß ist (hier also auf die nächste Seite). Würde der Besucher nicht über den Zurück-Button auf diese Seite kommen, gäbe es auch keinen Folgeeintrag in der History und die Methode bewirkt nichts.

Den markierten Text herausfinden (IE/NN)

Wenn man an "Mit dem Browser arbeiten" denkt, denkt man nicht gleich als erstes an Markierungen auf einer Webseite. Für einige Dinge kann es jedoch recht hilfreich sein, zu wissen, was der Benutzer markiert hat. Der Internet Explorer (ab Version 4.0) und der Netscape Navigator (ebenfalls ab Version 4.0) bieten dazu zwei unterschiedliche Möglichkeiten um das herauszufinden.
Microsoft hat für dieses Problem ein eigenes Objekt geschaffen: document.selection. Dieses enthält alle Eigenschaften der aktuellen Markierung. Um den gerade ausgewählten Text heraus zu bekommen erstellt man ein TextRange-Objekt der Markierung und fragt von diesem die text-Eigenschaft ab. Sie gibt dann den Inhalt der Markierung aus. Alternativ ist es auch möglich direkt den verwendeten HTML-Code über die htmlText-Eigenschaft heraus zu bekommen. Beispiel:

a = document.selection.createRange();
b = a.text;
c = a.htmlText;

Der Netscape Navigator bietet zur Lösung des Problems eine eigene Methode des document-Objekts, die getSelection-Methode, an. Sie ermittelt den aktuell markierten Text.

a = document.getSelection();

Soll der markiere Text jedoch nicht nur gelesen sondern auch verändert werden, geht es bei Netscape schon nicht mehr weiter. Mit dem Internet Explorer ist das Ersetzen ziemlich einfach: der selection.text-Eigenschaft wird einfach ein neuer Wert zugewiesen. Beispiel:

document.selection.createRange().text = 'neuer Text';

Tip: Da die Browser jeweils nicht diese Methoden des anderen Browsers unterstützen, sollte an eine Browser-Erkennung gedacht werden. Außerdem ist zu bedenken, dass z.B. bei Klick auf einen Link, dieser die Markierung erhalten kann (die Maus brauch nur ein Stückchen verrutschen ...), deshalb empfiehlt sich die Abfrage der Markierung z.B. nur bei onMouseOver- oder derartigen Events.

Die Zwischenablage lesen und schreiben (IE)

Um Ihren Besuchern unter die Arme zu greifen kann es unter Umständen nützlich sein, Text von der Seite in die Zwischenablage oder aus der Zwischenablage in die Seite zu kopieren. Microsofts Internet Explorer bietet dazu die Möglichkeiten.
Microsoft stellt für die Zwischenablage (Clipboard) ein eigenes Objekt zur Verfügung: window.clipboardData. Dieses besitzt die Methode setData mit dem Daten in die Zwischenablage geschrieben werden können und die Methode getData um die Daten wieder zu lesen. Um Text einzufügen muss als erster Parameter der String 'Text' sowie als zweiter der zu speichernde Text übergeben werden. Beispiel:

function schreibe()
{
sel = document.selection.createRange();
window.clipboardData.setData("Text",sel.text);
}

Im Beispiel wird so der aktuell markierte Text in die Zwischenablage kopiert. Um den gespeicherten Text aus der Zwischenablage wieder auszulesen nutzt man die getData-Methode. Auch hierbei muss wieder als Parameter der String 'Text' übergeben werden. Die Methode gibt dann den jeweiligen in der Zwischenablage gespeicherten Text aus. Beispiel:

function lese()
{
a = window.clipboardData.getData('Text');
alert(a);
}

Tip: Je nach Browserversion des Internet Explorers und Einstellungen kann es vorkommen, dass das Auslesen und/oder Speichern nicht funktioniert. Dies kommt allerdings eher weniger vor.

Eine Seite beim Benutzer speichern (IE)

Viele kennen Sie: Die kleinen Links, meist unten auf einer Seite, auf denen steht "Seite zu den Favoriten hinzufügen" oder "Seite als Startseite festlegen". Im Grunde ist das so simpel wie ein Alert-Fenster! Zum Speichern einer Seite in den Favoriten wird das external-Objekt sowie dessen Methode AddFavorite verwendet. Als Parameter wird die gewünschteURLübergeben sowie (optional) ein Titel für den Favoriteneintrag. Beispiel:

<a href="
javascript:
window.external.AddFavorite('https://www.a-coding-project.de')">
Seite in die Favoriten aufnehmen
</a>

Eine Seite als Startseite festzulegen ist fast genauso einfach: Hierzu muss man den Browser jedoch etwas austricksen. Als erstes wird ein Element, z.B. ein Link, mit dem Verhalten url(#default#homepage) definiert. Dann kann über dieses Element die Methode setHomePage aufgerufen werden. Als Parameter dieser Methode wird einfach eine beliebigeURLübergeben und fertig. Ein Beispiel:

<a id="abcdef" style="behavior:url(#default#homepage);"
   href="
    javascript:
    document.all.abcdef.setHomePage('http://www.a-coding-project.de')">
Seite als Startseite festlegen
</a>

Tastatur-Eingaben verarbeiten

Einen großen Unterschied macht es, ob eine Applikation nur "so mal" per Maus benutzt werden kann oder auch per Tastatur. Ein ernsthafter Programmierer wird immer versuchen, seinen Benutzern so viel Komfort zu bieten wie möglich. Und gerade mit der Tastatur kann man die erstaunlichsten Eingabemöglichkeiten schaffen!
In Hinblick auf Tastatur-Eingabe sollten wir drei verschiedene Events unterscheiden:
- onkeypress erfolgt immer dann, wenn der Benutzer eine Taste ("key") niederdrückt.
- onkeyup kommt immer dann wenn der Benutzer eine Taste loslässt.
- onkeypress wird vom Windows-System regelmäßig erzeugt, wenn eine Taste gedrückt ist - auch dann, wenn sie nur einmal gedrückt und dann längere Zeit festgehalten wird.
Die Funktion, in der entschieden wird was aufgrund eines Tastendrucks gemacht werden soll, könnte so aussehen:

function Key()
{
  if(debug)
    alert('Key():nkeycode = '+event.keyCode+
          'nfromCharCode() = '+
    String.fromCharCode(event.keyCode));

switch(String.fromCharCode(event.keyCode))
{
case 'A': case 'B':
Ab(...);
break;

case 'C': C(...);
break;

case 't': // F5
F5(...);
return false;

// default: ...
}
return true;
}

In dieser Funktion werden zunächst einmal, im Debug-Fall, der jeweilige keyCode und das entsprechende druckbare Zeichen (falls es ein solches gibt) angezeigt. Bei den einfachen Druckzeichen auf der Tastatur werden Sie das zwar nicht brauchen; doch wie lautet der keyCode bzw. das entsprechende Druckzeichen, wenn der Benutzer z.B. den Softkey F5 drückt? Für solche Fragen werden Sie froh sein, wenn Sie rasch mal auf debug umschalten können.
Um vom auf das entsprechende Druckzeichen zu event.keyCode kommen, ist die Methode String.fromCharCode() sehr günstig. Auf diese Weise brauchen Sie im switch nicht mit abstrakten keyCodes zu arbeiten, sondern können gleich das entsprechende Druckzeichen verwenden.
Die einzelnen cases des switch folgen dann untereinander. Verlangen mehrere Tastatur-Eingaben dieselbe Behandlung, können Sie die entsprechenden cases auch nebeneinander schreiben, statt den Code jedes Mal zu wiederholen (wie hier z.B. case 'A': case 'B': )
Diese Funktion im Beispiel dient nur zur *Aufteilung* der Tastatur-Eingaben. Die eigentlichen Verarbeitungen finden in all den Funktionen statt, die in den einzelnen cases aufgerufen werden (hier z.B. Ab(), C() und F5())
Es gibt jedoch auch Tasten, die für Windows eine besondere Bedeutung haben (in diesem Beispiel etwa F5). Diese Tasten wird man in einer Applikation nach Möglichkeit vermeiden, doch ganz unvermeidlich sind sie nun einmal nicht. In diesem Fall sollte man den case nicht mit break; beenden sondern mit return false; Dem Windows-System wird damit mitgeteilt, dass es sich um diese Taste nicht mehr kümmern soll. Ansonsten könnte Ihr Bildschirm-Layout völlig entstellt werden.
Um diese Funktion wirksam zu machen, muss sie erst einmal "initialisiert" werden. Dazu gibt es zwei Möglichkeiten:

1. Konventionelle Initialisierung:

Die Funktion (und meist noch viele andere) wird mit einem .js-File ins Dokument inkludiert, üblicherweise gleich am Anfang des Dokuments:

...
<TITLE>...</TITLE>
<SCRIPT src="KEY.js"></SCRIPT>
...
</HEAD>

Der <BODY>-Tag wird mit einem speziellen Attribut versehen:

Das bezieht sich auf eine zusätzliche Funktion in KEY.js, die so aussehen könnte:

function InitKey()
{
  with(document.body)
  {
    onkeydown  = Function("return Key()");
    ...
  }
}

Mit dieser Funktion InitKey() wird dem System deklariert, dass es die Funktion Key() aufrufen soll, wenn ein Event onkeydown eintritt, und dass dessen Rückgabewert berücksichtigt werden soll.

2. In-line Initialisierung

Hier wird alles im .js-File gemacht, der Anwender muss davon also gar nichts merken. Allerdings muss dieses.js-File nun am Ende des Dokuments inkludiert werden:

Eine Funktion InitKey() ist nun nicht mehr nötig, statt dessen wird die Funktion Key() in-line deklariert. Am Ende des .js-Files steht der folgende Code:

with(document.body)
{
onkeydown = Function("return Key()");
...
}

Sie werden bemerken, dass dieser Code genau übereinstimmt mit dem Inhalt der früheren Funktion InitKey(). In der Tat ist ja auch genau das gleiche beabsichtigt - ohne dass der Benutzer überhaupt etwas davon merkt!

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Beispiele: Mit dem Browser arbeiten in JavaScript

Über uns

Cookie-Einstellungen