WallasFaria/JavascriptBasico.md

## JavascriptBasico.md

      
    Raw
  

              JavascriptBasico.md
            
          
    História

Criado pela Netscape em 1995 como uma extensão do HTML para o navegador Netscape Navigator 2.0,
o JavaScript teve como função principal a manipulação de documentos HTML e a validação de formulários.
Antes de ganhar seu nome tão famoso hoje em dia, o JavaScript foi chamado de Mocha.
Quando saiu pela primeira vez em uma versão beta foi chamado oficialmente de LiveScript e
finalmente quando foi liberado pela Sun Microsystems foi batizado pelo nome que hoje nós conhecemos.
Devido à similaridade de nomes, algumas pessoas confundem o JavaScript com o Java.
Embora ambos tenham a estrutura léxica da programação, elas não são a mesma linguagem.
Diferente do C, C# e do Java, o JavaScript é uma linguagem interpretada.
Isso significa que ele precisa de um "interpretador". No caso do JavaScript, o interpretador é o navegador.
Estrutura léxica

JavaScript pega emprestado a maior parte de sua sintaxe do Java, mas também é influenciado por Awk, Perl e Python.
Todo código em qualquer aplicação deve parecer como se tivesse sido escrito por uma única pessoa, independentemente de quantas pessoas tenham contribuído.


Javascript é Case-Sensitive, isso significa que letras maiúsculas e letra minúsculas fazem diferença na escrita do código javascript e devem ser escritos de forma consistente.


Palavras-chaves reservadas devem ser sempre digitadas em letras minúsculas: while, for, break


Capitalização na digitação do nome das variáveis importa:


var variavel
var Variavel
var VARIAVEL
var VARiavel
São quatro variáveis diferentes.
Convenções de nomenclatura

No Javascript é usado o padrão camelCase para nomear objetos, funções e instâncias.
// ruim
var this_is_my_object = {};
function this_is_my_function() {};

// bom
var thisIsMyObject = {};
function thisIsMyFunction() {};
Ponto e virgula

O Javascript não obriga o uso de ponto e virgula desde
que as declarações sejam separados por quebra de linha,
porém é uma boa prática manter a consistência no código.
Funciona:
a = 1
b = 2
a = 1; b = 2
Não Funciona:
a = 1 b = 2
Regras para Identificadores

O primeiro caractere de um identificador deve ser:
uma letra, um underline ou um sifrão.
Digitos não são permitidos como primeiro caractere:
var a;       // OK
var _b;      // OK
var a1;      // OK
var $name;   // OK
var 1a;      // ERRADO
Operadores

<style>
.table table {
  width: 100%;
}

.table table td:first-child {
  width: 30%;
}
</style>
Operadores de atribuição


Nome
Operador encurtado
Significado


Atribuição
x = y
x = y


Atribuição de adição
x += y
x = x + y


Atribuição de subtração
x -= y
x = x - y


Atribuição de multiplicação
x *= y
x = x * y


Atribuição de divisão
x /= y
x = x / y


Atribuição de resto
x %= y
x = x % y


Atribuição exponencial
x **= y
x = x ** y


Operadores de comparação


Operador
Exemplos


Igual (==)
3 == 3 // true
"3" == 3 // true
3 == 4 // false


Não igual (!=)
3 != 4 // true
3 != "3" // false


Estritamente igual (===)
3 === 3 // true
3 === "3" // false


Estritamente não igual (!==)
3 !== "3" // true
3 !== '3' // true


Maior que (>)
var2 > var1
"12" > 2


Menor que (<)
var1 < var2
"12" < "2"


Menor que ou igual (<=)
var1 <= var2
var2 <= 5


Comentários

A sintaxe dos comentários em JavaScript é semelhante
como em C++ e em muitas outras linguagens:
// comentário de uma linha

/* isto é um comentário longo de múltiplas linhas. */
Blocos:

Os blocos de código em javascript são definidos com chaves “{}”.
if (true) {

}

function nomeDaFuncao() {
  // instruções
}
Tipos de dados:

1             // Número inteiro
1.5           // Número float
"Texto"       // String de aspas duplas
'Texto'       // String de aspas simples
true          // booleano true
false         // booleano false
/casa/        // Expressão regular
null          // Nulo
[1, 2, 3]     // Array ou vetor
{x: 1, y: 2}  // Objeto
Funções Básicas

Uma função simples ou básica é um conjunto de instruções
para executar uma determinada tarefa.
Seu resultado pode ser variável de acordo com parâmetros.
Uma vez definidas, as funções podem ser reutilizadas
para evitar repetições no código.
function metade(num) {
  return num / 2;
}

