객체를 왜 사용할까?
: js을 사용해, 웹 사이트나 애플리케이션의 자료를 다루려면 하나의 변수에 여러 정보를 저장할 수 있는 객체가 꼭 필요하다. (ex)회원제 사이트에서, 회원 정보를 저장할 때는 회원이름,id,비밀번호,가입 날짜,생년월일 등 여러 정보가 하나의 회원 정보에 저장된다)
1. 자바스크립트에서 객체의 종류
1. 내장 객체
: 자바스크립트 프로그래밍을 할 때 자주 사용하는 요소는 자바스크립트 안에 미리 객체로 정의되어 있다.
이러한 객체를 '내장 객체(Built-in-Object)라고 한다.
ex) 날짜나 시간과 관련된 프로그램 작성 -> Date 객체를 사용해, 현재 시각을 알아내고 그 정보를 손쉽게 사용할 수 있다.
ex) Date,Number,Boolean,Array,Math 등
2.문서 객체 모델(DOM)
: 객체를 사용해 웹 문서를 관리하는 방식을 '문서 객체 모델(DOM)'이라고 한다.
DOM에서는, 웹 문서뿐만 아니라, 웹 문서 안에 포함된 이미지/링크/텍스트/필드 등도 모두 각각 별도의 객체로 미리 만들어 놓았다.
- 웹 문서 자체를 담는 Doucument객체
- 웹 문서 안의 이미지를 관리하는 Image객체 등이 해당.
3.브라우저 객체 모델(BOM)
: 웹 브라우저의 주소표시줄이나 창 크기 등, 웹 브라우저 정보를 개체로 다루는 것을 '브라우저 객체 모델(BOM)'이라고 한다.
- 사용중인 브라우저 종류나 버전을 담고 있는 Navigator객체
- 브라우저에 방문한 기록을 남기는 History객체
- 주소 표시줄 정보를 담고 있는 Location객체
- 화면 크기 정보가 들어있는 Screen객체 등이 해당
-> 이 객체들을 사용하면, 알림창을 표시할 수 있고, 사용자 동작에 따라 원하는 사이트로 이동하도록 지정 가능.
-> DOM과 BOM모두, 내장 객체에 포함된다.
4.사용자 정의 객체
: 사용자가 자신의 필요에 따라 정의한 객체
2. 객체의 속성과 매서드 알아보기
- 객체의 속성(Property): 객체에서 값을 담고 있는 정보
- 객체의 매서드(Method): 객체가 어떻게 동작할지를 선언해 놓은 함수
- 속성과 메서드 모두,, 객체 이름 다음에 마침표(.)를 사용해서 지정한다.
3. 객체의 프로토타입과 인스턴스 소개
- 웹 문서에 있는 이미지를 js에서 다룰 때는, Image객체를 사용한다. Image객체는, 웹 이미지를 만들기 위한 기본 틀이 되는 것. 이러한 기본 틀이 되는 것 = '프로토타입(Prototype)'이라고 함.
- 프로토타입을 사용해 만들어낸 각각의 개별 객체들 = '인스턴스(Instance)
객체의 인스턴스 만들기
객체의 인스턴스를 만들 때, new예약어를 사용한다.
new예약어 + 프로토타입 객체 이름 + 괄호()
ex)
var now = new Date() //Date객체의 인스턴스를 만들고, now변수에 저장
위 소스를 콘솔창에 입력한 뒤, now 변숫값을 콘솔 창에 표시하면, 결과 값으로 소스를 입력한 현재 날짜와 시간이 표시된다.
-> now는 Date객체의 인스턴스이므로, Date객체에서 정의한 속성과 함수를 모두 사용할 수 있다.
-> Date객체에는, 현재 날짜와 시간 정보를 로컬 형식(현재 지역에 맞는 형식)으로 바꾸어주는 toLocaleString()함수가 있다
now.toLocaleString() 는, 로컬형식으로 바뀐 날짜와 시간 정보를 알려준다.
4. 사용자 정의 객체 만들기
4-1) 리터럴 표기법을 사용해 객체를 만드는 방법
: 변수를 선언하면서 동시에 값을 지정해 주는 표기 방식
-방식
var book{ //객체 book
title:"자바스크립트",
author:"고쌤", //속성 이름: author , 속성 값: 고쌤
pages:500,
price:15000,
info:function(){ //함수 이름: info
alert(this.title + "책의 분량은" + this.pages + "쪽입니다."); //함수 내용
}
};
//속성이 여러 개일 경우,'속성 이름:값' 쌍마다 쉼표(,)를 넣어 구분
book.title //"자바스크립트"출력
book.field ='IT' // 객체에 새로운 속성을 추가하고 싶을 때, field사용
4-2) 생성자 함수를 사용해 객체를 만드는 방법
항상 필요한 속성과 함수는 틀처럼 미리 만들어 놓고, 필요할 때마다 그 틀을 복제한 인스턴스를 만들어 정보를 담는 것이 편리하다. (리터럴 표기를 사용한 방법은, 객체의 틀을 만들지 않고, 개별적으로 객체를 선언하고 사용하는 방법이었다)
생성자 함수 : 객체를 만들어내는 함수
- function예약어 사용해 선언
- 생성자 함수 안에 객체의 속성과 함수를 정의할 때는 -> this예약어 다음에 마침표와 속성 이름을 입력한다.
this가 가리키는 것? : 선언하고 있는 객체 자체
function Book(author,pages,price,title){
this.author = author;
this.pages = pages;
this.price = price;
this.title = title;
} // Book 객체 만들기
jsBook = new Book("홍길동",500,15000,"자바스크립트") // 인스턴스 만들기
jsBook.title //jsBook객체에서 속성 값 확인하기 //"자바스크립트"출력
