[5일차] Do it! 자바스크립트 입문 / 06 여러 자료를 한꺼번에 담는 객체

전구 모양(💡) 이모티콘은 공부하면서 깨달은 부분을 적어두었습니다.

---

< 06-1 객체란? >

- 객체(Object) : '복합' 자료형

  => 객체 안에 숫자, 문자열 등 여러가지 자료형이 포함되기 때문

  => 자바스크립트에서 객체는 자료를 저장하고 처리하는 기본 단위

  => 하나의 변수에 다양한 정보를 담기 위해 사용하는 자료형

       예) 책(객체) - 제목, 이 책의 분야, 저자, 쪽수, 가격 출간일 등의 정보들이 들어있음

// 책(book) 객체의 예시
var book = {
    title: "된다! 김OO의 유튜브 영상 만들기",	// 제목
    author: "김OO",				// 저자
    pages: 368,					// 쪽수
    price: 16000				// 가격
}

 

 

- 프로그래밍 언어에서 객체(Object)는 여러 가지 의미로 해석 가능

- '자바스크립트 프로그램에서 인식할 수 있는 모든 대상을 가리킨다'

  => 웹 사이트나 웹 애플리케이션을 프로그래밍하는 언어이기 때문!

 

- 자바스크립트에서 사용하는 여러 종류의 객체

  ① 내장 객체(Built-in Object)

      : 자바스크립트 프로그래밍을 할 때 자주 사용하는 요소는 미리 객체로 정의되어 있음

        예) Date, Number, Boolean, Array, Math 등

  ② 문서 객체 모델(DOM)

      : 객체를 사용해 웹 문서를 관리하는 방식

      : 웹 문서 안에 포함된 이미지, 링크, 텍스트 필드 등도 모두 각 별도의 객체로 미리 존재함

        예) Document, Image 등

  ③ 브라우저 객체 모델

      : 웹 브라우저의 주소 표시줄이나 창 크기 등 웹 브라우저 정보를 객체로 다루는 것

        예) Navigator : 사용 중인 브라우저 종류나 버전을 담은 객체

             History : 브라우저에서 방문한 기록을 남기는 객체

             Location : 주소 표시줄 정보를 담고 있는 객체

             Screen : 화면 크기 정보가 들어있는 객체

  ④ 사용자 정의 객체

      : 사용자가 필요할 때마다 자신의 객체를 정의해서 사용하는 객체

        예) 앞에서 보여줬던 book 객체

 

 

- 속성(Property) : 객체에서 값을 담고 있는 정보

  * 내장 객체에도 만들어져 있음

  * 객체의 속성 값을 가져올 때는 객체 이름 뒤에 마침표(.)를 찍고 그 뒤에 속성명을 적음

속성 예제

 

- 메서드(Method), 함수 : 객체가 어떻게 동작할지 선언해 놓은 함수

                                 객체 안에 정의된 함수

- 메서드 또는 함수를 표기할 때는 항상 괄호()와 함께 사용해야 함!!

  💡 ()를 메서도 또는 함수라고 읽는 습관을 들이면 좋음

      예) prompt() -> 프롬프트 함수(또는 메서드)

  

Window 메서드 : 첫 글자가 대문자로 시작하면 '객체'를 의미

 

화살표를 눌러보면 Window 객체 안에 들어있는 요소가 모두 표시

 

f는 함수를 의미

- Window 객체에 alert() 함수가 미리 만들어져 있음

  즉, alert()은 Window 객체의 메서드

 

- 객체의 메서드를 사용할 때도 마침표(.)를 사용

  예) window.alert("안녕하세요")

 

 

 

 

 

- 웹 문서에 있는 요소를 프로그램에서 사용하려면 객체 형태여야 함

  예) 웹 문서에 있는 이미지를 자바스크립트에서 다룰 때는 Image 객체를 사용

- 프로토타입(Prototype) : 객체를 다루기 위한 기본틀

  예) Image 객체는 모든 웹 이미지가 공통으로 가지는 속성과 기능을 모아놓은 것

- 인스턴스(Instance), 개별 객체 : 프로토타입을 사용해 만들어낸 객체

  예) 웹 문서에 3개의 이미지를 포함시켜야 한다면

       Image 객체를 사용해서 똑같은 모양의 객체 3개를 찍어낸 다음

       객체마다 원하는 이미지를 담는 것

 

