Curso de JavaScript - Aula 1
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>
Nenhum comentário :
Postar um comentário
Comentário, Pedido, Sugestão...