스스로 공부하기/Javascript

[Javascript] 6장. 여러 자료를 한꺼번에 담는 객체

Seohyeong Lee 2022. 11. 11. 19:05

06-1. 객체란?

객체 (object) 란, 자바스크립트 자료형의 일종으로, 여러 변수와 함수 등 여러 가지 자료형을 묶은 하나의 자료형 ("복합 자료형")

자바스크립트는 객체 기반 언어이므로, 객체는 자바스크립트에서 자료를 처리하고 저장하는 기본 단위가 된다. 

 

 

객체 간단히 살펴보기

var book = {
	title : "자바스크립트", // 자료형 : string
    author : "홍길동",
    pages : 500,
    price : 1500,
    ....
}; // :와 ,으로 객체의 변수를 구분한다.

이렇게 한 개의 변수 안에 여러 가지 변수와 함수를 묶어서 저장한다. 선언방식에는 두가지가 있다. (06-2에서 다룸)

ex) 회원가입 -> 회원의 정보를 "회원" 객체에 여러가지 정보를 묶어 저장하는 방식으로 구현

 

 

자바스크립트에서 객체의 종류

크게 내장 객체 (문서 객체 모델, 브라우저 객체 모델 포함), 사용자 정의 객체로 나눌 수 있다.

 

1. 내장 객체: 자바스크립트 안에 미리 내장되어 있는 객체. EX) Date, Boolean, Number...

2. DOM (문서 객체 모델) : 웹 문서를 객체로 관리하는 방식 (8장에서 자세히 다룬다.) EX) Document, Image..

3. 브라우저 객체 모델: 해당 브라우저 페이지에 대한 정보가 담겨 있는 객체. 브라우저와 관련된 정보가 담겨 있다. (10장에서 자세히 다룬다.)

*내장객체는 모두 첫 문자가 대문자이다. 

Navigator 브라우저의 종류, 버전 등에 대한 내용이 저장됨. 
History 방문 기록이 저장됨.
Location 주소 표시줄에 대한 내용이 저장됨.
Screen 화면 크기 정보에 대한 내용이 저장됨.

4. 사용자 정의 객체: 앞서 언급한 내장 객체를 제외하고도 객체가 필요할 경우 사용자가 직접 정의하여 사용한다.

 

 

객체의 속성과 메소드

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

>Navigator.Vendor
<"Google Inc."

 

메소드(Method): 객체 안에서 객체가 어떻게 작동할지를 정의하고 있는 함수. (=객체 안에 속성으로 존재하는 함수)

window
^Window {postMessage: f, alert: f, atob: f, ...}
	>alert: ƒ alert()
	>atob: ƒ atob()
	>blur: ƒ blur()
	>btoa: ƒ btoa()
	>cancelAnimationFrame: ƒ cancelAnimationFrame()
	>cancelIdleCallback: ƒ cancelIdleCallback()

이렇듯 객체를 호출했을 때 f가 붙어서 표시된다. 일종의 함수

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

*window 객체의 함수는 window를 호출하지 않고 메소드만 호출하여 사용할 수 있다. 

 

 

객체의 프로토타입과 인스턴스

프로토타입(prototype) : 웹 문서의 요소를 자바에서 다룰 때 이용하기 위한 일종의 틀. ex) 웹 문서의 이미지를 다룰 떄 : Image.. 인스턴스(instance) : 이러한 프로토타입을 이용해 만든 객체 = instance

아니 캠스캐너로 스캔하기는 왜 나오냐고~~!! 안궁금해!

아무튼.. 그래서 인스턴스는 이미 짜여진 틀 (prototype) 를 이용해 선언한 객체 변수이다. 인스턴스는 프로토타입의 모든 특징과 메소드, 속성을 갖는다. 

 

 

객체의 인스턴스 만들기

객체의 인스턴스를 선언할 때는 예약어 new를 사용한다. 

new + 프로토타입 객체 이름 + () 

 

ex) 날짜, 시간 정보 -> Date 프로토타입에 저장. 

> var now = new Date();
< undefined
> now
< Fri Nov 11 2022 17:27:24 GMT+0900 (한국 표준시)

 

 

내장 객체로 무작위 수 프로그램 만들기

->math 객체 ex) 삼각, 로그함수 등

 

1. 객체의 속성과 함수를 정리한 사이트 -> developer.mozilla.org/ko

2. Math 객체를 이용해 무작위로 수를 반환하는 프로그램을 만든다. 

ceil(x) 소숫점 올림 random() 난수 반환
floor(x) 소숫점 내림 cbrt(x)  세제곱근 반환
round(x) 소숫점 반올림 abs(x) 절댓값 반환

 

3. 난수반환 -> random() 메소드를 이용한다. 

> Math.random()
< 0.12035094805204816
> Math.random()
< 0.9009863810974552

0과 1 사이의 난수가 반환되는 것을 확인할 수 있다.

 

4. 1~100 사이의 난수를 반환하게 하려면?

 1) Math.random() -> 0~1 사이의 난수

 2) Math.random() * 100 -> 0~99.999... 사이의 난수

 3) Math.random() * 100 + 1 -> 1~100.999... 사이의 난수

 4) Math.floor(Math.random() * 100 + 1) -> 1~100 사이의 난수

*Math 객체는 인스턴스 생성에 쓰이지 않는다. 

 

 

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

1. 리터럴 표기법 이용해 객체 만들기

 *리터럴 표기법 : 프로그래밍에서 자료를 표기하는 방식. 자바스크립트를 제외한 다른 언어에서도 사용된다. 변수의 선언과 동시에 값을 지정해주는 방식을 말한다. 

var a = 10;

이처럼 객체 또한 선언과 동시에 값을 지정해주는 방식으로 선언할 수 있다.

