Введение
В этом лабе участники изучат мощный объект JavaScript Date и освоят важные методы манипуляции датами и временем. С помощью комплексного практического подхода студенты узнают, как создавать объекты Date с использованием различных методов инициализации, получать конкретные компоненты даты, форматировать и отображать информацию о дате, модифицировать даты с использованием методов установки и выполнять сложные вычисления с датами.
Лаб предоставляет практическое пошаговое руководство по работе с датами в JavaScript, охватывая такие базовые навыки, как создание объектов Date из текущего времени, конкретных временных меток, строк дат и миллисекунд с момента Unix Epoch. В конце этого лабу участники получат твердый понимание методов манипуляции датами, что позволит им эффективно обрабатывать задачи, связанные с датами, в своих приложениях на JavaScript.
Создать новый объект Date
В этом шаге вы узнаете, как создавать новые объекты Date в JavaScript, что является фундаментом для работы с датами и временем. Объект JavaScript Date позволяет легко работать с датами и временем.
Сначала откройте WebIDE и создайте новый файл JavaScript под названием dates.js в каталоге ~/project.
Создайте новый объект Date с разными методами инициализации:
// Создайте объект Date, представляющий текущую дату и время
let currentDate = new Date();
console.log("Текущая дата:", currentDate);
// Создайте объект Date с конкретной датой и временем
let specificDate = new Date(2023, 5, 15, 10, 30, 0);
console.log("Конкретная дата:", specificDate);
// Создайте объект Date из строки даты
let stringDate = new Date("2023-06-15");
console.log("Дата из строки:", stringDate);
// Создайте объект Date, используя миллисекунды с момента Unix Epoch
let millisecondDate = new Date(1686816000000);
console.log("Дата из миллисекунд:", millisecondDate);
Пример вывода:
Текущая дата: Чт, 15 июн 2023 12:00:00 GMT+0000 (Всемирное координированное время)
Конкретная дата: Чт, 15 июн 2023 10:30:00 GMT+0000 (Всемирное координированное время)
Дата из строки: Чт, 15 июн 2023 00:00:00 GMT+0000 (Всемирное координированное время)
Дата из миллисекунд: Чт, 15 июн 2023 00:00:00 GMT+0000 (Всемирное координированное время)
Основные моменты, которые нужно запомнить:
new Date()создает объект Date с текущей датой и временемnew Date(year, month, day, hours, minutes, seconds)позволяет создать конкретную дату- Месяцы нумеруются с нуля (0-11), поэтому июнь представляется числом 5
- Вы можете создавать даты из строк или миллисекунд с момента Unix Epoch (1 января 1970)
Извлечь компоненты текущей даты
В этом шаге вы узнаете, как извлекать конкретные компоненты из объекта Date. Продолжая с предыдущего шага, мы будем использовать файл dates.js для демонстрации различных методов извлечения компонентов даты и времени.
Откройте файл ~/project/dates.js и добавьте следующий код:
// Создайте объект текущей даты
let currentDate = new Date();
// Извлеките отдельные компоненты даты
let year = currentDate.getFullYear();
let month = currentDate.getMonth(); // 0-11 (0 = январь)
let day = currentDate.getDate(); // День месяца
let hours = currentDate.getHours();
let minutes = currentDate.getMinutes();
let seconds = currentDate.getSeconds();
let milliseconds = currentDate.getMilliseconds();
// Отобразите отдельные компоненты
console.log("Год:", year);
console.log("Месяц:", month + 1); // Добавьте 1, чтобы показать фактический номер месяца
console.log("День месяца:", day);
console.log("Часы:", hours);
console.log("Минуты:", minutes);
console.log("Секунды:", seconds);
console.log("Миллисекунды:", milliseconds);
// Получите день недели
let dayOfWeek = currentDate.getDay(); // 0-6 (0 = воскресенье)
console.log("День недели:", dayOfWeek);
// Получите временную метку (миллисекунды с момента Unix Epoch)
let timestamp = currentDate.getTime();
console.log("Временная метка:", timestamp);
Пример вывода:
Год: 2023
Месяц: 6
День месяца: 15
Часы: 12
Минуты: 30
Секунды: 45
Миллисекунды: 123
День недели: 4
Временная метка: 1686816045123
Основные моменты, которые нужно запомнить:
getFullYear()возвращает четырехзначный годgetMonth()возвращает 0-11, поэтому добавьте 1, чтобы получить фактический номер месяцаgetDate()возвращает день месяца (1-31)getDay()возвращает день недели (0-6)getTime()возвращает миллисекунды с 1 января 1970
Форматировать и отображать информацию о дате
В этом шаге вы узнаете различные методы форматирования и отображения информации о дате в JavaScript. Откройте файл ~/project/dates.js и добавьте следующий код, чтобы изучить разные методы форматирования:
// Создайте объект текущей даты
let currentDate = new Date();
// Метод 1: Использование toLocaleDateString()
let localeDateString = currentDate.toLocaleDateString();
console.log("Местная строка даты:", localeDateString);
// Метод 2: Использование toDateString()
let dateString = currentDate.toDateString();
console.log("Строка даты:", dateString);
// Метод 3: Использование toLocaleString()
let localeString = currentDate.toLocaleString();
console.log("Местная строка:", localeString);
// Метод 4: Настраиваемое форматирование
let customFormat =
`${currentDate.getFullYear()}-` +
`${(currentDate.getMonth() + 1).toString().padStart(2, "0")}-` +
`${currentDate.getDate().toString().padStart(2, "0")}`;
console.log("Настраиваемый формат:", customFormat);
// Метод 5: API по интернационализации
let options = {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric"
};
let intlFormat = currentDate.toLocaleDateString("en-US", options);
console.log("Интернационализированный формат:", intlFormat);
Пример вывода:
Местная строка даты: 6/15/2023
Строка даты: Чт, 15 июн 2023
Местная строка: 6/15/2023, 12:30:45 PM
Настраиваемый формат: 2023-06-15
Интернационализированный формат: Thursday, June 15, 2023
Основные моменты, которые нужно запомнить:
toLocaleDateString()предоставляет локализованное представление датыtoDateString()дает человекочитаемую строку датыtoLocaleString()включает как дату, так и время- Настраиваемое форматирование позволяет точно контролировать отображение даты
- API по интернационализации предлагает расширенные варианты локализации
Изменить дату с использованием методов-сеттеров
В этом шаге вы узнаете, как изменять компоненты даты с использованием методов установки даты в JavaScript. Откройте файл ~/project/dates.js и добавьте следующий код, чтобы изучить разные способы изменения значений дат:
// Создайте новый объект Date
let modifiableDate = new Date();
console.log("Оригинальная дата:", modifiableDate);
// Установите конкретный год
modifiableDate.setFullYear(2024);
console.log("После установки года:", modifiableDate);
// Установите месяц (0-11, поэтому 5 представляет июнь)
modifiableDate.setMonth(5);
console.log("После установки месяца:", modifiableDate);
// Установите день месяца
modifiableDate.setDate(15);
console.log("После установки дня:", modifiableDate);
// Установите часы (0-23)
modifiableDate.setHours(14);
console.log("После установки часов:", modifiableDate);
// Установите минуты (0-59)
modifiableDate.setMinutes(30);
console.log("После установки минут:", modifiableDate);
// Установите секунды (0-59)
modifiableDate.setSeconds(45);
console.log("После установки секунд:", modifiableDate);
// Цепочка вызовов методов установки
let customDate = new Date();
customDate.setFullYear(2025).setMonth(11).setDate(31);
console.log("Настраиваемая дата:", customDate);
Пример вывода:
Оригинальная дата: Чт, 15 июн 2023 12:30:45 GMT+0000
После установки года: Чт, 15 июн 2024 12:30:45 GMT+0000
После установки месяца: Чт, 15 июн 2024 12:30:45 GMT+0000
После установки дня: Сб, 15 июн 2024 12:30:45 GMT+0000
После установки часов: Сб, 15 июн 2024 14:30:45 GMT+0000
После установки минут: Сб, 15 июн 2024 14:30:45 GMT+0000
После установки секунд: Сб, 15 июн 2024 14:30:45 GMT+0000
Настраиваемая дата: Ср, 31 дек 2025 00:00:00 GMT+0000
Основные моменты, которые нужно запомнить:
- Методы установки позволяют точно изменять компоненты даты
- Месяцы нумеруются с нуля (0-11)
- Часы используют 24-часовой формат (0-23)
- Методы установки изменяют исходный объект Date
- Вы можете использовать цепочку вызовов некоторых методов установки для удобства
Выполнить вычисления с датой
В этом шаге вы узнаете, как выполнять различные вычисления с датами с использованием методов объекта Date в JavaScript. Откройте файл ~/project/dates.js и добавьте следующий код, чтобы изучить разные методы манипуляции с датами:
// Создайте объекты дат для вычислений
let currentDate = new Date();
let futureDate = new Date(currentDate.getTime());
// Добавьте дни к дате
futureDate.setDate(currentDate.getDate() + 30);
console.log("Текущая дата:", currentDate);
console.log("30 дней отныне:", futureDate);
// Вычислите разницу между датами
let differenceInMilliseconds = futureDate.getTime() - currentDate.getTime();
let differenceInDays = Math.floor(
differenceInMilliseconds / (1000 * 60 * 60 * 24)
);
console.log("Дни между датами:", differenceInDays);
// Вычислите возраст или прошедшее время
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("Вычисленный возраст:", ageInYears);
// Найдите последний день текущего месяца
let lastDayOfMonth = new Date(
currentDate.getFullYear(),
currentDate.getMonth() + 1,
0
);
console.log("Последний день текущего месяца:", lastDayOfMonth);
// Проверьте, является ли год високосным
function isLeapYear(year) {
return new Date(year, 1, 29).getMonth() === 1;
}
console.log("2024 год високосный?", isLeapYear(2024));
Пример вывода:
Текущая дата: Чт, 15 июн 2023 12:30:45 GMT+0000
30 дней отныне: Сб, 15 июл 2023 12:30:45 GMT+0000
Дни между датами: 30
Вычисленный возраст: 33
Последний день текущего месяца: Ср, 30 июн 2023 00:00:00 GMT+0000
2024 год високосный? true
Основные моменты, которые нужно запомнить:
- Используйте
getTime(), чтобы получить миллисекунды для вычислений - Преобразуйте миллисекунды в дни, поделив соответствующим образом
- Вы можете добавить или вычесть дни с использованием
setDate() - Вычислите возраст или разницу во времени между датами
- Проверьте високосные года, проверив 29 февраля
Резюме
В этом лабораторном задании участники узнали, как манипулировать датами с использованием объекта Date в JavaScript, проведя комплексное исследование методов создания, извлечения и манипуляции с датами. В лабораторном задании были рассмотрены различные способы инициализации объектов Date, включая создание дат, представляющих текущий момент времени, указание точных дат с параметрами, разбор дат из строк и генерацию дат из временных меток в миллисекундах.
Практические упражнения продемонстрировали ключевые навыки обработки дат в JavaScript, такие как извлечение конкретных компонентов даты, форматирование информации о дате, применение методов установки для изменения дат и выполнение вычислений с датами. Участники приобрели практический опыт работы с нумерованными с нуля представлениями месяцев, поняли различные стратегии инициализации объектов Date и научились эффективно использовать встроенные методы JavaScript для работы с временными данными в различных сценариях программирования.
