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:

Este programa permite convertir una medida expresada en pulgadas a centímetros. El usuario introduce una cantidad de pulgadas, presiona el botón Convertir y el sistema muestra el resultado en centímetros.

1. Estructura básica del documento

<!DOCTYPE html>

Indica que el documento está escrito utilizando HTML5.

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

<head>
<meta charset="UTF-8">
<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 ñ.
viewport: Hace que la página sea adaptable a dispositivos móviles.
title: Define el título mostrado en la pestaña del navegador.

2. Título del ejercicio

<h3>Convertir pulgadas a centímetros</h3>

Muestra el nombre del ejercicio en la página web.

3. Campo para ingresar las pulgadas

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

Permite al usuario escribir la cantidad de pulgadas que desea convertir. El identificador id="pulgada" sirve para acceder al campo desde JavaScript.

4. Botón Convertir

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

5. Botón Limpiar

Borra los datos escritos en el formulario.

6. Campo de resultado

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

Muestra el resultado final de la conversión en centímetros.

7. Función JavaScript

function convertir(){
    let pulgada = parseFloat(
        document.getElementById('pulgada').value  
    );

    let convertir = pulgada * 2.54;

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

8. Explicación paso a paso

Paso 1: Obtener el valor ingresado por el usuario.

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

Busca el valor escrito en el campo de entrada y lo convierte a un número decimal.

Paso 2: Realizar la conversión.

let convertir = pulgada * 2.54;

Multiplica las pulgadas por 2.54 porque una pulgada equivale a 2.54 centímetros.

Paso 3: Mostrar el resultado.

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

Muestra el resultado calculado dentro del campo de texto de salida.

9. Ejemplo de ejecución

Dato ingresado: 10 pulgadas

Cálculo: 10 × 2.54

Resultado: 25.4 cm

10. Conclusión

Este ejercicio utiliza HTML para crear la interfaz de usuario y JavaScript para realizar la conversión mediante la fórmula: centímetros = pulgadas × 2.54. El resultado se muestra automáticamente al presionar el botón Convertir.

Ejercicios de programación

Páginas

jueves, 10 de abril de 2025

Convertir pulgadas a centímetros en HTML y JavaScript