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 calcular el área de un triángulo utilizando HTML para crear la interfaz y JavaScript para realizar el cálculo matemático.
1. Declaración del documento
<!DOCTYPE html>Indica que el documento está escrito en HTML5.
2. Etiqueta HTML
<html lang="es">Es la etiqueta principal de la página. El atributo lang="es" indica que el idioma es español.
3. Sección <head>
<head>
...
</head>Contiene información sobre la página, como la codificación de caracteres, el tamaño adaptable para celulares y el título de la pestaña.
4. Título de la página
<title>Ejercicio HTML y JavaScript</title>Define el nombre que aparece en la pestaña del navegador.
5. Cuerpo de la página
<body>
...
</body>Aquí se muestra todo el contenido visible de la página.
6. Encabezado
<h3>Calcular el área de un triángulo</h3>Muestra el título del ejercicio en la página.
7. Formulario
<form>
...
</form>Agrupa todos los controles que utiliza el usuario para ingresar los datos.
8. Etiqueta Base
<label>base:</label>Muestra el texto que identifica el campo donde se escribe la base del triángulo.
9. Caja de texto para la base
<input type="number" id="base">Permite ingresar únicamente valores numéricos para la base. El identificador base permite acceder a este campo desde JavaScript.
10. Etiqueta Altura
<label>altura:</label>Indica que el siguiente campo corresponde a la altura del triángulo.
11. Caja de texto para la altura
<input type="number" id="altura">Permite ingresar únicamente números para la altura.
12. Botón Calcular
<input type="button"
value="Calcular"
onclick="calcular()">Cuando el usuario hace clic en este botón, se ejecuta la función calcular().
13. Botón Limpiar
<input type="reset" value="Limpiar">Borra automáticamente todos los datos escritos en el formulario.
14. Campo Resultado
<input type="text" id="resultado">Muestra el área calculada del triángulo.
15. Inicio del código JavaScript
<script>
...
</script>Aquí se escribe el código JavaScript encargado de realizar el cálculo.
16. Función calcular()
function calcular(){
}Esta función contiene todas las instrucciones necesarias para calcular el área del triángulo. Se ejecuta cuando el usuario presiona el botón Calcular.
17. Obtener la base
let base = parseFloat(
document.getElementById('base').value
);Busca el valor escrito en la caja de texto base y lo convierte en un número decimal utilizando parseFloat().
18. Obtener la altura
let altura = parseFloat(
document.getElementById('altura').value
);Obtiene el valor ingresado en la caja de texto de la altura y también lo convierte en número.
19. Calcular el área
let area = (base * altura) / 2;Aplica la fórmula matemática del área de un triángulo:
Área = (Base × Altura) ÷ 2
20. Mostrar el resultado
document.getElementById('resultado').value =
`${area} cm²`;Muestra el resultado del cálculo dentro de la caja de texto resultado y agrega la unidad cm².
Resumen
El programa sigue estos pasos:
- El usuario escribe la base.
- El usuario escribe la altura.
- Hace clic en el botón Calcular.
- JavaScript obtiene ambos valores.
- Calcula el área usando la fórmula del triángulo.
- El resultado aparece en la caja de texto correspondiente.
No hay comentarios.:
Publicar un comentario