JavaScript de Data

Introdução

Decerto que o leitor, já necessitou que a sua página web, apresentasse a data actual e que todos os dias de uma forma automática a actualizasse. Verifiquei que existem imensos Javascripts na Internet que realizam esta tarefa, contudo, como não há bela sem senão, ou apresentam a data numa língua estrangeira (quase todos em inglês) ou num formato ou visual que não se enquadra correctamente em cada caso particular.

Assim, este projecto, explica como criar um JavaScript que coloca a data em português, no formato e visual que o leitor pretenda. Deste modo, aqui vão todos os pormenores deste projecto. Para programar em JavaScript apenas necessitamos de um editor de texto.

Variáveis principais

Vamos criar as seguintes variáveis:

A seguir exemplificamos como deverá ficar o código:

Funções do JavaScript

1. function Diatexto (DiaNumero)

Esta função tem como objectivo transformar o número correspondente ao dia da semana (ver variável EsteDia), no seu nome. Assim, quando chamamos a função, enviamos o dia da semana número e esta retorna o nome, ex.: se enviarmos 0, retorna Domingo. Para isso, vamos criar uma variável do tipo Array Dia e depois igualar ao nome que pretendemos receber, desta forma temos os dias da semana em português, ou noutra linguagem qualquer à nossa escolha. A estrutura da função é basicamente a seguinte:

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

No fim da função e logo a seguir à palavra return, indicaremos que vamos retornar a palavra que se encontra memorizada no array cujo índex é o DiaNumero, ou seja, return Dia[DiaNumero];

A seguir exemplificamos como fica o código, após a inserção da função Diatexto.

2. function MesTexto (MesNumero)

Esta função é semelhante à anterior e tem como objectivo transformar o número correspondente ao mês (ver variável EsteMes), no seu nome. Assim, quando chamamos a função, enviamos o número do mês e esta retorna o nome, ex.: se enviarmos 1 (em MesNumero), retorna Janeiro.

var Mes=new Array();
Mes[1]="Janeiro";
Mes[2]="Fevereiro";
Mes[3]="Março";
… … …
Mes[12]="Dezembro";
return Mes[MesNumero];

Chamar as duas funções

De seguida vamos chamar as funções Diatexto (DiaNumero) e MesTexto (MesNumero), carregando o valor retornado, respectivamente nas variáveis DiaNome e MesNome, assim temos o código:
var DiaNome=Diatexto(EsteDia);
var MesNome=MesTexto(EsteMes);

Formato e visualização

Como afirmado inicialmente, com base no código anterior, é agora possível formatar a saída de acordo com a pretensão do webmaster, tendo apenas em conta o código que possibilita a sua visualização, ou seja, a instrução: document.write("xxxxxx“); apresentamos de seguida oito exemplos, mas obviamente, não é difícil criar uma formatação de acordo com a situação desejada. Dentro da instrução document.write, apenas temos de respeitar o código HTML a inserir (de acordo com o objectivo pretendido), para que ao ser executado o JavaScript, este não apresente erros.

A figura seguinte apresenta a visualização de oito exemplos. Apresentamos o código de cada um dos exemplos, ordenados de cima para baixo e da esquerda para a direita.

Foi criado dentro da instrução document.write o código HTML que tem por base uma tabela com a largura de 75 e altura de 85, cercadura (border) igual a 2 e a definição de cores para o texto (font color), cercadura (bordercolor) e fundo (bgcolor). No Caso 7 a largura foi aumentada para 150 e a altura reduzida para 80. Por fim, no Caso 8, apenas é apresentado uma simples linha de código para permitir visualizar o dia da semana, dia, nome do mês e ano.

Caso 1 - Canto Superior Esquerdo

Caso 2

Caso 3

Caso 4 - Canto Superior Direito

Caso 5

Caso 6

Caso 7

Caso 8

Código Completo

Seguidamente apresentamos o código completo, utilizando na instrução document.write o caso 8.