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
    
				
    
			
    
					
    
			  
    23
    May 08
    
				
    jQuery: jQuery.Animator
    
        
    :: articles :: by Gilberto Saraiva
    

				
    
					
    Folks,
    

    I wrote a plugin to make our life easy! the new jQuery.Animator.
    

    the example:
    

     HTML |  copy code |? 
    01
    02
    <html>
    03
    <head>
    04
    <title></title>
    05
    <script type="text/javascript" src="jquery-1.2.5.js"></script>
    06
    <script type="text/javascript" src="jquery.animator.js"></script>
    07
    <script language="JavaScript">
    08
    <!--
    09
      function AnimateWalker(Walker, GoEnd){
    10
        newLeft = parseInt(Walker.css("left")) + 5;
    11
        if(GoEnd) newLeft = 400;
    12
        Walker.css("left", newLeft);
    13
        return (newLeft < 400);
    14
      }
    15
     
    16
      function AnimateWalker3(Walker, GoEnd){
    17
        // GoEnd can't be calculated, it's a infinite animation
    18
        newLeft = parseInt(Walker.css("left")) + 10;
    19
        if(newLeft > 400) newLeft = 0;
    20
        Walker.css("left", newLeft);
    21
        return true; // infinte
    22
      }
    23
     
    24
      $(function(){
    25
        $("#Walker").animator(10, AnimateWalker);
    26
        $("#Walker2").animator(10, AnimateWalker);
    27
        $("#Walker3").animator(10, AnimateWalker3);
    28
      });
    29
    //-->
    30
    </script>
    31
    <body>
    32
    <div id="Walker" style="position:relative;left:0;width:100px;height:50px;background:#000;color:#fff">Animation Test</div>
    33
    <div id="Walker2" style="position:relative;left:50;width:100px;height:50px;background:#0F0;color:#fff">Animation Test</div>
    34
    <div id="Walker3" style="position:relative;left:100;width:100px;height:50px;background:#00F;color:#fff">Animation Test</div>
    35
    </body>
    36
    </html>
    37
    

    The effect will be like this:
    

    

    Animation Test
    

    Animation Test
    

    Animation Test
    

    Crazzy uhm?!
    

    jQuery.Animator plugin page
    

    Hugs for all
    
          
    
          
    
          articles —   6 comments
    
				
    
			
    
					
    
			  
    19
    May 08
    
				
    jQuery: Os Seletores (Selectors)
    
        
    :: articles :: by Gilberto Saraiva
    

				
    
					
    Camaradas,
    

    Seguindo uma ordem mais amigável sobre o assunto, neste artigo vou falar sobre o seletores(Selectors) do jQuery, o responsável pelo funcionamento das requisições. Como disse no artigo passado fazer uma requisição objetiva resultará em um melhor resultado, pra cada caso você poderá escrever diversos algoritmos para obter o mesmo resultado.
    

    Antes de começarmos, complementando as informações do artigo anterior, preciso lembrar-lhes que HTML é escrito com uma hierarquia, ou seja, os objetos podem ter Pai e podem ter Filhos. Basicamente a única TAG que não tem Pai é a < HTML >, pois ela inicia o documento HTML. Mas então, seguindo esse raciocínio podemos entender que as possibilidades de requisições objetivas são grandes, não dependendo apenas das propriedades que a TAG possuí.
    

    Um exemplo comum, os valiosos formulários:
    

     HTML |  copy code |? 
    01
    02
    <form action="#" method="POST" id="CadNews" onSubmit="return CheckForm()">
    03
     <label for="UserName">Seu nome</label><input type="text" id="UserName"><br>
    04
     <label for="UserEmail">Seu e-mail</label><input type="text" id="UserEmail"><br>
    05
     <input type="submit" value="Cadastrar">
    06
    </form>
    07
    <script language="JavaScript">
    08
    <!--
    09
      CheckForm = function(){
    10
        UserName = $("form#CadNews input#UserName").val();
    11
        UserEmail = $("form#CadNews input#UserEmail").val();
    12
        if((UserName != '') && (UserEmail != '')){
    13
          return true;
    14
        }else{
    15
          alert("Dados incompletos");
    16
          return false;
    17
        }
    18
      }
    19
    //-->
    20
    </script>

    
Aqui fazemos a checagem dos campos “Seu nome” e “Seu -email” para que se eles contiverem um valor diferente de vazio o form poderá ser submetido, caso contrário o form não efetuará processo algum além do usuário visualizar a mensagem: “Dados incompletos”.
    

    Veja que utilizamos alem do ID da Tag, fazemos uso também da estrutura, ou seja, além de procurarmos pelo ID, indicado pelo #, fazemos uso também da idenficação sequêncial, primeiro achamos o Form com o ID = CadNews e depois procuramos Input ID = UserName.
    

    Agora entendendo um pouco sobre os 3 Seletores (Selectors):
    

    Seletor de TagName [Ex: jQuery("DIV")]
    

    
O Seletor de TagName consiste em definir o tipo de requisição como busca por Elementos que são da Tag especificada. Exemplo:
    

     HTML |  copy code |? 
    1
    2
    <div>Texto</div>
    3
    <script language="JavaScript">
    4
    <!--
    5
      jQuery("div").html("Texto alterado.");
    6
    //-->
    7
    </script>

    
Então basicamente ele atua no TagName do elemento HTML.

    

    Seletor de ID [Ex: jQuery("#Status")]
    

    
