Arquivos da categoria: Javascript

Tutorial básico de JQuery

O JQuery é uma biblioteca Javascript que simplifica extremamente a utilização de ajax, animações, tratamento de eventos e manipulação de elementos html em sites. A forma como se utiliza JQuery é um pouco diferente do que estamos acostumados no Javascript, mas essa mudança trouxe uma simplicidade incrível e compensa qualquer esforço necessário em seu aprendizado.

Uma instrução JQuery é composta por um seletor e um conjunto de operações a serem executadas nos elementos encontrados baseando-se no seletor. O seletor segue uma sintaxe muito parecida com a do CSS, acrescentando a esta alguns recursos. As operações disponíveis são tão variadas que é difícil conhecer todas, alguns exemplos são: acrescentar classe, alterar valor de atributo, replicar elemento, esvaziar conteúdo de um elemento, remover elementos da página, aplicar animações (como fade in e fade out), fazer requisições ajax, etc, etc, etc… Uma lista completa da API pode ser encontrada na documentação do JQuery. O trecho de código abaixo não é funcional, tem como objetivo apenas ilustrar as explicações dadas.

$( SELETOR ).operacao();

A palavra SELETOR está representando uma expressão utilizada para encontrar o conjunto de elementos da página que receberão a operação em questão. Ainda ilustrativamente, é comum o uso abaixo, quando são utilizadas diversas operações em um mesmo conjunto de elementos selecionados.

$( SELETOR ).operacao1().operacao2().operacao3();

Antes de colocar as mão na massa é necessário importar o arquivo do JQuery colocando o seguinte código no elemento head da sua página:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

Nosso primeiro exemplo não é muito interessante, mas explicará uma prática necessária na maioria dos códigos JQuery, e, como não poderia deixar de ser, será o famoso “Hello World”.

$(document).ready( function() {
    window.alert("Ola Mundo!");
});

Você deve estar se perguntando que raios de Hello World complicado é esse e lhe dou razão, mas logo logo ficará mais claro. O que anteriormente chamei de seletor é sempre passado como parametro da função $, nesse caso estamos passando ‘document’, ou seja o elemento selecionado é o documento html. A operação utilizada é a ‘ready’, que serve para definir uma função a ser executada quando o documento está pronto (acabou de ser carregado, processado e exibido pelo navegador). Então, passamos como parametro da operação ‘ready’ uma função que exibirá uma janela alert. Os códigos JQuery a serem executados quando a página for carregada devem estar sempre dentro dessa função no código anterior, ou seja:

$(document).ready( function() {
    // Código a ser executado na carga da página aqui!
});

Agora estamos prontos para exemplos mais interessantes! No próximo exemplo colocaremos uma tabela com as cores de fundo das linhas alternadas, nos basearemos no seguinte trecho de código html:

<table id="listrada">
    <tr><td>Nome:</td><td>Joãozinho</td><\tr>
    <tr><td>Idade:</td><td>10</td><\tr>
    <tr><td>Sexo:</td><td>Masculino</td><\tr>
    <tr><td>Pai:</td><td>Desconhecido</td><\tr>
    <tr><td>Mae:</td><td>Maria</td><\tr>
</table>

A lógica que utilizaremos é selecionar primeiro os filhos do elemento identificado por ‘listrada’ que estejam nas posições pares e definir uma cor de fundo azul para eles:

$("#listrada>*:even").css("background-color", "#0000FF");

Em seguida selecionamos os filhos do elemento identificado por ‘listrada’ que estejam nas posições impares e definimos uma cor de fundo verde para os mesmos:

$("#listrada>*:odd").css("background-color", "#00FF00");

Como não podemos esquecer do nosso primeiro exemplo, a versão final do código para a tabela listrada fica assim:

$(document).ready( function() {
    $("#listrada>*:even").css("background-color", "#0000FF");
    $("#listrada>*:odd").css("background-color", "#00FF00");
});

Se preferirmos não colocar estilo diretamente no Javascript, podemos definir estilos no css para as linhas usando classes e alterar o nosso código da seguinte maneira:

$(document).ready( function() {
    $("#listrada>*:even").addClass("linhaAzul");
    $("#listrada>*:odd").addClass("linhaVerde");
});

O próximo exemplo aprofunda as explicações sobre manipulação de eventos dos elementos. Colocaremos em todos os links de uma página qualquer uma janela alert sendo exibida ao usuário quando o mesmo clica sobre o link.

$(document).ready( function() {
    $("a").click( function() {
        window.alert("Atenção: você está saindo do site rodrigoaguas.com.");
    });
});

O seletor desse exemplo é bem simples, pesquisa por qualquer elemento A do documento html. Então, adiciona aos eventos onclick de todos os elementos selecionados uma chamada para a função que exibe a janela alert. Agora vamos melhorar o nosso código para impedir que a ação padrão do evento seja executada, para isso acrescentaremos um parametro à nossa função para receber um objeto que representa o evento.

$(document).ready( function() {
    $("a").click( function(evento) {
        window.alert("Atenção: você está tentando sair do site rodrigoaguas.com, mas não vai conseguir.");
        evento.preventDefault();
    });
});

Depois de ser impedido de sair do site, queremos que o nosso usuário fique impedido de clicar novamente no link, para isso faremos uma animação de Fade Out no link clicado e ele deixará de ser exibido. Precisaremos utilizar o seletor ‘this’ que representa o elemento onde o evento foi disparado.

