Calcular nota final de unidad y laboratorio - Ejercicio resuelto con JavaScript
Hoy vamos a resolver un ejercicio con JavaScript, HTML y CSS. La solicitud dice así:
Diseñar y desarrollar un formulario para calcular la nota de la unidad de una asignatura.El usuario debe enviar los datos mediante un formulario en HTML
Por medio de JavaScript procesar los datos recibidos y enviarlos a otra página donde debe imprimir el nombre del estudiante, el nombre de la asignatura y las notas obtenidas y el calculo de la nota del laboratorio, de la nota del parcial y de la unidad.
Evitar que el formulario se envíe si hay uno o más campos vacíos.
Si hay notas menores a 0.0 y/o mayores a 10.0 evitar que el formulario se envíe y mandar un alert al usuario para que corrija los datos.
Datos a solicitar:
Datos a imprimir:
Porcentajes a tomar en cuenta:
La nota de la unidad se divide en:
El laboratorio es el promedio de la nota de dos talleres
Veamos entonces la solución a este ejercicio propuesto de programación con JavaScript.
Primero veamos el formulario, es un simple formulario con varios input. No tiene action pero tiene un id que vamos a usar para obtener una referencia al mismo desde JavaScript:
<!DOCTYPE html>
<html lang="en">
<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>Calcular nota de la unidad</title>
<link href="./bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row align-items-start">
<form action-xhr="#" id="formulario">
<div class="col">
<div class="mb-3">
<label for="nombreEstudiante" class="form-label">Nombre:</label>
<input type="text" class="form-control" id="nombreEstudiante"
placeholder="Nombre del estudiante">
</div>
<div class="mb-3">
<label for="carnetEstudiante" class="form-label">Carnet:</label>
<input type="text" class="form-control" id="carnetEstudiante"
placeholder="Carnet del estudiante">
</div>
<div class="mb-3">
<label for="nombreAsignatura" class="form-label">Asignatura:</label>
<input type="text" class="form-control" id="nombreAsignatura"
placeholder="Nombre de la asignatura">
</div>
<div class="row">
<div class="col">
<div class="mb-3">
<label for="notaTaller1" class="form-label">Nota del taller 1:</label>
<input step="0.01" type="number" class="form-control" id="notaTaller1"
placeholder="Nota del taller 1">
</div>
</div>
<div class="col">
<div class="mb-3">
<label for="notaTaller2" class="form-label">Nota del taller 2:</label>
<input step="0.01" type="number" class="form-control" id="notaTaller2"
placeholder="Nota del taller 2">
</div>
</div>
<div class="col">
<div class="mb-3">
<label for="notaParcial" class="form-label">Nota del parcial:</label>
<input step="0.01" type="number" class="form-control" id="notaParcial"
placeholder="Nota del parcial">
</div>
</div>
</div>
<button class="btn btn-success">Calcular</button>
</div>
</form>
</div>
</div>
<script src="enviar.js"></script>
</body>
</html>Por cierto, el formulario no tiene validaciones (ninguno dice required ni min o max) pues lo vamos a validar desde JavaScript con enviar.js.
Desde JavaScript vamos a cancelar el evento del envío del formulario con preventDefault, luego vamos a recorrer los elementos del formulario, comprobar si son input y ver si todos están llenos.
Luego de comprobar que todos tienen valor, obtenemos los elementos de tipo numérico para validar que el valor está entre 0 y 10.
document.addEventListener("DOMContentLoaded", () => {
const $formulario = document.querySelector("#formulario");
const $notaTaller1 = document.querySelector("#notaTaller1"),
$notaTaller2 = document.querySelector("#notaTaller2"),
$notaParcial = document.querySelector("#notaParcial");
$formulario.onsubmit = function (evento) {
// Prevenir envío de formulario
evento.preventDefault();
// Recorrer elementos input y si alguno está vacío detenernos
const elementos = $formulario.elements;
for (const elemento of elementos) {
if (elemento.tagName === "INPUT" && elemento.value === "") {
return;
}
}
// Hasta aquí todos los campos están llenos
for (const $nota of [$notaTaller1, $notaTaller2, $notaParcial]) {
const valor = parseFloat($nota.value);
if (valor < 0 || valor > 10) {
return alert(`El valor de ${$nota.placeholder} debe estar entre 0 y 10`);
}
}
// Hasta aquí las notas son correctas
const datos = {};
for (const elemento of elementos) {
if (elemento.tagName === "INPUT") {
let valor = elemento.value;
if (elemento.type === "number") {
valor = parseFloat(elemento.value);
}
datos[elemento.id] = valor;
}
}
sessionStorage.setItem("datosEstudiante", JSON.stringify(datos));
window.location.href = "./imprimir.html";
}
});Finalmente creamos un diccionario vacío, recorremos el formulario de nuevo y vamos agregando los valores del formulario a un objeto que luego codificamos como JSON. Después de eso guardamos el JSON en sessionStorage y redireccionamos.
Es importante notar que la clave del diccionario será el id del input y su valor la propiedad value. Además, si el elemento es numérico su valor se convierte a flotante con parseFloat.
Lo he hecho de esta manera para que si se agregan más campos todo funcione de la misma manera y se siga guardando sin agregar más código.
Nos vemos en imprimir.html.
Ahora en la siguiente página debemos mostrar los valores. Recuerda que en realidad no enviamos el formulario, solo lo guardamos en sessionStorage y ahora lo vamos a recuperar para mostrar los datos.
Todos los datos se van a mostrar en un párrafo o encabezado, mismos que vamos a recuperar a través del ID:
<!DOCTYPE html>
<html lang="en">
<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>Imprimir datos</title>
<link href="./bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<h2>Resultados</h2>
<table class="table table-bordered">
<tbody>
<tr>
<td><strong>Nombre</strong></td>
<td colspan="2">
<p id="nombreEstudiante"></p>
</td>
</tr>
<tr>
<td><strong>Carnet</strong></td>
<td colspan="2">
<p id="carnetEstudiante"></p>
</td>
</tr>
<tr>
<td><strong>Asignatura</strong></td>
<td colspan="2">
<p id="nombreAsignatura"></p>
</td>
</tr>
<tr>
<td><strong>Nota del taller 1</strong></td>
<td><strong>Nota del taller 1</strong></td>
<td><strong>Nota final de laboratorio</strong></td>
</tr>
<tr>
<td>
<p id="notaTaller1"></p>
</td>
<td>
<p id="notaTaller2"></p>
</td>
<td>
<p id="notaLaboratorio"></p>
</td>
</tr>
<tr>
<td><strong>Nota del parcial</strong></td>
<td colspan="2">
<p id="notaParcial"></p>
</td>
</tr>
<tr>
<td><strong>Nota final de la unidad</strong></td>
<td colspan="2">
<h3 id="notaFinal"></h3>
</td>
</tr>
</tbody>
</table>
<button >Todo está en una tabla pero los elementos que muestran la información son un header o un párrafo.
Luego desde JavaScript recuperamos el valor, calculamos y mostramos resultados:
document.addEventListener("DOMContentLoaded", () => {
const datosEstudianteCodificados = sessionStorage.getItem("datosEstudiante");
// No hay datos
if (!datosEstudianteCodificados) {
return alert("No hay datos guardados. Asegúrate de enviar el formulario");
}
const datosEstudiante = JSON.parse(datosEstudianteCodificados);
const notaLaboratorio = (datosEstudiante.notaTaller1 + datosEstudiante.notaTaller2) / 2;
const notaUnidad = (notaLaboratorio * 4 / 10) + (datosEstudiante.notaParcial * 6 / 10);
document.querySelector("#nombreEstudiante").textContent = datosEstudiante.nombreEstudiante;
document.querySelector("#carnetEstudiante").textContent = datosEstudiante.carnetEstudiante;
document.querySelector("#nombreAsignatura").textContent = datosEstudiante.nombreAsignatura;
document.querySelector("#notaTaller1").textContent = datosEstudiante.notaTaller1;
document.querySelector("#notaTaller2").textContent = datosEstudiante.notaTaller2;
document.querySelector("#notaParcial").textContent = datosEstudiante.notaParcial;
document.querySelector("#notaLaboratorio").textContent = notaLaboratorio;
document.querySelector("#notaFinal").textContent = notaUnidad;
});Lo único que no coloqué fue el código de Bootstrap. Ese lo obtienes de getbootstrap.com o de cualquier otro lugar, además no afecta en el desarrollo del ejercicio.
Solo para que quede claro, la versión que yo utilicé fue Bootstrap v5.2.2.
Por aquí te dejo más tutoriales de JavaScript en mi blog.
El día de hoy te mostraré cómo crear un servidor HTTP (servidor web) en Android…
En este post te voy a enseñar a designar una carpeta para imprimir todos los…
En este artículo te voy a enseñar la guía para imprimir en una impresora térmica…
Hoy te voy a mostrar un ejemplo de programación para agregar un módulo de tasa…
Los usuarios del plugin para impresoras térmicas pueden contratar licencias, y en ocasiones me han…
Hoy voy a enseñarte cómo imprimir el € en una impresora térmica. Vamos a ver…
Esta web usa cookies.