Demonstração do Jquery.

Demo 1 de jQuery
Para começar veremos este exemplo, onde temos dois botões e um texto. Ao clicar um botão,
mudaremos o texto e ao clicar o outro colocaremos outro texto distinto.
Podemos ver o exemplo em funcionamento em uma página à parte.
Neste exemplo, temos uma camada que tem este código:
<div id="camada" style="padding: 10px; background-color: #ff8800">Clique em um botão</div>
Logo, temos dois botões com estes códigos:
<input type="button" value="Botão A" onclick="$('#camada').html('Clicou no botão <b>A</b>')">
<input type="button" value="Botão B" onclick="$('#camada').html('Recebido um clique no botão <b>B</b>')">
Como se pode ver, nos botões há definido um par de eventos onclick (um em cada um) que
executam uma instrução Javascript quando se clica sobre eles. A instrução está em Javascript,
porém faz uso de algumas ferramentas disponíveis em jQuery para trabalho com os elementos
da página. Neste caso, explicando rapidamente, se faz uma seleção do elemento DIV da
camada e logo se executa um método sobre ele para mudar o conteúdo HTML do elemento.
Demo 2 de jQuery
Neste outro exemplo, veremos algo um pouquinho mais complexo. Bom, realmente não tem
maior complexidade, porém estamos utilizando jQuery de uma maneira um pouco distinta, que
requer algo mais de código por nossa parte. Agora vamos ter duas camadas em nossa página.
Uma camada estará sempre visível e a outra camada aparecerá inicialmente oculta e vamos
mostrá-la ou ocultá-la dependendo de se o usuário coloca o mouse em cima da camada que
está sempre visível.
Para se ter uma idéia exata de nosso exemplo se pode ver em uma janela à parte.
Neste segundo exemplo, temos este código HTML, com as duas camadas.
<div id="camada" style="padding: 10px; background-color: #ff8800;">Coloque o mouse em cima desta
camada</div>
<br>
<div id="mensagem" style="display: none;">Colocou o mouse em cima!! <br>(Agora tire-o da camada)</div>

Agora vamos ter um código Javascript com jQuery que defina os eventos do usuário, para
quando situa o mouse dentro ou fora da primeira camada.
$("#camada").mouseenter(function(evento){
$("#mensagem").css("display", "block");
});
$("#capa").mouseleave(function(evento){
$("#mensagem").css("display", "none");
});
Desta simples maneira, criamos dois eventos no DIV com id="camada". Ademais, definimos o
código dos eventos por meio de funções, que se encarregarão de mostrar ou ocultar a segunda
camada com id="mensagem".
$("#mensagem").css("display", "block");
Isto nos seleciona a camada com id "mensagem" e com o método css() indicamos que
queremos mudar o atributo "display" ao valor "block" desse elemento.
$("#mensagem").css("display", "none");
Esta outra linha muito similar, simplesmente muda o "display" a "none" para ocultar o
elemento.
Esperamos que estes dois exemplos sirva para ver rapidamente algumas coisas que se podem
fazer com jQuery com muito pouco esforço e que funcionam em todos os navegadores.

Vantagens de jQuery com respeito a outras alternativas

É importante comentar que jQuery não é o único framework que existe no mercado. Existem
várias soluções similares que também funcionam muito bem, que basicamente nos servem
para fazer o mesmo. Como é normal, cada um dos frameworks tem suas vantagens e
desvantagens, porém jQuery é um produto com uma aceitação por parte dos programadores
muito boa e um grau de penetração no mercado muito amplo, o que faz supor que é uma das
melhores opções. Ademais, é um produto sério, estável, bem documentado e com uma grande
equipe de desenvolvedores encarregados da melhora e atualização do framework. Outra coisa
muito interessante é a dilatada comunidade de criadores de plugins ou componentes, o que
torna fácil encontrar soluções já criadas em jQuery para implementar assuntos como interfaces
de usuário, galerias, votações, efeitos diversos, etc.
Um dos competidores de jQuery, do qual já publicamos em CriarWeb.com um amplo manual
para programadores, é Mootools, que também possui vantagens similares. Este é o link ao
Manual de Mootools, que também pode ser interessante, porque certamente temos explicado
com mais detalhes que jQuery.
jQuery, é para mim?
Se estiver interessado em enriquecer sua página web com componentes da chamada Web 2.0,
como efeitos dinâmicos, Ajax, interação, interfaces de usuário avançadas, etc., jQuery é uma
ferramenta imprescindível para desenvolver todas estas coisas sem ter que se complicar com
os níveis mais baixos do desenvolvimento, já que muitas funcionalidades já estão
implementadas, ou ainda as bibliotecas do framework lhe permitirão realizar a programação
muito mais rápida e livre de erros.
Agora também, todas estas melhorias da web 2.0, que à princípio pode ser muito atrativas,
também tem têm um custo em tempo de desenvolvimento dos projetos. Sem um framework
como jQuery, o tempo de criação e depuração de todos esses componentes dinâmicos seria
muito maior, porém ainda assim ninguém diz que seja somente instalar o sistema e iniciar.
Entretanto, o mais complicado de jQuery é aprender a usá-lo, igual ao que ocorre com
qualquer outro framework Javascript. Requererá do desenvolvedor habilidades avançadas de
programação, assim como o conhecimento, ao menos básico, da programação orientada a
objetos. Uma vez aprendido as vantagens de utilizá-lo compensarão mais que de sobra o
esforço. Esperamos que com este Manual de jQuery, que estamos publicando em
CriarWeb.com possa aprender o necessário para desenvolver seus próprios componentes
dinâmicos em Javascript com os que enriquecer suas aplicações.
Podemos conhecer jQuery acessando à página de início do framework Javascript:
http://jquery.com/

