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 milímetros</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 * 1000;
            document.getElementById('resultado').value = `${convertir} mm`;
        }
    </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 ingresada en metros (m) a milímetros (mm). Para ello utiliza HTML para crear la interfaz y JavaScript para realizar el cálculo.

1. Título del ejercicio

<h3>Convertir metros a milímetros</h3>

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

2. Campo para ingresar los metros

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

label: Muestra el texto "metro:".
input type="number": Permite ingresar únicamente números.
id="metro": Identifica el campo para que JavaScript pueda leer su valor.

3. Botón Convertir

Muestra un botón con el texto "Convertir".
Cuando el usuario hace clic, se ejecuta la función convertir().

4. Botón Limpiar

Borra los datos escritos en el formulario.

5. Campo de resultado

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

Muestra el resultado de la conversión.
JavaScript escribe el resultado dentro de este campo.

6. Función JavaScript

function convertir(){
    let metro = parseFloat(document.getElementById('metro').value);  
    let convertir = metro * 1000;
    document.getElementById('resultado').value = `${convertir} mm`;
}

7. Explicación paso a paso

Paso 1: Obtener el valor ingresado

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

Obtiene el número escrito por el usuario.
parseFloat() convierte el texto a un número decimal.

Paso 2: Convertir metros a milímetros

let convertir = metro * 1000;

Multiplica la cantidad de metros por 1000.
Esto se debe a que 1 metro = 1000 milímetros.

Paso 3: Mostrar el resultado

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

Escribe el resultado dentro del campo de texto.
Agrega la unidad mm para indicar que el valor está en milímetros.

8. Ejemplo de funcionamiento

Si el usuario ingresa:

La operación será:

3 × 1000 = 3000

Resultado mostrado:

3000 mm

Resumen

El programa solicita una cantidad en metros, la multiplica por 1000 para convertirla a milímetros y finalmente muestra el resultado en pantalla mediante JavaScript.

Ejercicios de programación

Páginas

sábado, 20 de junio de 2026

Convertir metros a milímetros en HTML y JavaScript