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?
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.

Learn to code

As barreiras de entrada do mercado de TI

Separamos algumas dicas de como iniciar uma carreira no mercado de TI!

Graduate stories

De estudante do ensino médio a Desenvolvedor no Texas

Conheça a história de Davis, estudante do ensino médio que decidiu que não queria esperar muito tempo para transformar sua paixão por tecnologia em profissão.

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

Estamos em 39 ao redor do mundo