App Agenda de Contatos em Javascript

Um simples aplicativo.

Um exemplo muito simples de aplicativo em JavaScript.

O aplicativo será uma agenda de contatos, nosso app deve permitir:
inserir nome, telefone, email.
salvar.
listar.

Nota:
A função salvar, vai apenas adicionar contatos em um Array, salvando apenas na memória RAM. Ou seja, assim que o app for recarregado no navegador, ou fechado, todos os contatos será apagado.

Ferramentas necessária.

Hardware

Não precisa ter um hardware potente para desenvolver este app, qualquer PC básico pode dar conta do recado. Você pode criar esse projeto até mesmo usando um smartphone ou tablet.

Sistemas

PC ou Notebook

Windows XP ou superior.
Linux OS.
Mac OS.

Mobile

Android OS.
Windows Phone.
iOS.

Software

Não é necessário um software sofisticado como uma IDE. Para desenvolver esse pequeno app, basta apenas um editor de texto qualquer, por exemplo: bloco de notas, notepad++ entre outros. deve ter instalado um navegador também, por exemplo: Chrome, Opera, Mozilla Firefox, Internet Explorer.

Criar uma pasta

Vá no seu gerenciador de arquivos e crie uma pasta com nome de sua escolha, ou por exemplo: Lista_de_contatos. Abra a pasta recém criada, dentro dela, crie um arquivo com o seguinte nome: index.html. Depois de criado, então abra esse arquivo em um editor de texto.

Adicionando o html mínimo

Criando o formulário do app

Coloque todo esse código entre a tag <body> abaixo da tag <h2>..</h2> e antes da tag </body>.

Adicionando a tabela de contatos

Código HTML define apenas a parte visual como você vê na imagem acima, ou seja, a interface na qual o usuário vai interagir. No entanto, não tem funcionalidade alguma, para que funcione da forma que queremos, precisamos de uma linguagem de programação. E é aí que o javascript entra na jogada.

Código Javascript

Para adicionar código javascript em um arquivo HTML, precisamos adicionar a tag <script> </script> entre essas tags você coloca todo código js.

Acredito eu, ao lê os comentários que está no código é mais que o suficiente para entender como funciona.

//Declarando as variáveis globais, isso significa q elas estão disponiveis em qualquer parte do código.
var nome;
var tel;
var email;
var tabela;
var btnAdiciona;
var btnListar;
var msg;