var book = {
	title: "자바스크립트",
    author : "고쌤",
    pages : 500,
    ...
};

새로운 속성을 추가할 때는, 속성 값을 호출할 때와 마찬가지로 . (온점) 뒤에 새로 만들 속성의 이름을 쓰고 = 원하는 값을 넣어 준다. 

(객체이름).(속성이름) = (선언값)

book.field = "IT"

ex) 장난감 정보 객체 만들기

var toyRobot = {
    productId : "123-12",
    name : "Robot",
    price : "25,000",
    madeIn : "Korea",
    quantity : 1000,
    showstock : function(){
        document.querySelector('#display').innerHTML = this.name + "제품은 " + this.quantity + "개 남아있습니다."; 
    },
};

toyRobot.showstock();

 

 

2. 생성자 함수 이용해 객체 만들기

 -> 객체 속성, method를 틀로 만들어 사용. 일종의 함수이므로 function 예약어 사용

function (객체이름)((객체속성)) {

        this.(속성값) = (속성)

}

function book(title, author, volume, price){
    this.title = title;
    this.author = author;
    this.volume = volume;
    this.price = price;
}

var html = new book("javascript", "홍은채", 2, 14000);
var youtube = new book("유튜브의 모든것", "김채원", 19, 8000);
var python = new book("파이썬으로 코테준비하기", "허윤진", 7, 54000);

새로 선언할 때는 var (변수이름) = new (객체이름)((속성값));

이렇게 html, youtube, python 세 변수를 선언할 수 있다. 

 

 

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

Date 내장 객체를 활용하면 현재의 시간과, 특정 시점까지 얼마나 남았는지를 밀리초를 이용해 알 수 있다. 

 

1. Date 객체의 인스턴스 만들기

 -현재 시간: new Date();

 -특정 날짜: new Date("YYYY-MM-DD");

 -특정 날짜의 특정 시간: new Date("YYYY-MM-DDT00:00:00");

 -특정 날짜의 특정 시간 + 국제 표준시: new Date("YYYY-MM-DDT00:00:00Z"); -> 한국 표준시로 바뀌어 표시되므로 작성한 날짜에 9시간이 더해져 표시된다. 

> new Date();
< Fri Nov 11 2022 18:29:20 GMT+0900 (한국 표준시)
> new Date("2022-09-30");
< Fri Sep 30 2022 09:00:00 GMT+0900 (한국 표준시)
> new Date("2022-09-30T11:00:00");
< Fri Sep 30 2022 11:00:00 GMT+0900 (한국 표준시)
> new Date("2022-09-30T19:00:00Z");
< Sat Oct 01 2022 04:00:00 GMT+0900 (한국 표준시)

 

2. Date 객체의 주요 함수 

 get() -> 해당 숫자 반환, set() -> 해당 변수 새로 설정

getFullYear() 연도 정보를 네 자리로 표시 setFullYear() 연도를 네자리로 설정
getMonth() 달 정보를 0~11로 표시 setMonth() 0~11로 달을 설정
getDate() 날짜 정보를 표시 setDate() 날짜를 설정
getDay() 요일 정보를 0~6으로 표시    
getTime() 1970년 1월 1일 자정 이후 지난 시간을 밀리초로 반환 setTime() 1970년 1월 1일 자정 이후 시간을 밀리초로 표시
getHours() 시간 정보를 0~23으로 표시 setHours() 0~23으로 시간을 설정
getMinutes() 분 정보를 0~59로 표시 setMinutes() 0~59로 분을 설정
getSeconds() 초 정보를 0~59로 표시 setSeconds() 0~59로 초를 설정
getMilliseconds() 밀리초 정보를 0~999로 표시 setMilliseconds() 0~999로 밀리초를 설정

 

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

var now = new Date(); //그냥 Date만 선언하면 현재의 날짜로 시간이 설정됨

//50일 이후의 날짜로 설정하기
now.setDate(now.getDate()+50);

 

 

기념일 계산 프로그램 만들기 - 며칠 만났는지 알아보기

var now = new Date();
var firstDay = new Date("2021-09-30");

var firstTime = firstDay.getTime();
var nowTime = now.getTime();

var passedTime = nowTime-firstTime;

var passedDay = Math.ceil(passedTime/(1000*60*60*24));

#accent ID 부분에 passedDay를 표시해 주는 프로그램이다.

passedDay는 사귄 날짜 - 지금의 날짜의 밀리초 차이를 날짜로 변환해 표시하였다.

 

기념일 계산 프로그램 만들기 - 100일 후 날짜 계산하기

var someTime = firstTime + 100*(1000*60*60*24);
var D100 = new Date(someTime);
var year = D100.getFullYear();
var month = D100.getMonth()+1;
var date = D100.getDate()-1;
document.querySelector("#date100").innerHTML = year + "년" + month + "월" + date + "일";

someTime에 처음 만난 시간에 100일만큼의 밀리초가 지난 값을 더해준다. 

이것을 새로운 변수 D100에 저장하고, 각각 년, 월, 일을 받은 후 출력해주면 끝.

 

마찬가지 방식으로 100일, 200일, 일주년, 500일을 계산하였다.

같은 계산을 4번이나 반복하니, 이것을 함수로 만들어 연산하는 것도 가능하다. 아래와 같이 구현하였다.

function calcDate(days){
    var someTime = firstTime + days*(1000*60*60*24);
    var speciald = new Date(someTime);
    var year = speciald.getFullYear();
    var month = speciald.getMonth()+1;
    var date = speciald.getDate()-1;
document.querySelector("#date"+days).innerHTML = year + "년 " + month + "월 " + date + "일";

}
calcDate(100);
calcDate(200);
calcDate(365);
calcDate(500);

 

구현된 화면은 아래와 같다. (^^)