JavaScript o Básico

Nesse post vamos conhecer o básico de JavaScript de maneira superficial. No final vamos criar um simples aplicativo em JS.

• O que é uma variável?
  • Declarando uma variável
  • Inicializando uma variável
  • Declarando e Inicializando uma variável
• Tipo de dados suportados
• Comentários
• Caracteres especiais
• Expressões
• Operadores
  • Atribuição
  • Incremento e decremento.
  • Aritméticos
  • Relacionais
  • Lógicos
  • Concatenação de Strings.
• Controle de fluxo.
• Laços de repetição
• Array
• Função
• Classe
• Objeto
• Um simples aplicativo
  • Ferramentas necessária.
  • Adicionando o html mínimo
  • Criando o formulário do app
  • Adicionando a tabela de contatos
  • Código JavaScript

O que é uma variável?

Uma variável representa uma certa posição da memória que é usado para armazenar um determinado valor na memória principal do computador, smartphone, tablet etc. Então, damos um nome a ela para identificarmos tal posição da memória RAM. Quando a variável for declarada e ou inicializada. Ela pode ser usada no restante do código...

Declarando uma variável.

Para declarar uma variável utilizamos o modificador (var ou let). É recomendado usar o modificador ( let em vez de var). Pois nesse poste vamos usar os dois modificadores tudo junto e misturado.

var nome; let sobrenome;

Inicializando uma variável.

nome = 'Maria';

Declarando e Inicializando uma variável.

var nome = 'Carol'; let idade = 15;

Tipo de dados suportados.

JavaScript suporta alguns tipos de dados, tais como: Número inteiro e de ponto flutuante tanto positivo quanto negativo, Strings, Boolean, Array e Objeto. Caso não se lembra que javascript é uma linguagem de script de tipagem fraca dinâmica, isso significa que uma variável, uma vez pode armazenar um valor do tipo inteiro, outra vez do tipo float, String e assim por diante, sem precisar converter de forma explícita de um tipo para outro.

Exemplos:

Atribuindo um valor positivo.

let X = 34;

Atribuindo um valor numérico negativo, logo depois um valor inteiro.

var Y = -12.3; Y= 2;

Atribuindo um valor numérico de ponto flutuante.

var Z = 2.45;

Atribuindo valor do tipo booleano.

let estaLigado = false; estaLigado = true;

Atribuindo um valor do tipo String.

let endereco = 'Tv. Sobral Santos - n° 0000';

Atribuindo um valor do tipo Array.

var frutas=[ 'Banana', 'Abacate', 'Jaca', 'Maracuja', 'Uva', 'Maçã', 'Caju' ];

Atribuindo um valor do tipo Objeto.

let data = new Date();

Comentários.

Comentários geralmente é usado como um lembrete mais ou menos explica para que serve uma função ou uma variável por exemplo. Eu considero comentários muito importantes para explicar o código para outros programadores e até para mim mesmo, com o passar do tempo aquele código que você escreveu nem você se lembra mais de como funciona. Todo comentário é ignorado pelo interpretador do javascript. Há duas maneiras de adicionar comentários no código.

Operador	Descrição
//	Ao adicionar duas barras, você está definindo um comentário de uma linha. Tudo que estiver depois de // até o final da linha, será ignorado pelo interpretador do javascript.
/*...*/	Ao adicionar o barra asterisco asterisco barra, você está definindo um comentário de mais de uma linha. Tudo que estiver entre eles serão ignorados pelo interpretador do javascript.

Exemplo:

//Isso é um comentário de uma linha. alert ('Ola, Mundo!'); /*Isso é um comentário de mais de uma linha. Pode haver quantas linhas for necessário*/ var resultado='Reprovado';

Caracteres especiais

Caracteres	Descrição
\n	Adiciona uma quebra de linha
\t	Adiciona uma tabulação
\'	Adiciona um apóstrofo
\"	Adiciona uma aspas.
\\	Adiciona barra invertida
\r	Adiciona um retorno
\f	Adiciona caractere de barra

Expressões

