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 III

Mostrar números

Opciones que tenemos

Al pulsar una tecla de cifra o la tecla de coma decimal podemos estar ante dos casos diferentes:


Elementos iniciales

Sin embargo lo primero que debemos hacer es tener localizado en el DOM el div de la pantalla para poder escribir en ella. Esto lo haremos mediante el siguiente código javascript:


window.onload = function(){ //Acciones tras cargar la página
pantalla=document.getElementById("textoPantalla"); //elemento pantalla de salida
}

Como puedes observar el código está comentado para una mayor comprensión.

A continuación definiremos las variables que necesitaremos para controlar la pantalla:


window.onload = function(){ //Acciones tras cargar la página
pantalla=document.getElementById("textoPantalla"); //elemento pantalla de salida
}
x="0"; //guardar número en pantalla
xi=1; //iniciar número en pantalla: 1=si; 0=no;
coma=0; //estado coma decimal 0=no, 1=si;

En azul hemos destacado el nuevo código que hemos añadido. Inicializamos las siguientes variables las cuales tienen el siguiente significado:


Función para visualizar número

Y ahora veamos la función que controla la escritura en pantalla: empezaremos por distinguir mediante una condicional if si escribimos estamos empezando un nuevo número o estamos ampliando uno ya empezado. Veamos el código y luego lo comentamos:


function numero(xx) {  //recoge el número pulsado en el argumento.
         if (x=="0" || xi==1  ) {  // inicializar un número, 
            pantalla.innerHTML=xx; //mostrar en pantalla
            x=xx; //guardar número;
            }
         else { //continuar un número
            pantalla.innerHTML+=xx; //añadimos y mostramos en pantalla.
            x+=xx; //añadimos y guardamos
            }
         xi=0 //el número está iniciado y podemos ampliarlo.
         }			 

La función consiste en una condicional en la que comprobamos si tenemos que inicializar el número, las condiciones son, que en pantalla haya escrito un 0, o que le hayamos dado la orden el alguna otra parte del script mediante la variable xi=1; si se cumplen se escribe un número nuevo, si no es así añadimos la cifra a la/s que ya teníamos.

La variable x; se modifica de la misma manera que el número de pantalla, de manera que tenga el mismo valor que el número mostrado.

Por último modificamos la variable: xi=0; para poder seguir escribiendo cifras en el mismo número.

Observa que tanto el número de pantalla como la variable x son cadenas de texto, ya que de otro modo en lugar de añadirse el número, éste se sumaría al anterior, con lo que no nos daría el resultado deseado.

Una vez que hemos escrito este código a continuación del que ya teníamos, comprobamos en el navegador el resultado, el cual podemos verlo en el siguiente enlace:

Mostrar número I


Abrimos el enlace y probamos a calculadora. Despúes de unas pruebas nos damos cuenta de algunos fallos. En primer lugar no podemos borrar el número escrito a no ser que reiniciemos la página. Esto no es problema ya que aún tenemos que crear las funciones de las teclas de borrado total y parcial, con las cuales solucionaremos el problema.

El problema que debemos solucionar ahora es el de la coma decimal. ya que podemos escribir varias veces la coma en la pantalla, con lo que lo escrito ya no es interpretado como un número y no podremos luego operar con él.


La coma decimal

Modificaremos la función, de forma que hacemos una distinción en cada uno de los casos anteriores entre las teclas de cifras normales y la tecla de la coma decimal, de manera que impediremos que la coma decimal pueda ser escrita más de una vez dentro de un número.

Por otro lado si inicializamos un número con una coma decimal, debemos mostrar un 0 antes de la coma, lo que no sucede en el código anterior.

Para saber si la coma está ya escrita o no en el número de pantalla, utilizaremos la variable coma.

Mostramos a continuación el código de la función tras modificarla, y después lo comentamos:


function numero(xx) { //recoge el número pulsado en el argumento.
         if (x=="0" || xi==1  ) { // inicializar un número, 
            pantalla.innerHTML=xx; //mostrar en pantalla
            x=xx; //guardar número
            if (xx==".") { //si escribimos una coma al principio del número
               pantalla.innerHTML="0."; //escribimos 0.
               x=xx; //guardar número
               coma=1; //cambiar estado de la coma
               }
           }
           else { //continuar escribiendo un número
               if (xx=="." && coma==0) { //si escribimos una coma decimal pr primera vez
                   pantalla.innerHTML+=xx;
                   x+=xx;
                   coma=1; //cambiar el estado de la coma  
               }
              //si intentamos escribir una segunda coma decimal no realiza ninguna acción.
               else if (xx=="." && coma==1) {} 
               //Resto de casos: escribir un número del 0 al 9: 	 
               else {
                   pantalla.innerHTML+=xx;
                   x+=xx
               }
            }
            xi=0 //el número está iniciado y podemos ampliarlo.
         }

Como ves el código se complica un poco dentro de cada apartado de la condicional que teníamos ponemos otras condicionales que nos distinguirán si la tecla o botón pulsado es una cifra o una coma decimal. El código está comentado para una mayor claridad de lo que vamos haciendo. no obstante vamos a ver su estructura:

Como en la función inicial tenemos dos grandes bloques, en el primero mostramos qué hacer si inicializamos el número. Al código que teníamos hemos añadido una condicional que indica qué hacer si lo que hemos escrito es una coma: en este caso modificamos el número en pantalla de manera que mostramos un cero delante de la coma, y luego indicamos que la coma ya está puesta (cambiar variable coma).

El segundo bloque muestra qué hacer si estamos escribiendo más cifras en el número. En primer lugar distinguimos si hemos puesto una coma, y no estaba escrita, en este caso escribimos la coma e indicamos que ya está escrita. El segundo caso es si escribimos una coma y ya hay una escrita; en este caso la función no hace nada. Y el tercer caso es el que ya teníamos, es decir escribir una cifra; en este caso se escribe la cifra.

En todos los casos anteriores modificamos también la variable x de la misma forma que cambia el contenido de la pantalla, de manera que guarde lo mismo que tenemos en pantalla.

Una vez que hemos cambiado el código de la función, comprobamos en el navegador el resultado, el cual podemos verlo en el siguiente enlace:

Mostrar número II






Hemos dado ya el primer paso, que es cómo escribir un número, en el siguiente paso veremos cómo operar con él y dar un resultado.

operaciones con dos 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