Código com Café » javascript http://www.codigocomcafe.com Programação e assuntos relacionados. Com café. Tue, 19 Jul 2011 14:13:38 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 How jQuery Works (tradução do tutorial para pt-BR) http://www.codigocomcafe.com/2009/08/how-jquery-works-traducao-do-tutorial-para-pt-br/ http://www.codigocomcafe.com/2009/08/how-jquery-works-traducao-do-tutorial-para-pt-br/#comments Wed, 26 Aug 2009 11:00:19 +0000 George Marques http://www.codigocomcafe.com/?p=86

Apenas uma tradução para português do Brasil do tutorial de jQuery presente em http://docs.jquery.com/How_jQuery_Works. Por ser praticamente um “getting started” oficial e não encontrei nenhuma versão deste texto em português, resolvi traduzi-lo eu mesmo. Se por acaso encontrar algum “eu” no texto, se refere ao autor original (John Resig.).

jQuery: O Básico

Este é um tutorial básico, desenvolvido para ajudá-lo a começar a usar o jQuery. Se você ainda não tem uma página de teste pronta, comece criando uma nova página HTML com o seguinte conteúdo:

<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>
 
    <script type="text/javascript">
 
    </script>
  </head>
  <body>
    <a href="http://www.codigocomcafe.com/">Código com Café</a>
  </body>
</html>

Altere o atributo src da tag script para que aponte para a sua cópia do jquery.js. Por exemplo, se jquery.js estiver no mesmo diretório que se arquivo HTML, você pode usar:

<script type="text/javascript" src="jquery.js"></script>

Nota: Quando a página inteira é incluída através das funções include() ou require() do PHP, tenha certeza de colocar o script dentro da tag <body> e não dentro de <head>, porque chamando o arquivo de script do jQuery dentro da tag <head> por algum motivo não funciona.

Você pode baixar sua própria cópia do jQuery na página Downloading jQuery.

Lançando o código quando o documento estiver pronto

A primeira coisa que a maioria dos programadores de JavaScript acaba fazendo é adicionar algum código ao programa, parecido com isto:

window.onload = function(){ alert("bem-vindo"); }

Dentro disso fica o código que você quer que rode exatamente quando a página for carregada. Problematicamente, contudo, o código JavaScript não roda até que todas as imagens forem baixadas (isto inclui os banners de propaganda). O motivo para usar window.onload em primeiro lugar é que o ‘document’ do HTML ainda não está completamente carregado, quando você tenta rodar seu código pela primeira vez.

Para burlar ambos os problemas, jQuery tem uma instrução simples que checa o documento e espera até que ele esteja pronto para ser manipulado, conhecido como o evento ready

 $(document).ready(function(){
   // Seu codigo aqui (com ou sem cafe)
 });

Dentro do evento ready, insira um manipulador do evento click para o link:

1
2
3
4
5

 $(document).ready(function(){
   $("a").click(function(event){
     alert("Obrigado por visitar");
   });
 });

Salve seu arquivo HTML e recarregue a página de testes em seu navegador. Clicando no link na página deve aparecer uma caixa de mensagem no navegador, antes de deixar a página para ir até a página principal do Código com Café.

Para click e muitos outro eventos, você pode previnir o comportamento principal – aqui o link até www.codigocomcafe.com – chamando event.preventDefault() no manipulador do evento:

1
2
3
4
5
6

 $(document).ready(function(){
   $("a").click(function(event){
     alert("Como pode ver, o link não te leva mais para www.codigocomcafe.com");
     event.preventDefault();
   });
 });

Exemplo Completo

O seguinte é um exemplo de como o arquivo HTML completo deve parecer se você usou o script em seu próprio aquivo. Note que ele aponta para o CDN do Google para carregar o arquivo do jQuery. Também, enquanto o script personalizado foi colocado dentro da tag <head>, em geral é preferível que se coloque em um arquivo separado e se referir a este arquivo no atributo src do elemento script.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript">
     $(document).ready(function(){
       $("a").click(function(event){
         alert("Como pode ver, o link não te leva mais para www.codigocomcafe.com");
         event.preventDefault();
       });
     });
 
   </script>
 </head>
 <body>
   <a href="http://www.codigcomcafe.com/">Código com Café</a>
 </body>
 </html>

Adicionando e Removendo uma Classe CSS

Importante: Os exemplos em jQuery daqui pra frente precisarão ser colocados dentro do evento ready, assim eles serão executados quando o documento estiver pronto para se trabalhar. Veja Lançando o código quando o documento estiver pronto acima para detalhes.

Outra tarefa comum é adicionar (ou remover) uma classe CSS.

Primeiro, adicione uma alguma informação de estilo dentro de <head> do seu documento, como isto:

 <style type="text/css">
    a.teste { font-weight: bold; }
 </style>

Em seguida, adicione a chamada addClass ao seu script:

  $("a").addClass("teste");

Todos os seus elementos a ficarão em negrito.

Para remover uma classe, use removeClass

  $("a").removeClass("teste");
  • (CSS permite que múltiplas classes sejam adicionadas a um elemento)

