Calculo em JavaScript

2 de julho de 2009 8 respostas

fabioguida 2 de julho de 2009

Galera estou montando uma tela de pdv, e queria saber se tem como em java scrip mesmo eu fazer o calculo pra gerar o troco do cliente...

no caso eu tenho que pegar o valor que o caixa digita e subtrair com o total dos produtos..

como eu poderia fazer isso

aki estaum as jsp's de onde tem o totalGeral dos produtos e onde o caixa vai colocar o valor recebido

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>PDV</title>
        <script src="include/scripts/prototype.js"></script>
        <script src="include/scripts/jsLib.js"></script>
    </head>
    <body>
        <center><h1>Ponto de Venda - <font color="Red">Meeble Tecnologia</font></h1></center>
        <table border="1" cellpadding="5" cellspacing="0">
            <tr>
                <td>
                    <table width="20%" bgcolor="silver" border="1">
                    <tr>
                        <td>
                            <h4><b><font color="Blue">Data Venda:</font></b></h4>
                        </td>
                        <td>
                            <b><fmt:formatDate value="${vendaPDV.dataVenda}" pattern="dd/MM/yyyy" /></b>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <h4><b>Cliente:  <input type="text" size="35" onblur="localizaCliente()" id="_idCliente" name="idCliente" value="<c:out value='${vendaPDV.clienteDTO.codigo}' />"></b></h4>
                        </td>
                        <td>
                            <b><div id="razaoSocial"></div></b>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <h4><b>Quantidade:</b></h4>
                        </td>
                        <td>
                            <input type="text" size="30" id="_quantidade" name="quantidade" value="1">
                        </td>
                    </tr>            
                    <tr>
                        <td>
                            <h4><b>Produto:<input type="text" size="35" onblur="localizaProduto()" id="_idProduto"name="idCliente" value="<c:out value='${vendaPDV.clienteDTO.codigo}' />"></b></h4>
                        </td>
                        <td>
                            <b><div size="50" id="_produtoDescricao"></div></b>
                        </td>    
                    </tr>    
                    </table></td>
                        <td width="100%">
                            <table width="100%" align="right">
                                <div id="_listaProdutos"></div>
                            </table>  
                        </td>    
            </table>
            <table>            
                <tr>
                    <td>
                        <b><h3><font color="blue">Forma de Pagamento: </font></h3></b>
                    </td>
                    <td>
                        <select type=text name="pagamento" value=''>
                            <option value="dinheiro">Dinheiro</option>
                            <option value="cartaoCredito">Cartao de Crédito</option>
                            <option value="cartaoDebito">Cartão de Débito</option>
                            <option value="Cheque">Cheque</option>
                        </select>
                    </td>
                    <td>
                        <b><h3><font color="blue">Valor: </font><input type="text" size="20" name="valor"></h3></b>
                    </td>
                    <td>
                        <h3><b><font color="blue">Troco: </font></b></h3>
                    </td>
                    <td>
                        <h3><b><fmt:formatNumber value="${0.00}"  /></b></h3>
                    </td>                
                </tr>
            </table>            
            <table>
                <tr>
                    <td>
                        <input type="button" name="concluir" value="Finalizar Venda" onclick="finalizarVenda()">
                    </td>
                    <td>
                        <a href=Controller.fwk?_action=menu\menu.jsp><input type=submit value=Menu></a>
                    </td>
                    <tr>
                    <td>
                        <h3><b>Usuário Logado:</b>
                        <font color="blue"><b><c:out value="${usuarioDTO.nome}"/></b></font></h3>
                    </td>                        
                    </tr>
                </tr>
            </table>
    </body>
</html>
<script>
    $('_idCliente').value='';
    $('_idProduto').value='';
    $('_idCliente').focus(); // posiciona curso no cliente ao carregar a página

