Ajax « GSaraiva's Projects

15
Jun 08

jQuery: Criando códigos facilitadores

:: articles :: by Gilberto Saraiva

Camaradas,

Respeitando a sequência dos artigos hoje vou falar sobre como facilitar o desenvolvimento web utilizando o jQuery.

Muitos aqui devem saber que o JavaScript antigamente não era lá aquele modelo respeitado de linguagem interpretada, mas após a liberação do Prototype e do objeto Ajax o negócio ficou diferente.

O que é o Prototype?

O Prototype antigamente era restrito ao escopo do browser, só ele mexer nas propriedades dos objetos DOM e Javascript.
Hoje, já podemos contar com essa parte na hora de desenvolver um código em JavaScript. Essa liberação do Prototype ampliou as possibilidades de utilização do JavaScript de uma forma que fez o mesmo renascer das cinzas, epoca aonde o Flash e estruturas de Server-side estavam fazendo o trabalho pesado.

Mas qual a real função do Prototype?
O Prototype é o que possibilita a criação de classes estruturadas no JavaScript, exemplo:

 HTML |   copy code | ?  
01 <script language="JavaScript">
02 <!--
03   Person = function(AData){
04     sData = ("" + AData).split(";");
05     this.data.Name = sData[0];
06     this.data.Age = parseInt(sData[1]);
07     this.data.Job = sData[2];
08   }
09   Person.prototype.data = {
10     Name: '',
11     Age: 0,
12     Job: ''
13   }  
14   Person.prototype.Show = function(){
15     alert(
16       this.data.Name + "\n" +
17       "Age: " + (this.data.Age) + "\n" +
18       "Working as " + this.data.Job
19     );
20   }
21  
22   window.onload = function(){
23     (new Person("Gilberto Saraiva;23;Programmer")).Show();
24   }
25 //-->
26 </script>

Infelizmente, não sei porque cargas d’agua, lançaram uma library pra JavaScript de nome Prototype e isso dificulta muito a obtenção de material sobre o verdadeiro Prototype. Fora que com esse nome muita gente fica iludida e acaba por pensar que Prototype é apenas uma library e quem não a usa não vai poder usar o Prototype verdadeiro.

O que é o Ajax?

Muitos confundem o Ajax como uma linguagem, como uma estrutura adicional, mas isso é um engano, o Ajax nada mais é que um método de utilização do objeto Ajax (Asynchronous Javascript And XML). Resumidamente podemos dizer que o Ajax é o jeito que utilizamos para fazer chamadas assincrônicas a outras partes do nosso servidor web (via HTTP1.1) para obtermos conteúdo sem precisar fazer uma requisição HTTP principal e recarregar a página novamente. A principal funcionalidade é poder modificar partes do conteúdo de um site através do objeto Ajax sem precisar efetuar uma atualização completa no código, sendo que o mesmo precisa apenas de uma pequena parte modificada e o resto continua estático. Não vou colocar um exemplo de como utilizar o objeto Ajax nativamente, pois o mesmo não é crossbrowser, e a interação é diferente em alguns browsers.

Vamos a ação

Vou tentar ser prático e resolver alguns problemas que encontramos no dia a dia na hora de desenvolver algum sistema web. A utilização do jQuery facilitará a manipulação dos elementos, vou resolver as questões do modo normal e outra com o jQuery, para termos de comparação.

Como esconder e exibir elementos HTML?

JavaScript puro

 HTML |   copy code | ?  
01 
02 <script language="JavaScript">
03 <!--
04   window.onload = function(){
05     Blink = document.getElementById("Blink");
06     setInterval(function(){
07       with(Blink.style)
08         display = (display == "block") ? "none" : "block";
09     }, 250);
10   }
11 //-->
12 </script>
13 <body>
14 <div id="Blink">Texto</div>
15 </body>
16

jQuery

 HTML |   copy code | ?  
01 
02 <script language="JavaScript">
03 <!--
04   $(function(){
05     $Blink = $("#Blink");
06     setInterval(function(){
07        $Blink.toggle();
08     }, 250);
09   });
10 //-->
11 </script>
12 <body>
13 <div id="Blink">Texto</div>
14 </body>
15

Como listar elementos HTML pela tag?

JavaScript puro

 HTML |   copy code | ?  
