( 공부복습 )자바스크립트 객체_1

자바스크립트에서는 숫자, 문자열, 함수, 배열, 날짜 등의 데이터 뿐만 아니라 HTML요소와 브라우저에 관련된 모든 것이 객체 기반으로 되어 있다.  개게의 기본 개념을 익히고 사용자 정의 객테에서 속성과 메소드를 정의하여 객체를 생성하는 방법 또한 문서 객체 모델(DOM)과 브라우저 객체 모델(BOM)의 기본 개념과 활용법

 

▶ 객체란?

자바스크립트는 객체 기반의 언어이며 자바스크립트를 이루고 있는 거의 모든 것이 객체

숫자, 문자열, 함수, 배열 등도 모두 객체를 기반으로 함

자바스크립트의 객체는 속성과 메소드로 구성 속성은 객체에 붙어 있는 변수이며,

메소드는 객체에 붙어 있는 함수

하나의 객체는 다음 같이 데이터를 의미하는 속성과 데이터를 처리하는 기능을 가진 메소드의 집합이라고 할 수 있다

 <script>

        var person = {

            name: "홍길동",

            age: 25,

            sayHello: function () {

                document.write(this.name + "님 안녕하세요!")

            }

        };

        document.write("이름 : " + person.name + "<br>");

        document.write("나이 : " + person.age + "<br>");

        person.sayHello();

    </script>

실행 결과

**TIP 키워드 this

사용된 this는 sayHello( ) 메소드를 소유한 객체인 person이 저장된 컴퓨터 메모리 위치를 가리킨다

여기서 this.name은 person 객체의 name 속성 값인 '홍길동'을 나타냄

이와 같이 this는 이 this가 소속된 객체 자체를 가리키고 this를 이용하여 자신의 객체에 있는 속성이나 메소드에 접근 할 수 있다

ex6-1-start.html

0.00MB

---

▶ 객체의 종류

자바스크립트에서 객체는 크게 사용자 정의 객체, 내장 객체, 문서 객체 모델, 브라우저 객체 모델로 나눌 수 있다.

1 ) 사용자 정의 객체

사용자 정의 객체는 사용자가 객체를 정의하여 사용하는 객체를 말함

사용자 정의 객체에서는 사용자 즉, 프로그래머 객체의 속성을 정의하거나 속성과 메소드를 함께 정의하여

객체를 프로그램에서 이용

 

2 ) 내장 객체

내장 객체는 말 그대로 자바스크립트에 기본적으로 내장되어 있는 객체를 말함

내장 객체는 별도의 정의가 필요없다

내장 객체를 이용할 때는 필요 시 해당 내장 객체로부터 객체를 생성하여 내장 객체에서 제공하는 속성과 메소드를 사용하면 됨

 

3 ) 문서 객체 모델

HTML의 문서 구조를 말함

문서 객체 모델에서는 Docuent 객체 아래 HTML 요소들이 트리구조를 형성

이러한 트리 구조에 있는 HTML 요소, 즉 객쳉에 접근하여 요소의 내용을 바꾸거나 설정된 CSS를 변경할 수 있다

자바스크립트 DOM의 메소드와 속성을 이용하여 HTML 요소를 다룰 수 있지만,

제이쿼리에서는 자바스크립트보다 더 쉽고 편리하게 DOM을 처리할 수 있는 라이브러리를 제공

따라서 제이쿼리를 이용하여 DOM을 다루는 다양한 방법에 더 중점을 둠

 

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

브라우저 객체 모델은 자바스크립트에서 브라우저를 다루는데 필요한 객체의 모델을 제공

BOM 객체의 속성과 메소드를 이용하여 브라우저에 관련된 처리를 할 수 있다

---

▶ 사용자 정의 객체

사용자 정의 객체는 사용자가 직접 객체의 기능을 정의해서 사용하는ㄴ 것

사용자 객체를 정의하고 생성하는 방법은 큰게 두가지가 존재

1. 객체 리터럴

2. New 연산자와 생성자 함수 이용

