Código del ejercicio: Resta de dos números
Definición de los códigos del ejercicio:
<h3></h3> --> representa un encabezado de nivel 3.<form></form> --> se utiliza para crear un formulario HTML para la entrada del usuario.
<br> --> produce un salto de línea en el texto.
<label></label> --> representa una etiqueta para un elemento en una interfaz de usuario.
<input> --> etiqueta especifica un campo de entrada donde el usuario puede ingresar datos.
onclick --> onclick evento ocurre cuando el usuario hace clic en un elemento.
<script></script> --> contiene comandos u ordenes que se van ejecutando de manera secuencial y comúnmente se utilizan para controlar el comportamiento de un programa en específico o para interactuar con el sistema operativo.
function --> es un bloque de código diseñado para realizar una tarea en particular.
let --> permite declarar variables limitando su alcance (scope) al bloque, declaración, o expresión donde se está usando.
parseFloat() --> analiza un argumento (si es necesario, lo convierte en una cadena) y devuelve un número de coma flotante.
document.getElementById() --> devuelve un elemento con un valor especificado.
.value --> establece o devuelve el valor del atributo de valor de un campo de texto.
Explicación del Código:
Este programa permite ingresar dos números, restarlos y mostrar el resultado utilizando HTML para crear la interfaz y JavaScript para realizar el cálculo.
Explicación de cada parte del código
| Código | Función |
|---|---|
<!DOCTYPE html> |
Indica que el documento utiliza la versión HTML5. |
<html lang="es"> |
Define el inicio del documento HTML e indica que el idioma es español. |
<head> |
Contiene la configuración del documento, como el título y la codificación. |
<meta charset="UTF-8"> |
Permite mostrar correctamente letras como la ñ y las vocales con tilde. |
<meta name="viewport"> |
Hace que la página sea adaptable a teléfonos, tabletas y computadoras. |
<title> |
Muestra el nombre de la página en la pestaña del navegador. |
<body> |
Contiene todo el contenido visible de la página. |
<h3>Resta de dos números</h3> |
Muestra el título principal del ejercicio. |
<form> |
Agrupa todos los controles del formulario. |
<label> |
Muestra el texto que identifica cada campo del formulario. |
<input type="number"> |
Permite ingresar únicamente valores numéricos. |
id="n1" y id="n2" |
Son identificadores que permiten acceder a los números desde JavaScript. |
<input type="button"> |
Crea el botón Calcular. Al hacer clic ejecuta la función
calcular().
|
onclick="calcular()" |
Ejecuta la función llamada calcular() cuando el usuario presiona el botón.
|
<input type="reset"> |
Limpia todos los datos escritos en el formulario. |
<input type="text" id="resultado"> |
Muestra el resultado obtenido de la resta. |
<script> |
Contiene el código JavaScript que realiza el cálculo. |
function calcular() |
Crea una función llamada calcular, la cual realiza toda la operación de la resta. |
let n1 = parseFloat(...) |
Obtiene el primer número escrito por el usuario y lo convierte en un número decimal. |
let n2 = parseFloat(...) |
Obtiene el segundo número y también lo convierte en un número decimal. |
let r = n1 - n2; |
Realiza la operación de resta entre los dos números y guarda el resultado en la variable r. |
document.getElementById('resultado').value = r; |
Muestra el resultado de la resta dentro del cuadro de texto llamado resultado. |
¿Cómo funciona el programa?
Paso 1: El usuario escribe el primer número.
Paso 2: Escribe el segundo número.
Paso 3: Presiona el botón Calcular.
Paso 4: JavaScript obtiene ambos números y realiza la operación:
Resultado = Número 1 − Número 2
Paso 5: El resultado aparece automáticamente en el cuadro de texto correspondiente.
Resumen
Este ejercicio muestra cómo HTML crea la interfaz para ingresar datos y cómo JavaScript obtiene esos valores, realiza una resta y presenta el resultado al usuario de forma inmediata.
El mismo procedimiento puede ampliarse fácilmente para restar tres o más números, solo agregando más campos de entrada y extendiendo la operación, por ejemplo: n1 - n2 - n3 - n4.
Código del ejercicio: Resta de cinco números
Definición de los códigos del ejercicio:
<h3></h3> --> representa un encabezado de nivel 3.<form></form> --> se utiliza para crear un formulario HTML para la entrada del usuario.
<br> --> produce un salto de línea en el texto.
<label></label> --> representa una etiqueta para un elemento en una interfaz de usuario.
<input> --> etiqueta especifica un campo de entrada donde el usuario puede ingresar datos.
onclick --> onclick evento ocurre cuando el usuario hace clic en un elemento.
<script></script> --> contiene comandos u ordenes que se van ejecutando de manera secuencial y comúnmente se utilizan para controlar el comportamiento de un programa en específico o para interactuar con el sistema operativo.
function --> es un bloque de código diseñado para realizar una tarea en particular.
let --> permite declarar variables limitando su alcance (scope) al bloque, declaración, o expresión donde se está usando.
parseFloat() --> analiza un argumento (si es necesario, lo convierte en una cadena) y devuelve un número de coma flotante.
document.getElementById() --> devuelve un elemento con un valor especificado.
.value --> establece o devuelve el valor del atributo de valor de un campo de texto.
Explicación del Código:
📌 ¿Qué hace este programa?
Este programa permite ingresar cinco números y luego realiza la resta de todos ellos usando JavaScript.
🧩 Parte HTML
El HTML crea un formulario con cinco campos de entrada donde el usuario escribe los números y un campo donde se muestra el resultado.
⚙️ Parte JavaScript
El JavaScript obtiene los valores de los inputs, los convierte a números y realiza la operación de resta.
📊 Resultado
El resultado final se muestra automáticamente en el campo de salida llamado “resultado”.
No hay comentarios.:
Publicar un comentario