Ejercicio 1 - Calculadora
● Introducción
Este ejercicio práctico básico sirve como primer contacto con el lenguaje javascript.
Podés visitar el ejercicio que desarrollaremos aquí.↩
● Preparación
- ◆ Creamos una carpeta y la abrimos con Visual Studio Code.
- ◆ Generamos el archivo index.html , style.css y script.js.
- ◆ Conectamos en el index.html las etiquetas link y script.
- ◆ Correjimos el lenguaje y completamos el título.
- ◆ Agregamos las etiquetas meta según nuestro objetivo con los buscadores y la difusión de este sitio en redes.
- Nos quedaría el siguiente index.html:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Ejercicio para iniciarse en Javascript">
<link rel="stylesheet" href="style.css">
<title>Calculadora - Javascript</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>- ◆ Observamos con Live Server y Live Preview.
● Desarrollo index.html
Armamos el teclado:
<body>
<main>
<h1>Mi Calculadora</h1>
<div class="calculadora">
<!-- Donde pondremos lo que tecleamos y el resultado -->
<div class="info"></div>
<div class="teclado">
<!-- Son 16 teclas. Escribimos 1 y con alt+shift presionados, tocamos la tecla abajo ↓ y se van generando las demás etiquetas -->
<button>7</button>
<button>8</button>
<button>9</button>
<button>C</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>-</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>+</button>
<!-- tecla window + punto -->
<button>←</button>
<button>0</button>
<button>.</button>
<button>=</button>
</div>
<!-- Esa ubicación la determiné yo, practicando. -->
</div>
</main>
<script src="script.js"></script>
</body>● Desarrollo style.css
Al darle estilo, la calculadora se va a armar.
/* Configuración básica en todos los casos */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
/* Propiedades que aplican a todas las etiquetas */
}
body{
font-family: Verdana, Geneva, Tahoma, sans-serif;
/* Propiedades heredables */
}
/* Específicas de este proyecto */
main{
height: 100vh;
width: 100vw;
}
h1{
text-align: center;
/* margen arriba y abajo */
margin-block: 1rem;
color: darkcyan;
}
.calculadora{
width: 500px;
border: 0.5px solid gray;
border-radius: 5px;
/* Para centrarla */
margin: 0 auto;
}
.info{
/* Ocupa el 100% del padre, que es la calculadora que mide 500px */
width: 100%;
height: 60px;
/* primer valor arriba/abajo segundo valor laterales */
padding: 0 30px;
background-color: darkcyan;
color: cyan;
font-size:50px;
text-align: right;
overflow: hidden;
}
.teclado{
padding: 30px 0;
/* los dispone uno al lado del otro */
display: flex;
/* Pero como tiene wrap, si no entra, baja a la línea siguiente */
flex-wrap: wrap;
justify-content: center;
align-items: center;
/* separación entre botones */
gap: 5px;
}
button{
width: 100px;
height: 100px;
background-color: white;
color: darkcyan;
font-size: 50px;
cursor: pointer;
border: 0.5px solid darkcyan;
/* La transición de estado normal a hover */
transition: all 1s ease;
}
button:hover{
background-color: cyan;
color: darkcyan;
}Con esto la calculadora queda armada, pero no hace nada. Falta el script de javascript, que es el objetivo de este ejercicio.
● Desarrollo script.js
◆ Javascript se aplica sobre la estructura lógica del HTML que tiene en la memoria el navegador. Es por ello que debemos aplicarlo al final. ◆ El esqueleto de documento debe estar creado. (Puede crearse con javascript, pero este no es el caso.) ◆ Identificamos la etiqueta donde escribiremos.
// Identificamos la etiqueta donde escribiremos
const info = document.querySelector('.info');
//es una función que recibe un valor y lo agrega en la etiqueta identificada.
const mostrar = (valor)=>{
info.innerHTML= info.innerHTML + valor;
}innerHTML: Es una propiedad de javascript que permite modificar el código HTML que se encuentra dentro de un elemento de la página web. En este caso el elemento identificado como info
-
◆Etiqueta sería div, elemento es la etiqueta con su contenido, es decir todo.
-
◆ Agregamos esta función a cada button
<main>
<h1>Mi Calculadora</h1>
<div class="calculadora">
<!-- Donde pondremos lo que tecleamos y el resultado -->
<div class="info"></div>
<div class="teclado">
<!-- Son 16 teclas. Escribimos 1 y con alt+shift presionados, tocamos la tecla abajo ↓ y se van generando las demás etiquetas -->
<button onclick="mostrar(7)">7</button>
<button onclick="mostrar(8)">8</button>
<button onclick="mostrar(9)">9</button>
<button onclick="">C</button>
<button onclick="mostrar(4)">4</button>
<button onclick="mostrar(5)">5</button>
<button onclick="mostrar(6)">6</button>
<button onclick="mostrar('-')">-</button>
<button onclick="mostrar(1)">1</button>
<button onclick="mostrar(2)">2</button>
<button onclick="mostrar(3)">3</button>
<button onclick="mostrar('+')">+</button>
<!-- tecla window + punto -->
<button>←</button>
<button onclick="mostrar(0)">0</button>
<button onclick="mostrar('.')">.</button>
<button>=</button>
</div>
<!-- Esa ubicación la determiné yo, practicando. -->
</div>
</main>● Función Borrar()
//Para borrar todo lo que hay
const borrar = ()=>{
info.innerHTML="";
}En el index.html
<button onclick="borrar()">C</button>- ◆ Para el caso, de solo borrar un dígito.
//Para borrar solo un dígito
const borrarUnDigito =()=>{
info.innerHTML = info.innerHTML.slice(0,-1);
}- Esta línea de código elimina el último carácter del contenido visual (HTML) que está dentro de un elemento con el nombre info
- Empieza desde el principio (posición 0) y se detiene exactamente un carácter antes del final (-1), borrando la última letra, número o espacio. En el index.html
<button onclick="borrarUnDigito()">←</button>● Función Calcular()
// Para calcular
const calcular = ()=>{
//Se escribe esta sentencia por si sucede algún error, esté bajo control.
try {
if(!info.innerHTML){
// si no hay nada
info.innerHTML = "0";
}else{
//sino
info.innerHTML = eval(info.innerHTML);
}
} catch (error) {
info.innerHTML = "Error";
}
} <button onclick="calcular()">=</button>Pero después de calcular, debemos reiniciar el proceso automáticamente.
- ◆ Pondremos una bandera, que nos indique cuando se inicia un cálculo y cuando finaliza.
1- Identificamos la variable
const info = document.querySelector('.info');
let bandera = 'inicio';
...2- Modificamos la función mostrar()
const mostrar = (valor)=>{
if(bandera === 'inicio'){
info.innerHTML= valor;
}else{
info.innerHTML= info.innerHTML + valor;
}
// la primera vez que se muestra un número, cambia, hasta que se calcule el resultado.
bandera = "yainicio";
}3- Tanto si calculamos o si borramos todo, volvemos la bandera a inicio
const calcular = ()=>{
//Se escribe esta sentencia por si sucede algún error, esté bajo control.
try {
if(!info.innerHTML){
// si no hay nada
info.innerHTML = "0";
}else{
//sino
info.innerHTML = eval(info.innerHTML);
}
} catch (error) {
info.innerHTML = "Error";
}
bandera='inicio';
}
const borrar = ()=>{
info.innerHTML="";
bandera='inicio';
}● Verificaciones
//Verificaciones. Hay muchas, pero como es solo un ejercicio de presentación de javascript, solo haremos las básicas.
function formatearNumero(num){
//Si es entero y no está en notación científica.
if(Number.isInteger(num) && Math.abs(num) < 1e21){
return num.toString();
}
// si es muy grande o tiene muchos decimales
return Number(num).toPrecision(6);
}Formateamos el resultado.
const calcular = ()=>{
//Se escribe esta sentencia por si sucede algún error, esté bajo control.
try {
if(!info.innerHTML){
// si no hay nada
info.innerHTML = "0";
}else{
//sino
//formateo el resultado
info.innerHTML = formatearNumero(eval(info.innerHTML));
}
} catch (error) {
info.innerHTML = "Error";
}
bandera='inicio';
}La función eval() en JavaScript evalúa o ejecuta un texto (String) como si fuera código de programación real.