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 ingresar una cantidad en centímetros y convertirla a metros. Cuando el usuario presiona el botón Convertir, JavaScript realiza el cálculo y muestra el resultado en la caja de texto.
Explicación de cada parte del código
| Código | Explicación |
|---|---|
| <!DOCTYPE html> | Indica que el documento está escrito en 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 de la página. |
| <meta charset="UTF-8"> | Permite mostrar correctamente letras, números y caracteres especiales. |
| <meta name="viewport"...> | Hace que la página se adapte correctamente a celulares y tablets. |
| <title> | Es el título que aparece en la pestaña del navegador. |
| <body> | Contiene todo el contenido visible de la página. |
| <h3> | Muestra el título "Convertir centímetros a metros". |
| <form> | Agrupa todos los controles del formulario. |
| <label> | Muestra el texto que identifica el campo donde se escriben los centímetros. |
| <input type="number" id="centimetro"> | Permite ingresar únicamente números en centímetros. |
| <input type="button"> | Crea el botón Convertir que ejecuta la función convertir(). |
| <input type="reset"> | Limpia todos los datos del formulario. |
| <input type="text" id="resultado"> | Muestra el resultado de la conversión. |
| <script> | Contiene el código JavaScript. |
| function convertir(){ } | Define la función que realiza toda la conversión. |
| let centimetro = parseFloat(...) | Obtiene el número escrito por el usuario y lo convierte a un valor decimal. |
| let convertir = centimetro * 0.01; | Convierte los centímetros a metros multiplicando por 0.01. |
| document.getElementById('resultado').value = `${convertir} m`; | Muestra el resultado en la caja de texto agregando la unidad m. |
Funcionamiento de la función convertir()
function convertir(){
let centimetro = parseFloat(document.getElementById('centimetro').value);
let convertir = centimetro * 0.01;
document.getElementById('resultado').value = `${convertir} m`;
}
Paso 1: Lee el número que el usuario escribió en el campo de centímetros.
Paso 2: Multiplica ese número por 0.01, ya que un centímetro equivale a 0.01 metros.
Paso 3: Coloca el resultado en la caja de texto de salida y agrega la letra m para indicar que el resultado está en metros.
Ejemplo de ejecución
| Centímetros | Operación | Resultado |
|---|---|---|
| 100 | 100 × 0.01 | 1 m |
| 250 | 250 × 0.01 | 2.5 m |
| 50 | 50 × 0.01 | 0.5 m |
Resumen
Este ejercicio enseña cómo obtener un dato desde un formulario, realizar un cálculo sencillo con JavaScript y mostrar el resultado nuevamente en la página. También permite comprender el uso de funciones, variables, parseFloat(), getElementById() y la propiedad value.
No hay comentarios.:
Publicar un comentario