Qual o Melhor Navegador??

Vivemos cada vez mais as pressões que se resvalam sobre nós consoante à guerra dos navegadores. Vejamos que existem pesquisas minuciosas apontando qual o navegador mais popular, qual ganhou mais pontos, qual perdeu, para onde foram os pontos que flutuam entre um navegador e outro. Vemos o Firefox perder terreno para o Google Chrome, vemos novos navegadores surgindo e outros se apagando. Para o usuário final, fica difícil saber o que usar... neste artigo vamos discutir dois navegadores e entender um forte argumento que pode direcionar a sua busca pelo seu navegador ideal!! Acompanhe-nos!!
Uma pesquisa atual (2011) e detalhada sobre os principais navegadores pode ser encontrada aqui: http://internet-browser-review.toptenreviews.com/. Este portal investiga criteriosamente uma riqueza de detalhes, como: segurança, tempo de inicialização, compatibilidade, usabilidade, abas, zoom, getos do mouse, etc, etc... Com tanta informação, é possível se escolher o melhor navegador?? Bom, particularmente, uso o Firefox, e posso denfendê-lo com os seguintes argumentos:

• É multiplataforma: não importa em que sistema você está, sempre haverá um Firefox possível de se usar. Assim, você terá intimidade com o navegador independente da máquina que está usando no momento; isto é essencial para quem precisa passar por diversos setores, para quem viaja ou para quem, por algum motivo, precisa usar máquinas diferentes em seu cotidiano;
  
• Foi o primeiro a criar e ainda é o melhor a apresentar o conforto da navegação privada. Por mais que ela possa ser emulada com opções de configurações em qualquer navegador, isto incluiria diversos passos até que se tenha a segurança de se navegar sem deixar rastros. Se você usa computadores públicos, esta opção é mais do que desejável!!
• A quantidade de extensões, temas e perfumarias é enorme!! Simplesmente enorme!! A própria engrenagem de extensões do Firefox permite que se construam os mais diversos plug-ins com as mais diferentes funcionalidades, dada a sua flexibilidade e engenhosidade, além da facilidade que oferece aos desenvolvedores ao resolver as extensões usando Javascript, e não linguagens específicas de programação ou script.

Mas note que estou apenas acrescentando mais informações e critérios a esta sopa que já está bem mexida e cheia... assim, antes que ela vire um grande Yakisoba, vou lançar apenas um critério para que você decida certeiramente qual navegador deve usar: escolha o que tem funcionalidades que mais lhe agradam ou ajudam em seu dia-a-dia, ou seja, o navegador que você mais gosta!!
O navegador é o seu melhor amigo, um cachorro virtual, e estará com você durante todo o tempo em que seu computador estiver ligado. Portanto, não se furte a decidir que o melhor deles é aquele que faz o que você precisa da maneira melhor!! Seja com um plug-in especial de que você precisa muito, seja com aquelas funcionalidades que você gosta, seja com a aparência que mais lhe agrada. Este é o melhor. Ele abana o rabo e traz o jornal. Quando preciso, deita-se e finge-se de morto. Está sempre ao seu lado e não falha.
Vamos a um exemplo... imagine que você é rato de webmail (como o GMail ou o Yahoo), escreve para um ou mais blogs (como este que você está lendo) e gosta de visitar o Youtube, Facebook, dentre outros sistemas de redes sociais e multimídia conhecidos. Se este é seu caso, eu recomendo que você use o Flock. As figuras abaixo não deixam negar:

• O Flock tem excelentes ferramentas para decorar seu webmail e deixar você logado mesmo que a página esteja fechada. Você configura o tempo em que ele deve verificar o e-mail e ele envia avisos periódicos indicando mensagens novas. Tem inclusive uma tela especial para as mensagens de e-mail aparecerem sem precisar voltar ao webmail. Funciona com os principais sistemas, como GMail, Yahoo, etc.
• Tem uma ferramenta equivalente para blogs (Blogger, Wordpress, Blogsome, Typepad, LiveJournal), Twitter, Facebook, MySpace, Digg, Bebo e muitas outras redes sociais;
• Acessa o Delicious e tem uma ferramenta integrada para o Facebook Chat;
  
• Tem um menu de pesquisa de fotos e vídeos automático e rápido (vide Figura 01), com ferramentas sofisticadas de compartilhamentos de imagens e multimídia nos mais diversos sistemas, como YouTube, Photobucket, Flirck, Picasa, TinyPic;
• Permite que você arraste qualquer tela, figura ou texto do navegador para uma área reservada onde o conteúdo é guardado e indexado automaticamente, podendo depois ser convertido em imagem, exportado ou automaticamente anexado em um artigo de um blog ou e-mail, por exemplo;
  
• O Flock tem um mini-editor de blog que permite a você escrever o artigo inteiro, colocar links, figuras e todas as coisas que normalmente se usam sem precisar digitar na tela do navegador (vide Figura 02). Ainda permite que se salve o rascunho, visualize o resultado e se coloque as Tags (Marcadores);
• É gratuito e multiplataforma.
  

Tentador, não é?? Este é o melhor navegador?? Será o Firefox (ou outro navegador qualquer) melhor do que ele?? Siga meu argumento e se pergunte: "de que preciso realmente??"; de sua resposta mágica surgirá o seu verdadeiro melhor navegador, independente da complexidade das informações e da acurácia dos resultados das pesquisas. Navegue tranqüilo e seja feliz!!

Figura 01: Tela do Flock contendo a barra de imagens e a barra lateral de contas e serviços.

Figura 02: Editor de Blogs do Flock contendo parte deste artigo.

Blogged with the Flock Browser

Criando Objetos em JavaScript

Apesar de JavaScript ser uma linguagem procedural, ela também é uma linguagem orientada a objetos. Como pode ser isto?? A explicação é simples: inicialmente, o JavaScript era apenas uma linguagem estruturada, procedural, e ponto final. No entanto, ela ganhou tantas melhorias e novas ferramentas durante as suas muitas modificações, releituras e ampliações que se tornou possível utilizar facilmente o paradigma de orientação a objetos através de determinadas técnicas de construções de funções (além de poder utilizar o operador "." para navegar pela estrutura DOM).
Este artigo versa sobre como utilizar as ferramentas funcionais de JavaScript para trabalharmos com orientação a objeto, de forma a dar mais poder, flexibilidade e organização a nosso código. Parte do que material teórico de precisaremos já foi discutida no nosso velho tutorial sobre o objeto Date e o prototype, que pode ser acessado aqui.
Vale lembrar que objetos (na verdade, as suas classes) podem ser instanciados diversas vezes, sendo suas instâncias independentes umas das outras. As técnicas mostradas aqui respeitam esta característica do paradigma OO. Note que, como o JavaScript é não tipado e procedural, a linguagem assume que todos os objetos e métodos criados têm ampla visibilidade (modificador de acesso público) e nunca gerarão diretamente problemas de casting. Se você não entende este detalhe técnico, não se preocupe, pois ele não lhe fará falta... siga em frente tranqüilo!!

• Criando um Objeto em JavaScript

Basta criar uma função normalmente e instanciá-la com o operador new. Em outras palavras, o operador new pode tornar em objeto qualquer função que você escreva. Vejamos:

function Object() {
}

window.alert(new Object());

O código acima declara uma função e, através do seu instanciamento, esta função é tornada em objeto na memória. Simples e fácil.
Parece louco que qualquer função em JavaScript é automaticamente uma candidata à classe e ao instanciamento, mas é isto mesmo: JS é muitas vezes simples e prático!!

• Criando Métodos em JavaScript

Igualmente simples, para se criar um método basta se criar uma variável dentro de uma função onde seja declarada uma outra função, ao invés de um valor. Veja os exemplos:

function Object() {
this.getName = function() {
return "Object Hello World!!";
};
}

var object = new Object();
window.alert(object.getName());

Observações importantes:
1- Sempre que declarar um método, para se ter certeza de que este método vai ser uma função intrínseca ao objeto, deve-se usar a palavra reservada this, conforme mostra o exemplo acima;
2- Como a declaração de método é, na verdade, uma declaração de variável, deve-se terminá-la com o ponto-e-vírgula depois do fecha chaves!! Este é um erro clássico, mormente para quem faz este procedimento pela primeira vez;
3- Os métodos, em sendo funções, podem receber parâmetros normalmente, como qualquer outra função ordinária.

Outra maneira de se declarar um método é através de associação de funções a variáveis indiretamente, conforme o exemplo:

function Object() {
this.getFullName = getFullName;
}

function getFullName() {
return "Super Object Hello World!!";
}

var object = new Object();
window.alert(object.getFullName());

Esta técnica é útil quando se quer fazer métodos iguais para dois ou mais objetos. Como uma arquitetura bem projetada tende a eliminar este cenário, talvez seja mais interessante utilizar o primeiro idioma, vez que ele é de mais fácil leitura, menos verboso e, especialmente, evita o problema de duplicação de nomes de métodos e funções, o que tente a provocar erros bobos mas de difícil depuração.

• Usando o Objeto Prototype

É possível, por extensão, adicionar-se propriedades e métodos a objetos já existentes do JavaScript. Para tanto, precisaremos acessar o objeto prototype, presente em todos os objetos, e capaz de absorver novas variáveis de funções e valores. Estude o exemplo abaixo, onde iremos modificar o objeto String para que ele tenha um método a mais, capaz de retornar a primeira palavra da String. Para se chamar o método, não é necessário se acessar o objeto prototype pois, uma vez este declarado através daquele, o método passa a compor a estrutura do objeto, em qualquer instância que seja.

String.prototype.getFirstWord = function() {
if(this.length > 1) {
for (i=0; i < this.length; i++) {
if (this.charAt(i) == ' ') {
return this.substring(0,i);
}
}
}
return "";
};
window.alert("pajé online".getFirstWord());

• Conclusão

Apesar do JavaScript ter sido projetado, originalmente, como uma linguagem estrutural, procedural, simples e singela, hoje é possível, através de mecanismos simples e da maleabilidade creditada à linguagem, extendê-las de diversas maneiras, como a aplicação do paradigma de orientação a objetos. Não é tão complexo criar objetos, métodos e propriedades em JavaScript (na verdade, talvez até mais simples que em outras linguagens mais fechadas dentro dos conceitos do paradigma, como o Java), porém é de extremo valor para um desenvolvimento mais profissional, flexível, extensível e complexo, permitindo manter-se a ordem e a hierarquia dos dados, além da boa estrutura e manutenência do código.
Gostou?? Detestou?? Foi bom pra você?? Então COMENTE!!!

Como Detectar Informações do Navegador via JavaScript

Olá Pessoal. Esta é a dica que cria o código daquele quadradinho ali, à direita, na parte de baixo da coluna. Note que ele informa um monte de coisas sobre seu sistema e seu navegador... isto não é invasão de privacidade, nem nenhum código malicioso, mas sim o acesso ao objeto navigator do JavaScript, que permite recuperar várias informações de seu navegador e de seu sistema. Basicamente, é através de acessos a objetos como este que as ferramentas de estatísticas dos portais que você acessa (como o Google Analytics, o Source Forge, etc.) fazem as estatísticas de seu acesso.
Vamos entender este código. Primeiramente, é preciso que se crie a estrutura em HTML onde as informações vão aparecer. Veja que somente criei campos vazios, identificados com IDs, para que possam ser populados dinamicamente, via JavaScript. (No exemplo, troquei as tags para que começassem e terminassem com colchetes, já que o blog não suporta impressão de sinais de maior e menor).

[div id="navegador"]
[p align="center"][b]Configuração do Seu Navegador:[/b][/p]
[p]
[b]Código do Navegador:[/b] [span id="appCode"][/span][br/]
[b]Nome do Navegador:[/b] [span id="appName"][/span][br/]
[b]Versão do Navegador:[/b] [span id="appVersion"][/span][br/]
[b]Cookies Habilitado?[/b] [span id="cookieEnabled"][/span][br/]
[b]Linguagem:[/b] [span id="language"][/span][br/]
[b]Linguagem do Sistema:[/b] [span id="systemLanguage"][/span][br/]
[b]Linguagem do Usuário:[/b] [span id="userLanguage"][/span][br/]
[b]User Agent:[/b] [span id="userAgent"][/span][br/]
[b]Plataforma:[/b] [span id="platform"][/span][br/]
[input type="button" value="Tipos MIME" onclick="getMime();"/]
[input type="button" value="Plugins" onclick="getPlugin();"/][br/]
[/p]
[/div]
[script type="text/javascript"]
populateBrownserInfo();
[/script]

Observe que neste mesmo código já coloquei as chamadas às funções que vão popular a tela. Apenas nos últimos campos (tipos MIME e Plugins) eu não deixei espaço, mas sim um botão. Fiz isso para não poluir a tela. Como estas opções costumam gerar grande quantidade de caracteres em suas saídas, eu as deleguei para uma janela POP-UP. Se seu navegador não bloquear POP-UPs, então elas vão aparecer preenchidas com as informações tão logo os respectivos botões sejam acionados.
Vamos às funções:

function populateBrownserInfo() {
var appCode = document.getElementById("appCode");
var appName = document.getElementById("appName");
var appVersion = document.getElementById("appVersion");
var cookieEnabled = document.getElementById("cookieEnabled");
var language = document.getElementById("language");
var systemLanguage = document.getElementById("systemLanguage");
var userAgent = document.getElementById("userAgent");
var userLanguage = document.getElementById("userLanguage");
var platform = document.getElementById("platform");

// Imprimindo os valores
if(appCode != null) {
appCode.innerHTML = navigator.appCodeName;
}
if(appName != null) {
appName.innerHTML = navigator.appName;
}
if(appVersion != null) {
appVersion.innerHTML = navigator.appVersion;
}
if(appVersion != null) {
if (navigator.cookieEnabled) {
cookieEnabled.innerHTML = "Claro, xará!!";
} else {
cookieEnabled.innerHTML = "Meu Deus, não!";
}
}
if(language != null) {
if (navigator.language == null) {
language.innerHTML = "Não Sei!!";
} else {
language.innerHTML = navigator.language;
}
}
if(systemLanguage != null) {
if (navigator.systemLanguage == null) {
systemLanguage.innerHTML = "Não Sei!!";
} else {
systemLanguage.innerHTML = navigator.systemLanguage;
}
}
if(userLanguage != null) {
if (navigator.userLanguage == null) {
userLanguage.innerHTML = "Não Sei!!";
} else {
userLanguage.innerHTML = navigator.userLanguage;
}
}
if(userAgent != null) {
userAgent.innerHTML = navigator.userAgent;
}
if(platform != null) {
if(navigator.platform == null) {
platform.innerHTML = "Não Sei!!";
} else {
platform.innerHTML = navigator.platform;
}
}
}

Uma maneira de popular dados em uma tag span é utilizar a sua propriedade span.innerHTML, recuperando o que há nela ou reescrevendo o seu conteúdo. A lista de propriedades do navegador recuperada via código é:

navigator.appCodeName = Um nome em código para o navegador.
navigator.appName = O nome "real" do navegador.
navigator.appVersion = Versão do navegador e demais informações correlatas.
navigator.cookieEnabled = Boolean. Indica se os cookies estão ou não habilitados.
navigator.language = Língua padrão do navegador (só existe no Netscape e Firefox).
navigator.systemLanguage = Linguagem do sistema operacional (só existe no IE).
navigator.userLanguage = A linguagem selecionada pelo usuário (só existe no IE).
navigator.userAgent = Um cabeçalho indicando o user agent.
navigator.platform = A plataforma do sistema operacional.

Existem ainda outras propriedades do objeto navigator, muitas pouco comuns ou úteis. As seguintes, todavia, talvez tenham boa aplicação:

function getMime() {
var mimes = "";
if(navigator.mimeTypes == null) {
mimes = "Não Sei!!";
} else {
var types = navigator.mimeTypes;
mimes = types[0].type;
for (i = 1; i < types.length; i++) {
mimes = mimes + ", " + types[i].type;
}
}
var mimeWindow =
window.open("", "MIMEs", "menubar=no,location=no,status=no,scrollbars=yes");
mimeWindow.document.body.innerHTML = mimes;
}

function getPlugin() {
var plugins = "";
if(navigator.plugins == null) {
plugins = "Não Sei!!";
} else {
var pluginsArray = navigator.plugins;
plugins = pluginsArray[0].name + " (arquivo: " + pluginsArray[0].filename
+ ", descrição: " + pluginsArray[0].description + ")";
for (i = 1; i < pluginsArray.length; i++) {
plugins = plugins + ", " + pluginsArray[i].name + " (arquivo: " +
pluginsArray[i].filename + ", descrição: " + pluginsArray[i].description + ")";
}
}
var pluginWindow =
window.open("", "Plugins", "menubar=no,location=no,status=no,scrollbars=yes");
pluginWindow.document.body.innerHTML = plugins;
}

navigator.mimeTypes = Uma lista com todos os tipos MIME suportados pelo navegador (Somente Netscape e Firefox).
navigator.plugins = Uma lista em HTML de todos os plugins instalados no navegador (Somente Netscape e Firefox). Observe que esta lista é em HTML, ou seja, pode conter links, quebra de linhas, etc.
Por serem longas e/ou formatadas, estas opções abrirão em nova janela.
A nova janela é criada com a função window.open. Esta função retorna uma referência para a janela recém-criada e, com isto, podemos popular todo o seu código HTML dinamicamente!! Basta acessar:

var novaJanela = window.open("", "Plugins", "menubar=no");

Observe que deixamos vazio o lugar onde seria colocado o arquivo HTML da janela. No entanto, este arquivo é criado na memória com apenas a estrutura DOM básica. É o suficiente para injetarmos conteúdos nele, recuperando o seu objeto document, de onde podemos recuperar o objeto body e toda a estrutura DOM da página da janela:

var conteudo = [obtém todo o conteúdo da janela no formato de String];
novaJanela.document.body.innerHTML = conteudo;

Pessoal, espero ter ajudado!! Claro, como não custa nada: COMEEEEENNTEEEEMMM!!!!!

Algoritmo: Jogo da Velha em Javascript

Pessoal,

Resolvi criar este post para mostrar o joguinho da velha que coloquei aí do lado, na parte de cima. Segue o código abaixo:

var jogador = 0;
var jogoArray = new Array(3);
limpaTabuleiro();

function limpaTabuleiro() {
for (i = 0; i < 3; i++) {
jogoArray[i] = new Array(3);
for (j = 0; j < 3; j++) {
jogoArray[i][j] = "";
}
}
for (i = 1; i < 4; i++) {
for (j = 1; j < 4; j++) {
var botao = document.getElementById((i+"")+(j+""));
if (botao != null) {
botao.value = "";
}
}
}
}

function executa(id) {
var botao = document.getElementById(id);
var jogadorSpan = document.getElementById("jogador");
var linha = id.substring(0,1)-1;
var coluna = id.substring(1)-1;

if (botao.value != "") {
return;
}

if (jogador == 0) {
jogoArray[linha][coluna] = "X";
botao.value = "X";
jogador = 1;
jogadorSpan.innerText = "1";

} else {
jogoArray[linha][coluna] = "0";
botao.value = "0";
jogador = 0;
jogadorSpan.innerText = "0";
}

// Verifica se o cara ganhou
for (i = 0; i < 3; i++) {
if(jogoArray[i][0] == jogoArray[i][1] && jogoArray[i][1] == jogoArray[i][2]
&& jogoArray[i][0] != "") {
window.alert("Jogo encerrado!");
limpaTabuleiro();
}
}
for (i = 0; i < 3; i++) {
if(jogoArray[0][i] == jogoArray[1][i] && jogoArray[1][i] == jogoArray[2][i]
&& jogoArray[0][i] != "") {
window.alert("Jogo encerrado!");
limpaTabuleiro();
}
}
if(jogoArray[0][0] == jogoArray[1][1] && jogoArray[1][1] == jogoArray[2][2]
&& jogoArray[0][0] != "") {
window.alert("Jogo encerrado!");
limpaTabuleiro();
}
if(jogoArray[2][0] == jogoArray[1][1] && jogoArray[1][1] == jogoArray[0][2]
&& jogoArray[2][0] != "") {
window.alert("Jogo encerrado!");
limpaTabuleiro();
}
}

Como este jogo funciona??
Primeiramente, mapeamos o tabuleiro num Array bidimensional. Por conveniência, os botões da matriz do tabuleiro têm o id semelhante ao índice bidimensional do Array (11, 12, 13, 21, 22, 23, 31, 32, 33). A cada jogada, o jogo faz basicamente 3 coisas:

1- Verifica se a casa está vazia, ou seja, se um jogador ainda não jogou nesta casa:
if (botao.value != "") {
return;
}

2- Escolhe o jogador e preenche o campo com o seu marcador correto ("X" ou "O", que são marcadores tradicionais no jogo da velha);

3- Verifica se este último jogador que jogou ganhou o jogo. Caso tenha ganhado, o jogo é encerrado e o tabuleiro é limpado.

Um incremento a mais seria ter um botão para limpar o tabuleiro (a função já está aí) e uma verificação para saber se deu velha.
Bom, divirtam-se!!

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.

JavaScript Tutorial: O Objeto Date (Parte 1)

Quando criamos nosso sistema de informações, é apenas uma questão de tempo até precisarmos manipular, medir, alterar, calcular e comparar datas e horas. Quando nosso sistema é (como a grande maioria!) baseado em web, então grande parte desta etapa é feita no próprio navegador do cliente, via javascript, o que é muito bom, pois aumenta a produtividade, envitando posts desnecessários e diminuindo a carga sobre o servidor.
Interessante que tenho visto pessoas com dificuldade neste assunto, e nem sempre se acha um bom tutorial em português para ajudar. Assim, O Pajé ficou motivado a escrever este artigo, contendo todas as ferramentas básicas para aprender e utilizar o objeto Date do JavaScript sem medo. Como pretendo um tutorial abrangente, dividi-o em duas partes (em breve sairá do forninho a segunda!!).
Bom, vamos do começo: o objeto Date é o objeto responsável, no javascript, por lidar com informações de tempo, desde o ano atual até o último milisegundo, passando pelo dia da semana, mês, hora, minuto, etc. Se seu sistema contiver campos como Período, Data Inicial, Horário, Duração, Diurno, Noturno, Calendário, etc., então freqüentemente você precisará do objeto Date entrando em ação! E não se engane: estes campos são dos mais corriqueiros!!
Manipular as datas no javascript é bom porque evita que o usuário envie para o servidor informações que certamente não vão passar pela validação e vão ter que retornar ao mesmo ponto. Com Date, você pode validar se a data informada está correta, se o período compreende ao menos um valor mínimo, e se a data final é maior que a inicial, por exemplo.
Claro que, no servidor, você deverá revalidar tudo (não seja bobo!! Tem clientes tentando passar a perna também!!), mas, tendo uma validação prévia no cliente, então as chances da validação falhar no servidor e se retornar ao mesmo ponto são menores. Acredite: este tipo de artifício ajuda muito a desafogar seu servidor!!
Então vamos ao que interessa!! Antes de utilizar o objeto, é preciso criá-lo:

var data = new Date();

Isto cria um objeto Date válido, contendo a data e instante atual (do momento da criação). Mesmo que a data desejada seja outra, para começar é preciso instanciar assim.
Abaixo, as funções mais importantes do objeto Date e suas descrições:

var data = new Date();
// Número de millisegundos desde 01/01/1970 @ 00:00
data.getTime();
// Número de segundos (0-59)
data.getSeconds();
// Número de miutos (0-59)
data.getMinutes();
// Número da hora (0-23)
data.getHours();
// Número do dia da semana, sendo 0=domingo e 6=sábado
data.getDay();
// Dia do mês (0-31)
data.getDate();
// Número do mês. CUIDADO: 0=janeiro, e 11=dezembro.
// Muita gente erra achando que janeiro é mês 1!!
data.getMonth();
// Número do ano, com 4 dígitos
data.getFullYear();

Apenas com estes comandos já dá para resolver grande parte dos problemas. Lembre-se de que o objeto date suporta comparações com os operadores ">", "<", ">=", "<=", "+", "-" e que é sempre seguro, quando necessário, convertê-lo para inteiro com a função getTime(). Com estes operadores, podemos somar ou diminuir uma data da outra (importante para cálculo de períodos!!), podemos comparar qual data é maior e qual é menor (importante em validações), etc. Uma referência completa, embora exaustiva, sobre o objeto Date de javascript encontra-se aqui.

• Definindo uma data específica

Claro que o "var data = new Date()" nem sempre é o que a gente quer. Muitas vezes, queremos que o objeto criado represente uma data específica, seja ela lida de um campo da tela, seja ela calculada de alguma forma. Assim, podemos utilizar outros construtores do objeto Date, conforme mostrado a seguir:

var hoje = new Date();
var anoQueVem = new Date('January 1, '+(hoje.getFullYear()+1));
var diasRestantes = anoQueVem - hoje;

Este construtor recebe uma String com o nome do mês, dia e ano. No código acima, também usamos os operadores para saber quanto tempo resta até o fim do ano. Assim, posso calcular os dias, minutos, segundos e milisegundos para o reveillón!! Se você tem um portal que espera um grande lançamento, é isto que você deve usar!!
Outra maneira de inserir uma data, utilizando apenas valores numéricos, é esta:

var dataNova = new Date(ano, mes, dia[, hora[, minuto[, segundo[,milisegundo]]]]);

Assim é possível se criar um objeto Date com o valor de qualquer data, até a precisão dos milisengundos. Lembre-se de que o valor do mês parece sempre diminuído de 1, porque janeiro=0, fevereiro=1, março=2, ..., dezembro=11!! Até o argumento "dia" é obrigatório, os outros são opcionais. Exemplos:

//Dia de natal: 25/12/2008.
var data1 = new Date(2008, 11, 25);

//Independência: 07/09/2001.
var data2 = new Date(2001, 8, 7);

//Meu almoço, no aniversário do Rio de Janeiro.
var data3 = new Date("March 20, 2008 12:20:00 pm");
var data4 = new Date(2008, 2, 20, 12, 20, 00);

Observe que data3 e data4 são iguais.

Ocorre menos assiduamente, mas, caso você tenha um número inteiro (geralmente advindo do em data.getTime()) e quer convertê-lo para uma data, basta usar a função estática Date.parse, ou o construtor que recebe um único inteiro:

var data1 = new Date(inteiro); //inteiro = número inteiro
var data2 = Date.parse(inteiro); //inteiro = número inteiro

É isso, gente!! Na segunda parte do tutorial, vamos fazer um aplicativo para mostrar a data e hora, e vamos construir um lindo relógio digital para seu portal!! Qualquer coisa (gostou, não gostou, ajudou, foi inútil, etc. e tal...), comentem!! É só clicar aí embaixo!!

Veja a continuação na segunda parte!!