O que é jQuery

Para simplificar, poderíamos dizer que jQuery é um framework Javascript, porém talvez muitos
dos leitores se perguntarão o que é um framework. Pois é um produto que serve como base
para a programação avançada de aplicações, que oferece uma série de funções ou códigos
para realizar tarefas habituais. Em outras palavras, framework são umas bibliotecas de código
que contém processos ou rotinas já prontas para usar. Os programadores utilizam os
frameworks para que eles mesmos não tenham que desenvolver as tarefas mais básicas, visto
que no próprio framework já há implementações que estão provadas, funcionam e não se
necessitam voltar a programar. Por exemplo, no caso que nos ocupa, jQuery é um framework para a linguagem Javascript,
logo será um produto que nos simplificará a vida para programar nesta linguagem. Como
provavelmente saberemos, quando um desenvolvedor tem que utilizar Javascript, geralmente
tem que se preocupar por fazer scripts compatíveis com vários navegadores e para isso tem
que incorporar muito código que o único que faz é detectar o browser do usuário, para fazer
uma coisa ou outra dependendo de se é Internet Explorer, Firefox, Opera, etc. jQuery é onde
mais nos pode ajudar, visto que implementa uma série de classes (de programação orientada a
objetos) que nos permitem programar sem nos preocuparmos do navegador com o qual nos
está visitando o usuário, já que funcionam de exata forma em todas as plataformas mais
habituais.
Sendo assim, este framework Javascript, nos oferece uma infra-estrutura com a qual teremos
muito maior facilidade para a criação de aplicações complexas do lado do cliente. Por exemplo,
com jQuery obteremos ajuda na criação de interfaces de usuário, efeitos dinâmicos, aplicações
que fazem uso de Ajax, etc. Quando programemos Javascript com jQuery teremos a nossa
disposição uma interface para programação que nos permitirá fazer coisas com o navegador
que estamos certos de que funcionarão para todos nossos visitantes. Simplesmente devemos
conhecer as bibliotecas do framework e programar utilizando as classes, suas propriedades e
métodos para a execução de nossos objetivos.
Ademais, todas estas vantagens que sem dúvida são muito de agradecer, com jQuery as
obtemos de maneira gratuita, já que o framework tem licença para uso em qualquer tipo de
plataforma, pessoal ou comercial. Para isso, simplesmente teremos que incluir em nossas
páginas um script Javascript que contém o código de jQuery, que podemos baixar da própria
página web do produto e começar a utilizar o framework.
O arquivo do framework ocupa uns 56 KB, o que é bastante razoável e não atrasará o
download de nossa página (se nosso servidor envia os dados comprimidos, o que é bastante
normal, o peso de jQuery será de uns 19 KB). Além disso, nosso servidor o enviará ao cliente a
primeira vez que visite uma página do site. Nas seguintes páginas o cliente já terá o arquivo
do framework, por isso não necessitará transferi-lo e o tomará do cache. Côo o qual o
carregamento da página só se verá afetada pelo peso deste framework uma vez por usuário.

As vantagens na hora de desenvolvimento das aplicações, assim como as portas que nos abre
jQuery compensam extraordinariamente o peso do pacote.

Funções e variáveis dentro de plugins jQuery