x = 5 * 5; y = (( 6 - 2 ) + ( 3 * 5 )) / 5; //saida document.write('X vale : '+ x +'<br>'); document.write('Y vale : '+ y );

Saída:

X vale : 25

Y vale : 3.8

A variável ( x ) é atribuída com o valor que veio do resultado da multiplicação, ou seja ( x ) vale 25. Já a variável (y) armazena o valor 3.8.

Operadores

Atribuição:

Operador	Descrição
=	Atribuição simples
+=	Atribuição com adição
-=	Atribuição com subtração
*=	Atribuição com multiplicação
/=	Atribuição com divisão
%=	Atribuição com módulo

Exemplo de uso dos operadores:

y = 2; y += 2; y -= 2; y *= 2; y /= 2; y %= 2;

Veja uma outra forma de definir valores, que tem o mesmo resultado. Na minha opinião, acho melhor usar a forma simplificada como no exemplo acima.

y = y + 2; y = y - 2; y = y * 2; y = y / 2; y = y % 2;

Incremento e decremento.

Operador	Descrição
++	Esse operador incrementa mais 1 sobre valor de uma variável.
--	Esse operador decrementa menos 1. Ou seja é o contrário do operador acima.

Exemplo de uso desses operadores.

var x = 1; x++; document.write( x+ "<br>" ); // agora vale 2 ++x; document.write( x+'<br>'); // agora vale 3; x--; document.write( x+'<br>' );//agora vale 2 --x; document.write( x+'<br>'); //agora vale 1;

Aritméticos

Operador	Descrição
+	Adição
-	Subtração
*	Multiplicação
/	Divisão
%	Módulo : retorna o resto da divisão

Relacionais

Esses operadores compara o valor das variáveis por exemplo, e retorna um valor boleano 'TRUE ou FALSE'. Verdadeiro ou falso.

Operador	Descrição
>	Maior que
<	Menor que
>=	Maior ou igual
<=	Menor ou igual
=	Atribuição
==	Igualdade
===	Igual e mesmo tipo
!=	Diferente

Lógicos.

Operador	Descrição
&&	E
||	OU
!	NÃO

O operador "&&" retorna "TRUE" apenas quando todas as expressões for verdadeiras. O operador "||" retorna TRUE quando pelo menos uma das expressões for verdadeira. O operador "!" retorna "TRUE" quando a expressão for falsa, e retorna "FALSE'" Quando a expressão for verdadeira.

 

Concatenação de Strings

Operador	Descrição
+	Esse é usado para juntar palavras ou texto por exemplo.

Exemplo:

let txt1= 'Eu sou'; let txt2= ' Brasileiro'; var frase= txt1 + txt2; document.write(frase);

Agora a variável (frase) tem o valor concatenado da variável (txt1) e (txt2) a frase completa: (Eu sou Brasileiro).

Controle de fluxo

Os comandos são "if, else, else if, switch". Esses comandos é usado quando precisamos de um desvio alternativo.

Veja um exemplo de código usando if:

var media = 8; var situacao = 'Reprovado'; if( media >= 5 ) { situacao = 'Aprovado'; } document.write(situacao);

Veja um exemplo de código usando if, else:

var media = 8; var situacao; if( media >= 5 ) { situacao = 'Aprovado'; } else { situacao= 'Reprovado'; } document.write(situacao);

O comando else é opcional.

Um Exemplo de uso dos comandos if else if, else:

var idade = 25; var resultado; if( idade <= 12 ) { resultado = 'Criança'; } else if( idade <= 17 ) { resultado = 'Adolescente'; } else { resultado = 'Atulto'; } document.write(resultado);

Como sempre o comando else aqui também é opcional.

Saída:

Adulto

Se quiser ver uma saída diferente, é só mudar o valor da variável (idade), com valor por exemplo: 5, 14.

Exemplo de uso do comando switch:

var acao = 3; var direcao; switch ( acao ) { case 1: direcao = 'esquerda'; break; case 2: direcao = 'direita'; break; default: direcao = 'frente'; } document.write(direcao);

Saída:

frente

Se quiser ver uma saída diferente, é só mudar o valor da variável (acao), com valor por exemplo: 1 ou 2.

Laços de repetição

Os comandos de repetição são muito importantes em qualquer linguagem de programação, em javascript não seria diferente, veja os laços de repetição: do while, while, for..

Veja um exemplo básico do comando ( do...while).

var cont=0; var total=0; do{ total+=1; cont++; } while ( cont < 5 ); document.write('Variavel ( total ) agora vale: '+total);

Saída:

Variável ( total ) agora vale: 5.

Esse trecho de código ficará repetindo enquanto a variável (cont) é menor que 5. No final da execução a variável ( total ) terá o valor 5 atribuído a ela, o código dentro do (do... while), sempre será executado primeiro, e só depois é verificado se a variável (cont) é menor que 5. Se caso ainda for menor continua até que a condição seja falsa. Ou seja, quando a variável (cont) não é menor que 5.

Veja um exemplo básico do comando (while);

var cont=0; var total=0; while ( cont < 5 ) { total+=1; cont++; } document.write(total);

Saída:

5

Já no comando (while), primeiro testa se (cont) é menor que 5, se é verdade, então pode executar o trecho de código que está dentro do abre e fecha chaves ( {...} ).

Veja um exemplo básico do comando (for);

var total=0; for(var i = 0; i < 5; i++) { total+=1; document.writeln('<br>'+total); }

Saída:

1
2
3
4
5

Ao ver a saída, percebemos que o laço se repete 5 vezes.

Array

Array e um tipo de dados sofisticado que JS possui. Array é útil quando queremos armazenar uma certa quantidade de valores em uma única variável.

Declarando e Inicializando uma variável do tipo Array. Nesse caso aqui a variável (frutas) agora é uma instância do objeto Array.

var frutas = new Array();

Ou podemos declarar nosso Array também dessa maneira.

var frutas = [];

Podemos adicionar um item de cada vez, através da chave . O valor do array sempre está associado ao índice chave que está entre colchetes [ ], e sempre começa a partir do zero.

frutas[0] = 'Manga'; frutas[1] = 'Abacaxi';

Quando eu quiser recuperar algum valor do array (frutas) devo usar a seguinte sintaxe.

Exemplo:

var fruta = frutas[0]; alert (fruta);

Saída:

Manga

Outra maneira de declarar e inicializar um Array, quero definir uma lista de frutas.

var frutas=[ 'Banana', 'Abacate', 'Jaca', 'Maracuja', 'Uva', 'Maçã', 'Caju' ];

Outra maneira de adicionar um valor no Array frutas seria usando um método do próprio Array, o método ( push() ).

Exemplo:

frutas.push( 'Morango' ); frutas.push( 'Figo' );

O método push() do Array, ele vai adicionar um item no final da lista. Se o Array tem um método que adiciona um novo valor no final da lista, então ele também tem um método para retirar um item do final da lista, e retorna o item removido.

frutas.pop();

Adicionar valores em um Array com auxílio de um laço de repetição do tipo (for) é bem mais prático do que adicionar manualmente um por um. Ainda mais se temos que armazenar uma quantidade enorme de valores, pois seria muito cansativo e tedioso, não é mesmo?

var numeros = []; for ( var i = 0; i < 10; i++){ numeros[i] = i; }

Usando o método ( push() ).

for ( var i = 0; i < 10; i++){ numeros.push(i); } alert (numeros);

Percorrendo um Array de frutas com auxílio do comando ( while).

var frutas=[ 'Banana', 'Abacate', 'Jaca', 'Maracujá', 'Uva', 'Maçã', 'Caju' ]; var i=0; var size=frutas.length; while (i < size) { document.write('<p>'+frutas[i]+'</p>'); i++; }

Saída:

Banana

Abacate

Jaca

Maracujá

Uva

Maçã

Caju

Também podemos usar uma função do próprio Array para percorrer ele mesmo a fim de obter todos os valores armazenados nele.

Exemplo:

frutas.forEach(function(fruta) { alert (fruta); });

Outro exemplo com sintaxe um pouco diferente, mas que tem o mesmo resultado.

frutas.forEach( (fruta) => { alert (fruta); });

Na minha opinião essa função é muito mais prática do que usar um laço de repetição qualquer.

Função

Uma função é bastante útil quando você quer organizar o código do programa dentro de funções separando isso dá daquilo. Imagina que você quer criar uma calculadora simples. Então você pensa em criar uma função para cada operação. Por exemplo: Adição, Subtração etc..

Veja os exemplos.

var resultado; function adicao() { resultado = 4 + 4; } //Outro exemplo. function subtracao() { resultado = 6 - 4; } //Invocando as funções. adicao(); alert (resultado); subtracao(); alert (resultado);

Parâmetros da função

Podemos também passar valores por parâmetros da função. O limite de parâmetros quem define é o programador.

Exemplo:

function adicao (num) { resultado = 4 + num; } function subtracao (num1,num2) { resultado = num1 - num2; } adicao ( 10 ); alert (resultado); subtracao ( 11, 5 ); alert (resultado);

Função que retorna valores

Para definir uma função que retorna algum valor, basta inserir o comando (return) geralmente no final da função. Criando função que retorna algum valor.

Exemplo:

var resultado; function adicao () { return ( 4 + 4 ); }

Atribuindo o valor de retorno da função a variável.

resultado = adicao(); alert (resultado);

Você pode fazer a mesma coisa com funções que recebe valores por parâmetros também.

Função variável

var calcular = function(){ } calcular();

Classe

Uma classe e formada por atributos e métodos. Um atributo nada mais é do que uma variável, o método de uma classe nada mais é do que uma função que pode ser usada para definir uma ação comportamento, modificar valores dos atributos por exemplo. Para criar uma classe basta criar uma função ou definindo com o modificador (class).

Exemplo de uma fução como classe:

