Und das geht so: CHIP demonstriert hier am Beispiel eines kleinen Online-Lexikons den richtigen Umgang mit Rahmen. Das Fenster zeigt im linken Teil einen Rahmen, der vier Begriffe enthält. Sie sind als Hyperlinks definiert. Klickt man sie an, zeigt der rechte Rahmen die dazugehörige Erklärung an.

Im Menürahmen mit den Begriffen tauchen noch zwei Navigationsschaltflächen auf. Mit ihrer Hilfe blättert man vom aktuellen Begriff zum nächsten oder zurück zum vorhergehenden. Das Definieren der Rahmen und das Anzeigen der dazugehörigen Begriffe ist mit HMTL-Befehlen problemlos zu bewerkstelligen. JavaScript kommt erst bei den beiden Navigationsbuttons ins Spiel. So ganz nebenbei lernen Sie hier auch Variablenfelder (Arrays) sowie das Location-Objekt kennen. Doch dazu später mehr.

[Zur Übersicht]

Die Eigenschaften und Attribute, mit denen man Rahmen unter HTML definiert, entsprechen denen in JavaScript. Um die Rahmen für das Online-Lexikon herzustellen, verwenden Sie HTML. Das Listing der Datei index.html lautet:

</html> <frameset cols=”20%,*” border=2> <frame src=”Menue.html” name=”Begriffe”> <frame src=”Titel.html” name=”Erklaerung”> </frameset>

Zwei Rahmen werden definiert: Der erste trägt den Namen "Begriffe”, definiert mit Hilfe des Attributs »name=”Begriffe”«, und zeigt die Datei Menue.html an. Der zweite Rahmen nennt sich "Erklaerung” und ist für die Datei Titel.html zuständig. Die wiederum begrüßt den ankommenden Online-Surfer und erklärt ihm die Bedienung der Menüleiste mit den Begriffen.

Es ist in diesem Beispiel eine einfache HTML-Datei mit etwas Text. Die Dicke des Trennbalkens zwischen den beiden Rahmen setzt man mit

border=2

auf eine Stärke von zwei Pixel.

Die Datei Menue.html ist die wichtigste: Sie zeigt eine Übersicht der im Lexikon vorhandenen Begriffe. Diese sind als Hyperlinks definiert. Darüber sehen Sie im Bild auf dieser Seite die beiden Buttons zum Vorwärts- und Rückwärtsblättern. Sie sind mit Hilfe eines Formulars eingerichtet.

Der erste Hyperlink, der auf den Begriff Audubon verweist, wird wie folgt definiert:

<a href=”Audubon.html” target=”Erklaerung” onClick=”setzeSeite(0)”> Audubon</a><br>

Die Datei, die nach dem Klick auf den Link gezeigt werden soll, heißt Audubon.html. Sie erscheint in dem Rahmen, der momentan noch die Begrüßung präsentiert. Hier kommt der Name "Erklaerung” des Rahmens ins Spiel. Gibt man ihn mit Hilfe des target-Attributs an, wird die Anzeige zum betreffenden Rahmen umgeleitet.

Das dritte Attribut

onClick=”setzeSeite(0)”

[Zur Übersicht]

 
Buttons zum Blättern: Ein Fall für JavaScript

Die beiden Schaltflächen zum Vorwärts- und Rückwärtsblättern richtet man als Formular ein:

<form> <input type=button name=”back” value=” < ” onClick=”goBack()”> <input type=button name=”forward” value=” > ” onClick=”goForward()”> </form>

Die Schaltflächen tragen die Namen "back” und "forward”. Das Attribut value definiert, was auf ihrer Oberfläche steht. Die Breite stellt man durch entsprechend viele Leerzeichen im value-Attribut ein. Und jetzt kommt JavaScript ins Spiel. Die Buttons sind mit Funktionen verknüpft, die auf Mausklick reagieren. Der Button zum Vorwärtsblättern aktiviert die Methode goForward(), der Button zum Zurückblättern aktiviert goBack(). Obwohl dabei keine Parameter übergeben werden, müssen die beiden Methoden trotzdem mit Klammern definiert und diese auch beim Aufruf gesetzt werden - eine Eigenheit von JavaScript.

Und nun zeigen sich auch die Vorteile der Skriptsprache im Gegensatz zu HTML: Denn mit JavaScript kann man fremde Rahmen ansteuern. Dazu enthält die Methode goForward() folgende Befehle:

function goForward() { if (Seite < 3) { Seite = Seite + 1; parent.Erklaerung.location.href= text[Seite]; } }

JavaScript behandelt einen Rahmen als Objekt, der in einer bestimmten Hierarchie steht. Dabei wird die Datei, die Rahmen erzeugt, als Eltern- oder "parent”-Rahmen bezeichnet. Im vorliegenden Fall ist dies die Datei Index.html mit dem <frameset>-Tag. Die von ihr erzeugten Rahmen "Begriffe” und "Erklaerung” sind - richtig! - die Kinder, die "child”-Rahmen. Eltern- und Kind-Rahmen stehen in direkter Beziehung und können über JavaScript miteinander Informationen austauschen.

Die Buttons der Datei Menue.html gehören also zu einem Kind-Rahmen. Sie können Informationen an den Eltern-Rahmen schicken. Das ist aber im vorliegenden Beispiel nicht das Ziel. Der eine Kind-Rahmen "Begriffe” soll vielmehr den zweiten Kind-Rahmen "Erklaerung” beeinflussen und dort eine neue HTML-Datei laden, die die Erklärung zum jeweiligen Begriff anzeigt. Doch zwischen zwei Kind-Rahmen besteht keine direkte Verbindung. Also was tun?

Dank der verräterischen Wortwahl "keine direkte Verbindung” vermuten Sie richtig daß es doch einen Weg, nämlich einen indirekten, geben muß. Sie haben recht: Da der Eltern-Rahmen mit beiden Kind-Rahmen in Verbindung steht, kann die Kommunikation über den Eltern-Rahmen laufen. Das ist auch der Grund, warum die Rahmen bei ihrer Definition im Eltern-Rahmen mit Hilfe des name-Attributs einen Namen bekommen haben. Mit diesen Namen kann man nun die Rahmen ansprechen.

Die Benennung des Rahmens erfolgt in der üblichen Punktnotation, die die Hierarchie der beteiligten JavaScript-Objekte widerspiegelt. Dazu gehen Sie den Weg zurück zum Eltern-Rahmen, der einfach mit "parent” oder "top” angesprochen werden kann, und von dort - durch einen Punkt getrennt - weiter zum anderen Kind-Rahmen:

parent.Erklaerung.

Nach dieser Objektbeschreibung kommt im Aufruf erneut ein Punkt, gefolgt von "location”. Location bezeichnet einen neuen Objekttyp. Jedes Browser-Fenster oder jeder Rahmen enthält das location-Objekt. Über eine Reihe von Eigenschaften bietet es Zugriff auf die gerade im Fenster oder Rahmen geladene Seite. Die wichtigste Eigenschaft ist "href”. Sie gibt einen String an, der den URL der geladenen HTML-Datei enthält. Weitere Eigenschaften wie etwa "hostname” oder "protocol” enthalten einzelne Teile dieses Strings. Die href-Eigenschaft kann nicht nur ausgelesen werden, Sie können ihr auch einen Wert, also einen beliebigen URL, zuweisen. Dann wird im betreffenden Fenster oder Rahmen die HTML-Datei geladen, die der zugewiesene String bezeichnet. Die vollständige Programmzeile, um auf den zweiten Rahmen zuzugreifen, heißt dann:

parent.Erklaerung .location.href= text[Seite]

Sie weist dem Rahmen "Erklaerung” die Datei zu, die in der Variablen text[Seite] enthalten ist.

Und schon werden Sie mit einem neuen Leistungsmerkmal von JavaScript vertraut gemacht: den Variablenfeldern (Arrays). Lesen Sie dazu auch den Kasten "Feldarbeit mit JavaScript”, nächste Seite. Im Listing der Datei Menue.html wird im Header ein Array der Variablen text angelegt und werden vier Elemente mit Strings belegt. Diese Strings speichern die Namen der HTML-Dateien, die die lexikalischen Erklärungen enthalten.

text() = new Array; text[1] = ”Audubon.html”; text[2] = ”AudubonSoc.html”; text[3] = ”Laozi.html”; text[4] = ”SoftVertrag.html”; Seite = 0;

