Cómo crear una calculadora usando HTML

Existen muchas formas de hacer cálculos matemáticos en una computadora de escritorio usando la calculadora que viene incluida en el sistema, pero otra forma es construir una calculadora tú mismo usando un simple código HTML. Al hacer esto, no solo podrás hacer cálculos matemáticos en un navegador, sino que también podrás aprender cosas fundamentales sobre el arte de la codificación.

Parte 1

Parte 1 de 4:

Comprender el código

Descargar el PDF

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/08\/Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/08\/Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

1
Aprende lo que cada función HTML hace. El código que usas para crear la calculadora está compuesto por muchos pedazos de sintaxis que funcionan en conjunto para definir diferentes elementos de un documento. Haz clic aquí para obtener una explicación más detallada sobre cómo familiarizarte con este proceso o sigue leyendo para aprender qué hace cada línea del texto en el código que vas a usar para hacer esta calculadora.
- html : este pedazo de sintaxis le dice al resto del documento qué tipo de lenguaje se usa en el código. Al crear un código, se pueden usar un número de lenguajes para el mismo, y <html> le dice al resto del documento que estará en el lenguaje HTML. ^{[1]
  X
  Fuente de investigación}
- head : esto le dice al documento que todo lo que está debajo de ese encabezado es información sobre información, mejor conocida como metadatos. El comando <head> se usa para definir elementos de estilo de un documento, como títulos, encabezados, etc. Piensa en ese comando como un paraguas debajo del cual se encuentra definido el resto del código. ^{[2]
  X
  Fuente de investigación}
- title : aquí es donde vas a poner el título de tu documento. Este atributo se usa para definir cuál será el título del documento al abrirlo en un navegador HTML.
- body bgcolor= "#" : este atributo establece el color de fondo del código y el color del cuerpo. El número que está entre las comillas y que aparece después del "#" corresponde a un color predeterminado .
- text= "" : la palabra en este conjunto de comillas establece el color del texto en el documento.
- form name="" : este atributo especifica el nombre de una forma, la cual se usa para construir la estructura de lo que va después basándose en lo que Javascript conoce como el significado de dicho “form name”. Por ejemplo, el atributo “form name” que se va a usar es “calculator” (calculadora), lo cual creará una estructura específica para el documento. ^{[3]
  X
  Fuente de investigación}
- input type="" : ahí es donde suceden las acciones. El atributo “input type” (tipo de entrada) le indica al documento qué tipo de texto son los valores en el resto de los paréntesis. Por ejemplo, pueden ser texto, una contraseña, un botón (como en el caso de la calculadora) y demás. ^{[4]
  X
  Fuente de investigación}
- value="" : este comando le dice a tu documento qué contendrá el tipo de entrada que se ha especificado arriba. Para una calculadora, estos se muestran como números (del 1 al 9) y operaciones (+,-,*,/,=). ^{[5]
  X
  Fuente de investigación}
- onClick="" : este sintaxis describe un evento, el cual le dice al documento que algo va a ocurrir al hacer clic en ese botón. Para una calculadora, queremos que el texto que se muestre en cada botón se entienda tal como es. Así que para el botón “6”, se tiene que escribir document.calculator.ans.value+='6' entre las comillas. ^{[6]
  X
  Fuente de investigación}
- br : esta etiqueta inicia un salto de línea en el documento, así que cualquier cosa que esté después de esa etiqueta aparecerá en la línea de abajo de donde está esa línea. ^{[7]
  X
  Fuente de investigación}
- /form, /body, y /html : estos comandos le dicen a tu documento que los comandos correspondientes que se han iniciado anteriormente en el documento ya han terminado. ^{[8]
  X
  Fuente de investigación}
Anuncio

Parte 2

Parte 2 de 4:

Establecer el código HTML básico para una calculadora

Descargar el PDF

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4b\/Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4b\/Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Selecciona el texto en el cuadro brindado a continuación sosteniendo el cursor en la esquina superior izquierda del cuadro y arrastrándolo hasta la esquina inferior derecha del cuadro de texto para que todo el texto esté en azul. Después, presiona las teclas “CMD” + “C” (en Mac) o “CTRL” + “C” (en Windows) para copiar el código al portapapeles.

 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
Calculadora HTML </ 
 title 
 > 
 </ 
 head 
 > 
 < 
 body 
 bgcolor 
 = 
 "#000000" 
 text 
 = 
 "gold" 
 > 
 < 
 form 
 name 
 = 
 "calculator" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "1" 
 onClick 
 = 
 "document.calculator.ans.value+='1'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "2" 
 onClick 
 = 
 "document.calculator.ans.value+='2'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "3" 
 onClick 
 = 
 "document.calculator.ans.value+='3'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "4" 
 onClick 
 = 
 "document.calculator.ans.value+='4'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "5" 
 onClick 
 = 
 "document.calculator.ans.value+='5'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "6" 
 onClick 
 = 
 "document.calculator.ans.value+='6'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "7" 
 onClick 
 = 
 "document.calculator.ans.value+='7'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "8" 
 onClick 
 = 
 "document.calculator.ans.value+='8'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "9" 
 onClick 
 = 
 "document.calculator.ans.value+='9'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "-" 
 onClick 
 = 
 "document.calculator.ans.value+='-'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "+" 
 onClick 
 = 
 "document.calculator.ans.value+='+'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "*" 
 onClick 
 = 
 "document.calculator.ans.value+='*'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "/" 
 onClick 
 = 
 "document.calculator.ans.value+='/'" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "0" 
 onClick 
 = 
 "document.calculator.ans.value+='0'" 
 > 
 < 
 input 
 type 
 = 
 "reset" 
 value 
 = 
 "Reset" 
 > 
 < 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "=" 
 onClick 
 = 
 "document.calculator.ans.value=eval(document.calculator.ans.value)" 
 > 
 < 
 br 
 > 
El resultado es < 
 input 
 type 
 = 
 "textfield" 
 name 
 = 
 "ans" 
 value 
 = 
 "" 
 > 
 </ 
 form 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >