본문 바로가기

웹언어/JAVASCRIPT

[JS강좌] 13.5강 기본내장객체 - Date - 오쌤의 니가스터디

728x90
반응형

 

 

 

 

 

 

** 강좌를 쭉 올리고 보니 Date객체를 안해서 13.5강으로 만들어봤습니다. 제 강좌를 쭉 보신분들은 13강까지 보고 보시면 좋을 듯합니다.

 

 

 

 

** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요.

https://www.youtube.com/watch?v=qggDJk9UHOY 

 

 

 

 

 

 

 

 

 

 

* 기본내장객체

종류 설명
String 문자열 객체
Number 숫자 객체
Math 수학 객체
Array 배열 객체
Date 날짜시간객체

- 기본내장객체는 첫글자를 대문자로 작성하는 것이 규칙

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1. Date 객체 선언

- Date객체는 자바스크립트가 서버의 날짜와 시간을 가져올 수 있도록 하는 객체입니다.

- 이 파트는 선언 시 무조건 new 키워드를 써서 생성자 함수 방식으로 사용해야 합니다.

 

 

1) 변수식 선언

- 없습니다.

 

 

 

 

 

 

2) 생성자 함수를 이용한 객체식 선언

- 기본내장객체는 미리 선언되어 있어 생성자 함수를 통해 호출해서 사용하면 됩니다.

 

## 문법

var 변수명 = new Date();

 

 

## 오늘날짜 선언 - 예시코드

- 오늘 날짜를 선언할 때는 Date() 함수 내부에 매개변수를 작성하지 않으면 됩니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>기본내장객체</title>
        <script>
            //오늘날짜 선언
            var today = new Date();

            alert(today);
        </script>
    </head>
    <body>
        
    </body>
</html>

 

## 오늘날짜 선언 - 결과

 

 

 

 

 

## 특정날짜 선언 - 잘못된 예시코드

- 올해 크리스마스를 확인해볼게요!

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>기본내장객체</title>
        <script>
            //특정날짜 선언
            var xmas = new Date(2022,12,25);

            alert(xmas);
        </script>
    </head>
    <body>
        
    </body>
</html>

 

## 특정날짜 선언 - 잘못된 결과

분명 12월 25일을 적었는데 내년이 나오는 것 보이시죠?

 

- 미국은 1월, 2월, 3월 이렇게 부르지 않고, [january], [february],... 이런 식으로 부르죠?

- 그래서 규칙이 없기 때문에 배열에 담겨 있습니다. 그래서 1월은 0번, 2월은 1번 이런 식이에요.

 

 

## 특정날짜 선언 - 잘된 예시코드

- 올해 크리스마스를 정확히 확인해볼게요!

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>기본내장객체</title>
        <script>
            //특정날짜 선언
            var xmas = new Date(2022,11,25);

            alert(xmas);
        </script>
    </head>
    <body>
        
    </body>
</html>

 

## 특정날짜 선언 - 잘된 예시결과

이제 정확히 나오는 것이 확인됩니다.

 

 

 

 

 

 

 

 

 

 

 

2. Date 객체 파라미터(매개변수)지정

- 위의 예시에서 보면 Date()내부에 년월일을 적었습니다.

- 하지만 날짜와 시간은 많은 것을 표현할 수 있습니다.

 

## 예시 파라미터 코드

new Date()
new Date(년, 월, 일, 시, 분, 초, 밀리초)
new Date(밀리초)
new Date(날짜문자열)

- 이때 월을 지정하는 숫자는 0~11까지 인덱스번호에 담긴다는 것을 기억해주세요.

 

 

 

1) 파라미터 전부 적어보기

## 예시코드

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">	
		<title>기본내장객체</title>
		<script>
			var xmas = new Date(2022,11,25,12,30,00);

			document.write(xmas)
		</script>
	</head>
	<body>
		
	</body>
</html>

 

## 코드 결과

 

 

 

 

 

 

2) 날짜만 적기

## 예시코드

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">	
		<title>기본내장객체</title>
		<script>
			var xmas = new Date(2022,11,25);

			document.write(xmas)
		</script>
	</head>
	<body>
		
	</body>
</html>

 

## 코드 결과

시간이 안들어가는 것이 보입니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90
반응형

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. Date - toOO() 메서드

- 위에 보면 날짜 표시가 매우 디테일하게 나오는 것을 확인할 수 있습니다.

- 그럼 그냥 보기에는 어렵겠죠?

- 그래서 조금 더 편하게 보기 위한 메서드를 소개해보겠습니다.

- 앞에 to라는 영문으로 시작하는 메서드들입니다.

 

 

 

1) toOO()메서드의 종류

메서드명 설명 JS버전
toDateString() 날짜를 읽을 수 있는 형태로 반환 - ex) Fri Apr 08 2022 ES1
toISOString() ISO 표준을 사용하여 날짜를 문자열로 반환 - ex) 2022-04-08T04:22:15.556Z ES5
toJSON() JSON 날짜 형식을 사용하여 날짜를 문자열로 반환 - ex) 2022-04-08T04:23:30.409Z ES5
toLocaleDateString() Date의 날짜(시간이 아님)를 문자열로 반환 - ex) 2022. 4. 8. ES1
toLocaleTimeString() 날짜의 시간 부분을 문자열로 반환 - ex) 오후 1:25:55 ES1
toLocaleString() 날짜와 시간을 문자열로 반환 - ex) 2022. 4. 8. 오후 1:26:43 ES1
toString() 날짜 객체를 문자열로 반환 - ex) Fri Apr 08 2022 13:27:28 GMT+0900 (한국 표준시) ES1
toTimeString() 날짜 객체의 시간 부분을 문자열로 반환 - ex) 13:28:12 GMT+0900 (한국 표준시) ES1
toUTCString() UTC에 따라 날짜 객체를 문자열로 반환 - ex) 2022년 4월 8일 금요일 04:28:58 GMT ES1

 

 

 

 

 

