Introdução
Hoje falarei um pouco mais sobre o jQuery tecnologia emergente que facilita a utilização de Ajax em páginas Web.
jQuery é um framework para ajudar os desenvolvedores a se concentrarem na lógica dos sistemas da web e não nos problemas de incompatibilidade dos navegadores atuais.
Seu lema é escrever menos e fazer mais.
Ele possui plugins adicionais que vão desde efeitos visuais na página da web até controle de dados via ajax.
Uma função escrita em Javascript puro tem uma diminuição nótavel quando reescrita com este framework.
Principais funcionalidades
- Resolução da incompatibilidade entre os navegadores.
- Redução de código.
- Reusabilidade do código através de plug-ins.
- Utilização de uma vasta quantidade de plugins criados por outros desenvolvedores.
- Trabalha com AJAX e DOM.
- Implementação segura de recursos do CSS1, CSS2 e CSS3.
Sua aplicação eficiente consiste em separar as funções do javascript da marcação XHMTL através um arquivo externo aplicando as funções no id, classe ou tag do elemento desejado.
Abaixo listarei alguns exemplos de sua utilização:
Exemplo 1:
Aplicação incorreta:
<a onclick="funcao()" href="#">Enviar</a>
Observe que a função javascript foi inserida no evento “onclick” diretamente no XHTML, esta prática não é recomendada pois mistura funções com a marcação XHTML dificultando assim futuras manutenções e atualizações.
Aplicação correta:
XHTML:
<a href="pagina.html" class="enviar">Enviar</a>
Arquivo JavaScript externo:
$('a.enviar').click(function(){
alert('Voce clicou no link a com a classe "enviar"');
});
Exemplo 2:
Aplicação incorreta:
<script language="javascript">
var data = new Date();
if(data.getHours() < 12)
document.write('Bom dia !');
else
document.write('Boa Tarde!');
</script>
Aplicação correta:
XHTML:
<p title="Mensagem">Bom dia!</p>
Arquivo JavaScript externo:
var data = new Date();
if(data.getHours() >= 12)
{
var saudacao = $('p[title="Mensagem"]');
saudacao.text('Bom dia!');
}
else
{
saudacao.text('Boa Tarde!');
}
Exemplo 3:
Marcação terrível:
<table>
<tr>
<td onclick="funcao();">Primeira Opção</td>
<td>Descrição da primeira opção.</td>
</tr>
<tr>
<td onclick="funcao();">Segunda Opção</td>
<td>Descrição da segunda opção.</td>
</tr>
</table>
Marcação incorreta:
<dl>
<dt onclick="funcao();">Primeira Opção</dt>
<dd>Descrição da primeira opção.</dd>
<dt onclick="funcao();">Segunda Opção</dt>
<dd>Descrição da segunda opção.</dd>
</dl>
Marcação correta:
<dl id="lista">
<dt>Primeira Opção</dt>
<dd>Descrição da primeira opção.</dd>
<dt>Segunda Opção</dt>
<dd>Descrição da segunda opção.</dd>
</dl>
Arquivo JavaScript externo:
$(document).ready(function()
{
$('dt[title^="P"]').click(function() {
alert('Clicou no Primeiro item!');
}
$('dt[title^="S"]').click(function() {
alert('Clicou no Segundo item!');
}
});
Conclusão:
Com jQuery as possibilidades de um Designer conseguir um bom resultado sem programar muito são bem maiores.
Abaixo listo alguns sites e tutoriais onde você poderá encontrar maiores informações:
Sobre jQuery:
Leitura recomendada: Marcação Semântica
Obrigado, até a próxima
