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).
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!"); });
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!
