Contenido

• Al paso
• Parte 1 de 4: Comprender el código
• Parte 2 de 4: código estándar para una calculadora HTML
• Parte 3 de 4: Hacer tu propia calculadora
• Parte 4 de 4: usa tu calculadora
• Consejos

Hay muchas formas diferentes de calcular con una computadora usando la calculadora incorporada, pero otra forma es construir la suya propia usando un código HTML simple. Para hacer una calculadora usando HTML, necesita algunos conocimientos básicos de HTML, luego ingrese el código necesario en un editor de texto y guárdelo como un archivo HTML. Luego puede usar la calculadora abriendo el archivo HTML en su navegador favorito. No solo podrá realizar operaciones aritméticas en su navegador, sino que también podrá aprender algunas habilidades básicas sobre el arte de la programación.

Al paso

Parte 1 de 4: Comprender el código

1. Aprenda lo que hace cada función HTML. El código que utilizará para crear su calculadora consta de muchos tipos diferentes de sintaxis que juntos definen los diferentes elementos de un documento. Haga clic aquí para obtener una explicación de este proceso, o siga leyendo para obtener más información sobre lo que hará cada línea de código para crear la calculadora.
   • html: Este bit de sintaxis le dice al resto del documento qué idioma se usará en el código. Hay varios lenguajes para codificar y, en este caso, html> deja claro al resto del documento que está en, lo adivinó, html.
   • cabeza: Le dice al documento que todo lo que sigue son datos sobre datos, también llamados "metadatos". El comando head> se usa generalmente para definir elementos estilísticos de un documento, como títulos, encabezados, etc. Piense en él como un paraguas bajo el cual se define el resto del código.
   • título: Aquí se indica el título de su documento. Este atributo se utiliza para indicar el título del documento cuando se abre en un navegador HTML.
   • body bgcolor = "#": Este atributo establece el color del fondo de la página HTML y el cuerpo. El número dentro de la cadena de comillas y después del # corresponde a un color específico.
   • texto = "": Esta sintaxis establece el color del texto del documento.
   • formulario nombre = "": Este atributo especifica el nombre de un formulario y se utiliza para construir la estructura de lo que viene a continuación, en base a lo que Javascript sabe del significado del nombre del formulario. Por ejemplo, el nombre del formulario que vamos a utilizar es "calculadora", que vamos a utilizar para crear una estructura específica para el documento.
   • tipo de entrada = "": Aquí es donde sucede algo. El atributo "tipo de entrada" le dice al analizador del documento qué tipo de texto está contenido en los valores entre las comillas. Por ejemplo, podría ser un texto, una contraseña, un botón (como será el caso de la calculadora), etc.
   • valor = "": Este comando le dice al analizador del documento lo que se incluye en el tipo de entrada anterior. Para una calculadora, estos son números (1-9) y operaciones (+, -, *, /, =).
   • onClick = "": Esta sintaxis describe un evento, lo que indica que se debe hacer algo cuando se hace clic en el botón. Para una calculadora, queremos que el texto de cada botón también sea reconocido como tal. Entonces, antes del botón "6", colocamos document.calculator.ans.value + = "6" entre las comillas.
   • br: esta etiqueta crea una nueva línea en el documento, de modo que el texto (o algo más) se coloca después de él en otra línea.
   • / form, / body y / html: estos comandos son cierres para los comandos correspondientes abiertos previamente en el documento.

Parte 2 de 4: código estándar para una calculadora HTML

1. Copie el código a continuación. Seleccione el texto en el cuadro de abajo manteniendo presionado el botón izquierdo del mouse y arrastrando el cursor desde la parte inferior izquierda del cuadro hacia la parte superior derecha, de modo que todo el texto se vuelva azul. Luego presione "Comando + C" en una Mac o "Ctrl + C" en una PC para copiar el código al portapapeles.

