객체화

웹브라우저의 구성요소들은 하나하나가 객체화되어 있다. 자바스크립트로 이 객체를 제어해서 웹브라우저를 제어할 수 있게 된다. 이 객체들은 서로 계층적인 관계로 구조화되어 있다. BOM과 DOM은 이 구조를 구성하고 있는 가장 큰 틀의 분류라고 할 수 있다.이 관계를 그림으로 나타내면 아래와 같다.

자바스크립트로 어떤 HTML 태그를 제어하기 위해서는 Object(객체)여야 하는데, 브라우저가 이미 각 각의 태그들마다 미리 객체를 만들어 놓고 준비해 둔다.
그럼 우리는 이미 만들어진 태그에 해당하는 객체를 찾아서 그 객체를 대상으로 메소드를 호출한다거나, 그 객체의 프로퍼티 값을 가져온다거나하여 그 객체를 제어할 수 있는 것이고. 그 객체를 제어한다는 것은 그 객체가 가리키고있는 태그를 제어한다는 것을 의미한다.

예를들어 img 태그를 선택하기 위해서는 "document" 라는 객체를 사용할 수 있다. document.getElementsByTagName('img'); 를 사용하여 선택 가능하다. 태그 이름이 img인 모든 것들을 가지고오는데, 여러개의 요소들을 가져오기 때문에 ['배열'] 로 반환이 된다.

반환값을 받을 변수를 만들어주고,

const imgs = document.getElementsByTagName('img');

imgs[0].style.width ='300px';

imgs[0]이라는 객체를 가리키고 .style은 저 객체의 css값을 의미하는 프로퍼티이다.

이미 화면에 렌더링이 끝난 HTML 태그는 변경할 수 없다. 위의 JS 코드를 사용하여 다이나믹하고 동적으로 변경되는 것 그것이 '객체화'이다.


window.alert('Hello'); 윈도우창을 제어하는 윈도우 객체의 alert라는 메소드를 통해서 윈도우에 경고창을 띄울 수도 있는 것이다.

요약

브라우저 또는 웹페이지를 제어하기 위해선 객체가 필요하고, 그 객체를 만드는 주체는 웹브라우저가 만들어 준비해놓는 것이고, 우리는 그 준비되어있는 객체를 자바스크립트라는 언어로 제어하는 것을 통해서 웹브라우저 또는 문서를 제어할 수 있게 된다.

큰 테두리

window 객체는 전역객체,window.,frame.과 같은 것을 제어하기 위한 객체
window가 가진 여러 프로퍼티 중 아주 중요한 것이 document라는 프로퍼티다. DOM, BOM 모두 윈도우가 가진 프로퍼티이다.

document객체의 역할은 웹페이지의 문서를 제어하는 역할
DOM이란 Document Object Model이다.

BOM이란 Browser Object Model이다.
현재 웹페이지가 가리키고 있는 url , 현재 웹페이지가 표시하고있는 페이지를 리로드, 경고창을 띄우는 등의 것을 담당한다.

JSC (JavaScript Core)라는 것도 있다.

각각의 객체들의 사용법을 아는 것을 통해서 브라우저를 통해서 프로그래밍적으로 할 수 있는 일, 없는 일을 알고 문제를 해결하는 것이 웹 프로그래밍을 하는 것이 핵심이다.

요약

자바스크립트를 통해서 브라우저를 제어한다는 것이 구체적으로 어떤 의미인가 아는 것이 중요하다.