domingo, 21 de setembro de 2008

JavaScript Tutorial: O Objeto Date (Parte 2)

Esta é a segunda parte do tutorial. Você já leu a primeira parte??
Nesta parte, vamos aprender a personalizar o objeto Date, usando a palavra (ou keyword) prototype. O que vem a ser isto? Bom, sabemos que o javascript manipula, na memória, objetos e funções. Cada objeto pode ter propriedades, que são valores simples, ou funções, que são rotinas associadas ao objeto.
Existem objetos inerentes ao javascript, como o objeto Math, Date, etc. Através da palavra prototype, podemos modificar estes objetos, acrescentando a eles (ou a qualquer objeto do javascript previamente existente) propriedades e funções novas, declaradas por nós! Portanto, o prototype é uma excelente ferramenta de otimização e personalização. Vejamos como funciona:

Date.prototype.nomeDaPropriedade = 50;
Date.prototype.nomeDaFuncao = function(){
this.getTime();
};


No primeiro caso, estamos pegando o objeto Date, nativo do javascript, e, através do prototype, declaramos uma nova propriedade para ele, chamada "nomeDaPropriedade" e que terá valor "50". Para acessar esta propriedade, basta instanciar o objeto e usar o operador ponto ".":

var data = new Date();
window.alert(data.nomeDaPropriedade);

No segundo caso, fazemos o mesmo, mas agora estamos declarando uma função nova (e não uma propriedade), denominada "nomeDaFuncao". O código que esta função executará está dentro das chaves. As funções declaradas via prototype podem ou não ter valor de retorno, e podem receber nenhum ou quantos parâmetros quisermos, exatamente como qualquer função de javascript. Podemos, de dentro de uma função declarada via prototype, acessar qualquer propriedade ou função daquela instância do objeto, com o parâmetro "this".

Importante: não esqueça de colocar o ";" no final, após fechar a chave da função!! Muita gente erra isso!!


Para acesar esta função, basta instanciar o objeto e chamá-la:

var data = new Date();
window.alert(data.nomeDaFuncao());

Importante: não esqueça que, sendo uma função, é preciso chamá-la com o "()" no final de seu nome. Parece muito bobo, mas tem gente que erra isso e fica horas perdida procurando o erro...

Agora, vamos aplicar isto ao nosso caso, fazendo algo mais útil ao nosso objeto Date. As funções abaixo fazem:
ajustaDuasCasas: força que o número sempre tenha duas casas, mesmo menor que 10. Isto é bom para manter a formatação em datas e horas com valores menores que 10.
getDataFormatada: transforma a data do objeto (e não a atual!!) em uma String do tipo "07/09/2008".
getDataHoraFormatada: faz o mesmo que a de cima, mas acrescenta a hora: "07/09/2008 13:20:00".
getHoraFormatada: faz o mesmo, mas retorna apenas a hora: "13:20:00".

Date.prototype.ajustaDuasCasas = function(numero) {
if (!isNaN(numero)) {
if (numero < 10) {
return "0" + numero;
} else {
return numero;
}
} else {
return "00";
}
};

Date.prototype.getDataFormatada = function() {
var dia = this.ajustaDuasCasas(this.getDate());
var mes = this.ajustaDuasCasas(this.getMonth() + 1);
var ano = this.getFullYear();
return dia + "/" + mes + "/" + ano;
};

Date.prototype.getDataHoraFormatada = function() {
var dia = this.ajustaDuasCasas(this.getDate());
var mes = this.ajustaDuasCasas(this.getMonth() + 1);
var ano = this.getFullYear();
var hora = this.ajustaDuasCasas(this.getHours());
var minutos = this.ajustaDuasCasas(this.getMinutes());
var segundos = this.ajustaDuasCasas(this.getSeconds());
return dia + "/" + mes + "/" + ano + " " +
hora + ":" + minutos + ":" + segundos;
};

Date.prototype.getHoraFormatada = function() {
var hora = this.ajustaDuasCasas(this.getHours());
var minutos = this.ajustaDuasCasas(this.getMinutes());
var segundos = this.ajustaDuasCasas(this.getSeconds());
return hora + ":" + minutos + ":" + segundos;
};


Utilizando tudo isso:
var hoje = new Date();
window.alert(hoje.getDataFormatada());
window.alert(hoje.getDataHoraFormatada());
window.alert(hoje.getHoraFormatada());


Observe que isto funcionará com qualquer instância do objeto Date, formatando automaticamente qualquer valor que o objeto carregue. Assim, seu código fica bem mais simples e enxuto, claro e fácil de entender. As chances de erro são menores e o desempenho é maior.

  • Implementando um Relógio

O javascript provê uma função denominada setInterval(a, b), onde a é uma String representando uma chamada em javascript que será repetida continuamente e b é um inteiro representando o intervalo em milisegundos que o navegador esperará entre as repetições da chamada. Com isto é possível implementar um pequeno relógio:

function mostraRelogio(campoRelogio) {
if (campoRelogio != null) {
// Recarregando a hora a cada 100 milisegundos, para
// fazer o relógio andar.
setInterval("campoRelogio.innerHTML = (new Date()).getHoraFormatada()", 100);
}
}

CONCLUSÃO: utilizar o objeto Date do javascript é uma forma simples e fácil de diminuir a carga de seu portal, melhorar e otimizar o desempenho de seu sistema de informação e fazer inúmeros testes e validações antes de ir ao servidor. Utilizando a palavra-chave prototype, podemos adicionar ao objeto nativo funções e propriedades úteis, personalizadas e recorrentes em nosso sistema, evitando a aglomeração excessiva de funções externas e garantindo mais agilidade, simplicidade e clareza no código.

5 comentários:

athanazio disse...

mor maneiro isto de criar funcoes no javascript neh tio !!! adoro funcoes anonimas !! eh por isto que meu desejo profundo eh colocar javascript no jogo, pra faer um plugins com jacascript.

O Pajé disse...

Sem dúvida, meu caro!!! Eu adoro também!! E é super prático!! São os chamados "closures". Um link legal sobre isto está aqui:
http://www.jibbering.com/faq/faq_notes/closures.html

Segundo informam, a Sun vai incorporar Closures no Java 7!! Estou ansioso para ver quantas coisas divertidas poderemos fazer com isto!!

Anônimo disse...

Legal cara!! Ajudou muito. Mas como posso pegar a data digitada em um input e subtrair da data atual para descobrir se o usuário é menor de idade ou não?

O Pajé disse...

Olá amigo,

A resposta é bem simples. A data digitada em um formulário (ainda que este seja preenchido automaticamente com um calendário em Java Script) é sempre uma String. Você pode forçar a formatação do formulário para uma máscara de data conhecida (ex: dd/mm/yyyy) e, depois, separar os números referentes aos dia, mês e ano usando a função substring(int, int).
Depois disso, você deve construir um objeto date com as informações recolhidas e construir um outro que corresponda exatamente a 18 anos. Daí é só usar uma operação de lógica:

if (dateUsuario < dateDezoitoAnos) {
// Pode entrar!!
}

Dá uma olhada na primeira parte do tutorial, que faz parte do que digo agora:

http://pajeonline.blogspot.com.br/2008/09/javascript-tutorial-o-objeto-date-parte.html

Boa sorte!!

O Pajé disse...

Ooops... Creio que o código seria:

if (dateUsuario < dateDezoitoAnos) {
// NÃO Pode entrar!!
}

ou:

if (dateUsuario >= dateDezoitoAnos) {
// Pode entrar Sim!!
}