Comunidad de diseño web y desarrollo en internet online

Calculadora sencilla en JavaScript

En este tip os explicaré como crear la calculadora mas sencilla que podais ver con JavaScript, no será gran cosa, pero a partir de esto podrás crearte la tuya mas bonita.

Crear la calculadora


Crear el script


Vamos a crear la parte lógica de la calculadora. Para crear la calculadora deberemos de crear un archivo .html al que yo le he llamado calculador.html, ustedes llamenle como quieran.

A continuación debemos de escribir dentro de <head> </head> el siguiente código:

Código :

<script>
function calcula(operacion){
    var operando1 = document.calc.operando1.value
    var operando2 = document.calc.operando2.value 
    var result = eval(operando1 + operacion + operando2)
    document.calc.resultado.value = result
}
</script> 

Explicación del script


  • Function calcula(operacion){
    Su función es hacer la operación. Mas adelante veremos como la aplica en la caja.
  • var operando1 = document.calc.operando1.value
    var operando2 = document.calc.operando2.value

    operando1 y operando2 son los que tienen los valores con los que se hará las operaciones.
  • var result = eval(operando1 + operacion + operando2)
    Nos produce el resultado de la operación entre operando1 y operando2.
  • document.calc.resultado.value = result
    Nos escribe el resultado en la caja.

Crear las cajas y los botones


Ahora vamos a ponernos a crear la parte física. Solamente crearemos 3 cajas, 2 para los operando y otra para los resultados, luego crearemos 4 botones con las 4 operaciones básicas (+, -, X, /), estos botones los pondremos entre la caja del operando2 y la caja del resultado. Veamos el codigo:

Código :

<form name="calc">
<input type="Text" name="operando1" value="0" size="12">
<br>
<input type="Text" name="operando2" value="0" size="12">
<br>
<input type="Button" name="" value=" + " onclick="calcula('+')">
<input type="Button" name="" value=" - " onclick="calcula('-')">
<input type="Button" name="" value=" X " onclick="calcula('*')">
<input type="Button" name="" value=" / " onclick="calcula('/')">
<br>
<input type="Text" name="resultado" value="0" size="12">
</form>

Explicación


  • <form name="calc">
    Crea el formulario.
  • <input type="Text" name="operando1" value="0" size="12">
    <input type="Text" name="operando2" value ="0" size="12">

    Crea las cajas para introducir los valores de las variables operando1 y operando2.
  • <input type="Button" name="" value=" + " onclick="calcula('+')">
    <input type="Button" name="" value=" - " onclick="calcula('-')">
    <input type="Button" name="" value=" X " onclick="calcula('*')">
    <input type="Button" name="" value=" / " onclick="calcula('/')">

    Crea los botones para introducir las variables para que se pueda calcular el resultado del operando1 y el operando2.
  • <input type="Text" name="resultado" value="0" size="12"
    Crea la caja para introducir el resultado del operando1 y el operando2.
  • </form>
    Cerramos el formulario.

Calculadora finalizada


Ejemplo de la calculadora.

Así es, nuestra calculadora (en JS) ha sido finalizada, como veis, es de lo mas sencillo que se puede hacer con JS. Espero que no hayáis tenido ningún problema con el tip, si es así, ya sabéis, preguntad las dudas.

Por cierto, puede (no es seguro) que mas adelante me ponga a hacer un tip sobre como hacer una calculadora mas perfecta, por ej. una con % y demás.

Comentarios


La verdad es que no se porque me he liado en las explicaciones mas de lo normal, y eso que es algo sencillo, no se porque me ha pasado, por lo que le dio las gracias a Zguillez que me ayudó bastante en algunas explicaciones en las que no sabía expresarme.

Saludos

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate