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

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

1
Copia el código brindado a continuación. 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>

Parte 3

Parte 3 de 4:
Crear la calculadora

1
Abre un programa de edición de texto en tu computadora. Existen muchos programas que puedes usar, pero por motivos de conveniencia y calidad, es recomendable usar TextEdit o el Bloc de notas.^{[9]
X
Fuente de investigación}^{[10]
X
Fuente de investigación}
- En una Mac, haz clic en la lupa en la esquina superior derecha de la pantalla para abrir la “Búsqueda Spotlight”. Una vez que estés ahí, escribe TextEdit y haz clic en el programa TextEdit, el cual debe estar resaltado en azul.
- En Windows, abre el menú de Inicio en la esquina inferior izquierda de tu pantalla. En la barra de búsqueda, escribe Bloc de notas y haz clic en la aplicación Bloc de notas, la cual aparecerá en la barra de resultados a la derecha.
2
Pega el código HTML de la calculadora en el documento.
- En una Mac, haz clic en el cuerpo del documento y presiona las teclas “CMD” + “V”. Después necesitas hacer clic en “Formato” en la parte superior de la pantalla y hacer clic en “Texto sin formato” después de pegar el código.^{[11]
  X
  Fuente de investigación}
- En Windows, haz clic en el cuerpo del documento y presiona las teclas “CTRL” + “V”.
3
Guarda el archivo. Para hacer esto, haz clic en el botón de Archivo en la parte superior izquierda de la ventana y haz clic en “Guardar como” (en Windows) o “Guardar” (en Mac) en el menú desplegable que aparezca.
4
Añade la extensión HTML al nombre de archivo. En el menú de “Guardar como”, escribe el nombre de tu archivo seguido de la extensión “.html”, y después haz clic en “Guardar”. Por ejemplo, si quieres ponerle como nombre “MiPrimeraCalculadora”, necesitas guardarlo como “MiPrimeraCalculadora.html”.

Anuncio

Parte 4

Parte 4 de 4:
Usar la calculadora

1
Encuentra el archivo que acabas de crear. Para hacerlo, escribe el nombre de tu archivo en la Búsqueda Spotlight o en la barra de búsqueda del menú de Inicio en tu computadora como se describe en el paso anterior. No necesitas escribir la extensión HTML.
2
Haz clic en el archivo para abrirlo. Tu navegador predeterminado abrirá la calculadora en una nueva página.
3
Haz clic en los botones de la calculadora para usarla. Las soluciones a tus ecuaciones aparecerán en la barra de soluciones.

Anuncio