As páginas da web estão cada vez mais dinamicas e interativas, algumas coisas antigamentes só eram possíveis de ser feitas com flash, applets java ou algo parecido, hoje com códigos JavaScript veremos que podemos fazer algumas coisas muito interessantes…

O JavaScript foi criado pela netscape para atender principalmente as necessidades de validação de formulários do lado do cliente e fazer interações com a página, mudando atributos das suas tags html, conteudos e até mesmo fazer requisições assincronas (AJAX). Podendo assim desenvolver páginas que estão dentro do que apelidamos de web 2.0.

Hoje em dia, nós desenvolvedores temos alguns frameworks para facilitar o trabalho com essa linguagem. Podemos citar alguns conhecidos: Prototype, Mootools, JQuery, YUI, Dojo, GWT, Rico, entre outros…

Eu tive maior afinidade com o framework JQuery principalmente pela facilidade que ele oferece no desenvolvimento do seu código, e também pelas poucas oportunidades de contato que tive com os outros frameworks. O JQuery tem como premissa simplificar o código JavaScript, tanto que seu slogan é “The Write less, Do More, Javascript Library”. Não há nada melhor para um programador do que escrever menos e fazer mais não acham? Nesse post vou fazer um exemplo simples usando JQuery, futuramente vou postar ideias mais complexas que podem ser aplicadas nesse ótimo framework.

Então mão na massa, antes de tudo temos que incluir a biblioteca JQuery em nossa página xhtml: 

 HTML |  copy code |? 
1
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
2
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
3
	<head> 
4
		<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
5
		<title>Exemplo</title>
6
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
7
	</head>
8
	<body></body>
9
</html>

Inseri a biblioteca atravez do link estático que a comunidade disponibilizou para quem quer inserir o framework em seu site, mas você pode também baixar o jquery e coloca-lo em seu servidor para linkar nele. Com isso estamos liberados para programar usando o JQuery na nossa página xhtml. vamos fazer um hello world bem inútil colocando a frase "Hello World" dentro da nossa tag <body> através do framework. Com o:

 HTML |  copy code |? 
1
 $(function () { //AQUI VEM O CÓDIGO } );

limitamos onde será inserido meu código JQuery, eu consigo pegar qualquer elemento da minha página com as facilidades que os seletores definidos no CSS 3 oferecem. Com isso conseguimos colocar eventos não obstrusivos em nossos elementos. podendo facilmente separar o javascript, css e xhtml que é um ótimo padrão de desenvolvimento web. Exemplo de evento não obstrusivo: 

 HTML |  copy code |? 
01
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
02
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
03
	<head> 
04
		<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
05
		<title>Exemplo</title> 
06
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
07
		<script type="text/javascript">
08
			$(function () { 
09
				$(".botaoNaoObstrusivo").click(function () { 
10
					alert("Hello World"); 
11
				}); 
12
			});
13
		</script> 
14
	</head> 
15
	<body> 
16
		<a href="#" class="botaoNaoObstrusivo">Clique Aqui...</a> 
17
	</body> 
18
</html>

Com isso, quando o link "Clique Aqui..." for clicado o browser vai disparar um alert, sem que tenha que ser colocado o atributo "onclick" na tag <a> Em breve teremos mais ideias interessantes aqui no blog. Você pode acessar a documentação do JQuery para ver os eventos, efeitos, e metódos disponíveis...

Tags: , ,

Esse post foi publicado de terça-feira, 24 de março de 2009 às 20:18, e arquivado em JQuery. Você pode acompanhar os comentários desse post através do feed RSS 2.0. Você pode comentar ou mandar um trackback do seu site pra cá.