Herberth Amaral » JavaScript http://herberthamaral.com Software development adventures Thu, 26 Aug 2010 13:59:42 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 [jQuery para apressados] Modularizando sua aplicação com Module Pattern e jQueryhttp://herberthamaral.com/2010/07/jquery-para-apressados-modularizando-sua-aplicacao-com-module-pattern-e-jquery/?utm_source=rss&utm_medium=rss&utm_campaign=jquery-para-apressados-modularizando-sua-aplicacao-com-module-pattern-e-jquery http://herberthamaral.com/2010/07/jquery-para-apressados-modularizando-sua-aplicacao-com-module-pattern-e-jquery/#comments Thu, 22 Jul 2010 09:58:21 +0000 Herberth Amaral http://herberthamaral.com/?p=647

O module pattern é um padrão de projetos para JavaScript que permite que você use closures autoexecutáveis para criação de “classes” com “atributos privados”.

Calma que eu explico :0)

O JavaScript não possui meios de declarar uma variável como “protected” ou “private”, como você costuma ver em linguagens como Java, C# e C++. Como uma forma de “proteger” alguns objetos de acesso externo, desenvolveu-se uma técnica chamada “module pattern”, que tem o poder de encapsular e restringir o acesso a tais objetos.

Antes de irmos para o module pattern, de uma olhada numa função autoexecutável:

(function(){
    alert('olá, mundo!');
}) ();

Interessante, não? Eu estou criando uma função e executando-a ao mesmo tempo. Note que eu posso passar um parâmetro pra ela se for necessário:

(function(nome){
    alert('Olá, '+nome+'!'); // Olá, Herberth
}) ('Herberth');

O module pattern funciona do mesmo jeito:

var CarrinhoDeCompras = (function(){
  var itens = [];  // variável "privada". Não pode ser acessada externamente

   function hasItem(item)
   {
         return jQuery.inArray(item,itens)!=-1;
   }

   function addItem(item)
   {
         if(!hasItem(item))
         {
              itens.push(item);
         }
         else
         {
              alert('Opa! O item '+item+' já está selecionado');
         }
   }

   function removeItem(item)
   {
         var position = jQuery.inArray(item,itens);
          if(hasItem(item))
         {
              delete itens[position];
         }
         else
            alert('Opa, não temos o item '+item+' no carrinho de compras')
   }
    // retorna um objeto com o que será visível pro mundo
    // note que o array itens não está incluído
    return {removeItem:removeItem,addItem:addItem};
})();

//poderíamos utilizar o código acima da seguinte forma:


CarrinhoDeCompras.addItem('Livro');
CarrinhoDeCompras.addItem('Caneca');
CarrinhoDeCompras.addItem('Livro'); //Opa, o item Livro já está adicionado

CarrinhoDeCompras.removeItem('Livro'); // remove ok
CarrinhoDeCompras.removeItem('Livro'); // Opa, não temos o item Livro no carrinho de compras

// mas não poderiámos fazer algo assim:

CarrinhoDeCompras.itens.push('Camiseta');

Neste caso, eu estou retornando um objeto contendo a referências das funções que eu declarei dentro da minha função autoexecutável. Perceba que, em hipótese alguma, eu conseguiria acessar diretamente o conteúdo/valor do array itens, pois eu não tenho uma referência dele externamente.

Isto é algo importante, por dois motivos:

  1. Se você estiver num time de desenvolvimento e desenvolver um módulo utilizando o module pattern, o desenvolvedor que pegar o seu módulo para utilizar saberá o que ele pode e o que não pode acessar.
  2. Você previne que aquele engraçadinho que sabe usar o Firebug mexa nos seus objetos em tempo de execução.

Onde o jQuery entra nesta história?

O jQuery entra principalmente na parte em que começamos a trabalhar com eventos customizados. Estes eventos customizados podem funcionar como um meio de comunicação entre os módulos da aplicação, sem que um conheça necessariamente o outro. O que é necessário que cada módulo saiba é como utilizar os eventos.

Continuando o exemplo anterior:

var CarrinhoDeCompras = (function(){
  var itens = [];  // variável "privada". Não pode ser acessada externamente
   function hasItem(item)
   {
         return jQuery.inArray(item,itens)!=-1;
   }

   function addItem(item)
   {
         if(!hasItem(item))
         {
              itens.push(item);
         }
         else
         {
              alert('Opa! O item '+item+' já está selecionado');
         }
   }

   function removeItem(item)
   {
         var position = jQuery.inArray(item,itens);
          if(hasItem(item))
         {
              delete itens[position];
         }
         else
            alert('Opa, não temos o item '+item+' no carrinho de compras')
   }


   function finalizarCompras()
   {
        // dispara o evento "finalizaCompras"
        // quem estiver "ouvindo" este evento, receberá os itens como argumento
        $(document).trigger("finalizaCompras",itens);
   }

   function init() { } // algum código de inicialização
   
    // retorna um objeto com o que será visível pro mundo
    // note que o array itens não está incluído
    return {removeItem:removeItem,addItem:addItem,init:init};
})();


var Services = (function(){
     
     function finalizarCompras(event,itens) // função "privada". Não pode ser acessada externamente
     {
          // envia os itens por AJAX e faz algum tratamento.
     }

     function init()
     {
           // "escuta" pelo evento finalizaCompras
           // quando o mesmo for disparado, a função finalizarCompras será executada
           // com os parâmetros do evento
           $(document).bind("finalizaCompras",finalizarCompras);
     }

     return {init:init};
})();


$(document).ready(function(){
     //inicializamos os módulos e colocamos os manipuladores de eventos.
     CarrinhoDeCompras.init();
     Services.init();
});

Whoa! Conseguimos desacoplar nossa aplicação utilizando eventos customizados.

Um módulo não conhece o outro, mas os mesmos se comunicam através de eventos. Note que a única coisa comum entre os módulos é o nome do evento utilizado para finalizar a compra.

Fazendo um paralelo com Programação Orientada a Objetos, os eventos seriam nossa Interface, neste caso.

Seria possível ainda, o módulo Service disparar um evento para avisar o CarrinhoDeCompras quando a transação for completada.

Interessante, não? :-)

Posts relacionados:

  1. [jQuery para apressados] Tratamento básico de eventos
  2. [jQuery para apressados] – Entendendo seletores
  3. [jQuery para apressados] – Trabalhando com eventos customizados

]]> http://herberthamaral.com/2010/07/jquery-para-apressados-modularizando-sua-aplicacao-com-module-pattern-e-jquery/feed/ 0 [jQuery para apressados] Efeitos e animações avançadashttp://herberthamaral.com/2010/07/jquery-para-apressados-efeitos-e-animacoes-avancadas/?utm_source=rss&utm_medium=rss&utm_campaign=jquery-para-apressados-efeitos-e-animacoes-avancadas http://herberthamaral.com/2010/07/jquery-para-apressados-efeitos-e-animacoes-avancadas/#comments Wed, 21 Jul 2010 10:42:24 +0000 Herberth Amaral http://herberthamaral.com/?p=636 No post anterior, eu mostrei alguns efeitos e animações básicas que o jQuery oferece. Neste post eu vou mostrar algumas outras funcionalidades mais avançadas.

Encadeando efeitos

Os métodos de efeitos do jQuery permitem que você passe uma função de callback como argumento para serem executados assim que os efeito termine. Esta funcionalidade nos permite encadear efeitos:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
      $('a').slideUp(1000,function() {  $(this).slideDown(1000) });
});
</script>

Você não precisa especificar o tempo de duração do evento: basta passar a função de callback para que a mesma seja executada ao final do evento. Esta estratégia funciona para os métodos $.hide, $.show, $.slideUp, $.slideDown, $.slideToggle, $.fadeIn,$.fadeOut e $.fadeToggle.

Animações customizadas com o $.animate

O jQuery faz as animações customizadas através das propriedades que você quer que ele anime, de uma duração (opcional), de uma função de animação (já pré-definida no jquery - opcional) e de um callback (também opcional) para ser executado quando a animação acabar. Um exemplo bem básico do .animate:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
      $('a').animate({'font-size':'15px'});
});
</script>

