Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Prácticas Javascript

Ejercicios de prácticas para crear elementos interactivos con javascript


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





logo 

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Calculadora II

Planificación del script

Planteamiento general

En la página anterior hemos creado la estructura estática, es decir la apariencia que tiene la calculadora en pantalla. ahora necesitamos hacerla funcionar.

Antes de meternos a utilizar el código javascript para hacer funcionar la calculadora, debemos fijarnos en cómo funciona una calculadora de bolsillo, para "copiar" su forma de trabajar.

Una vez que sepamos los detalles de cómo funciona una calculadora, aplicaremos este sistema de funcionamiento a nuestro script.


Funcionamiento de una calculadora

Cogemos una calculadora normal, (si no tienes otra la del S.O. windows te puede servir), ya sea real o virtual, y nos fijamos en como funciona. Nosotros debemos hacer que nuestro script funcione de la misma manera. observamos lo siguiente:

En principio observamos que hay diferentes tipos de teclas en función de su comportamiento.

Vemos que las distintas teclas o grupos de teclas hacen varias funciones diferentes. veamos cómo se traduce eso en el código.


Planteamiento de la programación

Dependiendo de los distintos grupos de teclas y su comportamiento crearemos las distintas funciones que compondrán nuestro script. Veamos cuales son esas funciones asociadas a las teclas:

Estas son las funciones que nos van a permitir interactuar con las teclas para hacer funcionar la calculadora. Debemos ahora desarrollar el código que tendrá cada una de ellas.

Como ya sabemos los nombres de las funciones, vamos a poner en el código HTML los diferentes atributos onclick que harán que se activen las funciones. Modificamos el código HTML y nos quedará de la siguiente manera:


<div class="calculadora"
<form action="#" name="calculadora" id="calculadora">
<p id="textoPantalla">0</p>
<p>
<input type="button" class="largo" value="Retr" onclick="retro()"   />
<input type="button" class="largo" value="CE" onclick="borradoParcial()"  />
<input type="button" class="largo" value="C" onclick="borradoTotal()"  />
</p>
<p>
<input type="button" value="7" onclick="numero(7)" />
<input type="button" value="8" onclick="numero('8')" />
<input type="button" value="9" onclick="numero('9')" />
<input type="button" value="/" onclick="operar('/')"  />
<input type="button" value="Raiz" onclick="raizc()" />
</p>
<p>
<input type="button" value="4" onclick="numero('4')" />
<input type="button" value="5" onclick="numero('5')" />
<input type="button" value="6" onclick="numero('6')" />
<input type="button" value="*" onclick="operar('*')" />
<input type="button" value="%" onclick="porcent()" />
</p>
<p>
<input type="button" value="1" onclick="numero('1')" />
<input type="button" value="2" onclick="numero('2')" />
<input type="button" value="3" onclick="numero('3')" />
<input type="button" value="-" onclick="operar('-')" />
<input type="button" value="1/x" onclick="inve()" />
</p>
<p>
<input type="button" value="0" onclick="numero('0')" />
<input type="button" value="+/-" onclick="opuest()" />
<input type="button" value="." onclick="numero('.')" />
<input type="button" value="+" onclick="operar('+')" />
<input type="button" value="=" onclick="igualar()" />
</p>
</form>
</div>

En el código se hace un llamamiento a las distintas funciones que se activarán al pulsar con el ratón las diferentes teclas de la calculadora. Si examinas el código verás que cada tecla tiene asignada la función que le corresponde, y con el argumento que le corresponde en caso de que éste haga falta.

La calculadora debe funcionar también con las teclas del teclado, para ello crearemos también una función que recoja el valor de las teclas pulsadas, y envíe el resultado a las funciones adecuadas.





En la siguiente página empezaremos a hacer funcionar la calculadora, de momento mostrando las cifras en pantalla.

Mostrar números.



Calculadora con javascript

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com