In der letzten Zeile des Abschnitts taucht die Integervariable "Seite” auf. Seite speichert den Index der gerade im Rahmen Erklaerung geladenen Datei, wie er zuvor im Array der Variablen text() festgelegt wurde. Dieser Index wird in der Methode goForward() zuerst hochgezählt. Programmtechnisch läuft auf diese Weise das Vorwärtsblättern ab. In der Methode goBack() wird Seite entsprechend um 1 heruntergezählt. Danach erst erfolgt das Laden der Datei im Rahmen.

Das Verwenden der Variablen Seite bedingt, daß sie vor dem ersten Aufruf auf den Wert 0 gesetzt wird. Lädt der Anwender nämlich die Web-Seite und klickt als erstes auf den Vorwärts-Button, so muß nach dem Titel der erste Begriff erscheinen. Der Dateiname des ersten Begriffs liegt aber im Array-Element text[1]. Ergo muß in diesem Fall das Hochzählen eine Null ergeben. Sie können die Array-Indices übrigens beliebig wählen, beispielsweise von 5 bis 8 oder von -110 bis -107. Sie müssen nur den Anfangswert der Variablen Seite entsprechend anpassen. JavaScript ist da sehr flexibel.

Was tun, wenn Seite den Wert 0 hat und der Anwender den Button zum Rückwärtsblättern anklickt? Seite nimmt dann den Wert -1 an. Eine Variable text[-1] gibt es aber nicht. Das gleiche Problem tritt auf, wenn Seite den Wert 4 erreicht hat und der Anwender auf den Vorwärts-Button klickt. Der Browser meldet sich dann mit einer unschönen Fehlermeldung.

Eine if-Konstruktion löst dieses Problem. In der Methode goBack() wird das Herunterzählen von Seite und das folgende Anzeigen der von text[Seite] definierten HTML-Datei nur ausgeführt, wenn Seite größer als 1 ist. Entsprechend wird die Variable in der Methode goForward() nur dann um 1 erhöht, wenn Seite noch nicht den Wert 4 erreicht hat. Die if-Bedingungen sorgen also dafür, daß bei einem Klick, der nicht vorhandene text[]-Variablen erfordern würde, nichts passiert.

[Zur Übersicht]

 
Die Methode setzeSeite()

Der Anwender kann mittels Navigationsschaltflächen durch die einzelnen Begriffe blättern, aber er kann die Begriffe auch über die Hyperlinks direkt anspringen. Tut er dies, muß in diesem Fall auch die Variable Seite auf den aktuellen Stand gebracht werden, damit der Nutzer auch nach einem solchen Sprung wieder vorwärts- oder rückwärtsblättern kann. Dazu dient die dritte Methode setzeSeite().

Man baut sie bei der Definition der einzelnen Hyperlinks mit Hilfe des Attributs onClick ein. Gleichzeitig wird ihr als Parameter in der Klammer die Zahl übergeben, die auf den Index im text-Array verweist, der die dazugehörige HTML-Datei benennt. Innerhalb der Funktion setzeSeite() wird der Variablen Seite dann der übergebene Wert (Nr) zugewiesen. Mehr ist nicht nötig, um Seite auf dem aktuellen Stand zu halten.

Die letzte Seite meldet: "Hier geht's nicht weiter”

Statt das Vorwärts- oder Rückwärtsblättern beim Erreichen der ersten oder letzten Lexikonseite zu beenden, könnten Sie das Listing einfach ändern, so daß beim Vorwärtsblättern nach der letzten Lexikonseite wieder die erste erscheint und umgekehrt. Alternativ kann man eine Warnmeldung mit einem Hinweis ähnlich wie "Das war die letzte Seite. Hier geht's nicht mehr weiter.” einbauen. Sie sind jetzt sicherlich in der Lage, die entsprechenden Änderungen selbst anzubringen.

Dieses kleine Lexikon-Beispiel demonstriert nur die Grundlagen dessen, was mit Rahmen unter JavaScript möglich ist. Auch verschachtelte Rahmen lassen sich in der hier gezeigten Weise mit der Skriptsprache steuern. Sie müssen sich nur jeweils über die Hierarchie der Rahmen im klaren sein und sie mit den richtigen Referenzen ausstatten.

 
Joachim Pich

[Zur Übersicht]

Vielleicht kennen Sie es von anderen Programmiersprachen: Arrays bezeichnen eine Sammlung von Variablen gleichen Namens. Damit man gezielt auf die einzelnen Elemente des Variablenfeldes zugreifen kann, sind sie jeweils durch einen Index gekennzeichnet.

