Fábrica de Software » jQuery: Um simples tutorial para iniciantes

Já ouviu falar de Javascript? É uma linguagem poderosa, que possibilita executar ações em páginas HTML. O código Javascript é executado no navegador web (client-side), e por muito tempo foi subutilizado, mas com a ascensão do front-end, agora é praticamente obrigatório conhecer essa linguagem.

Atualmente temos todo um “ecossistema” para desenvolvimento com javascript, envolvendo diversas ferramentas para facilitar o desenvolvimento, como as bibliotecas. As bibliotecas permitem realizar ações escrevendo menos código, pois a parte chata e repetitiva já vem pronta. Você gasta um tempo pra conhecer a sintaxe da biblioteca, e suas funções, e depois ganha em agilidade na hora de programar. Claro, isso não isenta o desenvolvedor de estudar javascript.

Escreva menos, faça mais

Dentre as bibliotecas Javascript que temos disponíveis na web, uma das mais conhecidas é o jQuery. Lançado em 2006, é utilizada por mais de 65% dos 10 mil sites mais visitados da internet, sendo considerada a biblioteca javascript mais popular entre os desenvolvedores.

E porque tanta gente usa? Pelas facilidades que ela traz, como simplificar a manipulação de elementos DOM, funções para criação de efeitos e animações e um poderoso motor AJAX. Sem contar que é cross-browser e ainda pode ser turbinada com outras funcionalidades através de plugins. Não é a toa que seu slogan é “escreva menos, faça mais“.

Chega de papo

Atenção: a partir deste ponto, é importante que você tenha conhecimentos básicos de Javascript e HTML. Caso não saiba o que é HTML, recomendo que leia este artigo do nosso blog.

Vamos fazer algo simples e prático, apenas para entendermos basicamente como o jQuery funciona. Nosso exemplo será uma caixa no estilo “sanfona”, onde o conteúdo fica oculto e se revela através de um clique.

Primeiro, o HTML

O código será composto de 3 blocos (div’s): Um bloco principal, outro onde ficará o título da caixa (junto com o botão para expandir/ocultar) e o último que irá guardar o conteúdo.

Veja o código HTML comentado:

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3    <head>
4        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5        <title>Exemplo com jQuery</title>
6    </head>
7    <body>
8 
9        <!-- inicio da DIV principal -->
10        <div id="container">
11 
12          <!-- inicio do título -->
13          <div id="titulo">
14            Fábrica de Software
15            <a id="link_abre" href="#">Clique Aqui</a>
16          </div>
17          <!-- fim do título -->
18 
19          <!-- início do conteúdo -->
20          <div id="conteudo">
21            <p>A Fábrica de Software é um projeto inovador no mercado educacional, que busca a inovação e a interação continua entre teoria e prática, subsidiando os alunos na aplicação real dos conceitos aprendidos em sala de aula. Visa ainda simular o ambiente de uma empresa de desenvolvimento de softwares, criando uma ferramenta de gestão para micro e pequenas empresas e preparando mão de obra especializada para o mercado de desenvolvimento de sistemas. </p>
22          </div>
23          <!-- fim do conteúdo -->
24 
25        </div>
26        <!-- fim da DIV principal -->
27 
28    </body>
29</html>

Até aqui temos apenas o código HTML, mas ao abri-lo no navegador já é possível entender qual será a lógica da nossa aplicação.

Incluindo o jQuery

Para poder usar as funcionalidades da biblioteca jQuery, precisamos incorporá-la em nossa página. Você pode disponibilizar o jQuery em seu site de duas formas:

1 – Baixando os arquivos do jQuery no site oficial e armazenando-os junto com o seu site, em seu servidor web.

2 – Fazendo um link para o jQuery armazenado em servidores externos, como no Google. Alguns desenvolvedores acreditam que essa é a melhor prática.

Vamos ficar com a segunda opção; Então insira o link para a versão atual do jQuery dentro das tags <head> (versão 1.10.1 quando este texto foi escrito).

`1`	`<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>`

Agora podemos usar a jQuery em nossa página \o/

Primeiros passos no jQuery

Vamos criar o “motor” da nossa caixa animada. Genericamente falando, usamos o Javascript/jQuery para manipular elementos da nossa página (textos, div’s, links, etc). Por isso, é interessante esperar a página carregar completamente para poder manipular os elementos do HTML. O jQuery possui a função ready(), que informa o status do carregamento da página. Iremos usá-la em nosso script: acrescente o código abaixo após a linha da chamada do jQuery. Lembre-se: Se você colocar antes não vai funcionar, pois estará chamando uma função do jQuery sem ele ter sido carregado.

1<script type="text/javascript">
2 
3// checa se o documento foi carregado
4$(document).ready( );
5 
6</script>

Parece estranho a princípio, mas nossas instruções vão ficar dentro de ready(), já que uma variável em Javascript é capaz de armazenar funções completas.

O jQuery encontra os elementos da página pela sua ID, e isso simplifica absurdamente a manipulação do conteúdo. Outra facilidade é que ele também monitora a atividade do usuário, como cliques, posição do mouse, etc.

Então vamos dar para o link “Clique Aqui” (identificado pela ID “link_abre”) o superpoder de mover toda a DIV que contém o texto. Observe que o texto está dentro de uma div com a ID “conteúdo”.

