UXDE dot Net Wordpress Themes

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.

jquery

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.

Exemplo jQuery

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.

divs

Veja o código HTML comentado:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Exemplo com jQuery</title>
    </head>
    <body>

        <!-- inicio da DIV principal -->
        <div id="container">

          <!-- inicio do título -->
          <div id="titulo">
          	Fábrica de Software
            <a id="link_abre" href="#">Clique Aqui</a>
          </div>
          <!-- fim do título -->

          <!-- início do conteúdo -->
          <div id="conteudo">
          	<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>
          </div>
          <!-- fim do conteúdo -->

        </div>
        <!-- fim da DIV principal -->

    </body>
</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.

html

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).

<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.

<script type="text/javascript">

// checa se o documento foi carregado
$(document).ready( );

</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”.

<script type="text/javascript">

			// checa se o documento foi carregado
			$(document).ready(function () {

				// define o que acontece quando #link_abre é clicado
				$("#link_abre").click(function () {

				});
			});
</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.

         <script type="text/javascript">

			// checa se o documento foi carregado
			$(document).ready(function () {

				// define o que acontece quando #link_abre é clicado
				$("#link_abre").click(function () {
					// aplica a ação de slide à conteúdo, na velocidade "slow"
					$("#conteudo").slideToggle("slow");
				});

			});
        </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().

  <script type="text/javascript">

			// checa se o documento foi carregado
			$(document).ready(function () {

				// oculta a div conteudo
				$("#conteudo").hide();

				// define o que acontece quando #link_abre é clicado
				$("#link_abre").click(function () {
					// aplica a ação de slide à conteúdo, na velocidade "slow"
					$("#conteudo").slideToggle("slow");
				});
			});
        </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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Exemplo com jQuery</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script type="text/javascript">
			
			// checa se o documento foi carregado
			$(document).ready(function () {
			
				// oculta a div #conteudo
				$("#conteudo").hide();
				
				// define o que acontece quando #link_abre é clicado
				$("#link_abre").click(function () {
					// aplica a ação de slide à conteúdo, na velocidade "slow"
					$("#conteudo").slideToggle("slow");
				});
				
			});
        </script>
        <style>
		body
		{
			font-family:Verdana, Geneva, sans-serif;
			margin: 10px;
		}
		
		#container 
		{ 
		width: 450px;
		padding: 20px;
		background-color:#FC3;
		}
		
		#titulo 
		{ 
		padding: 10px;
		background-color:#FFF;
		font-weight:bold;
		font-size:large;
		}
		
		#link_abre
		{ 
		font-weight:normal;
		font-size:smaller;
		}
		
		a:link, a:visited 
		{			
			color: #000;
			border:#FF9900 1px solid;
			margin-left: 60px;
			padding: 10px;
			background-color:#FF9;
			text-decoration: none;
		}
		
		a:hover {
			color: #FFF;
			border:#FF9900 1px solid;
			margin-left: 60px;
			padding: 10px;
			background-color:#000;
			text-decoration: none;
		}

		</style>

    </head>
    <body>
    	
        <!-- inicio da DIV principal -->
        <div id="container">
          
          <!-- inicio do título -->
          <div id="titulo">
          	Fábrica de Software
            <a id="link_abre" href="#">Clique Aqui</a>
          </div>

          <!-- fim do título -->
          
          <!-- início do conteúdo -->
          <div id="conteudo">
          	<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>
          </div>
          <!-- fim do conteúdo -->
        
        </div>
        <!-- fim da DIV principal -->
      
    </body>
</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 =)

Comente!

Atenção: É obrigatório o preenchimento dos campos nome e e-mail!