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:
Este programa permite convertir una cantidad de pulgadas a metros utilizando HTML para la interfaz y JavaScript para realizar el cálculo.
1. Estructura básica del documento
La etiqueta <!DOCTYPE html> indica que el documento utiliza HTML5.
La etiqueta <html lang="es"> establece que el contenido está escrito en español.
2. Encabezado del documento
Dentro de la etiqueta <head> se configuran los datos principales de la página:
- charset="UTF-8": permite mostrar correctamente caracteres especiales como tildes y ñ.
- viewport: adapta la página a dispositivos móviles.
- title: define el título mostrado en la pestaña del navegador.
3. Título del ejercicio
La etiqueta <h3> muestra el texto:
"Convertir pulgadas a metros", indicando la función principal del programa.
4. Formulario
El formulario contiene los elementos necesarios para ingresar los datos y mostrar el resultado.
- Label pulgadas: indica al usuario el dato que debe ingresar.
- Input pulgadas: permite escribir la cantidad de pulgadas.
- Botón Convertir: ejecuta la función JavaScript
convertir(). - Botón Limpiar: borra los datos ingresados.
- Input resultado: muestra el valor convertido a metros.
5. Función JavaScript
La función convertir() se ejecuta cuando el usuario presiona el botón
Convertir.
Paso 1: Obtener el valor ingresado
let pulgadas = parseFloat(document.getElementById('pulgadas').value);
Se obtiene el valor escrito por el usuario y se convierte a un número decimal utilizando
parseFloat().
Paso 2: Realizar la conversión
let convertir = pulgadas * 0.0254;
El valor ingresado se multiplica por 0.0254, ya que 1 pulgada equivale a 0.0254 metros.
Paso 3: Mostrar el resultado
document.getElementById('resultado').value = `${convertir} m`;
El resultado calculado se muestra en el campo de texto identificado con
resultado y se agrega la unidad m para indicar metros.
6. Ejemplo de ejecución
Si el usuario ingresa 100 pulgadas:
100 × 0.0254 = 2.54
El programa mostrará:
2.54 m
Resumen
El programa solicita una cantidad de pulgadas, la multiplica por 0.0254 para convertirla a metros y finalmente muestra el resultado en pantalla de forma automática.
No hay comentarios.:
Publicar un comentario