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 centímetros cúbicos a mililitros</h3>
    <form action="">
        <label for="">centímetros cúbicos:</label>
        <input type="number" id="cm3"><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 cm3 = parseFloat(document.getElementById('cm3').value);
            let convertir = cm3 * 1; 
            document.getElementById('resultado').value = `${convertir} ml`;
        }
    </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. Título del ejercicio

<h3>Convertir centímetros cúbicos a mililitros</h3>

Muestra el nombre del ejercicio en la página web para indicar al usuario qué conversión realizará el programa.

2. Campo para ingresar los centímetros cúbicos

Permite al usuario introducir una cantidad en centímetros cúbicos (cm³). El atributo id="cm3" sirve para que JavaScript pueda obtener el valor ingresado.

3. Botón Convertir

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

4. Botón Limpiar

Borra los datos ingresados en el formulario y permite realizar una nueva conversión.

5. Campo para mostrar el resultado

Muestra el resultado de la conversión en mililitros (ml).

6. Función JavaScript

function convertir(){ let cm3 = parseFloat( document.getElementById('cm3').value ); let convertir = cm3 * 1; document.getElementById('resultado').value = `${convertir} ml`; }

Esta función se ejecuta cuando el usuario presiona el botón Convertir.

parseFloat() convierte el valor ingresado a número decimal.
cm3 * 1 realiza la conversión.
El resultado se muestra en el campo con id resultado.

Ejemplo de funcionamiento

Dato ingresado: 250 cm³

Operación: 250 × 1 = 250

Resultado: 250 ml

Como 1 centímetro cúbico (cm³) equivale a 1 mililitro (ml), la conversión consiste simplemente en multiplicar por 1.

Ejercicios de programación

Páginas

jueves, 10 de abril de 2025

Convertir centímetros cúbicos a mililitros en HTML y JavaScript