0

Por ahora solo tengo las funciones basicas de una calculadora, falta agregar las trigonometricas como el "sen,cos,tan,raiz,log10,log2,x2", se que para eso js nos da la funcion Math, el problema es que no se como implementarla correctamente para la idea de esta calculadora. El codigo es el siguiente:

JS

function addChar(input, character)
{
    if(input.value == null || input.value == "0")
        input.value = character
    else
        input.value += character
}
function deleteChar(input)
{
    input.value = input.value.substring(0, input.value.length - 1)
}
function changeSign(input)
{
    if(input.value.substring(0, 1) == "-")
        input.value = input.value.substring(1, input.value.length)
    else
        input.value = "-" + input.value
}
function compute(form)
{
    form.display.value = eval(form.display.value)
}
function square(form)
{
    form.display.value = eval(form.display.value) * eval(form.display.value)
}
function checkNum(str)
{
    for (var i = 0; i < str.length; i++) {
        var ch = str.substring(i, i+1)
    if (ch < "0" || ch > "9") {
        if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "(" && ch!= ")") {
            alert("invalid entry!")
        return false
    }
}
}
return true
}

HTML:

<DOCTYPE html>
<html>
<head>
    <title>Calculadora Web</title>
    <link rel="stylesheet" type="text/css" href="estilo.css">

    <script src="calc.js"></script>
</head>
<body>
<center>
    <div class="contenedor">
        <form>
            <table>
                <tr>
                    <td colspan="4"><input class="text" name="display" id="campodetexto" type="text" value=""></td>
                </tr>
                <tr>
                    <td><input class="columna1" id="sin" type="button" value="sin" onClick="addChar(this.form.display, 'sin')"></td>
                    <td><input class="columna1" id="cos" type="button" value="cos" onClick="addChar(this.form.display, 'cos')"></td>
                    <td><input class="columna1" id="tan" type="button" value="tan" onClick="addChar(this.form.display, 'tan')"></td>
                    <td><input class="columna2" id="raiz" type="button" value="√" onClick="addChar(this.form.display, '√')"></td>
                </tr>
                <tr>
                    <td><input class="columna1" id="7" type="button" value="log10" onClick="addChar(this.form.display, 'log10')"></td>
                    <td><input class="columna1" id="8" type="button" value="log2" onClick="addChar(this.form.display, 'log2')"></td>
                    <td><input class="columna1" id="^" type="button" value="x²" onClick="addChar(this.form.display, 'x²')"></td>
                    <td><input class="columna2" id="pi" type="button" value="π" onClick="addChar(this.form.display, 'π')"></td>
                </tr>
                <tr>
                    <td><input class="columna1" id="7" type="button" value="7" onClick="addChar(this.form.display, '7')"></td>
                    <td><input class="columna1" id="8" type="button" value="8" onClick="addChar(this.form.display, '8')"></td>
                    <td><input class="columna1" id="9" type="button" value="9" onClick="addChar(this.form.display, '9')"></td>
                    <td><input class="columna2" id="suma" type="button" value="+" onClick="addChar(this.form.display, '+')"></td>
                </tr>
                <tr>
                    <td><input class="columna1" id="4" type="button" value="4" onClick="addChar(this.form.display, '4')"></td>
                    <td><input class="columna1" id="5" type="button" value="5" onClick="addChar(this.form.display, '5')"></td>
                    <td><input class="columna1" id="6" type="button" value="6" onClick="addChar(this.form.display, '6')"></td>
                    <td><input class="columna2" id="resta" type="button" value="-" onClick="addChar(this.form.display, '-')"></td>
                </tr>
                <tr>
                    <td><input class="columna1" id="1" type="button" value="1" onClick="addChar(this.form.display, '1')"></td>
                    <td><input class="columna1" id="2" type="button" value="2" onClick="addChar(this.form.display, '2')"></td>
                    <td><input class="columna1" id="3" type="button" value="3" onClick="addChar(this.form.display, '3')"></td>
                    <td><input class="columna2" id="multiplicacion" type="button" value="*" onClick="addChar(this.form.display, '*')"></td>
                </tr>
                <tr>
                    <td><input class="columna1" id="clear" type="button" value="CE" onClick="this.form.display.value = 0 "></td>
                    <td><input class="columna1" id="0" type="button" value="0" onClick="addChar(this.form.display, '0')"></td>
                    <td><input class="columna1" id="equals" type="button" value="=" onClick="if (checkNum(this.form.display.value))
                                                                                                      { compute(this.form) }"></td>
                    <td><input class="columna2" id="division" type="button" value="/" onClick="addChar(this.form.display, '/')"></td>
                </tr>
            </table>
        </form>
    </div>
</center>
</body>
</html>

1 respuesta 1

3

Antes de responder debo de aclarar que hacer el uso de eval no es recomendable por problemas de seguridad y performance, y la forma en que está hecha la calculadora es un tanto arcaica pero para efectos de aprendizaje suopongo que está bien.

