Der HTML-Bereich
Im HTML-Bereich werden jeweils Titel des Berichts, Vorspann und Textblock aneinandergereiht. Nach dem Vorspann wird ein Hyperlink auf das Wort mehr gesetzt und mit dem Event onClick wird die function text_ein(i) ausgelöst.
<h2>Thema 1</h2>
<p>Vorspann 1<br />
<a href=”#” onClick=”text_ein(1);”> mehr </a>
</p>
<span id=”detail1″>
<p>Das ist der erste Text, der Details zum ersten Thema angibt.</p>
</span>

<h2>Thema 2</h2>
<p>Vorspann 2<br />
<a href=”#” onClick=”text_ein(2);”> mehr </a>
</p>
<span id=”detail2″>
<p>Das ist der zweite Text, der Details … angibt.</p>
</span>
Damit die Detail-Textblöcke anfangs ausgeblendet sind, wird im Stylesheet die Eigenschaft der Identiteisw auf display:none gesetzt:
#detail1, #detail2, #detail3 { display:none; }
Mit Hilfe der Identies zeigt die function text_ein(i) den entsprechenden Detail-Textblock:
<script language=”javascript”>
function text_ein(i) {
document.getElementById(”detail”+i).style.display = “block”;
}
</script>
Dieser Code muss noch verfeinert werden:

• Der Link mehr soll verschwinden, wenn der Detailbereich angezigt wird.
• Ein Link Detail verstecken soll angezeigt werden und die function text_aus(i) aufrufen.

Dazu wird auf den Link mehr eine Identity gesetzt und am Ende des Detail-Bereichs wird jeweils ein Link Detail verstecken eingefügt. Der HTML-Bereich sieht dann folgendermaßen aus:
<h2>Thema 1</h2>
<p>Vorspann 1<br />
<span id=”zeigen1″>
<a href=”#” onClick=”text_ein(1);”> mehr </a>
</span>
</p>
<span id=”detail1″>
<p>Das ist der erste Text, der Details zum ersten Thema angibt.
<br />
<a href=”#” onClick=”text_aus(1);”> Detail verstecken </a>
</p>
</span>

<h2>Thema 2</h2>
<p>Vorspann 2<br />
<span id=”zeigen2″>
<a href=”#” onClick=”text_ein(2);”> mehr </a>
</span>
</p>
<span id=”detail2″>
<p>Das ist der zweite Text, der Details … angibt.
<br />
<a href=”#” onClick=”text_aus(2);”> Detail verstecken </a>
</p>
</span>
Der Link auf Detail verstecken wird im Detail-Span gesetzt und erscheint und verschwindet dadurch mit dem Detailtext.

Der JavaScript-Bereich wird zweifach ergänzt:

• Die function text_ein(i) wird um das Ausblenden des Hyperlinks auf mehr ergänzt.
• Die function text_aus(i) wird analog zur function text_ein(i) gebildet.

<script language=”javascript”>
function text_ein(i) {
document.getElementById(”detail”+i).style.display = “block”;
document.getElementById(”zeigen”+i).style.display = “none”;
}

function text_aus(i) {
document.getElementById(”detail”+i).style.display = “none”;
document.getElementById(”zeigen”+i).style.display = “block”;
}
</script>
Hinweis: Hier wird jeder Text einzeln ausgeblendet, mehrere Details können gleichzeitig geöffnet sein. Soll nur ein einziger Text offen sein, müssen in einer for-Schleife in der function text_ein(i) zuerst alle Detailbereiche ausgeblendet werden:
<script language=”javascript”>
var n = 2 // Anzahl der Textblöcke
function text_ein(i) {
text_aus(i)
document.getElementById(”detail”+i).style.display = “block”;
document.getElementById(”zeigen”+i).style.display = “none”;
}

function text_aus(i) {
for (var j=1;j<=n;j++) {
document.getElementById(”detail”+j).style.display = “none”;
document.getElementById(”zeigen”+j).style.display = “block”;
}
}
</script>
Beim Zeigen eines Detailbereiches werden automatisch alle Detailbereiche vorher geschlossen. Genau genommen würde auch die Variable i in der function text_aus() nicht mehr benötigt.

