Evelb

Calculadora Javascript

Calculadora Javascript
Adriana
Desarrolladora Web
«Todo va a estar bien al final. Si no está bien, no es el final.»
Post más relevante: CSS3: Menú Desplegable con hover

Con la finalidad de empezar a profundizar en las diferentes opciones que nos aporta Javascript, en el tutorial de esta semana aplicaremos las operaciones aritméticas mediante la creación de una calculadora, la cual, va a sumar, restar, multiplicar, dividir y elevar a una potencia dada.

Creación del HTML

Empezaremos construyendo la estructura que va a seguir nuestra calculadora. Continuaremos aplicándole nuestro toque personal añadiéndole unos pocos estilos de CSS y finalmente haremos las operaciones para que nuestra calculadora tenga su completa funcionalidad.
Crearemos nuestra calculadora cómo si de una tabla se tratase, dado que la forma de una calculadora convencional se asemeja bastante a una tabla con sus respectivas celdas.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CALCULADORA</title>
</head>
<body>
    <table id="calculadora">
        <tr>
            <td colspan="4">
                <input type="text" id="valor_numero" maxlength="20" value="0" readonly="true">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="Button" id="potencia" value="exp" >
            </td>
            <td>
                <input type="Button" id="Dividir" value="/">
            </td>
            <td>
                <input type="Button" id="Multiplicar" value="x">
            </td>
        </tr>
        <tr>
            <td>
                <input type="Button" id="7" value="7">
            </td>
            <td>
                <input type="Button" id="8" value="8">
            </td>
            <td>
                <input type="Button" id="9" value="9">
            </td>
            <td>
                <input type="Button" id="Restar" value="-">
            </td>
        </tr>
        <tr>
            <td>
                <input type="Button" id="4" value="4">
            </td>
            <td>
                <input type="Button" id="5" value="5">
            </td>
            <td>
                <input type="Button" id="6" value="6">
            </td>
    	    <td>
    	        <input type="Button" id="Sumar" value="+">
    	    </td>
        </tr>
        <tr>
            <td>
                <input type="Button" id="1" value="1">
            </td>
            <td>
                <input type="Button" id="2" value="2">
            </td>
            <td>
                <input type="Button" id="3" value="3">
            </td>
            <td>
                <input type="Button" id="EsIgual" value="=">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="Button" id="0" value="0">
            </td>
	     <td>
                <input type="Button" id="," value=",">
            </td>
    	    <td>
    		<input type="Button" id="C" value="C">
    	    </td>
        </tr>
    </table>
</body>
</html>

Captura1

A simple vista y por los botones que hay se nota que es una calculadora; la podemos colocar bien con unas reglas de CSS para que parezca una calculadora real pero antes explicar algunos de los atributos usados durante la construcción de la tabla.

Realización de la tabla en HTML

Para hacer una tabla en HTML se van distribuyendo las filas y columnas dentro de la etiqueta table, a la cual también le añadimos un atributo identificador. Dentro de esta etiqueta vamos creando filas tr y dentro de estas, las columnas td.
En el td del primer input, la caja de texto en la que se van a ver los número se aplica el atributo colspan que lo que hace es solapar las 4 columnas en una sola de manera que esa celda ocupe todo el ancho de cuatro columnas. En el caso de las filas también se puede aplicar el atributo rowspan que hace lo mismo pero en filas en lugar de columnas, es decir, solapa las filas que se le pasen como valor en 1 sola.

El resto de atributos son de uso común que son los type para crear inputs de tipo botón, atributos identificadores y el valor que va a mostrar.
El atributo maxlength de la caja de texto te indica el número máximo de dígitos que puedes insertar y el readonly que es de solo escritura por lo que no se puede escribir con el teclado.

Estilos CSS

