Curso de JavaScript e jQuery – Aula 001
Nesta aula, vamos dar início à cração de uma Calculadora usando programação JavaScript e jQuery sendo que, nesta aula, vamos apenas dar o pontapé inicial.
– Vamos criar a página
– Vamos criar o formulário
– Vamos inserir a programação das quatro operações aritméticas
Não vamos, nessa aula, incluir nenhuma programação referente às críticas das informações para verificar se os dados contidos nos campos 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.
A última aula desse projeto será apenas para explicar TODO o código já que ele estará completo.
Criar um arquivo novo e salvá-lo em uma pasta de sua preferência como calculadora.html
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() {
var val1 = $(“#valor1”).val();
var val2 = $(“#valor2”).val();
var res = parseFloat(val1) + parseFloat(val2);
$(“#resultado”).html(res);
});
$(“#subtrair”).click(function() {
var val1 = $(“#valor1”).val();
var val2 = $(“#valor2”).val();
var res = parseFloat(val1) – parseFloat(val2);
$(“#resultado”).html(res);
});
$(“#multiplicar”).click(function() {
var val1 = $(“#valor1”).val();
var val2 = $(“#valor2”).val();
var res = parseFloat(val1) * parseFloat(val2);
$(“#resultado”).html(res);
});
$(“#dividir”).click(function() {
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>
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.