Im HTML-Bereich werden die Untermenüpunkte jweils zwischen die Menüpunkte eingefügt und mit Hilfe von span mit eienr Identity (untermenue1, untermenue2, etc)versehen:
<div>
<a href=”#” onClick=”aufklappen(1)”>Menüpunkt 1</a>
</div>
<span id=”untermenue1″>
<div>Punkt 1.1</div>
<div>Punkt 1.2</div>
<div>Punkt 1.3</div>
</span>
<div>
<a href=”#” onClick=”aufklappen(2)”>Menüpunkt 2</a>
</div>
<span id=”untermenue2″>
<div>Punkt 2.1</div>
<div>Punkt 2.2</div>
</span>
Die Gestaltung der Menü-Ebenen geschieht über die div-Klassen ebene1 und ebene2. Die Eigenschaften hiefür werden im Stylesheet gesetzt.

Die Hyperlinks auf die erste Menü-Ebene lösen mit onClick die function aufklappen(i) auf, i ist der Index für den Menüpunkt und für die Identity des Untermenü-Bereichs: untermenue1, untermenue2, etc.

Im Script-Bereich wird die function aufklappen(i) definiert:
<script language=”javascript”>
function aufklappen(i) {
for (var j=1;j<=3;j++) {
document.getElementById(”untermenue”+j).style.display = “none”;
}
document.getElementById(”untermenue”+i).style.display = “block”;
}
</script>
In der for-Schleife werden zuerst alle Untermenüpunkte ausgeblendet, dann wird der ausgewählte Untermenü-Bereich eingeblendet. Achtung: Die Variable in der for-Schleife darf nicht i heißen, das sonst der in der Funktion übergebene Wert überschrieben wird.

Mit der Eigenschaft display wird ein Bereich eingeschoben. Wenn der Bereich nicht angezeigt wird, wird auch kein Platz für diesen Bereich verwendet. Anwendung findet diese Art des Einschiebens etwa ein Einfügen von Untermenüpunkten in einer vertikalen Menüführung (im linken oder rechten Seitenbereich) oder beim Einblenden von Detailtexten nach einem Vorspann, wenn die Seite nicht neu geladen werden soll.

Mit der Eigenschaft visibility wird ein Bereich sichtbar gemacht und über den darunter liegenden Text gelegt. Der folgende Bereich wird also nicht verschoben. Anwendung findet diese Art des Sichtbarmachens bei Pulldownmenüs (bei horizontaler oder vertikaler Menüführung) und bei Hinweistexten.

In den folgenden Artikeln wird jeweils eines dieser Konzepte anhand einer kleinen Anwendung genauer erklärt.

Der Quelltext für die drei kleinen Vorschaubilder und für das große Bild sieht dann folgendermaßen aus:

<body onLoad=”bilder()”>
<h2>open.day BHAK.BHAS Freistadt</h2>
<img name=”galerie1″ width=”128″ height=”96″ border=”1″>
<img name=”galerie2″ width=”124″ height=”92″ border=”3″>
<img name=”galerie3″ width=”128″ height=”96″ border=”1″>
<br />
<img name=”galerie” width=”400″ height=”300″ border=”1″>
<br />
<span id=”nr”></span>
</body>
Der Javascript-Quellcode mit den Variablen und den Funktionen sieht so aus:
<SCRIPT language=”JavaScript”>
<!–
var bild = new Array()
bild[1] = “CIMG2374.jpg”
…
bild[127] = “PICT1075.jpg”
bild[128] = “PICT1076.jpg”
// um den Kreis zu schließen sind ein zusätzliches Start- und Endbild nötig:
bild[0] = bild[128];
bild[129] = bild[1];
folder = “images/”;
var n = 128;
var i = 0;

