O uso de bibliotecas JavaScript vem crescendo muito atualmente, mas às vezes utilizamos certas bibliotecas (como a jQuery) para simples tarefas, que poderíamos fazer apenas com JavaScript.
Vejamos na Listagem 1 o que acontece muito nas páginas da web de hoje.
Listagem 1: Pegando o atributo src de uma imagem com jQuery
$("#imagem").attr("src");
Poderíamos usar simplesmente o JavaScript para ter o mesmo resultado usando o código da Listagem 2.
Listagem 2: Pegando o atributo src de uma imagem com JavaScript
document.getElementById("imagem").src;
A intenção do artigo não é desencorajar ninguém a deixar de usar jQuery, mas para quem quer ser um bom front end, um ninja front end, é bom começar a estudar o JavaScript puro. Muitos desanimam ao estudar essa tecnologia por causa da maneira um pouco “diferente” de obter um efeito legal e com um código curto, como acontece com o jQuery, mas com o JavaScript puro dá para se ter efeitos, digamos “muito show”.
Muito bem, chega de conversa, vamos dar inicio ao nosso treinamento “ninja”…
Estrutura HTML e CSS
Vamos criar um pequeno exemplo para mostrar os efeitos fadeIn e fadeOut. Primeiro vamos elaborar nossa estrutura HTML, criando uma div que irá sofrer o efeitos através de dois botões.
dica: Antes de criar algum efeito com javascript ou qualquer outra biblioteca javascript, sempre seguimos estas três ordens: Primeiro construimos a estrutura html, depois elaboramos o nosso estilo com o css, e por último, começamos a brincar com as nossas linhas de códigos javascript
Observe a Listagem 3.
Listagem 3: Estrutura html5 simples
<!doctype html>
<html lang="pr-br">
<head>
<meta charset="UTF-8">
<title>Meu primeiro efeito ninja em js</title>
</head>
<body>
<section id="objeto"></section>
<button id="fadeIn"></button>
<button id="fadeOut"></button>
</body>
</html>
A marcação html é simples, temos uma tag section, que sofrerá as mudanças de opacidade, determinadas como fadeIn e fadeOut. Temos também dois botões qualquer, que serão responsáveis por chamar as funções de acordo com seu “id”.
Em seguida, aplicamos nosso style,conforme a Listagem 4.
Listagem 4: Estilo CSS
<style type="text/css">
section {
width: 150px;
height: 100px;
background: red;
}
</style>
Note que só estilizamos a tag section, pois o estilo do botão não é relevante neste exemplo, só é necessário uma cor de fundo na section para que possamos visualizar ela sumindo e aparecendo.
agora iremos aplicar a função dos botões quando o documento for carregado. Observe a Listagem 5.
Listagem 5: Anexando a função de clique nos botões quando o documento for lido
<script type="text/javascript">
window.onload = function(){
var objeto = document.getElementById('objeto');
document.getElementById("fadeIn").onclick = function(){
fadeIn(objeto,1);
}
document.getElementById("fadeOut").onclick = function(){
fadeOut(objeto,1);
}
}
</script>
Nestas linhas de códigos acima, anexamos a função de clique para os botões e, de acordo com seu “id”, chamamos a função de fadeIn e/ou fadeOut
Em seguida, criaremos as funções fadeIn (que servirá para determinar quando elemento irá aparecer) e fadeOut (para determinar quando o elemento irá sumir), conforme as Listagens 6 e 7.
Listagem 6: Função fadeIn
function fadeIn(element,time){
processa(element,time,0,100);
}
Listagem 7: Função fadeOut
function fadeOut(element,time){
processa(element,time,100,0);
}
Estas funções tem como parâmetros element, time, intial, e end, onde:
· element – Elemento que sofrerá o fadeIn ou fadeOut;
· time – Tempo que o fade acontecerá (neste caso, um segundo);
· initial – Estado inicial do elemento;
· end – Estado final do elemento.
Agora criaremos uma função que será responsável por processar os efeitos de fadeIn e fadeOut, conforme abaixo:
function processa(element,time,initial,end){
//cógigo
}
No escopo da nossa função, declararemos uma variável responsável pelo incremento (no caso do fadeIn) ou decremento (no caso do fadeOut) do efeito. Esta variável será a chave principal para setar o efeito na opacidade do nosso elemento. Observe a Listagem 8.
Listagem 8. Criação da variável de incremento da função processa
if(initial == 0){
increment = 2;
element.style.display = "block";
}else {
increment = -2;
}
Se o estado inicial do elemento for igual a zero, declaramos o incremento como positivo para que o elemento possa aparecer, colocando-o com um display:block. Mas se o estado inicial do elemento for diferente de zero, então declaramos o incremento como negativo, assumindo o efeito de fadeOut
Agora iremos declarar a opacidade inicial do nosso elemento, declarando uma variável cujo nome será “opc” que irá “sofrer” as mudanças de incremento ou decremento. Observe a Listagem 9.
Listagem 9: declaração da variável de opacidade
if(initial == 0){
increment = 2;
element.style.display = "block";
}else {
increment = -2;
}
opc = initial;
Obs: Declaramos a variável “opc”, porque iremos precisar do valor “initial” para fazer uma verificação, em um loop mais na frente, mas também iremos precisar que o valor da variável “initial” também mude para que possamos aplicar as mudanças na tag section
Agora iremos criar um intervalo para simular o efeito fadeIn / fadeOut no nosso elemento. Este intervalo irá se repetir em um intervalo de 10 milissegundos, pois queremos que aconteça o fade em um segundo (1 * 10) == (time * 10), conforme a Listagem 10.
Listagem 10: Intervalo responsável por aplicar efeito de fadeIn ou fadeOut
intervalo = setInterval(function(){
},time * 10);
Dentro do nosso intervalo verificaremos se a variável opc chegou ao estado final, ou seja, se o intervalo completar o efeito de fade limpamos o mesmo, pois ele não será mais necessário. Observe a Listagem 11.
Listagem 11: Verificando se o fade foi completado
intervalo = setInterval(function(){
if((opc == end)){
if(end == 0){
element.style.display = "none";
}
clearInterval(intervalo);
}
},time * 10);
Note que foi feita uma nova verificação para ver se o estado final do elemento é zero. Se está em zero, então teremos que esconde-lo para que não ocupe espaço na tela.
Logo após a verificação, setaremos a opacidade do nosso elemento, conforme a Listagem 12.
Listagem 12: setando a opacidade do elemento
}else {
opc += increment;
element.style.opacity = opc/100;
element.style.filter = "alpha(opacity="+opc+")";
}
Os comandos dentro deste bloco serão executados a cada 10 milissegundos. Na linha “opc += increment;”, a opacidade incrementa ou decrementa. Por exemplo, se a opacidade for 0, o incremento é positivo e teremos a seguinte repetição:
0 + 2= 2 (na primeira execução do loop);
2 + 2 = 4 (na segunda execução do loop);
(………………)
98 + 2 = 100 (na ultima execução do loop);
Mas se a variável opc for maior que 0 (no caso 100), significa que o incremento é positivo, pois no topo do escopo da nossa função processa(), temos uma verificação do parâmetro “initial”, e se initial não for igual a zero (que declaramos a variável opc = initial) a variável increment é negativa. Logo teremos a seguinte função:
100 – 2= 98 (na primeira execução do loop);
98 – 2 = 96 (na segunda execução do loop);
(……………)
98 – 2 = 100 (na ultima execução do loop);
Já na linha “element.style.opacity = opc/100;” seta a opacidade no elemento.
E quem disse que o nosso efeito não é cross browser? Esta linha abaixo faz o nosso efeito de opacidade funcionar no ie8 até o ie6,
Element.style.filter = “alpha(opacity=”+opc+”)”;
O Internet Explorer do 8 abaixo, interpreta a propriedade filter:alpha(opacity=100) como opacity:1;
Disponibilizei o código no github, clique aqui.
Um forte abraço e até a próxima.