[자바스크립트] - 객체(object) / 날짜 객체 / 내장 객체 생성 / 디데이 구하기

*  기능 = 매서드 = 함수

---

객체(object) 
  

객체는 기능(함수 = 매서드)과 속성(프로퍼티)으로 이루어져 있다. 즉 함수와 변수를 섞어놓은 것을 말한다.

예를 들어 앞서 배웠던 html 태그들도 하나의 객체라고 볼 수 있다. 
a태그의 기능은 링크연결이고, 속성은 href / class / target 뿐만 아니라 inline 속성같은 것을 말한다. 
객체는 객체마다 사용할 수 있는 기능과 속성이 정해져있다. 예를 들어 a태그가 가진 inline 속성에 넓이를 지정할 수 없는 것처럼 해당 객체마다 올바른 기능과 속성을 적용해줘야한다. 

▶자바스크립트에서 객체의 속성이나 매서드를 사용하고자 할 때는 아래 문법을 사용한다. 

[ 기본형 ]
 1. 객체.매서드( );
   : 객체의 함수(매서드)를 실행함. 매서드= 기능 = 함수 / 객체의 기능을 실행하겠다. 

var nowMonth = today.getMonth(); //현재 월 가져와서 nowMonth에 할당하기

today의 객체에 getMonth 함수를 할당함. 그리고 그걸 변수 nowMonth에 넣음. 

2. 객체.속성;
   : 객체가 가지고 있는 속성의 속성값을 반환한다.

3. 객체.속성 = 속성값;
   : 객체의 속성값을 바꾼다. 

if (url) location.href = "https://" + url;

url이 true면 사이트로 연결해라, 연결하는 속성으로 바꿔라

( if문을 단독으로 하나만 쓸 때는 뒤에 {}를 생략할 수 있다. )

 

---

 객체 종류 

 

자바스크립트의 객체는 크게

1. 내장객체(Built-in Object), 
2. 브라우저 객체 모델(Brower Object Model)

3. 문서 객체 모델(Document Object Model / DOM)로 나눠진다. 

1. 내장 객체의 경우 자바스크립트 엔진에 내장되어 있어 필요한 경우 생성해서 사용할 수 있다. 
내장 객체로는 문자객체(string), 날짜(Date), 배열(Array), 수학(Math)객체가 있다. (앞글자가 대문자다) 

2. 브라우저 객체 모델은 계층 구조로 내장 되어 있는 객체를 말한다. (앞글자가 소문자다)
브라우저 객체로는 window, screen, location, history, navigator 객체 등이 있다. 

3. 문서 객체 모델은 HTML문서 구조를 말한다.

HTML문서의 기본 구조는 HTML태그가 최상위 객체이며, 하위 객체로는 head, body가 있다.

하지만 자바스크립트의 문서객체 모델은 IE 8버전 이하에서는 문서 호환성이 떨어지게 때문에 사용하기 힘들다는 단점이 있다. 이러한 점을 극복하기 위해 나온 언어가 바로 '제이쿼리'이다. 

---

 

1. 내장객체 생성하기

 

객체를 생성할때에는 new라는 키워드와 함께 생성 함수를 사용한다. (퍼블리셔보다는 프론트앤드가 사용한다.)

내 로컬, 작업파일 내에서 생성해서 쓰는 것

 [ 기본형 ]
  var 참조변수 = new Object();
  : 인스턴스 이름의 새로운 객체를 생성한다. / 참조변수 = 인스턴스 라고도 한다. 

    객체를 참조해서 '참조변수'라 부르지 변수랑 똑같다. 

 

 //tv라는 이름의 새로운 객체를 생성

      var tv = new Object();

      tv.color = "white"; //tv객체에 color이라는 속성(프로퍼티)과 값을 추가

      tv.price = 300000; //tv객체에 price 속성(프로퍼티)과 값을 추가

 

      //tv객체에 info라는 기능(매서드) 추가.

      // tv 기능: 화면에 색상과 가격을 출력함.  this 키워드는 생성한 객체(tv)를 가리킴.

      tv.info = function () {

        document.write("tv 색상:" + this.color, "<br>");

        document.write("tv 가격:" + this.price, "<br>");

      };

      document.write("<h1>tv객체 메서드 호출</h1>");

      tv.info(); // 객체의 함수(메서드)를 실행해라

 

---

2. 날짜객체(Date) ★

내장객체 > 날짜객체

 

날짜나 시간 관련 정보를 제공받고 싶을 때 날짜 객체(Date)를 생성한다. 

날짜 정보 객체는 날짜와 관련된 작업을 할 때 유용한 객체이다. 

날짜 정보 객체를 이용하면 블로그 게시글의 날짜, 시간 또는 댓글이 언제 달렸고, 몇 분전에 생성되었는지 나타내거나

