Adote um Dev - Nível h4ck3rm4n: JavaScript

./adote-um-dev.sh

Nível: h4ck3rm4n

Agenda

JavaScript
- Manipulações no DOM;
- Eventos;
- JavaScript Assíncrono

Antes de mais nada...

No episódio anterior da nossa saga, nós vimos como funciona a sintaxe do JavaScript. Hoje, vamos aprender a utilizar ele manipulando o DOM, interagindo com eventos e trabalhando de forma assíncrona.

Manipulação do DOM

Como aprendemos anteriormente, nosso HTML tem uma estrutura de um documento em forma de objeto. Com o JavaScript, temos a possibilidade de interagir com esse objeto.
Vamos dividir essas manipulações nas seguintes categorias:
- Busca por Elementos;
- Alterando Elementos;
- Adicionando/Removendo Elementos;

DOM - Busca

Com o JavaScript, podemos buscar elementos no nosso DOM das seguintes formas:

// Pelo ID do elemento no HTML
document.getElementById(id)

// Pela TAG do elemento no HTML
document.getElementsByTagName(name)

// Pela CLASSE do elemento no HTML
document.getElementsByClassName(name)

DOM - Alteração

Além de buscar os elementos no DOM, também podemos fazer alteração deles.

// Alterando o conteúdo do HTML do elemento
element.innerHTML =  "novo conteudo dentro do HTML"

// Alterando o valor do atributo do elemento
element.attribute = "novo valor"

// Alterando a propriedade de estilo do elemento
element.style.property = "novo estilo"

// Alterando o valor do atributo do elemento, através de um método
element.setAttribute(atributo, valor)

DOM - Adc./Remov.

E, não menos importante, podemos remover e adicionar elementos do nosso DOM.

// Cria um novo elemento HTML
document.createElement(elemento)

// Remove um elemento do HTML
document.removeChild(elemento)

// Adiciona um elemento HTML em um elemento existente
document.appendChild(elemento)

// Substitui um elemento HTML
document.replaceChild(novoElemento, elementoAntigo)

// Adiciona um texto no HTML
document.write(text)


// EXTRA: também podemos adicionar handlers de evento
// ex.:
document.getElementById(id).onclick = function() { /* código*/ }

Eventos

Demos um spoiler no slider anterior, justamente para introduzir os Eventos em JavaScript.
A lista completa dos eventos pode ser encontrada aqui: https://www.w3schools.com/jsref/dom_obj_event.asp
Vimos um pouco sobre essa parte quando estudamos HTML e o DOM. Mas agora vamos aprender pela sintaxe do JavaScript. Vai pra baixo nos slides :)

Eventos

<button 
  onclick="mostraData()"
>
  Qual a data?
</button>

<p id="dataHoje"></p>

function mostraData() {
  document.getElementById("dataHoje").innerHTML = Date();
}

https://jsfiddle.net/cicatrzwp/2qzd673n/2/

Eventos

<button 
  id="meuBotao"
>
  Qual a data?
</button>

<p id="dataHoje"></p>

document.getElementById("meuBotao").onclick = mostraData;

function mostraData() {
  document.getElementById("dataHoje").innerHTML = Date();
}

https://jsfiddle.net/cicatrzwp/2qzd673n/3/

JavaScript Assíncrono

No JavaScript, trabalhamos de forma síncrona (execuções simples, instruções diretas) e também de forma assíncrona (execuções que dependem de alguma coisa, retornos de funções, etc).
Quando trabalhamos com chamadas assíncronas, empilhamos essa execução. Porém, para ter o retorno dessa chamada, precisamos passar um CALLBACK (chamada de retorno).

JavaScript Assíncrono

Exemplo de CALLBACK

//Pedir uma pizza é um exemplo na vida real de uma função assíncrona
pedirPizza(pedido => {
  console.log(`Sua pizza de ${pedido.sabor} está pronta.`); 
});

Ou seja, um Callback nada mais é que uma função que chama outra função.

JavaScript Assíncrono

Exemplo de CALLBACK

let salarioBruto = 3000;
let salarioLiquido;

function getSalario(salarioBruto, callback)
{
    let liquido = 0;
    const inss = salarioBruto * 0.11;
    const vr = salarioBruto * 0.05;
    const vt = salarioBruto * 0.06;
    const fgts = salarioBruto * 0.15;
    const descontos = inss + vr + vt + fgts;
    liquido = salarioBruto - descontos;
    
    return callback(liquido);
}

getSalario(salarioBruto, (resultado) => {
    salarioLiquido = resultado;
    console.log(`O salário liquido é ${salarioLiquido}`);
});

JavaScript Assíncrono

Exemplo de CALLBACK

let salarioBruto = 3000;
let salarioLiquido;

function getSalario(salarioBruto, callback)
{
    let liquido = 0;
    const inss = salarioBruto * 0.11;
    const vr = salarioBruto * 0.05;
    const vt = salarioBruto * 0.06;
    const fgts = salarioBruto * 0.15;
    const descontos = inss + vr + vt + fgts;
    liquido = salarioBruto - descontos;
    
    return callback(liquido);
}

getSalario(salarioBruto, (resultado) => {
    salarioLiquido = resultado;
    console.log(`O salário liquido é ${salarioLiquido}`);
});

JavaScript Assíncrono

Normalmente nossos callbacks retornam promessas de valores para nós. Essas promessas são por justamente depender de algum outro serviço ou retorno que não está ao controle da nossa função.

function getRandomPonyFooArticle () {
  return new Promise((resolve, reject) => {
    request('https://ponyfoo.com/articles/random', (err, res, body) => {
      if (err) {
        reject(err); return;
      }
      resolve(body);
    });
  });
}

JavaScript Assíncrono

Normalmente nossos callbacks retornam promessas de valores para nós. Essas promessas são por justamente depender de algum outro serviço ou retorno que não está ao controle da nossa função.

function getRandomPonyFooArticle () {
  return new Promise((resolve, reject) => {
    request('https://ponyfoo.com/articles/random', (err, res, body) => {
      if (err) {
        reject(err); return;
      }
      resolve(body);
    });
  });
}

JavaScript Assíncrono

Para resolver Promisses, temos métodos específicos do JavaScript, chamados de .then() e .catch()

function printRandomArticle () {
  getRandomPonyFooArticle()
    .then(html => hget(html, {
      markdown: true,
      root: 'main',
      ignore: '.at-subscribe,.mm-comments,.de-sidebar'
    }))
    .then(md => marked(md, {
      renderer: new Term()
    }))
    .then(txt => console.log(txt))
    .catch(reason => console.error(reason));
}

JavaScript Assíncrono

Outro conceito muito importante é o de async/await, que é, em poucas palavras, uma sintaxe melhorada para trabalhar com promisses.

async function read () {
  var html = await getRandomPonyFooArticle();
  var md = hget(html, {
    markdown: true,
    root: 'main',
    ignore: '.at-subscribe,.mm-comments,.de-sidebar'
  });
  var txt = marked(md, {
    renderer: new Term()
  });
  return txt;
}

Conclusão

Text