FORO
CONTACTO
anterior siguiente
JAVASCRIPT: CALCULADORA

 

Vamos a realziar un ejercicio completo: La calculadora.

Primero, realizar el diseño HTML de la calculadora. Este consta de un formulario, que contiene una tabla:

<FORM ...>
<TABLE ...>
...
</TABLE>
</FORM>

En las celdas de dicha tabla se insertan los distintos elementos del formulario.La pantalla donde se muestra e formulario es un INPUT de tipo TEXT. El boton de CE (resetea la calculadora) es un BOTON de tipo RESET. El resto son imagenes normales.
La calculadora deberá tener un aspecto tal que así:
Hay cosas que no se ven. En alguna parte del formulario (donde querais), hay un input de texto oculto. Este sería el código HTML que lo inserta:
<input type="hidden" name="nuevo" value="">
Observar que los elementos del formulario deben tener nombres (el anterior input se llama nuevo). Por poner un acuerdo para todos llamaremos:
-Al formulario calcu
-
Al display de la calculadora res
-
Al boton CE limpiar
- Como ya hemos dicho al input oculto nuevo
el formulario en sí no realiza ninguna acción.

 


¿Qué ocurre cuendo se pulsa alguno de los botones de la calculadora?
Los botones son enlaces, que no llevan a ninguna página, sino que ejecutan una función JavaScript. Por ejemplo, el botón del 7 es:
<a href="javascript:pon('7');"><img src="t7.jpg" width="50" height="50" border=0></a>

La función pon(s) recibe como parámetro (s) una cadena de texto cualquiera (por eso el siete va entrecomillado. Cuando se pincha en el botón del siete, se ejecuta la función pon('7').

¿Cómo es la función pon(s)?
La función pon se define entre el HEAD y el BODY:
function pon(s)
{
document.calcu.nuevo.value=document.calcu.nuevo.value+s;
document.calcu.res.value=document.calcu.nuevo.value;
}
El objeto document es la página actual. calcu es el formulario. nuevo es el input oculto. y value es su contenido. Con ello podemos deducir que la primera linea de la función lo que hace es añadir la cadena s (parámetro) dentro de ese input (esto no produce ningún resultado visible.
document.calcu.res.value es el contenido de el input display de la calculadora. Ponemos ese contenido igual al contenido del input oculto.

Si a cada botón de la calculadora llamamos a la función pon con el carácter correspondiente, sobre la calculadora se irá construyendo la operación a realizar,

¿Y el resultado?
El botoón de igual es un botón especial. Llama a otra función:
<a href="javascript:calcular();"><img src="tigual.jpg" width="50" height="50" border=0></a>
La función calcular está definida junto a la función pon(s) y tiene el siguiente código:
function calcular()
{
document.calcu.res.value=eval(document.calcu.nuevo.value);
document.calcu.nuevo.value="";
}
Primeramente cambia el contenido del display de la calculadora al resultado de EVALuar el contenido del input oculto (que contiene la operación completa). Por lo tanto, aparecerá el resultado de la operación (si esta es matemáticamente correcta).
La siguiente linea, limpia el contenido del input oculto paa que esté listo para recibir una nueva operación.

Autor: Javier Marco

anterior siguiente
 

Novedades

Realidad Virtual
Quest 3D
Modelado 3D
Iluminación Giles
Conway's Game of Life

Stereoscopía
Foto 3D

Internet
HTML
Dreamweaver
JavaScript
ASP

 

 
Hagaloustedmismo
Contacte en : hagaloustedmismo@wanadoo.es
Phohibida toda reproducción total o parcial sin permiso del autor