Olá! Você sabe que dia do mês é hoje? Se você não sabe, pode consultar seu celular para descobrir. Neste caso, provavelmente, algum aplicativo está apresentando na tela esta informação, ou seja, a data de hoje, em algum formato predefinido. Na verdade, se observarmos os sistemas que estão ao nosso redor, notaremos que datas e seus métodos são muito importantes. São eles que nos permitem definir, por exemplo, a idade de uma pessoa, os juros a serem cobrados em um empréstimo, o cronograma de uma disciplina na universidade e tantas outras coisas.

É por isso que, nesta disciplina, reservamos esta aula para que você possa aprender como JavaScript permite que programadores definam e trabalhem com datas. Em JavaScript, datas são objetos. Apesar de não tratarmos de orientação a objetos nesta disciplina, o que utilizaremos nesta aula sobre esse tema será extremamente simples, pois apenas iremos criar e recuperar datas e alterar os seus valores. Vamos lá?!

Inicialmente, é muito importante saber o que é uma Data. Se você perguntar para alguém agora "que data é hoje?", muito provavelmente receberá como resposta apenas o dia e o mês. Claro, essa pessoa estará deixando implícito o ano. No entanto, na maioria das linguagens de programação, a data é bem mais do que apenas dia, mês e ano. Em JavaScript, a data é composta por ano, mês, dia, hora, minutos, segundos e milissegundos.

Eu vou aproveitar um fato histórico como exemplo. Você saberia dizer o que aconteceu na data que temos no slide, ou seja, o que aconteceu no dia 20 de julho de 1969, às 23 horas, 56 minutos, 15 segundos e 960 milissegundos, no horário de Brasília?

Foi nesse momento que Neil Armstrong pisou na lua. Bem, na verdade, eu exagerei um pouquinho na precisão. O computador de orientação do módulo de comando tinha a capacidade de manter o tempo em milissegundos. No entanto, mesmo com toda essa precisão, ninguém pode dizer com absoluta certeza quando, exatamente, Neil Armstrong pisou pela primeira vez na lua. O que podemos afirmar, com certeza, é que Armstrong deu o primeiro passo na lua em 20 de julho de 1969, um pouco depois das 23:56, horário de Brasília.

E durante essa ação ele falou: “Ok, eu vou sair do módulo lunar agora” e “Esse é um pequeno passo para um homem, um grande salto para a humanidade”. Em algum momento, durante o intervalo de aproximadamente oito segundos entre essas duas frases, ele se tornou o primeiro ser humano a pisar na lua. Mas não está claro quando exatamente ele fez isso. A própria Nasa informou naquela noite que isso aconteceu no segundo 20. A transcrição em tempo real da transmissão de voz da missão sugere que Armstrong pisou na lua em algum momento entre os segundos 43 e 48. Porém, o relatório oficial da missão Apollo 11 da NASA, publicado em novembro de 1969, informa que o passo ocorreu às 23 horas, 56 minutos e 15 segundos. E o valor dos milissegundos? Bem, esse aí fui eu que inventei.

Em JavaScript, para criar objetos do tipo Data, temos que usar o construtor Date(). Além disso, como estamos criando um objeto, temos que usar a palavra-chave new antes do construtor.

Existem basicamente quatro maneiras de fazer isso: a primeira, sem passar parâmetros; a segunda, passando uma string que representa uma data de maneira textual; a terceira, com um parâmetro numérico; ou, por fim, com dois a sete parâmetros numéricos. Você agora irá conhecer cada uma dessas maneiras e entenderá por que eu, intencionalmente, diferenciei o uso de um parâmetro numérico do uso de dois a sete parâmetros numéricos.

Inicialmente, quando não passarmos parâmetro, o JavaScript criará um objeto com informações do momento exato em que há a interpretação dessa linha de código pelo interpretador. Esse momento é determinado pelo relógio do computador. Se o usuário estiver em um fuso horário diferente do seu, os valores serão diferentes. Veja, no slide, como fazer essa criação. Temos a declaração da variável agora, à qual atribuímos um novo objeto Date(). Para criar esse objeto, escrevemos new Date().