function bilder() {
i++;
if (i>n) {i=1;}
if (i<1) {i=n;}
document.galerie1.src = folder+bild[i-1];
document.galerie2.src = folder+bild[i];
document.galerie3.src = folder+bild[i+1];
document.galerie.src = folder+bild[i];
document.getElementById(”nr”).innerHTML = “Bild ” + i + ” von ” + n;
setTimeout(”bilder()”,4000)
}
//–>
</SCRIPT>
Die Galerie startet automatisch und läuft im Kreis.

<a href=”#” onClick=”bildsetzen(1);”>erstes</a>
<a href=”#” onClick=”prev();”>zurück</a>
<a href=”#” onClick=”next();”>weiter</a>
<a href=”#” onClick=”bildsetzen(n);”>letztes</a>
Anstelle der Funktionen prev() und next() könnte ebenfalls die Funktion bildsetzen() verwendet werden, wenn die Bedingungen über die Größe von i in diese Funktion eingebunden wird:
<a href=”#” onClick=”bildsetzen(1);”>erstes</a>
<a href=”#” onClick=”bildsetzen(i-1);”>zurück</a>
<a href=”#” onClick=”bildsetzen(i+1);”>weiter</a>
<a href=”#” onClick=”bildsetzen(n);”>letztes</a>

-und
<script language=”JavaScript”>
// Achtung: j in der Funktionsklammer als Zwischenwert
function bildsetzen(j) {
-i = j; // übergebenen Wert der Variablen i zuweisen
-if (i>n) {i=1;}
-if (i<1) {i=n;}
-document.galerie.src = “images/”+bild[i];
-document.getElementById(”nr”).innerHTML = “Bild “+i+” von “+n;
}
</script>
Die Funktion ist jetzt zwar abstrakter und vielleicht etwas schwerer verständlich, aber dafür kompakter und eleganter programmiert.

Achtung: Die Codezeilen innerhalb der Funktion sollen der Übersichtlichkeit halber etwas eingerückt werden!

Bildergalerien werden mit Javascript realisiert. Ein einfaches Basis-Beispiel wird hier erläutert.

Der Bildplatzhalter
Als Bildplatzhalter wird ein <img>-Eintrag gesetzt, der mit einer Namenseigenschaft belegt wird:<img name=”galerie” src=”…” />
Der Eventhandler
Die Navigation zum Blättern durch die Galerie erhält einen Eventhandler, der angibt, bei welche Aktivität welche Javascript-Funktion ausgeführt werden soll:<a href=”#” onClick=”prev();”>zurück</a>
<a href=”#” onClick=”next();”>weiter</a>
Die Bildvariablen
In einem Script-Bereich werden die benötigten Variablen definiert. Das sind einerseits die Namen der verfügbaren Bilder, eine Indexvariable, die angibt, das wievielte Bild gerade gezeigt wird und die Anzahl der Bilder.<script language=”JavaScript”>
var bild = new Array();
bild[1] = “foto_1.jpg”;
bild[2] = “foto_2.jpg”;
bild[3] = “foto_3.jpg”;
bild[4] = “foto_4.jpg”;
i = 1; // Index
n = 4; // Anzahl der verfügbaren Bilder
</script>
Die Javascript-Funktionen
Im gleichen oder einem eigenen Script-Bereich werden die Funktionen prev() und next() definiert:<script language=”JavaScript”>
function next() {
-i++; // entspricht i=i+1;
-// die Bilder liegen im Unterordner images, das Bild wird neu gesetzt:
-document.galerie.src = “images/”+bild[i];
}
function prev() {
-i–; // entspricht i=i+1;
-// die Bilder liegen im Unterordner images, das Bild wird neu gesetzt:
-document.galerie.src = “images/”+bild[i];
}
</script>
Damit das Blättern auf die verfügbaren Bilder beschränkt wird, muss noch in beiden Funktionen eine Kontrolle für die Werte von i durchgeführt werden:<script language=”JavaScript”>
function next() {
-i++; // entspricht i=i+1;
-if (i>n) {i=1;} // die Galerie beginnt wieder von vorne
-document.galerie.src = “images/”+bild[i];
}
function prev() {
-i–; // entspricht i=i+1;
-if (i<1) {i=n;} // die Galerie beginnt von hinten
-document.galerie.src = “images/”+bild[i];
}
</script>
Um Redundanzen (hier: Wiederholung gleicher Codes) zu vermeiden, wird das Setzen des Bildes in eine eigene Funktion ausgelagert, die dann einfach erweitert werden kann:<script language=”JavaScript”>
function next() {
-i++;
-if (i>n) {i=1;}
-bildsetzen(i);
}
function prev() {
-i–;
-if (i<1) {i=n;}
-bildsetzen(i);
}
function bildsetzen(i) {
-document.galerie.src = “images/”+bild[i];
}
</script>
Erweiterung 1
Die Funktion bildsetzen(1) kann bei Abschluss des Ladevorganges der Seite aufgerufen werden, dann wird im <img> keine src-Eigenschaft benötigt:<body onload=”bildsetzen(1);”>
<img name=”galerie” />
Erweiterung 2
Wenn die Bilder beispielsweise als Bild 1 von 4 benannt werden sollen, wird ein <span> verwendet, das an der entsprechenden Stelle steht, bei mir unter dem Bild:<img name=”galerie” /><br />
<span id=”nr”></span>

