estudos-javascript.md

Javascript

Anotações de estudos de Javascript

Arrays

Declaração de Arrays

 var arr = [1, "string", boolean];
 var = new Array();

Métodos importantes.

O método shift() remove o primeiro elemento de um array e retorna esse elemento. Este método muda o tamanho do array.

Boolean

Valores: True e False

Declarações condicionais

IF

Executa bloco de código caso a condição seja true

Declaração:

  if (myCondition) {
     return "It was true";
  }

Operadores de comparação:

Sempre retornam true ou false.

Comparações entre string e number:

Operador de igualdade ==

1 == '1'   // true

Na comparação acima está acontencendo uma coerção de tipo.

Operador de iguadade estrita/muito igual ===

Já na igualdade estrita ocorre a comparação de tipos.

3 === 3   // true
3 === '3' // false

Operador de diferente/não igual !=

Tabem realiza a coerção de tipos.

1 != 2      // true
1 != "1"    // false

Operador de estritamente diferente/muito não igual !==

Realiza a comparação de tipos

3 !== 3   // false
3 !== '3' // true

Operador de maior que >

Realiza coerção de tipos.

Compara se o valor da esquerda é maior que o da direita.

 5 > 3   // true
 7 > '3' // true
 2 > 3   // false

Operador de maior ou igual que >=

Realiza coerção de tipos.

Compara se o valor da esquerda é maior ou igual que o da direita.

 6  >=  6  // true
 7  >= '3' // true
 2  >=  3  // false

Operador de menor que <

Realiza coerção de tipos.

Compara se o valor da esquerda é menor que o da direita.

  2 < 5  // true
'3' < 7  // true
  5 < 5  // false

Operador de meno ou igual que <=

Realiza coerção de tipos.

Compara se o valor da esquerda é menor ou igual que o da direita.

'7' <= 7  // true
  5 <= 5  // true
  3 <= 2  // false

Operador lógico E / &&

Retorna TRUE se o resultado das operações forem TRUE

Operador lógico OU / ||

Retorna TRUE se o resultado de uma ou de outra opreação for TRUE

ELSE

Inclui mais um bloco de execução caso o retorno seja FALSE

Declaração:

if (num > 10) {
  return "Bigger than 10";
} else {
  return "10 or Less";
}

ELSE

Inclui mais um bloco de execução para um retorno TRUE dando mais uma opção.

Declaração:

if (num > 15) {
  return "Maior que 15";
} else if (num < 5) {
  return "Menor que 5";
} else {
  return "Entre 5 e 15";
}

OBJETOS

Similar aos ARRAYS porem o acesso aos dados é feito por meio das PROPRIEDADES definidas.

Declaração:

var gato = {
  "nome": "Bola de Neve",
  "patas": 4,
  "rabos": 1,
  "inimigos": ["Água", "Cachorros"]
};

Úteis para guardar dados de uma forma bem estruturada.

O acesso as PROPIEDADES podem ser feito utlizando . ou [].

Usando o exemplo acima:

console.log(gato.nome); // "Bola de Neve"
console.log(gato["patas"]; // 4

A utilização de [] nos ajuda a acessar as PROPIEDADES por variáveis como no exemplo abaixo.

var raca = "nomeRaca";

var gato = {
  "nome": "Bola de Neve",
  nomeRaca: "Angora",
  "patas": 4,
  "rabos": 1,
  "inimigos": ["Água", "Cachorros"]
};

console.log(gato[raca]); // "Angora"

Notar que não foi utilizado "" pois se trata de acesso ao valor da variável não do nome.

Atualizações de propriedades

Atualizar uma propriedade pode ser feito utilizando o = para alterar o seu valor.

var gato = {
"nome": "Bola de Neve",
"raca": "Angora"
}

gato.nome = "Bola de Pelo";
gato["raca"] = "Siames";

A atribuição de um novo valor pode ser feita utilizando . ou [].

Adcionar novas propriedades a objetos existentes

Realizando a atribuição de uma propriedade não existente vai cria-la dentro do objeto

gato.cor = "Branco";
gato["tamanho"] = "grande";

Deletar propriedades

Utilizamo o operador delete para remover uma propriedade

delete gato.cor;

Lembrando que o operador pode ser utilizando o . ou [].

Utilizações para Objetos

Os objetos podem ser pensados como um armazenamento de chave / valor, como um dicionário. Se você tiver dados tabulares, você pode usar um objeto para "pesquisar" os valores em vez de um switch ou uma cadeia de if/else. Isso é muito útil quando você sabe que seus dados de entrada estão limitados em um intervalo conhecido.

function phoneticLookup(val) {
  var result = "";

  var lookup = {
    "alpha": "Adams",
    "bravo": "Boston",
    "charlie": "Chicago",
    "delta": "Denver",
    "echo": "Easy",
    "foxtrot": "Frank"
  };

  result = lookup[val];
  
  return result;
}

phoneticLookup("charlie"); // "Chicago"
phoneticLookup("echo"); // "Easy"

Checar propriedades em Objetos

Caso tenha a necessidade de verificar se uma propriedade existe em um Objeto podemos verificar com .hasOwnProperty(nomedapropriedade).

Isso vai retornar true ou false

var myObj = {
  top: "hat",
  bottom: "pants"
};
myObj.hasOwnProperty("top");    // true
myObj.hasOwnProperty("middle"); // false

Manipulação de Objetos Complexos / JSON

Em alguns momentos temos a necessidade de armazenar dados de forma estruturada. Objetos em javascript é uma das opções. Nesse objetos podemos armazenar combinações de STRINGS, NUMBERS, BOOLEANS ARRAYS, FUNCTIONS e OBJECTS.

var ourMusic = [
  {
    "artist": "Daft Punk",
    "title": "Homework",
    "release_year": 1997,
    "formats": [ 
      "CD", 
      "Cassette", 
      "LP" ],
    "gold": true
  }
];

Nesta situação temos o JSON que pode ser utilizado para armazenamento e troca de dados.

{
  "artist": "Daft Punk",
  "title": "Homework",
  "release_year": 1997,
  "formats": [ 
    "CD",
    "Cassette",
    "LP"
  ],
  "gold": true
}

Acessando Objetos aninhados

Neste exemplo:

var myStorage = {
  "car": {
    "inside": {
      "glove box": "maps",
      "passenger seat": "crumbs"
     },
    "outside": {
      "trunk": "jack"
    }
  }
};

Podemos acessar objetos declarados como propriedades dentro de outros objetos. Mas a peculiariedade seria acessar a propriedade "glove box": "maps" onde notamos que tem um espaço no nome declarado para a propriedade.

Para acesso teriamos que declarar myStorage.car.inside["glove box"] o uso dos [] nos permite acessar essa propriedade.

FOR

Forma de como executar um bloco de código multiplas vezes.

Declaração:

for ([inicialização]; [condicional]; [expressão final])

Inicialização: Executado somente uma vez ao inicilizar o Loop. Utilizado para definir a variável de inicialização.

Condicional: Avaliada todas vez que o loop inicia e continua sendo avaliada enquanto seu retorno é true quanto a condicional retorna false o loop é finalizado.

Expressão final:  É executado ao final de cada loop. Utilizado para incrementar o decrementar a variável de inicialização que é checada na condicional.

Iterando com For Loops

No exemplo abaixo vamos executar a iteração do loop para contar de 0 a 4.

Vamos inicializar com a variável i = 0 e iterar enquanto a condicional for i < 5 retornar true. E a cara iteração do loop vamos incrementar i++

for (var i = 0; i < 5; i++) {
  console.log(i);
}
//Resultado
// 0
// 1
// 2
// 3
// 4

Iterando em numeros pares

Fazendo uma simples modificação na expressão final do FOR podemos fazer com que a iteração ocorra contando na quantidade de numeros desejada

for (var i = 0; i < 10; i += 2) {
  console.log(i);
}
//Resultado
// 0
// 2
// 4
// 6
// 8

A mudança da expressão final para i += 2 vai fazer com que a contagem exibida seja dos numeros pares.

Contagem decrescente

Podemos definir a iteraço do Loop para que realize um constagem decrescente. Para isso precisaremos modificar o INICIALIZADOR, CONDICIONAL e EXPRESSAO FINAL.

No exemplo usaremos  ì = 10 para o INICIALLIZADOR, i > 0 para a CONDICIONAL e vamos decrementar a variável i -= 2 na EXPRESSÃO FINAL.

for (var i=10; i > 0; i-=2) {
  console.log(i);
}
//Resultado
// 10
// 8
// 6
// 4
// 2

Iterações sobre Arrays

Muito comum realizarmos iterações sobre arrays para manipularmos seu conteudo.

Uma das formas que podemos fazer e cada iteração do loop seja realizado conforme o tamanho array.length do array e assim pedirmos para exibir cada elemento baseando em seu indice.

var arr = [10,9,8,7,6];
for (var i=0; i < arr.length; i++) {
   console.log(arr[i]);
}
//Resultado
// 10
// 9
// 8
// 7
// 6

FOR Loops Aninhados

Utilizado para percorrer indices de Arrays multidimensionais var arr= [[1,2], [3,4]];

var arr = [
  [1,2], [3,4], [5,6]
];
for (var i=0; i < arr.length; i++) {
  for (var j=0; j < arr[i].length; j++) {
    console.log(arr[i][j]);
  }
}

//Resultado
// 1 arr[0][0]
// 2 arr[0][1]
// 3 arr[1][0]
// 4 arr[1][1]
// 5 arr[2][0]
// 6 arr[2][1]

No exemplo acima temos o resultado mostrando como os Loops aninhados vão se comportar.

WHILE

Neste tipo de loop a iteração irá ocorrer enquanto o retorno da condicional expecificada no Loop for true

Declaração

var ourArray = [];
var i = 0;
while(i < 5) {
  ourArray.push(i);
  i++;
}

MATH

random()

Declaração

Math.random();

Gera um numero aleatório entre 0 e 1

floor()

Arredonda o numero para baixo removendo a parte decimal.

console.log(Math.floor(Math.random() * 10));
//Resultado
//Numero aleatório entre 0 e 9

Gerar um numero aleatório dentro de um Range

Usando o exemplo abaixo podemos gerar um numero aleatório dentro de um range específico.

 var myMax = 1;
 var myMin = 10;
 console.log(Math.floor(Math.random() * (myMax - myMin + 1)) + myMin);
 //Resultado
 // Entre 1 e 10
 // Vai gerar um numero aleatorio de 2 a 9

EXPRESSÃO REGULAR

A utilização das expressoções regulares nos auxilia a encontrar padrões dentro de strings

Declaração

var regExp = /pradrao a procurar/;

\d retorno digitos de 0 a 9

Podemos validar utilizando a expressão regular de algumas formar

var testString = "There are 3 cats but 4 dogs.";

var expression = /\d+/g;  // Change this line

var digitCount = testString.match(expression).length; // 2

var testExpression = expression.test(testString) // True

Com match() na string de test vamos gerar um array com o resultado encontrado pela expressão regular Utilizando o test() na expressão regular passando com parametro a string que vamos verificar ele retorno True ou False

ORIENTAÇÃO A OBJETOS

Variáves declaradas com Objetos

var meuCarro = {
  "rodas": 4,
  "portas": 2
};

Objetos construidos com Functions

var Carro = function () {
  this.rodas = 4;
  this.portas = 2;
}

O nome de variáveis de constructor Functions começa com letras maiúsculas.

O this dentro do constructor vai se referenciar ao novo Objeto que será criado.

Instanciando Objetos com constructor Functions

O uso do constructor deve ser feito usando a keyword new

var meuCarro = new Carro();

Agora meuCarro é um novo Objeto instaciado do constructor Carro

A utilização do keyword new identifica ao javascript para criar um novo objeto passando as referencias do this dentro do constructor para o novo objeto.

Este novo objeto meuCarro pode ser manipulado com um objeto qualquer

meuCarro.marca = "Fiat";

Suas porpriedade pode ser examinadas ou criadas normalmente.

Criando objetos exclusivo passando parametros para o constructor

Adcionar parametros a constructor function vai nos auxiliar a criar novos objetos com valor exclusivos para suas propriedades.

var Carro = function (rodas, portas, marca) {
  this.rodas = rodas;
  this.portas = portas;
  this.marca = marca;
};

Agora podemos criar nosso carro de forma exclusiva

var meuCarro = new Carro (4, 3, Ford);
//Resultado
//Carro {rodas: 4, portas: 3, marca: "Ford"}