O animate permite que você especifique a duração da animação e permite que você passe N propriedades para se animar:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
      $('a').animate({'font-size':'15px','opacity':'0.4'},2000);
});
</script>
Como funções de 'easing', você pode utilizar as funções 'linear' e a 'swing', que são funções básicas. Alguns plugins, como o jQuery UI, permitem a animação de propriedades como a cor da fonte e outras funções de animação.O método $.animate é deveras complexo. Dê uma olhada nadocumentação oficial se você precisar de algo a mais.See ya! [inline][/inline]

Posts relacionados:

  1. [jQuery para apressados] Efeitos e animações básicas
  2. [jQuery para apressados] – Iniciando com jQuery
  3. [jQuery para apressados] – Entendendo seletores

]]> http://herberthamaral.com/2010/07/jquery-para-apressados-efeitos-e-animacoes-avancadas/feed/ 0 [jQuery para apressados] Efeitos e animações básicashttp://herberthamaral.com/2010/07/jquery-para-apressados-efeitos-e-animacoes-basicas/?utm_source=rss&utm_medium=rss&utm_campaign=jquery-para-apressados-efeitos-e-animacoes-basicas http://herberthamaral.com/2010/07/jquery-para-apressados-efeitos-e-animacoes-basicas/#comments Tue, 20 Jul 2010 10:44:25 +0000 Herberth Amaral http://herberthamaral.com/?p=631 Apesar do jQuery ter uma enorme lista de plugins para efeitos, ele possui um framework básico de eventos que serve para 80-90% dos casos que eu vejo.

Métodos básicos

Os métodos básicos escondem e mostram elementos utilizando alguns efeitos. Dê uma olhada no método hide e no show:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
      $('a').hover(function(){ $(this).hide(1000) })
             .mouseout(function(){ $(this).show(1000) } );
});
</script>
O que eu faço no código acima é aplicar duas funções, uma para quando o mouse estiver sobre um link (elemento 'a') e outra para quando o mouse sair de cima. Nas duas eu coloco a função hide e show com um argumento que diz pro jQuery quanto tempo que a animação deve durar.

Nota: estes métodos são "sobrecarregados". Se você não passar nenhum valor como argumento, o elemento será mostrado/escondido sem animações.

slideDown e slideUp

Esconde e mostra (respectivamente) elementos utilizando o efeito slide. O uso é simples:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
      $('a').hover(function(){ $(this).slideUp() })
             .mouseout(function(){ $(this).slideDown() } );
});
</script>
Estes métodos também aceitam um argumento numérico que especifica a duração do evento.

fadeOut e fadeIn

Esconde e mostra (respectivamente) elementos ajustando a sua transparência até desaparecerem/aparecerem por completo. O uso é bem simples também:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
      $('a').hover(function(){ $(this).fadeOut() })
             .mouseout(function(){ $(this).fadeIn() } );
});
</script>
Assim como o slideUp e slideDown, eles também suportam um argumento numérico que especifica a duração do evento.

Os métodos toggle

O toggle é um utilitário do jQuery que lhe permite mostrar/esconder elementos sem consultar se o mesmo está visível ou não. Ou seja, ao invés de fazer algo assim:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

      $('h1').hover(function(){
           if( $('p:visible').length == 0) //nenhum p visível
               $('p').show()
           else
               $('p').hide()
       });

});
</script>
Você pode fazer algo assim:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

      $('h1').hover(function(){
           $('p').toggle();
       });

});
</script>
O mais interessante é que os outros métodos de efeitos possuem uma 'versão toggle': slideToggle, fadeToggle. Estes eu deixo pra você testar :DNo próximo post eu vou falar sobre callbacks de efeitos, encadeamento de efeitos e efeitos avançados. See ya![inline][/inline]

Posts relacionados:

  1. [jQuery para apressados] Efeitos e animações avançadas
  2. [jQuery para apressados] – Entendendo seletores
  3. [jQuery para apressados] – Iniciando com jQuery

]]> http://herberthamaral.com/2010/07/jquery-para-apressados-efeitos-e-animacoes-basicas/feed/ 0 [jQuery para apressados] – Trabalhando com eventos customizadoshttp://herberthamaral.com/2010/07/jquery-para-apressados-trabalhando-com-eventos-customizados/?utm_source=rss&utm_medium=rss&utm_campaign=jquery-para-apressados-trabalhando-com-eventos-customizados http://herberthamaral.com/2010/07/jquery-para-apressados-trabalhando-com-eventos-customizados/#comments Mon, 19 Jul 2010 09:15:49 +0000 Herberth Amaral http://herberthamaral.com/?p=619 Eventos customizados em JavaScript podem trazer algumas possibilidades legais: imagine que você tenha uma grande aplicação em JavaScript dividida em módulos. Você pode diminuir o acoplamento entre eles utilizando eventos customizados para comunicação inter-módulos. Neste post, eu vou mostrar como você pode aproveitar as facilidades do jQuery para uso de eventos customizados

