index.htm

RECETAS DE NAVIDAD

- apuntes comunicaciones javascript lenguaje c php autoayuda bolsa chistes empleo fotografia digital ocio sabiasque salud timos trucos

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 paso:
javascript y formularios

· Introduccion a javascript
· Javascript: sintaxis basica
· Variables en javascript
· Javascript: tipos de datos
· Javascript: contadores
· javascript: conversion entre tipos
· Operadores logicos y relacionales en javascript
· If else en javascript
· While en javascript
· Bucles for en javascript
· Switch case javascript
· Do while en javascript
· Calculos iterativos en javascript
· El objeto math javascript
· Variable temporal en javascript
· Funciones sin retorno de parametro. Javascript
· Funciones que devuelven parametros en javascript
· Arrays en javascript
· Matrices con varias dimensiones en javascript
· Codigo ascii/unicode y javascript
· Buscar una letra en un string con javascript
· Temporizadores en javascript
· Introduccion a javascript y html
· Escribiendo en el navegador con javascript
· Formularios en javascript
· Botones en javascript

IMPORTANTE:

- Si te ha gustado esta pagina, por favor, votanos aqui:

- Si no te ha gustado, escribenos y cuentanos en que mejorar.

Actualizado: 16/12/2013