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 Quando uma deficiência pode se tornar uma feature numa linguagem de programaçãohttp://herberthamaral.com/2010/07/quando-uma-deficiencia-pode-se-tornar-uma-feature-numa-linguagem-de-programacao/?utm_source=rss&utm_medium=rss&utm_campaign=quando-uma-deficiencia-pode-se-tornar-uma-feature-numa-linguagem-de-programacao http://herberthamaral.com/2010/07/quando-uma-deficiencia-pode-se-tornar-uma-feature-numa-linguagem-de-programacao/#comments Thu, 29 Jul 2010 13:34:55 +0000 Herberth Amaral http://herberthamaral.com/?p=665

Estava lendo um antigo post do Obie Fernandez onde ele lista várias razões do porquê Java é uma porcaria (em tom de brincadeira, claro =). Numa das razões citadas por ele, há o seguinte trecho:

8 ) Java has good debugging support

Java has great and powerful debugging (which is very necessary since most Java code sucks so much ass). Ruby has ridiculously pitiful debugging support, which means our code actually needs to be well-tested and readable.

Traduzindo:

8 ) Java possui um bom suporte a debugging

Java possui um excelente e poderoso debugging (o que é necessário, já que boa parte de códigos em Java são muito ruins). Ruby tem um suporte a debugging lamentavelmente ridículo, o que significa que nosso código realmente precisa ser bem testado e legível.

Vendo por este lado, Ruby é uma excelente linguagem para quem sabe fazer direito e uma droga pra quem está acostumado com IDEs com Intellisense e checagem de erros pelo compilador.

Outras linguagens possuem problemas que são resolvidos facilmente com o uso de testes unitários. Um problema clássico que acontece com o PHP, o White Screen of Death (um erro que acontece com o script que nenhuma informação ou mensagem de erro é apresentada), pode ser resolvido com o uso de testes.

Alguns “problemas” advindos com linguagens dinâmicas é com a mudança de tipo de uma determinada variável, por exemplo:

class Op:
    x = 1    
    y = 3
    def soma(self):
        return self.x + self.y
op = Op()
op.y = "aha!"
op.soma() #Ooopss... TypeError

Este é um tipo de problema que vem com a checagem de tipo em tempo de execução, ao invés de ser feito em tempo de compilação. Muitas pessoas que não possuem a mesma visão do Obie, encaram isto como um problema.

Opinionated Software

Um trecho muito conhecido do Getting Real é o trecho que fala sobre opinionated software:

Your app should take sides

Some people argue software should be agnostic. They say it’s arrogant for developers to limit features or ignore feature requests. They say software should always be as flexible as possible.

We think that’s bullshit. The best software has a vision. The best software takes sides. When someone uses software, they’re not just looking for features, they’re looking for an approach. They’re looking for a vision. Decide what your vision is and run with it.

Traduzindo:

Seu aplicativo deve tomar partido

Algumas pessoas defendem que o software deve ser agnóstico. Dizem que é arrogante da parte dos desenvolvedores limitar a funcionalidade ou ignorar pedidos de novos recursos. Dizem que o software deve ser sempre o mais flexível possível.

Para nós isso é papo-furado. O melhor software traz consigo uma visão. O melhor software toma partido. Quando alguém usa um software, não está procurando apenas recursos, está procurando uma abordagem. Está procurando uma visão. Decida qual é sua visão e atenha-se a ela.

Esta mesma idéia permeia linguagens de programação. Você não achará um linguagem que sirva bem para todos os tipos de casos. Python, por exemplo, não é uma boa linguagem se você quiser usar threads pesadamente. Erlang, apesar de ser uma excelente escolha para programação distribuída e paralela, enfrenta um certo preconceito por ser funcional e não ter suporte à orientação a objetos. C#.NET é uma boa linguagem para criação de aplicativos comerciais, mas não é totalmente portável para todas as plataformas (o Mono mal suporta o .NET 3.5 e o framework já está na versão 4).

