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 yardas a centímetros utilizando HTML para crear la interfaz y JavaScript para realizar el cálculo.
1. Estructura básica del documento
<!DOCTYPE html> <html lang="es">
- <!DOCTYPE html>: Indica que se utiliza HTML5.
- <html lang="es">: Define el idioma principal de la página como español.
2. Configuración del documento
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejercicio HTML y JavaScript</title>
</head>
- charset="UTF-8": Permite mostrar correctamente caracteres especiales.
- X-UA-Compatible: Mejora la compatibilidad con navegadores.
- viewport: Hace que la página sea adaptable a celulares y tablets.
- title: Define el título que aparece en la pestaña del navegador.
3. Título del ejercicio
<h3>Convertir yardas a centímetros</h3>
Muestra el nombre del ejercicio en la página web.
4. Campo para ingresar las yardas
<label>yarda:</label> <input type="number" id="yarda">
- label: Muestra el texto "yarda:".
- input type="number": Permite ingresar números.
- id="yarda": Identificador utilizado por JavaScript para acceder al dato ingresado.
5. Botones del formulario
<input type="button" value="Convertir" onclick="convertir()"> <input type="reset" value="Limpiar">
- Convertir: Ejecuta la función convertir().
- Limpiar: Borra los datos ingresados en el formulario.
6. Campo para mostrar el resultado
<label>resultado:</label> <input type="text" id="resultado">
- Muestra el resultado de la conversión.
- id="resultado": Permite que JavaScript escriba el resultado en este campo.
7. Función JavaScript
function convertir(){
let yarda = parseFloat(
document.getElementById('yarda').value
);
let convertir = yarda * 91.44;
document.getElementById('resultado').value =
`${convertir} cm`;
}
Paso 1: Obtener la cantidad de yardas
let yarda = parseFloat(
document.getElementById('yarda').value
);
Obtiene el valor ingresado por el usuario y lo convierte en un número decimal.
Paso 2: Realizar la conversión
let convertir = yarda * 91.44;
Multiplica la cantidad de yardas por 91.44, ya que una yarda equivale a 91.44 centímetros.
Paso 3: Mostrar el resultado
document.getElementById('resultado').value =
`${convertir} cm`;
El resultado se muestra automáticamente en el campo de texto acompañado de la unidad "cm".
Ejemplo de ejecución
Si el usuario ingresa:
5
El cálculo realizado será:
5 × 91.44 = 457.2
Resultado mostrado:
457.2 cm
Resumen
El programa solicita una cantidad de yardas, la convierte a centímetros multiplicándola por 91.44 y muestra el resultado al presionar el botón Convertir.
No hay comentarios.:
Publicar un comentario