24 jan 12 JQuery – Parte 1 Capitulo 1 – Conhecendo e usando o JQuery

Share

Nota1: Aviso antes que esse conteudo foi tirado do e-book jQuery for Dummles.
Nota2: Caso encontre algum erro de gramatical, me avise comentando na postagem.

Neste capítulo

• O JQuery
• Criando um ambiente de teste
• Usando jQuery em uma página da Web
• Execução de código após carregar a página Web

Ao ler este livro você deva está precisando criar um visualizador de imagens para o seu site. Talvez você queira fazer algo em sua página de fade in e out. Ou talvez você queira dar aos visitantes do seu site uma maneira de fazer upload de arquivos. JQuery pode ajudá-lo a adicionar centenas de impressionantes efeitos interativos para a sua página Web com rapidez e facilidade.
Neste capítulo, você encontrará uma visão geral de como jQuery funciona, como usá-lo em suas próprias páginas web, e como criar sua primeira página da Web simples com um efeito jQuery.
Procurando que jQuery pode fazer por você JQuery dá aos desenvolvedores web e designers uma maneira fácil para criar efeitos sofisticados com quase nenhuma codificação. JQuery porque é tão fácil de implementar, sua popularidade está crescendo. Você vê exemplos de JQuery toda a web.
Facebook e Twitter, por exemplo, usar uma série de efeitos jQuery.
Quando você postar um novo tweet no Twitter, a página não atuliza toda dá apenas um “Reload” em vez disso, o código por trás da página Web chama uma função JQuery para fazer seu novo tweet aparecer e todos os tweets outros em sua página mover para baixo. Outra característica JQuery no Twitter é a notificação que você recebe quando chega um novo tweet, como mostrado na Figura 1-1.

Figura 1-1:
Twitter usa um número de funções jQuery.

Se você clicar na notificação, a novos tweets aparecem na sua página, e os tweets mais velhos deslize para baixo. A página Web nunca recarrega, em vez disso, o conteúdo da página muda dinamicamente.

O JQuery

Para entender o jQuery, e bom entender um pouco sobre JavaScript, uma linguagem de programação que o seu navegador Web entende. O código JavaScript pode interagir com imagens e texto na sua página Web – por exemplo, esconder uma imagem, texto em movimento, ou alterar o conteúdo após um certo período de tempo ou quando um visitante de sua página faz algo, como a implantação seu cursor do mouse sobre um link. O código JavaScript pode fazer uma imagem aparecer quando alguém visita uma página Web, pode fazer uma janela pop up de 30 segundos depois sumir, ou pode verificar e certificar-se de um visitante de seu site preencheu um formulário Web corretamente. JavaScript é robusto e comumente utilizada para adicionar interatividade e efeitos dinâmicos para páginas da Web. Mas JavaScript é uma linguagem de programação completa, e para usá-lo de forma eficaz, você tem que aprender a programar.

JQuery é uma biblioteca add-on para JavaScript. Pense em como jQuery código JavaScript que foi escrito para você. Em geral, tudo que você precisa fazer é incluir uma ou duas linhas de código em sua página que chama o código jQuery. JQuery faz o JavaScript codificar manualmente trabalhar para você.
Compreensão dos efeitos e eventos do JQuery permite que você facilmente alterar a aparência, localização, ou o comportamento de um elemento em uma página da Web.
Os códigos JQuery dá os elementos de texto e imagem em uma página Web vários efeitos especiais, incluindo o seguinte:

• hide: Oculta um elemento em sua página web.
• show: Exibe um elemento em sua página da Web se o elemento está escondido.
• slideDown: Slides para baixo de um elemento em sua página web.
• slideUp: Slides de um elemento em sua página web.
• fadeIn: Fades em um elemento oculto em sua página Web, fazendo com que o elemento visível.
• fadeOut: desaparece um elemento em sua página Web, fazendo com que o elemento invisível.
• animate: Anima um elemento em sua página Web em uma direção particular.

Você pode usar efeitos jQuery em elementos em sua página, mas jQuery também permite que você controle quando esses efeitos ocorrem. Você pode fazer um elemento em seu slide página desaparecer, animar, e assim por diante, quando você especificar. Aqui estão alguns dos eventos que jQuery pode usar para desencadear um efeito:

• load: O efeito ocorre quando uma página Web tenha terminado de carregar no navegador da Web ou quando um elemento em uma página é carregada, como uma imagem.
• mouseover: O efeito ocorre quando o cursor do mouse se move sobre um local específico em uma página Web.
• mouseout: O efeito ocorre quando o cursor do mouse se move fora de um local específico em uma página da Web.
• change: Se o valor de algo (por exemplo, o texto em um campo em um formulário web) muda, ocorre um evento. Isto é útil para ter certeza que alguém entra as informações corretas em uma caixa de texto.

