GSaraiva's Projects » jQuery http://projects.pro.br/gsaraiva Step by step Tue, 01 Sep 2009 13:14:24 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 jQuery: Criando códigos facilitadores http://projects.pro.br/gsaraiva/2008/06/jquery-criando-codigos-facilitadores/ http://projects.pro.br/gsaraiva/2008/06/jquery-criando-codigos-facilitadores/#comments Mon, 16 Jun 2008 02:14:48 +0000 Gilberto Saraiva http://gsaraiva.projects.pro.br/?p=97 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:

  1. <script language="JavaScript">
  2. <!--
  3.   Person = function(AData){
  4.     sData = ("" + AData).split(";");
  5.     this.data.Name = sData[0];
  6.     this.data.Age = parseInt(sData[1]);
  7.     this.data.Job = sData[2];
  8.   }
  9.   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

  2. <script language="JavaScript">
  3. <!--
  4.   window.onload = function(){
  5.     Blink = document.getElementById("Blink");
  6.     setInterval(function(){
  7.       with(Blink.style)
  8.         display = (display == "block") ? "none" : "block";
  9.     }, 250);
  10.   }
  11. //-->
  12. </script>
  13. <body>
  14. <div id="Blink">Texto</div>
  15. </body>

jQuery

  2. <script language="JavaScript">
  3. <!--
  4.   $(function(){
  5.     $Blink = $("#Blink");
  6.     setInterval(function(){
  7.        $Blink.toggle();
  8.     }, 250);
  9.   });
  10. //-->
  11. </script>
  12. <body>
  13. <div id="Blink">Texto</div>
  14. </body>
Como listar elementos HTML pela tag?
JavaScript puro

  2. <script language="JavaScript">
  3. <!--
  4.   window.onload = function(){
  5.     elems = document.getElementsByTagName("DIV");
  6.     alert(elems.length + ' DIVs foram encontrados');
  7.     for(i = 0; i < elems.length; i++)
  8.       alert(elems[i].innerHTML);
  9.   }
  10. //-->
  11. </script>
  12. <body>
  13. <div>Texto 1</div>
  14. <div>Texto 2</div>
  15. <div>Texto 3</div>
  16. </body>

jQuery

  2. <script language="JavaScript">
  3. <!--
  4.   $(function(){
  5.     $elems = $("DIV"); 
  6.     alert($elems.length);
  7.     $elems.each(function(){
  8.       alert(this.innerHTML);
  9.     });
  10.   });
  11. //-->
  12. </script>
  13. <body>
  14. <div>Texto 1</div>
  15. <div>Texto 2</div>
  16. <div>Texto 3</div>
  17. </body>
Como posso listar todos os links contidos na minha página?
JavaScript puro

  2. <script language="JavaScript">
  3. <!--
  4.   window.onload = function(){
  5.     aTags = document.getElementsByTagName("A");
  6.     Hrefs = "";
  7.     for(i = 0; i < aTags.length; i++)
  8.       Hrefs += aTags[i].innerHTML + "\n   link: " + aTags[i].href + "\n";
  9.     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>

jQuery

  2. <script language="JavaScript">
  3. <!--
  4.   $(function(){
  5.     Hrefs = "";  
  6.     $("A").each(function(){
  7.       Hrefs += this.innerHTML + "\n   link: " + this.href + "\n";
  8.     });
  9.     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>

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.

    ]]>     http://projects.pro.br/gsaraiva/2008/06/jquery-criando-codigos-facilitadores/feed/ 0     jQuery: jQuery.Animator http://projects.pro.br/gsaraiva/2008/05/jquery-jqueryanimator/ http://projects.pro.br/gsaraiva/2008/05/jquery-jqueryanimator/#comments Fri, 23 May 2008 11:04:24 +0000 Gilberto Saraiva http://gsaraiva.projects.pro.br/?p=43 Folks,

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

    the example:

    2. <html>
    3. <head>
    4. <title></title>
    5. <script type="text/javascript" src="jquery-1.2.5.js"></script>
    6. <script type="text/javascript" src="jquery.animator.js"></script>
    7. <script language="JavaScript">
    8. <!--
    9.   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>

    The effect will be like this:

    Animation Test
    Animation Test
    Animation Test

    Crazzy uhm?!

    jQuery.Animator plugin page

    Hugs for all

    ]]>     http://projects.pro.br/gsaraiva/2008/05/jquery-jqueryanimator/feed/ 6     jQuery: Os Seletores (Selectors) http://projects.pro.br/gsaraiva/2008/05/jquery-os-seletores-selectors/ http://projects.pro.br/gsaraiva/2008/05/jquery-os-seletores-selectors/#comments Mon, 19 May 2008 16:50:06 +0000 Gilberto Saraiva http://gsaraiva.projects.pro.br/?p=19 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:

    2. <form action="#" method="POST" id="CadNews" onSubmit="return CheckForm()">
    3.  <label for="UserName">Seu nome</label><input type="text" id="UserName"><br>
    4.  <label for="UserEmail">Seu e-mail</label><input type="text" id="UserEmail"><br>
    5.  <input type="submit" value="Cadastrar">
    6. </form>
    7. <script language="JavaScript">
    8. <!--
    9.   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:
    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:
    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:
    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:

    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.

    ]]>     http://projects.pro.br/gsaraiva/2008/05/jquery-os-seletores-selectors/feed/ 0     jQuery: Tudo que você precisa é o link http://projects.pro.br/gsaraiva/2008/05/jquery-tudo-que-voce-precisa-e-o-link/ http://projects.pro.br/gsaraiva/2008/05/jquery-tudo-que-voce-precisa-e-o-link/#comments Sat, 17 May 2008 14:27:49 +0000 Gilberto Saraiva http://gsaraiva.projects.pro.br/?p=21 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:

    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:

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

    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. dimensions
      Carrrega o plugin dimensions.
    3. easing
      Carrrega o plugin jQuery Easing.
    4. cssRule
      Carrrega o plugin jQuery.CssRule.
    5. colors
      Carrrega o plugin jQuery.Colors.
    6. animator
      Carrrega o plugin jQuery.Animator.
    7. dynface
      Carrrega o plugin jQuery.dynface.

    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 é:

    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.

    ]]>     http://projects.pro.br/gsaraiva/2008/05/jquery-tudo-que-voce-precisa-e-o-link/feed/ 0