Efeitos Especiais

Em jQuery, são providos alguns efeitos úteis, para realmente fazer o sew website se sobressair. Para colocar isso em teste, altere o click que você adicionou previamente para isto:

1
2
3
4

 $("a").click(function(event){
   event.preventDefault();
   $(this).hide("slow");
 });

Agora, se você clicar em algum link, isto deve fazê-lo sumir vagarosamente.

FUNÇÕES E CALLBACK

Callback é uma função passada como argumento para outra função e é executada quando sua função-mãe for completada. A coisa especial sobre callback é que a função que aparece depois da “mãe” pode executar antes que o callback execute.

Outra coisa importante é saber como passar apropriadamente o callback. Isto é onde muitas vezes eu esqueci da sintaxe apropriada.

Callback sem argumentos

Para um callback sem argumentos, você passa como este:

$.get('minhapagina.html', meuCallBack);

Note que o segundo parâmetro aqui é simplesmente o nome da função (mas não como uma string e sem parênteses). Funções em JavaScript são ‘Cidadãos de primeira classe’ e assim devem ser passadas como referências de variáveis e executadas num momento mais tarde.

Callback com argumentos

“O que se faz quando tiver argumentos que deseja passar?”, você pode perguntar a si mesmo.

Errado

A Forma Errada (Não irá funcionar!)

 $.get('minhapagina.html', meuCallBack(param1, param2));

Não funciona porque isso chama

meuCallBack(param1, param2)

e então passa o valor retornado como segundo parâmetro para $.get().

Certo

O problema com o exemplo acima é que meuCallBack(param1, param2) é avaliado antes de ser passado como uma função. JavaScript e por extensão o jQuery espera um ponteiro em casos como esse. Por exemplo, a função setTime

Na utilização abaixo, uma função anônima é criada (apenas um bloco de instruções) e então registrada como a função callback. Note o uso de ‘function(){‘. A função anônima faz exatamente uma coisa: chama meuCallBack, com os valores de param1 e param2 no escopo exterior.

$.get('minhapagina.html', function(){
  meuCallBack(param1, param2);
});

param1 e param2 são avaliados como um callback assim que $.get() terminar de obter a página.

MAIS LEITURAS

Encerrando por aqui a tradução, mantenho a indicação original para os tutoriais e para a Documentação do jQuery.

Comecei agora a estudar jQuery e pretendo postar as funções que achar interessantes (ou úteis). É um pouco difícil encontrar conteúdo em português, então por esse motivo pretendo postar algumas coisas aqui. E dizem que o livro do Maujor é muito bom.

]]> http://www.codigocomcafe.com/2009/08/how-jquery-works-traducao-do-tutorial-para-pt-br/feed/ 1 Validando datas com JavaScript e Expressões Regulares http://www.codigocomcafe.com/2009/08/validando-datas-com-javascript-e-regex/ http://www.codigocomcafe.com/2009/08/validando-datas-com-javascript-e-regex/#comments Sat, 15 Aug 2009 16:37:00 +0000 George Marques http://www.codigocomcafe.com/index.php/2009/08/15/validando-datas-com-javascript-e-expressoes-regulares/

Expressões Regulares, conhecidas também como regex, são muito úteis na área de programação. Uma das utilidades das ERs é a validação de dados.

Estava estudando ERs e, para treinar, decidi fazer um sistema de validação de datas em JavaScript, algo bastante útil, embora já existam funções prontas que fazem isso, como no jQuery, talvez no futuro eu cite algumas dessas funções.

Validar datas com ERs é útil porque elas são aceitas em várias linguagens diferentes, assim o seu script em PHP (ou outra linguagem de servidor) pode validar novamente os dados, por segurança, usando a mesma ER. Você não precisará se dar ao trabalho de escrever um novo código.

Existem duas maneiras de se definir uma ER em JavaScript:

var regex = /regex/;
//ou
var regex = new RegExp ("regex");

Sempre tomando cuidado para escapar os caracteres corretamente.

Validando Datas

Vamos ao que interessa. Em primeiro lugar vamos definir uma ER genérica, depois vamos melhorando-a até chegar naquilo que queremos (preste atenção no escape do caractere ‘/‘).

var regex = /..\/..\/..../;