Você pode entender isso como uma atribuição de um número à variável agora. Isso porque JavaScript e várias outras linguagens de programação seguem a representação de tempo do Unix, na qual datas são armazenadas como números, cujos valores são exatamente a quantidade de milissegundos que se passaram, até a data que está sendo representada, a partir da zero hora do dia 1º de janeiro de 1970, considerando o Tempo Médio de Greenwich (em inglês, Greenwhich Mean Time), cuja sigla é GMT e corresponde ao horário padrão de Londres. Esse momento no tempo também é chamado de Unix Epoch, ou Época Unix, em português. É importante notar que esse número também pode ser negativo. Neste caso, estaremos armazenando a quantidade de milissegundos que se passaram da data que está sendo representada até a Época Unix.

Olhando para o slide, vemos o que acontece quando escrevemos na tela o valor numérico da data que eu criei quando estava preparando esta aula. Você conseguiria descobrir quando isso aconteceu? Bom, para nossa sorte, você não precisa fazer esse cálculo, JavaScript já trata disso para nós.

Veja, no slide, o que acontece se simplesmente escrevermos o valor da variável agora no html, como já fizemos diversas vezes até agora nesta disciplina.

Note que JavaScript, automaticamente, exibe textualmente uma representação padrão da data completa em que eu carreguei a página. Podemos ver que isso aconteceu em uma quinta-feira, pois temos Thu, as três primeiras letras de Thursday, ou seja, quinta-feira em inglês. Além disso, vemos que estávamos no dia 24 de outubro de 2019, às 19 horas, 03 minutos e 05 segundos no horário padrão de Brasília, ou seja, GMT-0300. Alguns programadores chamam de localidade a informação sobre o fuso horário. Ao longo desta aula, você conhecerá outras maneiras de exibir esse objeto. Além disso, usando os métodos que também conhecerá nesta aula, você poderá customizar a sua própria exibição de datas.

Você pode utilizar o arquivo 08_1 Definindo_Data_Atual.html para verificar o comportamento desse construtor. Fique à vontade para editar esse arquivo a fim de fazer vários testes.

Código 1 - 08_1 Definindo Data Atual.html

Como vimos, usando o construtor Date() sem passar parâmetros, criamos uma data que representa o momento atual. Se você quiser que o objeto armazene outra data, poderá chamar métodos nesse objeto para alterar os seus valores. Veremos isso ainda nesta disciplina. Também é possível usar uma das outras três formas de chamar o construtor Date().

Na primeira delas, podemos, explicitamente, passar os dados que compõem o objeto Date em JavaScript. São eles: ano, mês, dia, horas, minutos, segundos e milissegundos. Apenas os dois primeiros são obrigatórios, ou seja, para usar o construtor dessa maneira, devemos passar pelo menos dois argumentos: o ano e o mês. Os demais campos são opcionais. Se passarmos três argumentos, o terceiro argumento será interpretado como o dia. Se passarmos quatro argumentos, o quarto argumento será interpretado como a hora. E assim por diante.

Para cada um desses argumentos, temos um intervalo de valores possíveis. No ano, espera-se que sejam usados quatro dígitos. No entanto, se você usar um ou dois dígitos, isto será interpretado como nos anos 1900. Na definição do mês, temos um fato muito importante: os meses são números de 0 a 11. Assim sendo, janeiro é o mês 0 e dezembro é o mês 11. Preste bem atenção nisso, pois estamos muito acostumados a trabalhar com meses de 1 a 12. Repetindo: 0 é o mês de janeiro, 1 é o mês de fevereiro, 2 é o mês de março e assim por diante, até chegarmos ao 11, que é o mês de dezembro.

Por esse motivo, para criarmos um objeto Date que corresponda ao momento em que Neil Armstrong pisou na lua, como podemos ver no slide, não usamos o mês 07, como faríamos normalmente. Ao invés disso, devemos usar o mês 06, que, de fato, corresponde ao mês de julho em JavaScript. Por fim, os dias podem variar de 1 a 31, as horas podem variar de 0 a 23, os minutos e segundos podem variar de 0 a 59 e os milissegundos, de 0 a 999.