//---------------------------------------------------------
   function localizaCliente(){
       parametros = {idCliente: $('_idCliente').value };
       callAjax("ajax.PDV", "getClienteRazaoSocial", "clienteRazaoSocial", parametros);
   }

   function clienteRazaoSocialSuccess( dados ) {
       eval( dados );
       $('razaoSocial').innerHTML= retorno;
   }

   function clienteRazaoSocialFailure( dados ){
       alert('Erro : anoFailure() !!!!');
   }
//---------------------------------------------------------

   function localizaProduto(){
      if( $('_idProduto').value!=''){
          parametros = {idProduto: $('_idProduto').value, quantidade : $('_quantidade').value }; // passar para o ajax 2 valores
          callAjax("ajax.PDV", "getProdutoDTO", "produtoDTO", parametros);
           $('_quantidade').value='1';
           $('_idProduto').value='';
           $('_idProduto').focus();
      }
   }

   function produtoDTOSuccess( dados ) {
       eval( dados);
       $('_produtoDescricao').innerHTML = retorno;
       $('_listaProdutos').innerHTML =
           "<iframe style='width:100%;height:200px' src='Controller.fwk?_action=cadastro/venda/listaProdutos.jsp?a="+Math.random()*1000+"'></iframe>"
       $('_idProduto').focus();    
   }

   function produtoDTOFailure( dados ){
       alert('Erro : anoFailure() !!!!');
   }
//---------------------------------------------------------
  
//---------------------------------------------------------
   function finalizarVenda(){
       callAjax("ajax.PDV", "finalizarVenda", "finalizarVenda", {});
   }

   function finalizarVendaSuccess( dados ){
       alert("Venda Finalizada com Sucesso !!!");
       window.location.href='Controller.fwk?_action=cadastro.venda.Inicializacao';
   }

   function finalizarVendaFailure( dados ){
       alert("Erro ao finalizar a venda");
   }

//
//---------------------------------------------------------
</script>

notem que o Campo Valor é onde o caixa coloca o valor recebido...tenho que subtrair com o totalGeral que esta em outra pagina...e trazer o resultado no campo Troco

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
        <script src="include/scripts/prototype.js"></script>
        <script src="include/scripts/jsLib.js"></script>  
        <table border="1">
            <th width="200">
                Produto
            </th>
            <th width="150">
                Preço Unitário
            </th>
            <th width="100">
                Quantidade
            </th>
            <th width="100">
                Excluir
            </th>
        </table>
        <table>
            <c:forEach items="${vendaPDV.listaProdutos}" var="produtoDTO">
                <tr>
                    <td width="200">
                        <c:out value="${produtoDTO.descricao}"/>
                    </td>
                    <td width="100" align="right">
                        <fmt:formatNumber value="${produtoDTO.precoUnitario}" pattern="0.00"  />
                    </td>
                    <td width="100" align="right">
                        <fmt:formatNumber value="${produtoDTO.quantidadeDisponivel}" pattern="0.00"  />
                    </td>
                    <td width="100" align="right">
                        <a href="javascript:void" onclick='excluirProduto(<c:out value="${produtoDTO.codigo}"/>)'>Excluir</a></f>
                    </td>
                </tr>
            </c:forEach>
             <tr>
                <td>
                    <b><h3>Total Geral:</h3></b>
                </td>
                <td>
                    <b><fmt:formatNumber value="${vendaPDV.totalGeral}" pattern="0.00" /></b>
                </td>
            </tr>
        </table>      
<script>

    function excluirProduto(_idProduto) {
      parametros = {idProduto: _idProduto };
      callAjax("ajax.PDV", "excluirProduto", "excluirProduto", parametros);
    }

    function excluirProdutoSuccess(){
        document.location.reload(true);
    }

    function excluirProdutoFailure(){
        document.location.reload(true);
    }
</script>

valeu galera

8 Respostas

Paezani 2 de jul. de 2009

Bom se eu entendi o que vc está precisando é mais ou menos isso. criei a seguinte função javascript:

function calcula(form) 
{  
  var x = Subst(form.campovalordinheiro.value, "," , ".");
  var y = Subst(form.campototalprodutos.value, "," , ".");
 
  var soma = eval(x) - eval(y);
  form.resultado.value = (Math.round(soma*100))/100 ; 
}

function Subst(Texto, Isto, PorIsto) { //funçao para substituir vírgula por ponto

     var ret = "", i;

     if (Isto.length < 0) {
          ret = Texto;
     }
     else {
          for (i = 0; i <= (Texto.length - 1); i++) {
               if (Texto.substr(i, Isto.length) == Isto) {
                    ret = ret + PorIsto;
                    i = i + (Isto.length - 1);
               }
               else {
                    ret = ret + Texto.substr(i, 1);
               }
          }
     }

     return ret;
}

E vc coloca o evento onBlur do campo dinheiro(assim ao perder o foco, ele calcula o troco) chamando a função da seguinte maneira:

Atenção: coloque os nomes dos campos na função javascript…Fico no aguardo, espero ter ajudado

fabioguida 2 de jul. de 2009

Valeu mesmo Paezani, vou testar ainda hoje e assim funcionando eu aviso voce, e se surgir alguma duvida tbm…

valeu mais uma vez, abraços.

fabioguida 2 de jul. de 2009

naum entendi o pq da função de substituir ponto por virgula...

só isso naum funcionaria ???

function calcula(form)   
 {    
   var x = Subst(form.campovalordinheiro.value, "," , ".");  
   var y = Subst(form.campototalprodutos.value, "," , ".");  
   
   var soma = eval(x) - eval(y);  
   form.resultado.value = (Math.round(soma*100))/100 ;   
 }

e onde eu coloco o nome dos campos ???

sem falar que o dinheiro é em uma jsp e o totalGeral esta em outra jsp...

ai a função eu colocaria na jsp de onde ta o dinheiro e como faço pra pegar o totalGeral da outra jsp ???

se puder me explicar...sou bem leigo em javascript..

valeu

Paezani 3 de jul. de 2009

Fabio, então esta função de substituir ponto por virgula é pra não dar erro no cálculo… igual ao java… em caso de números decimais( 9,70 )… Agora quanto aos valores, vc tem que passar o valor do primeiro( do jsp do dinheiro ou do total geral) para opróximo jsp… E mostrá-lo na tela… Ve c sabe mexer com parâmetros?

Fico no aguardo.

fabioguida 3 de jul. de 2009

ai que esta, naum sei mexer com parametros…

fabioguida 3 de jul. de 2009

