Esta é a 10ª semana da turma online: Todas em Tech on17 - Front-end, nesta aula do dia 29/05/2022 teremos os seguintes conteúdos:

• Revisão de JavaScript;
  • Condicionais;
  • Loops;
  • Callbacks;
  • Arrays;
  • Métodos de Array;
  • Objetos;
  • Objeto Date e seus métodos;
  • DOM;

Lilit Bandeira, sou uma travesti paraibana residente em São Paulo, trabalho como Software Engineer no Nubank, ex-aluna e professora {reprograma} e professora também no minas programam;

• E-mail: [email protected]
• LinkedIn
• GitHub

• Manter atenção nas explicações e codar nos momentos definidos;
• Enviar dúvidas no chat para as monitoras;
• Levantar a mão sempre que desejar falar, o que pode ser feito a qualquer momento;
• Manter microfones desligados sempre que alguém estiver falando;
• Manter as câmeras ligadas o máximo de tempo possível;

Entrada, processamento e saída de dados;

• Entrada de dados;
• Escolha da operação desejada;
• Exibição dos dados ou do status da solicitação;

• Programação sequencial (uma tarefa após a outra);
• Programação condicional (uma verificação a partir do conceito de verdadeiro e falso que determina o que ocorre a seguir);
• Programação de Repetição (instruções que definem um padrão de repetição finito);

| A lógica é sobre organizar pensamentos, colocando-os em ordem e decidindo a partir de deduções as melhores soluções para os problemas encontrados, com a lógica somos capazes de compreender o que é pedido, realizar deduções lógicas, enumerar etapas, analisar outras possibilidades, ensinar ao computador a sua solução, analisar detalhes.

São instruções da linguagem baseadas no binário lógico true ou false (1 ou 0) que nos permite desviar o fluxo do algoritmo de acordo com um teste baseado em condições.

A condicional if é uma estrutura condicional que executa a afirmação, dentro do bloco, se determinada condição for verdadeira. Se for falsa, executa as afirmações dentro de else. (MDN) Podemos encadear vários ifs com else if

const horario = 7; // valor esperado entre 0 e 23

if (horario < 12) {
  console.log("dia");
} else {
  console.log("noite");
}

horario < 12 ? console.log("dia") : console.log("noite");

if (horario >= 0 && horario < 6) {
  console.log("madrugada");
} else if (horario >= 6 && horario < 12) {
  console.log("manhã");
} else if (horario >= 12 && horario < 18) {
  console.log("tarde");
} else if (horario >= 18 && horario < 24) {
  console.log("noite");
} else {
  console.log("horário inválido");
}

A condicional switch avalia uma expressão, combinando o valor da expressão para um cláusula case, e executa as instruções associadas ao case. (MDN) Passamos o break para sair da condicional quando um case é correspondido e sua instrução executada. Caso nenhum case seja correspondido podemos usar a cláusula default (opcional)

let regiao = "centro-oeste";

switch (regiao) {
  case "nordeste":
    console.log("possui 9 estados");
    break;
  case "norte":
    console.log("possui 7 estados");
    break;
  case "centro-oeste":
    console.log("possui 3 estados e DF");
    break;
  case "sudeste":
    console.log("possui 4 estados");
    break;
  case "sul":
    console.log("possui 3 estados");
    break;
}

• Podemos chamar também de Loop, laço ou método de iteração. Trata-se de comandos que mantém um trecho de código sendo executado até que uma condição de parada seja satisfeita;
• Sua principal função é possibilitar que possamos repetir um trecho de código sem a necessidade de escrever várias vezes esse trecho, para isso basta ter um ponto de partida e um ponto de chegada para a repetição;

const numeros = [3, 2, 4, 3, 5, 1, 3, 4, 2];

É uma estrutura de repetição com variável de controle, usada quando se sabe exatamente o ponto de partida e de chegada, o bloco será repetido enquanto a condição for verdadeira, ou seja, para quando a condição retorne false.

for ([inicialização]; [condição]; [expressão final]) {
  declaração
}   

for (let i = 0; i < numeros.lenght; i++) {
  const dobro = numeros[i] * 2;
  console.log(dobro);
}

Tem um funcionamento muito parecido com o do for, de executar sua intrução desde que a condição seja verdadeira, é sempre possível substituir o uso do for pelo do while, sendo o critério obter o código de melhor leitura, o while está mais atrelado à condição ser atendida enquanto o for é mais usado para iterar com contadores.

  while (condicao) {
    código aqui;
  }

let i = 0;
while (i < numeros.lenght) {
  const dobro = numeros[i] * 2;
  console.log(dobro);
  i++;
}

É um laço que percorre objetos iterativos, sendo o mais comum a array, chamando uma função para cada valor deste objeto;

for (variavel of iteravel) {
  declaração;
}

for (let numero of numeros) {
  const dobro = numero * 2;
  console.log(dobro);
}

Uma função callback é uma função passada a outra função como parâmetro, que é então invocada dentro da função externa para completar algum tipo de rotina ou ação. (MDN) A Callback é chamada no retorno da função externa.

function somar(a, b) {
  return a + b;
}

function subtrair(a, b) {
  return a - b;
}

function multiplicar(a, b) {
  return a * b;
}

function dividir(a, b) {
  return a / b;
}

function calcular(a, b, callback) {
  return callback(a, b);
}

const num1 = 7;
const num2 = 2;

const somaDoisNumeros = calcular(num1, num2, somar);
const subtracaoDoisNumeros = calcular(num1, num2, subtrair);
const multiplicacaoDoisNumeros = calcular(num1, num2, multiplicar);
const divisaoDoisNumeros = calcular(num1, num2, dividir);

console.log([somaDoisNumeros]); // 9
console.log(subtracaoDoisNumeros); // 5
console.log(multiplicacaoDoisNumeros); // 14
console.log(divisaoDoisNumeros); // 3.5

const somar = (a, b) => a + b;

const subtrair = (a, b) => a - b;

const multiplicar = (a, b) => a * b;

const dividir = (a, b) => a / b;

const calcular = (a, b, callback) => callback(a, b);

const tipos = ["String", "Números", "Booleanos"];
const cidades = new Array("Recife", "São Paulo", "Manaus");
const cursos = "frontend backend".split(" ");
const tecnologias = Array.of("HTML", "CSS", JS);

console.log(tipos[1]);

const numeros = [3, 2, 4, 3, 5, 1, 3, 4, 2];

• find()

  const encontrarPrimeiro = numeros.find((element) => element == 2);
  console.log(encontrarPrimeiro); // retorno 2

• filter()

  const filtrarPor = numeros.filter((element) => element == 3);
  console.log(filtrarPor); // retorno [3, 3, 3]

• map()

  const executarTodos = numeros.map((element) => (element = 4));
  console.log(executarTodos); // retorn  [4, 4, 4, 4, 4, 4, 4, 4, 4]

• forEach()

  const verTodos = numeros.forEach((element) => console.log(element));
  console.log(verTodos); // retorno  3\n2\n4\n3\n5\n1\n3\n4\n2

• reduce() -> O método reduce() uma callback que será executada para cada elemento da array, resultando num único valor de retorno, esta callback pode receber alguns parâmetros, sendo os mais comuns o acumulador e o valorAtual

  const ReduzirPara = numeros.reduce(
    (acumulador, valorAtual) => acumulador + valorAtual
  );
  console.log(ReduzirPara); // retorno 27

• concat() -> retorna um novo array contendo todos os arrays ou valores passados como parâmetro. (MDN)

  const arrayConcatenada = numeros.concat(1, [2, 3], "café");
  console.log(arrayConcatenada); // retorno [3, 2, 4, 3, 5, 1, 3, 4, 2, 1, 4, 5, 2, 'café']

• push(): -> adiciona um ou mais elementos ao final de um array e retorna o novo comprimento desse array. (MDN)

  const adicionaNoFinal = numeros.push(2, 3);
  console.log(adicionaNoFinal); // retorno 11

• pop(): -> remove o último elemento de um array e retorna aquele elemento. (MDN)

  const removeUltimo = numeros.pop();
  console.log(removeUltimo); // retorno 2

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

  const removePrimeiro = numeros.shift();
  console.log(removePrimeiro); // retorno 3

• unshift() -> adiciona um ou mais elementos no início de um array e retorna o número de elementos (propriedade length) atualizado. (MDN)

  const adicionaNoInicio = numeros.unshift(4, 1);
  console.log(adicionaNoInicio); // retorno 11

• slice() -> retorna uma cópia de parte de um array a partir de um subarray criado entre as posições início e fim (fim não é necessário) de um array original. O Array original não é modificado. (MDN)

  const copiaParte = numeros.slice(2, 5);
  console.log(copiaParte); //retorno [4, 3, 5]

• splice() -> altera o conteúdo de uma lista, adicionando novos elementos enquanto remove elementos antigos. (MDN)

  const removeEAdiciona = numeros.splice(2, 2, "novo");
  console.log(removeEAdiciona); //retorno [4, 3] -> removidos
  console.log(numeros); // retorno [3, 2, 'novo', 5, 1, 3, 4, 2]

• indexOf() -> retorna o primeiro índice em que o elemento pode ser encontrado no array, retorna -1 caso o mesmo não esteja presente. (MDN)

  const localizaElemento = numeros.indexOf(2);
  console.log(localizaElemento); // retorno 1

• includes() -> determina se um array contém um determinado elemento, retornando true ou false apropriadamente. (MDN)

  const verificaSeExiste = numeros.includes(4);
  console.log(verificaSeExiste); // true

• join() -> junta todos os elementos de um array em uma string e retorna esta string. (MDN)

  const transformaString = numeros.join("-");
  console.log(transformaString); // retorno "3, 2, 4, 3, 5, 1, 3, 4, 2"

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). (MDN) Os objetos são formados por chave e valor

const aluna = {
  nome: { primeiro: "Lilit", segundo: "Bandeira" },
  idade: 32,
  cidade: "Recife",
  interesses: ["música", "animes"],
  saudacao: () => console.log("olá meninas"),
};

1. notação de ponto - Digitando o ponto, podemos acessar todos as propriedades e métodos encapsuladas dentro do objeto

console.log(aluna.nome.primeiro);
aluna.saudacao();

2. notação de cochetes - Parecido com a maneira que acessamos itens de um array, só que ao invés de usarmos índice (número), usamos a chaves (strings) para acessar o valor de um item

console.log(aluna["nome"]["primeiro"]);
console.log(aluna["idade"]);
console.log(aluna["interesses"][0]);

const { idade, saudacao } = aluna;

Cria uma instância JavaScript de Date que representa um único momento no tempo. Objetos Date são baseados no valor de tempo que é o número de milisegundos desde 1º de Janeiro de 1970 (UTC). (MDN)

const hoje = new Date();

console.log(hoje); // 2022-05-29T10:56:49.693Z

const dia = hoje.getDate();
const mes = hoje.getMonth();
const ano = hoje.getFullYear();

console.log(`${dia}/${mes + 1}/${ano}`); // 29/05/2022 🤔

Método que retorna uma string com a representação de parte da data baseando-se no idioma. (MDN) Argumentos locales e options

const dataFormatada = hoje.toLocaleDateString("pt-BR");
console.log(dataFormatada); // 29/05/2022

const options = {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
};
const dataLonga = hoje.toLocaleDateString("pt-BR", options);
console.log(dataLonga); // domingo, 29 de maio de 2022

DOM é uma sigla que significa Document Object Model. Quando a página é carregada o browser cria um objeto que representa os elementos da página a partir do HTML. A forma mais fácil de acessar e manipular o DOM é usando JavaScript.

• document: representa o documento HTML
• element: são todas as tags que estão no arquivo HTML e se transformam em elementos da árvore DOM
• text: é o conteúdo de texto que vai entre os elementos (tags).
• attribute: são os todos atributos para um nó específico. No caso, o attribute href="http:// instagram .com/lilitbandeira" está associado ao elemento, outros exemplos de atributos são o class, o src, o id, entre outros.

O DOM é a representação do objeto do documento HTML e atua como uma interface de programação que permite a manipulação de sua estrutura com o JavaScript ou outras linguagens. Podemos manipular o DOM para realizar alterações na estrutura do HTML, alterar estilos, modificar conteúdos e adicionar diversos eventos.

O DOM possui muitos métodos, são eles que fazem a ligação entre os nós (elementos) e os eventos.

Seguem alguns dos principais métodos, para a lista completa acesse a documentação.

• getElementById() -> Retorna o elemento que possui o id passado como argumento;
• getElementsByClassName() -> Retorna uma coleção de todos os elementos que possuem a classe passada como argumento;
• getElementsByTagName() -> Retorna uma coleção de todos elementos que possuem a tag name informada
• querySelector() -> Retorna o primeiro elemento do DOM que possui a .class, #id ou tag passada como argumento;
• querySelectorAll() -> Retorna todos os elementos do DOM que possuem a .class, #id ou tag passada como argumento;
• createElement() -> Cria um elemento na página;
• createAttribute() -> Cria um atributo na página;
• appendChild() -> Insere um elemento filho ao final do elemento mãe;
• removeChild() -> Remove um elemento filho e retorna o elemento removido;
• parentNode() -> Retorna a mãe de um elemento.

• innerText -> define ou obtém o conteúdo textual "renderizado" de um nó e seus descendentes;
• innerHTML -> define ou obtém a sintaxe HTML contida no elemento;
• value -> define ou retorna o valor do atributo value de um campo de texto.
• classList -> propriedade somente leitura que retorna uma coleção com as classes do elemento;
  • add() -> adiciona uma classe ao elemento;
  • remove() -> remove uma classe do elemento;
  • toggle() -> adiciona uma classe ao elemento caso a classe não exista, caso exista a remove;
  • contains() -> Retorna um valor booleano, indicando se um elemento tem o nome da classe especificada;
• style -> Acrescenta/modifica um estilo ao elemento;

Um eventos é um conjunto de ações que são realizadas em um determinado elemento da página web, seja ele um texto, uma imagem, ou uma div, por exemplo. A Grande maiorria dos eventos nascem na interação da usuária com a aplicação, como:

Para manipular evento externo podemos usar Event listener que adiciona ou remove um evento sobre qualquer elemento. O Event Listener disponibiliza duas funções principais, são elas:

Listener é um objeto que recebe uma notificação quando um evento do tipo especificado ocorre.

addEventListener - Adiciona um listener que dispara uma função quando ocorrer determinado evento no elemento. removeEventListener - Remove um listener previamente adicionado em um objeto/elemento e retorna true em caso de sucesso.

elemento.addEventListener('click', function (evento) {
  //ação a ser executada no clique do elemento
  console.log(evento);
});

Usamos o método preventDefault() para cancelar a ação padrão que pertence a um determinado evento.

• Vamos criar uma lógica que verifique e retorne a classificação do IDH dos seguintes países de acordo com o a Escala de IDH do Programa das Nações Unidas para o Desenvolvimento – PNUD da ONU

let noruega = 0.944;
let qatar = 0.85;
let canada = 0.913;
let brasil = 0.755;
let japao = 0.891;
let vietna = 0.666;
let afeganistao = 0.465;
let camaroes = 0.512;

• Refatore o exercício anterior adicionando uma estrutura de repetição que retorne a classificação do IDH dos mesmos países, caso tenhamos recebido os dados da seguinte forma:

let data = [
  {
    pais: "noruega",
    idh: 0.944,
  },
  {
    pais: "qatar",
    idh: 0.85,
  },
  {
    pais: "canadá",
    idh: 0.913,
  },
  {
    pais: "brasil",
    idh: 0.755,
  },
  {
    pais: "japão",
    idh: 0.891,
  },
  {
    pais: "vietnã",
    idh: 0.666,
  },
  {
    pais: "afeganistão",
    idh: 0.465,
  },
  {
    pais: "camarões",
    idh: 0.512,
  },
];

• Devemos criar uma página (usando HTML e CSS) e popular os campos corretamente com os dados do objeto JSON (usando JavaScript/DOM), o objeto já está no arquivo script.js na pasta pratica com todos os detalhes sobre o exercício;

• Devemos criar uma página (usando HTML e CSS) e popular os campos corretamente com os dados com os dados do arquivo data.json ou do objeto JSON usando JavaScript, o objeto já está no arquivo script.js na pasta desafio com todos os detalhes sobre o desafio;

¹.  Livro: Lógica de Programação e Algoritmos com JavaScript
    Autor: Edécio Fernando Lepsen
    Editora: novatec