Isso reconhece qualquer coisa, como “e3/34/e %[“, e isso não é o que queremos. Vamos limitar apenas a números (\d). Além disso, a data deve ser a única coisa no campo, então vamos dizer que é no começo da linha (^) e que também é no final da linha ($).

var regex = /^\d\d\/\d\d\/\d\d\d\d$/;

Ok. Mas isso aceitaria algo como “43/56/9999″, temos que limitar o dia até 31 e o mês até 12. E nenhum dos dois pode ser “00″. Então o dia deve ser 0 e um número entre 1 e 9, 1 ou 2 e um número ou 3 e 0 ou 1. Algo parecido para o mês. O ano deve ser entre 1900 e 2099. Vamos agrupar cada pedaço, para ficar mais fácil (ou não).

var regex = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/((19|20)\d\d)$/;

Bom, o dia pode possuir apenas um dígito se estiver entre 1 e 9. O mesmo vale para o mês. O ano também pode ser no formato reduzido de apenas dois dígitos. Vamos deixar algumas coisas opcionais (?).

var regex = /^(0?[1-9]|[12][0-9]|3[01])\/(0?[1-9]|1[0-2])\/((19|20)?\d\d)$/;

Está ficando bonito, não é? Agora vem o problema. Uma data do tipo “31/4/09″ é válida, mas abril não tem dia 31. Teremos que dividir por mês, permitindo a quantidade de dias apropriada. Existem basicamente dois jeitos de se fazer isso. O primeiro é mantendo o intervalo de dias inteiro para cada tipo de mês (29, 30 ou 31 dias). Outro modo seria permitir 28 dias para todos os meses, 29 e 30 para todos menos fevereiro e 31 para os meses de 31 dias. Vou usar essa segunda maneira, porque deixa a ER menor e mais fácil de entender (às vezes uma maior é mais fácil de entender, nesse caso deixe ela maior). O agrupamento é importante, pois o operador OU (|) é o último da lista de precedência.

var regex = /^(((0?[1-9]|1\d|2[0-8])\/(0?[1-9]|1[0-2]))|
 //28 para todos os meses
((29|30)\/(0?[13456789]|1[0-2]))|
 //29 e 30 para todos menos fevereiro
(31\/(0?[13578]|1[02])))
 //31 para jan, mar, mai, jul, ago, out e dez
\/((19|20)?\d\d)$/;

Lembre-se que ERs em JavaScript não aceitam comentários e muito menos quebras de linha,eu só fiz isso para explicar as partes da ER. Se achar que precisará comentar, use o outro formato de definição, quebrando a string passada ao RegExp (nesse caso, lembre-se que a barra inversa ‘\’ precisa ser escapada ‘\\’). Nossa ER está quase pronta. O único defeito é que ela não aceita o dia 29 de fevereiro, o que é válido nos anos bissextos. Não podemos deixá-la aceitar o dia 29/2 em todos os anos, então vamos deixar ela do jeito que está e apenas acrescentar uma condição.

Mas essa condição não é exatamente simples. Um ano é bissexto se for divisível por 4. Se termina com 00, o ano é bissexto se for divisível por 400. 2000 é ano bissexto, mas 1900 não é. Um número é divisível por quatro se o número formado pelos dois últimos dígitos for divisível por quatro. Isso só é possível de se fazer com ER porque a tabuada do 4 segue um padrão peculiar. Dos dois dígitos, se o primeiro for par (0 é par) então o segundo deve ser 0, 4 ou 8 e se o primeiro algarismo for ímpar o segundo deve ser 2 ou 6. Com ER, isso ficaria assim:

var regex = /\b\d*(([02468])[048])|([13579][26])\b/;

Essa é uma ER que casa com qualquer número múltiplo de 4 (de pelo menos dois dígitos). Vamos aplicar o mesmo conceito à nossa ER de validação, lembrando que 1900 é divisível por 4, mas não é bissexto e que 00 é equivalente ao ano 2000.

var regex = /^((((0?[1-9]|1\d|2[0-8])\/(0?[1-9]|1[0-2]))|
 //28 para todos os meses
((29|30)\/(0?[13456789]|1[0-2]))|
 //29 e 30 para todos menos fevereiro
(31\/(0?[13578]|1[02])))
 //31 para jan, mar, mai, jul, ago, out e dez
\/((19|20)?\d\d))$|
((29\/0?2\/)
 //29 de fevereiro
((19|20)?(0[48]|[2468][048]|[13579][26])|(20)?00))$/;

E, finalmente, nossa ER está pronta. Só falta aplicá-la num código de validação:

function valida_data(element) {
 regex = /^((((0?[1-9]|1\d|2[0-8])\/(0?[1-9]|1[0-2]))|((29|30)\/
        (0?[13456789]|1[0-2]))|(31\/(0?[13578]|1[02])))\/((19|20)?\d\d))$|
        ((29\/0?2\/)((19|20)?(0[48]|[2468][048]|[13579][26])|(20)?00))$/;
 
 resultado = regex.exec(element.value);
 if(!resultado) {
   fica_errado(element);
 }
 else {
   fica_certo(element);
 }
}//fim da função

Sendo que fica_certo() e fica_errado() são funções que avisam o usuário de que a data está válida ou inválida, respectivamente. Essa função pode ser usada no evento onkeyup de um input type=text, por exemplo:

<input onkeyup="valida_data(this);" type="text" />

E pronto! Se quiser, veja um exemplo aqui. Como ERs podem ser aplicadas em várias linguagens de programação, você pode reaproveitá-la, provavelmente mudando apenas os escapes de caracteres. Fica aí a dica.

]]> http://www.codigocomcafe.com/2009/08/validando-datas-com-javascript-e-regex/feed/ 1