{"id":7464,"date":"2019-10-04T10:51:33","date_gmt":"2019-10-04T10:51:33","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7464"},"modified":"2019-10-04T10:58:07","modified_gmt":"2019-10-04T10:58:07","slug":"calculadora-simple-con-javascript","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/calculadora-simple-con-javascript\/","title":{"rendered":"Calculadora simple con JavaScript"},"content":{"rendered":"

En este art\u00edculo vas a descubrir como crear una calculadora<\/strong> con JavaScript<\/strong> de forma simple y r\u00e1pida. C\u00f3digo JavaScript<\/strong> desde 0 con menos de 20 l\u00edneas.<\/p>\n

Ya se que puedes pensar que crear una calculadora es una tonter\u00eda, pero si est\u00e1s empezando a desarrollar p\u00e1ginas Web es bueno que domines el JavaScript<\/strong>. Crear una calculadora<\/strong> con JavaScript<\/strong> puede resultar un buen ejercicio para introducirte en el mundo de la programaci\u00f3n con JavaScript<\/strong>.<\/p>\n

Seguramente, puedes encontrar infinidad de c\u00f3digos en Internet que te permiten implementar una calculadora<\/strong> en tu sitio Web.<\/p>\n

\u00bfY te preguntar\u00e1s? \u00bfPara qu\u00e9 voy a querer hacer otra calculadora<\/strong>?<\/p>\n

Si tienes tiempo y conocimiento sobre JavaScript<\/strong> te recomiendo que intentes crear una calculadora<\/strong> seg\u00fan tus pautas y criterios. Si lo consigues, comp\u00e1rala con lo que hay en Internet para verificar si lo hiciste bien. Puede que tu idea sea mucho mejor que lo que hay en l\u00ednea. No olvides que con la pr\u00e1ctica es como mejor se aprende.<\/p>\n

En este art\u00edculo te vengo a ofrecer una propuesta para crear una calculadora<\/strong> simple con JavaScript<\/strong> que no tiene desperdicio.<\/p>\n

Te dar\u00e1s cuenta que con muy poco c\u00f3digo ya puedes tener una calculadora<\/strong> incrustada en tu sitio Web.<\/p>\n

C\u00f3digo JavaScript<\/strong> desde 0, sin uso de plugins de terceros.<\/p>\n

Ir\u00e9 al grano para que puedas comprobarlo.<\/p>\n

C\u00f3digo HTML<\/h3>\n

Dentro del cuerpo de tu p\u00e1gina o dentro de la etiqueta <body> agrega las etiquetas de marcado que identifican cada elemento de la calculadora<\/strong>:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"calculator"<\/span>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"screen"<\/span> id<\/span>=<\/span>"screen"<\/span>><\/<\/span>div<\/span><\/a>><\/span>\n    <ul<\/span><\/a> id<\/span>=<\/span>"buttons"<\/span> class<\/span>=<\/span>"buttons"<\/span>><\/span>\n        <li<\/span><\/a>><a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data-key=<\/span>"clear"<\/span>><\/span>C<\/<\/span>a<\/span><\/a>><\/<\/span>li<\/span><\/a>><\/span>\n        <li<\/span><\/a>><a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data-key=<\/span>"-"<\/span>><\/span>-<\/<\/span>a<\/span><\/a>><\/<\/span>li<\/span><\/a>><\/span>\n        <li<\/span><\/a>><a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data-key=<\/span>"\/"<\/span>><\/span>\/<\/<\/span>a<\/span><\/a>><\/<\/span>li<\/span><\/a>><\/span>\n        <li<\/span><\/a>><a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data-key=<\/span>"*"<\/span>><\/span>x<\/<\/span>a<\/span><\/a>><\/<\/span>li<\/span><\/a>><\/span>    \n        <li<\/span><\/a>><a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data-key=<\/span>"7"<\/span>><\/span>7<\/<\/span>a<\/span><\/a>><\/<\/span>li<\/span><\/a>><\/span>\n        <li<\/span><\/a>><a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data-key=<\/span>"8"<\/span>><\/span>8<\/<\/span>a<\/span><\/a>><\/<\/span>li<\/span><\/a>><\/span>\n        <li<\/span><\/a>><a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data-key=<\/span>"9"<\/span>><\/span>9<\/<\/span>a<\/span><\/a>><\/<\/span>li<\/span><\/a>><\/span>\n        <li<\/span><\/a>><a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data-key=<\/span>"-"<\/span>><\/span>-<\/<\/span>a<\/span><\/a>><\/<\/span>li<\/span><\/a>><\/span>\n        <li<\/span><\/a>><a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data-key=<\/span>"4"<\/span>><\/span>4<\/<\/span>a<\/span><\/a>><\/<\/span>li<\/span><\/a>><\/span>\n        <li<\/span><\/a>><a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data-key=<\/span>"5"<\/span>><\/span>5<\/<\/span>a<\/span><\/a>><\/<\/span>li<\/span><\/a>><\/span>\n        <li<\/span><\/a>><a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data-key=<\/span>"6"<\/span>><\/span>6<\/<\/span>a<\/span><\/a>><\/<\/span>li<\/span><\/a>><\/span>\n        <li<\/span><\/a>><a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data-key=<\/span>"+"<\/span>><\/span>+<\/<\/span>a<\/span><\/a>><\/<\/span>li<\/span><\/a>><\/span>\n        <li<\/span><\/a>><a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data-key=<\/span>"1"<\/span>><\/span>1<\/<\/span>a<\/span><\/a>><\/<\/span>li<\/span><\/a>><\/span>\n        <li<\/span><\/a>><a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data-key=<\/span>"2"<\/span>><\/span>2<\/<\/span>a<\/span><\/a>><\/<\/span>li<\/span><\/a>><\/span>\n        <li<\/span><\/a>><a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data-key=<\/span>"3"<\/span>><\/span>3<\/<\/span>a<\/span><\/a>><\/<\/span>li<\/span><\/a>><\/span>\n        <li<\/span><\/a>><a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data-key=<\/span>"equal"<\/span> class<\/span>=<\/span>"equal tall"<\/span>><\/span>=<\/<\/span>a<\/span><\/a>><\/<\/span>li<\/span><\/a>><\/span>\n        <li<\/span><\/a>><a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data-key=<\/span>"0"<\/span> class<\/span>=<\/span>"wide shift"<\/span>><\/span>0<\/<\/span>a<\/span><\/a>><\/<\/span>li<\/span><\/a>><\/span>\n        <li<\/span><\/a>><a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> data-key=<\/span>"."<\/span> class<\/span>=<\/span>"shift"<\/span>><\/span>.<\/<\/span>a<\/span><\/a>><\/<\/span>li<\/span><\/a>><\/span>\n    <\/<\/span>ul<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
En este caso, la definici\u00f3n de la calculadora viene marcada por un contenedor principal que tiene la clase \u00abcalculator\u00bb que se divide por la pantalla (class=\u00bbscreen\u00bb) y los botones que lo he implementado con una lista desordenada con enlaces.<\/p>\n
Tanto las clases de los enlaces como el data-key son muy importantes para el dise\u00f1o y la l\u00f3gica de la calculadora<\/strong>. Atento a eso.<\/p>\n
La l\u00f3gica de la calculadora<\/h3>\n
Crea un archivo JavaScript<\/strong> si todav\u00eda no lo tienes y agrega lo siguiente:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
let screen =<\/span> document.getElementById<\/span>(<\/span>'screen'<\/span>)<\/span>;<\/span>\nconst<\/span> buttons =<\/span> document.querySelectorAll<\/span>(<\/span>"#buttons a"<\/span>)<\/span>;<\/span>\n \nfor<\/span> (<\/span>const<\/span> button of buttons)<\/span> {<\/span>\n    button.addEventListener<\/span>(<\/span>'click'<\/span>,<\/span> function<\/span>(<\/span>e)<\/span> {<\/span>\n        e.preventDefault<\/span>(<\/span>)<\/span>;<\/span>\n \n        if<\/span> (<\/span>e.target<\/span>.dataset<\/span>.key<\/span> ==<\/span> 'equal'<\/span>)<\/span> {<\/span>\n            screen.textContent<\/span> =<\/span> eval<\/span>(<\/span>screen.textContent<\/span>)<\/span>;<\/span>\n            if<\/span> (<\/span>screen.textContent<\/span>.length<\/span> ><\/span> 8)<\/span> {<\/span>\n                screen.textContent<\/span> =<\/span> eval<\/span>(<\/span>screen.textContent<\/span>)<\/span>.toFixed<\/span>(<\/span>8)<\/span>;<\/span>\n            }<\/span>\n        }<\/span> else<\/span> if<\/span> (<\/span>e.target<\/span>.dataset<\/span>.key<\/span> ==<\/span> 'clear'<\/span>)<\/span> {<\/span>\n            screen.textContent<\/span> =<\/span> ''<\/span>;<\/span>\n        }<\/span> else<\/span> {<\/span>\n            screen.textContent<\/span> =<\/span> screen.textContent<\/span> +<\/span> e.target<\/span>.dataset<\/span>.key<\/span>;<\/span>\n        }<\/span>   \n    }<\/span>)<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
He creado 2 variables:<\/p>\n