Modern Javascript in the Browser

Quando se fala em JavaScript no navegador, existem 3 conceitos a serem bem compreendidos: DOM selection, Event Handling e AJAX.
Índice de conteúdo
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!
Os usuários também consultaram :
Pour développe mes compétences
Formation développeur web
Formation data scientist
Formation data analyst
Les internautes ont également consulté :

Suscribe to our newsletter

Receive a monthly newsletter with personalized tech tips.