---

▶ 객체 리터럴

자바스크립트에서 객체를 생성하는 가장 간단한 방법이자 많이 사용되는 방법은 객체 리터럴을 이용하는 것

리터럴은 데이터 형에 들어가는 데이터 값 자체를 의미

이 방식에서는 변수를 선언할 때와 유사한 방식으로 객체 들어가는 속성과 메소드를 직접 정의

객체 리터럴을 이용하여 객체를 생성할 때 사용되는 서식 다음과 같다

var 객체명 = {      키1 : 값1,      키2 : 값2,      ..... // 속성정의      메소드1 : function ( ) {               // 자바스크립트 코드      },     메소드2 : function ( ) {             // 자바스크립트 코드      },      ...... //메소드 정의 };

각 속성은 키와 값으로 정의되고, 메소들들은 배운 익면 함수의 형태로 정의

 <script>

        var member = {

            name: "안지영",

            email: "hong@naver.com",

            phone: "010-1234-5678"

        };

        document.write(member.name + "<br>");

        document.write(member.email + "<br>");

        document.write(member.phone);

    </script>

실행효과

ex6-2-start.html

0.00MB

---

▶ 생성자 함수와 New 연산자

생성자 함수와 New 연산자를 이용하여 객체를 생성할 때는 다음의 두 단계를 따른다

( 1 ) 생성자 함수를 이용하여 객체의 타입을 정의

생성자 함수의 첫 글자는 반드시 영문 대문자를 사용하도록 함

( 2 ) new를 이용하여 객체를 생성

<script>

        function Car(company, model, year) {

            this.company = company;

            this.model = model;

            this.year = year;

        }

 

        var car1 = new Car("현대", "아반떼", 2021);

        document.write(car1.company + "/" + car1.model + "/" + car1.year + "<br>");

 

        var car2 = new Car("르노 삼성", "SM6", 2021);

        document.write(car2.company + "/" + car2.model + "/" + car2.year);

    </script>

실행효과

ex6-3-start.html

0.00MB

** 생성자 함수 정의

생성자 함수 Car( )를 정의

Car( )는 company, model, year의 속성 3개로 구성

---

▶ 객체의 속성 접근법

자바스크립트에서 객체의 속성 값에 접근하는 두가지 방법

( 1 ) 객체명.키 : 객체명 다음에 점( . ) 다음에 키를 사용

( 2 ) 객체명[ "키" ] : 객체명 다음에 대괄호( [ ] )에 키(문자열)를 사용

    <script>

        var obj1 = {

            name: "박혜린",

            age: 22,

        };

        document.write(obj1.name + "<br>");

        document.write(obj1.age + "<br><br>");

        document.write(obj1["name"] + "<br>");

        document.write(obj1["age"] + "<br>");

    </script>

실행효과

ex6-4-start.html

0.00MB

 

---

▶ for문에서 객체 사용

for문을 이용하면 객체의 속성을 반복해서 읽어올 수 있다

다음 예제를 통하여 for문에서 객체를 사용

<script>

        var obj1 = {

            name: "박전수",

            age: 22,

            address: "서울"

        };

 

        var str = "";

        for (var x in obj1)

            str += obj1[x] + "<br>";

 

        document.write(str);

    </script>

실행 결과

 

ex6-5-start.html

0.00MB

 

for ( 변수명 in 객체명 ) {              문자1;              문자2;              ...... }

객체명의 객체에 대해 반복 루프를 수행

---

▶ 문서 객체 모델(DOM)

자바스크립트에서는 문서 객체 모델을 이용하여 HTML 문서의 요소들에 접근하여 내용을 변경시키거나

HTML 태그의 속성 값과 CSS 속성 등을 변결 할 수 있다

제이쿼리를 이용하면 DOM을 자바스크립트보다 훨씬 쉽고 편리하게 다룰 수 있다

하지만 자바스크립트에서 DOM을 다루는 기본 개념을 이해하는 것 또한 중요

ex6-6.html

0.00MB

ex6-7.html

0.00MB