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:
| Código | Explicación |
|---|---|
| <!DOCTYPE html> | Indica que el documento utiliza HTML5. |
| <html lang="es"> | Define el inicio del documento HTML e indica que el idioma es español. |
| <head> | Contiene la información de configuración del documento. |
| <meta charset="UTF-8"> | Permite mostrar correctamente caracteres especiales como la ñ y los acentos. |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | Hace que Internet Explorer utilice la versión más reciente de su motor de renderizado. |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | Hace que la página sea adaptable a celulares, tabletas y computadoras. |
| <title> | Define el título que aparece en la pestaña del navegador. |
| <body> | Contiene todo el contenido visible de la página web. |
| <h3>Convertir metros a pulgadas</h3> | Muestra el título del ejercicio. |
| <form> | Agrupa todos los elementos del formulario. |
| <label>metro:</label> | Etiqueta que indica al usuario que debe ingresar la cantidad de metros. |
| <input type="number" id="metro"> | Permite ingresar únicamente números. El identificador metro permite acceder al dato desde JavaScript. |
| onclick="convertir()" | Al hacer clic en el botón, ejecuta la función convertir(). |
| <input type="reset"> | Limpia todos los campos del formulario. |
| <input type="text" id="resultado"> | Muestra el resultado de la conversión. |
| <script> | Contiene el código JavaScript. |
| function convertir() | Crea una función llamada convertir, la cual realiza toda la conversión. |
| let metro = parseFloat(document.getElementById('metro').value); | Obtiene el valor escrito por el usuario y lo convierte en un número decimal. |
| let convertir = metro * 39.3701; | Convierte los metros a pulgadas multiplicando por 39.3701. |
| document.getElementById('resultado').value = `${convertir} in`; | Muestra el resultado dentro del cuadro de texto agregando la unidad in (pulgadas). |
| </script> | Finaliza el código JavaScript. |
| </body> | Finaliza el contenido visible de la página. |
| </html> | Finaliza el documento HTML. |
Resumen del funcionamiento
El usuario escribe una cantidad de metros y hace clic en el botón Convertir. La función convertir() obtiene ese valor, lo multiplica por 39.3701, ya que 1 metro equivale a 39.3701 pulgadas, y finalmente muestra el resultado en el campo de texto acompañado de la unidad in.
No hay comentarios.:
Publicar un comentario