Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Tutorial Calculadora sencilla en JavaScript
#1
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 :

Código PHP:
<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 :
Código PHP:
<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


Código PHP:
<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.
#2
bien hecho pocas veces veo un tuto comproblemas
#3
Lo probe y no da fallo, enorabuena :0
MIS OBJETIVOS EN SKYLIUM

-Llegar a 50   mensajes [✔]
-Llegar a 100 mensajes [✔]
-Llegar a 250 mensajes [✔]
-Conseguir 25 de reputacion []

#4
¡Muchas gracias! Este año me tocará programar Java en clase y un ejemplo como este me vendrá genial para practicar.


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  JavaScript en 14 minutos Posits 5 144 12-04-2018, 08:44 AM
Último mensaje: easy english
Estrella [Duda] Usar APIs de forma sencilla en C# Kamasado 0 181 01-08-2017, 04:55 PM
Último mensaje: Kamasado
  [Tutorial] Métodos para redireccionar URLs (HTML, PHP y Javascript wiston3 1 319 01-12-2016, 11:12 PM
Último mensaje: zeuz
  Linux Foundation respalda JavaScript Kiichi 3 345 03-11-2016, 03:43 AM
Último mensaje: habacuc78
  [Aporte] Curso básico de Javascript habacuc78 22 1,254 05-07-2016, 03:53 PM
Último mensaje: escuelasegura
  Trucos y efectos de Javascript para tu página web CarlosAlberto 0 584 05-01-2016, 03:51 PM
Último mensaje: CarlosAlberto
Sonrisa [Tutorial] Cómo utilizar Javascript para actualizar un Título R0bert0 0 638 05-12-2015, 10:07 PM
Último mensaje: R0bert0
Bombilla [Tutorial] Cómo utilizar Javascript para reproducir un archivo R0bert0 0 433 05-12-2015, 10:02 PM
Último mensaje: R0bert0
  Ayuda con Contador en JavaScript alemagno 2 422 25-06-2015, 06:29 PM
Último mensaje: alemagno
  Caracteres especiales en javascript MikaCookies 4 716 09-03-2015, 01:41 AM
Último mensaje: MikaCookies



Usuarios navegando en este tema: 1 invitado(s)