Tutorial HTML-CSS-JAVASCRIPT
appsRegnare.com

Episodio 8 - Ejemplo de calculadora en Javascript

Finalizamos el tutorial con un ejemplo de una calculadora en javascript. Se han visto en este tutorial distintos ejemplos con estilos Css para ir comprendiendo con ejemplos sencillos su aplicación práctica. Lo importante al aprender es tener una base que permita ir progresando. En este ejemplo el código es un poco más complejo por lo que hay varios comentarios en el mismo.

Ejemplo de calculadora


    <!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mi página</title>

        <style>
            #table_calc {
                clear: both;
                margin: auto;
            }
            #table_calc td {
                border: 1px solid #bdbdbd;
                padding: 12px 17px;
                text-align: center;
                color: #333;
                background-color: #e0e0e0;
                box-shadow: 0px 0px 4px 4px #eee inset;
                cursor: pointer;
                user-select: none;
            }
            #table_calc .display_calc {
                background-color: #fff;
                text-align: right;
                box-shadow: 0px 0px 4px 4px #f5f5f5 inset;
                font-family: 'Times New Roman', Times, serif;
            }
        </style>

        <script>
            var op1 = '';
            var op2 = '';
            var operacion = '';

            window.addEventListener('keyup', capturar_ev, false);

            function capturar_ev(ev)
            {
                if (ev.key.match(/[0-9]/))  //dígitos del 0 al 9: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
                {
                    input_num(ev.key)
                }
                else if (ev.key == '.')
                {
                    input_num('.');
                }
                else if (ev.key.match(/[\/\*+-]/))  //los operadores: + - * / (la barra invertida es caracter de escape en expresiones regulares)
                {
                    input_op(ev.key);
                }
                else if (ev.key == '=' || ev.keyCode == 13)  //keyCode == 13 es Enter
                {
                    mostrar_resultado();
                }
                else if (ev.keyCode == 27)  //keyCode == 27 es ESC
                {
                    clear_display();
                }
            }

            function input_num(num)
            {
                var display = document.getElementById("display");
                
                if (display.innerText != '0') //se ha ingresado algún caracter
                {
                    // verificamos si ya hay algún operador descartando un posible valor negativo del primer operando
                    if (!display.innerText.substring(1).match(/[\/\*+-]/g))
                    {
                        // un solo punto decimal
                        if (op1.indexOf('.') != -1 && num === '.')
                            return false;
                        
                        if (op1.length>8)
                        {
                            alert("Hasta 9 dígitos");
                            return false;
                        }
                        
                        op1 += num;
                    }
                    else
                    {
                        // un solo punto decimal
                        if (op2.indexOf('.') != -1 && num === '.')
                            return false;
                        
                        if (op2.length>8)
                        {
                            alert("Hasta 9 dígitos");
                            return false;
                        }
                        
                        op2 += num;
                    }

                    display.innerText += num;
                }
                else
                {
                    display.innerText = num;
                    op1 = num;
                }

            }

            function input_op(op)
            {
                var display = document.getElementById("display");
                
                if (display.innerText != '0')
                {
                    //si el último dígito ingresado es un operador lo reemplazamos por un nuevo operador
                    if (display.innerText.substring(display.innerText.length-1, display.innerText.length).match(/[\/\*+-]/g))
                    {
                        display.innerText = display.innerText.substring(0, display.innerText.length-1)+op;
                    }
                    else if (!display.innerText.substring(1).match(/[\/\*+-]/g)) // verificamos si ya hay algún operador descartando un posible valor negativo del primer operando (el primer operando puede ser negativo como resultado de una operacion previa)
                    {
                        if (display.innerText != '.')
                        {
                            if (display.innerText.length > 9) //el resultado de una operación anterior es de más de 9 caracteres
                            {
                                clear_display();
                                return false;
                            }
                            else  // seguimos operando
                                display.innerText += op;
                        }
                        else
                            return false;
                    }
                    else // hay un operador previo: realizamos la operación, usamos el resultado como primer operando y agregamos el nuevo signo de operación
                    {
                        operar();
                        display.innerText += op;
                    }

                    operacion = op;
                }
            }

            function operar()
            {
                if (operacion === '/')
                {
                    op1 = parseFloat(op1) / parseFloat(op2) + '';  //parseFloat: convertimos el string en valor decimal
                }
                else if (operacion === '*')
                {
                    op1 = parseFloat(op1) * parseFloat(op2) + '';
                }
                else if (operacion === '+')
                {
                    op1 = parseFloat(op1) + parseFloat(op2) + '';
                }
                else
                {
                    op1 = parseFloat(op1) - parseFloat(op2) + '';
                }

                op2 = '';

                if (op1.length > 19)
                    op1 = op1.substring(0, 19);  //el ancho del elemento aprox. (quitamos el resto de los caracteres si los hubiera)

                display.innerText = op1;
            }

            function mostrar_resultado()
            {
                if (op1 != '' && op2 != '')
                {
                    operar();
                }
            }

            function clear_display()
            {
                op1 = '';
                op2 = '';
                document.getElementById("display").innerText = 0;
            }
        </script>

    </head>
    <body>

    <h2 style="text-align: center; font-family: Helvetica;">Ejemplo de calculadora</h2>

    <div>
        <table id="table_calc">
            <tbody>
                <tr>
                    <td colspan="4" id="display" class="display_calc">0</td>
                </tr>
                <tr>
                    <td onclick="input_num('7')">7</td>
                    <td onclick="input_num('8')">8</td>
                    <td onclick="input_num('9')">9</td>
                    <td style="font-size: 10px;" onclick="clear_display()">DEL</td>
                </tr>
                <tr>
                    <td onclick="input_num('4')">4</td>
                    <td onclick="input_num('5')">5</td>
                    <td onclick="input_num('6')">6</td>
                    <td onclick="input_op('/')">/</td>
                </tr>
                <tr>
                    <td onclick="input_num('1')">1</td>
                    <td onclick="input_num('2')">2</td>
                    <td onclick="input_num('3')">3</td>
                    <td onclick="input_op('*')">*</td>
                </tr>
                <tr>
                    <td colspan="2" onclick="input_num('0')">0</td>
                    <td onclick="input_num('.')">.</td>
                    <td onclick="input_op('+')">+</td>
                </tr>
                <tr>
                    <td colspan="3" onclick="mostrar_resultado()">=</td>
                    <td onclick="input_op('-')">-</td>
                </tr>
            </tbody>
        </table>
    </div>
    

    </body>
    </html>

En cuanto al código: el método substring() permite extraer caracteres de un string, entre dos índices, comenzando desde la posición o índice que recibe como primer parámetro hasta la posición o índice que recibe como segundo parámetro. Si se le pasa un solo parámetro nos devolverá el substring obtenido desde la posición o índice que le pasemos hasta el final.

La propiedad length aplicada a un texto o string devuelve el número de caracteres del mismo.

En capítulos anteriores vimos el método parseInt(), en este caso utilizamos parseFloat(), que nos permitirá usar números decimales.

El método indexOf() aplicado a un string devuleve la posición la primera coincidencia del valor a buscar o -1 si el valor no es encontrado.

El ejemplo anterior se ve de la sigiente manera:

0
7 8 9 DEL
4 5 6 /
1 2 3 *
0 . +
= -


← Anterior