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 kilómetros a metros</h3>
    <form action="">
        <label for="">kilómetro:</label>
        <input type="number" id="kilometro"><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 kilometro = parseFloat(document.getElementById('kilometro').value);
            let convertir = kilometro * 1000; 
            document.getElementById('resultado').value = `${convertir} m`;
        }
    </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 convertir una cantidad de kilómetros a metros utilizando HTML para la interfaz y JavaScript para realizar el cálculo.

¿Cómo funciona el programa?

El usuario ingresa una cantidad de kilómetros.
Hace clic en el botón Convertir.
JavaScript obtiene el valor ingresado.
El valor se multiplica por 1000.
El resultado se muestra en metros.

Explicación de la estructura HTML

Código	Función
<h3>Convertir kilómetros a metros</h3>	Muestra el título del ejercicio.
<input type="number" id="kilometro">	Permite ingresar la cantidad de kilómetros.
<input type="button" value="Convertir">	Botón que ejecuta la conversión.
onclick="convertir()"	Llama a la función convertir cuando se hace clic en el botón.
<input type="reset">	Limpia los campos del formulario.
<input type="text" id="resultado">	Muestra el resultado de la conversión.

Explicación de la función JavaScript

function convertir(){
    let kilometro = parseFloat(
        document.getElementById('kilometro').value  
    );

    let convertir = kilometro * 1000;

    document.getElementById('resultado').value =
        `${convertir} m`;
}

Línea de código	Explicación
function convertir()	Define una función llamada convertir.
document.getElementById('kilometro').value	Obtiene el valor ingresado por el usuario.
parseFloat()	Convierte el texto ingresado a un número decimal.
let kilometro	Guarda el valor ingresado en una variable.
let convertir = kilometro * 1000	Multiplica los kilómetros por 1000 para obtener metros.
document.getElementById('resultado').value	Muestra el resultado en el campo de texto.
`${convertir} m`	Agrega la unidad de medida "m" al resultado.

Ejemplo de ejecución

Dato ingresado: 3 kilómetros

Operación: 3 × 1000

Resultado: 3000 m

Conclusión

Este ejercicio muestra cómo capturar datos desde un formulario HTML, procesarlos con JavaScript y mostrar el resultado al usuario. La conversión es sencilla porque un kilómetro equivale a 1000 metros.

Ejercicios de programación

Páginas

miércoles, 9 de abril de 2025

Convertir kilómetros a metros en HTML y JavaScript