gratiszona

Botones en javascript

Otro elemento interesante en la programacion visual es el uso de botones:
<FORM>
<INPUT TYPE="button" VALUE="Pepito" onClick="programaJS;">
</FORM>
El tag <INPUT TYPE...> anterior crea un boton de comando, donde aparece escrito el texto "Pepito" y al hacer clic en dicho boton (onClick), se ejecuta el "programaJS".
Vamos a ver como funciona...
  • Escribe el siguiente programa:
<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>
  • Grabalo con el nombre Prog068.htm y ejecutalo.
El "saludo" anterior podria ser mas sofisticado, en efecto:
  • Escribe el siguiente programa:
<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 capitulos anteriores, pero utilizando las posibilidades "visuales" que acabamos de ver.
Ejemplo1: Tabla de valores de la funcion 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 funcion:
<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 boton para ejecutar el programa
Es decir:
<FORM>
Primer o minimo valor de X:<INPUT TYPE='text' NAME='min'>
<BR>
ultimo o maximo valor de X:<INPUT TYPE='text' NAME='max'>
<BR>
Incremento o Variacion 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:
  • Escribe el siguiente programa:
<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 minimo valor de X:<INPUT TYPE='text' NAME='min'>
<BR>
ultimo o maximo valor de X:<INPUT TYPE='text' NAME='max'>
<BR>
Incremento o Variacion 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>
  • Grabalo en TuCarpeta con el nombre Prog070.htm y ejecutalo.
3º) Por ultimo se trata de hacerlo "bonito":
  • Escribe:
<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 funcion: Y=X*X-5*X+10</h1>
<FORM>
Primer o minimo valor de X:<INPUT TYPE='text' NAME='min'>
<BR>
ultimo o maximo valor de X:<INPUT TYPE='text' NAME='max'>
<BR>
Incremento o Variacion 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>
  • Grabalo con el nombre Prog071.htm y ejecutalo.
  • Es interesante probarlo con valores relativamente grandes, por ejemplo: x1=1, x2=200, paso=1
Anterior: javascript y formularios