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 IV

Operaciones con dos números.

Planteamiento.

El siguiente paso en el desarrollo de nuestra calculadora es que ésta pueda hacer operaciones. Empezaremos con las operaciones con dos números. Estas vienen marcadas por los botones con los signos + - * / .

El funcionamiento de cualquier calculadora para ejecutar estas operaciones es en principio el siguiente:

Traslademos esto a código javascript: en primer lugar, al pulsar la tecla de operación debemos guardar tanto el número de pantalla (primer número) como el tipo de operación.

escribimos después el segundo número, y pulsamos después el signo igual.

Al pulsar el signo igual hacemos la operación: "primer número" - "operacion indicada" - "segundo número".

El probrema de cómo escribir un número en la pantalla y tenerlo disponible ya lo solucionamos en la página anterior, por lo que ahora vamos a ver cómo solucionar los demás problemas.


Variables necesarias

En la página anterior creamos una variable x; que recogía el número que teníamos en pantalla, sin embargo necesitaremos dos variables más, una que recoja el primer número mientras escribimos el segundo, y otra que recoja el tipo de operación. Recordemos que al principio del script, después de la función window.onload habíamos inicializado unas variables. Ahora, después de esas variables escribiremos las variables ni=0 y op="no". La primera de estas variables nos servirá para guardar el primer número de la operación o "número en espera". La segunda nos indicará si una operación pendiente; el valor "no" indica que no tenemos operacion pendiente de realizar.

El principio del código javascript quedará ahora de la siguiente manera:


window.onload = function(){ //Acciones tras cargar la página
pantalla=document.getElementById("textoPantalla"); //elemento pantalla de salida
document.onkeydown = teclado; //función teclado disponible
}
x="0"; //número en pantalla
xi=1; //iniciar número en pantalla: 1=si; 0=no;
coma=0; //estado coma decimal 0=no, 1=si;
ni=0; //número oculto o en espera.
op="no"; //operación en curso; "no" =  sin operación.

En color azul van destacadas las dos nuevas líneas que hemos puesto, y que incializan las variables.


Función operar(op)

Al pulsar los botones de operaciones éstos nos mándan a una función llamada operar(s). recordemos que en el código HTML de estos botones habíamos puesto atributos onclick de la siguiente manera:

<input type="button" value="+" onclick="operar('+')" />

Todos ellos llevan la función operar(), la cual lleva por argumento el signo de la operación. Creamos pues la función operar, en la cual guardaremos el primer número o "número en espera" (ni=1), después guardamos el tipo de operación (op=s, y después indicamos que al escribir la siguiente cifra en pantalla, ésta se inicialice xi=1.

el código de la función será el siguiente:


function operar(s) {
         ni=x //ponemos el 1 número en "numero en espera" para poder escribir el segundo.
         op=s; //guardamos tipo de operación.
         xi=1; //inicializar pantalla.
         }			 

Como inicializamos la pantalla podemos escribir un segundo número, tras escribir éste debemos tener guardado el primero y el signo de la operación. Por lo tanto al pulsar la tecla igual nos llevará a otra función que nos resolverá la operación.


funcion igualar()

En el botón del signo igual del código HTML habíamos puesto un atributo onclick="igualar()". Por lo tanto al pulsar esta tecla nos lleva a la función igualar()

Esta función comprobará primero si hay alguna operación pendiente, (variable op); si no es así dejará el número tal como está. y si hay alguna operación pendiente la resuelve y la muestra en pantalla.

Veamos el desarrollo de la función y luego la comentamos:


function igualar() {
         if (op=="no") { //no hay ninguna operación pendiente.
            pantalla.innerHTML=x;	//mostramos el mismo número	
            }
         else { //con operación pendiente resolvemos
            sl=ni+op+x; // escribimos la operación en una cadena
            sol=eval(sl) //convertimos la cadena a código y resolvemos
            pantalla.innerHTML=sol //mostramos la solución
            x=sol; //guardamos la solución
            op="no"; //ya no hay operaciones pendientes
            xi=1; //se puede reiniciar la pantalla.
            }
        }

Aunque el código ya viene comentado, vamos a hacer algunas observaciones:

Añadimos estos códigos al script de la calculadora, y comprobamos su funcionamiento. Podemos ver cómo ha quedado la calculadora en el siguiente enlace:

Operaciones I


Vemos que nuestra calculadora empieza a funcionar, sin embargo aún nos queda bastante trabajo para acabarla.


Operaciones encadenadas

Uno de los detalles de las calculadoras normales, es que no sólo resuelven las operaciones cuando se pulsa la tecla igual, sino que si hay operaciones pendientes, también se resuelven al apretar cualquiera de las teclas de operaciones, permitiendo de ese modo encadenar operaciones.

Por ejemplo, si pulsamos en este orden los botones "5 + 3 * 2 =" al pulsar el botón "*" nos resuelve la operación anterior, y el resultado se convierte en el primer número de la operación en curso.

Por lo tanto los botones de operaciones, aparte de hacer la función que les hemos puesto, deberían hacer la misma función que el botón de igual. Para conseguir ésto modificamos la función operar(s), de manera que al principio de la misma hacemos una llamada a la función igualar(). De esta manera, al pulsar un botón de operación lo primero que hace es resolver la operación pendiente en caso de que la haya. Modificamos el código de la función operar(s), el cual quedará así:


function operar(s) {
         igualar(); //si hay operaciones pendientes se realizan primero
         ni=x; //ponemos el 1 número en "numero en espera" para poder escribir el segundo.
         op=s; //guardamos tipo de operación.
         xi=1; //inicializar pantalla.
         }	

En azul está la nueva línea que hemos añadido. Puedes comprobar cómo funciona la calculadora en el siguiente enlace:

Operaciones II


Por si te has perdido algún paso o tienes alguna dificultad, en el siguiente enlace se muestra el código javascript empleado hasta ahora.

Código js hasta el momento.






En la siguiente página veremos cómo se resuelven las operaciones con un sólo número.

Operaciones con un número.



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