Let's pull the $.trigger

O método trigger serve para lançar eventos e toma como parâmetro o nome do evento. Por exemplo:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('form input[type=submit]').trigger('click');
});
</script>
O que isto vai fazer terá o mesmo efeito de um usuário clicando em todos os botões de submit de todos os formulários do documento: basicamente, irá disparar o evento "click" para todos os botões submit dos formulários.Você pode lançar os eventos padrões do jQuery somente chamando os métodos de atalho sem argumentos, por exemplo:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
   
   // mesma coisa de $('form input[type=submit]').trigger('click');
   $('form input[type=submit]').click();
});
</script>
Você ainda pode passar argumentos customizados para a função manipuladora do evento, como neste exemplo adaptado da documentação oficial do jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('button[name=executeEvent]').bind('custom', function(event, param1, param2) {
      alert(param1 + "\n" + param2);
    });

    $('button[name=executeEvent]').trigger('custom', ['Evento', 'Customizado']);
});
</script>

Neste caso, já estamos fazendo uso de um evento customizado: você pode passar qualquer string como argumento do trigger e do bind e voilà, você tem um evento customizado! Vale notar que, o jQuery não possui métodos de atalho (como o $.click()) para eventos customizados, mas nada impede que você mesmo os crie.

Nota: No exemplo do botão acima, eu tive que colocar um bind para o evento click e dentro do evento click eu disparo o evento 'custom'. Isso não afeta o comportamento do evento customizado, apenas fiz assim para poder demonstrar melhor.

No próximo post farei uma introdução ao module pattern e mostrarei como você pode desacoplar sua aplicação JavaScript usando custom events. Até mais![inline][/inline]

Posts relacionados:

  1. [jQuery para apressados] Tratamento básico de eventos
  2. [jQuery para apressados] Tratamento avançado de eventos
  3. [jQuery para apressados] – Iniciando com jQuery

]]> http://herberthamaral.com/2010/07/jquery-para-apressados-trabalhando-com-eventos-customizados/feed/ 0 [jQuery para apressados] Tratamento básico de eventoshttp://herberthamaral.com/2010/07/jquery-para-apressados-tratamento-basico-de-eventos/?utm_source=rss&utm_medium=rss&utm_campaign=jquery-para-apressados-tratamento-basico-de-eventos http://herberthamaral.com/2010/07/jquery-para-apressados-tratamento-basico-de-eventos/#comments Fri, 16 Jul 2010 09:45:25 +0000 Herberth Amaral http://herberthamaral.com/?p=610 Um evento é uma ação que geralmente é iniciada fora do escopo de um programa e que é manipulado por uma parte do códigod dentro do programa [Wikipedia]. Um evento pode ser o clique do usuário de um botão, o pressionar de uma tecla do teclado ou uma resposta de uma requisição do servidor.Dê uma olhada como você pode manipular um clique a um botão:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function()
{
     $('#enviarDados').click(function()
     {
           alert('Enviando dados...');
     });
});

</script>
O que você basicamente faz aí em cima é dizer pro jQuery: execute esta função que eu estou passando como argumento do método click quando o(s) elemento(s) que atendem ao seletor #enviarDados for clicado.Naturalmente, você pode separar um pouco mais as coisas:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

enviarDados = function()
{
    alert('Enviando dados');
}

$(document).ready(function()
{
     $('#enviarDados').click(enviarDados);
});

</script>
Além do click, o jQuery tem muitos outros métodos para tratamento de evento. Dentre eles se destacam:
  • hover - quando o mouse for passado sobre o elemento
  • blur - quando o elemento perder o foco
  • focus - quando o elemento de formulário ou link ganhar foco
  • change - quando um elemento de formulário for mudado
  • mousedown - quando clicarem (sem necessariamente "soltar" o mouse) sobre o elemento
  • mouseup - quando "soltarem" o mouse depois de clicado no elemento
  • E muitos outros

Usando o bind

Todos os métodos acima descritos são métodos "atalho" e todos eles utilizam o método bind para mapear eventos. Ele possui uma argumento extra que eu gosto de utilizar de vez em quando: a passagem de dados para o tratador do evento. Exemplo:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

enviarDados = function(event)
{
    var dados = event.data;
    alert('Enviando dados. Dados enviados:'+dados);
}

$(document).ready(function()
{
     $('#enviarDados').bind('click','Dado que vai para a função que trata o evento',enviarDados);
});

</script>
De vez em quando, precisamos remover tratadores de eventos de alguns elementos. Isso é feito com o método unbind:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

enviarDados = function(event)
{
    var dados = event.data;
    alert('Enviando dados. Dados enviados:'+dados);
    $(this).unbind('click');
}

$(document).ready(function()
{
     $('#enviarDados').bind('click','Dado que vai para a função que trata o evento',enviarDados);
});

</script>
Note a palavra chave this na função que trata o evento: neste contexto, ela simboliza o elemento que sofreu o evento (no nosso caso, o elemento que contém o id="enviarDados")O que eu fiz acima foi remover o tratamento do evento 'click' para o elemento que foi clicado. Neste caso, o tratamento deste evento irá acontecer somente uma vez. Se eu chamasse o método unbind sem nenhum argumento, eu removeria todos os eventos atrelados a ele:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

enviarDados = function(event)
{
    var dados = event.data;
    alert('Enviando dados. Dados enviados:'+dados);
    $(this).unbind(); //remove todos os eventos
}

$(document).ready(function()
{
     $('#enviarDados').bind('click','Dado que vai para a função que trata o evento',enviarDados);
});

</script>
Você ainda pode remover somente uma das funções que tratam um determinado evento. Suponhamos que você, por qualquer motivo, tenha mais de uma função tratando o mesmo evento no mesmo elemento e quer remover somente uma função: há um terceiro argumento no unbind que permite remover somente uma função:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
enviarDados = function(event)
{
    var dados = event.data;
    alert('Enviando dados. Dados enviados:'+dados);
    $(this).unbind('click',enviarDados); // remove o tratamento do evento click pela função
                                                    // enviarDados
}

$(document).ready(function()
{
     $('#enviarDados').bind('click','Dado que vai para a função que trata o evento',enviarDados);
});

</script>
Legal, né? :DAmanhã falarei sobre tratamento avançado de eventos e eventos customizados. See ya!

Posts relacionados:

  1. [jQuery para apressados] Tratamento avançado de eventos
  2. [jQuery para apressados] – Trabalhando com eventos customizados
  3. [jQuery para apressados] – Iniciando com jQuery

]]> http://herberthamaral.com/2010/07/jquery-para-apressados-tratamento-basico-de-eventos/feed/ 2 [jQuery para apressados] – Entendendo seletoreshttp://herberthamaral.com/2010/07/jquery-para-apressados-entendendo-seletores/?utm_source=rss&utm_medium=rss&utm_campaign=jquery-para-apressados-entendendo-seletores http://herberthamaral.com/2010/07/jquery-para-apressados-entendendo-seletores/#comments Thu, 15 Jul 2010 11:11:35 +0000 Herberth Amaral http://herberthamaral.com/?p=585 Uma das especialidades do jQuery é selecionar um conjunto de elementos e aplicar algum dos seu métodos sobre eles. "Seletores" são formas de você selecionar um ou mais elementos dentro do seu documento HTML com o intuito de aplicar algum método do jQuery sobre ele. Por exemplo:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function)
{
    $('a').hide(); //seleciona todos os links e os esconde
});
</script>
O código acima é fictício, mas seve para ilustrar. No jQuery, 90% (ou mais) do que você faz o tempo inteiro é selecionar um elemento e fazer alguma coisa com ele.Os seletores do jQuery são bem poderosos. Dê uma olhada nestes exemplos:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function)
{
    $('table a').hide(); //seleciona todos os links dentro de tabelas e os esconde
   
    $('input[name=email]').val(''); //seleciona todos os inputs que tenham a
                                             //propriedade name=email e apaga seus respectivos conteúdos
   
    $('#content').show(); //seleciona o elemento com o id content e o exibe
    $('div.item').remove(); //seleciona todas as divs que possuem a classe item e as remove
    $('.item').remove(); //seleciona todos os elementos com a classe item e os remove
   
    $('.item:first').slideUp(); //seleciona o primeiro elemento com a classe
                                      //item e aplica uma animação para faze-lo desaparecer
   
    $('div:eq(5) a.marcado[rel^=bookmark]').slideDown(); // seleciona todos os links
                     // em que o atributo rel que comecem com bookmark e que tenham
                     // a classe marcado e que estejam dentro da quinta div dentro do
                     //documento e aplica uma animação para o(s) link(s) aparecer(em)
});
</script>
Como mostrado acima, você pode selecionar elementos pela sua tag, classe, id, propriedade e posição. Achou poderoso? Espere só até ver a documentação oficial de todos os seletores do jQuery! :D

