Aprenda Javascript

Tudo sobre Javascript Parte 6

Objeto Date - Trabalhando com Data e Hora

O objeto Date é um objeto embutido do Javascript que permite trabalhar com data e hora. Com ele, podemos armazenar datas e realizar operações sobre elas, por meio dos métodos do objeto.

As datas em JS são baseadas em um valor de tempo que corresponde ao número de milissegundos decorridos desde 01 de Janeiro de 1970, às 00:00:00 (chamado de Época Unix). Datas anteriores à essa são armazenadas na forma negativa de milissegundos.

A faixa de datas suportadas pelo JS é de 100 milhões de dias anteriores a 01/01/1970 até 100 milhões de dias. Os objetos Date em JS somente podem ser instanciados chamando-se seu construtor (ou seja, usando o comando new).

Caso o objeto Date seja invocado como uma função (sem o operador new), será retornada uma string contendo a data e hora atuais.

Para criar um objeto Date temos quatro formas:

Datas e horas atuais, basta não usar nenhum argumento:


var data = new Date();
document.write(data);

Valor da data em milissegundos (contando a partir de 01/01/1970 00:00:00):


var data = new Date(1458542651569);
document.write(data);

Atribuindo uma data com ano, mês, dia (e também horas, minutos, segundos e etc.,) nessa ordem. Lembre-se que Janeiro começa do 0, e não do 1, e se o ano for passado com dois dígitos será interpretadp algo entre 1900 e 1999:


var data = new Date(1990, 0, 25);
document.write(data);

Passando a data em uma string de formato específico:


var data = new Date("2004/09/25");
document.write(data);

Também podemos usar diretamente o parâmetro num método, assim:


document.write("Data: " + Date() + "<br/>");
document.write("Data em milissegundos: " + Date.now() + "<br/>");

PS: Observe que o Date.now() retorna a data em milissegundos.

Pra calcular a data aproximada de um número de milissegundos, você divide por 1000, depois por 86400 (número de segundo de um dia), e depois por 365 (dias de um ano, sem contar os bissextos) e soma 1970.

Objeto Date - Métodos Set e Get

Os métodos set do objeto Date são utilizados para alterar partes da data e hora armazenadas. A tabela a seguir mostra os métodos setters mais comuns do objeto Date:

Método	Descrição
setDate()	Configura o dia do mês, entre 1 e 31
setFullYear()	Configura o ano (4 dígitos)
setHours()	Configura a hora, entre 0 e 23
setMilliseconds()	Configura os milissegundos, entre 0 e 999
setMinutes()	Configura os minutos da hora, entre 0 e 59
setMonth()	Configura o mês, entre 0 e 11 (começa do 0)
setSeconds()	Configura os segundos do minuto, entre 0 e 59
setTime()	Configura os milissegundos decorridos desde 01/01/1970 00:00:00

Os métodos Get funcionam do mesmo modo, apenas trocando o Set por Get (o Set muda e o Get pega).

PS: No Get também podemos pegar o dia da semana com o getDay(), contado a partir do 0.

Veja a seguir, os métodos Get num script:


var mes = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
var semana = ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"];
var hoje = new Date();
document.write("Exibindo os valores iniciais de data e hora no navegador:<br/>");
document.write("Dia do mês: " + hoje.getDate() + "<br/>");
document.write("Mês: " + mes[hoje.getMonth()] + "<br/>");
document.write("Ano (2 dígitos): " + (hoje.getYear() % 100) + "<br/>");
document.write("Ano (4 dígitos): " + hoje.getFullYear() + "<br/>");
document.write("Dia da semana: " + semana[hoje.getDay()] + "<br/>");
document.write("Hora: " + hoje.getHours() + "<br/>");
document.write("Minutos: " + hoje.getMinutes() + "<br/>");
document.write("Segundos: " + hoje.getSeconds() + "<br/>");
document.write("Millissegundos: " + hoje.getMilliseconds() + "<br/>");

PS: O fato de poder usar um array para configurar o nome dos meses talvez explique o porquê dos meses serem contados a partir do 0, e não do 1, o mesmo vale pra semanas. O getYear() retorna números acima do 100 a partir do ano 2000, sendo necessário colocar o % 100 para ele exibir o ano com dois dígitos corretamente.

O mesmo código acima pode ser usado junto com uma função para passar datas por formulários (os document.write podem ser retirados):


function alteraData() {
    hoje.setDate(document.getElementById("dia").value);
    hoje.setMonth(document.getElementById("mes").value - 1);
    hoje.setFullYear(document.getElementById("ano").value);
    alert("Data: " + semana[hoje.getDay()] + ", " + hoje.getDate() + " de " + mes[hoje.getMonth()] + " de " + hoje.getFullYear());
}

