Inscreva-se agora

JavaScript no Browser, o básico!

Quando se fala em JavaScript no navegador, existem 3 conceitos a serem bem compreendidos: DOM selection, Event Handling e AJAX.

JavaScript no Browser, o básico!
Compartilhar artigo
Quando o assunto é JavaScript no browser, você precisa entender bem três conceitos: primeiro, você precisa saber como selecionar elementos no DOM e atribuí-los a variáveis. Depois, você precisa saber como criar event listeners para reagirem a certos elementos. E por fim, você precisa saber como fazer requisições AJAX para buscar informações sem a necessidade de regarregar a página.


1 - DOM Selection


Considere o código HTML abaixo:

<ul id="cities">  
  <li class="europe">Paris</li>  
  <li class="europe">London</li>
  <li class="europe">Berlin</li>
  <li class="asia">Shanghai</li>
  <li class="america">Montreal</li>
</ul>

A maneira mais fácil para selecionar um elemento no DOM é usando seu id:

const list = document.getElementById("cities");

Mas esta não é a única maneira, podemos usar também um seletor CSS: 
const list = document.querySelector("#cities");
Cada um destes métodos irá obrigatoriamente retornar um e apenas um elemento. Garantido! Mas e se você quiser selecionar todos os elementos da classe "europe" dentro da lista? Para fazer isso você vai precisar de um seletor CSS um pouquinho mais complexo:

const europeanCities = document.querySelectorAll("#cities .europe");
europeanCities.forEach((city) => {  
  city.classList.add('highlight');
});

No código acima, o comando querySelectorAll sempre irá retornar uma NodeList (que pode conter apenas um elemento). Em seguida você chama o método forEach nesta lista. (usamos aqui uma ES6 arrow function quem tem amplo suporte). 

Para conseguir percorrer o DOM a partir de um dado elemento, veja parentElement, children e nextElementSibling. É uma grande árvore genealógica!


2 - Binding and handling Events


O browser é uma interface gráfica (ou em inglês, Graphical User Interface – GUI). Isso quer dizer que um usuário irá interagir com ele e você não pode prever que ações este usuário vai tomar. Ele vai clicar no botão A primeiro? Ou vai fazer scroll pra baixo e clicar em um link?  Ou passar o mouse acima de uma imagem? 

Quando a gente vê um website, o broser gera muitos eventos. Cada vez que você "scrolla" um pixel para baixo no seu trackpad ou mouse, um scroll event é disparado. Teste você mesmo! Abra o console de seu navegador (usando o inspector) e digite esta linha de JavaScript (e depois dê Enter): 

document.addEventListener('scroll', () => console.log(document.body.scrollTop));

E agora... dê um scoll!! E aí? Viu? Cada evento logado representa um pixel "scrollado" para cima ou para baixo, desde que a página foi carregada. 

Imagine agora o código HTML abaixo:

<button id="openModal"></button>

Você pode adicionar um callback ao evento de click deste botão com o seguinte código JavaScript:

const button = document.getElementById('openModal');
button.addEventListener("click", (event) => {  
  console.log(event.target);  // `event.target` é o elemento onde o usuário clicou
  alert("You clicked me!");   
});

Você pode ler mais sobre addEventListener na documentação MDN 👌


3 - AJAX


AJAX é a pedra fundamental da Web moderna. Graças a esta tecnologia, você pode carregar novas informações a uma página web sem precisar recarrega-la. Pense na inbox do Gmail te mostrando os novos emails assim que eles chega, no Facebook te notificando sobre os novos conteúdos na sua timeline e assim por diante. Nos navegadores mais modernos você pode usar fetch. Aqui vai um exemplo de uma chamada a uma API JSON usando uma requisição GET:

fetch(url)  
  .then((response) => response.json())  
  .then((data) => {    
    console.log(data); // data será o arquivo JSON enviado pela API 
  });

Em alguns momentos, precisaremos enviar uma informação para a API usando POST:

// Some info to POST 
const payload = { name: 'Name', email: 'Email' }; 
fetch(url, {  
  method: "POST", 
  headers: {    "Content-Type": "application/json"  },  
  body: JSON.stringify(payload)}) 
  .then(response => response.json())  .then((data) => {    
    console.log(data); // data será o arquivo JSON 
  };
});


Conclusão


É combinando estas três técnicas que páginas dinâmicas são criadas! Você pode selecionar elementos graças a um destes três métodos  (getElementById, querySelector or the one returning an NodeList: querySelectorAll). Com o elemento em mãos, você pode usar o addEventListener em algum tipo de evento (click, focus, blur, submit, etc.).  O callback adicionado a este listener pode conter uma requisição AJAX usando fetch.
Happy JavaScripting!
Deseja saber mais sobre o nosso curso de 9 semanas?
Baixe o programa do curso
Continue lendo

Finanças para freelancers: dicas para cuidar da sua renda

Além de oferecer serviços de qualidade, freelancers e autônomos precisam também se preocupar com uma boa gestão financeira para atingir sucesso nos negócios.

Como aprender a programar: vantagens e desvantagens de cada caminho

Fazer faculdade, encarar um bootcamp ou partir pra aprender por conta própria de graça na internet? Neste artigo avaliamos os prós e contras de cada caminho.

Learn to code

Aprender programação do zero: por onde começar?

Por que todo mundo deveria saber programar?

Você tem interesse em estudar no bootcamp de programação número #1 do mundo?

We are in 39 cities worldwide.