2

tengo la siguiente calculadora que la estoy programando con Javascript y Jquery, tengo unos problemas para las operaciones de potenciación: ^ y de radicación: , parece ser que no reconoce los signos de ^ y , como hago para convertirlos en ^ por ** y por Match.sqrt(x) .Además he leido en demás foros que la funcion eval() es totalmente desaconsejada su uso, ya que si sufres un ataque cibernetico a tu sitio o aplicacion web, donde tengas almacenada esa funcion en un script, el atacante puede robarte cookies o cambiar tu codigo por el suyo, o algo asi entendí. Si fuera así, tendría que cambiar esa funcion por otra. Y por último, cuando el tipo de dato en el campo de texto sea inválido, Ejem: 2++ o 2+2+ o tambien 2*2 + 1 / , como hago para que me genere un mensaje que diga ERROR o IMPOSIBLE DE PROCESAR, parecido a lo que la consola ejecuta Unexpected end of input

document.addEventListener('DOMContentLoaded', function(){

const text_input = document.querySelector('.text_input'),
      box = document.querySelector('.box');

// Botones
const buttonOn = $('.on'),
      buttonOff = $('.off'),
      buttonAll = $('button')  

      buttonOn.addClass('active');

const box_content = () =>{
    box.addEventListener('click', e =>{

    if(!box){ return }

    const element_clicked = e.target; // Seleccionar elemento clickeado

    // Click en ON
    if(element_clicked.className === 'on'){
        buttonOn.addClass('active');
        buttonOff.removeClass('active');
        buttonAll.removeAttr('disabled');
        continueAnimation();
    }

    // Click en OFF
    if(element_clicked.className === 'off'){
        buttonOn.removeClass('active');
        buttonOff.addClass('active');
        buttonAll.not('.on, .off').attr('disabled','disabled');
        cleanCalculator();
        stopAnimation();
    }

    // Click en ←
    if(element_clicked.className === 'borrar-caracter'){
        let select_text = text_input.textContent;
        let deleteCharacter = select_text.substring(0, select_text.length - 1); // Eliminar ultimo caracter del campo de texto
        text_input.textContent = deleteCharacter;

        text_input.textContent === ''
        ? continueAnimation()
        : null
    }

    // Click en DEL
    if(element_clicked.className === 'borrar-todo'){
        cleanCalculator();
        continueAnimation();
    }

    // Click en numeros
    if(element_clicked.className === 'numero'){
        inputCharacter(element_clicked.textContent);        
    } 
    
    // Click en operadores
    if(element_clicked.className === 'operador'){
        inputCharacter(element_clicked.textContent);    
    }

    // Click en igual
    if(element_clicked.className === 'resultado'){
        calculatorInit();
    }

    });
}

box_content();

// Funcion limpiar campo de texto de calculadora
const cleanCalculator = () =>{
text_input.textContent = '';
}

// Funcion detener animacion de slash vertical
const continueAnimation = () =>{
text_input.classList.remove('stopAnimation');
}

// Funcion iniciar animacion de slash vertical
const stopAnimation = () =>{
text_input.classList.add('stopAnimation');
}

// Funcion concatenar caracteres en campo de texto de calculadora
const inputCharacter = character =>{
text_input.textContent += character;
text_input.classList.add('stopAnimation');
limite = text_input.textContent.substr(0, 24); // Limite de caracteres
text_input.textContent = limite;
}

// Funcion capturar resultado con eval()
const calculatorInit = () =>{
let capture_value = eval(text_input.textContent);
console.log(capture_value);
text_input.textContent = `${capture_value}`

if(text_input.textContent === 'undefined'){
text_input.textContent = null
}
    }

});
body{
background: #D9D6D6;
font-family: system-ui, sans-serif;
margin: 0;
padding: 0;
}
h2{
font-size: 40px;
text-align: center;
margin: 40px 0;
}
.container{
width: 100%;
max-width: 350px;
margin: auto;
background: #3b5168;
height: 450px;
box-sizing: border-box;
padding-top: 30px;
margin-bottom: 50px;
box-shadow: 0 2px 15px 2px rgba(0,0,0,0.25);
border-radius: 25px;
border: 4px solid rgba(0,0,0,0.25);
}
.text_input{
background: rgba(255,255,255,0.75);
border-radius: 15px;
border-top: 4px solid rgba(0,0,0,0.5); 
border-left: 4px solid rgba(0,0,0,0.5);
width: 100%;
max-width: 300px;
height: 50px;
margin: auto;
line-height: 2.5;
box-sizing: border-box;
padding: 0 15px;
font-weight: bold;
font-size: 18px;
}
.text_input:after{
content: '';
border-right: 2px solid black;
animation: fade 1.5s infinite;
}

@keyframes fade{
0%{
    opacity: 0;
}
100%{
    opacity: 1;
}
    }

