이 랩에서는 참가자들이 강력한 JavaScript Date 객체를 탐구하고 날짜와 시간을 조작하는 데 필요한 필수 기술을 배우게 됩니다. 포괄적이고 실습 중심의 접근 방식을 통해 학생들은 다양한 초기화 방법을 사용하여 Date 객체를 생성하고, 특정 날짜 구성 요소를 검색하며, 날짜 정보를 형식화하고 표시하고, setter 메서드를 사용하여 날짜를 수정하고, 복잡한 날짜 계산을 수행하는 방법을 배우게 됩니다.
이 랩은 현재 시간, 특정 타임스탬프, 날짜 문자열 및 Unix Epoch 이후의 밀리초로부터 Date 객체를 생성하는 것과 같은 기본적인 기술을 다루면서 JavaScript 에서 날짜를 사용하는 방법에 대한 실질적이고 단계별 지침을 제공합니다. 이 랩이 끝나면 참가자들은 날짜 조작 기술에 대한 탄탄한 이해를 얻게 되어 JavaScript 애플리케이션에서 날짜 관련 작업을 효과적으로 처리할 수 있게 됩니다.
이 단계에서는 날짜와 시간을 다루는 데 기본적인 JavaScript 에서 새로운 Date 객체를 생성하는 방법을 배우게 됩니다. JavaScript Date 객체를 사용하면 날짜와 시간을 쉽게 작업할 수 있습니다.
먼저 WebIDE 를 열고 ~/project 디렉토리에 dates.js라는 새로운 JavaScript 파일을 생성합니다.
다양한 초기화 방법으로 새로운 Date 객체를 생성합니다.
// 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);예시 출력:
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)기억해야 할 주요 사항:
new Date()는 현재 날짜와 시간으로 Date 객체를 생성합니다.new Date(year, month, day, hours, minutes, seconds)는 특정 날짜를 생성할 수 있습니다.이 단계에서는 Date 객체에서 특정 구성 요소를 추출하는 방법을 배우게 됩니다. 이전 단계를 기반으로, dates.js 파일을 사용하여 날짜 및 시간 구성 요소를 검색하는 다양한 방법을 시연합니다.
~/project/dates.js 파일을 열고 다음 코드를 추가합니다.
// 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);예시 출력:
Year: 2023
Month: 6
Day of Month: 15
Hours: 12
Minutes: 30
Seconds: 45
Milliseconds: 123
Day of Week: 4
Timestamp: 1686816045123기억해야 할 주요 사항:
getFullYear()는 4 자리 연도를 반환합니다.getMonth()는 0-11 을 반환하므로 실제 월 번호를 얻으려면 1 을 더합니다.getDate()는 월의 날짜 (1-31) 를 반환합니다.getDay()는 요일 (0-6) 을 반환합니다.getTime()은 1970 년 1 월 1 일 이후의 밀리초를 반환합니다.이 단계에서는 JavaScript 에서 날짜 정보를 형식 지정하고 표시하는 다양한 방법을 배우게 됩니다. ~/project/dates.js 파일을 열고 다음 코드를 추가하여 다양한 형식 지정 기술을 탐색합니다.
// 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);예시 출력:
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기억해야 할 주요 사항:
toLocaleDateString()은 현지화된 날짜 표현을 제공합니다.toDateString()은 사람이 읽을 수 있는 날짜 문자열을 제공합니다.toLocaleString()은 날짜와 시간을 모두 포함합니다.이 단계에서는 JavaScript 의 Date setter 메서드를 사용하여 날짜 구성 요소를 수정하는 방법을 배우게 됩니다. ~/project/dates.js 파일을 열고 다음 코드를 추가하여 날짜 값을 변경하는 다양한 방법을 탐색합니다.
// 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);예시 출력:
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기억해야 할 주요 사항:
이 단계에서는 JavaScript Date 메서드를 사용하여 다양한 날짜 계산을 수행하는 방법을 배우게 됩니다. ~/project/dates.js 파일을 열고 다음 코드를 추가하여 다양한 날짜 조작 기술을 탐색합니다.
// 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));예시 출력:
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기억해야 할 주요 사항:
getTime()을 사용하여 밀리초를 가져옵니다.setDate()를 사용하여 날짜를 더하거나 뺄 수 있습니다.이 랩에서는 참가자들이 JavaScript 의 Date 객체를 사용하여 날짜를 조작하는 방법을 배웠습니다. 날짜 생성, 검색 및 조작 기술을 포괄적으로 탐구했습니다. 이 랩에서는 현재 시점을 나타내는 날짜 생성, 매개변수를 사용하여 정확한 날짜 지정, 문자열에서 날짜 구문 분석, 밀리초 타임스탬프에서 날짜 생성 등 Date 객체를 초기화하는 여러 가지 접근 방식을 다루었습니다.
실습을 통해 특정 날짜 구성 요소 추출, 날짜 정보 형식 지정, setter 메서드를 적용하여 날짜 수정, 날짜 계산 수행과 같은 주요 JavaScript 날짜 처리 기술을 시연했습니다. 참가자들은 0 부터 시작하는 월 표현, 다양한 Date 객체 초기화 전략 이해, 다양한 프로그래밍 시나리오에서 시간 데이터를 효과적으로 처리하기 위해 내장된 JavaScript 메서드 활용에 대한 실질적인 경험을 얻었습니다.