html> head> title> HTML Calculator / title> / head> body bgcolor = "# 000000" text = "gold"> form name = "calculator"> input type = "button" value = "1" onClick = "document. calculator.ans.value + = '1' "> tipo de entrada =" botón "valor =" 2 "onClick =" document.calculator.ans.value + = '2' "> tipo de entrada =" botón "valor =" 3 "onClick =" document.calculator.ans.value + = '3' "> tipo de entrada =" botón "valor =" + "onClick =" document.calculator.ans.value + = '+' "> tipo de entrada =" button "value =" 4 "onClick =" document.calculator.ans.value + = '4' "> tipo de entrada =" button "value =" 5 "onClick =" document.calculator.ans.value + = '5' "> tipo de entrada =" botón "valor =" 6 "onClick =" document.calculator.ans.value + = '6' "> tipo de entrada =" botón "valor =" - "onClick =" document.calculator.ans. valor + = '-' "> tipo de entrada =" botón "valor =" 7 "onClick =" document.calculator.ans.value + = '7' "> tipo de entrada =" botón "valor =" 8 "onClick =" document.calculator.ans.value + = '8' "> tipo de entrada =" botón "valor =" 9 "onClick =" document.calculator.ans.value + = '9' "> tipo de entrada =" botón "valor = " *" onClick = "document.calcul ator.ans.value + = ' *' "> tipo de entrada =" botón "valor =" / "onClick =" document.calculator.ans.value + = '/' "> tipo de entrada =" botón "valor =" 0 "onClick =" document.calculator.ans.value + = '0' "> tipo de entrada =" reset "value =" Reset "> tipo de entrada =" button "value =" = "onClick =" document.calculator.ans .value = eval (document.calculator.ans.value) "> br> La respuesta esinput type =" textfield "name =" ans "value =" "> / form> / body> / html>

Parte 3 de 4: Hacer tu propia calculadora

1. Abra un editor de texto en su computadora. Hay varios programas para usar, pero para simplificar, nos ceñiremos a TextEdit o Notepad.
   • En una Mac, haga clic en la lupa en la esquina superior derecha de la pantalla para abrir Spotlight. Cuando llegue allí, escriba TextEdit y haga clic en el programa TextEdit, que ahora debería estar seleccionado en azul.
   • En una PC, abra el menú Inicio en la parte inferior izquierda de la pantalla. En la barra de búsqueda, escriba Bloc de notas y haga clic en la aplicación Bloc de notas, que aparecerá en la barra de búsqueda a la derecha.
2. Pegue el código HTML de una calculadora en el documento.
   • En una Mac, haga clic en el cuerpo del documento y presione Comando + V. Luego haga clic en Formato en la parte superior de la pantalla y luego Hacer texto sin formato después de pegar el código.
   • En una PC, haga clic en el cuerpo del documento y luego en Ctrl + V.
3. Guarda el archivo. Haga esto a través de "Archivo" en el menú principal de la ventana, y luego con Guardar como... en una PC o Ahorrar... en una Mac desde el menú desplegable.
4. Agregue una extensión HTML al nombre del archivo. En el menú "Guardar como ...", escriba el nombre del archivo, seguido de ".html", luego haga clic en "Guardar". Por ejemplo, si desea nombrar este archivo "Mi primera calculadora", guárdelo como "Mi primera calculadora.html".

Parte 4 de 4: usa tu calculadora

1. Busque el archivo que acaba de crear. Para hacer esto, escriba el nombre del archivo en Spotlight o en la barra de búsqueda del menú Inicio como se explicó en el paso anterior. No es necesario escribir también la extensión "html".
2. Haga clic en su archivo para abrirlo. Su navegador predeterminado abrirá su calculadora en una nueva página web.
3. Haga clic en los botones de la calculadora para usarla. Las soluciones a sus ecuaciones ahora aparecerán en la barra de respuestas.

Consejos

• Puede incluir esta calculadora en una página web si lo desea.
• También puede utilizar estilos HTML para cambiar el aspecto de la calculadora.