//Essa função será o ponto de partida do nosso app.
function init() {
	//Acessando nosso formulário atraves do DOM.

nome = document.getElementById("nome"); //Obtendo o elemento input pelo seu id="nome"
	tel = document.getElementById("tel");   //id="tel"
	email = document.getElementById("email"); //id="email"

tabela = document.getElementById("table");//Obtendo o elemento table pelo seu id="table"

//Com os botoes nao e diferente a maneira de acesso ao elemento eles tambem sao do tipo input
	btnAdiciona = document.getElementById('btnAdicionar');
	btnListar = document.getElementById('btnListar');

var armazenaContatos=new ArmazenaContatos();

//Definindo um evento onclick(). Esse sera disparado quando o usuario clicar no botao com o texto (Salvar )
	btnAdiciona.onclick = function() {

//definindo uma condicao para salvar so quando todos os campos estiver preenchidos: nome,telefone, email. Caso contrario aparecera a mensagem: 'Não há nada pra salvar'
       
		if (nome.value != "" && tel.value != "" && email.value != "")
		{
			//contato e uma instancia do objeto Contato()
			var contato = new Contato();

//Adicionando valores ao objeto Contato que vem do formulario
			contato.setNome(nome.value);
			contato.setTel(tel.value);
			contato.setEmail(email.value);

//Inserindo um contato na lista. Se deu pra perceber, o metodo recebe por parametros uma instancia do objeto do tipo Contato().
        
			armazenaContatos.inserir(contato);

//resetando os campos do formulário.
			nome.value = "";
			tel.value = "";
			email.value = "";

alert('Contato salvo com sucesso!');

}
		else
		{
			alert('Não há nada pra salvar');
		}

};

//Definindo um evento onclick(). Esse sera desparado quando o usuario clicar no botao com o text (Listar ).
	btnListar.onclick = function() {

//Definir uma condicao para listar quando houver contatos armazenados. Caso contrario aparecera uma mensagem informando que a lista esta vazia.
		if (armazenaContatos.listaTudo().length > 0)
		{
		    var montaTabela='';
			montaTabela += '<tr><td>Nome</td><td>Telefone</td><td>Email</td></tr>';
		    for (var i= 0; i < armazenaContatos.listaTudo().length; i++)
			{
			    var contato = armazenaContatos.listaTudo()[i];

var nome =contato.getNome();
				var telefone=contato.getTel();
				var email=contato.getEmail();

montaTabela += '<tr><td>' + nome + '</td> <td><a href="tel:' + telefone + '">' + telefone + '</a</td><td><a href="mailto:' + email + '">' + email + '</a></td></tr>';
			}

tabela.innerHTML = montaTabela;
		} 
		else
		{
			alert('Lista está vazia!');
		}

};

//Criando classe Contato, essa classe será nosso modelo
function Contato() {
	this.id;
	this.nome;
	this.tel;
	this.email;
}

Contato.prototype.setId = function(novoId) {
	this.id = novoId;
};

Contato.prototype.setNome = function(novoNome) {
	this.nome = novoNome;
};

Contato.prototype.setTel = function(novoTel) {
	this.tel = novoTel;
};

Contato.prototype.setEmail = function(novoEmail) {
	this.email = novoEmail;
} ;

Contato.prototype.getId = function() {
	this.id = novoId;
};

Contato.prototype.getNome = function() {
	return  this.nome;
};

Contato.prototype.getTel = function() {
	return this.tel;
};

Contato.prototype.getEmail = function() {
	return this.email;

};

//Criando uma classe para gerenciar armazenar os contatos em um Array, essa classe poderia ser usada para armazenar e recuperar e ate mesmo atualizar e apagar um ou todos os contatos, se estiversemos fazendo uso de banco de dados por exemplo.
function ArmazenaContatos() {
	this.contatos = [];
	this.cont = 0;
}

ArmazenaContatos.prototype.inserir = function(contato) {
	this.contatos[this.cont] = contato;
	this.cont++;
};

ArmazenaContatos.prototype.listaTudo = function() {

return this.contatos;
};

//inicializando nosso app
window.onload = init;

Código completo.

<!DOCTYPE html>
<html>
  <head>
	<title>Lista de Contatos</title>

</head>
  <body>

<h2>Lista de Contatos</h2>

<div id="form"  >

<tr>
			<td>
			  <label for="tel">Telefone</label>  
			</td>
		  </tr>

<tr>
			<td>
			  <label for="email">Email</label>
			</td>
		  </tr>

</tr>
		</table>

</form>

</div>

</table>
	</div>

//Declarando as variaveis
var nome;
var tel;
var email;
var tabela;
var btnAdiciona;
var btnListar;
var msg;

//Essa funcao sera o ponto de partida do nosso app.
function init() {
	//Acessando nosso formulário atraves do DOM.

nome = document.getElementById("nome"); //Obtendo o elemento <input> pelo seu id="nome"
	tel = document.getElementById("tel");   //id="tel"
	email = document.getElementById("email"); //id="email"

tabela = document.getElementById("table");//Obtendo o elemento table pelo seu id="table"

//Com os botoes nao e diferente a maneira de acesso ao elemento eles tambem sao do tipo <input>
	btnAdiciona = document.getElementById('btnAdicionar');
	btnListar = document.getElementById('btnListar');

var armazenaContatos=new ArmazenaContatos();

//Definindo um evento onclick(). Esse sera disparado quando o usuario clicar no botao com o texto (Salvar )
	btnAdiciona.onclick = function() {

//definindo uma condicao para salvar so quando todos os campos estiver preenchidos: nome,telefone, email. Caso contrario aparecera a mensagem: 'Não há nada pra salvar'
		if (nome.value != "" && tel.value != "" && email.value != "")
		{
			//contato e uma instancia do objeto Contato()
			var contato = new Contato();

//Adicionando valores ao objeto Contato que vem do formulario
			contato.setNome(nome.value);
			contato.setTel(tel.value);
			contato.setEmail(email.value);

//Inserindo um contato na lista. Se deu pra perceber, o metodo recebe por parametros uma instancia do objeto do tipo Contato().
			armazenaContatos.inserir(contato);