martes, 23 de junio de 2026

Determinar si un número es positivo, negativo o neutro 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>Determinar si un número es positivo, negativo o neutro</h3>
    <form action="">
        <label for="">número:</label>
        <input type="number" id="n"><br><br>
        <input type="button" value="Mostrar" onclick="mostrar()">
        <input type="reset" value="Limpiar"><br><br>
        <label for="">resultado:</label>
        <input type="text" id="resultado" size="25">
    </form>
    <script>
        function mostrar(){
            let n = parseInt(document.getElementById('n').value);
            if(n == 0){
                document.getElementById('resultado').value = `${n} es un número neutro.`;
            }else if(n > 0){
                document.getElementById('resultado').value = `${n} es un número positivo.`;
            }else{
                document.getElementById('resultado').value = `${n} es un número negativo.`;
            }
        }
    </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.
parseInt() --> analiza un valor como una cadena y devuelve el primer entero.
if --> se usa para especificar un bloque de código que se ejecutará, si una condición especificada es verdadera.
else if --> se usa para especificar una nueva condición para probar, si la primera condición es falsa.
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 mayor que ( > ) devuelve true si el operando izquierdo es mayor que el operando derecho.
document.getElementById() --> devuelve un elemento con un valor especificado.
.value --> establece o devuelve el valor del atributo de valor de un campo de texto.
`${}` --> los literales de plantilla (cadenas de plantilla) le permiten utilizar cadenas o expresiones incrustadas en forma de cadena.

Explicación del Código:

Este programa permite ingresar un número y determinar si es positivo, negativo o neutro (0) utilizando HTML para la interfaz y JavaScript para realizar la comparación.

1. Declaración del documento HTML

<!DOCTYPE html>

Indica al navegador que el documento utiliza la versión HTML5.

2. Etiqueta HTML

<html lang="es">

Es el inicio del documento HTML. El atributo lang="es" indica que la página está escrita en español.

3. Sección <head>

<head>

Contiene la información de configuración de la página web.

4. Codificación de caracteres

<meta charset="UTF-8">

Permite mostrar correctamente letras con acentos, la letra ñ y otros caracteres especiales.

5. Compatibilidad con Internet Explorer

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Hace que el navegador utilice su versión más moderna para mostrar la página.

6. Adaptación a dispositivos móviles

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Permite que la página se adapte correctamente a celulares, tablets y computadoras.

7. Título de la página

<title>Ejercicio HTML y JavaScript</title>

Es el texto que aparece en la pestaña del navegador.

8. Título del ejercicio

<h3>Determinar si un número es positivo, negativo o neutro</h3>

Muestra el nombre del ejercicio en la página.

9. Formulario

<form> ... </form>

Agrupa todos los controles del formulario como cajas de texto y botones.

10. Etiqueta del número

<label>Número:</label>

Muestra el texto que identifica la caja donde se escribirá el número.

11. Caja para ingresar el número

<input type="number" id="n">

Permite ingresar únicamente números. El identificador id="n" permite acceder al valor desde JavaScript.

12. Botón Mostrar

<input type="button" value="Mostrar" onclick="mostrar()">

Cuando el usuario hace clic, se ejecuta la función mostrar().

13. Botón Limpiar

<input type="reset" value="Limpiar">

Borra todos los datos ingresados en el formulario.

14. Caja de resultado

<input type="text" id="resultado">

Aquí se mostrará el mensaje indicando si el número es positivo, negativo o neutro.

15. Inicio del código JavaScript

<script>

Aquí comienza el código JavaScript que realiza el procesamiento del ejercicio.

16. Función mostrar()

function mostrar(){

Se crea una función llamada mostrar() que se ejecuta cuando el usuario presiona el botón Mostrar.

17. Obtener el número

let n = parseInt(document.getElementById('n').value);

Obtiene el número escrito por el usuario y lo convierte en un número entero utilizando parseInt().

18. Primera condición

if(n == 0){

Comprueba si el número es igual a cero.

19. Mostrar número neutro

document.getElementById('resultado').value = `${n} es un número neutro.`;

Si el número es 0, muestra que es un número neutro.

20. Segunda condición

else if(n > 0){

Si el número no es cero, verifica si es mayor que cero.

21. Mostrar número positivo

document.getElementById('resultado').value = `${n} es un número positivo.`;

Si el número es mayor que cero, muestra que es positivo.

22. Caso contrario

else{

Si no se cumple ninguna condición anterior, significa que el número es menor que cero.

23. Mostrar número negativo

document.getElementById('resultado').value = `${n} es un número negativo.`;

Muestra que el número ingresado es negativo.

24. Fin de la función

}

Finaliza la función mostrar().

25. Fin del script

</script>

Indica el final del código JavaScript.

Resumen del funcionamiento

  1. El usuario escribe un número.
  2. Hace clic en el botón Mostrar.
  3. JavaScript obtiene el número ingresado.
  4. Compara si es igual a 0, mayor que 0 o menor que 0.
  5. Finalmente muestra si el número es neutro, positivo o negativo.

No hay comentarios.:

Publicar un comentario

Mostrar el primer número negativo de cuatro números 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. ❤️