$(document).ready( function() {
    $("a").click( function(evento) {
        window.alert("Atenção: você está tentando sair do site rodrigoaguas.com, mas não vai conseguir.");
        $(this).fadeOut();
        evento.preventDefault();
    });
});

Nesse tutorial foram tratados os aspectos básicos do JQuery como importação do arquivo da biblioteca, seletores, alteração de estilo, acrescentar classes, manipulação de eventos e animações. Tratarei de Ajax posteriormente em outro tutorial. Abraços!

Excluídos do Google Analytics

untitled-2.jpgHá tempos atrás, eu e um amigo estavamos voltando da faculdade e ele me perguntou com ar irônico: “Por que o Google Analytics não diz se os usuários tinham Javascript habilitado?”. Sem pensar muito, respondi que não sabia e ele riu. Explicando: o Google Analytics usa o Javascript para ser invocado, não é possível um visitante ser “detectado” por ele sem ter o Javascript habilitado. Depois me pareceu óbvio, mas nunca havia pensado nisso.

Falando um pouco sobre o Google Analytics para os que não conhecem. Ele é um serviço gratuito oferecido, obviamente, pela Google que permite ter diversas informações e relatórios sobre os visitantes do seu site. Essas informações incluem desde a quantidade de visitas diárias até a resolução de tela ou qual versão do Java (Java mesmo, não Javascript! hehe) estava instalado na máquina dos seus leitores. Para a grande maioria acredito até que tanta informação seja inútil, pois muitos daqueles dados não influenciarão em nada no dia-a-dia do site.

Mas voltando ao javascript e Google Analytics, pensei em mais consequências dessa “exclusão virtual” e identifiquei algumas. Se o Analytics precisa do Javascript, é fácil perceber que qualquer acesso a conteúdos estáticos no seu servidor não estará nas estatísticas. Tudo bem, não faz sentido querer saber quantas pessoas acessaram o arquivo de CSS de um site, mas se o site disponibiliza arquivos para download, há muito interesse em saber quantas pessoas estão baixando tais arquivos. Outro problema que eu percebi seria nos acessos aos feeds RSS do site que, cada vez mais populares, não seriam contabilizados pois são arquivos xml.

Não imagino nenhuma solução que resolva o problema continuando a usar o Google Analytics, só pensei em soluções alternativas usando Content-Type e um sistema próprio para coletar os dados e criar as estatísticas. Mas deixarei esse assunto para um artigo futuro.

Será que é possível resolver o problema usando ainda o Google Analytics? Se você tiver alguma idéia, compartilhe nos comentários. Abraços!

Ajax: computador tagarela

Após um feriadão inteiro pensando sobre o que escreveria neste post, achei interessante aproveitar o assunto que (sem maiores interesses) abordei no post anterior para falar sobre Ajax.

Uns a chamam de linguagem de programação, outros defendem que não há nenhuma tecnologia especial envolvida, apenas uma nova maneira de pensar. Muitos concordam que é uma coisa que surgiu com a Web 2.0 (ou alguma coisa que não significa nada). O que você acha? Tentarei esclarecer aqui todas as dúvidas que surgem freqüentemente sobre esse assunto. Vamos lá!

A grande maioria dos desenvolvedores Web já ouviu falar em Ajax e também que Ajax significa Asynchronous JavaScript and XML, mas muitos não entenderam o que isso significa e desistiram. Depois de entender o funcionamento da Web, percebemos que um site quando é acessado (ou carregado) dá origem a uma série de requisições por parte do cliente ao servidor, que lhe enviará todo o conteúdo da página (incluindo imagens, flashs e etc). O importante nesse momento é reparar que essas requisições são feitas imediatamente depois que o usuário aperta a tecla ENTER quando digita um endereço ou clica em um link.

O aspecto assíncrono do Ajax está exatamente em fazer requisições ao servidor FORA do momento em que a página está sendo carregada. Sendo chamado por eventos Javascript (on click, por exemplo) o Ajax faz requisições ao servidor e recebe dados em formato XML a serem posteriormente tratados, manipulados e inseridos na página utilizando-se Javascript e DOM. Daí o nome Asynchronous JavaScript and XML. Esse processo pode se repetir infinitas vezes sem que a página tenha que ser novamente carregada para ter seu conteúdo alterado. Com isso o site ganha um dinamismo extra, melhorando sua usabilidade.

Mas cuidado! Não exagere no uso do Ajax em seu site ou poderá criar problemas aos seus visitantes. Páginas com informações acessadas por Ajax não tem um endereço direto para ser utilizado pelos usuários, por exemplo para adicionar seu site ao Favoritos do browser dele. Então devemos avaliar quando é o momento correto para fazermos uso dessa ferramenta tão poderosa, mas que como tudo na vida tem as suas conseqüências.

Nesse ponto já conversamos o suficiente para você perceber que realmente Ajax não se trata de uma linguagem de programação, mas sim de uma forma de integrar Javascript e XML em seus projetos. O maior responsável pela popularização desse tipo de utilização foi realmente o Google, trazendo junto à sua série de serviços altamente dinâmicos e inovadores.

Exemplos do uso de Ajax:

Até aqui ficamos só na teoria, então prometo o desenvolvimento de um exemplo Ajax para os próximos posts. Conhecem outros bons exemplos do uso de Ajax? Querem criticar algo? Então comente! Abraços!