Código del ejercicio:
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 básica
<!DOCTYPE html>: Declara que es un documento HTML5.
<html lang="es">: Indica que el idioma principal del sitio es español.
2. Encabezado (head)
<meta charset="UTF-8">: Permite mostrar caracteres especiales como tildes y ñ.<meta http-equiv="X-UA-Compatible" content="IE=edge">: Mejora compatibilidad con navegadores antiguos.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ajusta el diseño en dispositivos móviles.<title>: Título que aparece en la pestaña del navegador.
3. Cuerpo (body) y contenido
<h3>: Muestra el título "Convertir centímetros cúbicos a mililitros".
Formulario
<input type="number" id="cm3">: Campo donde el usuario escribe los centímetros cúbicos.<input type="button" value="Convertir" onclick="convertir()">: Botón que ejecuta la función de conversión.<input type="reset" value="Limpiar">: Borra los campos del formulario.<input type="text" id="resultado">: Campo donde se mostrará el resultado.
4. Script de JavaScript
Función que convierte centímetros cúbicos (cm³) a mililitros (ml):
<script>
function convertir() {
let cm3 = parseFloat(document.getElementById('cm3').value); // Captura el valor del input
let convertir = cm3 * 1; // Realiza la conversión (1 cm³ = 1 ml)
document.getElementById('resultado').value = `${convertir} ml`; // Muestra el resultado con unidad
}
</script>
5. Resultado
Después de hacer clic en "Convertir", el valor ingresado se multiplica por 1 y se muestra con la unidad "ml".
No hay comentarios.:
Publicar un comentario