JQuery – Primeiros passos

Hoje vamos aprender um pouco sobre JQuery, o melhor framework Javascript!

O que é Javascript?

Javascript é uma linguagem de programação client-side, ou seja, roda no navegador do cliente e não no servidor web. A grande maioria dos navegadores possuem suporte ao Javascript, isso faz com que ele seja largamente usado para muitos aspectos.

Com Javascript podemos criar efeitos especiais nas páginas e definir interatividades com o usuário. O navegador do cliente é o encarregado de interpretar as instruções Javascript e executá-las para realizar estes efeitos e interatividades, de modo que o maior recurso.

Para que usar um framework?

Os sites e sistemas web estão cada vez mais dinâmicos, antes qualquer dinamismo ná página tinha dois caminhos, usar flash (pesado e dependente de plugins), ou usar javascript puro(cansativo e de difícil manutenção). Hoje existem diversos frameworks Javascript que facilitam e muito a vida do programador front-end na hora de deixar sua página com alguns efeitos bacanas, ou mesmo para ter ações sem programação obstrusiva.

O JQuery possui o compromisso “The Write less, Do More, Javascript Library”, ou seja, escreva menos e faça mais, e com certeza é isso que o JQuery nos traz, grandes resultados com pouca programação.

Mão na massa!

Para iniciar essa série de estudos vamos mostrar como incluir o JQuery na suas páginas e dar os primeiros passos com o JQuery, vamos lá!!!

Baixar o JQuery

Para baixar o JQuery, basta acessar o link http://code.jquery.com/jquery-1.7.min.js, essa é a versão mínima do jquery, uma versão para uso em sites e sistemas, sem espaços ou comentários, em sua versão mais recente a 1.7.

Inclusão do Arquivo JQuery

[code lang=”html”]<script type=”text/javascript” language
=”javascript” src=”javascript/jquery.js”></script>[/code]

Primeiro Olá Mundo

Vamos dar um alert com a mensagem Olá Mundo quando o usuário clicar no único elemento da página, um botão!

HTML do botão:

[code lang=”html”]<button id=”botao”>Clique aqui</button>[/code]

E o código Jquery:

[code lang=”js”]

<script type=”text/javascript”>

$().ready(function(){

$(“#botao”).click(function() {

alert(‘Olá mundo’);

});

});
</script>

[/code]

$() : utilizado para refenciar objetos DOM, se estiver em branco, estará referenciando o documento completo.
ready() : o comando irá ser executado quando o documento for carregado
function{} : dentro das chaves {}, colocar os comandos javascript ou jQuery que serão interpretados pelo browser

A primeira linha temos o evento ready que age sobre o documento html $(document).ready(), ele será responsável por atribuir os eventos das funções que definimos apenas quando o DOM estiver preparado pelo navegador.

Na segunda linha de comando estamos definindo um evento ao clicar no botão com ID #botao, mostrando uma caixa de alerta.

Bom turma, isso foi uma pequena introdução do que o JQuery é capaz de fazer, fique atento, pois muito mais vai ser publicado aqui no EscolaPHP

Já usou o Jquery, conhece algum melhor? Comente a vontade, se tiver dúvida não hesite em comentar!!

Receba as melhores dicas para criar um negócio digital lucrativo

Jair Rebello

Empreendedor e Nômade Digital. Dedica grande parte do seu tempo para criar soluções como o Plugin SqueezeWP e o Template ConversionWP Premium que ajudam dezenas de milhares de empreendedores a desenvolverem seus negócios.

Website: http://www.rebello.blog.br