jueves, 25 de junio de 2026

Multiplicación de dos números, cuando multiplique 0 * 0 muestre un mensaje "El producto de 0 por cualquier número es 0" en HTML y JavaScript

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>Multiplicación de dos números, cuando multiplique 0 * 0 muestre un mensaje "El producto de 0 por cualquier número es 0"</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" size="35">
    </form>
    <script>
        function calcular(){
            let n1 = parseFloat(document.getElementById('n1').value);
            let n2 = parseFloat(document.getElementById('n2').value);
            if(n1 == 0 && n2 == 0){
                document.getElementById('resultado').value = "El producto de 0 por cualquier número es 0.";
            }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.
&& --> el operador lógico AND ( && ) (conjunción lógica) para un conjunto de operandos booleanos será true si y solo si todos los operandos son true. De lo contrario será false.
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 y multiplicarlos utilizando HTML y JavaScript. Además, si ambos números ingresados son 0, el programa muestra el mensaje: "El producto de 0 por cualquier número es 0."

Explicación de cada parte del código

Parte del código Función
<!DOCTYPE html> Indica que el documento utiliza HTML5.
<html lang="es"> Define que la página está escrita en español.
<head> Contiene la configuración general de la página web.
<meta charset="UTF-8"> Permite mostrar correctamente caracteres especiales y acentos.
<meta name="viewport"> Hace que la página sea adaptable a celulares y tablets.
<title> Define el título que aparece en la pestaña del navegador.
<h3> Muestra el enunciado del ejercicio en la página.
<form> Agrupa todos los controles del formulario.
<label> Muestra el texto descriptivo de cada campo.
<input type="number" id="n1"> Permite ingresar el primer número.
<input type="number" id="n2"> Permite ingresar el segundo número.
<input type="button"> Crea el botón que ejecuta el cálculo.
onclick="calcular()" Llama a la función calcular() cuando se hace clic en el botón.
<input type="reset"> Limpia todos los campos del formulario.
<input type="text" id="resultado"> Muestra el resultado o el mensaje generado por el programa.
<script> Contiene el código JavaScript que realiza las operaciones.
function calcular() Define la función encargada de realizar el cálculo.
parseFloat() Convierte los valores ingresados a números decimales.
document.getElementById() Obtiene un elemento de la página mediante su identificador.
if(n1 == 0 && n2 == 0) Comprueba si ambos números son iguales a cero.
&& Operador lógico AND. Ambas condiciones deben ser verdaderas.
resultado.value = "El producto de 0 por cualquier número es 0." Muestra el mensaje especial cuando se ingresa 0 y 0.
else Se ejecuta cuando la condición del if no se cumple.
n1 * n2 Realiza la multiplicación de los dos números ingresados.
resultado.value = n1 * n2 Muestra el resultado de la multiplicación en la caja de texto.

Resumen del funcionamiento

El usuario ingresa dos números y presiona el botón Calcular. La función calcular() obtiene los valores ingresados y verifica si ambos son cero. Si son cero, muestra el mensaje: "El producto de 0 por cualquier número es 0.". En caso contrario, multiplica los dos números y muestra el resultado en el campo correspondiente.

No hay comentarios.:

Publicar un comentario

Eliminar un carácter x de una cadena en HTML y JavaScript

Código del ejercicio: <! DOCTYPE html > < html lang = "es" > < head >     < meta charset ...

Copyright ©2025 Ejercicios de programación. Todos los derechos reservados. ❤️