Desenvolvimento - Javascript

Tratando eventos conforme data e horário em Javascript

Veja neste artigo como utilizar a data e hora para executar eventos de forma personalizada, por exemplo, conforme a hora do dia ou o dia da semana. Veremos as funções getHours(), getDay(), Date().

por Diego Cesar Ribeiro


Esse artigo irá ensinar como apresentar eventos conforme data e horário, utilizando a linguagem Java Script. Imagine que você quer cumprimentar seus visitantes em sua página web, como desejar bom dia de manhã, boa tarde e boa noite para tarde e noite respectivamente? Esse artigo será composto pelos seguintes tópicos:

  • Para descobrir se é manhã tarde ou noite;
  • Apresentando mensagens na tela para dias da semana diferentes (que também dará uma brevíssima introdução a mensagens mensais);
  • Apresentando uma imagem para cada dia da semana;
  • Transformando horários em AM/PM.

Para descobrir se é manhã, tarde ou noite

Esse código logo abaixo irá ensinar como apresentar mensagens conferindo se está de madrugada, manhã, tarde ou noite. É claro que isso é bem pouco prático, mas o objetivo dele, embora relativamente técnico, é majoritariamente demonstrativo.

Listagem 1: Apresentar texto mostrando se é madrugada, manhã, tarde ou noite

<html>
<head>
</head>
<body>
<script language=javascript type="text/javascript">
now = new Date
if (now.getHours () >= 0 && now.getHours () < 5)
{document.write ("Está de madrugada")}
		else if (now.getHours () >= 5 && now.getHours () < 12)
{document.write ("Está de manhã") }
		else if (now.getHours () >= 12 && now.getHours () < 18)
{document.write ("Está de tarde") }
else 
{document.write ("Já estamos de noite!") }
</script>
</body>
</html>

Explicando o código:

Na primeira linha do script, basta criar a variável de data now, com o comando new Date, que instrui o Javascript a criar um novo objeto date e preenche-lo com a data atual.

A partir da segunda linha do script, é onde começa a parte mais importante do mesmo. Se (representado como if) now.getHours, que são as horas em formato 24h forem maior do que 0, e ao mesmo tempo (representado por “&&”) menor do que 5, então aparecerá um texto na tela informando que está ainda de madrugada.

Em seguida, será especificado que se a hora estiver entre 5 e 12, então aparecerá um texto na tela, afirmando que está de manhã. Note a presença do else, ele significa “senão”.

Logo após, se a hora estiver entre 12 e 18, será afirmado, em texto, que está de tarde. Por fim, a próxima parte do código diz: “senão, escreve que é de noite”, pois se não está nem de madrugada, nem de manhã, nem de tarde, só pode ser de noite.

Apresentando mensagens na tela para dias da semana diferentes

Já esse próximo código, logo abaixo, irá mostrar como apresentar mensagens diferentes conforme o dia for de trabalho normal, ou um final de semana.

Listagem 2: Apresentando mensagens na tela para dias da semana diferentes

<html>
<head>
</head>
<body>
<script language=javascript type="text/javascript">
now = new Date
if (now.getDay () > 0 && now.getDay() < 6 )
{document.write ("Hoje é dia de trabalho")}
else
{document.write ("Hoje também é dia de trabalho, mas pelo menos é final de semana") }
</script>
</body>
</html>

Explicando o código:

Primeiramente é preciso saber que o Javascript conta os dias da semana de 0 a 6. Logo, domingo é zero, e terça é dois, por exemplo. A segunda e terceira linhas do script, especificam que se o dia da semana for maior que 0, ou seja, depois de domingo, e menor que seis, ou seja, antes de sábado, ele especificará a data como um dia de trabalho comum.

Se a data da semana não estiver entre o começo de segunda e o fim de sexta, é por que ela é final de semana.

Assim como demonstrei fazer em horas e dias da semana, você poderia facilmente fazer para dias do mês, basta substituir a fórmula da data por getDate(), e fazer as devidas alterações, conforme a lógica, com base no que você aprendeu logo acima.

Apresentando uma imagem para cada dia da semana

Essa parte do artigo irá mostrar como apresentar uma imagem diferente para cada dia da semana. Neste exemplo, utilizei um vetor contendo os nomes das imagens a serem carregadas para cada dia, de acordo com seu índice (de 0 a 6). Uma outra forma, porém menos elegante, seria verificar o valor do getDay e, para cada situação, definir manualmente a imagem a ser carregada.

Listagem 3: Código para apresentar uma imagem para cada dia

<html>
<head>
	<script type="text/javascript">
		function MostrarImagem(){
			var now = new Date();
			var dias = new Array("domingo.bmp", "segunda.bmp", "terca.bmp", "quarta.bmp", "quinta.bmp", "sexta.bmp", "sábado.bmp");
			document.img.src = dias[now.getDay()];
		}
	</script>
</head>
<body onload="MostrarImagem()">
	<img src="" name="img">
</body>
</html>

Transformando horários em AM/PM

O Javascript lida com as horas de 0 a 24. Então, pelo menos nas versões mais modernas, você não contará com a opção de 12 horas (AM/PM). Uma solução para mostrar ao usuário a hora em AM/PM é mostrada logo abaixo.

Listagem 4: Exibir hora no formato AM/PM

<html>
<head>
</head>
<body>
<script language=javascript type="text/javascript">
var now = new Date();
if (now.getHours() > 0 && now.getHours() < 12)
{document.write ( now.getHours() + " AM" ) }
else if (now.getHours() > 12)
{document.write ( Math.floor ( now.getHours() - 12 ) + " PM") }
</script>
</body>
</html>

Explicando o código:

A primeira parte do código logo acima, afirma que se o horário for menor do que 12 horas, então basta adicionar “AM” após a hora.

Em seguida, se o horário ultrapassar 12 horas, então será tirado 12 horas desse horário e adicionado o texto “PM” logo no final. Então 12 horas e um minuto ficaria 1PM, e 15 horas e trinta minutos ficaria 3PM. Não me preocupei, aqui, com os minutos, mas o leitor poderá facilmente adicionar esta parte do horário ao texto, para isso, sugiro a leitura deste artigo: Trabalhando com data e hora em Javascript.

Este artigo, como você viu, não ensina como mostrar datas e horários de forma simples, apenas de forma personalizada. E o limite do quão personalizada será, só você poderá definir. Entendendo como funcionam os horários e as datas, e como personaliza-las (o objetivo desse artigo), você poderá fazer muito mais.

Até a próxima.
Diego Cesar Ribeiro

Diego Cesar Ribeiro - Natural de Natal/RN, sou um grande entusiasta sobre tudo relacionado à tecnologia e desenvolvimento. Tenho 4 anos de experiêcia na área de desenvolvimento webstandart (html, css, tableless). Para contatos profissionais me mandem um e-mail.