Como em qualquer linguagem de programação, podemos utilizar funções para estruturar o código de nossos plugins. Do mesmo modo, nos plugins podemos ter variáveis, onde salvar dados ou objetos que tenham validade dentro do âmbito desse plugin. Tudo isso nos ajudará bastante a fazer um código mais claro,autônomo e compacto.

Neste artigo vamos mostrar como seria o esquema de programação de um plugin jQuery um pouco mais avançado, que inclui as mencionadas variáveis e funções "locais" (ou "privadas", como quisermos chamá-las). Veremos também como é possível acessar essas variáveis e funções desde qualquer parte do fluxo de código de um plugin, inclusive desde o código de outras funções, como os eventos.

Esquema de programação de um plugin

A seguir vamos mostrar o esquema de código de um plugin que inclui funções e variáveis. Este plugin não serve para nada, é apenas um teste que estou realizando para ver como posso criar essas variáveis, acessá-las e comprovar seu âmbito em distintos pontos do código do plugin.

jQuery.fn.meuPlugin = function() {
  
   //variáveis que são comuns a todos os elementos
   //que havia no objeto jQuery que recebe o método do plugin
   minhavariavelComum = "comum";
   alert("Nova invocação de plugin. Minha variável comum: " + minhavariavelComum)
  
   this.each(function(){
      //CÓDIGO DO PLUGIN
     
      //Elemento sobre o que itero e estou aplicando o plugin
      elem = $(this);     
      //elem é uma variavel que poderemos utilizar em todo o plugin

      //variáveis específicas para cada elemento
      var minhaVariavel = "x";
      //minhaVariavel poderá ser acessada dentro de todo o código que coloquemos aqui
     
      //funcao que será acessível desde qualquer parte do plugin
      function minhaFuncao(){
         //posso acessar variaveis do plugin
         minhaVariavel = elem.text();
        
         //Mostro o conteudo da variavel
         alert("minha variavel local e particular de cada plugin: " + minhaVariavel);
        
         //troco a variavel comum a todos os elementos deste plugin
         minhavariavelComum = "Outra coisa comum!"
      }
     
      //posso invocar as funcoes do plugin
      minhaFuncao();
     
      //evento, que tem uma funcao. Posso acessar variaveis e funcoes do plugin
      elem.click(function(){
         //posso acessar variaveis do plugin
         alert("Dentro do evento: " + minhaVariavel);
        
         //posso acessar funcoes
         minhaFuncao();
      });
     
   });
};

Para definir essas variáveis e funções locais ao plugin, de maneira que estejam acessíveis dentro do plugin e por sua vez tenham acesso a todos os dados do mesmo, devemos colocá-las dentro da iteração que se faz com this.each().

Como se pode entender do código do plugin anterior, todas essas variáveis e funções podem ser invocadas ou acessadas em qualquer parte, desde que estejamos dentro do this.each(), onde foram criadas.

Nota: Antes do this.each()também se podem colocar variáveis, mas há que ter em conta que existirá uma mesma cópia dessa variável para todos os elementos onde se está aplicando o plugin.Vejamos o seguinte HTML.
<div id="esteDiv">
   Este div
</div>
<span class="meusspan">span1</span>
<span class="meusspan">span2</span>
<span class="meusspan">span3</span>
Agora vejamos estas duas chamadas ao plugin anterior.
$("#esteDiv").meuPlugin();
$(".meusspan").mePlugin();
Como se pode ver, com a primeira chamada se executa o plugin sobre um elemento da página com id="esteDiv". É um único elemento da página, portanto o plugin só se aplica uma vez. No entanto, na segunda chamada, se executa o plugin sobre vários elementos com a class de CSS "meusspan". Neste segundo caso o plugin se executará sobre três elementos e então poderemos comprovar que as variáveis que se haviam definido fora do this.each() só existem uma vez e seu valor é comum para os três elementos sobre os que se aplicou o plugin na segunda chamada.

Certamente, talvez, tudo isto fique um pouco confuso, ou não se entenda muito bem para que podemos querer todas essas variáveis e funções locais ao plugin. Porém, à medida que vamos trabalhando e propondo-nos plugins mais complicados, veremos que são de muita utilidade para armazenar dados que queremos acessar mais tarde, ou para organizar o código de nosso plugin em diferentes funções, que podem ser chamadas repetidas vezes e desde vários lugares.

Para aqueles que conhecem um pouco de programação orientada a objetos, talvez lhes esclareça um pouco este similar: Se um plugin fosse como um objeto, as variáveis de dentro do bloco this.each() dos plugins seriam como as propriedades desse objeto e as funções seriam como métodos desse objeto. Embora tenha que se manter a distância, porque um plugin não segue exatamente o modelo que conhecemos nas classes de programação orientada a objetos.

