[5일차] Do it! 자바스크립트 기본편 - 객체

---

* WARNING ! 책 및 인터넷을 통해 공부한 내용으로 정확한 정보가 아닐 수 있으니 주의해주세요! *

---

공부범위

- 5장

공부내용

객체

 

1. 객체

 

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

- ex) 회원 정보 (한 회원의 정보에 아이디, 비밀번호, 생일 등 여러 정보가 있으니까)

- 객체는 첫 문자로 대문자를 사용 (Book, Member 등)

---

2. 객체의 종류

 

   (1) 내장 객체

   : 자바스크립트 안에 미리 정의된 객체

   ex) Date, Number, Boolean 등

 

   (2) 문서 객체 모델 (DOM)

   : 웹문서를 관리하는 객체

   ex) Document, Image 등

   - 8장에서 자세히 설명 (링크 삽입하기)

 

   (3) 브라우저 객체 모델 (BOM)

   : 브라우저를 다루는 객체

   ex) Navigator, Screen, History, Location 등

 

   (4) 사용자 정의 객체

   : 내장객체가 아닌 사용자가 직접 정의하는 객체

---

3. 속성, 메서드

 

   (1) 속성 (Property)

   : 객체에서 값을 담고 있는 정보

   

   - 객체에서 속성 값을 가져오는 방법

   : 객체이름.속성이름

// console 창에서 2를 입력했을 때
Navigator.vendor
"Google Inc."  // 크롬은 구글꺼니까 구글이 뜸

 

   (2) 메서드

   : 객체가 어떻게 동작할 지 선언해놓은 함수

   = 객체 안에 정의된 함수

여기서 f는 함수로 alert, atob, blur 등이 메서드

   - 메서드 값을 가져오는 방법

   : 객체이름.메서드이름( )

Window.alert('안녕안뇽')

---

4. 프로토타입, 인스턴스

 

   (1) 프로토타입

   : 부모객체 / 기본 틀이 되는 객체

 

   (2) 인스턴스

   : 자식객체 / 프로토타입을 사용해 만들어낸 객체

   ex) Image 객체를 똑같이 찍어서 3개를 만들고 싶을 때 원래의 Image객체(프로토타입), 복사한 3개의 객체(인스턴스)

 

   - 인스턴스 만드는 법

   : 변수이름 = new 기존객체이름( )

var now = new Date( )    // 인스턴스 생성
now    // 변수를 입력해서 사용

---

5. Math 객체 함수

 

함수	설명
abs(x)	숫자의 절댓값을 반환
cbrt(x)	숫자의 세제곱근을 반환
ceil(x)	인수보다 크거나 같은 수 중에서 가장 작은 정수를 반환 (숫자의 소수점 이하를 올림)
floor(x)	인수보다 작거나 같은 수 중에서 가장 큰 정수를 반환 (숫자의 소수점 이하를 버림)
random( )	0과 1사이의 무작위 수(난수)를 반환
round(x)	숫자에서 가장 가까운 정수를 반환 (숫자의 소수점 이하를 반올림)

- Math.random( )

Math.random() * 4  // 여기서 4는 경우의 수

 

 

▶ Math 함수 더 알아보기

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math

---

6. 사용자 정의 객체 만들기

 

   (1) 방법1: 리터럴 표기법

   : 객체를 선언하면서 동시에 값을 지정

 

   - 형태

var book = {
    title: "자바스크립트",
    author: "Kimgoing",
    pages: 500,
    price: 15000,
    info: function() {
    	alert(this.title + "책의 가격은 " + this.price + "입니다.");
    }
}

book.title // 객체 속성 가져오기

 

- 객체 이름: book

- 중괄호{ }를 통해 속성 나열

- 속성이 여러 개 일 때는 쉼표( , ) 사용

 

- 새로운 속성 추가 방법

book.field = "IT"

/*
객체이름.속성이름 = "속성 값"
*/

 

   (2) 방법2: 생성자 함수

   - 방법1은 새로운 객체를 만들 때 마다 객체를 계속 생성해야하는 번거로움이 있음

   - 생성자 함수: 필요한 속성, 함수를 틀처럼 생성 → 인스턴스를 만들기

 

// 객체 생성
function Book(author, pages, price, title) {
	this.author = author;
    this.pages = pages;
    this.price = price;
    this.title = title;
}

// 인스턴스 생성
jsBook = new Book("홍길동", 500, 15000, "자바스크립트")

---

7. Date 객체

 

   (1) 날짜/시간 정보를 가져오는 함수

함수 이름	설명
getFullYear( )	날짜 정보에서 연도(Year) 정보를 가져와 네 자리 숫자로 표시
getMonth( )	날짜 정보에서 '월(Month)' 정보를 가져옴 0 ~11의 숫자로 월 표시  /  0 = 1월, 11 = 12월
getDate( )	날짜 정보에서 며칠인지 알 수 있는 '일(Date)' 정보를 가져옴
getDay( )	날짜 정보에서 '요일(Day)' 정보를 가져옴 0~6의 숫자로 요일 표시  /  0 = 일요일, 6 = 토요일
getTime( )	1970년 1월 1일 자정 이후의 시간을 밀리초로 표시 밀리초: 1/1000초
getHours( )	0~23의 숫자로 시 표시
getMinutes( )	0~59의 숫자로 분 표시
getSeconds( )	0~59의 숫자로 초 표시
getMilliseconds( )	0~999의 숫자로 밀리초 표시

 

   (2) 날짜/시간 정보를 설정하는 함수

함수 이름	설명
setFullYear( )	연도를 네 자리 숫자로 설정
setMonth( )	0~31의 숫자로 월을 설정
setDate( )	1~31의 숫자로 일을 설정
setTime( )	1970년 1월 1일 자정 이후의 시간을 밀리초로 설정
setHours( )	0~23의 숫자로 시 설정
setMinutes( )	0~59의 숫자로 분 설정
setSeconds( )	0~59의 숫자로 초 설정
setMilliseconds( )	0~999의 숫자로 밀리초 설정