[웹디자인]자바스크립트/객체(Objects)

http://blog.naver.com/elegy1/60005068542

객체(Objects)란?

• 객체는 속성(properties)과 메쏘드(methods)로 이루어져 있다.
• 잘 아는 개념으로 보자면 속성은 변수(variable)로, 메쏘드는 함수(function) 정도로 생각할 수 있다.
• 흔히 속성은 명사/형용사로, 메쏘드는 동사로 표현한다.
• 예를 들어, car라는 객체가 있다고 가정한다면 객체 car는 년식, 색상, 모델명 등의 속성이 있고, 전진하다(), 후진하다(), 멈추다() 등의 메쏘드가 있다고 볼 수 있다.
• 자바스크립트에는 여러 가지 기능을 갖고 있는 내장 객체를 이미 갖고 있다.
• 이렇게 미리 존재하는 객체는 흔히 DOM(Document Object Model)으로 알려져 있다.
• 내장 객체가 아닌 자신만의 객체를 만들 수도 있다.

---

DOM(Document Object Model)이란?

• DOM - 자바스크립트에 내장 되어있는 모든 객체에 대한 계층 구조이다.
• 이 객체의 대부분은 웹 페이지 또는 브라우저의 특성과 직접 관련이 있다.
• DOM은 기술적인 관점에서 보면 자바스크립트 자체와는 분리되어 있다.
• ECMA에 의해 표준화된 자바스크립트 언어 스펙에는 DOM에 대한 특성이 기술되어 있지 않다.
• 그렇기 때문에 넷스케이프 및 마이크로소프트는 각각 DOM을 자체 개발하였고 이 각각은 서로 호환되지 않는다.

아래 차트는 넷스케이프의 DOM에 대한 개괄적인 구조도이다. 마이크로소프트의 DOM은 실제 넷스케이프의 DOM을 포괄한다고 보면 된다.

---

속성(Properties)

• 어느 한 객체의 속성을 사용하는 방식 : objectName.propertyName (가령 객체이름이 car이고 속성 이름이 color라면 car 객체의 color란 속성을 접근할 때 car.color과 같은 방식으로 접근한다.)
• 객체 이름과 속성 이름 모두 대소문자 구분이 있다.
• 속성은 기본적으로 변수이므로 값을 할당함으로써 새로운 속성을 쉽게 만들 수 있다.
• carObj란 객체가 이미 있고 그 객체의 속성으로 make, model, year 란 것을 만들고 싶을 때 다음과 같이 하면 된다:

  carObj.make="Toyota"; carObj.model="Camry"; carObj.year=1990; document.write(carObj.year);

• 자바스크립트 객체는 기본적으로 배열과 비슷하다. 그렇다면 다음과 같은 방식으로 속성을 사용할 수도 있다.

carObj["make"]="Toyota"; carObj["model"]="Camry"; document.write(carObj["year"]);

---

메쏘드(Methods)

• 객체는 함수를 포함할 수 있다. 이 점이 일반 배열과는 틀린 점이다.이 객체 내에 있는 함수를 메쏘드라고 부른다.
• 객체 내에 있는 메소드 호출 방법 : objectName.methodName() (가령 객체이름이 car이고 메쏘드 이름이 go()라면 car 객체의 go()란 메쏘드를 호출할 때 car.go()와 같은 방식으로 접근한다.)
• 메소드를 호출할 때 필요하다면 괄호 안에 파라미터를 넘겨줄 수 있다. (예: car.go(3))

---

객체 생성하는 방법

• 객체를 생성할 때 거의 대부분 자바스크립트에 내장되어 있는 객체를 생성한다.
• 하지만 자신이 직접 만든 객체도 얼마든지 생성할 수 있다.
• 새로운 객체를 생성하는 방법은 여러 가지가 있다. 이 중 두 가지 경우만 살펴볼 것이다

  직접 인스턴스를 생성하는 방법:

애완견과 관련된 객체를 만든다고 가정하면, myPetDog이란 객체를 다음과 같은 방법으로 생성할 수 있다:

myPetDog=new Object(); myPetDog.name="Barney"; myPetDog.breed="beagle"; myPetDog.year=1981;

새로운 객체에 메쏘드를 하나 추가하는 것도 간단하다. 예를 들어 사운드를 통해 짓는 소리를 내는 woof라는 함수를 이미 만들어 놨다고 하면 다음과 같은 방식으로 이 객체의 메쏘드를 만드렁 낼 수 있다:

myPetDog.woof=woof;

객체 템플릿을 이용하여 생성하는 방법:

때때로 객체의 템플릿(template) 또는 프로토타입(prototype)을 만들어 놓은 후 마치 스탬프 찍듯 그 틀에 맞는 객체를 생성하고 싶을 때가 있다. 이 틀 또는 템플릿은 실제 객체의 인스턴스는 아니지만 객체의 구조를 정의하고 있는 부분이다. 이 템플릿을 사용하면 필요할 때마다 객체에 대한 인스턴스를 빨리 생성해낼 수 있다. 위에서 살펴본 예제를 이용하여 petDog이란 템플릿용 객체를 만들어 보자. 이를 위해 먼저 petDog 객체의 구조를 정의한 함수를 다음과 같이 만들어야 한다:

function petDog(name, breed, year) {     this.name = name;     this.breed = breed;     this.year = year; }

이제 petDog이란 프로토타입이 만들어졌으므로 petDog이란 구조 기반 아래 새로운 객체에 대한 인스턴스를 다음과 같이 쉽게 만들어 낼 수 있다:

myPetDog=new petDog("barney","beagle",1981); yourPetDog=new petDog("max","terrier",1990);

******** 끝 *******

 

출처  : korea.interanet.com