Assinar Kinghost
Testar G Suite

Pesquisar:

Custom Search

quinta-feira, 30 de março de 2017

Calculadora em JavaScript e jQuery - Conclusão

Veja esse artigo em melhor design no Blog Acervo Ceará Cultural

Explicando o Código:

Nesta aula, vamos explicar o Código do HTML e do JavaScript e jQuery usado para montar a calculadora.

Se você não assistiu às aulas 1 a 4, assista para poder acompanhar melhor essa aula.

Veja o vídeo em Tela Cheia, mas abra o seu editor de página aberto para poder dar Pausa e Ctrl+Tab para alternar entre o vídeo e o programa. Isso para você poder ir fazendo o seu projeto enquanto acompanha o vídeo.

Para mostrar e explicar os comandos desse projeto, eu o abri no Bloco de Notas. No código abaixo o que está em azul é html e o que está marrom é JavaScript.



Código do Projeto:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Calculadora em JavaScript e jQuery</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#somar").click(function() {
if($("#valor1").val()==""){
alert("Informe o Valor 1!");
$("#valor1").focus();
return false;
} else if(!(/^[+-]?((\d+|\d{1,3}(\.\d{3})+)(\,\d*)?|\,\d+)$/.test($("#valor1").val()))) {
alert("Informe um Valor Válido!");
$("#valor1").focus();
return false;
} else if($("#valor2").val()==""){
alert("Informe o Valor 2!");
$("#valor2").focus();
return false;
} else if(!(/^[+-]?((\d+|\d{1,3}(\.\d{3})+)(\,\d*)?|\,\d+)$/.test($("#valor2").val()))) {
alert("Informe um Valor Válido!");
$("#valor2").focus();
return false;
} else {
var resu = $("#resultado").html();
if (resu == "") {
resu = "0";
}
var val1 = $("#valor1").val();
var val2 = $("#valor2").val();
var tot  = parseFloat(val1) + parseFloat(val2);
var res  = parseFloat(tot) + parseFloat(resu);
$("#resultado").html(res);
}
});
$("#subtrair").click(function() {
if($("#valor1").val()==""){
alert("Informe o Valor 1!");
$("#valor1").focus();
return false;
} else if(!(/^[+-]?((\d+|\d{1,3}(\.\d{3})+)(\,\d*)?|\,\d+)$/.test($("#valor1").val()))) {
alert("Informe um Valor Válido!");
$("#valor1").focus();
return false;
} else if($("#valor2").val()==""){
alert("Informe o Valor 2!");
$("#valor2").focus();
return false;
} else if(!(/^[+-]?((\d+|\d{1,3}(\.\d{3})+)(\,\d*)?|\,\d+)$/.test($("#valor2").val()))) {
alert("Informe um Valor Válido!");
$("#valor2").focus();
return false;
} else {
var resu = $("#resultado").html();
if (resu == "") {
resu = "0";
}
var val1 = $("#valor1").val();
var val2 = $("#valor2").val();
var tot  = parseFloat(val1) - parseFloat(val2);
var res  = parseFloat(resu) - parseFloat(tot);
$("#resultado").html(res);
}
});
$("#multiplicar").click(function() {
if($("#valor1").val()==""){
alert("Informe o Valor 1!");
$("#valor1").focus();
return false;
} else if(!(/^[+-]?((\d+|\d{1,3}(\.\d{3})+)(\,\d*)?|\,\d+)$/.test($("#valor1").val()))) {
alert("Informe um Valor Válido!");
$("#valor1").focus();
return false;
} else if($("#valor2").val()==""){
alert("Informe o Valor 2!");
$("#valor2").focus();
return false;
} else if(!(/^[+-]?((\d+|\d{1,3}(\.\d{3})+)(\,\d*)?|\,\d+)$/.test($("#valor2").val()))) {
alert("Informe um Valor Válido!");
$("#valor2").focus();
return false;
} else {
var resu = $("#resultado").html();
if (resu == "") {
resu = "0";
}
var val1 = $("#valor1").val();
var val2 = $("#valor2").val();
var tot  = parseFloat(val1) * parseFloat(val2);
var res  = parseFloat(tot) + parseFloat(resu);
$("#resultado").html(res);
}
});
$("#dividir").click(function() {
if($("#valor1").val()==""){
alert("Informe o Valor 1!");
$("#valor1").focus();
return false;
} else if(!(/^[+-]?((\d+|\d{1,3}(\.\d{3})+)(\,\d*)?|\,\d+)$/.test($("#valor1").val()))) {
alert("Informe um Valor Válido!");
$("#valor1").focus();
return false;
} else if($("#valor2").val()==""){
alert("Informe o Valor 2!");
$("#valor2").focus();
return false;
} else if(!(/^[+-]?((\d+|\d{1,3}(\.\d{3})+)(\,\d*)?|\,\d+)$/.test($("#valor2").val()))) {
alert("Informe um Valor Válido!");
$("#valor2").focus();
return false;
} else {
var resu = $("#resultado").html();
if (resu == "") {
resu = "0";
}
var val1 = $("#valor1").val();
var val2 = $("#valor2").val();
var tot  = parseFloat(val1) / parseFloat(val2);
var res  = parseFloat(tot) + parseFloat(resu);
$("#resultado").html(res);
}
});
$("#porcento").click(function() {
if($("#valor1").val()==""){
alert("Informe o Valor 1!");
$("#valor1").focus();
return false;
} else if(!(/^[+-]?((\d+|\d{1,3}(\.\d{3})+)(\,\d*)?|\,\d+)$/.test($("#valor1").val()))) {
alert("Informe um Valor Válido!");
$("#valor1").focus();
return false;
} else if($("#valor2").val()==""){
alert("Informe o Valor 2!");
$("#valor2").focus();
return false;
} else if(!(/^[+-]?((\d+|\d{1,3}(\.\d{3})+)(\,\d*)?|\,\d+)$/.test($("#valor2").val()))) {
alert("Informe um Valor Válido!");
$("#valor2").focus();
return false;
} else {
var val1 = $("#valor1").val();
var val2 = $("#valor2").val();
var res  = (parseFloat(val1) * parseFloat(val2)) / 100;
$("#resultado").html(res);
}
});
$("#limpar").click(function() {
$("#valor1").val("");
$("#valor2").val("");
$("#resultado").html("0");
});
// Botões de Memória
$("#pegar_m").click(function() {
var memo = $("#memoria").val();
$("#resultado").html(memo);
});
$("#somar_m").click(function() {
var memo = $("#memoria").val();
if (memo == "") {
memo = "0";
}
var resu = $("#resultado").html();
var res  = parseFloat(memo) + parseFloat(resu);
$("#memoria").val(res);
});
$("#subtrair_m").click(function() {
var memo = $("#memoria").val();
if (memo == "") {
memo = "0";
}
var resu = $("#resultado").html();
var res  = parseFloat(memo) - parseFloat(resu);
$("#memoria").val(res);
});
$("#limpar_m").click(function() {
$("#memoria").val("0");
$("#resultado").html("0");
});
});
</script>
</head>
<body>
<h1>Calculadora em JavaScript e jQuery</h1>
<form name="form1" method="post" action="">
  <table width="400" border="0" cellspacing="0" cellpadding="0" bgcolor="#CCC">
    <tr>
      <td align="right" valign="middle">&nbsp;</td>
      <td align="center" valign="middle">&nbsp;</td>
      <td align="center" valign="middle">&nbsp;</td>
      <td align="center" valign="middle"><input type="button" name="somar_m" id="somar_m" value="M+"></td>
      <td align="center" valign="middle"><input type="button" name="subtrair_m" id="subtrair_m" value="M-"></td>
      <td align="center" valign="middle"><input type="button" name="pegar_m" id="pegar_m" value="MR"></td>
      <td align="center" valign="middle"><input type="button" name="limpar_m" id="limpar_m" value="MC"></td>
    </tr>
    <tr>
      <td align="right" valign="middle">&nbsp;</td>
      <td colspan="6" align="center" valign="middle">
      <div id="resultado" style="text-align:right;font-size:24px;font-weight:bold; background-color:#FF0; width:170px; height:25px;">0</div></td>
    </tr>
    <tr>
      <td align="right" valign="middle"><strong>Valor 1:</strong></td>
      <td colspan="6" align="center" valign="middle"><input type="text" name="valor1" id="valor1">
      <input name="memoria" type="hidden" id="memoria" value="0"></td>
    </tr>
    <tr>
      <td align="right" valign="middle"><strong>Valor 2:</strong></td>
      <td colspan="6" align="center" valign="middle"><input type="text" name="valor2" id="valor2"></td>
    </tr>
    <tr>
      <td align="right" valign="middle">&nbsp;</td>
      <td align="center" valign="middle"><input type="button" name="somar" id="somar" value="+"></td>
      <td align="center" valign="middle"><input type="button" name="subtrair" id="subtrair" value="-"></td>
      <td align="center" valign="middle"><input type="button" name="multiplicar" id="multiplicar" value="X"></td>
      <td align="center" valign="middle"><input type="button" name="dividir" id="dividir" value="/"></td>
      <td align="center" valign="middle"><input type="button" name="porcento" id="porcento" value="%"></td>
      <td align="center" valign="middle"><input type="button" name="limpar" id="limpar" value="C"></td>
    </tr>
    <tr>
      <td align="right" valign="middle">&nbsp;</td>
      <td colspan="6" align="center" valign="middle">&nbsp;</td>
    </tr>
  </table>
</form>
</body>
</html>



Postado por às

Print Friendly and PDF

Marcadores: ,

Nenhum comentário :

Postar um comentário

Comentário, Pedido, Sugestão...

Assinar: Postar comentários ( Atom )