JavaScript - Ansteuerung eines Applets

Als kleines hübsches Beispiel soll hier noch die Darstellung kleiner Diagramme über ein Java-Applet herhalten.

Diese Seite wurde an Mozilla/Netscape, Konqueror und MSIE erfolgreich getestet.

Beispiel ansehen
Beschreibung des Java-Applets "diagram"

Querverweise zum Verständnis : [Einbindung in HTML] [Spezifikation Funktionen] [Objektreferenz applets]

Im folgenden Quelltext sind wichtige Bereiche grün und Kommentare gelb markiert.
<html>

<head>
<title>
JavaScript - Beispiel
</title>

<script type="text/javascript"> <!-- Script-Bereich einleiten -->
<!--                             /* HTML-Kommentar fuer Browser ohne JavaScript */
var diagramApp;    // globale Variable fuer Applet-Objekt
var initialized=0; // globale Variable: Applet bereits geladen?

function waitForInit()
// diese Funktion wartet, bis das Applet geladen wurde und veranlasst dann die Darstellung des Titelbildes
{
  var initIt=1;
// Objekt zum Applet ermitteln:
  diagramApp=document.getElementById("diagramApp");
// testen, ob wirklich Objekt:
  if (typeof(diagramApp)!="object")                
    initIt=0;
  if (initIt)
// testen, ob Methoden des Applets schon bekannt sind:
    if ((typeof(diagramApp.diagramInit)!="function")&&(typeof(diagramApp.diagramInit)!="object"))
      initIt=0;
// wenn alles bereit:
  if (initIt)
  {
// globale Variable setzen:
    initialized=1;
// in 0.5s Titelbild erzeugen
    setTimeout("setze();",500);
  }
// sonst
  else
// nochmal 0.5s warten und dann weiter versuchen
    setTimeout("waitForInit();",500);
}

function setze()
{
  if (!initialized)
  {
    alert("noch keine Verbindung zum Applet");
    return;
  }
  diagramApp.diagramBGColor(230,230,230);     // Hintergrundfarbe setzen
  diagramApp.diagramBorderColor(255,255,255); // Randfarbe setzen
  diagramApp.diagramFGColor(0,0,0);           // Farbe f&uuml;r Trennlinie setzen
  diagramApp.diagramInit(20);                 // 20 Werte zulassen
  diagramApp.diagramAdd(30.5  ,192,  0,  0);  // Wert: 30.5 , Farbe: mittelrot
  diagramApp.diagramAdd(28.3  ,192,192,  0);  // Wert: 28.3 , Farbe: mittelgelb
  diagramApp.diagramAdd(17.1  ,  0,192,  0);  // Wert: 17.1 , Farbe: mittelgruen
  diagramApp.diagramAdd(10.3  ,  0,192,192);  // Wert: 10.3 , Farbe: mitteltuerkis
  diagramApp.diagramAdd(9.4   ,  0,  0,192);  // Wert: 9.4 , Farbe: mittelblau
  diagramApp.diagramAdd(5.0   ,192,  0,192);  // Wert: 5.0 , Farbe: mittellila
  diagramApp.diagramAdd(-4.1  ,128,  0,  0);  // Wert: -4.1 , Farbe: dunkelrot
  diagramApp.diagramAdd(-8.4  ,128,128,  0);  // Wert: -8.4 , Farbe: dunkelgelb
  diagramApp.diagramAdd(-10.5 ,  0,128,  0);  // Wert: -10.5 , Farbe: dunkelgruen
  diagramApp.diagramAdd(-12.3 ,  0,128,128);  // Wert: -12.3 , Farbe: dunkeltuerkis
  diagramApp.diagramAdd(-20.9 ,  0,  0,128);  // Wert: -20.9 , Farbe: dunkelblau
  diagramApp.diagramAdd(-22.0 ,128,  0,128);  // Wert: -22.0 , Farbe: dunkellila
  diagramApp.diagramHorzBars();               // als horizontale Balken darstellen
}

//-->                          <!-- HTML-Kommentarende -->
</script>                      <!-- Script-Bereich beenden -->

</head>
<body onLoad="waitForInit();">

<a href="diagram.html">Erkl&auml;rung</a>
  <!-- Link zurueck auf diagram.html -->

<br>
<br>

  <!-- Diagramm-Applet: -->
<applet
  code="diagram"
  id="diagramApp"
  name="diagramApp"
  alt="your browser cannot show java applets"
  width="260" height="260"
  hspace="10" vspace="10"
>
</applet>

<br>
<br>

<form>
  <!-- Diagramm neu setzen: -->
<input type=button value="Ausgangszustand" onClick="setze();">
<br>
  <!-- Diagramm als horizontale Balken darstellen: -->
<input type=button value="HorzBars" onClick="diagramApp.diagramHorzBars();">

  <!-- Diagramm als vertikale Balken darstellen: -->
<input type=button value="VertBars" onClick="diagramApp.diagramVertBars();">

  <!-- Diagramm als im Kreis angeordnete Balken darstellen: -->
<input type=button value="CircleBars" onClick="diagramApp.diagramCircleBars();">

<br>
  <!-- Absolutwerte-Diagramm als einen horizontalen Balken darstellen: -->
<input type=button value="HorzAbs" onClick="diagramApp.diagramHorzAbs();">

  <!-- Absolutwerte-Diagramm als einen vertikalen Balken darstellen: -->
<input type=button value="VertAbs" onClick="diagramApp.diagramVertAbs();">

  <!-- Absolutwerte-Diagramm als einen kreisf&ouml;rmigen Balken darstellen: -->
<input type=button value="CircleAbs" onClick="diagramApp.diagramCircleAbs();">

</form>

<br>
</body>
</html>
Autor: Ulrich Kritzner