O Seletor de ID consiste em definir o tipo de requisição como busca por Elementos que contenham o ID igual ao especificado. Exemplo:
    

     HTML |  copy code |? 
    1
    2
    <div id="Status">Não modificado.</div>
    3
    <script language="JavaScript">
    4
    <!--
    5
      jQuery("#Status").html("Modificado.");
    6
    //-->
    7
    </script>

    
Então basicamente ele atua nos Elementos que informam o ID, os que não informam não têm possibilidade de entrar no resultado da requisição por esse Seletor.

    

    Seletor de Classe [Ex: jQuery(".InputText")]
    

    
O Seletor de Classe consiste em definir o tipo de requisição como busca por Elementos que são da classe informada. Exemplo:
    

     HTML |  copy code |? 
    1
    2
    <input type="text" class="InputText" name="Date" value="Sem valor definido">
    3
    <script language="JavaScript">
    4
    <!--
    5
      jQuery(".InputText").val("18-05-2008");
    6
    //-->
    7
    </script>

    
Basicamente ele atua nos Elementos que pertencem a classe da requisição. Lembrando que um Elemento pode pertencer a várias classes.

    

    Agora uma pequena notação:
    

    Não é de hoje que, pra quem já desenvolve soluções para internet sabem, em CSS podemos selecionar todos os elementos atravez do * (asterisco), pois bem, no jQuery não é diferente. Como você devem ter notado ele atua atravez de requisições que por sua vez usa os seletores para os filtros, e que esse 3 seletores são identicos aos utilizados no CSS. O * (asterisco) não foge a regra do CSS, o uso é idéntico. Exemplo:
    

     HTML |  copy code |? 
    1
    2
    <div><span></span><div></div><div></div><span></span></div>
    3
    <script language="JavaScript">
    4
    <!--
    5
      jQuery("div *").html("Filho");
    6
    //-->
    7
    </script>

    
O resultado será o preenchimento com a palavra “Filho” de todos os elementos pertencentes ao DIV.
    

    Espero que tenham entendido essa parte, pois ela é de suma importância no bom entendimento e utilização do jQuery.
    

    
Próximo artigo:
    

  • Criando códigos facilitadores
    • 

    

    
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
    
				
    
			
    
					
    
			  
    17
    May 08
    
				
    jQuery: Tudo que você precisa é o link
    
        
    :: articles :: by Gilberto Saraiva
    

				
    
					
    Camaradas,
    

    Como tenho visto muita gente com problemas em relação a compatibilidade e outras coisas,
    
decidi manter a minha estrutura em relação ao jQuery fixa, como vai funcionar?
    
Vou manter o link baixo fixo:
    

     HTML |  copy code |? 
    1
    <script type="text/javascript" src="http://projects.pro.br/javascripts/jquery/"></script>
    

    Então pra você que está tendo dificuldade com o jQuery, você precisa somente de inserir esse código html na sua página e esquecer que ele existe, é só utilizar e ser feliz.
    

    Um exemplo:
    

     HTML |  copy code |? 
    1
    2
    <html>
    3
    <head>
    4
    <title></title>
    5
    <script type="text/javascript" src="http://projects.pro.br/javascripts/jquery/"></script>
    6
    <script language="JavaScript">
     Javascript |  copy code |? 
    01
    02
    <!--
    03
      jQuery(function($){
    04
        background = $.tocolor("#f99");
    05
        $.cssRule({"body":[
    06
          "{background:" + background.hexHTML() + "}",
    07
          {"span": [
    08
            "color",
    09
            {".italic": ["font-style","italic"]}
    10
          ]}
    11
        ]});
    12
     
    13
        $("span").css("position", "absolute");
    14
        $("span").css("left", "50%");
    15
      });
    16
    //-->
     HTML |  copy code |? 
    1
    2
    </script>
    3
    <body>
    4
    <span>texto <div class="italic">italic</div></span>
    5
    <div class="italic">no italic</div>
    6
    </body>
    7
    </html>
    8

    
Veja que este código vai funcionar utilizando o jquery que estou disponibilizando.
    

    Vou mante-lo atualizado, e funcional, sempre, pois utilizo ele em outros lugares. 
    

    Como este link possui além do jQuery alguns plugins utéis para mim e possivelmente para muitos de vocês, deixei uma forma para que você possa filtrar os plugins carregados:
    

    A lista de plugins (Vou manter essa lista sempre em atualizada)
    

      

    1. flydom
      
Carrega o plugin FlyDOM.
      2. 

    2. dimensions
      
Carrrega o plugin dimensions.
      3. 

    3. easing
      
Carrrega o plugin jQuery Easing.
      4. 

    4. cssRule
      
Carrrega o plugin jQuery.CssRule.
      5. 

    5. colors
      
Carrrega o plugin jQuery.Colors.
      6. 

    6. animator
      
Carrrega o plugin jQuery.Animator.
      7. 

    7. dynface
      
Carrrega o plugin jQuery.dynface.
      8. 

    

    Então para você obter o jQuery e algum desses plugins, a sintax abaixo podera ser alterada a seu modo:
    
http://projects.pro.br/javascripts/jquery/?cssRule=1&colors=1
    
Essa sintax carrega o jQuery e os plugins jQuery.CssRule e o jQuery.Colors.
    

    Outra maneira de não se perder com o passar do tempo é:
    

     Bash |  copy code |? 
    1
    http://projects.pro.br/javascripts/jquery/?flydom=0&dimensions=0&rule=0&easing=0&cssRule=1&colors=1&animator=0&dynface=0

    
Essa sintax faz a mesma coisa da anterior, mas mantem os plugins que você tem disponíveis para uso mas sem carrega-los, sendo indicado por =0.
    

    
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