Calculadora jQuery

Desarrollo de una "sencilla" calculadora en jQuery:

En esta ocasión vamos a crear la misma calculadora que hemos hecho anteriormente usando javaScript pero esta vez utilizando la librería jQuery. Como en el ejercicio anterior la calculadora va a realizar las cuatro operaciones básicas de cualquier calculadora: suma, resta, multiplicación y división. También vamos a implementar un botón de resultado, un botón CE que permitirá reiniciar la calculadora para comenzar una operación nueva, y un botón "punto" para poder operar con cifras decimales.

Claves del código de la calculadora en jQuery:

Como siempre que utilizamos jQuery lo primero que tendremos que hacer es vincular los archivos .js necesarios dentro del <head> del archivo html correspondiente. En este caso vamos a enlazar dos archivos que se encuentran ubicados en una carpeta que se llama js dentro de nuestro proyecto. El archivo jquery.js guarda y permite implementar la librería jQuery, y el archivo calculator_jquery.js alberga las funciones que permitirán a la calculadora hacer las operaciones que queremos implementar.

como vincular el archivo fuente de jQuery y nuestro archivo calculator_jquery.js

Una vez que hemos creado y vinculado el archivo calculator_jquery.js vamos a comenzar a escribir dentro las funciones que darán vida a la calculadora. Dichas funciones van a ser las mismas que utiliza la calculadora que hemos desarrollado con javaScript en otro ejercicio realizado anteriormente, con una única diferencia, y es que jQuery va a utilizar una sintaxis propia a la hora de seleccionar los elementos de los documentos html y también a la hora de usar los mismos métodos que se emplean en javaScript.

Comenzaremos a escribir el código de la calculadora dentro de la función anómima $(function() {}); que va a permitir esperar a que todos los elementos del DOM estén disponibles para comenzar a ejecutar los scripts que contiene:

función anónima dentro de la cual escribiremos todo nuestro código jQuery

Vamos a recordar cual es la misión de cada una de las variables globales que van a utilizarse a lo largo del código para comprender cual es el funcionamiento de la calculadora. Dichas variables también coinciden con las variables globales que se utilizarón en el ejercicio realizado en javaScript:

variables globales del script de la calculadora

- var number_string = “”; Esta variable es un string vacío en el que se irán concatenando los diferentes números que introducirá el usuario antes de pulsar una de las teclas correspondiente a una de las cuatro operaciones disponibles. Para poder operar con los valores que almacenará esta variable en forma de string habrá que transformarlos en número, más concretamente en una cifra de tipo float que nos permita trabajar con decimales. Dicha transformación la llevaremos a cabo más adelante mediante el método parseFloat().

- var accumulate = 0; Esta variable nos permitirá realizar de manera seguida una cantidad indefinida de operaciones sin necesidad de pulsar el botón de resultado al final de cada una de ellas. Por lo tanto nos va a permitir almacenar el resultado de la última operación realizada o las cifras que se muestran en el display, para usarlos como primer operador de la operación presente. Tanto al cargar la calculadora como al reiniciarla, o al pulsar el botón de resultado, tendremos que adjudicarle el valor cero.

- var addition = false; Es una variable de tipo booleano que nos permitirá verificar si la última operación que se ha realizado es una suma. La inicializaremos a false para asegurarnos que cuando se inicie la calculadora no haya ninguna operación precedente definida.

- var subtraction = false; Gracias a esta variable booleana podremos verificar si la última operación realizada es una resta. La inicializaremos a false para evitar que la operación resta quede marcada como precedente cuando arranque la calculadora.

- var multiplication = false; Como en los dos casos anteriores se trata de una variable booleana que nos permitirá indicar si la operación precedente ha sido, en este caso, una multiplicación. La inicializaremos a false.

- var division = false; Es otra variable booleana que indicará si la operación precedente ha sido una división. Como las otras tres variables de este tipo la inicializaremos en false.

- var first_operation = true; Esta variable nos indicará si la operación que está en curso es la primera operación que hace el usuario, o si de lo contrario venimos de hacer una suma, una resta, una multiplicación o una división. Gracias a este valor booleano y a las variables var suma, var resta, var multiplicación y var multiplicación podremos calcular el resultado de la última operación realizada y almacenarlo en la variable accumulate para poder llevar a cabo la siguiente operación.