Live example! Teste aqui mesmo alguns seletores!

$.slideUp();

[inline][/inline]

Posts relacionados:

  1. [jQuery para apressados] – Iniciando com jQuery
  2. [jQuery para apressados] Tratamento básico de eventos
  3. [jQuery para apressados] Efeitos e animações básicas

]]> http://herberthamaral.com/2010/07/jquery-para-apressados-entendendo-seletores/feed/ 2 [jQuery para apressados] – Iniciando com jQueryhttp://herberthamaral.com/2010/07/jquery-para-apressados-iniciando-com-jquery/?utm_source=rss&utm_medium=rss&utm_campaign=jquery-para-apressados-iniciando-com-jquery http://herberthamaral.com/2010/07/jquery-para-apressados-iniciando-com-jquery/#comments Wed, 14 Jul 2010 14:20:59 +0000 Herberth Amaral http://herberthamaral.com/?p=576 Como minha monografia está me apertando agora, eu pretendo fazer uma série de posts (curtos, frequentes e regulares) sobre dicas simples para jQuery. Partindo do início, este é um post de nível básico se trata de como se iniciar com jQuery. Pra ajudar, eu vou dedicar um pomodoro para cada post :D

O que é jQuery?

jQuery é basicamente uma biblioteca JavaScript que torna o desenvolvimento para JavaScript mais fácil, produtivo e divertido. Ele contém vários métodos úteis para, principalmente, manipulação de elementos , ajax e eventos. A página inicial é a http://jquery.com/

Hello jQuery!

Primeiro, você precisa inserir o jQuery no seu HTML. Coloque o código abaixo antes do </body>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
Estamos inserindo o jQuery diretamente do CDN do Google, na versão 1.4.2. Você pode colocar qualquer versão do jQuery no seu código, basta trocar a parte "1.4.2" do caminho por um novo número de versão. Feito isso, você pode fazer o nosso Hello World com jQuery (note que eu estou colocando o código depois que eu adicionei o jQuery na página):
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
   alert('Hello, world!');
});
</script>
Simples, não? O que acabou de ser feito foi um simples seleção ($(document)) e aplicação do evento 'ready'. Como argumento para o método ready, passamos uma função que vai servir para fazer o tratamento do evento ready, ou seja, a função que será executada quando o documento for carregado.

Fazendo de outras formas

Se você quiser separar a função de callback (esta função que você passa como argumento para o ready), você ainda pode fazer desta forma:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
minhaFuncao = function()
{
   alert('Hello, world!');
}

$(document).ready(minhaFuncao);
</script>
Se você tiver algum problema com o $, há a possibilidade de utilizar a função jQuery para substitui-lo:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
minhaFuncao = function()
{
   alert('Hello, world!');
}

jQuery(document).ready(minhaFuncao);
</script>
No próximo post eu falarei um pouco sobre seletores. Até mais!

