Arquivos de sites

jQuery – Evento Ready e Encadeamento de método (Method chaining)

Como mencionado, é uma boa prática esperar o documento ser totalmente carregado (loaded) e pronto (ready), antes de trabalhar com ele. Isso também permite você ter seu código JavaScript antes do body (corpo) do seu documento, na sessão head (cabeçalho), senão diretamente ou através de um link para um arquivo JavaScript externo. Você pode fazer isso apenas colocando seu código dentro do evento ready do documento. Nós vamos usar o mesmo exemplo como no capítulo “Hello, world!”, mas dessa vez o código está dentro do evento ready:

<div id=”divTest1″></div>
<script type=”text/javascript”>
function DocumentReady()
{
$(“#divTest1”).text(“Hello, world!”);
}

$(document).ready(DocumentReady);
</script>

O que fazemos aqui é que criamos uma function (função), chamada DocumentReady, a qual deve ser disparadas assim que o documento estiver pronto para manipulação do DOM. Na última linha, usamos o método ready() para atribuir nossa função ao evento ready, para dizer ao jQuery que assim que o documento estiver pronto, nós queremos que ele chame nossa função.

Entretanto, nós podemos encurtá-la um pouco usando uma função anônima (anonymous function) do JavaScript em vez disso. Isso basicamente apenas significa que ao invés de declarar a função e dá-la um nome, nós simplesmente criamos ela e então imediatamente passamos a referencia à função ready(). Se você é novo em JavaScript, então isso pode parecer demasiadamente complicado, mas assim você se acostuma a isso, você talvez possa apreciar as poucas keystrokes e o menor espaço necessário para realizar o mesmo:

<div id=”divTest2″></div>
<script type=”text/javascript”>
$(document).ready(function()
{
$(“#divTest2”).text(“Hello, world!”);
});
</script>

Mas com certeza, isso ainda não foi curto o bastante para o time do jQuery, então eles decidiram criar uma versão (sobrecarga) do construtor do jQuery, que leva uma função ready como um parâmetro, para fazer isso ainda mais curto:

<div id=”divTest3″></div>
<script type=”text/javascript”>
$(function(){
$(“#divTest3”).text(“Hello, world!”);
});
</script>

No ultimo exemplo, nossa função anonima é passada diretamente ao contrutor do jQuery, que a atribui ao evento ready. Como você verá quando você testar o código, o evento é disparado assim que a página for carregada, a maioria das vezes tão rápido que você nem se quer percebe.

Como já descrito, envolver nosso código na função de evento ready é a melhor prática para trabalhar com jQuery em nosso documento, e portanto você verá esse tutorial usando essa abordagem na maioria dos exemplos, a não ser ignorado para manter o tamanho dos nossos exemplos baixo.

Encadeamento de método (Method chaining)

Também um outro aspecto de tantos outros aspectos realmente legais do jQuery é o fato de que a maioria dos métodos retornam um objeto jQuery que você pode então usar para chamar outro método. Isso permite você fazer um encadeamento de método, onde você pode chamar múltiplos métodos no mesmo conjunto de elementos, que é realmente agradável porque isso salva você e o navegador de ter que procurar o mesmo elemento mais de uma vez. Aqui vai um exemplo, e não se preocupe sobre os métodos do jQuery usados nos exemplos seguintes – eles serão explicados nos capítulos posteriores:

<div id=”divTest1″></div>
<script type=”text/javascript”>
$(“#divTest1”).text(“Hello, world!”).css(“color”, “blue”);
</script>

Isso funciona assim: Nós instanciamos um novo objeto jQuery e selecionamos o elemento divTest1 com o caractere $, que é o atalho para a classe jQuery. No retorno, nós pegamos um objeto jQuery, permitindo-nos manipular o elemento selecionado. Nós usamos aquele objeto para chamar o método text(), que define o texto ao(s) elemento(s) selecionado(s). Esse método retorna o objeto jQuery de novo, nos permitindo usar outra chamada de método diretamente no valor de retorno, que é o método css().

Nós podemos adicionar mais métodos se nós precisarmos, mas até certo ponto, a linha de código se tornará bastante grande. Felizmente para nós, o JavaScript não é muito rigoroso em relação a sintaxe, então você pode formatar como você quiser, incluindo linebreaks (quebra de linha) e indentações.  Por exemplo, isso irá funcionar muito bem também:

<div id=”divTest2″></div>
<script type=”text/javascript”>
$(“#divTest2”).text(“Hello, world!”)
.removeClass(“blue”)
.addClass(“bold”)
.css(“color”, “blue”);
</script>

O JavaScript irá simplesmente jogar fora os espaços extras em branco, quando interpretar o código e executa-lo como uma longa linha de código com várias chamadas de métodos.

Observe que alguns métodos não retornam o objeto jQuery, enquanto outro apenas retornam isso dependendo dos parâmetros que você passar pra ele. Um bom exemplo disso é o método text() usado acima. Se parâmetros não forem passados a ele, o texto atual do(s) objeto(s) selecionado(s) é retornado em vez do objeto jQuery, enquanto um único parâmetro provoca o jQuery a definir o texto especificado e retornar um objeto jQuery.

Fonte: jquery-tutorial.net / jquery-tutorial.net

jQuery – Primeiros passos; Hello, world!

Para usar jQuery, você precisa incluí-lo nas páginas onde deseja tirar proveito dele. Você pode fazer isso baixando o jQuery do site dele em www.jquery.com. Lá tem geralmente a escolha entre uma versão de “Produção” (Production) e uma versão de “Desenvolvimento” (Development).

A versão de “Produção” é para o seu site real na web, por que ela foi reduzida e comprimida para ocupar o mínimo de espaço, o que é importante para os seus visitantes, do qual o navegador terá que baixar o arquivo do jQuery juntamente com o resto do seu website. Para teste e desenvolvimento, a versão “Desenvolvimento” é melhor. Ela não foi reduzida ou comprimida, então quando você encontrar um erro, você pode na verdade ver onde no jQuery isso aconteceu.

Uma vez que o arquivo JavaScript do jQuery foi baixado, você terá que referenciá-lo em suas páginas, usando a tag HTML <script>. O jeito mais fácil é colocar o arquivo do jQuery baixado no mesmo diretório da página onde deseja usá-lo e então referenciá-lo assim, na sessão <head> do seu documento:

<script type="text/javascript" src="jquery-1.5.1.js"></script>

Uma parte da sua página deve agora se parecer com isso:

<head>
<title>jQuery test</title>
<script type="text/javascript" src="jquery-1.5.1.js"></script>
</head>

Uma abordagem mais moderna, ao invés de você mesmo baixar e hospedar o jQuery, é incluí-lo de um CDN – Content Delivery Network (Rede de Fornecimento de Conteúdo). Tanto a Google quanto a Microsoft hospedam várias versões de jQuery e outros frameworks JavaScript. Isso lhe salva de ter que baixar e armazenar o framework jQuery, mas isso tem uma vantagem muito maior: Porque o arquivo vem de uma URL popular que outros websites podem utilizar também, há possibilidades de que quando as pessoas cheguem ao seu website e o navegador delas solicitar o framework jQuery, isso pode já estar no cachê, porque outro website está usando exatamente a mesma versão e arquivo. Além disso, a maioria dos CDN’s terão certeza de que uma vez que o usuário solicitou um arquivo dele, isso será fornecido por um servidor mais perto dele, então seus usuários Europeus não terão que transportar o arquivo por todo o caminho a partir dos Estados Unidos e assim por diante.

Você pode usar o jQuery de um CDN do mesmo jeito como você faria com a versão baixada, apenas a URL que muda. Por exemplo, para incluir o jQuery 1.5.1 a partir do Google, você deveria escrever o seguinte:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

Eu sugiro que você use essa abordagem, a não ser que você tenha uma razão específica para você mesmo hospedar o jQuery. Aqui vai um link de informação do CDN do jQuery a partir do Google:

http://code.google.com/intl/da/apis/libraries/devguide.html#jquery

Ou se você preferir usar a partir da Microsoft:

http://www.asp.net/ajaxlibrary/cdn.ashx#jQuery_Releases_on_the_CDN_0

Vamos ao Hello, world!

Todo tutorial de programação decente começará com um exemplo “Hello, world!” e este tutorial é também um desses. No capítulo anterior, nó aprendemos como incluir o jQuery na nossa página, de modo que nós podemos começar a usar todos esses grandes recursos. Você precisa conhecer um pouco mais sobre como jQuery trabalha, antes de você começar a escrever seu próprio código, mas apenas para ter certeza que tudo está funcionando, e para você ver como é simples o jQuery, vamos começar com um pequeno exemplo:

<div id="divTest1"></div>
<script type="text/javascript">
$("#divTest1").text("Hello, world!");
</script>

Ok, então temos uma tag div com o id “divTest1”. No código JavaScript nós usamos o atalho $ para acessar o jQuery, então nós selecionamos todos os elementos com um id “divTest1” (há apenas um porém) e setamos seu texto para “Hello, world!”. Você pode não saber o suficiente sobre jQuery para entender porque e como isso funciona, mas como você progredirá através deste tutorial, todos esses elementos serão explicados em detalhes.

Mesmo uma tarefa tão simples como essa deve na verdade necessitar de um bom número extra de keystrokes se você tivesse que fazer isso em JavaScript puro, sem ajuda do jQuery:

<div id="divTest2"></div>
<script type="text/javascript">
document.getElementById("divTest2").innerHTML = "Hello, world!";
</script>

E isso seria ainda maior se nosso elemento HTML não tivesse um ID, por exemplo, apenas uma classe.

Normalmente, entretanto, você espera pelo documento entrar no estado READY (Pronto) antes de você começar manipular seu conteúdo. Os exemplos acima funcionarão na maioria dos navegadores e provavelmente até mesmo funcionará quando você fizer mais coisas avançadas, mas determinadas tarefas podem falhar se você tentar fazê-las antes do documento estar carregado (loaded) e pronto (ready). Felizmente, o jQuery faz isso muito fácil também.

Fonte: jquery-tutorial.net / jquery-tutorial.net