jQuery – Início, Meio e Fim – Parte 2

No primeiro artigo da série, apresentamos uma visão geral da biblioteca jQuery e qual sua relação com JavaScript. Você pode efetuar a leitua do primeiro artigo da série clicando AQUI. Muito embora o texto do primeiro artigo seja de caráter “introdutório”, recomendo a leitura, pois, alguns conceitos estruturais da biblioteca foram apresentados.

Como mencionado no primeiro artigo, esta série pretende evoluir em relação aos conceitos de jQuery, até chegar ao ponto, de habilitar os leitores a construir boas aplicações utilizando a biblioteca. Partiremos do início e, conceito a conceito (com a implementação de exemplos práticos, que fazem parte do dia a dia do programador web), iremos absorvendo os principais conceitos da framework. Assim, no artigo de hoje, veremos alguns conceitos básicos de jQuery e, principalmente, o conceito de “seletores”.

Conceitos fundamentais de jQuery

Se você trabalha, ou já trabalho com web, sabe que uma página nada mais é do que um arquivo codificado com uma “linguagem” de marcação (denominada HTML – Hyper Text Marckup Language), interpretada em última instância no computador do usuário final. Assim, podemos afirmar que, jQuery nada mais é do que uma “máscara” para escrever JavaScript de forma a manipular elementos HTML. A Figura 1 apresenta a relação entre as camadas de uma página web.

Figura 1: Camadas possíveis para uma página web

Quanto a “interação” entre as camadas, a Figura 1 não deixa dúvidas. Na camada de “estrutura” temos a linguagem de marcação de texto (HTML, XHTML, DHTML, etc.), na camada “estilos” temos a presença do CSS e a camada “função”, temos a linguagem JavaScript. Neste esquema, jQuery seria uma subcamada sobre de function, ou seja, um nível mais alto.

Construtor jQuery – o princípio e tudo

Se estamos falando em manipulação de elementos HTML através de jQuery, evidentemente a biblioteca tem que prover recursos para que a busca de tais elementos seja realizada de modo que e a adição/remoção de comportamentos possa ocorrer. O grande responsável por fazer com que isso ocorra é o “construtor jQuery”. A Listagem 1 o apresenta em sua forma mais simplificada.

[javascript]
$()
[/javascript]

Listagem 1: Construtor de jQuery

A listagem 1 apresenta o construtor jQuery, grande responsável por encontrar os elementos HTML da página. Sim, sua forma de utilização é simples. Se por exemplo, quiséssemos modificar alguma característica de um campo de formulário (se quiséssemos, por exemplo, que este campo aparecesse com efeito de fade) “TextBox” e o “ID” deste campo fosse, digamos, “txtNome”, teriamos então a chamada deste campo conforme apresenta a Listagem 2.