Apenas por curiosidade, se você usar o 12 para o mês, a data será interpretada como uma data com um ano a mais do que aquele que você passou para o construtor e o mês será janeiro. Por exemplo, o comando new Date(1969, 12), criará uma data que corresponde a janeiro de 1970. Faz sentido, não é mesmo? Afinal de contas, estamos indicando o 13º mês a partir do início de 1969, ou seja, janeiro de 1970.

O mesmo comportamento acontece com os outros elementos. Por exemplo, o comando new Date(1969, 05, 31), criará uma data que corresponde a 01 de julho de 1969. Isso porque estamos indicando o 31º dia após o início de junho. Como esse mês tem 30 dias, e JavaScript leva a quantidade de dias de cada mês em consideração, passamos para o primeiro dia de julho. É importante também dizer que informações sobre anos bissextos também são tratadas automaticamente pelo interpretador JavaScript.

Vamos agora ver vários exemplos de uso desse construtor!

No exemplo 08_2 Definindo Data Especificada.html temos um HTML bem simples, onde temos o título na linha 9 e um parágrafo na linha 11. Na linha 17, declaramos a variável data e ela ficará recebendo datas e exibindo-as no parágrafo da página HTML.

Código 2 - 08_2 Definindo Data Especificada.html

Primeiramente, vou construir um objeto, então uso o new Date para construir esse objeto e os parâmetros, ou seja, sete deles serão passados para o construtor: 1969 é o ano, 06 o mês, 20 o dia, 23 a hora, 56 os minutos, 15 os segundos, e 960 os milissegundos. Note que no campo mês foi passado 06, e o 06 é o mês de julho. Então, se exibir o valor dessa variável data no HTML, temos: "Sun Jul 20 1969 23:56:15 GMT-0300 Horário Padrão de Brasília", ou seja, "20 de julho de 1969".

Nós podemos remover, por exemplo, o valor dos milissegundos, ou seja, vou retirar o último parâmetro. Então a exibição permanece a mesma, pois não temos a exibição na página HTML dos milissegundos. Logo, não teve nenhuma alteração do ponto de vista de exibição, porém a data está com milissegundos igual a 0.

Por outro lado, se tirarmos a informação dos segundos podemos ver, ao recarregar, que os segundos foram zerados, ou seja, ele fica com o valor 0, assim como se eu tirar os minutos, acontecerá o mesmo e ficará também com o valor igual a 0. O mesmo acontece se eu remover o valor das horas, ela também é zerada. Por fim, se não passar o dia do mês, ou seja, se remover o terceiro parâmetro, de fato, passa para o dia 01 de julho e, nesse caso, mudou o dia também, porque 01 de julho de 1969 aparentemente foi uma terça-feira.

Neste exemplo, na linha comentada 23, ao invés de colocar 1969 para o ano, estou passando apenas os dois últimos dígitos na exibição, quando recarrega a página HTML, ele interpretou como 1969, ou seja usando um dígito ou dois dígitos, o interpretador JavaScript vai sempre interpretar como os anos 1900.

Um outro exemplo que será mostrado é o caso em que se usa 12 no mês. Bom, os meses, como falado anteriormente, vão apenas de 0 a 11, daí entra no comportamento cíclico dos intervalos. Então, se usar o mês 12, isso corresponde ao mês de janeiro, mais precisamente ao dia 01 de janeiro de 1970. Ou seja, se usar 1969 e 12, sabendo que 11 é dezembro e o 12 já é o mês de janeiro do ano seguinte, ou seja janeiro de 1970.

Outro exemplo com relação a esse comportamento cíclico é usando o mês 05 com o dia 31. O mês 05 é o mês de junho e, como sabemos, o mês de junho tem 30 dias apenas, então se eu colocar o dia "31" no mês "05", o que acontece é que teremos o primeiro dia do mês seguinte, julho, ou seja, nós teremos agora o primeiro dia de julho de 1969.

Por fim, neste exemplo, quando passamos apenas um parâmetro, como "1950", não haverá uma data no ano de 1950, mas uma data em 1969, tá certo? Porque está passando apenas a quantidade de milissegundos, ou pelo menos está sendo interpretada por uma quantidade de milissegundos, e não com o ano de 1950, no caso.

Apenas uma curiosidade que vou apresentar é que, ao colocar como parâmetros como parâmetros 1969, 06 e 21, teremos um número negativo. Isso porque o getTime de um objeto tipo data pode ser negativo se ele representar um momento anterior à época UNIX, que é o que a gente tá fazendo aqui , tá joia?

Você deve ter notado que eu não apresentei o construtor Date utilizando apenas um parâmetro. Isto porque essa é a segunda maneira de criar datas especificadas. No entanto, o argumento a ser usado, apesar de ser um número, não representa o ano, mas o número de milissegundos desde a época Unix, ou seja, desde a hora zero, GMT, de 01 de janeiro de 1970. Assim sendo, se usarmos o 0 como parâmetro, esperamos que seja exibido exatamente este momento. No entanto, se você estiver no horário de Brasília, ou seja, no GMT-3, será exibido um momento exatamente três horas antes deste, ou seja, 21 horas do dia 31 de dezembro de 1969.

Caso você deseje exibir a hora zero de 01 de janeiro de 1970, terá que considerar o seu fuso horário. Considerando o horário de Brasília, terá que construir uma data usando como argumento o número 10 milhões e 800 mil, ou seja, um oitavo de 86 milhões e 400 mil milissegundos, que é a quantidade de milissegundos que temos em um dia.

A última maneira de usar o construtor Date é passando uma string que corresponde a uma data. Essa string deverá estar em um formato de data aceito por JavaScript. Você aprenderá sobre esses formatos na próxima videoaula.

Mas antes de terminar esta videoaula, você irá conhecer algumas exibições padrões de datas que já temos disponíveis em JavaScript.

Nesse exemplo 08_3 Exibindo Datas.html, serão mostradas algumas exibições padrões que JavaScript nos oferece. Vou começar com a data e, intencionalmente, vou usar o construtor que recebe os milissegundos. Vou construir a data 0, no milissegundos 0 na linha 15, como mostra o código 3.

Código 3 - 08_3 Exibindo Datas.html

E sabe qual data seria? Primeiro de janeiro de 1970. Porém, se carregar essa data na página do HTML, aparecerá 31 de dezembro de 1969, 21 horas no horário padrão de Brasília. Isso, simplesmente, porque este é o resultado do método toString do objeto data no GMT-3, ou seja, três horas antes do primeiro de janeiro de 1970 lá no horário GMT.

Se busco realmente 1º de janeiro de 1970, fazendo as contas, temos uma quantidade enorme de milissegundos, ou seja, 10800000, que equivale às três horas. Ao carregar novamente a página, finalmente aparece 01 de janeiro de 1970, ou seja, colocando a quantidade em milissegundos, o que corresponde a três horas.

Agora, vamos ver algumas exibições dessa data de 01 de janeiro de 1970. O formato que está sendo utilizado é o toString, usando o objeto data como texto, e pode ser visualizado: "Thu Jan 01 1970 00:00:00 GMT-0300 (Horário Padrão de Brasília)". Mas isso corresponde chamar simplesmente o método toString na data. Mesmo recarregando a página, a exibição não muda.

Outro formato possível é o toUTCString, sabe como é exibido ao carregar a data na página HTML? "Thu, 01 Jan 1970 03:00:00 GMT". Inicialmente o dia em inglês, "Thu", 01 de Janeiro de 1970, "03:00:00", que é a hora correspondente, e o fuso horário da data, "GMT".

Outro método que também pode ser usado é o toDateString. Este nos dá um formato mais legível, com o qual estamos mais acostumados, porém, um formato americano: "Thu Jan 01 1970".

Então, assim como nas outras exibições, vamos ter esse texto em inglês, tá? Entretanto, se quiser, de fato, exibir num formato mais apropriado para o Brasil, tem que construir, e vou deixar isso como exercício para você: construir um método pra ter essa exibição mais apropriada para o padrão brasileiro.

Por fim, o último formato que vou mostrar é o método toTimeString. Ele vai exibir apenas a hora e o GMT do objeto data: "00:00:00 GMT-0300 (Horário Padrão de Brasília)". Assim, você pode utilizar também métodos para construir a exibição da data, do objeto data, conforme deseja. Vou deixar no final desta aula um exercício que faz exatamente isso, tá bom?