Inscreva-se agora

Do jQuery ao DOM e ES6

Olhando para trás, jQuery foi criado para dar conta das diferenças de implementação do JavaScript nos diferentes navegadores. Mas os tempos mudaram... para melhor!

Do jQuery ao DOM e ES6
Compartilhar artigo
Olhando para trás, jQuery foi criado para dar conta das diferenças de implementação do JavaScript nos diferentes navegadores. O grande culpado atende pelo nome de Internet Explorer, que ficava sempre atrasado em relação ao Mozilla Firefox e mais tarde ao Google Chrome. Uma solução fácil de usar, jQuery foi amplamente adotada por desenvolvedores também por iniciantes que muitas vezes tiveram seu primeiro contato com JavaScript através dessa biblioteca. 

Em 2017, o uso do IE8 ao IE11 caiu a ponto de o navegador poder ser ignorado com segurança. Isso significava que nós desenvolvedores já podíamos abandonar completamente o jQuery e contar apenas com o standard DOM e algumas pitadas de ES6. Velocidade sendo um dos principais critérios para SEO (e também para usuários!), evitar que seu navegador tenha que carregar toda uma biblioteca antes de processar o seu código é uma vantagem que não pode ser ignorada!

Selecionando os elementos no DOM


Imagine o seguinte código HTML:

<div id="lead">lorem ipsum</div>
<ul>
  <li class="green">First item</li>
  <li class="red">Second item</li>
  <li class="green">Third item</li>
  <li class="red">Last item</li>
</ul>
<p class="green status">A great status</p>

No jQuery você pode usar a função $() em combinação com algum seletor CSS para ir buscar elementos no DOM.

var lead = $('#lead');
var firstRedItem = $('.red').eq(0);
var greenListItems = $('li.green');  // Adding `li` not to select the `p`.

Mas agora temos como alternativa os três médotos abaixo:


const lead = document.getElementById('lead');  // ⚠️ no #
const firstRedItem = document.querySelector('.red');
const greenListItems = document.querySelectorAll('li.green');

Os olhares mais atentos perceberam que usamos const em vez de var. No ES6, em vez de var, usamos const ou let. Usaremos let quando quisermos mudar o valor de uma variável, e const para os outros casos:

let name = "George";
name = name + " Abitbol"; // `name` is being re-assigned.console.log(name);

Você pode ler mais sobre isso em let and const

Inserindo um elemento no DOM


Um uso clássico do JavaScript seria inserir um novo elemento no DOM. Em um blog por exemplo, uma sessão de comentários em AJAX iria inserir um comentário sem precisar recarregar a página.

<div id="comments">  
  <p class="comment">This was great!</p>
  <p class="comment">I loved it :)</p>
</div>

<form>  
  <textarea id="commentContent"></textarea>
  <button>Post comment</button>
</form>

Usando jQuery, faríamos da seguinte maneira:

var commentContent = $('#commentContent').val(); // Skipping AJAX part
$('#comments').append('<p class="comment">' + commentContent + '</p>');

Agora podemos contar com Element#insertAdjacentHTML e com ES6 template literals:

const commentContent = document.getElementById('commentContent').value;
const comments = document.getElementById('comments');

comments.insertAdjacentHTML('beforeend', `<p class="comment">${commentContent}</p>`);

Atualizando classes CSS


Adicionando, removendo ou modificando uma classe CSS em um elemento do DOM é algo bem comum em um app usando JavaScript. Com o jQuery, usaríamos:

$(selector).addClass('bold');
$(selector).removeClass('bold');
$(selector).toggleClass('bold');

E isso seria aplicado em todos os elementos que correspondem a um dado seletor CSS:

Sem o jQuery, você pode usar classList:

// For one element selected with `getElementById` or `querySelector`
element.classList.add('bold');
element.classList.remove('bold');
element.classList.toggle('bold');

// For multiple elements selected with `querySelectorAll`:
elements.forEach((element) => {  
  element.classList.add('bold');
  // etc.
});

Percebeu? Aqui usamos o Array.forEach!

Event listeners


JavaScript permite que a gente tenha comportamentos dinâmicos em uma página web. O mais simples exemplo que consigo pensar é ter um alerta pop-up quando o usuário clica em um botão.

<button id="useless-btn">Click me!</button>

Com jQuery, a gente usaria o método .on()  (ou um de seus atalhos):

$('#useless-btn').on('click', function(event) {  
  alert('Thanks for clicking!');
});

Mas no DOM a gente pode brincar com o addEventListener:

const button = document.getElementById('useless-btn');
button.addEventListener('click', (event) => {  
  alert('Thanks for clicking!');
});

Para buscar informação sobre um elemento clicado, você pode aplicar um call back em um evento event.target. Mas o que é esse =>? Bom, isso é uma arrow function. Isso serve para a gente ser capaz de preservar uma variável e não precisar fazer aquela gambiarra do variável1 = variável2. Wes Bos tem um ótimo post e video sobre o assunto.

AJAX


Quando falamos de AJAX, a implementação original se apoia no XMLHttpRequest, mas ninguém quer usar aquilo! jQuery resolveu este problema há 10 anos com o método $.ajax e seus dois atalhos $.get e $.post:

// GET request
$.ajax({  
  url: "https://swapi.co/api/people/",  
  type: "GET"  
  success: function(data) {    
   console.log(data);  
  }
});

// POST request

const data = { name: "a name", email: "an@email.com" };

$.ajax({  
  url: url,  
  type: "POST",  
  data: data,  
  success: function(data) {    
    console.log(data);  
  }
});

Nos navegadores atuais, podemos contar com o fetch que fornece uma API melhor que a do basição XMLHttpRequest.

// GET request
fetch("https://swapi.co/api/people/")  
  .then(response => response.json())  
  .then((data) => {    
    console.log(data);  
  });

// POST requestconst 
data = { name: "a name", email: "an@email.com" };
fetch(url, {  
  method: 'POST',  
  headers: { "Content-Type": "application/json" },  
  body: JSON.stringify(data)})
   .then(response => response.json())
   .then((data) => {
     console.log(data);
   });

Perceba que o segundo argumento da função fetch() é um hash usando como chaves nomes que representam as partes de uma requisição HTTP: o método (ou verbo), os cabeçalhos (headers) e o corpo(body).

Indo além


Alguns recursos para ir além neste tema (em 🇺🇸):

Deseja saber mais sobre o nosso curso de 9 semanas?
Continue lendo
Learn to code

O que é AJAX e por que é tão importante conhece-lo? Conheça a história do Gmail

O AJAX não é novo, mas revolucionou o funcionamento da web e é muito importante até hoje. Neste artigo entenda o por quê!

Learn to code

Como fazer um business plan para sua startup

Spoiler alert: o melhor business plan é esquecer do excel e aprender a botar a mão na massa

Graduate stories

De advogada desempregada a engenheira de software em um ano

A história contada na primeira pessoa da Patricia, ex-advogada que virou dev back-end na Loft, uma das poucas startups unicórnios do Brasil.

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

Estamos em 39 ao redor do mundo