Código HTML do formulário para os códigos acima:


<form name="datas" action="javascript:void()">
    <p>Dia: <input type="number" id="dia" min="1" max="31" step="1" value="1"/></p>
    <p>Mês: 
    <select name="meses" id="mes">
        <option value="1" selected>Janeiro</option>
        <option value="2">Fevereiro</option>
        <option value="3">Março</option>
        <option value="4">Abril</option>
        <option value="5">Maio</option>
        <option value="6">Junho</option>
        <option value="7">Julho</option>
        <option value="8">Agosto</option>
        <option value="9">Setembro</option>
        <option value="10">Outubro</option>
        <option value="11">Novembro</option>
        <option value="12">Dezembro</option>
    </select></p>
    <p>Ano: <input type="number" id="ano" min="1900" max="2100" step="1" value="1900"/></p>
    <input type="button" value="Alterar Data" onclick="alteraData()"/>
</form>

Veja outro código, onde consultamos datas:


var mes = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
var semana = ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"];
var hoje = new Date(); // Data atual.
var novaData = new Date(2014, 0, 15); // Data atribuída.
var mili = new Date(1488569383588); // Contagem de milissegundos.
var dataStr = new Date("2014/1/15"); // Passando data por string.
document.write("Millissegundos desde 01/01/1970 00:00:00: " + hoje.getTime() + "<br/>");
document.write("Ano obtido pela contagem de milissegundos: " + mili.getFullYear() + "<br/>");
document.write("Data atribuída na criação do objeto: " + novaData.getDate() + " de " + mes[novaData.getMonth()] + " de " + novaData.getFullYear() + "<br/>");
document.write("Data passada por string: " + dataStr.getDate() + " de " + mes[dataStr.getMonth()] + " de " + dataStr.getFullYear() + "<br/>");
document.write("Data passada por string: " + dataStr.getDate() + "/" + (dataStr.getMonth() + 1) + "/" + (dataStr.getYear() % 100) + "<br/>");
document.write("Data passada por string em milissegundos: " + dataStr.getTime() + "<br/>");

PS: Ao passar como string, ele interpreta como o mês (exemplo, 10 é Outubro mesmo).

Array - Criando Matrizes

As matrizes são arrays bidimensionais (arrays dentro de arrays). Veja um exemplo de matriz:


var novaMatriz = [["Banana", "Maçã"],
                  ["Pera", "Abacate"],
                  ["Uva", "Tâmara"]];

document.write(novaMatriz[2][0] + "<br/>");

Como visto acima, para ler um array dentro de uma matriz, usa-se os colchetes, o primeiro representa a linha/bloco desejado, e o segundo, o conteúdo que deseja verificar (sempre contando a partir do 0).

PS: Para verificar todos os elementos, basta não indicar os colchetes, apenas colocar o nome da matriz sem nada, igual uma variável).

Para exibir os elementos numa tabelinha, podemos colocar estruturas for e condicionais if e else pra isso:


var novaMatriz = [["Banana", "Maçã"], ["Pera", "Abacate"], ["Uva", "Tâmara"]];
                
var valores = "";

for(let l = 0; l < 3; l++) {
    for(let c = 0; c < 2; c++) {
        if(c < 2 - 1) {
            valores += novaMatriz[l][c] + " ";
        }
        else {
            valores += novaMatriz[l][c] + "<br/>";
        }
    }
}
document.write("Conteúdo da matriz:<br/>" + valores);

No caso acima, o que está dentro dos colchetes da matriz são as variáveis.

Veja um exemplo mais complexo, no qual colocamos várias estruturas de repetição, para escolhermos quais e quantos números terão numa matriz, e exibirá numa tabela em alert:


var linhas = parseInt(prompt("Digite a quantidade de linhas desejadas na matriz!", "1"));
var colunas = parseInt(prompt("Digite a quantidade de colunas desejadas na matriz!", "1"));
alert("Criar uma matriz de " + linhas + " linhas por " + colunas + " colunas.");

var matriz2 = [];

for(let i = 0; i < linhas; i++) {
    matriz2[i] = [];
    for(let j = 0; j < colunas; j++) {
        matriz2[i][j] = "";
    }
}

for(let l = 0; l < linhas; l++) {
    for(let c = 0; c < colunas; c++) {
        matriz2[l][c] = prompt("Digite um valor para inserir na matriz: [" + l + "][" + c + "]:", "0");
    }
}

var valores2 = "";