Olha só...coloquei essa função na minha pagina ontem tem o campo dinheiro e o troco...

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Ponto de Venda - Meeble Tecnologia</title>
        <script src="include/scripts/prototype.js"></script>
        <script src="include/scripts/jsLib.js"></script>
    </head>
    <body>
        <center><h1>Ponto de Venda - <font color="Red">Meeble Tecnologia</font></h1></center>
        <form method=post name='pdv' method="POST">
        <table border="1" cellpadding="5" cellspacing="0">
            <tr>
                <td>
                    <table width="20%" bgcolor="silver" border="1">
                    <tr>
                        <td>
                            <h4><b><font color="Blue">Data Venda:</font></b></h4>
                        </td>
                        <td>
                            <b><fmt:formatDate value="${vendaPDV.dataVenda}" pattern="dd/MM/yyyy" /></b>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <h4><b>Cliente:  <input type="text" size="35" onblur="localizaCliente()" id="_idCliente" name="idCliente" value="<c:out value='${vendaPDV.clienteDTO.codigo}' />"></b></h4>
                        </td>
                        <td>
                            <b><div id="razaoSocial"></div></b>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <h4><b>Quantidade:</b></h4>
                        </td>
                        <td>
                            <input type="text" size="30" id="_quantidade" name="quantidade" value="1">
                        </td>
                    </tr>            
                    <tr>
                        <td>
                            <h4><b>Produto:<input type="text" size="35" onblur="localizaProduto()" id="_idProduto"name="idCliente" value="<c:out value='${vendaPDV.clienteDTO.codigo}' />"></b></h4>
                        </td>
                        <td>
                            <b><div size="50" id="_produtoDescricao"></div></b>
                        </td>    
                    </tr>    
                    </table></td>
                        <td width="100%">
                            <table width="100%" align="right">
                                <div id="_listaProdutos"></div>
                            </table>  
                        </td>    
            </table>
            <table>            
                <tr>
                    <td>
                        <b><h3><font color="blue">Forma de Pagamento: </font></h3></b>
                    </td>
                    <td>
                        <select type=text name="pagamento" value=''>
                            <option value="dinheiro">Dinheiro</option>
                            <option value="cartaoCredito">Cartao de Crédito</option>
                            <option value="cartaoDebito">Cartão de Débito</option>
                            <option value="Cheque">Cheque</option>
                        </select>
                    </td>
                    <td>
                        <b><h3><font color="blue">Valor: </font><input type="text" size="20" onBlur='calcula(this.pdv);' name="dinheiro"></h3></b><p></p>
                    </td>
                    <td>
                        <h3><b><font color="blue">Troco: <label name="res"></label></font></b></h3>
                    </td>
                    <td>
                        <h3><b><fmt:formatNumber value="${0.00}"  /></b></h3>
                    </td>                
                </tr>
            </table>              
            <table>
                <tr>
                    <td>
                        <input type="button" name="concluir" value="Finalizar Venda" onclick="finalizarVenda()">
                    </td>
                    <td>
                        <a href=Controller.fwk?_action=menu\menu.jsp><input type=submit value=Menu></a>
                    </td>
                    <tr>
                    <td>
                        <h3><b>Usuário Logado:</b>
                        <font color="blue"><b><c:out value="${usuarioDTO.nome}"/></b></font></h3>
                    </td>                        
                    </tr>
                </tr>
            </table>
            </form>
    </body>
</html>
<script>
    $('_idCliente').value='';
    $('_idProduto').value='';
    $('_idCliente').focus(); // posiciona curso no cliente ao carregar a página

//---------------------------------------------------------
   function localizaCliente(){
       parametros = {idCliente: $('_idCliente').value };
       callAjax("ajax.PDV", "getClienteRazaoSocial", "clienteRazaoSocial", parametros);
   }

   function clienteRazaoSocialSuccess( dados ) {
       eval( dados );
       $('razaoSocial').innerHTML= retorno;
   }

   function clienteRazaoSocialFailure( dados ){
       alert('Erro : anoFailure() !!!!');
   }
//---------------------------------------------------------

   function localizaProduto(){
      if( $('_idProduto').value!=''){
          parametros = {idProduto: $('_idProduto').value, quantidade : $('_quantidade').value }; // passar para o ajax 2 valores
          callAjax("ajax.PDV", "getProdutoDTO", "produtoDTO", parametros);
           $('_quantidade').value='1';
           $('_idProduto').value='';
           $('_idProduto').focus();
      }
   }

   function produtoDTOSuccess( dados ) {
       eval( dados);
       $('_produtoDescricao').innerHTML = retorno;
       $('_listaProdutos').innerHTML =
           "<iframe style='width:100%;height:200px' src='Controller.fwk?_action=cadastro/venda/listaProdutos.jsp?a="+Math.random()*1000+"'></iframe>"
       $('_idProduto').focus();    
   }

   function produtoDTOFailure( dados ){
       alert('Erro : anoFailure() !!!!');
   }
//---------------------------------------------------------
  
//---------------------------------------------------------
   function finalizarVenda(){
       callAjax("ajax.PDV", "finalizarVenda", "finalizarVenda", {});
   }

   function finalizarVendaSuccess( dados ){
       alert("Venda Finalizada com Sucesso !!!");
       window.location.href='Controller.fwk?_action=cadastro.venda.Inicializacao';
   }

   function finalizarVendaFailure( dados ){
       alert("Erro ao finalizar a venda");
   }

