Curso de JavaScript e jQuery - Aula 002
Nesta aula, vamos dar continuidade à cração da Calculadora usando programação JavaScript e jQuery sendo que, nesta aula, vamos apenas incluir as críticas aos dados.
- Vamos verificar se os valores digitados são números
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 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);
}
});
});
</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="4" align="center" valign="middle"> </td>
</tr>
<tr>
<td align="right" valign="middle"> </td>
<td colspan="4" 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="4" 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="4" 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>
</tr>
<tr>
<td align="right" valign="middle"> </td>
<td colspan="4" align="center" valign="middle"> </td>
</tr>
</table>
</form>
</body>
</html>
Nenhum comentário :
Postar um comentário
Comentário, Pedido, Sugestão...