[javascript]
<script type=”text/javascript”>
$(‘form’).ready(function(){
$(‘#txtNome’).fadeIn();
});
</script>
[/javascript]

Listagem 2: Alterando o comportamento de um TextBox

Você pode estar pensando: “- Fabrício, já começou a complicar”. Note, o código da Listagem 2 é muito legível e de fácil entendimento. Veja a descrição linha a linha:

• Linha 2: chamamos o construtor jQuery e o parametrizamos com a marcação “form”. Assim, é como se estivéssemos dizendo ao jQuery: “por favor, percorra a minha página e selecione todos os formulários”. Se em nosso exemplo tivéssemos uma situação onde vários formulários estão presentes, bastaríamos passar o ID deste formulário como parâmtro para o construtor. Assim, teríamos “$(‘#meuForm’)”, se este fosse o nome do formulário, no lugar de “$(‘#form’)”. Em relação a função ready(), falaremos especificamente sobre ela mais adiante neste artigo.
• Linha 3: estamos indicando ao jQuery o campo específico ao qual desejamos adicionar um comportamento (neste caso um fade in), ou seja, o campo “txtNome”. Note que, como estamos fazendo menção a um elemento através de seu ID, estamos utilizando o símbolo “#” a frente do nome. Em seguida, estamos “falando” ao jQuery qual o efeito desejamos que seja adicionado ao campo “txtNome”, ou seja, “fadeIn()“.

O método ready() – para que serve?

Para que o jQuery consiga realizar as operações, é necessário que antes, ele conheça toda árvore de elementos da página. Assim, quando inicializamos o construtor com a função “ready()“, estamos informando ao jQuery que, assim que a página estiver carregada e toda árvore de componentes for conhecida, a operação definida na função mais interna deve ser realizada. Um bom exemplo de sua utilização está apresentado na Listagem2.

Muito embora seja uma boa prática utilizar a função “ready()” de forma explícita (principalmente por tornar o código mais legível), existem duas outras formas de a escrevê-la, sendo que uma delas é implícita (conhecida como sintaxe reduzida). As Listagens 3 e 4 apresentam as duas outras formas.

[javascript]
$().ready(function() {
//fazer operação aqui
});
[/javascript]

Listagem 3: Carregando todos os controles da página

[javascript]
$(function() {
//fazer operação aqui
});
[/javascript]

Listagem 4: Escrevendo ready() de forma implícita (sintaxe reduzida)

Na Listagem 3, temos a dispensa da utilização de um parâmetro para o construtor, assim, estamos dizendo que, assim que tudo for carregado, uma operação deve ser realizada. Na Listagem 4 estamos “dizendo” ao jQuery rigorosamente a mesma coisa, entretanto, estamos escrevendo menos código :-). O critério de utilização é você quem decide.

Entendendo o conceito de “Árvore do Documento”

Entender o conceito de “árvore do documento” é fundamental para o completo entendimento do jQuery. Isso ocorre porque o jQuery manipula elementos de forma hierárquica, assim, para obter o resultado esperado, é preciso conhecer exatamente o que e onde os comportamentos estão sendo adicionados.

Para que possamos entender este conceito, imagine a seguinte situação: temos um documento, que possui um título (para exibição deste título, temos uma tag “h1”). Abaixo, temos uma “div” que, em seu interior, agrupauma tag “h2” (referente a um subtítulo, por exemplo) e uma tag “p” com um pequeno texto descritivo. Assim, a Listagem 5 apresenta a estrutura HTML deste documento.

[html]
<html>
<head>
</head>
<body>
<h1>jQuery – Início, Meio e Fim – Parte 2</h1>
<div>
<h2>Do que trata esta série?</h2>
<p>
Esta série apresenta o jQuery e ensina como criar aplicações interativas com ricas com JavaScript.
</p>
</div>
</body>
</html>
[/html]

Listagem 5: Estrutura HTML proposta

Para entender o conceito de árvore de documento, um aspecto visual nos ajuda bastante: a identação. Um código bem identado, pode nos dar a dimensão exata da estrutura do documento. Com base no código acima e na identção do mesmo, considere agora a Figura 2.

Figura 2: Árvore do documento apresentado pela Listagem 1

Note, com base na estrutura HTML apresentada pela Listagem 5, é possível abstrair em forma de fluxograma a estrutura do documento. Assim temos: HTML é o nó principal e contém HEAD e BODY. Por sua vez, BODY contém H1 e DIV. DIV por sua vez, contém H2 e P. Simples não? Porém, é fundamental entender esta estrutura, como poderáa ser constatado mais adiante nesta série.

Encadeamento de recursos com jQuery

Uma das características importantes do jQuery é o “encadeamento”. Para detalharmos o recurso, considere o código apresentado pela Listagem 6.

[javascript]
$(‘form’).children(‘#txtNome’).fadeIn();
[/javascript]

Listagem 6: Encadeamento em JavaScript

Podemos resumir a operação realizada pela Listagem 6 como sendo o seguinte:

jQuery, ao encontrar o formulário da página, por favor, para o elemento filho chamado “txtNome”, adicione o comportamento de fade in.

O blockquote acima resume bem o conceito de encadeamento. Com uma única linha de código, adicionamos o comportamento desejado (neste caso fade in) no campo indicado, apenas especificando seu ID. Para adicionar o mesmo comportamento utilizando JavaScript puro, precisariamos percorrer a estrutura da página com um laço de repetição, pois, JavaScript não suporta o encadeamento de funções de forma nativa.

Funções utilitárias do jQuery

Como o próprio nome sugere, funções utilitárias são aquelas disponíveis no core da biblioteca que realizam tarefas específicas. Em geral, estas funções não são utilizadas nas páginas web de forma direta, como utilizamos as demais. Elas possuem ampla aplicação na construção de plugin e extensões à biblioteca. A Listagem 7 apresenta a utilização de uma função utilitária em suas duas formas possíveis de serem escritas.

[javascript]
<!DOCTYPE html>
<html>
<head>
<style>
p { color:green; font-weight:bolder; margin:3px 0 0 10px; }
div { color:blue; margin-left:20px; font-size:14px; }
span { color:red; }
</style>
<script src=”http://code.jquery.com/jquery-1.5.js”></script>
</head>
<body>
<p>Browser info:</p>
<script>
jQuery.each(jQuery.browser, function(i, val)
//alternativamente: $.each($.browser, function(i, val)
{
$(“<div>” + i + ” : <span>” + val + “</span>”)
.appendTo(document.body);
});</script>

</body>
</html>
[/javascript]

Listagem 7: Utilizando uma função utilitária para detectar o browser do usuário (exemplo retirado de jquery.com)

Bom pessoal, vamos ficando por aqui. No artigo de hoje, vimos alguns conceitos de fundamental importância para aqueles que desejam aprender a trabalhar com jQuery. Nossa idéia, é que, antes que você saia copiando e colando de tutoriais pouco informativos existentes na web, você possa entender o que está fazendo.

No próximo artigo, falaremos especificamente sobre seletores, o principal conceito relacionado ao jQuery. Construiremos alguns exemplos práticos que o auxiliarão em grande escala no entendimento da matéria. Não perca!

Não esqueça de deixar sua avaliação deste texto através de seu comentário :-).