JavaScript na prática

Macetes do dia-dia.

IIFE

Funções iniciadas imediatamente.

Hoisting

console.log(func());

function func() {
  // body...
  console.log('escopo da função');
}

Acessando o DOM

const $_Dom = document.querySelectorAll('body');
console.log($_Dom);

Função Request

function request() {
  const xhttp = new XMLHttpRequest();
}

Acessando propriedade onreadystatechange

  xhttp.onreadystatechange = function () {

  };

Verificando o status da Requisição 

if (this.readyState == 4 && this.status == 200) {

    const res = JSON.parse(this.responseText);
}

Tratando a resposta da Requisição 

res.map(hero => {
  let _ul = document.getElementsByClassName("heroList")[0];
  let _li = _ul.childNodes[1];
  _li = _li.cloneNode(true);

  let _spanNum =   _li.getElementsByClassName('numero')[0];
  let _spanName =  _li.getElementsByClassName('heroName')[0];

  _spanNum.innerHTML = hero.id;
  _spanName.innerHTML = hero.nome;

  _ul.appendChild(_li);

});

Fazendo requisição, definindo cabeçalhos e enviando

  xhttp.open("GET", "http://localhost:3000/api/heros", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send();

Script completo

function request() {
  const xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      const res = JSON.parse(this.responseText);

      //aqui estamos fazendo um map no json retornado e para cada item do JSON eu farei alguma coisa
      res.map(hero => {
        let _ul = document.getElementsByClassName("heroList")[0];//clonei o meu ul
        console.log(_ul);
        let _li = _ul.childNodes[1];
        _li = _li.cloneNode(true);

        let _spanNum =   _li.getElementsByClassName('numero')[0];
        let _spanName =  _li.getElementsByClassName('heroName')[0];

        _spanNum.innerHTML = hero.id;
        _spanName.innerHTML = hero.nome;

        _ul.appendChild(_li);

      });
    }
  };

  xhttp.open("GET", "http://localhost:3000/api/heros", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send();
}