In diesem Diagramm wird die Funktion, welche im Input-Feld eingegeben wurde, im angegebenen X- und
Y-Intervall dargestellt.
Sie können die Standard-Operatoren
+ - * / ( )
die Konstanten des JavaScript-Math-Objektes
E LN2 LN10 LOG2E LOG10E PI SQRT1_2 SQRT2
und die Functionen des Math-Objektes
abs acos asin atan ceil cos exp floor log max min pow random round
sin sqrt tan
verwenden, um eine Funktion zu definieren.
Zuerst werden beim Laden der Seite ein neues 'Diagram'-Objekt und neue 'Pixel'-Objekte erzeugt:
<SCRIPT Language="JavaScript">
document.open();
var D=new Diagram();
D.SetFrame(60, 175, 635, 500);
D.SetBorder(-1, 1, -1, 1);
D.SetText("x","y", "y=f(x)");
D.Draw("#DDDDDD", "#000000", true, "");
var i, j, x, y;
j= D.ScreenY(0);
P=new Array(636);
for (i=60; i<=635; i++)
P[i]=new Pixel(i, j, "#0000FF");
document.close();
</SCRIPT>
Nack dem Klicken auf "Draw" werden die Eigenschaften der bereits existierenden Objekte verändert,
um die neue Funktion darzustellen:
<SCRIPT Language="JavaScript">
function Draw()
{ // ... hier wurde einiger Quelltext weggelassen
D.SetBorder(xmin, xmax, ymin, ymax);
D.Draw("#DDDDDD", "#000000", true, "y="+document.inputform.fx.value);
for (i=60; i<=635; i++)
{ x = D.RealX(i);
if (window.EvalSave)
{ y=EvalSave(document.inputform.fx.value);
if (y=="")
{ alert(document.inputform.fx.value+" can not be evaluated for x="+x);
return;
}
}
else
{ with (Math) y=eval(document.inputform.fx.value);
}
if ((ymin<=y)&&(y<=ymax)) P[i].MoveTo(i, D.ScreenY(y));
else P[i].SetVisibility(false);
}
}
</SCRIPT>
Das obige Beispiel wird nur mit IE 5.x oder Netscape 6.x korrekt funktionieren. Jedoch, anstatt dynamisch die Eigenschaften
der Objekte zu ändern, können auch zwei Frames verwendet werden - der erste für die Eingabe und der zweite
für das Diagramm.
Nach dem Klicken auf "Draw" schreibt der erste Frame die Parameter in Variablen im Parent-window und lädt
den zweiten Frame neu (location.href=url verwenden, nicht history.go(0)!). Der zweite Frame liest die Variablen aus
dem Parent-window und zeichnet das Diagramm mit der Funktion entsprechend der angegebenen Parameter.
Das funktioniert mit allen Browsern.