** 강좌를 쭉 올리고 보니 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>
## 특정날짜 선언 - 잘못된 결과
- 미국은 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>
## 코드 결과
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>
## 코드 결과
'웹언어 > JAVASCRIPT' 카테고리의 다른 글
| [JS강좌] 30강 dataset : 문서객체 사용자정의속성 - 오쌤의 니가스터디 (0) | 2021.07.04 |
|---|---|
| [JS강좌] 29강 문서객체 영역 속성 - 오쌤의 니가스터디 (0) | 2021.07.03 |
| [JS강좌] 28강 문서객체 class관련 속성 - 오쌤의 니가스터디 (0) | 2021.06.30 |
| [JS강좌] 27강 자바스크립트 에러(Error) - 오쌤의 니가스터디 (0) | 2021.06.18 |
| [JS강좌] 26강 자바스크립트 정규표현식(RegExp) - 오쌤의 니가스터디 (0) | 2021.06.18 |
