Desenvolvimento - Javascript

Entendendo o Objeto Date() do Javascript

O objeto deste artigo permite trabalhar com datas e horas, mostrarei como pode ser instanciado o objeto e comentarei seus principais métodos e propriedades. No final mostrarei um simples script usando o objeto.

por Robstown Holanda


Olá! O objeto deste artigo permite trabalhar com datas e horas, mostrarei como pode ser instanciado o objeto e comentarei seus principais métodos e propriedades. No final mostrarei um simples script usando o objeto.

Com esse objeto é possível trabalhar com datas e horas em Javascript. Para que isso seja possível é preciso instanciar o objeto. Para criar o objeto Date, basta instanciar a classe, se nenhum parâmetro for fornecido, são assumidas a data e hora corrente, isto é, do computador que executa script.

Construtor

Para instanciar a classe com data e hora determinada, devem ser passados parâmetros. Existem varias maneiras de criar, como apresentadas a seguir:

  • new Date(milissegundos)
  • new Date(string_de_data)
  • new Date(ano, mes, dia)
  • new Date(ano, mes, dia, hora, minuto, segundo, milissegundo)

Todos os parâmetros passados no construtor devem ser numéricos. Com relação ao parâmetro mês, o numero 0 representa Janeiro e o 11 Dezembro. Se não for passada a hora, o objeto iniciará com a hora 00:00:00.

Com exceção da segunda opção que pode ser instanciada passando uma string da seguinte maneira: new Date("Jan 1, 2000 00:00:00")

A data e hora no Javascript começam em 00:00:00 h GMT de 01 de janeiro de 1970. Se você tentar criar uma instancia com uma data anterior irá obter um resultado aleatório.

Métodos

O objeto Date não possui propriedades, por outro lado, possui muitos métodos. A seguir serão apresentados alguns dos seus principais métodos.

- getDate(): devolve o dia do mês, um inteiro entre 1 e 31. Não confundir com getDay que retorna o dia da semana.
- getDay() : devolve o dia da semana, inteiro entre 0 e 6 (0 para Domingo).
- getHours(): retorna a hora, inteiro entre 0 e 23.
- getMinutes(): devolve os minutos, inteiro entre 0 e 59.
- getSeconds(): devolve os segundos, inteiro entre 0 e 59.
- getMonth(): devolve o mês, um inteiro entre 0 e 11 (0 para Janeiro).
- getTime(): devolve os segundos transcorridos entre o dia 1 de janeiro de 1970 e a data correspondente ao objeto ao que se passa a mensagem.
- getYear(): retorna o ano, os últimos dois números do ano. Por exemplo, para o 2006 retorna 06. Este método está obsoleto em Netscape a partir da versão 1.3 de Javascript e agora se utiliza getFullYear().
- getFullYear(): retorna o ano com todos os dígitos. Funciona com datas posteriores ao ano 2000.
- setDate(d): atualiza o dia do mês.
- setHours(h): atualiza a hora.
- setMinutes(m): muda os minutos.
- setMonth(m): muda o mês (atenção ao mês que começa por 0).
- setSeconds(s): muda os segundos.
- setTime(t): atualiza a data completa. Recebe um número de segundos desde 1 de janeiro de 1970.
- setYear(y): Muda o ano, recebe um número, ao que lhe soma 1900 antes de colocá-lo como ano data. Por exemplo, se receber 95 colocará o ano 1995. Este método está obsoleto a partir de Javascript 1.3 em Netscape. Agora se utiliza setFullYear(), indicando o ano com todos os dígitos.
- setFullYear(): muda o ano da data ao número que recebe por parâmetro. O número se indica completo ex: 2005 ou 1995. Utilizar este método para estar certo de que tudo funciona para datas posteriores a 2000.
- getimezoneOffset(): Devolva a diferença entre a hora local e a hora GMT (Greenwich, UK Mean Time) sob a forma de um inteiro representando o número de minutos (e não em horas).
- toGMTString(): devolva o valor do atual em hora GMT (Greenwich Mean Time)

Aplicação

A página abaixo é a página que terá todas as funções JavaScript apresentadas a seguir. A DIV chamada de datahora é utilizada para mostrar a hora e a data, que serão geradas por uma função JavaScript chamada “mostrarDataHora()”.

Listagem 1: Estrutura da página utilizada nos exemplos

<html>
<head>
	<title>::: O Objeto Date:::</title>
	<script type="text/javascript">
		//Coloque aqui as funções Javascript apresentadas a seguir
	</script>
</head>
<body onload="atualizarDataHora()">
	<div id="datahora"/>
</body>
</html>

A função abaixo recebe como parâmetros a hora, o dia da semana, o dia do mês, o mês e o ano. Realiza uma formatação e atualiza o conteúdo da DIV chamada de datahora já apresentada.

Listagem 2: Função para exibir a data formatada

 function mostrarDataHora(hora, diaSemana, dia, mes, ano){
	retorno = "" + hora + ""
	retorno += "" + diaSemana + ", " + dia + " de " + mes + " de " + ano;
	document.getElementById("datahora").innerHTML = retorno;
}

Na tag body do html existe um método chamado onload, esse método chama a função atualizarDataHora(), que seja mostrada a seguir. O evento onload de Javascript se ativa quando termina de ser carregada. Deve ser colocado na tag body, embora em versões modernas de Javascript, também o aceitam outros elementos como as imagens.

Com o evento onload podemos executar ações justo quando terminem de se carregar todos os elementos da página. É um evento bastante utilizado, pois é muito habitual que seja desejado realizar ações nesse preciso instante. Em nosso exemplo, vamos ver ativar uma função para atualizar a hora a cada segundo.

Listagem 3: Função para exibir a data e a hora atualizadas

function atualizarDataHora()
	var dataAtual = new Date();
	var dia = dataAtual.getDate();
	var diaSemana = getDiaExtenso(dataAtual.getDay());
	var mes = getMesExtenso(data.getMonth());
	var ano = dataAtual.getYear();
	var hora = dataAtual.getHours();
	var minuto = dataAtual.getMinutes();
	var segundo = dataAtual.getSeconds();

	var horaImprimivel = hora + ":" + minuto + ":" + segundo;
	mostrarDataHora(horaImprimivel, diaSemana, dia, mes, ano);
	setTimeOut("atualizarDataHora()", 1000);
}

A função cria um objeto Date(), esse objeto será usado para pegar todos os dados que precisamos para a nossa aplicação utilizando os principais métodos que já foram apresentados neste artigo.

Listagem 4: Funções para obter dia e mês por extenso

function getMesExtenso(mes){
	return this.arrayMes[mes];
}

function getDiaExtenso(dia){
	return this.arrayDia[dia];
}

Os arrays foram inicializados com os dias da semana e os meses do ano.

Listagem 5: Inicialização dos arrays com os dias e meses por extenso

var arrayDia = new Array(7);
arrayDia[0] = "Domingo";
arrayDia[1] = "Segunda";
arrayDia[2] = "Terça";
arrayDia[3] = "Quarta";
arrayDia[4] = "Quinta";
arrayDia[5] = "Sexta";
arrayDia[6] = "Sábado";

var arrayMes = new Array(12);
arrayMes[0] = "Janeiro";
arrayMes[1] = "Fevereiro";
arrayMes[2] = "Março";
arrayMes[3] = "Abril";
arrayMes[4] = "Maio";
arrayMes[5] = "Junho";
arrayMes[6] = "Julho";
arrayMes[7] = "Agosto";
arrayMes[8] = "Setembro";
arrayMes[9] = "Outubro";
arrayMes[10] = "Novembro";
arrayMes[11] = "Dezembro";

Com todas as informações nas mãos, é chamado o método mostrarDataHora() passando todos os parâmetros já mencionados anteriormente.

A função setTimeout() recebe dois parâmetros, o primeiro é a função que o programador deseja executar e o segundo parâmetro seta um tempo em milissegundos para ser realizada a função, período configurado neste exemplo para 1000 milissegundos, ou seja, 1(um) segundo.

Clique aqui para fazer o download do código-fonte

Um abraço a todos e até a próxima.

Referencias

http://www.w3schools.com/
Robstown Holanda

Robstown Holanda - Bacharel em Sistema de Informação/Faculdade Christus e Análise de Sistemas/FIC. É desenvolvedor web desde 2002 com experiência em PHP, Java, JS, MySQL, PostgreSQL e atualmente trabalha como desenvolvedor J2EE.