- 객체의 인스턴스 만들기

  * 객체를 똑같이 찍어 새 객체를 만들 때는 new 예약어 사용

  * new 예약어 뒤에 프로토타입 객체 이름과 괄호()를 써주면 됨

// 인스턴스 예제
//  ┌ 2) now 변수에 저장
var now = new Date()
//         └ 1) Date 객체의 인스턴스를 만들고



// 실행 화면
now
Fri Dec 10 2021 14:58:21 GMT+0900 (한국 표준시) // now를 쳤을 때의 현재 시간​

  * now는 Date 객체의 인스턴스

    => Date 객체에서 정의한 속성과 함수를 모두 사용할 수 있음

 

- 모든 객체의 속성과 함수 정보 : [링크] 클릭 > 왼쪽 Built-in objects 항목 아래 > 여러 내장 객체가 나열되어 있음

  💡 링크 접속 후 검색(Ctrl+F)을 통해 원하는 객체를 찾아도 됨

 

 

 

 

 

< 06-2 사용자 정의 객체 만들기 >

- 사용자 정의 객체 : 사용자가 직접 만든 개체

 

- 객체를 만드는 몇 가지 방법

  ① 리터럴(Literal) 표기법을 사용해 객체를 만드는 방법

        - 리터럴(Literal) : 자료를 표기하는 방식

           * 프로그래밍 언어 전체에서 사용하는 용어

// 리터럴 표기법 예제
var a = 10;

 

        - 객체 리터럴 표기법 : 객체를 선언하면서 동시에 값을 지정해주는 것

          * 정해진 값을 가진 객체를 한 번만 만들어냄

            => 객체 틀을 만들지 않고 개별적으로 객체를 선언하고 사용하는 방법

          * 중괄호{} 안에 '속성 이름: 값'을 하나의 쌍으로 지정

          * 속성이 많다면 '속성명: 값'마다 쉼표(,)를 넣어 구분

          * 함수 또한 '함수명: function() { ... }'로 정의

             => 객체를 정의해 변수에 할당할 때는 닫는 중괄호{} 다음에 세미콜론(;)을 붙여줌

 

객체 리터럴 표기법 예제

실행 결과

 

 

- 새로운 속성 추가 방법

// 리터럴 객체 속성 추가 예제
book.field = "IT"

// 실행결과
"IT"

콘솔에 객체명을 입력하면 정보를 볼 수 있다

 

 

[ 리터럴 표기법으로 장난감 정보 객체 만들기 ]

- 각 객체를 따로 정의하는 것이 편할 때 '리터럴 표기법'을 사용

- 본문 내용 + 1분 복습 문제 풀이

var toyRobot = {    // toyRobot 객체를 선언한 후 속성과 함수 정의
    productId: "123-12",
    name: "Robot",
    price: "25,000",
    madeIn: "Korea",
    quantity: 10,
    showStock: function () { // showStock() 함수 정의
        document.querySelector('#display').innerHTML = this.name + " 제품은 "
         + this.quantity + "개 남아있습니다.";
    },
    showPrice: function () { // 1분 복습 문제
        alert(this.name + "제품의 가격은 " + this.price + "원 입니다.");
    }
};

toyRobot.showStock();   // toyRobot 객체의 showStock() 함수 실행
toyRobot.showPrice();   // 1분 복습 답

 

실행 결과

 

 

 

  ② 생성자 함수를 사용해 객체를 만드는 방법

        - 생성자 함수 : 객체를 만들어 내는 함수

           * function 예약어 사용

           * 생성자 함수 안에 객체의 속성과 함수를 정의할 때는 this 예약어 다음에 마침표와 속성명 입력

              => this가 가르키는 것은 선언하고 있는 객체 자체

           * 객체의 속성은 객체에서 사용하는 변수

             객체의 함수는 해당 객체에서 사용하는 함수 

 

콘솔에서 진행한 생성자 함수 만들기 예제

 

 

[ 생성자 함수로 장난감 정보 객체 만들기 ]

- 객체 생성자(Constructor)

  예) function Book() { ... }

  * 객체명은 첫 글자를 대문자로 시작하는 것이 일반적

 

- 1단계 : Book 객체 정의하기

- 2단계 : 인스턴스 생성하기

Book.js 파일 소스

실행 화면