Usando plug-ins

O verdadeiro poder do jQuery está em muitas centenas de plug-ins que usam para criar efeitos surpreendentes. Plug-ins são programas que usam JavaScript para expandir o JQuery.
Para ver um exemplo de um popular e impressionantes plug-in, visite o site Lightbox plugin no http:/leandrovieira.com/projects/jquery/lightbox.
Este plug-in permite que os visitantes à sua página clique em uma imagem e ver uma versão maior do sobrepostos com imagens (ver Figura 1-2).

Figura 1-2:
O lightbox de JQuery plug-in.

Ao longo deste livro(postagens aqui!), você vai descobrir bastante plugins, todos gratuitos e de fácil utilização, que por sua vez um site simples em um destino forte e dinâmico.

Instalando JQuery

Antes de usar JQuery, você precisa baixar uma cópia do mesmo. Então você precisa decidir onde você quer que ele instale. Nesta seção, discuto as etapas básicas envolvidas na obtenção de uma cópia do JQuery e depois salvá-lo para o local certo, dependendo se você está trabalhando em seu computador pessoal ou em um servidor Web remoto. Mais tarde, você verá como incluir uma linha de código no seu arquivo HTML ou página da Web para ver os efeitos JQuery em sua página web.

Download JQuery

Para obter uma cópia do JQuery, siga estes passos:

1. Navegue até JQuery.com e clique no botão Baixar JQuery, que é à direita (ver Figura 1-3).
Ao clicar neste botão o leva para uma página em http://code.google.com com um link para a última versão do JQuery. No meu caso, o nome do arquivo é jquery-1.4.min.js. Sua versão pode ser mais nova e ter um número diferente, mas isso não fará qualquer diferença para o código e os exemplos neste livro.

Figura 1-3:
Baixar a última versão do JQuery de jquery.com.

A letras “min” no nome do arquivo indica que o arquivo é minimizado. Isto significa que os espaços extras e comentários que não fazem nada são removidos, tornando o tamanho do arquivo geral menores. Em geral, é melhor baixar a versão minimizada do JQuery.

2. Clique no link para o arquivo JQuery.
A caixa de diálogo aparece, perguntando se você deseja abrir ou salvar este arquivo, como mostrado na Figura 1-4.
Dependendo do navegador que você usa para fazer o download do JQuery. Js, você pode não ver a caixa de diálogo solicitando que você salve o arquivo. Você pode preferivelmente ser apresentado com uma página cheia de códigos JavaScript. Se isso acontecer, escolha ”Salvar como…” e salve o arquivo.

3. Salve este arquivo para um diretório em seu computador que você vai se lembrar.

Criação de um diretório de testes

Agora que você tem uma cópia local do arquivo JQuery, você precisa configurar um local no computador onde você pode criar arquivos HTML que usam JQuery. Para fazer isso, siga estes passos:

1. Crie um diretório ou pasta em seu computador que é fácil de navegar e nomeá-lo webtest.
Em um PC, se você criar o diretório no drive C:/, o diretório será C:/webtest. Em um Mac, você pode criar o diretório no desktop.

Figura 1-4:
Salve o arquivo jQuery para um diretório.

2. Dentro do diretório webtest, crie dois diretórios, nomeando-os js e imagens.

Figura 1-5 mostra o meu diretório chamado webtest e as pastas na mesma.

3. Copiar ou mover o arquivo jQuery (jquery-1.4.min.js no meu caso) para o diretório js.

Figura 1-5:
O diretório contendo os diretórios webtest js e imagens.

Chamando JQuery em uma página Web

Depois de ter seu diretório criado e o arquivo JQuery salvo no diretório js,você pode criar sua página da Web em primeiro lugar.
Para grande parte do restante deste livro, você precisa de um editor HTML ou, pelo menos, um editor de texto. Se você estiver usando um PC, você pode usar o programa Bloco de Notas o Notepad do seu computador.
Nas etapas a seguir, você criar uma página HTML e adicionar uma linha de código que se conecta a página para a biblioteca JQuery. Esta página não vai fazer nada emocionante, mas corretamente inserindo o código JQuery em sua página Web é vital. JQuery não vai funcionar se mesmo um único caractere é incorreta, assim tipo de cuidado.

Para criar sua página, faça o seguinte:

1. Abra o editor de texto ou editor HTML de sua escolha.

2. Digite o seguinte código no documento de texto:

1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>My Test Page</title>
</head>
<body>
<p>This is my test page.</p>
</body>
</html>

3. Salve este arquivo como teste.html no diretório webtest você criou na seção anterior.

Não importa qual editor você usa, certifique-se de salvar seus arquivos com a extensão .html, não .txt .
Você ainda precisa adicionar a linha de código que conecta a biblioteca jQuery para esta página.

