JavaScript Diagram Builder - Exemplo dinâmico

x-min: x-max: y-min: y-max:
y=
O diagrama mostra a função que você escrever no caixa no intervalo especificado de x e de y.
Você pode usar os operadores
+ - * / ( )
as constantes do objeto Math do Javascript
E LN2 LN10 LOG2E LOG10E PI SQRT1_2 SQRT2
e as funções do objeto Math
abs acos asin atan ceil cos exp floor log max min pow random round sin sqrt tan
para definir uma função.

Quando a página é carregada, primeiramente um objeto novo Diagram e objetos novos Pixel estão criados:

<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.SetGridColor("#808080", "#CCCCCC");
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>

Depois que você estala a tecla da "desenhar", os próprios dos objetos já existentes estão mudadas, para mostrar a função nova:

<SCRIPT Language="JavaScript">
function Draw()
{ // ... some code was cutted here
  D.SetBorder(xmin, xmax, ymin, ymax);
  D.SetText("x", "y", "y="+document.inputform.fx.value);
  D.SetGridColor("#808080", "#CCCCCC");
  D.Draw("#DDDDDD", "#000000", true, "y="+document.inputform.fx.value);
  var isEvalSafe=(window.EvalSafe)&&(EvalSafe("1+1")==2);
  for (i=60; i<=635; i++)
  { x = D.RealX(i);
    if (isEvalSafe)
    { y=EvalSafe(document.inputform.fx.value);
      if (isNaN(parseInt(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>
O exemplo acima funciona somente corretamente com IE 5.x ou Netscape 6.x. Entretanto, em vez dinâmicamente de mudar os proprios dos objetos você pode usar dois frames - o primeiro para a entrada e o segundo para o diagrama. Após ter estalado o botão "desenhar", o primeiro frame escreve os parâmetros às variáveis na janela parental e recarrega o segundo frame (uso location.href=url, não history.go(0)!), qual lê as variáveis da janela parental e mostra o diagrama e a função que correspondem aos parâmetros.
Isto funciona com todos os browsers.


« Exemplo estático Exemplo de Iframe »