- 3단계 : 여러 인스턴스를 배열에 담아 활용하기

소스                                                                                        실행 파일

 

 

 

 

 

< 06-3 Date 객체를 활용해 기념일 계산기 만들기 >

- 자바스크립트에는 미리 정의해 놓은 날짜와 시간 표시 형식이 존재

형식	의미
YYYY	년도
MM	월
DD	일
HH	시
MM	분
SS	초

 

 

- get : '가져온다'

- set : '두다, 설정하다'

- Date 객체의 함수 설정 시 주의할 점

  : getMonth(), getDay() 함수를 사용했을 때 결괏값이 0부터 시작

   => 각 함수 + 1을 더해야 실제 '월'에 해당하는 숫자를 얻을 수 있음

 * getDay() 호출 시 0은 일요일 -> 6 토요일을 의미

 

 

 

- 현재 날짜와 시간 정보 가져오기

- getTime() : 밀리초(Milli Seconds)로 출력

 

 

[ 실습 - 기념일 계산 프로그램 만들기 ]

- 1단계 : 며칠 만났는지 알아보기

  * 프로그램을 구성할 때 순서도를 그려보기

var now = new Date();                   // 오늘 날짜 정보를 Date 객체의 인스턴스 now 객체로 만듦
var firstDay = new Date("2018-03-23");  // 처음 만난 날의 날짜 정보를 firstDay 객체로 만듦

// var toNow = now.getTime();          // 오늘 날짜를 밀리초로 바꿈
// var toFirst = firstDay.getTime();   // 처음 만난 날을 밀리초로 바꿈
// var passedTime = toNow - toFirst;   // 처음 만난 날과 오늘 사이의 차이 (밀리초 값)

var passedTime = now.getTime() - firstDay.getTime();    // 3~5행 한줄로 표현

// 밀리초를 날짜 수로 변환한 후 반올림
var passedDay = Math.round(passedTime / (1000 * 60 * 60 * 24));

// #accent 영역에 표시
document.querySelector('#accent').innerHTML = passedDay + "일";

 

 

- 2단계 : 100일 후 날짜 계산하기

  * 처음 만난 후 100일 되는 날 = 처음 만난 날을 밀리초로 바꾼 값 + 100일을 밀리초로 바꾼 값

 

// 100일 계산 후 출력
var future = firstDay.getTime() + 100 * (1000 * 60 * 60 * 24);    // 처음 만난 날에 +100일
var someday = new Date(future);     // future 값을 사용해 Date 객체의 인스턴스 만들기

var year = someday.getFullYear();   // '연도'를 가져와 year 변수에 저장
var month = someday.getMonth() + 1;     // '월'을 가져와 month 변수에 저장
var day = someday.getDate();       // '일'을 가져와 date 변수에 저장

document.querySelector('#date100').innerHTML = year + "년 " + month + "월 " + day + "일";

100일 계산 후 출력

 

 

 

// 200일 계산 후 출력
future = toFirst + 200 * (1000 * 60 * 60 * 24);
someday = new Date(future);
year = someday.getFullYear();
month = someday.getMonth() + 1;
day = someday.getDate();
document.querySelector('#date200').innerHTML = year + "년 " + month + "월 " + day + "일";

200일 계산 후 출력

 

 

- 3단계 : calcDate() 함수 선언하기

  * 같은 명령을 여러 번 반복하지 않고 함수로 만들어 처리

  * 함수는 선언 후 꼭 호출해야만 실행됨!!

calcDate(100);  // 100일 기념일을 계산해서 표시
calcDate(200);  // 200일 기념일을 계산해서 표시
calcDate(365);  // 1년 기념일을 계산해서 표시
calcDate(500);  // 500일 기념일을 계산해서 표시

// n일 계산 후 출력
function calcDate(days) {
    var future = firstDay.getTime() + days * (1000 * 60 * 60 * 24);    // 처음 만난 날에 +100일
    var someday = new Date(future);     // future 값을 사용해 Date 객체의 인스턴스 만들기

    var year = someday.getFullYear();   // '연도'를 가져와 year 변수에 저장
    var month = someday.getMonth() + 1;     // '월'을 가져와 month 변수에 저장
    var day = someday.getDate();       // '일'을 가져와 date 변수에 저장

    document.querySelector('#date' + days).innerHTML = year + "년 " + month + "월 " + day + "일";
}

실행 결과