Dynamische Webseiten-Generierung, Vorlesung 9

<- Vorlesung 8 Übungen Vorlesung 10 ->


12) Anwendung: Dynamische Anzeige von Bildern

Wir wollen ein GIF-Bild als Verweis in eine Seite einbauen. Fährt der Betrachter mit der Maus über das Bild, soll sich die Anzeige ändern. Dazu wurden 2 (recht einfache) Bilder erstellt:

    und    

Normalerweise soll auf der HTML-Seite das Bild mit der weißen Schrift angezeigt werden. Fährt man mit der Maus über das Bild, soll das Bild mit der schwarzen Schrift angezeigt werden.

Hier ist der HTML-Text zur Anzeige des Bildes. Wir geben dem Bild den Namen verweis.

	Hier ist der Verweis:
	<CENTER>
	<A HREF="http://www.uni-bayreuth.de">
	<IMG NAME="verweis" SRC="b1.gif">
	</A>
	</CENTER>
Nun fügen wir dem Link-Befehl die beiden Event-Handler onMouseOver und onMouseOut hinzu:
	Hier ist der Verweis:
	<CENTER>
	<A HREF="http://www.uni-bayreuth.de" 
		onMouseOver="wechsel('b2.gif')" onMouseOut="wechsel('b1.gif')">
	<IMG NAME="verweis" SRC="b1.gif">
	</A>
	</CENTER>
Fährt man mit der Maus über das Bild, bzw. verläßt die Maus das Bild, so wird die Funktion wechsel() aufgerufen. Als Argument dieser Funktion ist das jeweils nicht angezeigte Bild angegeben. Diese Funktion wechsel() müssen wir jetzt noch definieren:
	<HEAD>
	<SCRIPT LANGUAGE="javascript">
		function wechsel(bildname) {
			document.images["verweis"].src=bildname;
		}
	</SCRIPT>
	</HEAD>


13) Anwendung: Ein Taschenrechner

Ein simpler Taschenrechner ist ein häufig anzutreffendes nützliches Beispiel. Wir wollen nur die einfachsten Arithmetik-Funktionen wie +,-,* und / verwenden. Unser Beispiel ist stark an das Beispiel in JavaScript für alle angelehnt. Zuerst bauen wir mittels einer HTML-Tabelle das Gerüst:
	<body>
	<form name="taschenrechner" method="POST">
	<table border>
	<tr><td colspan=5><input type="text" size=16 maxlength=80 name="berech" value="" ></tr>
	<tr>
	  <td align=center><input type="button" value=" 7 ">
	  <td align=center><input type="button" value=" 8 ">
	  <td align=center><input type="button" value=" 9 ">
	  <td align=center><input type="button" value=" / ">
	  <td align=center><input type="button" value=" C ">
	</tr><tr>
	  <td align=center><input type="button" value=" 4 ">
	  <td align=center><input type="button" value=" 5 ">
	  <td align=center><input type="button" value=" 6 ">
	  <td align=center><input type="button" value=" * ">
	  <td align=center><input type="button" value=" ( ">
	</tr><tr>
	  <td align=center><input type="button" value=" 1 " >
	  <td align=center><input type="button" value=" 2 " >
	  <td align=center><input type="button" value=" 3 " >
	  <td align=center><input type="button" value=" - " >
	  <td align=center><input type="button" value=" ) " >
	</tr><tr>
	  <td align=center><input type="button" value=" 0 " >
	  <td>
	  <td align=center><input type="button" value=" . " >
	  <td align=center><input type="button" value=" + " >
	  <td align=center><input type="button" value=" = " >
	</tr>
	</table>
	</form>
	</body>
