Introdução
Neste laboratório, os participantes explorarão o poderoso objeto JavaScript Date e aprenderão técnicas essenciais para manipular datas e horas. Através de uma abordagem abrangente e prática, os alunos descobrirão como criar objetos Date usando vários métodos de inicialização, recuperar componentes específicos de data, formatar e exibir informações de data, modificar datas usando métodos setter e realizar cálculos complexos de data.
O laboratório fornece orientação prática, passo a passo, sobre como trabalhar com datas em JavaScript, cobrindo habilidades fundamentais, como criar objetos Date a partir da hora atual, timestamps específicos, strings de data e milissegundos desde a Época Unix (Unix Epoch). Ao final deste laboratório, os participantes terão adquirido uma sólida compreensão das técnicas de manipulação de datas, permitindo que lidem efetivamente com tarefas relacionadas a datas em suas aplicações JavaScript.
Criar um Novo Objeto Date
Nesta etapa, você aprenderá como criar novos objetos Date em JavaScript, o que é fundamental para trabalhar com datas e horas. O objeto Date do JavaScript permite que você trabalhe com datas e horas facilmente.
Primeiro, vamos abrir o WebIDE e criar um novo arquivo JavaScript chamado dates.js no diretório ~/project.
Crie um novo objeto Date com diferentes métodos de inicialização:
// Create a Date object representing the current date and time
let currentDate = new Date();
console.log("Current Date:", currentDate);
// Create a Date object with specific date and time
let specificDate = new Date(2023, 5, 15, 10, 30, 0);
console.log("Specific Date:", specificDate);
// Create a Date object from a date string
let stringDate = new Date("2023-06-15");
console.log("Date from String:", stringDate);
// Create a Date object using milliseconds since Unix Epoch
let millisecondDate = new Date(1686816000000);
console.log("Date from Milliseconds:", millisecondDate);
Exemplo de saída:
Current Date: Thu Jun 15 2023 12:00:00 GMT+0000 (Coordinated Universal Time)
Specific Date: Thu Jun 15 2023 10:30:00 GMT+0000 (Coordinated Universal Time)
Date from String: Thu Jun 15 2023 00:00:00 GMT+0000 (Coordinated Universal Time)
Date from Milliseconds: Thu Jun 15 2023 00:00:00 GMT+0000 (Coordinated Universal Time)
Pontos-chave para lembrar:
new Date()cria um objetoDatecom a data e hora atuaisnew Date(year, month, day, hours, minutes, seconds)permite criar uma data específica- Os meses são indexados a partir de zero (0-11), então junho é representado por 5
- Você pode criar datas a partir de strings ou milissegundos desde a Época Unix (1º de janeiro de 1970)
Recuperar Componentes da Data Atual
Nesta etapa, você aprenderá como extrair componentes específicos de um objeto Date. Com base na etapa anterior, usaremos o arquivo dates.js para demonstrar vários métodos para recuperar componentes de data e hora.
Abra o arquivo ~/project/dates.js e adicione o seguinte código:
// Create a current date object
let currentDate = new Date();
// Retrieve individual date components
let year = currentDate.getFullYear();
let month = currentDate.getMonth(); // 0-11 (0 = January)
let day = currentDate.getDate(); // Day of the month
let hours = currentDate.getHours();
let minutes = currentDate.getMinutes();
let seconds = currentDate.getSeconds();
let milliseconds = currentDate.getMilliseconds();
// Display individual components
console.log("Year:", year);
console.log("Month:", month + 1); // Add 1 to show actual month number
console.log("Day of Month:", day);
console.log("Hours:", hours);
console.log("Minutes:", minutes);
console.log("Seconds:", seconds);
console.log("Milliseconds:", milliseconds);
// Get day of the week
let dayOfWeek = currentDate.getDay(); // 0-6 (0 = Sunday)
console.log("Day of Week:", dayOfWeek);
// Get timestamp (milliseconds since Unix Epoch)
let timestamp = currentDate.getTime();
console.log("Timestamp:", timestamp);
Exemplo de saída:
Year: 2023
Month: 6
Day of Month: 15
Hours: 12
Minutes: 30
Seconds: 45
Milliseconds: 123
Day of Week: 4
Timestamp: 1686816045123
Pontos-chave para lembrar:
getFullYear()retorna o ano de quatro dígitosgetMonth()retorna 0-11, então adicione 1 para o número real do mêsgetDate()retorna o dia do mês (1-31)getDay()retorna o dia da semana (0-6)getTime()retorna milissegundos desde 1º de janeiro de 1970
Formatar e Exibir Informações de Data
Nesta etapa, você aprenderá vários métodos para formatar e exibir informações de data em JavaScript. Abra o arquivo ~/project/dates.js e adicione o seguinte código para explorar diferentes técnicas de formatação:
// Create a current date object
let currentDate = new Date();
// Method 1: Using toLocaleDateString()
let localeDateString = currentDate.toLocaleDateString();
console.log("Local Date String:", localeDateString);
// Method 2: Using toDateString()
let dateString = currentDate.toDateString();
console.log("Date String:", dateString);
// Method 3: Using toLocaleString()
let localeString = currentDate.toLocaleString();
console.log("Locale String:", localeString);
// Method 4: Custom formatting
let customFormat =
`${currentDate.getFullYear()}-` +
`${(currentDate.getMonth() + 1).toString().padStart(2, "0")}-` +
`${currentDate.getDate().toString().padStart(2, "0")}`;
console.log("Custom Format:", customFormat);
// Method 5: Internationalization API
let options = {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric"
};
let intlFormat = currentDate.toLocaleDateString("en-US", options);
console.log("Internationalized Format:", intlFormat);
Exemplo de saída:
Local Date String: 6/15/2023
Date String: Thu Jun 15 2023
Locale String: 6/15/2023, 12:30:45 PM
Custom Format: 2023-06-15
Internationalized Format: Thursday, June 15, 2023
Pontos-chave para lembrar:
toLocaleDateString()fornece uma representação de data localizadatoDateString()fornece uma string de data legível por humanostoLocaleString()inclui data e hora- A formatação personalizada permite o controle preciso sobre a exibição da data
- A API de internacionalização oferece opções avançadas de localização
Modificar a Data Usando Métodos Setter
Nesta etapa, você aprenderá como modificar componentes de data usando os métodos setter de Date do JavaScript. Abra o arquivo ~/project/dates.js e adicione o seguinte código para explorar diferentes maneiras de alterar os valores da data:
// Create a new Date object
let modifiableDate = new Date();
console.log("Original Date:", modifiableDate);
// Set specific year
modifiableDate.setFullYear(2024);
console.log("After setting year:", modifiableDate);
// Set month (0-11, so 5 represents June)
modifiableDate.setMonth(5);
console.log("After setting month:", modifiableDate);
// Set day of the month
modifiableDate.setDate(15);
console.log("After setting day:", modifiableDate);
// Set hours (0-23)
modifiableDate.setHours(14);
console.log("After setting hours:", modifiableDate);
// Set minutes (0-59)
modifiableDate.setMinutes(30);
console.log("After setting minutes:", modifiableDate);
// Set seconds (0-59)
modifiableDate.setSeconds(45);
console.log("After setting seconds:", modifiableDate);
// Chaining setter methods
let customDate = new Date();
customDate.setFullYear(2025).setMonth(11).setDate(31);
console.log("Custom Date:", customDate);
Exemplo de saída:
Original Date: Thu Jun 15 2023 12:30:45 GMT+0000
After setting year: Thu Jun 15 2024 12:30:45 GMT+0000
After setting month: Thu Jun 15 2024 12:30:45 GMT+0000
After setting day: Sat Jun 15 2024 12:30:45 GMT+0000
After setting hours: Sat Jun 15 2024 14:30:45 GMT+0000
After setting minutes: Sat Jun 15 2024 14:30:45 GMT+0000
After setting seconds: Sat Jun 15 2024 14:30:45 GMT+0000
Custom Date: Wed Dec 31 2025 00:00:00 GMT+0000
Pontos-chave para lembrar:
- Os métodos setter permitem a modificação precisa dos componentes da data
- Os meses são indexados a partir de zero (0-11)
- As horas usam o formato de 24 horas (0-23)
- Os métodos setter modificam o objeto
Dateoriginal - Você pode encadear alguns métodos setter para conveniência
Realizar Cálculos de Data
Nesta etapa, você aprenderá como realizar vários cálculos de data usando os métodos Date do JavaScript. Abra o arquivo ~/project/dates.js e adicione o seguinte código para explorar diferentes técnicas de manipulação de data:
// Create date objects for calculations
let currentDate = new Date();
let futureDate = new Date(currentDate.getTime());
// Add days to a date
futureDate.setDate(currentDate.getDate() + 30);
console.log("Current Date:", currentDate);
console.log("30 Days from Now:", futureDate);
// Calculate difference between dates
let differenceInMilliseconds = futureDate.getTime() - currentDate.getTime();
let differenceInDays = Math.floor(
differenceInMilliseconds / (1000 * 60 * 60 * 24)
);
console.log("Days Between Dates:", differenceInDays);
// Calculate age or time elapsed
let birthDate = new Date("1990-01-01");
let ageInMilliseconds = currentDate.getTime() - birthDate.getTime();
let ageInYears = Math.floor(ageInMilliseconds / (1000 * 60 * 60 * 24 * 365.25));
console.log("Calculated Age:", ageInYears);
// Find the last day of the current month
let lastDayOfMonth = new Date(
currentDate.getFullYear(),
currentDate.getMonth() + 1,
0
);
console.log("Last Day of Current Month:", lastDayOfMonth);
// Check if a year is a leap year
function isLeapYear(year) {
return new Date(year, 1, 29).getMonth() === 1;
}
console.log("Is 2024 a Leap Year?", isLeapYear(2024));
Exemplo de saída:
Current Date: Thu Jun 15 2023 12:30:45 GMT+0000
30 Days from Now: Sat Jul 15 2023 12:30:45 GMT+0000
Days Between Dates: 30
Calculated Age: 33
Last Day of Current Month: Wed Jun 30 2023 00:00:00 GMT+0000
Is 2024 a Leap Year? true
Pontos-chave para lembrar:
- Use
getTime()para obter milissegundos para cálculos - Converta milissegundos em dias dividindo apropriadamente
- Você pode adicionar ou subtrair dias usando
setDate() - Calcule a idade ou as diferenças de tempo entre as datas
- Verifique anos bissextos testando 29 de fevereiro
Resumo
Neste laboratório, os participantes aprenderam a manipular datas usando o objeto Date do JavaScript por meio de uma exploração abrangente das técnicas de criação, recuperação e manipulação de datas. O laboratório abordou múltiplas abordagens para inicializar objetos Date, incluindo a criação de datas que representam o momento atual, a especificação de datas exatas com parâmetros, a análise de datas a partir de strings e a geração de datas a partir de timestamps em milissegundos.
Os exercícios práticos demonstraram habilidades-chave de manipulação de datas em JavaScript, como extrair componentes específicos da data, formatar informações de data, aplicar métodos setter para modificar datas e realizar cálculos de data. Os participantes ganharam experiência prática com representações de meses indexadas a partir de zero, compreendendo diferentes estratégias de inicialização de objetos Date e aproveitando os métodos JavaScript embutidos para trabalhar efetivamente com dados temporais em vários cenários de programação.