metade(100); // 50
metade(50); // 25
As funções podem receber mais de um parametro e
executar tarefas de qualquer complexidade:
function porcentagem(porcento, de) {
  return ((porcento * de) / 100);
}

porcentagem(10, 150); // 10% de 150 = 15
porcentagem(33.5, 175); // 33.5% de 175 = 58.62
As funções possuem um escopo local onde as váriaveis
definidas serão delimitadas as chaves de abertura e fechamento:
var variavelGlobal = 'Dev';

function alterarNome() {
  var variavelLocal = 'Mode';

  variavelGlobal += variavelLocal;
  // Ao declarar uma variável sem usar a palavra reservada var, 
  // criamos de forma implicita uma variável global. 
  // Caso ela já exista, modificamos a variável do escopo global
}

console.log(variavelGlobal); // Dev

alterarNome();

console.log(variavelGlobal); // DevMode

console.log(variavelLocal); 
// unidentified >> Variável não foi definida no escopo global
Estruturas Condicionais

Estruturas condicionais funcionam como na maioria
das linguagens de programação, utilizamos para verificar
condições e definir quais ações devem acontecer ou não acontecer.
Exemplo de if-else:
var numero = 1;

if (numero == 1) {
	console.log("A variavel numero é igual a 1");
} else {
	console.log("A variavel numero NÃO é igual a 1");
}
Resultado: "A variavel numero é igual a 1"

var numero = 2;

if (numero == 1) {
	console.log("A variavel numero é igual a 1");
} else if (numero == 2) {
	console.log("A variavel numero é igual a 2");
} else {
	console.log("A variavel numero NÃO é igual a 1 ou 2");
}
Resultado: "A variavel numero é igual a 2"

IF ternário
var lojaAberta = true;

lojaStatus = (lojaAberta === true) ? "aberta" : "fechada";

console.log("A loja está " + lojaStatus + " agora.");
Resultado: "A loja está aberta agora."

Operadores Lógicos

&& (AND)
|| (OR)
function teste1(numero) {
	if (numero > 1 && numero <= 4) {
		return true;
	}
	return false;
}

teste1(1); // false
teste1(3); // true
teste1(4); // true
teste1(5); // false

function teste2(browser) {
	if (browser == "Firefox" || browser == "Chrome") {
		return true;
	}
	return false;
}

teste2("Firefox"); // true
teste2("Internet Explorer"); // false
teste2("Chrome"); // true
Estruturas de Repetição

Estrutura for:

for (condicaoInicial; condicaoFinal; executarAposIteracao) {

}
Exemplo:
for (i=0; i <= 10; i++) {
	console.log(i);
}
i é igual a 0 no início, enquanto i for menor que 10,
executa a instrução console.log(i) e ao fim de cada
iteração acrescenta 1 em i.
Estrutura while

var repeticoes = 0;
console.log("Iniciando. Espere contar até 10");

while (repeticoes <= 10) {
	console.log(repeticoes);
	repeticoes++;
}

console.log("Finalizado");
A estrutura while (enquanto) executa um conjunto
de enquanto a condição for atendida.
No caso de exemplo, enquanto as repetições forem
menor ou igual a dez, as instruções serão executadas.

Interrompendo a execução do bloco:

Abaixo temos um loop de 100 iterações e interromperemos
assim que uma das variáveis, x ou y, chegar a 100 usando a
palavra reservada break:
var x = 0,
    y = 0;

for(i=0; i < 100; i++) {
	x += 1;
	y += 10;

	if (y >= 100 || x >= 100) {
		console.log("FIM! Terminamos na iteração "+ i);
		break;
	}
}

Pulando uma iteração no bloco:

Abaixo temos um loop para contar até 10, vamos pular os
números ímpares usando uma condição e a palavra reservada continue:
for(i=1; i <= 10; i++) {
  if ((i % 2) === 1) {
    continue; // SE i for ÍMPAR, pule as instruções seguintes
	}
	console.log(i + " é par.");
}

Listar propriedades de um objeto:

var carro = {marca: 'Ford', modelo: 'Fusion', cor: 'Preto'}

console.log("Informações do carro:");
for (var prop in carro) {
	console.log(prop + ": "+ carro[prop]);
}

Manipulação de String

stringSgl = 'String de aspas simples';
stringDbl = "String de aspas duplas";

//Escapamento de caracteres especiais:

stringSgl = 'Quero um copo d'água.';
stringDbl = "Eu saí "voando".";

// Ambos vão gerar um erro de string não terminada 
// pois o navegador irá interpretar da seguinte forma:

