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 yardas a pies</h3>
    <form action="">
        <label for="">yarda:</label>
        <input type="number" id="yarda"><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 yarda = parseFloat(document.getElementById('yarda').value);
            let convertir = yarda * 3;
            document.getElementById('resultado').value = `${convertir} ft`;
        }
    </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 yardas a pies utilizando HTML para crear la interfaz y JavaScript para realizar el cálculo.

1. Declaración del documento HTML

<!DOCTYPE html>

Indica al navegador que el documento está escrito en HTML5.

2. Etiqueta HTML principal

Define el inicio del documento HTML y especifica que el idioma es español.

3. Sección <head>

<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>

charset="UTF-8": Permite usar caracteres especiales como tildes y la letra ñ.
X-UA-Compatible: Mejora la compatibilidad con navegadores.
viewport: Hace que la página sea adaptable a dispositivos móviles.
title: Define el título mostrado en la pestaña del navegador.

4. Título del ejercicio

<h3>Convertir yardas a pies</h3>

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

5. Formulario

Contiene los controles que permiten ingresar datos y mostrar resultados.

6. Campo para ingresar yardas

<label>yarda:</label>
<input type="number" id="yarda">

label: Muestra el texto descriptivo.
input type="number": Permite ingresar únicamente números.
id="yarda": Identificador utilizado por JavaScript para acceder al valor ingresado.

7. Botón Convertir

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

8. Botón Limpiar

Borra los datos ingresados y el resultado mostrado.

9. Campo para mostrar el resultado

<label>resultado:</label>
<input type="text" id="resultado">

Muestra el resultado de la conversión realizada.

10. Función JavaScript

function convertir(){
  let yarda = parseFloat(document.getElementById('yarda').value);
  let convertir = yarda * 3;
  document.getElementById('resultado').value = `${convertir} ft`;
}

11. Explicación línea por línea

function convertir(): Define una función llamada convertir.
document.getElementById('yarda').value: Obtiene el valor que el usuario escribió.
parseFloat(): Convierte el texto ingresado en un número decimal.
let convertir = yarda * 3;: Multiplica las yardas por 3 porque 1 yarda = 3 pies.
document.getElementById('resultado').value: Coloca el resultado dentro del campo de texto.
ft: Es la abreviatura de pies (feet).

12. Ejemplo de funcionamiento

Si el usuario escribe:

El programa realiza el cálculo:

8 × 3 = 24

Y muestra:

24 ft

13. Conclusión

Este ejercicio enseña cómo capturar datos desde un formulario HTML, procesarlos mediante JavaScript y mostrar el resultado al usuario. La conversión se realiza utilizando la equivalencia: 1 yarda = 3 pies.

Ejercicios de programación

Páginas

jueves, 18 de junio de 2026

Convertir yardas a pies en HTML y JavaScript