Otro elemento interesante en la programación visual es el uso de botones:
<FORM>
<INPUT TYPE="button" VALUE="Pepito" onClick="programaJS;">
</FORM>
El tag <INPUT TYPE...> anterior crea un botón de comando, donde aparece escrito el texto "Pepito" y al hacer clic en dicho botón (onClick), se ejecuta el "programaJS".
Vamos a ver como funciona...
<HTML>
<!-- PROG068.HTM //-->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function Saludo()
{
alert("Hola Mundo!");
}
</SCRIPT>
</HEAD>
<BODY>
<P ALIGN="CENTER">
<FORM>
<INPUT TYPE="button" VALUE="Hazme Clic" onClick="Saludo();">
</FORM>
</P>
</BODY>
</HTML>
El "saludo" anterior podría ser más sofisticado, en efecto:
<HTML>
<!-- PROG069.HTM //-->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function Saludo(nom)
{
alert("Hola "+nom);
}
</SCRIPT>
</HEAD>
<BODY>
<P ALIGN="CENTER">
<FORM>
Escribe tu nombre:
<INPUT TYPE="text" NAME="x">
<BR><BR>
<INPUT TYPE="button" VALUE="Hazme Clic" onClick="Saludo (document.forms[0].x.value);">
</FORM>
</P>
</BODY>
</HTML>
EJEMPLOS "visuales"
Para acabar este tema se trata de repetir una serie de programas ya hechos en capítulos anteriores, pero utilizando las posibilidades "visuales" que acabamos de ver.
Ejemplo1: Tabla de valores de la función y=x2-5x+10
El programa correspondiente era el Prog023.htm que ya tienes en TuCarpeta:
<HTML>
<SCRIPT LANGUAGE="JavaScript">
// PROG023.HTM
var x1,x2,paso;
var salida="";
var y;
x1=prompt("Escribe el menor valor de x","");
x1=parseFloat(x1);
x2=prompt("Escribe el mayor valor de x","");
x2=parseFloat(x2);
paso=prompt("Escribe el incremento de x:","");
paso=parseFloat(paso);
for(i=x1;i<=x2;i=i+paso)
{
y=i*i-5*i+10;
salida=salida+i+" "+y+"\n";
}
alert(salida);
</SCRIPT>
</HTML>
Es conveniente ejecutar el Prog023.htm, para tener claro su funcionamiento.
Bien, vamos a seguir el proceso para transformar el programa anterior en "visual":
1º) Programa JavaScript en forma de función:
<SCRIPT LANGUAGE="JavaScript">
function valores(x1,x2,paso)
{
var y;
var salida="";
x1=parseFloat(x1);
x2=parseFloat(x2);
paso=parseFloat(paso);
for(i=x1;i<=x2;i=i+paso)
{
y=i*i-5*i+10;
salida=salida+"x= "+i+" y="+y+"<BR>";
}
document.write(salida);
}
</SCRIPT>
2º) Elementos visuales:
Tres cuadros de texto para introducir x1, x2 y paso
Un botón para ejecutar el programa
Es decir:
<FORM>
Primer o mínimo valor de X:<INPUT TYPE="text" NAME="min">
<BR>
Último o máximo valor de X:<INPUT TYPE="text" NAME="max">
<BR>
Incremento o Variación entre los valores de X: <INPUT TYPE="text" NAME="incr">
<BR>
<HR>
<INPUT TYPE="button" VALUE="Tabla de Valores" onClick="valores(document.forms[0].min.value,document.forms[0].max.value,document.forms[0].incr.value);">
<HR>
<BR>
</FORM>
Vamos a ver antes de continuar si funciona lo fundamental:
<HTML>
<!-- PROG070.HTM //-->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function valores(x1,x2,paso)
{
var y;
var salida="";
x1=parseFloat(x1);
x2=parseFloat(x2);
paso=parseFloat(paso);
for(i=x1;i<=x2;i=i+paso)
{
y=i*i-5*i+10;
salida=salida+"x= "+i+" y="+y+"<BR>";
}
document.write(salida);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Primer o mínimo valor de X:<INPUT TYPE="text" NAME="min">
<BR>
Último o máximo valor de X:<INPUT TYPE="text" NAME="max">
<BR>
Incremento o Variación entre los valores de X: <INPUT TYPE="text" NAME="incr">
<BR>
<HR>
<INPUT TYPE="button" VALUE="Tabla de Valores" onClick="valores(document.forms[0].min.value,document.forms[0].max.value,document.forms[0].incr.value);">
<HR>
<BR>
</FORM>
</BODY>
</HTML>
3º) Por último se trata de hacerlo "bonito":
<HTML>
<!-- PROG071.HTM //-->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function valores(x1,x2,paso)
{
var y;
var salida="";
x1=parseFloat(x1);
x2=parseFloat(x2);
paso=parseFloat(paso);
for(i=x1;i<=x2;i=i+paso)
{
y=i*i-5*i+10;
salida=salida+"x= "+i+" y="+y+"<BR>";
}
document.write("<P ALIGN='CENTER'><FONT COLOR='red'><B>"+salida);
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="GREEN"><FONT COLOR="YELLOW"><H1><P ALIGN="CENTER">
Tabla de Valores de la función: Y=X*X-5*X+10</H1>
<FORM>
Primer o mínimo valor de X:<INPUT TYPE="text" NAME="min">
<BR>
Último o máximo valor de X:<INPUT TYPE="text" NAME="max">
<BR>
Incremento o Variación entre los valores de X: <INPUT TYPE="text" NAME="incr">
<BR>
<HR><P ALIGN="CENTER">
<INPUT TYPE="button" VALUE="Tabla de Valores" onClick="valores(document.forms[0].min.value,document.forms[0].max.value,document.forms[0].incr.value);">
<HR>
<BR>
</FORM>
</BODY>
</HTML>
|
Anterior: javascript y formularios |
| articulos relacionados |
apuntes
autoayuda