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 pulgadas a centímetros</h3>
    <form action="">
        <label for="">pulgada:</label>
        <input type="number" id="pulgada"><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 pulgada = parseFloat(document.getElementById('pulgada').value);
            let convertir = pulgada * 2.54; 
            document.getElementById('resultado').value = `${convertir} cm`;
        }
    </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 HTML

El siguiente código HTML crea un formulario donde el usuario puede ingresar un valor en pulgadas y convertirlo a centímetros utilizando un script en JavaScript.

HTML:

<h3>Convertir pulgadas a centímetros</h3>: Título principal que explica el propósito del ejercicio.
<form>: Un formulario para que el usuario ingrese datos y obtenga resultados.
<label> y <input> (pulgada): Se utiliza para mostrar un campo donde el usuario ingresa el valor en pulgadas.
<input type="button" value="Convertir">: Un botón que ejecutará la función JavaScript convertir() cuando se haga clic.
<input type="reset" value="Limpiar">: Un botón para reiniciar el formulario y limpiar los valores.
<input type="text" id="resultado">: Un campo de texto para mostrar el resultado de la conversión.

2. Explicación de la Función JavaScript

En el siguiente bloque de código se realiza la conversión de pulgadas a centímetros al presionar el botón "Convertir".

JavaScript:

function convertir(): Define una función que se ejecuta cuando el usuario hace clic en el botón "Convertir".
let pulgada = parseFloat(document.getElementById('pulgada').value);: Obtiene el valor que el usuario ha ingresado en el campo de pulgadas, lo convierte a un número de tipo flotante.
let convertir = pulgada * 2.54;: Realiza la conversión multiplicando las pulgadas por 2.54 (1 pulgada = 2.54 cm).
document.getElementById('resultado').value = `${convertir} cm`;: Muestra el resultado de la conversión en el campo de texto "resultado", añadiendo "cm" al final para indicar la unidad.

Resumen

El usuario ingresa un valor en pulgadas, hace clic en el botón "Convertir" y el código calcula y muestra el resultado en centímetros en el campo "resultado".

Ejercicios de programación

Páginas

jueves, 10 de abril de 2025

Convertir pulgadas a centímetros en HTML y JavaScript