Seja bem-vindo ao módulo 2 do curso de jQuery. Aqui nós daremos continuidade ao nosso jogo Alura Typer. Nesse módulo focaremos em animações, de fade in, fade out, scroll, slide up e slide down. Vamos aprender a fazer AJAX utilizando as funções do jQuery, então nós iremos fazer requisições GET, POST, buscar e enviar dados para um servidor.
Também iremos ver os problemas mais comuns que os desenvolvedores encontram quando estão trabalhando com AJAX, de onde eles vêm e como nós os resolvemos. Além disso, estudaremos também alguns plug-ins do jQuery para melhorar algumas funcionalidades da nossa aplicação, logo veremos como adicionamos um plug-in no nosso projeto.
Tudo isso será visto ao longo deste módulo 2 do curso de jQuery, então vamos dar continuidade aos nossos estudos e colocar as mãos na massa!
Quando começamos o jogo, no nosso placar não há nenhuma informação relevante para o usuário. O jogo poderia ser iniciado com o placar escondido, e com um botão para mostrá-lo ou escondê-lo. Então vamos dar essa opção ao usuário, ele que escolherá se quer ver o placar ou não.
Vamos começar adicionando um novo botão, do lado do botão de reiniciar. Então, na página principal.html, dentro da div
botoes
, adicionamos o botão:
<div class="botoes">
<a id="botao-reiniciar" class="btn-floating btn-large waves-effect waves-light red">
<i class="material-icons">restore</i>
</a>
<!-- NOVO BOTÃO AQUI -->
<a id="botao-placar" class="btn-floating btn-large waves-effect waves-light green">
<i class="material-icons">assignment</i>
</a>
</div>
Como queremos que o jogo comece com o placar escondido, precisamos alterar o seu CSS, mais precisamente a propriedade display
. Então, no estilos.css, adicionamos:
.placar {
display: none;
}
Agora, quando clicarmos no botão que adicionamos acima, o placar é mostrado. Para fazer isso, precisamos implementar um código JavaScript, e como esse código é referente ao placar, vamos adicioná-lo ao arquivo placar.js. Como o placar será mostrado quando clicarmos no botão, precisamos escutar o seu evento de click
:
$("#botao-placar").click(mostraPlacar);
Agora precisamos implementar a função mostraPlacar
, que como o nome já diz, será a função responsável por mostrar o placar:
$("#botao-placar").click(mostraPlacar);
function mostraPlacar() {
}
Uma das formas de mostrarmos o placar, é justamente alterar novamente a sua propriedade CSS display
de none
para block
. Já sabemos como alterar uma propriedade CSS com o jQuery:
$("#botao-placar").click(mostraPlacar);
function mostraPlacar() {
$(".placar").css("display", "block");
}
Agora podemos abrir a página principal.html no navegador, clicar no botão para mostrar o placar e perceber que o placar realmente é mostrado. Mas se clicarmos novamente no botão, o que acontece? Nada! O ideal é que se clicarmos novamente no botão, o placar seja escondido novamente. Logo, ao clicarmos no botão, se o placar estiver escondido, ele será exibido, se não estiver, ele será escondido.
Poderíamos fazer uma condição if
para verificar o valor atual do display
e invertê-lo. Mas como esse recurso de mostrar e esconder é tão comum, o jQuery já facilitou a nossa vida, criando a função show
. Com isso não precisamos mais alterar o CSS no JavaScript:
$("#botao-placar").click(mostraPlacar);
function mostraPlacar() {
$(".placar").show();
}
E para esconder algo, existe a função oposta, a hide
:
$("#botao-placar").click(mostraPlacar);
function mostraPlacar() {
$(".placar").hide();
}
Só que mais uma vez teríamos que fazer um if
para verificar quando chamar a função show
e quando chamar a função hide
. Só que mais uma vez o jQuery facilita a nossa vida, criando a função toggle
. Ela é semelhante à função toggleClass
, que vimos no último módulo, que adiciona ou remove uma classe. Só que a toggle
adiciona ou esconde um elemento:
$("#botao-placar").click(mostraPlacar);
function mostraPlacar() {
$(".placar").toggle();
}
Agora nossa funcionalidade está pronta! Mas ela pode ficar ainda melhor. Podemos reparar que quando clicamos no botão para exibir o placar, nosso texto é deslocado levemente para a esquerda. Isso porque quando o placar é adicionado, a barra de rolagem do navegador também aparece, ocupando um espaço e deslocando o texto. Podemos resolver isso mexendo novamente no CSS, para que o espaço da barra de rolagem já venha na página, independente se houver placar ou não. Logo, adicionamos o seguinte código no estilos.css:
body {
overflow: scroll;
}
Para melhorar mais ainda, podemos melhorar a exibição do placar, porque atualmente ele aparece de maneira abrupta na página. Podemos animar essa transição, deixando-a mais suave. Para isso, podemos ver a função slideDown
, que tem a mesma funcionalidade que a função show
, mas realiza a transição de uma maneira mais suave:
$("#botao-placar").click(mostraPlacar);
function mostraPlacar() {
$(".placar").slideDown();
}
Podemos reparar agora que o placar é mostrado aos poucos, de uma maneira mais lenta. Se queremos deixar mais suave ainda, podemos passar um tempo em milissegundos por parâmetro para a função:
$("#botao-placar").click(mostraPlacar);
function mostraPlacar() {
$(".placar").slideDown(600);
}
Além do slideDown
, analogamente temos o slideUp
, para mostrar um elemento. No nosso caso queremos alternar entre essas duas funções, para isso existe a função slideToggle
:
$("#botao-placar").click(mostraPlacar);
function mostraPlacar() {
$(".placar").slideToggle(600);
}
Agora conseguimos concluir a nossa nova funcionalidade!
show
e ocultá-lo com a função hide
.show
e hide
com a função toggle
.slideDown
e slideUp
, respectivamente.slideDown
e slideUp
com a função slideToggle
.Um outra funcionalidade da nossa aplicação que precisa de uma pequena animação é a remoção de linhas do placar. Quando removemos alguma linha do placar, é uma remoção abrupta, a linha desaparece, e não suavemente.
Para melhor experiência do usuário, o ideal seria que a linha fosse esmaecendo aos poucos, até chegar num ponto em que ela desapareça.
A função que é responsável por remover as linhas da tabela é a removeLinha
, dentro do placar.js. Logo, é nela que precisamos alterar a nossa funcionalidade.
O jQuery já possui uma função que vai diminuindo a opacidade de um elemento aos poucos, até o seu total desaparecimento, essa função é a fadeOut
. Então vamos utilizá-la no lugar a função remove
:
function removeLinha() {
event.preventDefault();
$(this).parent().parent().fadeOut();
}
Podemos reparar agora que o elemento vai desaparecendo aos poucos, mas será que ele é removido mesmo? Podemos inspecionar o HTML da tabela, e para nossa surpresa a linha continua lá, o que mudou foi que o seu display
está com valor none
. Ou seja, o fadeOut
vai removendo a opacidade do elemento até um ponto e depois modifica a sua propriedade display
, fazendo com que o elemento desapareça da tela, mas continue no HTML.
Não é exatamente isso que queremos, queremos que o elemento também seja removido do HTML, então vamos chamar a função remove
logo após a função fadeOut
. Para melhorar a semântica do nosso código, vamos também exportar a linha a ser removida para uma variável:
function removeLinha() {
event.preventDefault();
var linha = $(this).parent().parent();
linha.fadeOut();
linha.remove();
}
Podemos testar novamente o nosso código, mas parece que o fadeOut
não está funcionando! Na verdade, ele está acontecendo, só que o JavaScript imediatamente chama a função remove
, não esperando o término do fadeOut
acontecer. O certo é só chamarmos a função remove
após a função fadeOut
* terminar. E nós conseguimos fazer isso!
Primeiro, passamos um tempo em milissegundos por parâmetro para a função fadeOut
, esse será o tempo de execução da função:
function removeLinha() {
event.preventDefault();
var linha = $(this).parent().parent();
linha.fadeOut(1000);
linha.remove();
}
E aguardamos 1 segundo para executar a função remove
. Nós fazemos isso através da função , que recebe dois parâmetros: a função que desejamos executar após determinado tempo, e o próprio tempo que será aguardado para executar a função:
function removeLinha() {
event.preventDefault();
var linha = $(this).parent().parent();
linha.fadeOut(1000);
setTimeout(function() {
linha.remove();
}, 1000);
}
Então temos sempre que ter em mente que devemos remover um elemento após realizar o fadeOut
, já que essa função só faz com que o elemento desapareça da tela, mas ainda fique no HTML da página.
Assim como existem o slideUp
, slideDown
e slideToggle
, existem funções semelhantes que executam o fade, o fadeIn
, fadeOut
e fadeToggle
, respectivamente.
fadeOut
, que vai esmaecendo o elemento até o ponto dele desaparecer, mas ele continua no HTML.O curso jQuery: avance na biblioteca mais popular do mercado parte 2 possui 160 minutos de vídeos, em um total de 62 atividades. Gostou? Conheça nossos outros cursos de jQuery em Front-end, ou leia nossos artigos de Front-end.
Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:
Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.
Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.
Emitimos certificados para atestar que você finalizou nossos cursos e formações.
Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.
Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.
Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.
Emitimos certificados para atestar que você finalizou nossos cursos e formações.
Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.
Acesso completo
durante 1 ano
Estude 24h/dia
onde e quando quiser
Novos cursos
todas as semanas