1<script type="text/javascript">
2 
3            // checa se o documento foi carregado
4            $(document).ready(function () {
5 
6                // define o que acontece quando #link_abre é clicado
7                $("#link_abre").click(function () {
8 
9                });
10            });
11</script>

Aninhamos outra função, desta vez informando ao jQuery que queremos executar uma ação quando #link_abre for clicado.

Faremos o texto aparecer graciosamente através de um efeito. O jQuery traz várias funções de animação, como por exemplo os efeitos de slide. Vamos usar este recurso para fazer o texto deslizar lentamente, aplicando-o à #conteudo (ID da div que está guardando o texto pra nós). A função slideToggle() faz isso pra gente, permitindo inclusive definir a velocidade da animação. Iremos deixar como “slow”. Para ver outras possibilidades, consulte a documentação do jQuery.

1<script type="text/javascript">
2 
3    // checa se o documento foi carregado
4    $(document).ready(function () {
5 
6        // define o que acontece quando #link_abre é clicado
7        $("#link_abre").click(function () {
8            // aplica a ação de slide à conteúdo, na velocidade "slow"
9            $("#conteudo").slideToggle("slow");
10        });
11 
12    });
13</script>

Pronto! Já temos nosso box com texto ocultável. Se você testou o script até aqui, percebeu que a página carrega com o texto do conteúdo já aparecendo, o que acaba com a surpresa. Você pode ocultar a div #conteudo com CSS (acrescentando o atributo style=”display: none;” na tag). Ou você pode falar para o próprio jQuery esconder essa div, com a função hide().

1<script type="text/javascript">
2 
3          // checa se o documento foi carregado
4          $(document).ready(function () {
5 
6              // oculta a div conteudo
7              $("#conteudo").hide();
8 
9              // define o que acontece quando #link_abre é clicado
10              $("#link_abre").click(function () {
11                  // aplica a ação de slide à conteúdo, na velocidade "slow"
12                  $("#conteudo").slideToggle("slow");
13              });
14          });
15      </script>

Toque final com CSS

Pra finalizar, usaremos CSS pra melhorar o visual do nosso box. Não vou explicar o CSS, pois não é o objetivo deste post. Abaixo o código completo da página com o exemplo.

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3    <head>
4        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5        <title>Exemplo com jQuery</title>
6        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
7        <script type="text/javascript">
8             
9            // checa se o documento foi carregado
10            $(document).ready(function () {
11             
12                // oculta a div #conteudo
13                $("#conteudo").hide();
14                 
15                // define o que acontece quando #link_abre é clicado
16                $("#link_abre").click(function () {
17                    // aplica a ação de slide à conteúdo, na velocidade "slow"
18                    $("#conteudo").slideToggle("slow");
19                });
20                 
21            });
22        </script>
23        <style>
24        body
25        {
26            font-family:Verdana, Geneva, sans-serif;
27            margin: 10px;
28        }
29         
30        #container 
31        { 
32        width: 450px;
33        padding: 20px;
34        background-color:#FC3;
35        }
36         
37        #titulo 
38        { 
39        padding: 10px;
40        background-color:#FFF;
41        font-weight:bold;
42        font-size:large;
43        }
44         
45        #link_abre
46        { 
47        font-weight:normal;
48        font-size:smaller;
49        }
50         
51        a:link, a:visited 
52        {           
53            color: #000;
54            border:#FF9900 1px solid;
55            margin-left: 60px;
56            padding: 10px;
57            background-color:#FF9;
58            text-decoration: none;
59        }
60         
61        a:hover {
62            color: #FFF;
63            border:#FF9900 1px solid;
64            margin-left: 60px;
65            padding: 10px;
66            background-color:#000;
67            text-decoration: none;
68        }
69 
70        </style>
71 
72    </head>
73    <body>
74         
75        <!-- inicio da DIV principal -->
76        <div id="container">
77           
78          <!-- inicio do título -->
79          <div id="titulo">
80            Fábrica de Software
81            <a id="link_abre" href="#">Clique Aqui</a>
82          </div>
83 
84          <!-- fim do título -->
85           
86          <!-- início do conteúdo -->
87          <div id="conteudo">
88            <p>A Fábrica de Software é um projeto inovador no mercado educacional, que busca a inovação e a interação continua entre teoria e prática, subsidiando os alunos na aplicação real dos conceitos aprendidos em sala de aula. Visa ainda simular o ambiente de uma empresa de desenvolvimento de softwares, criando uma ferramenta de gestão para micro e pequenas empresas e preparando mão de obra especializada para o mercado de desenvolvimento de sistemas. </p>
89          </div>
90          <!-- fim do conteúdo -->
91         
92        </div>
93        <!-- fim da DIV principal -->
94       
95    </body>
96</html>

Por hoje é só…

Espero que tenham gostado, e conseguido dar o primeiro passo com jQuery. No site oficial você encontra muitos tutoriais e toda a documentação da biblioteca. Vale a pena dar uma olhada!

Até a próxima =)

jQuery: Um simples tutorial para iniciantes

Temos 4 comentários \o/

Responda para Lucas Marçal

Leia também:

Temos 4 comentários \o/

Responda para Lucas Marçal