Mit der id des span kann das Javascript die Beschriftung setzen, gleich nach dem Bildsetzen in der gleichen Funktion:function bildsetzen(i) {
-document.galerie.src = “images/”+bild[i];
-// Beachte die Leerzeichen in den Textstrings:
-document.getElementById(”nr”).innerHTML = “Bild “+i+” von ” + n;
}
Bei entsprechender Gestaltung mit CSS wird eine optisch ansprechende Galerie erzielt. Die einzelnen Bildernamen müssen bei statischem HTML in den Quellcode geschrieben werden, sie werden bei dynamischem HTML per Script (php) aus einem Ordner oder einer Datenbank ausgelesen und autoatisch in das Script geschrieben.

Im folgenden Beispiel soll ein grau hinterlegtes Feld mit einem Hinweistext eingeblendet werden, wenn man mit der Maus über den ersten Link fährt. Im HTML-Quelltext sind die Links und die Bereiche definiert, im Stylesheet die Eigenschaften. Der JavaScript-Code befindet sich in der HTML-Datei.

Zu beachten ist, dass JavaScript zweimal im HTML-Text vorkommt: es werden die nötigen Funktionen definiert und es wird (in diesem Fall beim Hyperlink) ein Event definiert, der eine bestimmte Funktion aufruft.

<script> im <head>-Bereich der HTML-Seite<script language=”JavaScript”>
<!–
function hilfe_ein() {
document.getElementById(”hilfe”).style.visibility = “visible”;
return
}
function hilfe_aus() {
document.getElementById(”hilfe”).style.visibility = “hidden”;
return
}
//–>
</script>
<body> in HTML-Seite<body>
<div> </div>

<div>
<a href=”index.html” onMouseOver=”hilfe_ein()” onMouseOut=”hilfe_aus()”> typografie</a>
</div>

<div><h2>Titel</h2>
<p>Hierher kommt jeweils der Text zu einem Menüpunkt</p>
</div>

<div id=”hilfe”>Das ist der Hilfetext für das erste Menü</div>
</body>
stylesheet
Damit bei Öffnen der Seite der Hilfetext noch nicht erscheint, wird im Stylesheet die Eigenschaft.hilfe {visibility: hidden;}

gesetzt.

Beispiel

Das entsprechende JavaScript ist in diesem Fall in eine externe js-Datei ausgelagert:

<link rel=”stylesheet” href=”menue.css” type=”text/css”>
<script language=”javascript” src=”menue.js”></script>
Beim Laden einer Seite werden die Untermenüpunkte unsichtbar gemacht.
<body onLoad=”invisible()”>
Das ist der Text in menue.js:function invisible() {
document.getElementById(”submenue1″).style.visibility = “hidden”;
document.getElementById(”submenue2″).style.visibility = “hidden”;
document.getElementById(”submenue3″).style.visibility = “hidden”;
document.getElementById(”submenue4″).style.visibility = “hidden”;
document.getElementById(”submenue5″).style.visibility = “hidden”;
}
function menue(i) {
invisible();
document.getElementById(”submenue”+i).style.visibility = “visible”;
}

