Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Creando una increíble Calculadora con jQuery

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by CYC (you can also view the original English article)

Claro que es bueno tener un abrecartas justo al lado de tu cesta de correo, un calzador al lado de tus mocasines, y una linterna junto a tu mesita de noche. Del mismo modo, es bueno tener una calculadora a mano cuando necesites realizar algunas operaciones matemáticas. Este tutorial y descarga te muestra cómo colocar uno directamente en cualquier sitio web.


Consideración de la interfaz de usuario


Algunos botones con números del 1 al 9, un par de funciones y un gran botón "igual". Eso es todo lo que tiene una calculadora, ¿verdad? Debería ser un pedazo de pastel. Cualquier lenguaje de programación puede manejar esto fácilmente. Por supuesto, pero incluso algo tan simple como una calculadora tiene bastantes cosas para tener en cuenta al diseñar cómo funciona exactamente.

El screencast que acompaña a este artículo se centrará principalmente en esas cosas, y menos en la codificación descendente y sucia. Si bien esta parte escrita se centrará en el código. No obstante, aquí hay una descripción general rápida de algunos de los detalles de la pequeña interfaz de usuario:

  • Cuando la calculadora se carga, el 0 (cero) está en la pantalla. Presionar el número 2 no hace el número 02, es solo 2.
  • Cuando presionas una tecla de función, el número actualmente en la pantalla "se bloquea" como el primer número en el cálculo, pero se mantiene justo donde está. Cuando se presiona otro número, el número se reemplaza.
  • Si se presiona una tecla de función, y luego se presiona una tecla de función diferente, la más reciente presionada es la función que se utilizará.
  • Después de realizar un cálculo, hay dos escenarios posibles. A) Se presiona un nuevo número. Esto reiniciará totalmente la calculadora y comenzará de nuevo con este número. B) Se presiona una tecla de función, que bloqueará el total como el "primer" número, permitiendo que se realice un segundo cálculo en el total
  • El botón borrar debe comportarse como se anuncia, y restablecer totalmente la calculadora
  • La retroalimentación visual debe ser utilizada cuando corresponda, pero lo más importante es que la funcionalidad debe coincidir con la configuración estándar creada por los trillones de calculadoras en computadoras de escritorio en todo el mundo /

La lista podría continuar, pero verás que incluso las interfaces más simples requieren mucha consideración.


El marcado en HTML

Nada elegante aquí. Necesitamos un contenedor para la calculadora, necesitamos una pantalla y necesitamos un montón de botones. Lo elementos <div>, <input> y <a> funcionarán muy bien. JavaScript está haciendo todo el trabajo aquí, no hay una "degradación graciosa". Si JavaScript está desactivado, esta calculadora no funcionará, por lo que la ocultaremos por completo. Entonces, no vamos a hacer de esto un <form> real, ¿por qué el <input>? Las entradas o inputs permiten que el texto se ingrese manualmente, lo cual permitiremos. Permiten una fácil selección, y tienen el atributo "valor", que es útil para obtener y configurar.

Aquí está todo el kit y kaboodle:


Parte visible



Creando las imágenes


Solo necesitamos unas pocas. El fondo de toda la calculadora, un botón de estilo "número", un botón de estilo "función" y el botón "igual". Cada número y función no necesita su propia imagen, simplemente colocaremos texto sobre la parte superior. Creo que "Arial Black" es una buena fuente para una calculadora.

Más tarde, cuando hagamos que la calculadora se abra y se cierre, usaremos el gráfico de la calculadora "mini" y el botón "cerrar".


Estilos con CSS

De nuevo, nada demasiado elegante aquí. El posicionamiento absoluto hace que la mayoría del trabajo arduo haga que las cosas vayan donde deberían ir. Establecemos la posición:relative en el div de la calculadora y luego somos libres para posicionarnos absolutamente dentro de ella.

Aquí está todo:


Configurando el entorno jQuery

En el HTML en sí, tenemos algunas llamadas que hacer para prepararnos para comenzar a escribir nuestro propio JavaScript de jQuery. A saber, cargando las bibliotecas de jQuery y jQuery UI y llamando a nuestro archivo JavaScript que pronto estará disponible.

Configurando

Vamos a poner lo básico. Necesitaremos la declaración clásica "Cuando el DOM está listo" para comenzar. Esto es común a todos los JavaScript, ya que no queremos hacer nada con los elementos antes de que todos se hayan cargado. Luego configuramos algunos eventos básicos que sabemos que van a suceder. Tendremos una función y un evento clic para cada tipo de botón. También llamaremos a la función jQuery UI para hacer que nuestra calculadora sea arrastrable, así como a la pequeña función que permite alternar su visibilidad.


Usando .data() para Variables, No Globales