function Pessoa () { //Esses são os atributos da classe this.nome =null; this.idade=0; this.corDoCabelo=null; } /*Essa é uma função que é um método da classe que representa uma ação um comportamento.*/ Pessoa.prototype.fala=function (){ return 'Ola, mundo!'; };

Exemplo de uma classe fazendo uso do modificador (class).

class Pessoa{ constructor(nome,idade,cabelo) { this.nome =nome; this.idade=idade; this.corDoCabelo=cabelo; } fala() { return 'Ola, mundo!'; } }

Objeto

Um objeto também é um tipo de dados, como vimos anteriormente. Javascript tem objetos nativo que faz parte da própria linguagem como por exemplo: Array, Date, Math, JSON, RegExp e vários outros. O programador pode criar seus próprios objetos. Para criar um objeto devemos criar uma classe como uma função (function) ou utilizar o modificador (class), e depois utilizar o modificador (new). Podemos criar um objeto, ou melhor uma instância do objeto (Pessoa).

Exemplo de um objeto (Pessoa).

//Criando uma instância do objeto Pessoa var alguem = new Pessoa (); //Armazenando um valor nos atributos do objeto. alguem.nome = 'Jubileu'; alguem.idade = 25; alguem.corDoCabelo = 'Loiro'; //Recuperando os valores dos atributos e método. alert ( 'Nome: '+ alguem.nome); alert ( 'idade: '+ alguem.idade); alert('Cabelo: '+ alguem.corDoCabelo); alert ('Diz : '+alguem.fala() );

Saída:

Nome: Jubileu
Idade: 25
Cabelo: Loiro
Diz: Ola, mundo!

Objeto Literal

Podemos criar um objeto de outro jeito, veja como criar um objeto literal, com uma sintaxe um pouco diferente, nesse modo de criar um objeto, não precisamos usar o modificador ( new ).

Exemplo:

var Pessoa = {}; Pessoa.nome = 'Jubileu'; Pessoa.idade = 25; Pessoa.corDoCabelo = 'Loiro'; Pessoa.fala = function () { return 'Olá, mundo'; }; document.writeln('Nome: ' + Pessoa.nome + '<br>'); document.writeln('idade: ' + Pessoa.idade + '<br>'); document.writeln('Cabelo: ' + Pessoa.corDoCabelo + '<br>'); document.write('Diz : ' + Pessoa.fala());

Saída:

Nome: Jubileu
Idade: 25
Cabelo: Loiro
Diz: Olá, mundo!

Podemos também definir atributos é métodos dentro do { }. Veja um exemplo.

var Pessoa = { sobrenome : 'Silva' , genero :'Masculino', andando:false, estaAndando:function (){ return Pessoa.andando; } };

Recuperando os valores dos atributos e método.

alert ('Sobrenome: '+ Pessoa.sobrenome); alert ('Genero: '+ Pessoa.genero); alert ('Andando: '+ Pessoa.estaAndando() );

Saida:

Sobrenome: Silva
Gênero: Masculino
Andando: false

Vale lembrar que, o que foi visto até aqui não abrange todo JavaScript. Há muito mais sobre essa linguagem que devemos conhecer.

Um simples aplicativo.

Para potencializar o que foi estudado até agora. Vamos criar um simples aplicativo em JavaScript.

O aplicativo será uma Lista 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.
• Distro do 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 ou diretório

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

<!DOCTYPE html> <html> <head> <title>Lista de Contatos</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width; initial-scale=1"> </head> <body> <!--Define um titulo do nosso app--> <h2>Lista de Contatos</h2> </body> </html>

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>.

<!--Definindo uma seção para nosso formulário--> <div id="form" > <!--Definindo nosso formulario--> <form id="form1" > <!--Definindo rotulos, campos de entrada de textos e botões dentro de uma tabela--> <table id="f-table"> <tr> <td> <label for="nome">Nome</label> </td> </tr> <tr> <td> <input name="nome" id="nome" type="text" > </td> </tr> <tr> <td> <label for="tel">Telefone</label> </td> </tr> <tr> <td> <input name="tel" id="tel" type="tel" > </td> </tr> <tr> <td> <label for="email">Email</label> </td> </tr> <tr> <td> <input name="email" id="email" type="email" > </td> </tr> <tr> <td> <br> <input id="btnAdicionar" name="btn" type="button" value="Salvar"> <input id="btnListar" name="btn" type="button" value="Listar"> </td> </tr> </table> </form><!-- Fim do formulario--> </div><!-- div do form-->

Adicionando a tabela de contatos

<!--Define uma seção para tabela dos contatos--> <div id="tabela-contatos"> <table id="table"> </table> </div>

Veja imagem da interface do app lista de contatos

O código html define apenas a parte visual como você 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 em ação.

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 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); //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> <meta charset="utf-8"> <meta name="viewport" content="width=device-width; initial-scale=1"> <style> body{ margin:0; padding:0; border:0; } h2{ margin-top:0; margin-bottom:35px; padding:8px; background:rgb(65,148,248); color:#FFF; } div{ margin:30px 8px; } </style> </head> <body> <!--Define um titulo do nosso app--> <h2>Lista de Contatos</h2> <!--Definindo uma sessão para nosso formulario--> <div id="form" > <!--Definindo nosso formulario--> <form id="form1" > <!--Organizando texto, campo de textos e botoes dentro de uma tabela--> <table id="f-table"> <tr> <td> <label for="nome">Nome</label> </td> </tr> <tr> <td> <input name="nome" id="nome" type="text" > </td> </tr> <tr> <td> <label for="tel">Telefone</label> </td> </tr> <tr> <td> <input name="tel" id="tel" type="tel" > </td> </tr> <tr> <td> <label for="email">Email</label> </td> </tr> <tr> <td> <input name="email" id="email" type="email" > </td> </tr> <tr> <td> <br> <input id="btnAdicionar" name="btn" type="button" value="Salvar"> <input id="btnListar" name="btn" type="button" value="Listar"> </td> </tr> </table> </form><!-- Fim do formulario--> </div><!-- div do form--> <!--Define uma sessão para tabela dos contatos--> <div id="tabela-contatos"> <table id="table"> </table> </div> <script> /*Vocé pode usar todo ou parte ou compartilhar esse código livremente, desde que esse comentário permaneça no código. Em seus projetos, sites, blogs, fóruns ou qualquer outro. Visite o blog https://xmegacode.blogspot.com */ //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); //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; </script> </body> </html>

Veja as imagens da interface do app lista de contatos