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 metros a yardas</h3>
    <form action="">
        <label for="">metro:</label>
        <input type="number" id="metro"><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 metro = parseFloat(document.getElementById('metro').value);
            let convertir = metro * 1.09361; 
            document.getElementById('resultado').value = `${convertir} yd`;
        }
    </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 principal del documento

<!DOCTYPE html>

Indica que el documento está escrito en HTML5.

2. Configuración de la página

Dentro de la etiqueta <head> se encuentran las configuraciones principales:

charset="UTF-8": Permite mostrar correctamente caracteres especiales.
viewport: Hace que la página sea adaptable a dispositivos móviles.
title: Define el título que aparece en la pestaña del navegador.

3. Título del ejercicio

<h3>Convertir metros a yardas</h3>

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

4. Campo para ingresar metros

Permite al usuario ingresar una cantidad en metros. El identificador metro sirve para acceder al valor desde JavaScript.

5. Botón Convertir

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

6. Botón Limpiar

Borra los datos ingresados en el formulario y deja los campos vacíos.

7. Campo de resultado

Muestra el resultado de la conversión realizada.

8. Función JavaScript

function convertir(){
  let metro = parseFloat(document.getElementById('metro').value);
  let convertir = metro * 1.09361;
  document.getElementById('resultado').value = `${convertir} yd`;
}

Paso 1: Obtiene el valor ingresado en el campo metro.

Paso 2: Multiplica la cantidad de metros por 1.09361.

Esto se debe a que: 1 metro = 1.09361 yardas.

Paso 3: Muestra el resultado en el cuadro de texto resultado.

9. Ejemplo de ejecución

Si el usuario ingresa:

5 metros

La operación será:

5 × 1.09361 = 5.46805 yardas

Resultado mostrado:

5.46805 yd

Resumen

El programa solicita una cantidad en metros, realiza la conversión a yardas multiplicando por 1.09361 y muestra el resultado automáticamente en pantalla.

Ejercicios de programación

Páginas

miércoles, 9 de abril de 2025

Convertir metros a yardas en HTML y JavaScript