Las variables en JavaScript son locales para la función en la que se crean. Cuando necesites pasar de una a otra, hazlo pasándolo como un parámetro cuando llames a la nueva función. Eso está muy bien, pero tenemos siete de ellas y la mayoría de nuestras funciones las van a necesitar a todas de una u otra forma. Eso podría ponerse un poco peludo pasando a todas ellas todo el tiempo. Lo que realmente necesitamos son variables globales, pero tal como lo entiendo es una especie de no-no (algo que infringe los espacios de nombres).

jQuery tiene una mejor manera de manejar esto de todos modos, la función data(). Podemos adjuntar "datos" a cualquier objeto jQuery, y esos datos viajan con ese objeto donde sea que vaya. Básicamente, como un atributo, solo que realmente no se puede ver en el DOM. Esto básicamente hace lo que las variables globales podrían hacer por nosotros y es igual de fácil de usar. Aquí están los bits de datos que usaremos:

  • ValueOne - El primer número en la ecuación
  • ValueOneLocked - ¿Ese primer número está listo para funcionar?
  • ValueTwo - El segundo número en la ecuación
  • ValueTwoLocked - ¿Ese segundo número está listo para funcionar?
  • isPendingFunction - ¿Hay una función seleccionada?
  • thePendingFunction - ¿Cuál?
  • fromPrevious - ¿Se ha realizado SOLO un cálculo?

Vamos a agregar estos bits de datos a la entrada #display, que será el cerebro de nuestra calculadora. Tiene sentido. Tendremos que configurar valores predeterminados para todos estos bits de datos, pero pensemos un momento. Podríamos hacerlo bien en la función principal, pero seamos inteligentes y abstraigamos esto a una función. Habrá múltiples escenarios que necesitaremos para restablecer estos valores, así que vamos a crear una función llamada resetCalculator para hacer el trabajo. Por lo tanto podemos llamar a esa función siempre que lo necesitemos. Aceptemos también un parámetro numérico y restablezcamos la calculadora a ese valor. Cuando la calculadora se carga, será cero, pero después de una función, reiniciaremos nuevamente y restableceremos al valor final del cálculo.


Cuando haces clic en un número...

Resulta que lo que hace la calculadora cuando haces clic en un número es el código más complicado de todo. Hay cuatro "estados" en los que puede estar la calculadora y se comportará de manera diferente cuando hagas clic en un número dependiendo de ese estado. Estos son:

  • A) Al hacer clic en un número en un estado totalmente nuevo (la pantalla muestra cero), o cuando ninguno de los dos está bloqueado.
  • B) Al hacer clic en un número después de que se acaba de seleccionar un botón de función.
  • C) Hacer clic en un número después de que se haya seleccionado un botón de función y se hayan ingresado números adicionales.
  • D) Hacer clic en un número después de que se acaba de realizar un cálculo.

Nuestro comportamiento debe ser el siguiente:

  • A) Agregar el nuevo número a lo que ya está allí. Si es un cero, reemplázarlo.
  • B) Bloquear el primer número, reemplazar la pantalla con el nuevo número.
  • C) Agregar el nuevo número a lo que ya está allí.
  • D) Restablecer la calculadora a ese número de número.

Y aquí está todo eso en código:

El botón de función es más fácil de tratar. Básicamente, cuando haces clic en él, bloqueas el primer número para que los botones numéricos sepan que es hora de comenzar el segundo número. Sin embargo, hay una consideración especial, y eso es lo que se debe hacer si se presiona un botón de función inmediatamente después de realizar un cálculo. En ese caso, el primer número debe bloquearse como el valor final y prepararse para aceptar ese segundo número. Esto permite encadenar los cálculos, lo cual es bastante útil.

Al hacer clic, todos los botones de función se borran de una clase especial "pendingFunction" y luego esa clase se aplica al específico en el que se hizo clic. Eso nos da el control de CSS para mover la posición de fondo y dar algunos comentarios visuales sobre cuál es la función actualmente activa.



Y la respuesta es...

La función igual es también bastante simple. Lo primero que hacemos es verificar si, de hecho, estamos listos para hacer cualquier cálculo. Sabemos esto si AMBOS números están "bloqueados". Si lo son, haz un poco de matemática para obtener el número final y luego "reinicia" la calculadora con ese valor final (y establece "Anterior" a verdadero para que sepamos el delicado estado en el que nos encontramos).

Si los números no están bloqueados... no hagas nada.


¡Limpiar!

Por último, pero no menos importante, el botón borrar es el más simple de todos. Presiónalo, borra la calculadora a cero.


¡Y estamos hechos!



Eso es todo. Espero que entre el ejemplo en vivo, el screencast y este tutorial escrito hayas tenido una valiosa sesión de aprendizaje. Ciertamente aprendí algunas cosas al crearlo. Si puedes pensar en alguna aplicación extremadamente útil de esto, contáctame y házmelo saber.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.