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 pies</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 * 3.28084;
            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:

1. Declaración del documento HTML

<!DOCTYPE html>

Indica que el documento está escrito en HTML5. Gracias a esta declaración, el navegador interpreta correctamente todas las etiquetas del documento.

2. Etiqueta <html>

Es la etiqueta principal del documento. El atributo lang="es" indica que la página está escrita en español.

3. Sección <head>

Contiene información importante para el navegador, como la codificación de caracteres, la adaptación a dispositivos móviles y el título de la página.

4. Título del ejercicio

<h3>Convertir metros a pies</h3>

Muestra el nombre del ejercicio en la página.

5. Formulario

Agrupa todos los controles del ejercicio, como las cajas de texto y los botones.

6. Caja para ingresar los metros

Permite al usuario escribir la cantidad de metros que desea convertir. Al ser de tipo number, solo admite números.

7. Botón Convertir

Cuando el usuario hace clic en este botón, se ejecuta la función convertir(), que realiza el cálculo.

8. Botón Limpiar

Limpia todas las cajas del formulario para realizar una nueva conversión.

9. Caja de resultado

Aquí se muestra el resultado de la conversión en pies.

10. Etiqueta <script>

Contiene el código JavaScript que realiza el funcionamiento del ejercicio.

11. Función convertir()

function convertir(){ }

Esta función se ejecuta cuando el usuario presiona el botón Convertir. Su objetivo es leer el dato ingresado, realizar el cálculo y mostrar el resultado.

12. Obtener el valor ingresado

let metro = parseFloat(document.getElementById('metro').value);

document.getElementById('metro') busca la caja donde el usuario escribió el número.
.value obtiene el valor escrito.
parseFloat() convierte ese dato en un número decimal para poder realizar operaciones matemáticas.

13. Conversión de metros a pies

let convertir = metro * 3.28084;

Multiplica la cantidad de metros por 3.28084, porque un metro equivale aproximadamente a 3.28084 pies.

Ejemplo: Si el usuario escribe 8 metros, el programa realiza el cálculo:

8 × 3.28084 = 26.24672 pies

14. Mostrar el resultado

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

El programa coloca el resultado dentro de la caja de texto y agrega la unidad ft, que significa pies.

15. Funcionamiento del programa

El usuario escribe una cantidad de metros.
Hace clic en el botón Convertir.
JavaScript obtiene el número ingresado.
Multiplica el valor por 3.28084.
Finalmente muestra el resultado en pies (ft).

Ejercicios de programación

Páginas

domingo, 21 de junio de 2026

Convertir metros a pies en HTML y JavaScript