4. Logo após o código HTML <title> minha página de teste </title>, adicione a seguinte linha de código:

1

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

O nome do arquivo jQuery (jquery-1.4.min.js na linha de código anterior) deve corresponder ao nome do arquivo que você baixou a partir de jquery.com. Essa linha de código chama a biblioteca de código jQuery. Mais tarde, quando você adiciona o código simples até esta página da Web que usa jQuery, o seu navegador Web saberá como encontrar jQuery.

5. Salve o arquivo teste.html novamente.
Desta vez, o arquivo é salvo com a linha de código que você acabou de adicionar.
Visualização de uma página Web em seu computador Você criou uma página HTML simples, e agora você deve olhar para ele no seu browser. Para abrir sua página, siga estes passos:

1. Inicie o browser de sua escolha.
Neste exemplo, eu uso o Firefox.

2. Escolha Arquivo -> Abrir arquivo.
Uma caixa de diálogo Abrir Arquivo que aparece.

3. Navegue até o diretório webtest e selecione o arquivo que você criou anteriormente, test.html.

4. Clique em OK.
Sua página da Web agora aparece no seu navegador, como mostrado na Figura 1-6.

Figura 1-6:
Uma página da Web básica com código que chama JQuery.

Esta página exibe o título, minha página de teste, e uma linha de texto, esta é minha página de teste. O código jQuery é acessível pela página Web, mas você não está usando-o para quaisquer efeitos na sua página ainda.

Criando seu Primeiro Código jQuery
Agora que você sabe como criar uma página Web simples com uma tag <script> que chama, ou inclui, a biblioteca jQuery, você pode criar o seu efeito jQuery primeiro. Nesta seção, você adiciona uma imagem à sua página e adicionar o código jQuery que exibe informações sobre a imagem em uma caixa de alerta. Não é o uso mais emocionante do jQuery, mas demonstra as técnicas básicas que você irá utilizar ao longo deste livro.

Para adicionar uma imagem em sua página HTML:

1. Localize um pequeno arquivo de imagem .gif e salve-o no diretório imagens que você criou anteriormente dentro do diretório webtest.
Tente encontrar um que é do tamanho de 300×300 pixels.

Se você não tem uma imagem gif calhar, pegue um, navegando até este local:
http://media.wiley.com/spa_assets/site/dummies2/include/images/topnav/home.gif

Este arquivo é uma imagem pequena de uma casa. Escolha Salvar Arquivo Como e salve esta imagem para o diretório imagens sob webtest.

2. Abra test.html em um editor de texto.

3. Adicione o seguinte código após a linha de <p> Esta é a minha página de teste </ p>:

<img src= “images/home.gif” width=”28″ height=”28″ alt=”Isso é um teste imagem.”>

Certifique-se de mudar home.gif para coincidir com o arquivo que você está usando.
Tome um olhar mais atento sobre este tag <img>. Ele contém pedaços de código conhecido como atributos. Os atributos são src, altura, largura e alt. Cada um destes contém informações sobre a imagem. O atributo src contém o nome ea localização da imagem. Atributos de altura e largura conter as dimensões da imagem em pixels. O atributo alt é um texto adicional para mostrar quando a imagem é mais moused ou não pode ser exibida.

4. Salve o arquivo teste.html, mas deixá-lo aberto em seu editor de texto.

Se você ver sua página em um navegador da Web agora, a imagem aparece como mostrado na Figura 1-7.

Figura 1-7:
A página test.html com uma imagem.

Você está pronto para adicionar algum código jQuery. Nas etapas a seguir, você adiciona o código que exibe informações sobre a imagem:

1. Se test.html não estiver aberto no seu editor de texto, abra-o.

2. Localize a linha <script> de código que você adicionou que jQuery chamadas.

3. Abaixo dessa linha de código, após a tag </ script>, adicione o seguinte código:

1
2
3
4
5

<script type="text/javascript">
$ (Document). Ready (function () {
/ / Fazer as coisas aqui
});
</ Script>

Você vai ver esse código novo e de novo ao longo deste livro. O código $ (document). Pronto está chamando uma função jQuery que informa ao navegador que quando uma determinada parcela da página terminar de carregar, fazer alguma coisa. Você ainda precisa dizer a ele o que fazer.

Quando você vê o sinal de dólar no código, isso significa que o código está interagindo com jQuery chamando uma função jQuery. O caractere $ é um stand-in para o jQuery palavra de código.

O // Fazer as coisas aqui de linha é um comentário. Os dois caracteres de barra dizer ao navegador Web para ignorar o texto que se segue-os na mesma linha. É muitas vezes útil para colocar comentários em seu código para dizer se o que você ainda precisa fazer ou o que você tem feito.

