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”> </td>
<td align=”center” valign=”middle”> </td>
<td align=”center” valign=”middle”> </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”> </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”> </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”> </td>
<td colspan=”6″ align=”center” valign=”middle”> </td>
</tr>
</table>
</form>
</body>
</html>

Facebook

Twitter

Share this on WhatsApp

Uma resposta para “Calculadora em JavaScript e jQuery – Conclusão”

Ernesto Vieira Magalhães disse:

28 de outubro de 2017 às 21:19

Agradeço imensamente a todos que deixam comentários e elogios no blog. Peço porém a quem deseja alguma resposta mais rápida entrar em contato por e-mail usando a aba Contato, pois devido a quantidade de comentários nos diversos artigos do blog, muitas vezes pode demorar até que eu chegue ao seu comentário.
Muito obrigado.

Thank you so much to all who leave comments and compliments on the blog. But I would ask anyone who wants a quicker response to contact us by email using the Contact tab, because due to the amount of comments in the various articles in the blog, it can often take until I get to your comment.
Thank you very much.

Deixe um comentário Cancelar resposta

Você precisa fazer o login para publicar um comentário.