D-day 계산기 같은 것을 만들 수 있다. 

[ 기본형 ]
 1.  현재 오늘 날짜에 대한 정보를 얻을 때 

var 참조변수 = new Date( );
객체를 참조해서 '참조변수'라 부르지 변수랑 똑같다. 

 2.    특정 날짜에 대한 정보를 얻을 때 

var 참조변수 = new Date("연도/월/일") -> 문자열일때 
var 참조변수 = new Date(연도,월-1,일) -> 숫자일때 

만약 날짜 계산을 해야 한다면 숫자 형식의 객체 문법을 사용하고,

자바스크립트에서 숫자는 0월부터 시작하여 11월까지 있다. -1된 값이 월로 출력되어 나온다. 

ex) 5월을 쓰고 싶으면 4로 써야한다. 0부터 시작하니깐 실제론 5월이다. 

---

        
< 날짜 관련 메서드 >

 

날짜 관련 메서드는 날짜의 정보를 가져오는 GET메서드와 날짜 정보를 수정하는 SET메서드로 나눠진다. 

 

 [ GET ] - 날짜 정보를 가져옴 
        1. getFullyear(): 연도 정보를 가져옴. ☆
        2. getMonth(): 월 정보를 가져옴. ☆ (월에서 -1된 값으로 출력된다)

        3. getDate(): 일 정보를 가져옴. ☆
        4. getDay(): 요일 정보를 가져옴. (일요일: 0 ~ 토요일 : 6으로 숫자로 표현된다.)
        5. getHours(): 몇시 정보를 가져옴 ☆
        6. getMinutes(): 분 정보를 가져옴 ☆
        7. getSeconds(): 초 정보를 가져옴
        8. getMilliSeconds(): 밀리초 정보를 가져옴 (1/1000초) (1000이 1초다) ☆

            ( →얘를 써야 정확해서 Seconds보다 이걸 많이 쓴다. )
        9. getTime(): 1971년 1월 1일부터 경과된 시간을 밀리초로 표기함. △
        10. toGMTString(): GMT표준 표기 방식으로 문자형 데이터로 시간을 반환함.  

[ SET ] - 날짜 정보를 수정
        1. setFullyear(): 연도 정보를 수정함. 
        2. setMonth(): 월 정보를 수정함. 
        3. setDate(): 일 정보를 수정함. 
        4. setHours(): 몇시 정보를 수정함 
        5. setMinutes(): 분 정보를 수정함 
        6. setSeconds(): 초 정보를 수정함
        7. setMilliSeconds(): 밀리초 정보를 수정함 (1/1000초) (1000이 1초다) 
        8. setTime(): 1971년 1월 1일부터 경과된 시간을 밀리초로 수정함. 
        9. toLocaleString(): 운영 시스템 표기 방식으로 문자형 데이터로 반환함. 
 * set매서드에서 요일을 바꾸고 싶으면  setDate 일 정보를 수정하면 바뀌니깐 요일 수정은 없다.

 //현재 날짜 정보 객체 생성
      var today = new Date();
      var nowYear = today.getFullYear(); //현재 연도 가져와서 nowYear에 할당
      var nowMonth = today.getMonth(); //현재 월 가져와서 nowMonth에 할당하기
      var nowDate = today.getDate(); //현재 일을 가져와서 nowDate에 할당하기
      var nowDay = today.getDay(); //현재 요일을 가져와서 nowDay에 할당하기

      document.write("오늘 날짜 정보:" + today, "<br>");

      document.write("<h2>오늘 월/일/요일</h2>");
      document.write("현재 월 :" + (nowMonth + 1), "<br>");
      document.write("현재 일 :" + nowDate, "<br>");
      document.write("현재 요일 :" + nowDay, "<br>");

      document.write(nowYear + "-" + (nowMonth + 1) + "-" + nowDate);

 

* new Date는 아래 사진과 같은 통째로의 값이다.

newDate의 모습

그래서 년, 월, 일등 원하는 값을 따로 쓰기 위해서는, 각각 잘라서 각각의 변수에 넣어주며 분리시켜줘야한다. 

var 변수명에 담고 today. 짤라서 넣어준다음 아래에 변수명으로 원하는 부분들을 출력해줘야함 

 

  var nowMonth = today.getMonth(); 

 var nowDate = today.getDate(); 

var nowMonth = today.getMonth();

이렇게 각각 분리되어 있는 것. 

 

 document.write(nowYear + "-" + (nowMonth + 1) + "-" + nowDate);

이렇게 변수명으로 합치면 아래처럼 출력된다. 

---