////--------------------------------------------------------- 

 function calcula(form)   
 {    
   var x = Subst(form.campovalordinheiro.value, "," , ".");  
   var y = Subst(form.campototalprodutos.value, "," , ".");  
   
   var soma = eval(x) - eval(y);  
   form.resultado.value = (Math.round(soma*100))/100 ;   
 }  
   
 function Subst(Texto, Isto, PorIsto) { //funçao para substituir vírgula por ponto  
   
      var ret = "", i;  
   
      if (Isto.length < 0) {  
           ret = Texto;  
      }  
      else {  
           for (i = 0; i <= (Texto.length - 1); i++) {  
                if (Texto.substr(i, Isto.length) == Isto) {  
                     ret = ret + PorIsto;  
                     i = i + (Isto.length - 1);  
                }  
                else {  
                     ret = ret + Texto.substr(i, 1);  
                }  
           }  
      }  
   
      return ret;  
 } 

</script>

agora o campo onde tem o totalGeral esta na nessa pagina

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
        <script src="include/scripts/prototype.js"></script>
        <script src="include/scripts/jsLib.js"></script>  
        <table border="1">
            <th width="200">
                Produto
            </th>
            <th width="150">
                Preço Unitário
            </th>
            <th width="100">
                Quantidade
            </th>
            <th width="100">
                Excluir
            </th>
        </table>
        <table>
            <c:forEach items="${vendaPDV.listaProdutos}" var="produtoDTO">
                <tr>
                    <td width="200">
                        <c:out value="${produtoDTO.descricao}"/>
                    </td>
                    <td width="100" align="right">
                        <fmt:formatNumber value="${produtoDTO.precoUnitario}" pattern="0.00"  />
                    </td>
                    <td width="100" align="right">
                        <fmt:formatNumber value="${produtoDTO.quantidadeDisponivel}" pattern="0.00"  />
                    </td>
                    <td width="100" align="right">
                        <a href="javascript:void" onclick='excluirProduto(<c:out value="${produtoDTO.codigo}"/>)'>Excluir</a></f>
                    </td>
                </tr>
            </c:forEach>
             <tr>
                <td>
                    <b><h3>Total Geral:</h3></b>
                </td>
                <td>
                    <b><fmt:formatNumber value="${vendaPDV.totalGeral}" pattern="0.00" /></b>
                </td>
            </tr>
        </table>       
<script>

    function excluirProduto(_idProduto) {
      parametros = {idProduto: _idProduto };
      callAjax("ajax.PDV", "excluirProduto", "excluirProduto", parametros);
    }

    function excluirProdutoSuccess(){
        document.location.reload(true);
    }

    function excluirProdutoFailure(){
        document.location.reload(true);
    }
</script>

o calculo sera feito na pagina PDV...na primeira que eu coloquei a função de calculo...ae

eu sei que o q eu quero fazer é bem simples....mas naum to sabendo fazer...

logicamente seria...
var x recebe total geral
var y recebe dinheiro

var troco = dinheiro - totalGeral

mais uma vez valeu mesmo pela ajuda

Paezani 3 de jul. de 2009

No jsp TotalGeral vc coloca o código abaixo pra receber o valor do dinheiro e troco…vc coloca entre <%…%> e antes do form de seu jsp…

String dinheiro = request.getParameter("dinheiro");//o nome entre parentese é o nome de seu campo no jsp anteriror
String troco = request.getParameter("troco");

só q o valor do troco pelo q vi está em uma label…tem q estar em uma cx de texto…
Pra vc ver se trouxe os valores:

<input type='text' name='dinheiro' value='<%out.print(dinheiro);%>'  >

Fico no aguardo

thingol 3 de jul. de 2009

Cuidado ao fazer contas em JavaScript. É que o JavaScript usa “double” (como o Java) para fazer contas, e você sabe o que pode ocorrer com “double”.

Criado 2 de julho de 2009

Ultima resposta 3 de jul. de 2009

Respostas 8

Participantes 3

8 Respostas

Topicos relacionados