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

Anúncios

About Gustavo Amaro

+ Formado em Tecnologia e Análise de Sistemas + MBA em Desenvolvimento de Aplicações JAVA – SOA

Posted on 24 de Fevereiro de 2014, in JavaScript, jQuery and tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink. Deixe um comentário.

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s

%d bloggers like this: