next up previous contents
Next: Java-Applet Up: Visualisierung in einem Internetbrowser Previous: META-Tag

JavaScript

JavaScript erweitert HTML um Objekte und Funktionen mit dem Ziel, HTML-Seiten flexibler zu gestalten. Um JavaScript zu verwenden, muss ein JavaScript-fähiger Browser verwendet werden. Durch den Formatierbefehl <SCRIPT language=``JavaScript``> ... </SCRIPT> wird der JavaScript-Kode direkt und unkompiliert dem HTML-Dokument hinzugefügt.
Das folgende Beispiel zeigt das erweiterten HTML-Dokument zum periodischen Anzeigen des Kamerabildes mit Hilfe von JavaScript: 

<HTMl>
   <HEAD>
       <TITLE>MBX-Board WebCam (1.5) - example</title>
       <SCRIPT language="JavaScript">
          i = 1;
          function next()
          {document.animation.src = "aus.jpg?Zaehler="+(i++);}
       </SCRIPT>
   </HEAD>
   <BODY>
      <H1> MBX-Board WebCam  </H1>
      <IMG SRC="aus.jpg" NAME= "animation" ONLOAD = "setTimeout('next()',100)">
   </BODY>
</HTML>
Der Formatierbefehl IMG ist um die Parameter NAME und ONLOAD erweitert worden. Durch ONLOAD wird der Funktionsaufruf der JavaSript-Funktion setTimeout() übergeben. Diese Funktion wird ausgeführt, sobald das Bild vom Browser geladen worden ist. Die Funktion setTimeout() wartet 100 ms und ruft die JavaScript-Funktion next() auf. next() ändert den Parameter SRC des Formatierbefehls IMG. Daraufhin liest der Browser ein neues Bild der Internetkamera.
Bei jedem Lesezyklus wird die Datei ,,aus.jpg`` vom Server der Internetkamera geladen. Würde next() den Parameter SRC bei jedem Zyklus gleich ,,aus.jpg`` setzen, würde der Browser das Bild nicht aktualisieren, da der Dateiname sich nicht geändert hat. Um diese Problematik zu umgehen, wird der Dateiname um die Zeichenkette ``?Zaehler=`` und einen variablen Wert erweitert, der sich bei jedem Zyklus ändert. Da dem Server die Variable Zaehler nicht bekannt ist, ignoriert er die Zeichen nach dem Fragezeichen (vgl. GET-Methode beim CGI, siehe Abschnitt 3.4). Er sendet daher bei jedem Zyklus die aktualisierte Datei ,,aus.jpg`` an den Browser.
Die Verwendung von JavaScript zur Darstellung des Kamerabildes ist eine einfache Methode, die sehr gute Ergebnisse liefert. Die Darstellung der Seite ist im Gegensatz zur Verwendung des META-Tags ruhig und flimmerfrei. Der Browser aktualisiert nur das Bild und nicht die gesamte Seite. Zudem wird das alte Bild nicht vom Bildschirm gelöscht, sondern lediglich vom neuen überschrieben.
next up previous contents
Next: Java-Applet Up: Visualisierung in einem Internetbrowser Previous: META-Tag
Thorsten Thormaehlen
2000-03-27