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.
<textarea></textarea> --> define un control de entrada de texto de varias líneas.
<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.
`${}` --> los literales de plantilla (cadenas de plantilla) le permiten utilizar cadenas o expresiones incrustadas en forma de cadena.
\n --> es el carácter de salto de línea y se usa para indicar el fin de una línea de texto y el inicio de una línea nueva.
document.getElementById() --> devuelve un elemento con un valor especificado.
.value --> establece o devuelve el valor del atributo de valor de un campo de texto.
Explicación del Código:
Este programa permite ingresar una cantidad en centímetros y convertirla automáticamente a:
- Pulgadas (in)
- Metros (m)
- Milímetros (mm)
1. Estructura HTML
<!DOCTYPE html>
Indica que el documento utiliza la versión HTML5.
<html lang="es">
Define el inicio de la página web y especifica que el idioma es español.
<head>
Contiene información importante de la página, como:
- La codificación UTF-8.
- La compatibilidad con navegadores.
- La adaptación a celulares.
- El título de la pestaña.
<body>
Contiene todo lo que el usuario puede ver e interactuar.
2. Título
Muestra el nombre del ejercicio en la página.
3. Formulario
Agrupa todos los elementos del formulario.
4. Etiqueta
Indica al usuario qué dato debe escribir.
5. Caja de texto
Permite ingresar únicamente números y el identificador centimetro sirve para acceder al valor desde JavaScript.
6. Botón Convertir
Cuando el usuario hace clic:
- Se ejecuta la función convertir().
- Se realizan todas las conversiones.
- Se muestran los resultados.
7. Botón Limpiar
Borra todos los datos escritos en el formulario.
8. Área de resultados
Aquí aparecen las conversiones realizadas por el programa.
9. Inicio de JavaScript
Dentro del bloque script se escribe todo el código JavaScript.
10. Función convertir()
Esta función contiene todas las instrucciones necesarias para realizar las conversiones.
11. Leer el valor ingresado
Este código hace tres cosas:
- Busca la caja de texto.
- Obtiene el número escrito.
- Lo convierte a número decimal usando parseFloat().
12. Conversión a pulgadas
Multiplica los centímetros por 0.393701 para obtener pulgadas.
Ejemplo:
13. Conversión a metros
Cada centímetro equivale a 0.01 metros.
Ejemplo:
14. Conversión a milímetros
Cada centímetro equivale a 10 milímetros.
Ejemplo:
15. Mostrar el resultado
Este código:
- Busca el área de resultados.
- Escribe los valores convertidos.
- ${variable} inserta el contenido de cada variable dentro del texto.
- \n crea un salto de línea para que cada resultado aparezca en una línea diferente.
Resumen del funcionamiento
- El usuario escribe una cantidad en centímetros.
- Hace clic en Convertir.
- JavaScript obtiene el número ingresado.
- Calcula las pulgadas.
- Calcula los metros.
- Calcula los milímetros.
- Muestra todas las conversiones en el área de resultados.
- Si se pulsa Limpiar, el formulario vuelve a quedar vacío.
No hay comentarios.:
Publicar un comentario