Conclusão: antes de reclamar de uma linguagem de programação, saiba que toda linguagem tem um approach, um foco e veja se esta “falha” pode ser algo útil… muitas vezes o é :-)

Sem posts relacionados.

]]> http://herberthamaral.com/2010/07/quando-uma-deficiencia-pode-se-tornar-uma-feature-numa-linguagem-de-programacao/feed/ 0 [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 avançado de eventoshttp://herberthamaral.com/2010/07/jquery-para-apressados-tratamento-avancado-de-eventos/?utm_source=rss&utm_medium=rss&utm_campaign=jquery-para-apressados-tratamento-avancado-de-eventos http://herberthamaral.com/2010/07/jquery-para-apressados-tratamento-avancado-de-eventos/#comments Sat, 17 Jul 2010 10:44:31 +0000 Herberth Amaral http://herberthamaral.com/?p=614 No post anterior eu expliquei como funciona o tratamento de eventos básicos no jQuery. Neste post eu vou passar uma explicação mais aprofundada sobre o assunto.

$.live and let $.die

Os métodos 'live' e 'die' funcionam exatamente da mesma forma dos métodos bind e unbind exceto por uma característica: eles podem trabalhar com elementos inseridos dinamicamente na página. 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(){

     $('h1').bind('click',function(){ alert('fui clicado') }); // só funciona para os atuais elementos da página
     $('h1').live('click',function(){ alert('fui clicado -- live') }); // funciona para os elementos atuais

    //vai exibir o alert "fui clicado -- live" quando
    // for clicado
    $('body').append('<h1>Elemento inserido dinamicamente</h1>');
   
});
</script>
Estes métodos são especialmente úteis quando se trabalha com AJAX, pois com AJAX torna-se muito comum inserir e remover itens do documento dinamicamente.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

clickHandler = function()
{
   alert('Fui clicado e não serei clicado novamente');
   $(this).die('click',clickHandler);
}

$(document).ready(function(){

     $('h1').bind('click',function(){ alert('fui clicado') }); // só funciona para os atuais elementos da página
     $('h1').live('click',clickHandler); // funciona para os elementos atuais

    $('body').append('<h1>Elemento inserido dinamicamente</h1>');
   
});
</script>

$.delegate e $.undelegate

Os métodos delegate e undelegate são métodos auxiliares dos métodos live e die. Eles trabalham com elementos atuais e do futuro (quando os mesmos forem inseridos) e permitem adicionar manipuladores de eventos em elementos DOM específicos. Exemplo:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// retirado da documentação do jQuery
$(document).ready(function(){

    $("table").delegate("td", "hover", function(){
        $(this).toggleClass("hover");
    });

    // o código acima seria equivalente a este:
   $("table").each(function(){
    $("td", this).live("hover", function(){
        $(this).toggleClass("hover");
    });
   });

});
</script>
Nota: Dependendo do seletor, o jQuery pode retornar um elemento ou um array de elementos. O método 'each' utilizado acima aplica a função passada por argumento pra ele para cada elemento do array retornado pelo seletor do jQuery neste caso. Para maiores detalhes do each, não deixe de ver a documentação.

O objeto event

No post anterior, eu mostrei um pequeno exemplo (sem dar muitos comentários) sobre o objeto event:
<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>
Reparem o argumento "event" da função enviarDados. Este objeto contém vários detalhes sobre o evento, incluindo o elemento, informações sobre a propagação do evento, posição X e Y do mouse onde aconteceu o evento o tipo do evento e muito mais. Para ver a documentação completa de todos estes atributos, veja a documentação oficial do jQueryNo próximo post eu falarei como você pode criar seus próprios eventos e como isto pode lhe ajudar a separar melhor sua aplicação, caso ela cresça muito.Até mais!

Posts relacionados:

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

]]> http://herberthamaral.com/2010/07/jquery-para-apressados-tratamento-avancado-de-eventos/feed/ 1 [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