예제) 

 

 //현재 날짜 정보 객체 생성

      var today = new Date();

      var nowMonth = today.getMonth(); //현재 월 가져와서 nowMonth에 할당하기

      var nowDate = today.getDate(); //현재 일을 가져와서 nowDate에 할당하기

      var nowDay = today.getDay(); //현재 요일을 가져와서 nowDay에 할당하기

      document.write(today);

 

새로고침하면 시간이 바뀌는 것을 볼 수 있다.

today가 new Date고 오늘 날짜여서 today를 document.write 했을 때 통으로 나온다.  

---

예제)  월 -1

마지막 월:1 오타 -> 현재 요일:1 이다 ->1은 월요일

월은 -1 되어 7월인데 6으로 나오는 것을 볼 수 있다. 그래서 코드를

 document.write("오늘 날짜 정보:" + today, "<br>");

      document.write("<h2>오늘 월/일/요일</h2>");

      document.write("현재 월 :" + nowMonth, "<br>");

      document.write("현재 일 :" + nowDate, "<br>");

      document.write("현재 요일 :" + nowDay, "<br>");

 

 document.write("현재 월 :" + (nowMonth + 1), "<br>");

로 +1 해줘야한다. 그리고 ( ) 쳐서 먼저 계산하도록 해줘야한다. 

혹은 변수값에

var theMonth = worldcup.getMonth() + 1;

이렇게 써주면 된다. 

마지막 월:1 오타 -> 현재 요일:1 이다 ->1은 월요일

---

예제) 2002년 월드컵 무슨 요일? 

//2002년 월드컵은 무슨 요일? 2002년 5월 31일

      var worldcup = new Date(2002, 4, 31); //숫자가 0부터 시작하기에 실제로는 5월이다. 월은 -1

      var theMonth = worldcup.getMonth() + 1;

      var theDate = worldcup.getDate();

      var theDay = worldcup.getDay();

      document.write("<h2>2002년 월드컵은 무슨 요일?</h2>");

      document.write("월드컵 개막 월 :" + theMonth, "<br>");

      document.write("월드컵 개막  일 :" + theDate, "<br>");

      document.write("월드컵 개막  요일 :" + theDay, "<br>");

---

예제) 연말까지 d-day 계산기 

 //12월 31일까지 d-day 계산기

      /*d-day 계산 공식 : 남은 일 수(밀리초) = 특정 날짜 객체 - 현재 날짜 객체

        밀리초로 시간을 날짜로 환산하기 msc = 밀리초

        -------------------------------------------------------

        1초 = 1000(msc)

        1분(60초) = 1000 * 60

        1시간(60분) =  1000 * 60 * 60

        1일(1시간 * 24시간) =  1000 * 60 * 60 * 24

      */

      var today2 = new Date(); //현재 날짜

      var nowYear2 = today2.getFullYear(); //올해 연도만 잘라놓은 것

      var theDate2 = new Date(nowYear2, 11, 31); //12월 31일이다 월은 -1로 나오니깐. 올해 연말 날짜.

      var diffDay = theDate2.getTime() - today2.getTime(); //올해 연말날짜 - 올해 연도 = diffDay

      //   document.write(diffDay);

      var result = Math.ceil(diffDay / (1000 * 60 * 60 * 24)); //ceil 소숫점 올림

 

      document.write("<h2>오늘부터 연말까지" + result + "일 남았습니다.</h2>");

---

예제)   요일 숫자로 나오는 거 문자 요일로 바꾸기

 var today = new Date();

      var nowYear = today.getFullYear(); //현재 연도 가져와서 nowYear에 할당

      var nowMonth = today.getMonth(); //현재 월 가져와서 nowMonth에 할당하기

      var nowDate = today.getDate(); //현재 일을 가져와서 nowDate에 할당하기

      var nowDay = today.getDay(); //현재 요일을 가져와서 nowDay에 할당하기

      var day;

      switch (nowDay) {

        case 0:

          day = "일요일";

          break;

        case 1:

          day = "월요일";

          break;

        case 2:

          day = "화요일";

          break;

        case 3:

          day = "수요일";

          break;

        case 4:

          day = "목요일";

          break;

        case 5:

          day = "금요일";

          break;

        case 6:

          day = "토요일";

          break;

        default:

          "일치하는 요일이 없습니다";

      }

      document.write("<h2>오늘 월/일/요일</h2>");

      document.write("현재 월 :" + (nowMonth + 1), "<br>");

      document.write("현재 일 :" + nowDate, "<br>");

      document.write("현재 요일 :" + day, "<br>");

      document.write(nowYear + "-" + (nowMonth + 1) + "-" + nowDate);

스위치문을 이용해서 숫자를 요일로 변환

새로운 day라는 변수를 생성해서 요일이 숫자로 나오는 nowDay변수를 스위치문에 넣어준다.

브라우저에는 변수 day를 출력