4. Substitua as coisas // Faça aqui linha com este código:

alert (jQuery (‘img’) attr (‘alt’).);

Lembre-se o sinal $? A linha de código anterior também pode ser escrito assim:

alert ($ (‘img’) attr (‘alt’).);

5. Salve o seu arquivo, mas deixá-lo aberto em seu editor de texto. Visualizá-lo em um navegador.
A linha de código que você adicionou informa ao navegador para abrir uma caixa de alerta JavaScript quando a página está pronta. Figura 1-8 mostra essa caixa de alerta. O alerta exibe o texto que está na tag seguinte imagem o atributo alt. Figura 1-8 também mostra todo o código fonte para test.html.

Figura 1-8:
Uma caixa de alerta exibindo o texto do atributo alt da imagem.

6. Alterar o código de alerta para mostrar a altura da imagem, modificando-o para alert (jQuery (‘img’) attr (‘altura’).);

7. Salvar test.html e visualizá-lo no seu navegador web.

Você vê agora a altura da imagem exibida na caixa de alerta.
Como jQuery trabalha com sua página Web
No seu mais básico, uma página da Web contém uma tag <script> que inclui a biblioteca jQuery e um bloco <script> de código JavaScript que contém chamadas para as funções da biblioteca jQuery.

Usando código JavaScript para chamar funções JQuery é um pouco confuso no início, mas não se preocupe. O ponto importante é para ter uma noção de como o código que você usou neste capítulo funciona e o que significam todas as peças. Nesta seção, vou levá-lo através da linha por linha test.html por isso vai ser mais clara:

• <! Doctype …>: Este elemento tempo informa ao navegador Web de qual versão do HTML é usada no código que segue. Você deve sempre incluí-lo no início de todas as páginas HTML que você criar.
• <html>: Este elemento começa na página HTML.
• <head>: Este elemento indica o início da seção de cabeça. Esta seção geralmente contém o título e qualquer elemento script.
• <title> minha página de teste </ title>: Esta linha apresenta o título da página.
• <script src=”js/jquery-1.4.min.js”></script>: Esta linha fornece a localização da biblioteca jQuery.
• <script type=”text/javascript”>: Esta tag script informa ao navegador que tudo dentro é o código JavaScript.
• $ (Document) ready (function () {:. O sinal de dólar é um alias para a função jQuery A função espera pronto para a página da Web para carregar, e então o código contido dentro dela é executado..
• a l e r t ( j Q u e r y ( ‘ i m g ’ ) .attr(‘height’));: A função de alerta abre uma caixa de pop-up de alerta. O sinal de dólar que se segue é chamar a função attr jQuery. Esta função retorna o valor de qualquer atributo está entre aspas, neste caso, a altura. Note que a função precede img attr. Em suma, esta função significa ” observe todos os elementos img que você encontra no código HTML, e retornar o valor do atributo altura do primeiro? “
• });: Esta pontuação está fechando o parêntese começou na linha {$ (document) ready (function ()..
• </ Script>: Esta tag fecha a tag <script> e termina o bloco de código JavaScript.
• </ Head>: Esta tag fecha a seção head do HTML.
• <body>: Esta marca começa a seção de corpo, onde o conteúdo principal consiste de código HTML, texto e imagens está escrito.
• <p> Esta é a minha página de teste <p>:. Esta linha é uma linha de texto que aparece na página.
• <img src= “images/home.gif” height=”28” width=”28”alt=”This is a test image.”>: Isso exibe elemento img na página Web uma imagem com vários atributos.
• </ Body>: Essa tag termina a seção de conteúdo da página.
• </ Html>: Essa tag termina a página HTML.

Você pode usar aspas simples ou duplas em torno de elementos e texto em funções JQuery, mas as melhores práticas é sempre usar aspas simples. Aspas duplas são mais utilizados em código HTML. Por exemplo, esta é uma função JQuery com aspas simples:

alert ($ (‘img’) attr (‘width’).);

e este é um código HTML com aspas duplas:

<img src= “images/home.gif” width=“28″ height=“28″ alt=“This é um teste image.”>

Pois bem, esse é o primeiro Capítulo da parte I do livro, estou “traduzindo”(google tradutor), a parte seguinte do livro, vou tentar manter a adicção de cada capítulo semanalmente.

Qual quer erro, espero que vocês comentem abaixo, tendo em vista que não é uma tradução perfeita!

Logo mais vou postar o pdf em inglês do livro.

Não se prenda a apenas por aqui, encontrei essa boas referencias abaixo:

http://desenvolvimentoparaweb.com/jquery/jquery-apresentacao-introducao/

http://imasters.com.br/secao/jquery/indice/artigos

entre outros…

Abraços e até logo