- var digit_pushed = false; Esta variable booleana que inicializamos a false nos permitirá verificar si se ha pulsado algún número antes de pulsar uno de los cuatro operadores disponibles. En la mayoría de los casos vamos a evitar que se pulse un operador sin haber introducido ninguna cifra previamente. No obstante en el caso del operador resta su misión irá un poco más lejos ya que, gracias a esta variable, podremos permitir que se introduzca el signo negativo antes de una cifra para poder operar con números negativos.

- var negative_digit = false; Este valor booleano adquirirá el valor true cuando nuestra primera operación utilice como primer operando un número negativo. De esta manera, gracias a la información que guarda esta variable podremos realizar correctamente dicha primera operación, sea o no sea un valor negativo la primera cifra introducida.

- var operation_counter; Como su nombre indica esta variable es un contador que aumentará cada vez que hagamos uso de un operador. Su principal misión es evitar que el usuario pulse varias veces seguidas cualquiera de los operadores, ya que en la mayoría de los casos esto supone una incoherencia matemática. En tal caso, y para evitar que la calculadora muestre un error en pantalla que puede resultar raro, seremos nosotros los que avisaremos al usuario del fallo cometido mediante un alert, y haremos que se reinicie la calculadora.

Después de haber declarado todo este grupo de variables crearemos las difrentes funciones que permitirán a la calculadora hacer las diferentes tareas que podrá llevar a cabo. En total vamos a implementar siete funciones, las cuales tendremos que vincular posteriormente a los eventos correspondientes para que sean ejecutadas:

- función digit_display(digit): Es la encargada de recoger el valor de las teclas de la calculadora pulsadas por el usuario.

función digit_display(digit)

- function add(): Es la encargada de realizar las sumas. Si no se trata de la primera operación a realizar se guardará en la variable var accumulate el resultado de la última operación realizada para poder ser utilizado como primer operando de la presente suma.

función add()

- function subtract(): Va a ser la función que gestionará las restas realizadas por la calculadora, además de controlar la introducción de cifras negativas. Para ello se han descrito una serie de comportamientos, según una serie de condiciones establecidas en diferentes if, que tienen en cuenta todas las posibles situaciones que se pueden dar en el uso del programa. Según se trate de la primera operación a realizar o no, si se ha pulsado algún número previamente o no, si se ha comenzado a introducir una cifra negativa anteriormente o no, etc.

función subtract()

- function multiply(): Esta función tendrá en cuenta si es la primera operación que se lleva a cabo o no. En el caso de que la multiplicación no sea la primera operación realizada entonces se procederá a almacenar en la variable var accumulate el resultado de la operación precedente para poder operar con dicha cifra. Como en el resto de operaciones también se verificará que el usuario haya introducido un número antes de hacer uso del operador, o de que no haga uso de un operador dos veces seguidas.

función multiply()

- function divide(): Será la función encargada de realizar las divisiones y tendrá el mismo patrón que la función que realiza las multiplicaciones.

función divide()

- function result(): Gracias a esta función podremos obtener el resultado de la operación que está en curso pulsando el botón de igual de la calculadora. Además de realizar la operación que está en curso también reestablecerá la mayoría de los valores de las varibles globales a su estado inicial, quedando la calculadora casi en el mismo estado como si no hubiera habido ninguna operación precedente.

función result()

- function clearEverything(): Esta función dará vida al botón Clear Everything que reseteará la calculadora dejandola lista para comenzar a operar de nuevo.

función cliarEverything()

En último lugar, una vez que han quedado definidas todas las funciones que le permitirán a la calcudora realizar las diferentes operaciones para las que ha sido concebida, deberemos vincularlas con los diferentes botones que contiene. Gracias a la gestión de eventos podremos vincular eventos como "click" con llamadas a cada una de las funciones correspondientes según el botón de la calculadora que haya sido pulsado:

como vincular los diverentes eventos de la calculadora con sus respectivas funciones