01 
02 <script language="JavaScript">
03 <!--
04   window.onload = function(){
05     elems = document.getElementsByTagName("DIV");
06     alert(elems.length + ' DIVs foram encontrados');
07     for(i = 0; i < elems.length; i++)
08       alert(elems[i].innerHTML);
09   }
10 //-->
11 </script>
12 <body>
13 <div>Texto 1</div>
14 <div>Texto 2</div>
15 <div>Texto 3</div>
16 </body>
17

jQuery

 HTML |   copy code | ?  
01 
02 <script language="JavaScript">
03 <!--
04   $(function(){
05     $elems = $("DIV"); 
06     alert($elems.length);
07     $elems.each(function(){
08       alert(this.innerHTML);
09     });
10   });
11 //-->
12 </script>
13 <body>
14 <div>Texto 1</div>
15 <div>Texto 2</div>
16 <div>Texto 3</div>
17 </body>
18

Como posso listar todos os links contidos na minha página?

JavaScript puro

 HTML |   copy code | ?  
01 
02 <script language="JavaScript">
03 <!--
04   window.onload = function(){
05     aTags = document.getElementsByTagName("A");
06     Hrefs = "";
07     for(i = 0; i < aTags.length; i++)
08       Hrefs += aTags[i].innerHTML + "\n   link: " + aTags[i].href + "\n";
09     alert(Hrefs);
10   }
11 //-->
12 </script>
13 <body>
14 <a href="http://google.com/">Google.com</a>
15 <a href="http://yahoo.com/">Yahoo.com</a>
16 <a href="http://gsaraiva.projects.pro.br/">gsaraiva.projects.pro.br</a>
17 <a href="http://jquery.com/">jQuery.com</a>
18 </body>
19

jQuery

 HTML |   copy code | ?  
01 
02 <script language="JavaScript">
03 <!--
04   $(function(){
05     Hrefs = "";  
06     $("A").each(function(){
07       Hrefs += this.innerHTML + "\n   link: " + this.href + "\n";
08     });
09     alert(Hrefs);
10   });
11 //-->
12 </script>
13 <body>
14 <a href="http://google.com/">Google.com</a>
15 <a href="http://yahoo.com/">Yahoo.com</a>
16 <a href="http://gsaraiva.projects.pro.br/">gsaraiva.projects.pro.br</a>
17 <a href="http://jquery.com/">jQuery.com</a>
18 </body>
19

Espero que esse artigo ajude a você entender melhor o jQuery e porque utiliza-lo, você mesmo poderá fazer suas comparações e sentir que ele realmente ajudará no desenvolvimento.

Próximo artigo:

Adicionando funções e propriedades aos objetos HTML

Artigos jQuery relacionados:

Como iniciar a utilização do jQuery

Tudo que você precisa é o link

Os Seletores (Selectors)

Criando códigos facilitadores

Abraços a todos.

articles — No comments

Step by step

jQuery: Criando códigos facilitadores

O que é o Prototype?

O que é o Ajax?

Vamos a ação

Como esconder e exibir elementos HTML?

JavaScript puro

jQuery

Como listar elementos HTML pela tag?

JavaScript puro

jQuery

Como posso listar todos os links contidos na minha página?

JavaScript puro

jQuery

Pages

Last Comments

Meta

01	<script language="JavaScript">
02	<!--
03	Person = function(AData){
04	sData = ("" + AData).split(";");
05	this.data.Name = sData[0];
06	this.data.Age = parseInt(sData[1]);
07	this.data.Job = sData[2];
08	}
09	Person.prototype.data = {
10	Name: '',
11	Age: 0,
12	Job: ''
13	}
14	Person.prototype.Show = function(){
15	alert(
16	this.data.Name + "\n" +
17	"Age: " + (this.data.Age) + "\n" +
18	"Working as " + this.data.Job
19	);
20	}
21
22	window.onload = function(){
23	(new Person("Gilberto Saraiva;23;Programmer")).Show();
24	}
25	//-->
26	</script>

01
02	<script language="JavaScript">
03	<!--
04	$(function(){
05	$Blink = $("#Blink");
06	setInterval(function(){
07	$Blink.toggle();
08	}, 250);
09	});
10	//-->
11	</script>
12	<body>
13	<div id="Blink">Texto</div>
14	</body>
15