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 general del documento

<!DOCTYPE html>: Indica que el documento usa HTML5.

<html lang="es">: Comienza el documento HTML y define que el idioma es español.

2. Encabezado del sitio

<meta charset="UTF-8">: Permite usar acentos y caracteres especiales.
<meta http-equiv="X-UA-Compatible" content="IE=edge">: Mejora la compatibilidad con navegadores antiguos.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Hace que la página sea adaptable a pantallas pequeñas como móviles.
<title>: Título que aparece en la pestaña del navegador.

3. Contenido visible (Body)

<h3>Convertir metros a yardas</h3>: Muestra un título en la página.

4. Formulario

<label>metro:</label>: Etiqueta que indica qué debe ingresar el usuario.
<input type="number" id="metro">: Campo donde el usuario escribe la cantidad en metros.
<input type="button" value="Convertir" onclick="convertir()">: Botón que ejecuta la función JavaScript al hacer clic.
<input type="reset" value="Limpiar">: Borra el contenido del formulario.
<input type="text" id="resultado">: Muestra el resultado de la conversión.

5. Script JavaScript

La función convertir() hace lo siguiente:

Obtiene el valor ingresado por el usuario desde el campo con id="metro".
Convierte ese valor de texto a número con parseFloat.
Multiplica los metros por 1.09361 para obtener yardas.
Muestra el resultado en el campo con id="resultado", agregando la unidad "yd".

Ejemplo de la función:


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

Esta función convierte metros a yardas y muestra el resultado automáticamente cuando se hace clic en el botón "Convertir".

Ejercicios de programación

Páginas

miércoles, 9 de abril de 2025

Convertir metros a yardas en HTML y JavaScript