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 VI

Botones especiales

Introducción

Los botones especiales son esos botones que tiene la calculadora para manejar su propio funcionamiento. Facilitan la tarea de escribir o reescribir los números y de reiniciarla.

Aquí hemos puesto tres botones que son los que suelen tener todas las calculadoras: el de retroceso, el de borrado parcial y el del borrado total.

Vemos a continuación para qué sirven estos botones y cómo hacerlos funcionar en la calculadora mediante el código javascript.


El botón de retroceso

El botón de retroceso permite borrar el último número o coma decimal escrito en la pantalla, de manera que podamos corregir el número mientras lo estamos escribiendo si pulsamos un botón equivocado.

En el botón correspondiente habíamos puesto el atributo onclick="retro()" por lo que ésta será la función que tengamos que crear.

Como lo que estamos escribiendo en pantalla se guarda como cadena de texto, utilizaremos las propiedades y funciones de las cadenas para cambiar la pantalla, veamos cual es el código utilizado para esta función, y después lo comentamos.


function retro(){ //Borrar sólo el último número escrito.
         cifras=x.length; //hayar número de caracteres en pantalla
         br=x.substr(cifras-1,cifras) //info del último caracter
         x=x.substr(0,cifras-1) //quitar el ultimo caracter
         if (x=="") {x="0";} //si ya no quedan caracteres, pondremos el 0
         if (br==".") {coma=0;} //Si hemos quitado la coma, se permite escribirla de nuevo.
         pantalla.innerHTML=x; //mostrar resultado en pantalla	 
         }

Aunque el código va comentado vamos a explicarlo con detalle.

Este código nos permite modificar el número que estamos escribiendo, sin embargo no permite modificar el número que se nos muestra tras el resultado de una operación, ya que éste ya no es una cadena de texto sino un número.


Borrado parcial

El botón de borrado parcial (CE) elimina el último número escrito y pone la pantalla a 0, sin embargo se conserva la operación que tengamos pendiente. Por ejemplo, en la siguiente secuencia de pulsar botones "3 + 2 CE 4 =", el resultado es 7, ya que borramos el 2, y lo sustituimos por el 4, conservando el 3 y el + .

En el código javascript pondremos para este botón una función aparte, ya que en el código HTML del botón le hemos puesto el atributo onclick= "borradoParcial()". Llamaremos pues, así a la función correspondiente.

La fuunción que debemos crear es sencilla, ya que lo único que debemos hacer es reiniciar las variables necesarias, y poner la pantalla a 0. Esta es la función:


function borradoParcial() {
        pantalla.innerHTML=0; //Borrado de pantalla;
        x=0; //Borrado indicador número pantalla.
        coma=0; //reiniciamos también la coma					
        }

Como ves en esta función sólo reiniciamos la pantalla, y número donde guardamos su valor. Por si hubiéramos escrito alguna coma decimal, volvemos a dar la posibilidad de escribirla. El resto de variables quedan tal como estaban antes de borrar el número.


Borrado total

Este botón (C) es parecido al anterior, pero aquí además de borrar el número en pantalla borramos también todo lo demás, es decir reiniciamos la calculadora, y eliminamos operaciones pendientes, y números en espera.

En el código HTML del botón ya habíamos puesto el atributo onclick= "borradoTotal()" que nos indica cómo deberá llamarse la función que ejecute el borrado total.

Como ya hemos dicho la función consiste en reiniciar todas las variables que controlan el estado de la calculadora. Crearemos pues la siguiente función:


function borradoTotal() {
         pantalla.innerHTML=0; //poner pantalla a 0
         x="0"; //reiniciar número en pantalla
         coma=0; //reiniciar estado coma decimal 
         ni=0 //indicador de número oculto a 0;
         op="no" //borrar operación en curso.
         }

Como puedes ver la función pone las variables al estado inicial y la pantalla a 0, de forma que reiniciamos la calculadora, dejandola en el mismo estado que cuando abrimos la página.

Mediante el código empleado hasta este momento, la calculadora ya funciona con todos sus botones. puedes ver como queda y comprobarlo en el siguiente enlace:

Calculadora acabada.


El código javascript empleado hasta el momento puedes verlo en el siguiente enlace:

Codigo de la calculadora hasta página VI






La calculadora ya funciona perfectamente, sin embargo hemos dicho en el plantemiento, que ésta debe poder usarse también utilizando las teclas del teclado, y eso es lo que veremos en la siguiente página.

Uso del teclado.



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