// stringSgl = 'Quero um copo d'; água.';
// stringDbl = "Eu saí "; voando; " .";

A forma correta de declarar esssas string é usar o 
caractere \ para escapar os demais caracteres especiais:

stringSgl = 'Quero um copo d\'água.';
stringDbl = "Eu saí \"voando\".";

Concatenação de string:

var string1 = 'Isso é',
    string2 = 'um teste.';

stringCompleta = string1 + string2;
console.log(stringCompleta);
// Resultado: 'Isso é um teste.'
var numero1 = '1',
    numero2 = '1';

var conta = numero1 + numero2;
console.log(conta);
// Resultado: '11'
Converter número para string:

var numeroTeste = 123,
    stringTeste = numeroTeste.toString();
// Resultado: 123, '123'

console.log(numeroTeste, stringTeste);

Alguns métodos de string:


O método toLowerCase converte todos caracteres para caixa baixa

var stringTeste = 'CAPS LOCK!!!';
console.log(stringTeste.toLowerCase());
// Resultado: 'caps lock!!!'

O método toUpperCase converte todos caracteres para caixa cima

var stringTeste = 'Estou aprendendo javascript!';
console.log(stringTeste.toUpperCase());
// Resultado: 'ESTOU APRENDENDO JAVASCRIPT!'

O método split divide uma string em substrings delimitadas
por um separador especificado

var stringTeste = 'Oficina Javascript DevMode',
    palavras = stringTeste.split(' ');
console.log(palavras);
// Resultado: ['Oficina', 'Javascript', 'DevMode']

O método replace substitui uma substring por outra substring

var stringTeste = 'Oficina Javascript DevMode',
    stringNova = stringTeste.replace("Javascript", 'JS');
console.log(stringNova);
// Resultado: 'Oficina JS DevMode'

O método indexOf busca a primeira ocorrência de uma substring em string

var stringTeste = 'Oficina Javascript DevMode',
    stringPos = stringTeste.indexOf("Dev");
console.log(stringPos);
// Resultado: 19

O método search busca a primeira ocorrência de uma substring
em string, o método search aceita expressões regulares

var stringTeste = 'Oficina Javascript DevMode',
    stringNova = stringTeste.search(/dev/i, 'JS');
console.log(stringNova);
// Resultado: 19

O método repeat cria uma nova string copiando a
string no número de vezes especificado

var stringTeste = 'Oficina Javascript DevMode',
    stringNova = stringTeste.repeat(3);
console.log(stringNova);
// Resultado: Oficina Javascript DevModeOficina Javascript DevModeOficina Javascript DevMode

O método length retorna a quantidade de caracteres em uma string

var stringTeste = 'Oficina Javascript DevMode';
console.log(stringTeste.length);
// Resultado: 26
Método substring:

string.substring(inicio [, fim]) // POSIÇÃO FINAL É UM PARÂMETRO OPCIONAL

inicio: um número inteiro que define a posição a partir da qual o texto será selecionado.


fim: um número inteiro que define a posição final a ser selecionada. Esse parâmetro é opcional, se não for especificado, será extraído o resto da string. Se o valor deste parâmetro for menor que o "inicio", as posições serão invertidas.

Caso seja especificado um valor maior que a string, o parâmetro assumirá a posição equivalente ao tamanho da string (string.length)
O método suibstring extrai os caracteres de uma string entre os índices espcificados e retorna uma nova sub string.
Este método extrai os caracteres entre o "inicio" e "fim", mas não incluem o índice "fim" especificamente.
Estrutura da nossa string:


0
1
2
3
4
5
6

7
8
9
10
11
12
13
14
15
16

17
18
19
20
21
22
23


O
f
i
c
i
n
a

J
a
v
a
s
c
r
i
p
t

D
e
v
M
o
d
e


var exemplo = "Oficina Javascript DevMode",
    recorte = exemplo.substring(8); // inicio: 8, fim: não-especificado (string.length)

//Resultado: "Javascript DevMode"	--> Oficina <Javascript DevMode>
var exemplo = "Oficina Javascript DevMode",
    recorte = exemplo.substring(8, 0); // inicio: 8, fim: 0 >> inicio: 0, fim: 8

//Resultado: "Oficina "			--> <Oficina >Javascript DevMode
var exemplo = "Oficina Javascript DevMode",
    recorte = exemplo.substring(4, 6); // inicio: 8, fim: 0 >> inicio: 0, fim: 8

