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 toneladas a kilogramos</h3>
    <form action="">
        <label for="">tonelada:</label>
        <input type="number" id="tonelada"><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 tonelada = parseFloat(document.getElementById('tonelada').value);
            let convertir = tonelada * 1000;
            document.getElementById('resultado').value = `${convertir} kg`;
        }
    </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:

Este programa permite ingresar una cantidad de toneladas y convertirla automáticamente a kilogramos utilizando HTML y JavaScript.

1. Título del ejercicio

<h3>Convertir toneladas a kilogramos</h3>

Muestra el título principal del ejercicio en la página web.

2. Campo para ingresar toneladas

Permite al usuario escribir la cantidad de toneladas que desea convertir.

3. Botón Convertir

Cuando el usuario hace clic en este botón, se ejecuta la función convertir().

4. Botón Limpiar

Borra los datos ingresados en el formulario para realizar una nueva conversión.

5. Campo de resultado

Muestra el resultado final de la conversión en kilogramos.

6. Función JavaScript

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

Explicación paso a paso

Obtiene el valor ingresado: lee la cantidad escrita en el campo de toneladas.
Convierte el dato a número: parseFloat() transforma el texto en un número decimal.
Realiza la conversión: multiplica las toneladas por 1000 porque una tonelada equivale a 1000 kilogramos.
Muestra el resultado: coloca el valor calculado dentro del campo resultado y agrega la unidad "kg".

7. Ejemplo de ejecución

Dato ingresado: 5 toneladas

Operación: 5 × 1000

Resultado: 5000 kg

Resumen

El programa solicita una cantidad en toneladas, la multiplica por 1000 para obtener los kilogramos equivalentes y muestra el resultado en pantalla.

Ejercicios de programación

Páginas

miércoles, 17 de junio de 2026

Convertir toneladas a kilogramos en HTML y JavaScript