JavaScript o Básico

Nesse post vamos conhecer o básico de JavaScript de maneira superficial.

• 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
  • Código Completo do App

O que é uma variável?

Uma variável representa uma certa posição de 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.

Modificador	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á ignorados 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

Caractere	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);

Saída.

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

var frutas=[ 'Banana', 'Abacate', 'Jaca', 'Maracujá', 'Uva', 'Maçã', 'Cajú' ]; 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çã

   Cajú

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.

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 (){ //Esses são os atributos da classe this.nome =null; this.idade=0; this.corDoCabelo=null; } //Esse é um método 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());

Saida.

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