Aula 14 – JavaScript na prática – Cadastro de Contatos em JavaScript
Na aula passada, nós tivemos nosso primeiro contato com a linguagem JavaScript.
Hoje, desenvolveremos um exemplo prático de um aplicativo nesta linguagem.
Faremos o protótipo de uma agenda de contatos. A implementação desta agenda será útil para ilustrar como é a prática de trabalho com JavaScript, como depuramos nosso código e, principalmente, como representamos objetos e vetores.
Esta aula não possui material relacionado, retorne ao material da aula anterior para dúvidas.
Retorne à aula anterior para dúvidas referentes à sintaxe básica da linguagem.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<form action="">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome"><br>
<label for="nascimento">Data nascimento:</label>
<input type="text" id="nasc" name="nasc"><br>
<input type="button" id="btConfirmar" value="Novo">
<div id="listaContatos"></div>
</form>
<script type="text/javascript">
var idContato = 1;
var contatos = [];
var criarContato = function(pnome, pnascimento) {
var contato = { id: idContato++, nome: pnome, nascimento: pnascimento};
return contato;
}
var armazenarContato = function(contato,contatos) {
contatos[contatos.length] = contato;
}
var pesquisarContatoPeloId = function(id, contatos) {
// Percorrer todos os contatos
for(var i=0;i<contatos.length;i++) {
// Se for o contato esperado, retorne este contato!
if(contatos[i].id===id) {
return contatos[i];
}
}
}
var excluirContatoPeloId = function(id, contatos) {
// Percorrer todos os contatos
for(var i=0;i<contatos.length;i++) {
// Se for o contato esperado, elimine o contato!
if(contatos[i].id===id) {
contatos.splice(i,1);
}
}
}
var incluirNovoContato = function () {
var nome = document.getElementById("nome").value;
var nascimento = document.getElementById("nasc").value;
var contato = criarContato(nome, nascimento);
armazenarContato(contato, contatos);
}
document.getElementById("btConfirmar").onclick = incluirNovoContato;
// Código de Teste!
/*
arm = criarContato("Armando", "23/4");
jam = criarContato("Jamanta", "22/5");
cla = criarContato("Claudio", "23/6");
armazenarContato(arm, contatos);
armazenarContato(jam, contatos);
armazenarContato(cla, contatos);
*/
</script>
</body>
</html>
Comentários