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>Convertir kilogramos a gramos</h3>
    <form action="">
        <label for="">kilogramos:</label>
        <input type="number" id="kilogramos"><br><br>
        <input type="button" value="Convertir" onclick="convertir()">
        <input type="reset" value="Limpiar"><br><br>
        <label for="">resultado:</label>
        <input type="text" id="resultado">
    </form>
    <script>
        function convertir(){
            let kilogramos = parseFloat(document.getElementById('kilogramos').value);
            let convertir = kilogramos * 1000;
            document.getElementById('resultado').value = `${convertir} g`;
        }
    </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.
let --> permite declarar variables limitando su alcance (scope) al bloque, declaración, o expresión donde se está usando.
function --> es un bloque de código diseñado para realizar una tarea en particular.
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.
`${}` --> los literales de plantilla (cadenas de plantilla) le permiten utilizar cadenas o expresiones incrustadas en forma de cadena.

Explicación del Código:

1. Título del ejercicio

<h3>Convertir kilogramos a gramos</h3>

Muestra un título en la página indicando que el programa realiza la conversión de kilogramos a gramos.

2. Formulario

El formulario contiene los campos de entrada, botones y el área donde se mostrará el resultado de la conversión.

3. Campo para ingresar kilogramos

Permite al usuario ingresar una cantidad en kilogramos. El atributo type="number" solo acepta números.

4. Botón Convertir

Cuando el usuario hace clic en este botón, se ejecuta la función convertir() para realizar el cálculo.

5. Botón Limpiar

Borra los datos ingresados en el formulario y limpia el resultado.

6. Campo de resultado

Muestra el resultado de la conversión realizada por JavaScript.

7. Función convertir()

function convertir(){ let kilogramos = parseFloat(document.getElementById('kilogramos').value); let convertir = kilogramos * 1000; document.getElementById('resultado').value = `${convertir} g`; }

Esta función se encarga de convertir los kilogramos ingresados a gramos.

parseFloat() obtiene el número escrito por el usuario.
kilogramos * 1000 convierte los kilogramos a gramos.
resultado.value muestra el resultado en la caja de texto.

8. Ejemplo de ejecución

Si el usuario ingresa:

5 kilogramos

El programa realiza el siguiente cálculo:

5 × 1000 = 5000 gramos

Resultado mostrado:

5000 g

Resumen

El programa solicita una cantidad en kilogramos, la multiplica por 1000 para convertirla a gramos y muestra el resultado al presionar el botón Convertir.

Ejercicios de programación

Páginas

miércoles, 17 de junio de 2026

Convertir kilogramos a gramos en HTML y JavaScript