for(let l = 0; l < linhas; l++) {
    for(let c = 0; c < colunas; c++) {
        if(c < colunas - 1) {
            valores2 += matriz2[l][c] + " ";
        }
        else {
            valores2 += matriz2[l][c] + "\n";
        }
    }
}

alert("Conteúdo da matriz2:\n" + valores2);

Tratamento de Erros em Javascript

O try catch finally são utilizados para tratar erros.

No bloco try nós inserirmos a rotina que queremos tratar o provável erro que aconteça (não que ela irá obrigatoriamente gerar um erro, e sim uma rotina que seja passível de geração de erro), que caso aconteça, será tratado pra não passar ele no programa ou não mostrar uma mensagem padrão do sistema, o que permite também um feedback melhor pro usuário do ocorrido.

Quando acontece o erro no try, ele para a execução do bloco imediatamente, passa pro catch e passa essa exceção gerada pra ele, e dentro do bloco do catch é onde o erro será tratado propriamente dito, onde podemos interceptar a exceção e realizar o tratamento mais adequado ao programa.

Independente se ocorrer um erro ou não, o finally será executado, ele não é obrigatório.

Esse é a estrutura básica de um try catch:


try {
    document.write("Mensagem de Teste"); // É executado
}
catch(ex) {
    document.write("ERRO"); // Não é executado
}

No código acima, apenas o que está no try será executado, já que o código dentro dele está certo, o que está no catch não será executado (o parâmetro dentro dos parênteses do catch pode ter qualquer nome).

Mas vamos provocar um erro proposital, escrevendo errado o document.write do try, que provocará a exceção de erro:


try {
    document.writ("Mensagem de Teste"); // Não será executado, já que criou uma exceção de erro.
}
catch(ex) {
    document.write("ERRO"); // Será executado
}

Podemos colocar também a opção console.log para mostrar o erro (que será visto somente no inspecionar elemento do navegador). Também colocamos uma mensagem que mostrará o tipo de erro:


try {
    document.writ("Mensagem de Teste");
}
catch(ex) {
    document.write("ERRO:" + ex.message);
    console.log("Mensagem de erro: " + ex.message);
}

PS: Alguns erros o Javascript já trata sem precisar dessa estrutura, como por exemplo, ao tentar fazer uma divisão por 0, que retorna Infinity, mas podemos tratar ele assim:


try {
    var res = 50 / 0;
    
    if(res == "Infinity") {
        throw new Error("Impossível Dividir por Zero"); // Isso criará uma exceção
    }
}
catch(ex) {
    res = ex.message;
}

alert(res);

Ou dessa forma, com a exceção dentro de uma função:


function divisao(n1, n2) {
    if(n2 == 0) {
        throw new Error("É impossível Dividir por Zero!"); // Isso criará uma exceção
    }

    return n1 / n2;
}

try {
    document.write(divisao(50, 0));
}
catch(ex) {
    document.write(ex.message);
}

Vamos gerar um erro manualmente, num exemplo onde uma variável não poderá receber um valor maior do que 10, definido por nós mesmos:


var num;

try {
    num = parseInt(prompt("Digite um valor: "));
    if(num > 10) {
        throw new Error("Valor inválido, o valor deverá ser até o máximo de 10!"); // Isso criará uma exceção
    }
    document.write("Valor Digitado: " + num);
}
catch(ex) {
    document.write("ERRO: " + ex.message);
}

No caso acima, o que fez criar a exceção, foi o método throw new Error(), pode ver que ele nem terminou de executar o código e já pulou pro catch.

No finally, ele exibirá a mensagem independente se o erro ocorrer ou não:


var num;

try {
    num = parseInt(prompt("Digite um valor: "));
    if(num > 10) {
        throw new Error("Valor inválido, o valor deverá ser até o máximo de 10!"); // Isso criará uma exceção
    }
    document.write("Valor Digitado: " + num);
}
catch(ex) {
    document.write("ERRO: " + ex.message);
}
finally {
    document.write("<br/>Fim do tratamento");
}

Existem outros tipos de erros que são tratados, como o ReferenceError para variáveis inexistentes, e o TypeError para erros de atribuição. Mas como o Javascript é dinamicamente tipado, costuma ter apenas um bloco catch com o parâmetro sem tipo definido, mas sempre recebe um objeto de erro.

PS: Também podemos usar o manipulador de eventos onerror para manipular erros:


onerror = erro; // Nome da função invocada caso ocorra o erro.

alert(baixar()); // A função baixar não existe!

function erro(){
    alert("Houve um erro!");
}

Mas mesmo assim, é mais recomendado usar o try catch mesmo por ser um recurso mais moderno.