Calculadora em JavaScript

Nesta aula, vamos dar continuidade à criação da Calculadora usando programação JavaScript e jQuery sendo que, nesta aula, vamos incluir mais botões e ações à nossa calculadora.

Vamos fazer uns ajustes ao que foi feito na aula passada.
Vamos incluir os botões:
– Somar na Memória (M+),
– Subtrair da Memória (M-),
– Recuperar da Menmória (MR) e
– Limpar a Memória (MC)

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.

Se você tem e usa o DreamWeaver, ótimo. Se não usa nem deseja, pode usar o Bloco de Notas mesmo. Você só precisa copiar e colar o código abaixo para ele, e acompanhar o código para entender os comandos.

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>
<p> </p>
</body>
</html>

Facebook

Twitter

Share this on WhatsApp

Uma resposta para “Curso de JavaScript e jQuery – Aula 004”

Ernesto Vieira Magalhães disse:

28 de outubro de 2017 às 21:08

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.