//Resultado: "ina"			--> Ofic<ina> Javascript DevMode
var exemplo = "Oficina Javascript DevMode",
    recorte = exemplo.substring(4, 6); // inicio: 8, fim: 0 >> inicio: 0, fim: 8

//Resultado: "ina"			--> Ofic<ina> Javascript DevMode
var exemplo = "Oficina Javascript DevMode",
    recorte = exemplo.substring(4, 6); // inicio: 8, fim: 0 >> inicio: 0, fim: 8

//Resultado: "ina"			--> Ofic<ina> Javascript DevMode
Manipulação de Array

Método push

var frutas = ["Banana", "Laranja", "Maçã"];
console.log(frutas); // ["Banana", "Laranja", "Maçã"]

frutas.push("Limão");
console.log(frutas); // ["Banana", "Laranja", "Maçã", "Limão"]
Método splice


O método splice adiciona/remove itens de um
array e retorna os items removidos


Usando para adicionar itens na posição 2 do array:

var fruits = ["Banana", "Laranja", "Maçã", "Manga"],
    removidos = fruits.splice(2, 0, "Limão", "Kiwi");

console.log(fruits); // ["Banana", "Laranja", "Limão", "Kiwi", "Maçã", "Manga"]

console.log(removidos); // []

Usando para remover 2 itens a partir da posição 1 e
adicionar o item "Kiwi" na posição 1

var fruits = ["Banana", "Laranja", "Maçã", "Manga"];
    removidos = fruits.splice(1, 2, "Kiwi");

console.log(fruits); // ["Banana", "Kiwi", "Manga"]
console.log(removidos); // ["Laranja", "Maçã"]
Método join

var fruits = ["Banana", "Laranja", "Maçã", "Manga"];
    string = fruits.join(" e ");
console.log(fruits); // "Banana e Laranja e Maçã e Manga
Método pop


Remove o último elemento de uma array e retorna o elemento

var fruits = ["Banana", "Laranja", "Maçã", "Manga"];
    ultimoItem = fruits.pop();

console.log(fruits); // ["Banana", "Laranja", "Maçã"]
console.log(ultimoItem); // "Manga"
Método shift


Remove o primeiro elemento de uma array e retorna o elemento

var fruits = ["Banana", "Laranja", "Maçã", "Manga"];
    primeiroItem = fruits.shift();

console.log(fruits); // ["Laranja", "Maçã", "Manga"]
console.log(primeiroItem); // "Banana"
Método reverse


Inverte ordem dos elementos na array

var fruits = ["Banana", "Laranja", "Maçã", "Manga"];
    fruits.reverse();

console.log(fruits); // "Manga", "Maçã", "Laranja", "Banana"
Método filter


O método filter() cria um novo array com todos os
elementos que passaram no teste implementado pela função fornecida.

function maiorQue(value) {
  return value > 10;
}

var numerosValidos = [7, 5, 11, 21, 14, 9, 2, 51].filter(maiorQue);

console.log(numerosValidos); // [11, 21, 14, 51]
Método map


O método map() invoca a função callback passada por
argumento para cada elemento do Array e devolve um
novo Array como resultado.

var numeros = [1, 4, 9],
    raizes = numeros.map(Math.sqrt);

console.log(numeros); // [1, 4, 9]
console.log(raizes); // [1, 2, 3]
Método length


O método length a quantidade de entradas de um array

var numeros = [1, 4, 9];
    qtd = numeros.length;

console.log(qtd); // 3
Tipo objeto


Um objeto é uma coleção de dados e/ou funcionalidades
relacionadas (que geralmente consistem em diversas
variáveis e funções — que são chamadas de propriedades
e métodos quando estão dentro de objetos).
Vamos trabalhar com um exemplo para entender como eles são.

