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.
function --> es un bloque de código diseñado para realizar una tarea en particular.
let --> permite declarar variables limitando su alcance (scope) al bloque, declaración, o expresión donde se está usando.
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 metros a kilómetros. El usuario escribe un valor en metros, presiona el botón Convertir y el resultado aparece automáticamente en la pantalla.
1. Declaración del documento HTML
-
<!DOCTYPE html>
Indica que el documento utiliza HTML5. -
<html lang="es">
Informa que la página está escrita en español.
2. Sección <head>
-
<meta charset="UTF-8">
Permite mostrar correctamente letras con acentos y caracteres especiales. -
<meta name="viewport">
Hace que la página se adapte correctamente a celulares, tabletas y computadoras. -
<title>
Define el nombre que aparece en la pestaña del navegador.
3. Título del ejercicio
<h3>Convertir metros a kilómetros</h3>
Muestra el título del ejercicio para indicar al usuario cuál es la función del programa.
4. Formulario
<form> contiene todos los controles que utiliza el usuario para realizar la conversión.
5. Campo para ingresar los metros
<label>metro:</label>
Muestra el texto metro: para indicar qué dato debe escribir el usuario.
<input type="number" id="metro">
Crea una caja donde solamente se pueden ingresar números. El identificador
id="metro" permite acceder a este valor desde JavaScript.
6. Botón Convertir
<input type="button" value="Convertir" onclick="convertir()">
Cuando el usuario hace clic en este botón, se ejecuta la función convertir(), que realiza el cálculo.
7. Botón Limpiar
<input type="reset" value="Limpiar">
Borra los datos escritos en el formulario y deja los campos vacíos.
8. Campo donde aparece el resultado
<input type="text" id="resultado">
Muestra el resultado de la conversión en kilómetros.
9. Inicio del código JavaScript
<script>
Dentro de esta etiqueta se escribe el código JavaScript que realiza la conversión.
10. Función convertir()
function convertir(){
Se crea una función llamada convertir, la cual se ejecuta cuando el usuario presiona el botón Convertir.
11. Obtener el valor ingresado
let metro = parseFloat(document.getElementById('metro').value);
Esta línea obtiene el número que escribió el usuario en la caja de texto y lo convierte a un número decimal utilizando parseFloat().
12. Realizar la conversión
let convertir = (metro * 1) / 1000;
Aquí se realiza la operación matemática para convertir metros a kilómetros.
La fórmula es:
Kilómetros = Metros ÷ 1000
Por ejemplo:
- 1000 metros = 1 kilómetro.
- 2500 metros = 2.5 kilómetros.
- 500 metros = 0.5 kilómetros.
13. Mostrar el resultado
document.getElementById('resultado').value = `${convertir} km`;
El resultado obtenido se muestra en la caja de texto llamada resultado, agregando la unidad km.
14. Fin del script
</script>
Indica el final del código JavaScript.
15. Funcionamiento general del programa
- El usuario escribe una cantidad en metros.
- Presiona el botón Convertir.
- JavaScript obtiene el número ingresado.
- Divide el valor entre 1000 para convertirlo a kilómetros.
- El resultado se muestra automáticamente en la caja de texto.
Resumen
Este programa combina HTML y JavaScript para realizar una conversión de unidades. HTML crea la interfaz con los campos y botones, mientras que JavaScript obtiene el valor ingresado, realiza la operación matemática y muestra el resultado en pantalla de forma rápida y automática.
No hay comentarios.:
Publicar un comentario