Código del ejercicio:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio HTML y JavaScript</title>
</head>
<body>
    <h3>Calcular la división de dos números, mostrando un mensaje de error si hubiera</h3>
    <form action="">
        <label for="">número 1:</label>
        <input type="number" id="n1"><br><br>
        <label for="">número 2:</label>
        <input type="number" id="n2"><br><br>
        <input type="button" value="Calcular" onclick="calcular()">
        <input type="reset" value="Limpiar"><br><br>
        <label for="">resultado:</label>
        <input type="text" id="resultado">
    </form>
    <script>
        function calcular(){
            let n1 = parseFloat(document.getElementById('n1').value);
            let n2 = parseFloat(document.getElementById('n2').value);
            if(n2 == 0){
                document.getElementById('resultado').value = "No se puede dividir entre cero.";
            }else{
                document.getElementById('resultado').value = n1 / n2;
            }
        }
    </script>
</body>
</html>

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.
if --> se usa para especificar un bloque de código que se ejecutará, si una condición especificada es verdadera.
else --> se usa para especificar un bloque de código a ejecutar, si la misma condición es falsa.
== --> el operador de comparacion ( == ) comprueba si sus dos operandos son iguales y devuelve un resultado booleano.
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:

1. Estructura HTML

Código	Función
`<!DOCTYPE html>`	Indica que el documento está escrito en HTML5.
`<html lang="es">`	Inicia la página HTML e indica que el idioma es español.
`<head>`	Contiene la información de configuración de la página.
`<meta charset="UTF-8">`	Permite mostrar correctamente letras como á, é, í, ó, ú y la ñ.
`<meta name="viewport">`	Hace que la página se adapte correctamente a celulares y tablets.
`<title>`	Define el nombre que aparece en la pestaña del navegador.

2. Formulario

Código	Función
`<form>`	Contiene todos los controles del formulario.
`<label>`	Muestra el texto que identifica cada caja de entrada.
`<input type="number">`	Permite ingresar únicamente números.
`id="n1"`	Identifica el primer número.
`id="n2"`	Identifica el segundo número.
`<input type="button">`	Crea el botón Calcular que ejecuta la función `calcular()`.
`<input type="reset">`	Limpia todas las cajas del formulario.
`id="resultado"`	Es la caja donde se muestra el resultado o el mensaje de error.

3. Función JavaScript

4. Explicación línea por línea

Código	Explicación sencilla
`function calcular(){`	Crea una función llamada calcular, que se ejecuta cuando el usuario hace clic en el botón Calcular.
`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.
`if(n2 == 0)`	Comprueba si el segundo número es cero.
`resultado.value = "No se puede dividir entre cero."`	Si el divisor es cero, muestra un mensaje de error porque una división entre cero no está permitida.
`else`	Si el segundo número es diferente de cero, continúa con la operación.
`resultado.value = n1 / n2;`	Realiza la división del primer número entre el segundo y muestra el resultado.

5. ¿Cómo funciona el programa?

El usuario escribe el primer número.
Luego escribe el segundo número.
Hace clic en el botón Calcular.
JavaScript obtiene ambos números.
Comprueba si el segundo número es cero.
Si es cero, muestra el mensaje: "No se puede dividir entre cero."
Si no es cero, realiza la división y muestra el resultado en la caja de texto.

6. Resumen

Este programa permite dividir dos números ingresados por el usuario. Antes de realizar la división, JavaScript verifica que el segundo número no sea cero. Si el divisor es cero, el programa muestra un mensaje de error para evitar una operación inválida. En caso contrario, calcula la división y presenta el resultado en la pantalla.

Ejercicios de programación

Páginas

miércoles, 24 de junio de 2026

Calcular la división de dos números, mostrando un mensaje de error si hubiera en HTML y JavaScript