Curso de JavaScript e jQuery:

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 incluir os botões: Percentual (%) e Limpar (C)

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, porque é o editor que eu uso no curso, mas se você usa outro, menos mau, pois todos são parecidos. Se não usa nenhum, 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 enquanto eu faço e explico 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 val1 = $(“#valor1”).val();
var val2 = $(“#valor2”).val();
var res = parseFloat(val1) + parseFloat(val2);
$(“#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 val1 = $(“#valor1”).val();
var val2 = $(“#valor2”).val();
var res = parseFloat(val1) – parseFloat(val2);
$(“#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 val1 = $(“#valor1”).val();
var val2 = $(“#valor2”).val();
var res = parseFloat(val1) * parseFloat(val2);
$(“#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 val1 = $(“#valor1”).val();
var val2 = $(“#valor2”).val();
var res = parseFloat(val1) / parseFloat(val2);
$(“#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(“”);
});
});
</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 colspan=”6″ align=”center” valign=”middle”> </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:#FFF; width:140px; 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″></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 – Aula 003”

Ernesto Vieira Magalhães disse:

28 de outubro de 2017 às 20:48

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.