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:
1. HTML:
<html lang="es">: Define que el contenido de la página está en español.<head>: Contiene información importante sobre la página, como el tipo de caracteres y la configuración de la visualización.<meta charset="UTF-8">: Especifica que se usará la codificación de caracteres UTF-8 (para soportar caracteres especiales como acentos).<meta http-equiv="X-UA-Compatible" content="IE=edge">: Asegura que la página se visualice correctamente en navegadores modernos.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Hace que la página sea responsive, adaptándose a diferentes tamaños de pantalla.<title>: Define el título de la página que se muestra en la pestaña del navegador.
<body>: Contiene el contenido visible de la página.<h3>Calcular el perímetro de un eneágono</h3>: Muestra el título del ejercicio en la página.<form>: Define un formulario para que el usuario ingrese el valor del lado del eneágono.<label for="">lado:</label>: Texto que indica al usuario que ingrese el valor del lado.<input type="number" id="lado">: Campo donde el usuario puede escribir el valor del lado (es un número).<input type="button" value="Calcular" onclick="calcular()">: Botón que, al hacer clic, ejecuta la funcióncalcular(), que realiza el cálculo del perímetro.<input type="reset" value="Limpiar">: Botón que limpia los campos del formulario.<label for="">resultado:</label>: Texto que indica dónde aparecerá el resultado.<input type="text" id="resultado">: Campo donde se mostrará el resultado del cálculo.
2. JavaScript:
<script>: Es el bloque de código donde se escribe la lógica en JavaScript.function calcular() {...}: La funcióncalcular()es la que se ejecuta cuando el usuario hace clic en el botón "Calcular".let lado = parseFloat(document.getElementById('lado').value);: Obtiene el valor que el usuario ingresó en el campo de texto para el lado, lo convierte a un número decimal y lo guarda en la variablelado.let perimetro = lado * 9;: Calcula el perímetro multiplicando el valor del lado por 9 (porque el eneágono tiene 9 lados).document.getElementById('resultado').value = `${perimetro} cm`;: Muestra el resultado del cálculo en el campo de texto de "resultado", añadiendo la unidad "cm" para indicar que la medida es en centímetros.
No hay comentarios.:
Publicar un comentario