Achtung: Obige submenues müssen mit einer id im HTML-Text vergeben sein. Die function invisible() könnte auch verallgemeinert werden mit einer for-Schleife um Redundanzen zu vermeiden:function invisible() {
for (var j=1;j<=5;j++) {
// Die Identities werden variable erzeugt:
document.getElementById(”submenue”+j).style.visibility = “hidden”;
}
}
function menue(i) {
invisible();
document.getElementById(”submenue”+i).style.visibility = “visible”;
}
function menue(i) macht zuerst alle Menüpunkte unsichtbar, dann wird zum gewählten Menüpunkt (i) das entsprechende Untermenü angezeigt. Der Einfachheit halber werden im folgenden Code nur jeweils Menü 4 und Menü 5 sowie Untermenü 4 gezeigt.
<div><a href=”#” onMouseOver=”menue(4)” onMouseOut=”invisible()”> Aktie</a></div>

<div class=”menue”><a href=”#” onMouseOver=”menue(5)” onMouseOut=”invisible()”> Produktion</a></div>

<div id=”submenue4″ onMouseOver=”menue(4)” onMouseOut=”invisible()”>
<!–Untermenü 4 –>
<div><a href=”" onClick=”invisible()”>Allgemein</a></div>
<div><a href=”" onClick=”invisible()”>Details</a></div>
<div><a href=”" onClick=”invisible()”>Aktienkurs</a></div>
<div><a href=”" onClick=”invisible()”>…</a></div>
<div><a href=”" onClick=”invisible()”>…</a></div>
<!– Ende der Sub-schleife –>
</div>
Die Style-Klassen menue, submenue1-5 und submenuezeile müssen im Stylesheet definiert werden.

menue bezieht sich auf die Menüpunkte, die (hier) in einer Zeile gemeinsam definiert werden (Schriftfarbe, Breite, hover, etc).

submenue1-5 gibt jeweils die Lage an sowie Farben (Hintergrund, Schrift):{
position: absolute;
left: …px;
top: …px;
}
submenuezeile gibt die Formatierung der gesetzten Hyperlinks an. Mit display:block; wird die ganze Zeile bis zum Rand als Link behandelt (Firefox).

clientside – serverside
Man unterscheidet zwischen clientseitiger und serverseitiger Programminterpretation.

Serverseitige Programmiersprachen interpretieren die in die HTML-Seite eingefügten Programmcodes am Server und schicken nur den bereits übersetzten Programmcode zum Client. Auf dem Server muss der Programminterpreter zur Verfügung stehen. Webdesigner, die serverseitig programmieren, sind also von der Unterstützung der Programmiersprache durch der Server abhängig.

Clientside-Programmierung ist unabhängig vom Server, aber abhängig von den Client-Einstellungen. Ist Javascript erlaubt/aktiviert, kann der Browser Javascript-Befehle interpretieren?

Einbindung von javascript
Das Programmieren von Javascript geschieht in zwei Schritten. Zuerst werden Funktionen definiert. Die Definition von Funktionen wird im HTML-Code nach dem HEAD-Bereich in einem Script-Bereich vorgenommen.
<SCRIPT language =”JavaScript”>
<!–
…
//–>
</SCRIPT>
Die Funktion wird dann innerhalb eines HTML-TAGs aufgerufen.

Javascript-Funktionen können auf zwei Arten eingebunden werden: innerhalb einer einzelnen HTML-Seite oder in einer eigenen Datei (*.js), auf die in der HTML-Seite verwiesen wird. Da man einzelne Javascript-Funktionen in verschiedenen HTML-Dokumenten verwenden wird, ist die zweite Variante oft die sinnvollere.
<SCRIPT language=”JavaScript” SRC=”/js/scripts.js”>
</SCRIPT>
Im JavaScript-Bereich werden Funktionen definiert, die bei einem bestimmten event (onMouseOver, onClick, onLoad, etc) aufgerufen werden.