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:

1. Estructura básica

<!DOCTYPE html>: Define el tipo de documento como HTML5.

<html lang="es">: Indica que el idioma de la página es español.

2. Encabezado del documento

<head>: Contiene información que no se muestra directamente en la página.

<meta charset="UTF-8">: Permite el uso de caracteres especiales.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Hace que la página se adapte a dispositivos móviles.
<title>: Define el título que aparece en la pestaña del navegador.

3. Cuerpo del documento

<body>: Contiene el contenido visible de la página.

Formulario HTML

<h3>: Muestra un título "Convertir kilómetros a metros".
<form>: Agrupa los elementos del formulario.
<input type="number" id="kilometro">: Campo donde se escribe el número de kilómetros.
<input type="button" value="Convertir" onclick="convertir()">: Botón que activa la función para convertir.
<input type="reset">: Borra los campos del formulario.
<input type="text" id="resultado">: Muestra el resultado de la conversión.

Script JavaScript


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

La función convertir() se ejecuta al hacer clic en el botón.
parseFloat() convierte el valor escrito en número decimal.
Se multiplica por 1000 para obtener metros.
El resultado se muestra con la unidad "m".

Este ejercicio es útil para aprender cómo usar formularios e interactuar con el usuario usando JavaScript.

Ejercicios de programación

Páginas

miércoles, 9 de abril de 2025

Convertir kilómetros a metros en HTML y JavaScript