Posts relacionados:

  1. [jQuery para apressados] Efeitos e animações avançadas
  2. [jQuery para apressados] Tratamento básico de eventos
  3. [jQuery para apressados] – Trabalhando com eventos customizados

]]> http://herberthamaral.com/2010/07/jquery-para-apressados-iniciando-com-jquery/feed/ 1 [Atualizado] Tradução do Livro jQuery Fundamentals – Ajude você também!http://herberthamaral.com/2010/06/traducao-do-livro-jquery-fundamentals-ajude-voce-tambem/?utm_source=rss&utm_medium=rss&utm_campaign=traducao-do-livro-jquery-fundamentals-ajude-voce-tambem http://herberthamaral.com/2010/06/traducao-do-livro-jquery-fundamentals-ajude-voce-tambem/#comments Wed, 23 Jun 2010 11:11:15 +0000 Herberth Amaral http://herberthamaral.com/?p=546 Depois de um jejum do meu blog eu volto a postar com algumas novidades bacanas: o Elvis Guimarães e eu estamos traduzindo o livro jQuery Fundamentals para pt-BR.Além de contribuir com o conhecimento Open Source, meu objetivo é incentivar o uso deste material nas minhas aulas de jQuery e dar uma mãozinha em quem está começando com JavaScript/jQuery/front-end development.O repositório está disponível em http://github.com/herberthamaral/jqfundamentals. Estou aguardando seu fork :)P.S: Se você não sabe como o Git e o GitHub funcionam, eu recomendo a leitura do Micro tutorial de Git do Fabio Akita Há um vídeo dele também ensinando como colaborar num projeto no GitHub.P.P.S: O Diego Caxito escreveu um post sobre a 0º versão do evento.

Sem posts relacionados.

]]> http://herberthamaral.com/2010/06/traducao-do-livro-jquery-fundamentals-ajude-voce-tambem/feed/ 2 HTML5, iPads… a Web realmente precisa do Flash?http://herberthamaral.com/2010/04/html5-ipads-a-web-realmente-precisa-do-flash/?utm_source=rss&utm_medium=rss&utm_campaign=html5-ipads-a-web-realmente-precisa-do-flash http://herberthamaral.com/2010/04/html5-ipads-a-web-realmente-precisa-do-flash/#comments Wed, 07 Apr 2010 00:27:18 +0000 Herberth Amaral http://herberthamaral.com/?p=351 Resposta curta: sim, precisa.

Milhões de Websites usam Flash. Acostume-se com os legos azuis.

Resposta longa: O iPad precisa da Web, mas a Web não precisa do iPad. E os únicos que perdem com essa atitude protecionista são os usuários do iPad. O que seu avô, que ama o iPad, diria sobre o mesmo quando não conseguir vários sites corretamente por falta do Flash? :-PImaginem vocês o time do FarmVille (ou seu clone, o Colheita Feliz, do Orkut) portando seus jogos para HTML5, um padrão que vai sair mesmo em 2022 ou 2023. Sinceramente, HTML5+JS têm seu lugar e na maioria das vezes conseguem fazer o que o Flash faz, mas a um custo bem maior. Custo de tempo, já que nem todos os browsers seguem os padrões, de dinheiro, pois o custo de desenvolvimento é maior, e o custo de adaptação do código, pois várias apps terão que ser reescritas.Uma pergunta que não quer calar: e sobre o Silverlight, será se o iPad suportará? Ambas, Flash e Silverlight, são plataformas incríveis para desenvolvimento de aplicações ricas para Internet e evoluem numa velocidade no mínimo razoável. Seria interessante se pelo menos uma das duas pudessem aparecer no iPad, apesar da grande limitação de conteúdo e usuários do Silverlight.E não é somente com as apps que o problema reside: há também a questão dos vídeos no HTML5. O Flash é uma plataforma gratuita com especificações abertas. Você pode embutir vídeo usando HTML5, mas é o browser que tem que se preocupar em reproduzir o mesmo. Aí é que vem o problema: e se o codec do vídeo for proprietário (como é o caso do H.264, um codec proprietário e que não é gratuito e que  Apple está utilizando)? IMHO, isso é um retrocesso.Eu até admiro a decisão de Steve Jobs de boicotar o Flash em alguns dos seus produtos, de peitar todo mundo para tentar fazer seu produto mais "estável" (com todas as aspas possíveis),  mas se eu compro um produto, não quero que um pai venha junto no pacote falando o que eu posso ou não posso fazer.

