Animierte Texte

Offenbar unausrottbaren Bedürfnissen folgend, ermöglicht JavaScript mit einfachen Laufschriften oder wechselnde Texte.

Laufschrift

Diese kann am schnellsten in einem Textfeld oder im Statusfeld angelegt werden. Prinzipiell kann sie aber überall dort erscheinen, wo auch bei offener Seite geschrieben werden kann. Hier gibt es kein Browserproblem. Frisch an’s Werk!

Im Kopf wird eingetragen:

<script language=JavaScript>
   text=" ? "; //    <-------------siehe unten!
   function lauf()
   {
      text=text.slice(1,text.length)+text.slice(0,1);
      document.zeile.fenster.value=text;
      window.setTimeout("lauf()",75)
   }
   window.setTimeout("lauf()",75);
</script>

hier unten folgt:

<form name="zeile">
   <input name="fenster" type="text" size="80">
</form>

Wer den Code dieser Seite beguckt, bekomme keinen Schreck, er ist etwas länger, als oben gezeigt. Denn die Ausgabe ins Statusfenster ist in das Beispielprogramm lauf( ) eingearbeitet. Es mußte nur ein zweiter Text text1 definiert werden und die Ausgabe lautet statt document.zeile.fenster.value=text; diesmal window.status=text1;

Text-Ticker

Ganz ähnlich kann das Problem eines „Tickers“ gelöst werden. Die lange Code-Zeile ist das Herz des Tickers, aber unverständlich. Denn sie greift auf ein Array spr[i] zu, welches im script nicht definiert ist und Sprichwörter enthält. Dieses Array steht vor der Folge von JavaScript-Funktionen dieser Seite. Im Code-Kasten des nächsten Abschnitts ist es angegeben. n und m dienen der Steuerung: m ist die Nummer eines Spruches, n die Position im Spruch, bis zu der angezeigt wird.

Im head steht:

<script language=JavaScript>
   n=0;
   m=0;
   function tick()
   {
      n++;
      if(n>spr[m].length){n=1;m++}
      if(m>8)m=0;
      document.ticker.fenster.value = spr[m].slice(0,n);
      window.setTimeout("tick()",150);
   }
   window.setTimeout("tick()",500);
</script>

hier unten folgt:

<form name="ticker">
   <input name="fenster" type="text" size="30">
</form>

Ein kleiner Schönheitsfehler ist leicht zu beseitigen: Der Text wird nach Vollendung sehr schnell gelöscht. Es genügt, im Textstring einige Leerzeichen anzuhängen, schon entsteht eine kleine Pause.

Wechselnde Text in einem Textfeld

Auch beim bloßen, zufallsgesteuerten Wechsel von Texten bietet sich als „Schreibfläche“ ein Textfeld an.

<script language=JavaScript>
   var spr=new Array;
   spr[0]="Gut Ding will Weile haben";
   spr[1]="Haste was, biste was";
   spr[2]="Von nichts kommt nichts";
   spr[3]="Ohne Fleiss kein Preis";
   spr[4]="Morgenstunde ist aller Laster Anfang";
   spr[5]="Muessiggang hat Gold im Munde";
   spr[6]="Handwerk hat goldenen Boden";
   spr[7]="Lange Faedchen, faule Maedchen";
   spr[8]="Klappern gehoert zum Handwerk";
   function rede()
   {
      num=Math.floor(9*Math.random());
      document.redtab.redfens.value = spr[num]; 
      window.setTimeout("rede()",1000);
   }
   window.setTimeout("rede()",1000);
</script>

Texteinträge in einem Frame wechseln

Wie immer gibt es mehrere Varianten. Nehmen wir an, es solle in einem speziellen Fenster einer Framestruktur die Anzeige alle 5 Sekunden wechseln. Der Wechsel soll im ersten Frame unterschiedliche Stellen eines Dokuments anzeigen, das „oben.htm“ heiße und 10 Marken mit den Bezeichnungen „1“ bis „10“ enthält. Dann geht es wie folgt:

<html>
<head>
   ...
   <script language=JavaScript>
     function lade()
     {
         datei="oben.htm#" + Math.ceil(10*Math.random());
         top.frames[0].location.href=datei;
         window.setTimeout("lade()",1000);
      }
      window.setTimeout("lade()",1000);
   </script>
</head>
<frameset rows="10%,*">
   <frame name="oben" src="oben.htm" >
   <frame name="unten" src="unten.htm">
<noframes>
 <body>
   Hauptseite mit Frames und Steuerstruktur
 </body>
</noframes>
</frameset>
</html>

Hier war etwas „kriminelle“ Energie vonnöten. Die Framestruktur muß aufgebaut sein, bevor JavaScript sie ansprechen will. Die Funktion erst nach dem Frameset zu definieren, klappt nicht. Der Browser beendet mit dem erfolgreichen Aufbau der Framestruktur nämlich seine Arbeit an der Framesetseite und liest den interessanten Rest gar nicht erst. Also muß vor dem Frameset definiert werden. Das geht auch gut, solange der Aufruf unterbleibt. Die setTimeout-Zeile unter der Funktionsdefinition räumt Zeit zum Aufbau der Frames ein. Tests ergaben, daß hier sogar eine „1“ als Verzögerung reicht, dann kann JavaScript ohne Fehler die Frames ansprechen.

Ein kleiner Schönheitsfehler, die Datei kann nicht von den wechselnden Marken ab angezeigt werden, wenn dem Frame mit scrolling="no" das Scrollen untersagt wird. Man muß hier mit der häßlichen Laufleiste am Rande leben.

Wen sie dennoch stört, dem kann geholfen werden (und ich kriege evtl. eine Prämie von der Telekom). Man muß lauter einzelne Seiten erzeugen, deren Inhalt in das Anzeigefenster paßt. Dem Nutzer sei zusätzlich empfohlen, sämtliche Caches im Browser auf Größe Null zu setzen und jede Seite jedesmal neu übers Netz zu holen. Ich bin gespannt, wie das aussieht.

Weitere Schönheitsfehler sind leicht zu beheben. Erstens startet die Sache mit immer der gleichen Ansicht, hier dem Beginn der Seite „oben.htm“. Das läßt sich vermeiden, indem im Frameset keine Dateiquelle angegeben und die Funktion bereits nach einer sehr kleinen Verzögerung aufgerufen wird. Zweitens führen Wiederholungen bei der Zufallszahl zu scheinbaren Pausen im regelmäßigen Wechsel. Um das zu vermeiden, muß sichergestellt werden, daß jede neue Zufallszahl sich vom Vorgänger unterscheidet. Das wird erreicht mit:

<script language=JavaScript>
   function flatter()
  {
       do
         numneu=Math.ceil(10*Math.random());
       while (num==numneu);
       datei="oben.htm#" + numneu;
       oben.location.href=datei;
       num=numneu; 
       window.setTimeout("flatter()",1000);
  }
  var num=5;
  window.setTimeout("flatter()",100);
</script>
Denkaufgabe für Fortgeschrittene: Warum muß num=5 sein?
Dieses Tutorial wurde bereitgestellt von Prof. Dr. Rolf Hirte, Technische Fachhochschule Wildau. Vielen Dank an dieser Stelle!
Viel Spass beim Lernen und beim Erstellen eigener JavaScripts.