[JavaScript] 객체 (Object)

객체 (Object)

  - 기능(Method)과 속성(Property)을 가지는 것

  - 자바스크립트의 객체는 '일급 객체'라고 부름

      : 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체

 

  - 프로토타입

      : 객체의 속성과 메서드를 모아 놓은 틀 (Java의 클래스와 유사)

  - 인스턴스

      : 프로토타입으로 찍어낸 객체

          → 프로토타입의 속성과 함수를 동일하게 사용함

 

① 내장 객체 (Built-in Object)

  - 미리 정의되어 있는 객체

  ex) String, Date, Array, Math, ...

 

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

  - 웹 브라우저의 요소(창, 화면, URL 등)를 객체로 관리함

  ex) window. screen, location, history, navigator, ...

 

③ 문서 객체 모델 (DOM, 태그 요소)

  - 문서뿐만 아니라, 웹 문서 안에 포함된 이미지, 링크, 텍스트, 필드 등이 모두 객체로 관리됨

  - 트리 구조 (부모-자식 관계)

      → 동적 HTML을 생성하는 데 필요한 모든 기능을 얻을 수 있음

          · HTML 요소 변경

          · HTML 속성 변경

          · 새로운 HTML 요소와 속성 추가

          · 페이지의 모든 CSS 스타일 변경

          · HTML 요소 및 속성 제거

          · 페이지에서 새로운 HTML 이벤트 생성

          · 페이지의 모든 기존 HTML 이벤트에 반응

 

  - 웹 문서의 태그 : 요소 노드

  - 태그가 품고 있는 텍스트 : 해당 요소 노드(태그)의 자식 노드인 텍스트 노드

  - 태그의 속성 : 해당 요소 노드(태그)의 자식 노드인 속성 노드

  - 주석 : 주석 노드

 

 

반응형

728x90

---

객체 생성

let 참조변수 = new 생성함수(...);

let 참조변수 = new Object();

  - 참조변수 : 해당 객체를 가리키는 변수 (≒ 객체명)

 

속성 부여

객체명.속성명 = 값;

 

메서드 구현

  - 메서드는 속성을 이용하여 기능을 구현함

 

객체명.메서드명 = function() {
    코드;
}

 

객체 리터럴 (객체 표현식)

let 객체명 = {
    // 속성 부여 //
    속성명1 : 속성값1, 
    속성명2 : 속성값2,
    ...
    // 메서드 구현 //
    메서드명 : function {
        코드 ;
    }
} ;

 

  - JSON과 달리, key명(속성명)에 쌍따옴표를 사용하지 않음

 

  - 객체 리터럴 사용 시 let과 const의 차이

      1) let으로 선언한 객체는 새로운 속성을 추가할 수 있음

      2) const로 선언한 객체는 새로운 속성을 추가할 수 없음 (기존 속성의 값은 변경 가능함)

 

 

---

속성 호출

객체명.속성명

// 해당 객체의 메서드 내부인 경우
this.속성명

 

메서드 호출

객체명.메서드명();

 

속성값 변경

객체명.setAttribute("속성명", 새_속성값);

// 또는

객체명.속성명 = "새_속성값";

 

 

---

사용자의 브라우저/운영체제 정보 반환

navigator.userAgent

 

  - toLowerCase()를 이용해서 소문자로 변환하면 활용하기 더 쉬움