Sem posts relacionados.

]]> http://herberthamaral.com/2010/04/html5-ipads-a-web-realmente-precisa-do-flash/feed/ 2 Plugins indispensaveis para desenvolvimento com jQueryhttp://herberthamaral.com/2010/04/plugins-indispensaveis-para-desenvolvimento-com-jquery/?utm_source=rss&utm_medium=rss&utm_campaign=plugins-indispensaveis-para-desenvolvimento-com-jquery http://herberthamaral.com/2010/04/plugins-indispensaveis-para-desenvolvimento-com-jquery/#comments Sat, 03 Apr 2010 20:13:19 +0000 Herberth Amaral http://herberthamaral.com/?p=320
jquery-logoAlgumas pessoas já me perguntaram quais são os plugins que eu mais uso quando estou desenvolvendo em JavaScript usando jQuery. Bem, aí vai a lista:1 - Autocomplete.jquery-autocomplete Estupidamente fácil e intuitivo de usar, o autocomplete é o primeiro plugin que eu coloco na pasta de Scripts (isso quando eu não posso usar umCDN). É difícil eu me deparar com alguma aplicação que eu não o use. A documentação oficial disponível não é lá das melhores, mas há várias páginas na Web falando sobre o assunto.

Página oficial | Demo

2 - Datatablesjquery-datatables Na minha humilde opinião, o melhor plugin de tabelas para jQuery. Com ele você pode criar uma tabela dinâmica com paginação, busca e ordenação e usando AJAX em pouquíssimas linhas de código. O único problema é que a convenção de código dele não segue tanto a convenção usada pelo jQuery ou por outros plugins (normalmente nota-se isso quando se precisa fazer algo mais complexo). O mais interessante é que ele está em constante desenvolvimento e apresenta melhoras bem significativas a cada nova versão.

Página oficial | Demo

3 - Validator Do mesmo cara que criou o plugin do autocomplete, o jQuery validator é outro must-have na sua toolbox. Quem já fez validação de formulários em JavaScript na unha, sabe que esse plugin também é um salvador de vidas. Assim como o autocomplete, o validator não tem uma documentação oficial muito boa, mas é bem intuitivo e fácil de usar.

Página oficial | Demo

4 - jQueryTools Mesmo com a nem-tão-verdadeira promessa de conter todas essas ferramentas em míseros 5.76 KB, o jQuery Tools é uma excelente ferramenta que até certo ponto é concorrente do jQueryUI. Com diversos componentes, como tabs, tooltips, exposé e overlay, o trabalho com jQuery se torna muito mais poderoso e divertido com essa ferramenta.

Página inicial | Demo

5 - jQuery UI Por último, mas não mais importante: o jQueryUI. A versão 1.8.2 está bem completa e pra você que não gosta de ficar perdendo tempo desenhando janelinhas modais usando o lightbox, ou de fazer menus razoáveis (seja no estilo accordion ou tabs), o jQueryUI é pra você. Extremamente poderoso e simples de usar (assim como a maioria dos plugins decentes pra jQuery), o jQueryUI facilita muito a vida de pessoas que precisam de uma interface mais poderosa mas sem gastar muito tempo elaborando-a.

Página inicial | Demo

6 - FireQuery Esse não é um plugin para jQuery na verdade, mas um plugin para o Firefox (melhor browser para desenvolvedores IMO) que dá uma mão e tanto na hora de trabalhar com jQuery no Firefox. Um dos principais recursos é o jQuerify, que adiciona o jQuery numa página que não o possui. Extremamente útil quando se sabe usar o console do Firebug. Além disso, ele mostra todos os elementos que possuem um EventListener usando o jQuery. Muito legal.

Página inicial | Demo

Mande sugestões de outros plugins indispensáveis para jQuery! See ya!

Posts relacionados:

  1. [jQuery para apressados] Efeitos e animações avançadas
  2. [jQuery para apressados] – Iniciando com jQuery
  3. [jQuery para apressados] – Entendendo seletores

]]> http://herberthamaral.com/2010/04/plugins-indispensaveis-para-desenvolvimento-com-jquery/feed/ 4