var carro = {
  marca: 'Ford',
  modelo: 'Mustang',
  ano: '1974',
  ligado: 0,
  hodometro: 0,
  marchas: ['R', 'N', 1, 2, 3, 4],
  marcha: 'N',
  informacoes: function() {
    var kmString = this.quilometragem();
    console.log("Marca: "+ this.marca);
    console.log("Modelo: "+ this.modelo);
    console.log("Ano: "+ this.ano);
    console.log("Marchas: "+ this.marchas.join(', '));
    console.log(kmString+" rodados.");
  },
  ligar: function() {
    if (this.ligado == 1) {
      console.log("O carro já está ligado!");
      return false;
    }
    this.ligado = 1;
    console.log("Carro agora está ligado!");
    return true;
  },
  desligar: function() {
    if (this.ligado == 1) {
      console.log("O carro já está desligado!");
      return false;
    }
    this.ligado = 0;
    console.log("Carro está desligado!");
    return true;
  },
  acelerar: function() {
    if (this.ligado == 0) {
      console.log("O carro está desligado");
      return false;
    }
    else if (this.marcha == "N") {
      console.log("O carro está em neutro!");
      return false;
    }

    var km = (Math.floor(Math.random() * 10) + 2);
    console.log(km + " KMs percorrido(s)!");

    this.hodometro += km; // Registra km's percorridos
    return true;
  },
  trocarMarcha: function(m) {
    if (m === undefined) {
      m = 1;
    }

    switch (this.marcha) {
      case "N":
        this.marcha = (m == 1) ? 1 : "R";
        break;
      case "R":
        this.marcha = (m == 1) ? "N" : "R";
        break;
      case 1:
        this.marcha = (m == 1) ? 2 : "N";
        break;
      default:
        var proximaMarcha = (m == 1) ? (Number(this.marcha) + 1) : (Number(this.marcha) - 1);
        this.marcha = (proximaMarcha > 4 || proximaMarcha < 1) ? this.marcha : proximaMarcha;
        break;
    }

    console.log("Marcha atual: " + this.marcha + "");
    return this.marcha;
  },
  quilometragem: function() {
    return (this.hodometro > 1) ? this.hodometro+" KMs" : this.hodometro+" KM";
  }
}
Callback

Uma função callback é uma função passada a outra função
como argumento, que é então invocado dentro da
função externa para completar algum tipo de rotina ou ação.
Funções sincronas com callback

var alunos = [
  {
    nome: 'Betina do Milhao',
    nota: 100,
    aprovado: null
  },
  {
    nome: 'Lula Libre',
    nota: 13,
    aprovado: null
  },
  {
    nome: 'Dilma Mother',
    nota: 92,
    aprovado: null
  },
  {
    nome: 'Jair se Acostumando Naro',
    nota: 17,
    aprovado: null
  },
  {
    nome: 'Gilmar Livre&mente',
    nota: 40,
    aprovado: null
  },
  {
    nome: 'Joao Amoeba',
    nota: 90,
    aprovado: null
  },
  {
    nome: 'Paulo Posto Guedes',
    nota: 70,
    aprovado: null
  },
  {
    nome: 'Sérgio Moro Ourao',
    nota: 38,
    aprovado: null
  },
  {
    nome: 'Maria do Processo',
    nota: 91,
    aprovado: null
  },
  {
    nome: 'Ciro Serasa',
    nota: 30,
    aprovado: null
  },
  {
    nome: 'Danilo Gentil',
    nota: 71,
    aprovado: null
  },
  {
    nome: 'Fernando Radar',
    nota: 50,
    aprovado: null
  }
]

var alunosAprovados = []

for (var i = 0; i < alunos.length; i++) {
  if (alunos[i].nota >= 50) {
    alunosAprovados.push(alunos[i])
  }
}

function aprovado(aluno) {
  return aluno.nota >= 50
}

function reprovado(aluno) {
  return aluno.nota < 50
}

var alunosAprovados = filtrar(alunos, aprovado)
var alunosReprovados = filtrar(alunos, reprovado)
Funções assincronas com callback

function executarApoisDoisSegundos(callback) {
  setTimeout(function() {
    callback()
  }, 2000)
}

console.log('começou...')

executarApoisDoisSegundos(function() {
  console.log('O código executado')
})

console.log('Terminou')
Ajax

console.log('começou')

var url = 'https://api.github.com/users/wallasfaria'

var xhr = new XMLHttpRequest()

xhr.open('GET', url)

xhr.send(null)

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    console.log(JSON.parse(xhr.responseText))
  }
}

console.log('terminou')
Nome	Operador encurtado	Significado
Atribuição	x = y	x = y
Atribuição de adição	x += y	x = x + y
Atribuição de subtração	x -= y	x = x - y
Atribuição de multiplicação	x *= y	x = x * y
Atribuição de divisão	x /= y	x = x / y
Atribuição de resto	x %= y	x = x % y
Atribuição exponencial	x **= y	x = x ** y
Operador	Exemplos
Igual (==)	3 == 3 // true "3" == 3 // true 3 == 4 // false
Não igual (!=)	3 != 4 // true 3 != "3" // false
Estritamente igual (===)	3 === 3 // true 3 === "3" // false
Estritamente não igual (!==)	3 !== "3" // true 3 !== '3' // true
Maior que (>)	var2 > var1 "12" > 2
Menor que (<)	var1 < var2 "12" < "2"
Menor que ou igual (<=)	var1 <= var2 var2 <= 5