2) toOO()메서드 실습

## 코드 예시

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS - Date객체</title>
        <script>
            var today = new Date();

            var to01 = today.toDateString();
            var to02 = today.toISOString();
            var to03 = today.toJSON();
            var to04 = today.toLocaleDateString();
            var to05 = today.toLocaleTimeString();
            var to06 = today.toLocaleString();
            var to07 = today.toString();
            var to08 = today.toTimeString();
            var to09 = today.toUTCString();

            document.write('toDateString() : ' + to01 + '<br>');
            document.write('toISOString() : ' + to02 + '<br>');
            document.write('toJSON() : ' + to03 + '<br>');
            document.write('toLocaleDateString() : ' + to04 + '<br>');
            document.write('toLocaleTimeString() : ' + to05 + '<br>');
            document.write('toLocaleString() : ' + to06 + '<br>');
            document.write('toString() : ' + to07 + '<br>');
            document.write('toTimeString() : ' + to08 + '<br>');
            document.write('toUTCString() : ' + to09 + '<br>');
        </script>
    </head>
    <body>
        
    </body>
</html>

 

 

## 코드 결과

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4. Date객체의 게터와 세터

- 메서드는 크게 2가지로 나눕니다. 값을 얻어오는 형태의 메서드가 있고, 값을 변경하는 형태의 메서드가 있습니다.

- 보통 메서드들은 저 중 한개의 기능만 해서 2개를 구분하지 않습니다.

- 그래도 값을 얻어오기도 하고, 값을 변경하기도 하는 메서드의 종류가 있습니다. 

- 지금 Date객체를 보자면, 우리는 오늘의 년도를 알고 싶기도 하고, 10년뒤면 몇년인지 알고 싶기도 합니다.

- 그렇기 때문에 메서드가 년도와 관련된 것은 맞지만, 값을 얻어올수도 있고, 변경할수도 있습니다.

- 그래서 그 메서드를 구분하기 위해 얻어오는 형태의 메서드는 getOO()을 붙여서 게터라고 부르고, 변경하는 형태의 메서드는 setOO()을 붙여서 세터라고 부릅니다.

- 예시로 든 년도는 그래서 getFullYear()라는 메서드와 setFullYear()라는 메서드를 둘 다 갖고 있습니다.

- 특히, Date객체는 이런 메서드들 무척이나 많습니다. 

 

 

 

 

1) Date객체의 게터(getOO) 

메서드명 설명
getFullYear() 4자리 숫자로 연도 가져옴 (yyyy)
getMonth() 월을 숫자로 가져옴 (0-11) - 1월이 0, 12월이 11로 배당
getDate() 일을 숫자로 가져옴 (1-31)
getHours() 시간을 가져옴 (0~23)
getMinutes() 분을 가져옴 (0~59)
getSeconds() 초를 가져옴 (0~59)
getMilliseconds() 밀리초를 가져옴 (0~999)
getTime() 1970년 1월 1일 이후의 밀리초 수를 반환
getDay() 요일을 숫자로 가져옴 (0-6) - 일요일이 0, 토요일을 6
Date.now() 1970년 1월 1일 00:00:00 UTC 이후의 밀리초 수를 반환

 

 

2) 게터를 이용한 날짜와 요일, 시간 구하기

## 코드 예시

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS - Date객체</title>
        <script>
            //오늘 날짜와 시간
            var today = new Date();

            //년월일담는 변수
            var y = today.getFullYear();
            var m = today.getMonth() + 1; //월은 0~11반환
            var d = today.getDate();

            //오늘날짜 출력
            document.write('오늘 날짜 : ' + y + '년 ' + m + '월 ' + d + '일<br>');

            //요일을 담는 변수
            var day = today.getDay();
            var week = ['일','월','화','수','목','금','토'];

            //오늘요일 출력
            document.write('오늘 요일 : ' + week[day] + '요일<br>'); 
            
            //시분초를 담는 변수
            var h = today.getHours();
            var m2 = today.getMinutes();
            var s = today.getSeconds();

            //현재시각을 출력
            document.write('현재 시각 : ' + h + '시 ' + m2 + '분 ' + s + '초'); 
        </script>
    </head>
    <body>
        
    </body>
</html>

 

 

## 코드 결과

 

 

 

 

3) Date객체의 세터(setOO) 

메서드명 설명
setDate() 날짜를 숫자로 설정(1-31)
setFullYear() 연도 설정(선택적으로 월과 일)
setHours() 시간 설정(0-23)
setMilliseconds() 밀리초 설정(0-999)
setMinutes() 분 설정(0-59)
setMonth() 월 설정(0-11)
setSeconds() 초 설정(0-59)
setTime() 시간 설정(1970년 1월 1일 이후의 밀리초)

 

 

 

4) 세터를 이용한 오늘로부터의 100일 후 구하기

## 코드 예시

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS - Date객체</title>
        <script>
            //오늘 날짜와 시간
            var today = new Date();

            //오늘날짜 출력
            document.write('오늘날짜 : ' + today.toLocaleDateString() + '<br>'); 

            //오늘의 일만 담는 변수
            var d = today.getDay(); 

            //100을 뒤로 변경
            today.setDate(d + 100);

            //100일 뒤 출력
            document.write('오늘날짜 : ' + today.toLocaleDateString() + '<br>'); 
        </script>
    </head>
    <body>
        
    </body>
</html>

 

 

## 코드 결과

 

 

 

 

 

 

 

 

 

728x90
반응형