Às vezes, para iniciar uma jornada para aprender algo grande e complexo, você precisa aprender algo pequeno e simples. JavaScript é enorme e complexo, mas você pode entrar nele aprendendo coisas pequenas e simples. Se você é um web designer, acho que há uma coisa em particular que você pode aprender que é extremamente fortalecedora.
Isto é o que quero que você aprenda: quando você clica em algum elemento, mude uma classe em algum elemento.
Resumindo ao essencial, imagine que temos um botão e uma div:
Click Me I'm an element O div pode ter alguns estilos básicos e pode ter alguns estilos quando tem uma classe específica:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )Astutos CSS-Tricksters podem reconhecer isso como uma oportunidade para o hack da caixa de seleção, mas não é nisso que estamos trabalhando hoje.
Queremos anexar um “ouvinte de evento” ao botão: um pedaço de código para “ouvir”, em nosso caso, eventos de clique e, quando isso acontecer, execute mais código.
Você sabe como em CSS precisamos “selecionar” elementos para estilizá-los? Precisamos fazer isso em JavaScript também para anexar nosso ouvinte de eventos. Vamos criar uma “referência” para o botão, como uma variável, assim:
var button = document.querySelector("button");Agora que temos uma referência ao botão, vamos anexar esse listener de evento:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));E o que queremos fazer em caso de clique? Adicione um nome de classe ao nosso div! Mas, assim como precisamos de uma referência para o botão para fazer coisas com ele, precisaremos de uma referência para o div também. Vamos fazer os dois ao mesmo tempo, aqui está todo o código:
var button = document.querySelector("button"); var element = document.querySelector("div"); button.addEventListener("click", function() ( element.classList.toggle("yay"); ));Isso é tudo que eu queria mostrar a você. Com algum CSS adicionado a essa classe “yay”, podemos aumentar e diminuir o div:
Veja a classe Pen Click Something / Change de Chris Coyier (@chriscoyier) no CodePen.
Por que essa coisa?
As possibilidades de design são infinitas quando você controla o CSS e o estado de qualquer elemento (quais nomes de classe ele possui). Esconder e revelar coisas é o poder óbvio, mas realmente pode ser qualquer coisa.
Subindo de nível
Lembre-se de que você não está limitado a alterar o nome de uma classe. Você pode alterar várias classes em um único elemento ou alterar as classes em vários elementos.
Olhe mais para a propriedade classList. “Alternar” não é a única opção.
Assim como HTML e CSS, JavaScript tem diferentes níveis de suporte de navegador para as coisas. Verifique o suporte do navegador para classList e adicione addEventListener. Você concorda com esses níveis de suporte para o seu projeto? Do contrário, você pode procurar polyfills ou até mesmo jQuery.
Usamos o evento “click”, mas existem muitos outros. Outros eventos de mouse, rolagem, teclado e muito mais. Muitas centenas.
O método que usamos para selecionar foi document.querySelector. Isso foi útil porque retorna um único elemento para trabalharmos. Além disso, os seletores fornecidos são como seletores CSS. document.querySelector("#overlay .modal > h2");seria uma seleção legítima. No entanto, este não é o único método de seleção, existem outros como getElementById, querySelectorAll, getElementsByClassName e muito mais.
Aqui está um exemplo de onde selecionamos vários itens de navegação e anexamos um manipulador de cliques a todos eles de uma vez:
Veja as Pen Change Classes on Stuff de Chris Coyier (@chriscoyier) no CodePen.
Se o JavaScript que escrevemos em nosso pequeno exemplo falhou ao carregar por qualquer motivo, ainda teríamos um botão que diz “Click Me”. Mas clicar nele não faria muita coisa, não é? Talvez pudéssemos inserir esse botão com JavaScript, para que o botão nem mesmo esteja lá, a menos que saibamos que vai funcionar? Boa ideia, hein? ;)