Una vez definidas las propiedades especificas de nuestra tabla procedamos a añadir clases y estilos para que parezca una calculadora más real.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CALCULADORA</title>
    <style type="text/css">
    	#calculadora {background: gray; border: 0;}
    	#calculadora td {padding: 4px;}
    	.cajita_valor {background-color: #acff38; color: #467702; border: 1px solid #454545; width: 130px; height: 26px; font-family: Arial, Helvetica; font-size: 20px; line-height: 26	px; text-align: right; }
    	.boton {width: 24px; border: 1px solid #000; font-family: Arial; font-size: 12px; cursor: hand; background-color: #fff;}
    	.boton_largo { width: 62px; border: 1px solid #000;  font-family: Arial; font-size: 12px; cursor: hand; background-color: #fff;}
    	.funcion {font-weight: bold; color: #b00;}
    </style>
</head>
<body>
    <table id="calculadora">
        <tr>
            <td colspan="4">
                <input type="text" id="valor_numero" maxlength="20" value="0" class="cajita_valor" readonly="true">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="Button" id="potencia" value="exp" class="boton_largo funcion" >
            </td>
            <td>
                <input type="Button" id="Dividir" value="/" class="boton funcion">
            </td>
            <td>
                <input type="Button" id="Multiplicar" value="x" class="boton funcion">
            </td>
        </tr>
        <tr>
            <td>
                <input type="Button" id="7" value="7" class="boton">
            </td>
            <td>
                <input type="Button" id="8" value="8" class="boton">
            </td>
            <td>
                <input type="Button" id="9" value="9" class="boton">
            </td>
            <td>
                <input type="Button" id="Restar" value="-" class="boton funcion>
            </td>
        </tr>
        <tr>
            <td>
                <input type="Button" id="4" value="4" class="boton">
            </td>
            <td>
                <input type="Button" id="5" value="5" class="boton">
            </td>
            <td>
                <input type="Button" id="6" value="6" class="boton">
            </td>
    	    <td>
    		<input type="Button" id="Sumar" value="+" class="boton funcion>
    	    </td>
        </tr>
        <tr>
            <td>
                <input type="Button" id="1" value="1" class="boton">
            </td>
            <td>
                <input type="Button" id="2" value="2" class="boton">
            </td>
            <td>
                <input type="Button" id="3" value="3" class="boton">
            </td>
            <td>
                <input type="Button" id="igual" value="=" class="boton funcion>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="Button" id="0" value="0" class="boton_largo">
            </td>
	    <td>
                <input type="Button" id="," value="," class="boton">
            </td>
    	    <td>
    		<input type="Button" id="C" value="C" class="boton funcion">
    	    </td>
        </tr>
    </table>
</body>
</html>

Captura2

Con estos estilos que hemos dado a las clases ya tiene la apariencia de una calculadora convencional.
Entre los estilos que hemos aplicado los más destacados son los colores y los fondos.
En segundo lugar, bordes, anchos de celda, fuentes y tamaños, etc. Todo esto es aplicado a nuestro gusto personal ya que no influye en la funcionalidad que vamos a crear ahora mediante Javascript.

Operaciones Javascript

Vamos a distribuir las operaciones aritméticas en distintas funciones para que se ejecuten en función de la operación que se quiera realizar recogiendo los valores que nosotros le pasemos.
Para ello, como dije antes, usaremos Javascript por lo que lo principal es crear dicha etiqueta script.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CALCULADORA</title>
    <style type="text/css">
    	#calculadora {background: gray; border: 0;}
    	#calculadora td {padding: 4px;}
    	.cajita_valor {background-color: #acff38; color: #467702; border: 1px solid #454545; width: 130px; height: 26px; font-family: Arial, Helvetica; font-size: 20px; line-height: 26	px; text-align: right; }
    	.boton {width: 24px; border: 1px solid #000; font-family: Arial; font-size: 12px; cursor: hand; background-color: #fff;}
    	.boton_largo { width: 62px; border: 1px solid #000;  font-family: Arial; font-size: 12px; cursor: hand; background-color: #fff;}
    	.funcion {font-weight: bold; color: #b00;}
    </style>
    <script>
            //Declaracion de variables
	        var num1 = 0;
	        var num2 = 0;
	        var opera;

        //Función que coloca el número presionado
        function darNumero(numero){
            if(num1==0 && num1 !== '0.'){
                num1 = numero;
            }else{
                num1 += numero;
            }
            refrescar();
        }

        //Función que coloca la coma al presionar dicho botón
        function darComa(){
            if(num1 == 0) {
                num1 = '0.';
            } else if(num1.indexOf('.') == -1) {
                num1 += '.';
            }
            refrescar();
        }

        //Función que coloca la C al presionar dicho botón
        function darC(){
            num1 = 0;
            num2 = 0;
            refrescar();
        }


        //Esta función realiza las distintas operaciones aritméticas en función del botón pulsado
        function operar(valor){
            if (num1 == 0){
                num1 = parseFloat(document.getElementById("valor_numero").value);
            }
            num2 = parseFloat(num1);
            num1= 0;
            opera = valor;
        }

        //Función para pulsar igual
            /*
        	suma = 1
        	resta = 2
        	multiplicacion = 3
        	division = 4
        	potencia = 5
        */

        function esIgual(){
            num1 = parseFloat(num1);
            switch (opera){
                case 1:
                    num1 += num2;
                break;
                case 2:
                    num1 = num2 - num1;
                break;
                case 3:
                    num1 *= num2;
                break;
                case 4:
                    num1 = num2 / num1;
                break;
                case 5:
                    num1 = Math.pow(num2, num1);
                break;
            }
            refrescar();
            num2 = parseFloat(num1);
            num1 = 0;
        }

        function refrescar(){
            document.getElementById("valor_numero").value = num1;
        }
    </script>
</head>
<body>
    <table id="calculadora">
        <tr>
            <td colspan="4">
                <input type="text" id="valor_numero" maxlength="20" value="0" class="cajita_valor" readonly="true">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="Button" id="potencia" value="exp" class="boton_largo funcion" onclick="operar(5)">
            </td>
            <td>
                <input type="Button" id="Dividir" value="/" class="boton funcion" onclick="operar(4)">
            </td>
            <td>
                <input type="Button" id="Multiplicar" value="x" class="boton funcion" onclick="operar(3)">
            </td>
        </tr>
        <tr>
            <td>
                <input type="Button" id="7" value="7" class="boton" onclick="darNumero('7')">
            </td>
            <td>
                <input type="Button" id="8" value="8" class="boton" onclick="darNumero('8')">
            </td>
            <td>
                <input type="Button" id="9" value="9" class="boton" onclick="darNumero('9')">
            </td>
            <td>
                <input type="Button" id="Restar" value="-" class="boton funcion>
            </td>
        </tr>
        <tr>
            <td>
                <input type="Button" id="4" value="4" class="boton" onclick="darNumero('4')">
            </td>
            <td>
                <input type="Button" id="5" value="5" class="boton" onclick="darNumero('5')">
            </td>
            <td>
                <input type="Button" id="6" value="6" class="boton" onclick="darNumero('6')">
            </td>
    		<td>
    			<input type="Button" id="Sumar" value="+" class="boton funcion" onclick="operar(1)">
    		</td>
        </tr>
        <tr>
            <td>
                <input type="Button" id="1" value="1" class="boton" onclick="darNumero('1')">
            </td>
            <td>
                <input type="Button" id="2" value="2" class="boton" onclick="darNumero('2')">
            </td>
            <td>
                <input type="Button" id="3" value="3" class="boton" onclick="darNumero('3')">
            </td>
            <td>
                <input type="Button" id="igual" value="=" class="boton funcion" onclick="esIgual()">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="Button" id="0" value="0" class="boton_largo" onclick="darNumero('0')">
            </td>
	    <td>
                <input type="Button" id="," value="," class="boton" onclick="darComa()">
            </td>
    	    <td>
    		<input type="Button" id="C" value="C" class="boton funcion" onclick="darC()">
    	    </td>
        </tr>
    </table>
</body>
</html>

Primero de todo hay que declarar 3 variables con las que vamos a trabajar que son dos números (num1 y num2) y una para realizar las operaciones (opera).

Para explicar el funcionamiento de las funciones que creamos empezaremos por el momento en el que se llama a dichas funciones que es en el método onclick del elemento pulsado.
Como se puede observar, algunas funciones llevan un parámetro asignado (lo que va entre paréntesis) como es el caso de los botones de los números. Esto quiere decir que, cuando se pulse, esa función va a trabajar con ese número, que en este caso, es colocarlo en la caja de texto.

darNumero(numero)
Ahora procedamos a la traducción a pseudocódigo del código que lleva esa función.
Básicamente lo que hace es comprobar los valores de la variable que hemos creado y en función del valor que esta haya obtenido de anteriores operaciones (es global, es decir, se puede usar en todo el documento) hacer una cosa u otra.
En caso de que el valor de la variable sea 0 o no sea 0 decimal, automáticamente la variable coge el valor que hemos introducido y en caso de que ninguna de estas 2 condiciones se cumpla, se le suma al valor total de la variable.

darComa()
La siguiente función con la que nos encontramos es la de poner la coma, que hace la comprobación para que solo los números positivos y 0 puedan ser decimales, descartando los número negativos decimales, los cual significa qué, si tenemos como resultado un número negativo y le queremos añadir decimales, se colocará directamente un 0.

darC()
La función que sigue es muy simple, lo que hace es lo que hace la C de cualquier calculadora, borrar todos los resultados, es decir, poner las variables a 0.

operar(valor)
La siguiente a esta, es la de hacer las operaciones, la cual va almacenando en las variables los distintos valores que hemos introducido, así como la operación que hemos seleccionado para que en el momento de pulsar igual nos de el resultado correcto.
En este caso el valor que se le pasa como parámetro es un número que tiene asignado cada operación y, siendo así, el 1 indica que se trata de una suma, el 2 de una resta, el 3 de una multiplicación, el 4 de una división y el 5 de una potencia.

esIgual()
La última función que queda por explicar es la de cuando se pulsa el igual que procesa los números y la operación pulsada para sacar un resultado en la cual aplicamos un switch que lo que hace es que en función del valor de la operación que le hemos indicado tome un camino u otro y así realice la operación pertinente.
Math.pow lo que hace es elevar un número al otro. El primero que introducimos al segundo introducido.
Y hay que mencionar otra función que es la de parseFloat que hace que nuestros números puedan contener decimales y no solo enteros, de no usar esta función y realizar operaciones con decimales cuando saquemos el resultado va a omitir la parte decimal.

refrescar()
Y por último la función refrescar que lo que hace es que se vaya cambiando el número de la caja de texto en función del número que pulsemos para ver si hemos pulsado el correcto.

SUMA:

suma

RESTA:

resta

MULTIPLICACIÓN:

multiplicacion

DIVISIÓN:
division

DECIMALES:
decimales

Si quieres ver la calculadora en funcionamiento, sigue este enlace.
Eso es todo, espero que os haya gustado y nos vemos en el próximo tutorial.

2 opiniones sobre “Calculadora Javascript

  1. Hola.
    Hola. Gracias por el código. Sólo indicarte que esta línea está incompleta:

    sería:
    <input type="Button" id="Sumar" value="+" class="boton funcion" onclick="operar(2)"

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *