자바스크립트 2

◎ 객체(Object)

- 자바스크립트가 명령가능한 모든 대상

- 모든 객체는 속성과 메서드를 가지고 있다

- 기본내장객체, BOM(browser object model), DOM(document object model), 사용자정의 객체

 

● 속성 : 객체가 가지고 있는 고유한 특징을 기술한 것

- 값이 함수가 아닌 숫자, 문자열, 불리언, 객체로 이루어진 것

객체.속성

속성명: 값

 

● 메서드 : 객체가 가지고 있는 동작 혹은 객체에 주는 명령

- 값이 함수인 것 

객체.메서드()

메서드: function() {}

 

* 공통의 속성과 메서드는 프로토타입으로 뺀다 

 

▶ 기본 내장 객체

- 기본적인 객체들로 보통의 컴퓨터 언어들이 가지고 있는 객체

String     : 문자열

Number  : 숫자

Math       : 수학

Array       : 배열

Date        : 날짜 시간

 

▶ BOM(Browser Object Model)

- 브라우저 관련 객체

- 소문자로 작성 

window    : 브라우저 창 전체, 최상위 객체

location     : 주소 표시줄

screen       : 운영체제 화면, 속성만 가짐

history       : 방문기록을 보

navigator   : 브라우저 정보, 브라우저의 종류나 모바일(뷰포트 메타태그)에서 접속했는지 등을 확인

document  : 문서, body태그 부분, 우리가 화면 구현한 부분

 

▶ DOM(document object model)

- 태그나 컨텐츠 등을 의미하는 객체

- HTML문서의 모든 요소

- BOM의 일부 

* HTML요소 및 태그 속성 변경

* HTML 요소 및 속성 제거 또는 추가

* CSS 스타일 변경 

* 메서드

getElementById('아이디명')    : 문서 객체인 태그의 id값으로 문서객체를 선택(한개만 가능)

getElementsByTagName('태그명')    : 문서 객체인 태그명으로 문서객체를 선택(여러개 가능-배열)

getElementsByClassName('클래스명')    : 문서 객체인 태그의 class값으로 문서객체를 선택(여러개 가능-배열)

querySelector('CSS선택자')  : css선택자로 문서객체를 직접적으로 선택. 여러 요소가 한번에 선택되면 첫 번째 요소를 반환

querySelectorAll('CSS선택자')  : css선택자로 문서객체를 직접적으로 선택 (여러개 가능-배열)

 

* 사용 

document.메서드();

 

* 스타일 변경 속성

문서객체선택.style.스타일속성명 = 값;

ex) text01.style.color = 'red';

-> 문서객체가 배열이라면 배열을 각각 호출 시 배열명[인덱스번호]

 

* 이벤트 객체

- DOM과 관련된 이벤트가 발생되면 발생되는 관련 정보를 저장하는 객체

 

▶ 사용자 정의 객체

- 개발자가 직접적으로 생성하는 새로운 객체