1. Date 객체에 대하여
프로그래밍 툴에는 사람들이 자주 사용하는 요소들을 구현시켜놓은 것들이 존재한다(선배님들의 노고..).
그래서 지금은 프로그램의 시나리오를 잘 짜고 그대로 구현하는 것도 필요한 큰 능력이지만, 미리 만들어져있는 것들을 능수능란하게 사용하는 것도 개발자로선 필요한 덕목 중 하나일 것이다.
그만큼! 작업속도가 월등히 빨라질테니.
이 Date 객체가 그러하다.
날짜와 시간 등을 한번에 불러와주는 객체이기 때문이다.
참조 사이트 : https://www.w3schools.com/js/js_dates.asp
JavaScript Date Objects
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
2. Date객체 사용법
1) get과 set
Date 객체 뿐만이 아니라 명령어에는 get과 set의 개념을 붙이는 경우가 종종 있다.
get은 우리가 무언가의 값을 달라고 요청했을 때 값을 받는 것이며,
set은 반대로 우리가 프로그램에게 무언가의 값을 입력할 때 사용한다.
이 두 경우 안에서의 Date 객체 활용법을 함께 알아보자.
2) Date 객체의 기본 문법
먼저 Date 객체의 기본 문법을 알아보자!
const d=new Date();
위의 문법을 통해 d라는 변수를 Date 객체로 선언하였다.
이 때 const 를 사용하였다.
const!! 기억하는가!
바로 변수의 값을 절대로 변하지 않는 값으로 선언할 때 쓰였다.
이제 d 뒤에 점(.)을 찍어보자.
아주 다양한 값들이 나온다.
이와 같은 코드들을 활용하여 시스템의 현재 시간에 따라 날짜와 시간 값을 불러올 수 있다.
3. get으로 Date 객체 불러오기
참조 사이트 : https://www.w3schools.com/js/js_date_methods.asp
JavaScript Date Methods
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
1) Date 객체로 날짜 불러오기
const d=new Date();
document.write(d.getFullYear());
document.write("<br>");
document.write(d.getMonth());
document.write("<br>");
document.write(d.getDate());
document.write("<br>");
* getMonth의 경우 값이 0~11로 지정이 되어있어서 사용할 땐 꼭 값에 +1을 해주어야 한다.
2) Date 객체로 시간 불러오기
document.write(d.getHours());
document.write("<br>");
document.write(d.getMinutes());
document.write("<br>");
document.write(d.getSeconds());
document.write("<hr>");
3) Date 객체로 요일 불러오기
const days=["일", "월", "화", "수", "목", "금", "토"]
document.write(days[d.getDay()]);
document.write("<hr>").getDay() 는 요일을 숫자값으로 변환하여 가져온다.
이 게시물을 작성하는 요일은 수요일이다.
그래서 d.getDay() 의 값으론 3이 출력되게 되고 "수"라는 결과값이 출력이 된다.
4. set으로 Date 객체 세팅하기
참조사이트 : https://www.w3schools.com/js/js_date_methods_set.asp
JavaScript Date Set Methods
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
1) set으로 날짜 지정해주기
const someday=new Date();someday라는 변수는 지금 현재의 날짜가 배정이 되어있다.
이 날짜를 바꾸기 위해서 set을 사용해준다.
사용방법은 get과 똑같다.
const someday=new Date();
someday.setFullYear(1989, 5, 8); //1989년 6월 8일
document.write(someday);위의 코드를 입력하면 1989년 6월!!!!!!! 8일의 날짜 정보가 뜬다.
여기서 6월인 이유!
자바에서 달은 0-11의 값을 갖고 있기 때문이란거! 잊지 말자!
2) set으로 날짜값 연산하기
자바스크립트를 사용하여 날짜에 숫자를 더해 연산이 가능하다.
예를 들어 특정 날짜에 10일을 더하라, 라는 명령이 가능하다.
아래의 코드를 살펴보자.
const d=new Date();
d.setDate(someday.getDate()+10); // someday값에서 10일 더하기 (1989년 6월 18일)
document.write(d.getDate()); // 18
d라는 새로운 Date 객체는 위에서 선언했던 someday보다 10일이 더 많은 날이다.
5. 현재 날짜 Date로 출력하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>03_Date객체.html</title>
</head>
<body>
<h3>Date객체</h3>
현재날짜 <div id="clock"></div>
<script>
const d=new Date(); // 시스템의 현재 날짜 정보 가져오기
let today="";
//년도
today += d.getFullYear() + ".";
//월
if ((d.getMonth())+1<10) {
today += "0" + (d.getMonth() + 1) + ".";
} else {
today += (d.getMonth() + 1) + ".";
}
//일
today += d.getDate() + " ";
//요일
today += "(";
const days=["일", "월", "화", "수", "목", "금", "토"]
today += days[d.getDay()];
today += ") ";
//시간
if ((d.getHours())>12) {
today += "PM " + (d.getHours() - 12) + ":";
} else if ((d.getHours())==12) {
today += "PM " + (d.getHours()) + ":";
} else {
today += "AM " + (d.getHours()) + ":";
}
//분
if ((d.getMinutes())<10) {
today += "0" + d.getMinutes() + ":";
} else {
today += d.getMinutes() + ":";
}
//초
if ((d.getSeconds())<10) {
today += "0" + d.getSeconds();
} else {
today += d.getSeconds();
}
document.getElementById("clock").innerHTML=today;
</script>
</body>
</html>
'⁂ Java Script > : 기본 익히기' 카테고리의 다른 글
| [JS] #6-2 함수(Function) : 내장 객체(Object) (0) | 2022.08.11 |
|---|---|
| [JS] #6-1 함수(Function) : 기본 문법, 전달값, 매개변수, 리턴값 (0) | 2022.08.10 |
| [JS] #4-3 정렬(Sort) (0) | 2022.08.09 |
| [JS] #4-2 배열에서 사용되는 메소드(Method) (0) | 2022.08.09 |
| [JS] #4-1 배열(array) (0) | 2022.08.09 |