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 pies a metros</h3>
    <form action="">
        <label for="">pie:</label>
        <input type="number" id="pie"><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 pie = parseFloat(document.getElementById('pie').value);
            let convertir = pie * 0.3048; 
            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:

Este programa web permite convertir una cantidad de pies a metros utilizando HTML y JavaScript. El usuario introduce un valor, presiona el botón Convertir y el resultado aparece automáticamente.

1. Título de la página

<h3>Convertir pies a metros</h3>

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

2. Campo para ingresar los pies

Este campo permite al usuario ingresar la cantidad de pies que desea convertir.

type="number": acepta únicamente números.
id="pie": identifica el campo para usarlo desde JavaScript.

3. Botón Convertir

Al hacer clic en este botón se ejecuta la función convertir().

value="Convertir": texto mostrado en el botón.
onclick: ejecuta una función al hacer clic.

4. Botón Limpiar

Borra los datos del formulario y permite realizar una nueva conversión.

5. Campo Resultado

Aquí se muestra el resultado de la conversión realizada por JavaScript.

6. Función JavaScript

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

Esta función se encarga de realizar la conversión de pies a metros.

document.getElementById('pie').value obtiene el valor ingresado por el usuario.
parseFloat() convierte el texto ingresado en un número decimal.
pie * 0.3048 calcula los metros correspondientes.
document.getElementById('resultado').value muestra el resultado.
`${convertir} m` agrega la unidad de medida "m".

7. Fórmula Utilizada

Metros = Pies × 0.3048

Un pie equivale a 0.3048 metros, por lo que se multiplica el valor ingresado por esta constante.

8. Ejemplo

Si el usuario ingresa:

10 pies

El cálculo será:

10 × 0.3048 = 3.048

Resultado mostrado:

3.048 m

Resumen

El programa solicita una cantidad en pies, la convierte a metros utilizando JavaScript y muestra el resultado automáticamente en la página web mediante una interfaz sencilla y fácil de usar.

Ejercicios de programación

Páginas

martes, 16 de junio de 2026

Convertir pies a metros en HTML y JavaScript