De la forma en la que estas haciendolo, cuando presiones el boton de sin, por ejemplo, debes de inyectar la funcion de Math.sin( a tu display al inicio y agregar un parentesis al final.

if(character == "sin")
   input.value = "Math.sin(" + input.value + ")";

En tu validación tienes que agregar el caracter punto, despues si encuentra una M tienes que validar si se trata de la palabra Math, en caso afirmativo recorres tu i para leer el siguiente caracter después de Math De igual forma si encuentra una s validas que se trate de la palabra sin y de nuevo recorres tu i Esete último proceso lo repites con cos, log2, log10, etc.

      if(ch=="M" && str.substring(i, i+4) == "Math")
          i+=3; 
      else if(ch=="s" && str.substring(i, i+3) == "sin")
          i+=2; 
      else if(ch=="l" && str.substring(i, i+4) == "log2")
          i+=3; 
      else
      {
         alert("invalid entry!")
         return false
      }

Te pongo tu ejemplo modificado únicamente para sin y log2

function addChar(input, character)
{
    if(character == "sin")
        input.value = "Math.sin(" + input.value + ")";
    else if(character == "log2")
        input.value = "Math.log2(" + input.value + ")";    
    else
        input.value += character
}
function deleteChar(input)
{
    input.value = input.value.substring(0, input.value.length - 1)
}
function changeSign(input)
{
    if(input.value.substring(0, 1) == "-")
        input.value = input.value.substring(1, input.value.length)
    else
        input.value = "-" + input.value
}
function compute(form)
{
    form.display.value = eval(form.display.value)
}
function square(form)
{
    form.display.value = eval(form.display.value) * eval(form.display.value)
    
}
function checkNum(str)
{
    for (var i = 0; i < str.length; i++) {
        var ch = str.substring(i, i+1)
    if (ch < "0" || ch > "9") {
        if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "(" && ch!= ")" && ch!= "." ) {
          if(ch=="M" && str.substring(i, i+4) == "Math")
              i+=3; 
          else if(ch=="s" && str.substring(i, i+3) == "sin")
              i+=2; 
          else if(ch=="l" && str.substring(i, i+4) == "log2")
              i+=3; 
          else
          {
             alert("invalid entry!")
             return false
          }
    }
}
}
return true
}
<DOCTYPE html>
<html>
<head>
    <title>Calculadora Web</title>
    <link rel="stylesheet" type="text/css" href="estilo.css">

    
</head>
<body>
<center>
    <div class="contenedor">
        <form>
            <table>
                <tr>
                    <td colspan="4"><input class="text" name="display" id="campodetexto" type="text" value=""></td>
                </tr>
                <tr>
                    <td><input class="columna1" id="sin" type="button" value="sin" onClick="addChar(this.form.display, 'sin')"></td>
                    <td><input class="columna1" id="cos" type="button" value="cos" onClick="addChar(this.form.display, 'cos')"></td>
                    <td><input class="columna1" id="tan" type="button" value="tan" onClick="addChar(this.form.display, 'tan')"></td>
                    <td><input class="columna2" id="raiz" type="button" value="√" onClick="addChar(this.form.display, '√')"></td>
                </tr>
                <tr>
                    <td><input class="columna1" id="7" type="button" value="log10" onClick="addChar(this.form.display, 'log10')"></td>
                    <td><input class="columna1" id="8" type="button" value="log2" onClick="addChar(this.form.display, 'log2')"></td>
                    <td><input class="columna1" id="^" type="button" value="x²" onClick="addChar(this.form.display, 'x²')"></td>
                    <td><input class="columna2" id="pi" type="button" value="π" onClick="addChar(this.form.display, 'π')"></td>
                </tr>
                <tr>
                    <td><input class="columna1" id="7" type="button" value="7" onClick="addChar(this.form.display, '7')"></td>
                    <td><input class="columna1" id="8" type="button" value="8" onClick="addChar(this.form.display, '8')"></td>
                    <td><input class="columna1" id="9" type="button" value="9" onClick="addChar(this.form.display, '9')"></td>
                    <td><input class="columna2" id="suma" type="button" value="+" onClick="addChar(this.form.display, '+')"></td>
                </tr>
                <tr>
                    <td><input class="columna1" id="4" type="button" value="4" onClick="addChar(this.form.display, '4')"></td>
                    <td><input class="columna1" id="5" type="button" value="5" onClick="addChar(this.form.display, '5')"></td>
                    <td><input class="columna1" id="6" type="button" value="6" onClick="addChar(this.form.display, '6')"></td>
                    <td><input class="columna2" id="resta" type="button" value="-" onClick="addChar(this.form.display, '-')"></td>
                </tr>
                <tr>
                    <td><input class="columna1" id="1" type="button" value="1" onClick="addChar(this.form.display, '1')"></td>
                    <td><input class="columna1" id="2" type="button" value="2" onClick="addChar(this.form.display, '2')"></td>
                    <td><input class="columna1" id="3" type="button" value="3" onClick="addChar(this.form.display, '3')"></td>
                    <td><input class="columna2" id="multiplicacion" type="button" value="*" onClick="addChar(this.form.display, '*')"></td>
                </tr>
                <tr>
                    <td><input class="columna1" id="clear" type="button" value="CE" onClick="this.form.display.value = 0 "></td>
                    <td><input class="columna1" id="0" type="button" value="0" onClick="addChar(this.form.display, '0')"></td>
                    <td><input class="columna1" id="equals" type="button" value="=" onClick="if (checkNum(this.form.display.value))
                                                                                                      { compute(this.form) }"></td>
                    <td><input class="columna2" id="division" type="button" value="/" onClick="addChar(this.form.display, '/')"></td>
                </tr>
            </table>
        </form>
    </div>
</center>
</body>
</html>

1
  • Gracias por el aporte amigo, ahora entiendo la dinamica, tomare encuenta lo del "eval".
    – A.Rafa
    Commented el 27 sept. 2017 a las 0:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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