Zur Vorgehensweise: Im Textfeld berech wird die Berechnung zusammengestellt, z.B. 100+10*3.14. Man kann die Berechnung direkt in das Textfeld über die Tastatur eingeben, oder per Mausklick zusammenstellen. Dieser String wird ausgewertet und in dem Textfeld angezeigt. Zur Auswertung gibt es die JavaScript-Standardfunktion eval(). Um das Zusammenstellen einer Berechnung mittels Mausklick realisieren zu können, erstellen wir eine Funktion hinzu(), die das jeweilige Zeichen, auf das geklickt wurde, dem Berechnungs-String hinzufügt. Das heißt, unser Gerüst sieht so aus:
	<body>
	<form name="taschenrechner" method="POST">
	<table border>
	<tr><td colspan=5><input type="text" size=16 maxlength=80 name="berech" value="" onChange="upda()"></tr>
	<tr>
	  <td align=center><input type="button" value=" 7 " onClick="hinzu('7')">
	  <td align=center><input type="button" value=" 8 " onClick="hinzu('8')">
	  <td align=center><input type="button" value=" 9 " onClick="hinzu('9')">
	  <td align=center><input type="button" value=" / " onClick="hinzu('/')">
	  <td align=center><input type="button" value=" C " onClick="loesch()">
	</tr><tr>
	  <td align=center><input type="button" value=" 4 " onClick="hinzu('4')">
	  <td align=center><input type="button" value=" 5 " onClick="hinzu('5')">
	  <td align=center><input type="button" value=" 6 " onClick="hinzu('6')">
	  <td align=center><input type="button" value=" * " onClick="hinzu('*')">
	  <td align=center><input type="button" value=" ( " onClick="hinzu('(')">
	</tr><tr>
	  <td align=center><input type="button" value=" 1 " onClick="hinzu('1')">
	  <td align=center><input type="button" value=" 2 " onClick="hinzu('2')">
	  <td align=center><input type="button" value=" 3 " onClick="hinzu('3')">
	  <td align=center><input type="button" value=" - " onClick="hinzu('-')">
	  <td align=center><input type="button" value=" ) " onClick="hinzu(')')">
	</tr><tr>
	  <td align=center><input type="button" value=" 0 " onClick="hinzu('0')">
	  <td>
	  <td align=center><input type="button" value=" . " onClick="hinzu('.')">
	  <td align=center><input type="button" value=" + " onClick="hinzu('+')">
	  <td align=center><input type="button" value=" = " onClick="berechne()">
	</tr>
	</table>
	</form>
	</body>
Wie man sieht, gibt es drei weitere Funktionen: upda() bearbeitet die direkte Eingabe über die Tastatur im Textfeld berech. Die Funktion loesch() setzt den Berechnungs-String auf den leeren String "". Die Funktion berechne() schließlich startet die Berechnung. Die JavaScript-Befehle sehen dann so aus:
	<script language="JavaScript">
		var string="";
		
		function hinzu(zeichen) {
			string += zeichen;
			document.taschenrechner.berech.value = string;
		}
		
		function loesch() {
			string="";
			document.taschenrechner.berech.value = string;
		}
		
		function berechne() {
			if(string.length > 0) {
				inp = "out="+string;
				eval(inp);
			} else {
				out = "0";
			}
			document.taschenrechner.berech.value = out;
			string = "" + out;
		}

		function upda() {
			string = "" + document.taschenrechner.berech.value;
		}
	</script>
Es verbleibt ein Problem: gibt man eine Berechnung über die Tastatur in das Textfeld ein und betätigt die Return-Taste, so wird das Formular abgeschickt (sinnlos, da keine ACTION angegeben wurde). Wir wollen dies natürlich so verändern, daß das Betätigen der Return-Taste die Berechnung des Eingabestrings auslöst. Dazu dient der onSubmit-Handler. Wir ersetzen die <FORM ...>-Zeile durch
	<form name="taschenrechner" method="POST" onSubmit="upda(); berechne(); return false;">


14) Anwendung: Laufschriften

Um besondere Aufmerksamkeit auf z.B. Neuigkeiten zu erregen, werden gerne Laufschriften eingesetzt. Um dies zu realisieren, brauchen wir eine Timer-Funktion, die in gewissen Zeit-Abständen eine Funktion startet. Weiterhin benötigen wir Funktionen um Strings zu zerlegen und wieder neu zusammenzusetzen.