JavaScript versteht Arrays als Objekte. Konsequenterweise werden sie durch den Befehl "new” erzeugt, gefolgt vom Objekttyp. Im Lexikon-Beispiel dieses Workshops wird das Array der Variablen text mit der Anweisung

text = new Array();

hergestellt. Dabei muß man nicht unbedingt - wie bei verschiedenen anderen Programmiersprachen - die Anzahl der gewünschten Elemente angeben. JavaScript fügt selbständig ein neues Element zum Variablenfeld hinzu, wenn es gebraucht wird. Nach dem Erzeugen des Arrays wird den einzelnen Elementen gleich ein Wert zugewiesen. Dieses Zuweisen erfolgt über den Index, der in eckige Klammern gesetzt wird. Der Befehl

text[0] = "Audubon.html”;

weist dem ersten Element des Feldes mit dem Index 0 den String Audubon.html zu.

Im vorliegenden Fall nimmt jedes Feldelement einen String auf. Die Elemente eines Arrays können unter JavaScript allerdings auch verschiedene Datentypen enthalten.

Es spricht auch nichts dagegen, im nächsten Element text[1] eine Integerzahl zu speichern.

[Zur Übersicht]

 
So bauen Sie Rahmen mit HTML-Befehlen

Mit Rahmen (Frames) kann man das Fenster eines Web-Browsers unterteilen und in jedem Teil eine eigenständige HMTL-Datei anzeigen. Um eine Web-Seite mit zwei Rahmen wie in diesem Kursteil zu erzeugen, sind drei HMTL-Dateien nötig. Die erste Datei, hier Index.html, definiert die Aufteilung des Fensters, wird selbst aber nicht angezeigt. Sie ist die Datei, die in der betreffenden URL angegeben sein muß, um die Web-Seite aufzurufen. Die zwei anderen Dateien stellen die Inhalte der beiden Rahmen dar. Die Datei Index.html sieht so aus:

<html> <frameset cols=”12%,88%”> <frame src=”Menue.html”> <frame src=”Titel.html”> </frameset> </html>

Index.html wird ganz normal mit dem <html>-Tag als HTML-Seite definiert. Jedoch sind die Tags <head> und <body> nicht notwendig. Wichtig ist <frameset>: Es eröffnet die Definition der Rahmen; </frameset> beendet die Definition.

Maßarbeit

Der <frameset>-Tag legt auch gleich fest, welchen Raum die einzelnen Rahmen einnehmen. Dazu gibt es

die beiden Eigenschaften "cols” und "rows”. Der Befehl

<frameset cols=”12%,88%”>

besagt, daß die Fenster senkrechte Spalten bilden sollen (col steht für "columns”, deutsch "Spalten”) und der erste, linke Rahmen zwölf Prozent des Fensters einnehmen soll. Der zweite Wert "88%” definiert die Breite des zweiten Rahmens. Will man das Fenster dagegen horizontal in zwei Rahmen teilen, muß der <frameset>-Tag lauten:

<frameset rows=”12%,88%”>

Dabei ist "rows” der englische Ausdruck für "Zeilen”. Neben der relativen Angabe der Rahmengröße in Prozent ist auch die absolute Angabe in Pixel möglich.

Den zweiten Rahmens läßt man vom Browser berechnen. Dazu gibt man nur die Breite für den ersten Rahmen an und gibt den zweiten Wert als "*” an. Soll der linke Rahmen 100 Pixel breit sein und wird der rechte Rahmen automatisch berechnet, geben Sie an:

<frameset rows=”100,*”>

Diese Option funktioniert auch mit Prozentangaben:

<frameset rows=”12%,*”>

Die gleiche Einteilung erreichen Sie mit:

<frameset rows=”*,88%”>

Inhalt muß sein

Nun müssen Sie noch die HMTL-Dateien angeben, die die Rahmen füllen sollen. Sie werden nacheinander mit dem <frame>-Tag definiert:

<frame src=”Menue.html”> <frame src=”Titel.html”>

Die Angabe weist die HTML-Datei Menue.html dem ersten, die Datei Titel.html dem zweiten Rahmen zu. Die Reihenfolge entspricht dabei der Reihenfolge der Größenangaben im <frameset>-Tag. Im vorliegenden Lexikon-Beispiel enthält Menue.html die Navigationsleiste, Titel.html zeigt ein Titelbild, wenn die Web-Seite aufgerufen wird.