.box{
width: 100%;
max-width: 300px;
margin: 5% auto 5% auto;
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
}
button{
border: 3px solid rgba(0,0,0,0.45);
color: white;
font-weight: bold;
padding: 10px;
border-radius: 6px;
text-align: center;
}
button:hover{
cursor: pointer;
}
button:focus{
outline: none;
}
button:active{
transform: scale(0.85);
}
button:disabled{
opacity: 0.6;
}
.operador,
.signo_decimal{
background: rgba(0,0,0,0.45);
font-size: 17px;
}
.numero{
background: rgba(255,255,255,0.75);
color: black;
font-size: 20px;
}
.borrar-todo{
background: rgba(187,0,0,0.8);
}
.resultado{
background: rgba(255,170,0,0.8);
color: black;
font-size: 20px;
grid-column: 4/6;
grid-row: 5;
}
.on,
.off{
background: rgba(255,255,255,0.75);
color: black;
}
.borrar-caracter{
background: rgb(0,1,110);
}
button:nth-child(14){
grid-column: 4;
grid-row: 3/5;
}
.active{
background: #000;
color: white;
}
.stopAnimation:after{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<h2>My first calculator</h2>

    <div class="container">

        <div class="text_input"></div>

        <div class="box">

        <button class="on">ON</button>
        <button class="off">OFF</button>
        <button class="borrar-caracter">←</button>
        <button class="operador">√</button>
        <button class="borrar-todo">DEL</button>

        <button class="numero">7</button>
        <button class="numero">8</button>
        <button class="numero">9</button>

        <button class="operador">*</button>
        <button class="operador">^</button>

        <button class="numero">4</button>
        <button class="numero">5</button>
        <button class="numero">6</button>

        <button class="operador">+</button>
        <button class="operador">/</button>

        <button class="numero">1</button>
        <button class="numero">2</button>
        <button class="numero">3</button>

        <button class="operador">-</button>

        <button class="numero">0</button>
        <button class="operador">.</button>
        <button class="operador">%</button>

        <button class="resultado">=</button>

        </div>
    </div>

Agradeceria que me pudieran ayudar, es la primera vez que programo una calculadora.

3
  • El tema del eval(), piensa que ese código, al ser JS, se ejecutaría en el cliente, el problema seria si se ejecutara en el servidor (nodejs por ejemplo). Dicho de otra manera, al ser JS todo el mundo tiene acceso al código, así que pueden tocar lo que quieran, haya un eval o no. Ojo, esta es mi opinión, que puede ser muy errónea. el 26 nov. 2020 a las 1:01
  • 1
    Para reemplazar los ^ y √ de las operaciones, yo usaría RegExp developer.mozilla.org/es/docs/Web/JavaScript/Referencia/… el 26 nov. 2020 a las 1:08
  • @ArnauCastellví, podrias hacerme un ejemplo de como reemplazar los signos, primera vez que veo sobre expresiones regulares, estoy haciendo otro codigo para ir entendiendo como funciona eso
    – Husdady
    el 26 nov. 2020 a las 3:18

1 respuesta 1

1

Para reemplazar strings, puedes usar el método "replace", indicando que quieres modificar y como, usando expresiones regulares.

Por ejemplo:

var operaciones="5+√25^3-4";
var operaciones=operaciones.replace(/√([0-9]*)/gi,"Math.sqrt($1)");
var operaciones=operaciones.replace(/\^/gi,"**");
console.log(operaciones);
console.log(eval(operaciones));

La primera expresión, busca el carácter √ seguido por números, y lo reemplaza por "Math.sqrt($1)", siendo $1 los primeros valores de la búsqueda entre paréntesis ( en este caso [0-9]* )
La segunda expresión simplemente reemplaza ^ por **
Ojo, que estos ejemplos no tienen en cuenta el uso de paréntesis, √(1+2) no funcionaria.

6
  • recien veo tu respuesta, estado ocupado en asuntos personales por eso la demora de mi respuesta. Voy a hacer cambios en el codigo, gracias por el ejemplo.
    – Husdady
    el 27 nov. 2020 a las 2:18
  • Hice los cambios, ahora la calculadora ejecuta la radicación y potenciación, cambie el signo de * por × , y ahora tengo problemas al multiplicar, pero no hay problema, veré como resolver eso. Aún sigo con la duda si realmente eval() es recomendable su uso, puedes ver los cambios desde este pen: codepen.io/pen/?template=poEoLNe
    – Husdady
    el 27 nov. 2020 a las 5:07
  • 1
    Tema eval(), lo que te comenté antes, al ser Javascript el cliente tiene acceso al codigo, así que puede modificar lo que quiera independientemente si se usa eval(). A mi entender, el problema de eval() es si se ejecuta desde el lado del servidor. ya que si no está bien filtrado te pueden causar problemas desde fuera (hackearte aprovechando que el servidor ejecuta eval() mandándole codigo no esperado), y tendrían acceso a los datos del servidor. No se si me explico. Ánimo! el 27 nov. 2020 a las 9:41
  • Un detalle, si este es un ejercicio, y fue el profesor quien pidió que no se usara eval, es probable que quiera que hagáis los cálculos operación por operación, en orden de prioridad, siendo la solución muy diferente. el 28 nov. 2020 a las 22:45
  • no es un ejercicio dado por un profesor, solo sentí interés en programar una calculadora, tal vez use ese código para proyectos futuros. He visto en algunos tutoriales, que programan distinto una calculadora, Ejem: imprimes un numero y luego un signo que reemplaza al numero, el primer numero se guarda en una variable, despues el siguiente numero reemplaza al signo y al presionar igual, te da el resultado.
    – Husdady
    el 28 nov. 2020 a las 23:56

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.