Die Laufschrift wird zunächst in einem Textfeld eines Formulars angezeigt:

	<CENTER>
	<FORM NAME="lauf" METHOD=POST>
	<INPUT TYPE="text" NAME="laufschrift" SIZE="30" VALUE="">
	</FORM>
	</CENTER>
Um die Sache mit Leben auszufüllen, benötigen wir den folgenden JavaScript-Code:
	<SCRIPT LANGUAGE="javascript">
		var lauftext = "Wichtig: Laufschriften sind oft störend und lenken die Aufmerksamkeit des Lesers ab! ";
		var anfang = 0;
		var ende = lauftext.length;
	
		function run() {
			document.lauf.laufschrift.value = lauftext.substring(anfang,ende)+" "+lauftext.substring(0,anfang);
			anfang++;
			if (anfang>ende) anfang = 0;
			setTimeout("run()",100);
		}
	</SCRIPT>
Die Funktion run() starten wir mit dem Event-Handler onLoad im Body-Tag:
	<BODY onLoad="run()">
Was geht hier vor?

Die Funktion run() zeigt den Inhalt der Variablen lauftext in dem Textfeld laufschrift an. Dabei wird ein Teilstring angezeigt, der beim Zeichen an Position anfang beginnt und mit dem Zeichen an Position ende-1 endet. Dann wird ein Leerzeichen ausgegeben und anschließend der Text von Position 0 bis Position anfang-1. Dann wird anfang um 1 erhöht, so daß im nächsten Durchlauf die Positionen um 1 verschoben sind. Ist das Ende des Textes erreicht, beginnen wir wieder von vorne.

Nun kommt der entscheidende Teil: Wir starten die Funktion

			setTimeout("run()",100);
Dieser Befehl bewirkt, daß nach einer Pause von 100 Millisekunden die Funktion run() aufgerufen wird. Die Funktion run() ruft sich also selbst auf, mit einer gewissen Verzögerung. Soll die Laufschrift langsamer laufen, muß die Zahl 100 erhöht werden.

Eine nützliche Möglichkeit sollten wir noch einbauen: Wir wollen die Laufschrift per Knopfdruck anhalten. Dazu fügen wir dem Formular einen Button hinzu:

	<CENTER>
	<FORM NAME="lauf" METHOD=POST>
	<INPUT TYPE="text" NAME="laufschrift" SIZE="30" VALUE="">
	<BR>
	<INPUT TYPE="button" VALUE="Stop" onClick="stop()">
	<BR>
	<INPUT TYPE="button" VALUE="Weiter" onClick="run()">
	</FORM>
	</CENTER>
Außerdem müssen wir eine Timer-Variable erzeugen, in der interne Information über den Timer beim Aufruf von setTimeout() gespeichert wird. Mit dem Befehl clearTimeout() kann dann der Timer angehalten werden.
	<SCRIPT LANGUAGE="javascript">
		var lauftext = "Wichtig: Laufschriften sind oft störend und lenken die Aufmerksamkeit des Lesers ab! ";
		var anfang = 0;
		var ende = lauftext.length;
		var timer = null;
	
		function run() {
			document.lauf.laufschrift.value = lauftext.substring(anfang,ende)+" "+lauftext.substring(0,anfang);
			anfang++;
			if (anfang>ende) anfang = 0;
			timer = setTimeout("run()",100);
		}
		
		function stop() {
			if (timer!=null) {
				clearTimeout(timer);
				timer = null;
			}
		}
	</SCRIPT>
Neben Textfelder in Formularen wird oft auch die Statuszeile für die Laufschrift verwendet. Dazu muß in der Funktion run() dieser Befehl verwendet werden:
			window.status = lauftext.substring(anfang,ende)+" "+lauftext.substring(0,anfang);


<- Vorlesung 8 Übungen Vorlesung 10 ->

Alfred.Wassermann@uni-bayreuth.de