Criando abas de navegação com jQuery - parte 3

Parte 3 do tutorial de criação de abas usando jQuery. Nesta pequena série de aulas irei ensinar para vocês como criar um sistema de navegação em abas usando jQuery e CSS. Tudo muito simples e de fácil entendimento para que todos possam acompanhar o assunto

Criando abas de navegação com jQuery - parte 2

Parte 2 do tutorial de criação de abas usando jQuery. Nesta pequena série de aulas irei ensinar para vocês como criar um sistema de navegação em abas usando jQuery e CSS. Tudo muito simples e de fácil entendimento para que todos possam acompanhar o assunto

Criando abas de navegação com jQuery - parte 1

Nesta pequena série de aulas irei ensinar para vocês como criar um sistema de navegação em abas 
usando jQuery e CSS. Tudo muito simples e de fácil entendimento para que todos possam acompanhar
o assunto. Dividi as aulas em 3 partes para ficar mais prático e objetivo. Depois de assistir não deixe de
praticar o que foi ensinado e deixar seu comentário contando o que achou das aulas.

Tratamento de resultados de query SELECT

Ao executar uma query SQL SELECT através do comando mysql_query, o identificador do
resultado deve ser armazenado numa variável que pode ser tratada de diversas formas. Duas maneiras interessantes de
fazê-lo usam o comando mysql_result e o comando mysql_fetch_row, respectivamente.
O comando mysql_result tem a seguinte sintaxe:
int mysql_result(int resultado, int linha, mixed [campo]);
Onde resultado é o identificador do resultado, obtido com o retorno da função mysql_query,
linha especifica a tupla a ser exibida, já que uma query SELECT pode retornar diversas tuplas, e campo é o identificador
do campo a ser exibido, sendo o tipo descrito como mixed pela possibilidade de ser de diversos tipos (neste caso, inteiro
ou string). Vejamos um exemplo utilizando a tabela criada anteriormente:
$consulta = “SELECT nome, email FROM exemplo WHERE email LIKE
‘vivas’”;
$resultado = mysql_query($consulta, $conexao);
printf("Nome: ", mysql_result($resultado,0,"nome"), “<br>\n”);
printf("e-mail: ", mysql_result($resultado,0,"email"),“<br>”);
Com o exemplo acima, o resultado será:
Nome: Mauricio Vivas<br>
e-mail: vivas@usa.net<br>
É importante notar que a utilização desta função é um pouco trabalhosa, já que no caso de um resultado
com várias linhas é preciso controlar o número de linhas para tratá-las (pode-se utilizar a função
mysql_num_rows(int resultado), que retorna o número de linhas de um resultado), e no caso de uma
alteração no nome do campo é preciso alterar também a maneira de tratá-lo. Por isso é mais aconselhável que se use uma
outra função, como por exemplo mysql_fetch_row, que possui a seguinte sintaxe:
array mysql_fetch_row(int result);
A variável resultado é o identificador da memória de resultados, obtido como retorno da função
mysql_query. O resultado produzido por esta função é de retirar a primeira linha da memória de resultados, se
houver, e colocá-la num array. Assim torna-se mais fácil tratar um resultado com várias linhas, e sem utilizar os nomes dos
campos na rotina de tratamento do resultado:

$consulta = “SELECT nome, email FROM exemplo”;
$resultado = mysql_query($consulta, $conexao);
echo "<table border=1>\n";
echo "<tr><td>Nome</td><td>e-mail</tr>\n";
while ($linha = mysql_fetch_row($resultado)) {
printf("<tr><td>$linha[0]</td>”);
printf("<td>$linha[1]</td></tr>”);
}
echo "</table>\n";
O código acima irá imprimir todos os registros da tabela exemplo numa tabela html. Se o programador
desejar “pular” alguma(s) linha(s) do resultado, poderá utilizar a função mysql_data_seek, que tem por objetivo
definir qual será a próxima linha da memória de resultados a ser impressa. Sua sintaxe é:
int mysql_data_seek(int resultado, int linha);
Sendo resultado o identificador do resultado e linha o numero da linha. Retorna 0 em caso de
falha, e um valor diferente de zero em caso de sucesso.
Existem diversas outras funções para o tratamento de resultados, que armazenam as linhas em arrays e
objetos, assim como outras funções para administrar o banco de dados, mas como este documento trata-se de uma
introdução, inicialmente não tratará tópicos mais avançados.