 |
| Imagen de @valdez en unsplash.com |
Analizando el enunciado…
El programa debe a partir de las dimensiones que le indique el usuario,
calcular el área del rectángulo y mostrarlo en la ventana del navegador.
Solo debería aceptar como datos de entrada números. Si el usuario
intenta ingresar caracteres especiales o letras, mostrará un mensaje solicitando
datos válidos, sino se autodestruirá en 5 segundos.
Alguien me dijo una vez que lo que llamamos “desorden” en la naturaleza,
no es realmente cierto. La naturaleza crece en armonía con su entorno. Somos
los humanos que nos empeñamos en cambiar “lo natural” en las cosas. Intentamos
ajustar todo a formas redondas o cuadradas. No nos integramos, no resistimos a
fluir en igual ritmo y frecuencia con ella.
Entonces, a pesar de las instrucciones, cuando a un humano le dicen “Solo
ingrese números”, su cabeza interpreta: “Vamos a probar con cosas locas para ver qué
pasa.”
Te lo digo, porque
siempre, siempre debes evitar que un humano dañe tu programa, ese que has
creado con sudor y lágrimas, y que te han costado hasta tus nalgas que se
aplastaron de tanto estar sentado frente al computador.
Tienes que pensar
como el enemigo, tal como hace el FBI: anticiparte a sus acciones. Yo
solo te digo.
Comencemos…
1.- Declaración e
inicialización de variables.
/*-------------------------------------------------------------
Bloq. Entrada de datos y declaración/inicialización de variables
--------------------------------------------------------------*/
let baseT = Number(prompt("Ingrese la base del Rectángulo"));
let alturaT = Number(prompt("Ingrese la altura del Rectángulo"));
let areaT = 0;
La fórmula del área de un rectángulo
requiere que utilicemos tres variables:
baseT, para la longitud mayor.
alturaT, para la longitud menor.
areaT, que guardará la multiplicación
de baseT por alturaT.
El método prompt() muestra en una ventana en el navegador con el mensaje solicitando
al usuario ingrese los datos en el campo de entrada.
El método Number() convierte los datos que recibe prompt() en números, solo si estos son una cadena numérica. Es
decir, Number() no toma el string “Palabra”
y lo convierte en un número, sino que lo clasifica como “NaN” (No es un número).
Number() interpreta las
cadenas numéricas “0123456789” como números aunque estén entre comillas.
Todas las variables se inicializan con “let” según el estándar ECMAScript6.
Javascript nos ahorra tiempo de
procesamiento y escritura. De allí que podamos aplicar métodos directamente
sobre el valor de la variable, como nuestro caso.
Así tenemos que:
baseT= Number(prompt("Ingrese la base del rectángulo"));
alturaT= Number(prompt("Ingrese la altura del rectángulo"));
areaT= 0,
al inicializar areaT en 0 estamos diciéndole a Javascript que lo utilizaremos
para guardar cifras numéricas.
2.- Validación de datos.
/*-------------------------------------------------------------
Bloq. Validación de datos: Solo Números y diferentes a 0
--------------------------------------------------------------*/
if (
isNaN(baseT) === false &&
isNaN(alturaT) === false &&
baseT != 0 &&
alturaT != 0
) {
Aquí va el cálculo del área del rectángulo
} else {
alert("Ingrese solo números y diferente a 0");
}
La validación de los datos de entrada son vitales si queremos que los
resultados sean correctos.
Ya te comenté al principio la tendencia del usuario de complicar lo que
está supuesto a ser simple y sencillo.
Así que debemos tomar un momento para pensar como el enemigo:
¿Qué si introduzco letras?
¿Qué si son caracteres especiales?
¿Qué si introduzco un 0?
¿Qué si no introduzco nada?
¿Qué si decido cancelar la ejecución?
Te tengo la respuesta para las primeras tres inquietudes, las otras dos
te las dejo para luego.
¿Qué si introduzco letras? ¿Qué si son caracteres especiales?
Para evitar procesar letras o caracteres especiales, usaré el método isNaN().
isNaN() verifica si la variable que está evaluando no es un número. Si NO es un
número, devolverá True, pero SI es un número, devolverá False.
Si baseT y alturaT son números, isNaN()
se volverá “false”, pero si son letras o caracteres especiales se volverá True
y no se iniciará el cálculo del área del rectángulo.
isNaN(baseT) === false && isNaN (alturaT) === false
Nota que es imperativo que ambas condiciones sean “false” para pasar el
filtro. Si una de ellas no cumple la
condición, no se ejecuta el programa
¿Qué si introduzco un 0?
Todo número multiplicado por 0 es 0. Es una verdad matemática que no
necesitamos probar con este ejercicio, así que bloquearemos la posibilidad con
la siguiente instrucción:
baseT != 0 && alturaT != 0
Utilizo el signo “diferente de” para que el programa ignore el 0
cuando este sea el valor.
¿Por qué diferente y no mayor a 0?
Porque este programa permitirá trabajar con números negativos.
Todo está condensado en una sola línea de instrucción. Sea cual fuere tu
editor, probablemente lo separe en diferentes líneas para una mejor lectura.
Pero en teoría la línea se vería así:
(isNaN(baseT) === false && isNaN (alturaT) === false) && (baseT != 0 && alturaT != 0)
Nota que cada grupo de condición está unido por el operador lógico &&. Es decir, ambas condiciones deben ser ciertas
para dar paso al cálculo de la operación.
Si el dato que ingresa el usuario no es el esperado, debe lanzar un
mensaje notificándole que ingrese la información solicitada.
} else {
alert("Ingrese solo números y diferente a 0");
}
Hasta ahora el código luce así:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
/*-----------------------------------------------
Prog. que calcula el área de un rectángulo
-----------------------------------------------*/
/*-------------------------------------------------------------
Bloq. Entrada de datos y declaración/inicialización de variables
--------------------------------------------------------------*/
let baseT = Number(prompt("Ingrese la base del Rectángulo"));
let alturaT = Number(prompt("Ingrese la altura del Rectángulo"));
let areaT = 0;
/*-------------------------------------------------------------
Bloq. Validación de datos: Solo Números y diferentes a 0
--------------------------------------------------------------*/
if (
isNaN(baseT) === false &&
isNaN(alturaT) === false &&
baseT != 0 &&
alturaT != 0
) {
*-------------------------------------------------------------
Bloq. Cálculo según fórmula del rectángulo
-----------------------------------------------------------*/
} else {
alert("Ingrese solo números y diferente a 0");
}
</script>
</body>
</html>
3.- Bloque cálculo del área del rectángulo
Para el cálculo, solo necesitamos conocer la fórmula del área del rectángulo
y sustituir las variables por las que correspondan en el código.
Formula
Area= base * altura.
Al sustituir
areaT= baseT*alturaT
Luego a través de document.write
mostramos el resultado en la ventana del navegador.
Aquí todo el código
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
/*-----------------------------------------------
Prog. que calcula el área de un rectángulo
-----------------------------------------------*/
/*-------------------------------------------------------------
Bloq. Entrada de datos y declaración/inicialización de variables
--------------------------------------------------------------*/
let baseT = Number(prompt("Ingrese la base del Rectángulo"));
let alturaT = Number(prompt("Ingrese la altura del Rectángulo"));
let areaT = 0;
/*-------------------------------------------------------------
Bloq. Validación de datos: Solo Números y diferentes a 0
--------------------------------------------------------------*/
if (
isNaN(baseT) === false &&
isNaN(alturaT) === false &&
baseT != 0 &&
alturaT != 0
) {
/*-------------------------------------------------------------
Bloq. Cálculo según fórmula del rectángulo
-----------------------------------------------------------*/
areaT = baseT * alturaT;
document.write("El área del Rectángulo es: " + areaT);
} else {
alert("Ingrese solo números y diferentes a 0");
}
</script>
</body>
</html>
Espero te haya sido de utilidad.
Mientras escribía el post,
escuchaba el canal en Youtube de Shin Giwon Piano que me
encanta. Te lo recomiendo. Una delicia!
"La felicidad no es un destino, es el camino"
anonimo
Comentarios
Publicar un comentario