Romantic Developer : )

(Web JavaScript) 웹 자바스크립트 (2) 오브젝트 모델 본문

Romantic Developer/Web JavaScript

(Web JavaScript) 웹 자바스크립트 (2) 오브젝트 모델

Romantic_Developer 2018. 7. 26. 17:00


안녕하세요 영감을 주는 개발자 방민방민입니다.


오늘은 웹 자바스크립트에서 오브젝트 모델에 대하여 알아보도록 하겠습니다.

이 부분은 많이 어려울 수 있습니다. 최대한 상세하고 어렵지 않게 설명하고자 합니다. 

집중해서 잘 따라와 주시면 감사하겠습니다.


웹 브라우저에서의 구성요소들은 하나하나가 모두 객체화 되어 있습니다.

JavaScript , DOM(Document Object Model), BOM(Browser Object Model) 으로 구성된 3가지의 오브젝트는 브라우저의 가장 큰 틀 3가지이기 때문에 반드시 알아두어야 합니다.

(출처 : 생활코딩)


브라우저를 객체화 한다는것이 무엇일까요? 지금부터 알아보도록 하겠습니다.


1. Img tag


브라우저 위에 이미지를 하나 올려 보도록 하겠습니다.

<!DOCTYPE html>
<html>
<body>
<img src="men.png">
</body>
</html>

위의 간단한 코드는 아래의 내용을 웹 브라우저에 출력합니다.

(제가 요즘 기획하고 있는 남성용 뷰티 웹서비스의 로고입니다)


그리고 개발자 도구를 통해 확인해보겠습니다.



<img src = "men.png"> 태그는 html 소스이기 때문에 자바스크립트로 컨트롤이 불가능합니다.

자바스크립트 코드로 men.png 소스코드를 제어하기 위해서는 html 코드를 객체 상태로 받아 자바스크립트 코드로 변환 시킬 필요가 있습니다. 그러므로 콘솔에 다음과 같이 입력합니다.(이때 콘솔은 자바스크립트 코드로 동작합니다)

var imgs = document.getElementsByTagName('img');
imgs[0].style.width='50px';

이렇게 콘솔에 입력하면 브라우저가 변경됨을 알 수 있습니다. 

이때 브라우저는 콘솔에 입력되는 자바스크립트 코드로 인하여 이미지를 var imgs 라는 배열 객체에 받아오고 그 첫번째 원소인 imgs[0]의 style 객체의 속성(프로퍼티인) width 를 50px 으로 변경시켰습니다.



즉 위와같은 방법으로 자바스크립트 코드를 이용하여 브라우저를 동적으로 조작한 것입니다!!!!!!!!

(이제 드디어 자바스크립트 코드로 브라우저를 어떻게 컨트롤 하는지 느낌이 오기 시작하실 것입니다.



2. JavaScript Core


첫번째 자바스크립트 코어 객체에 대한 내용을 살펴보겠습니다.

이는 저희가 앞선 JavaScript 기본, 심화쪽의 내용들을 통해 다루었던

객체, 배열 등등의 모든 것들을 가르킵니다.



3.BOM


웹페이지의 내용을 제외한 브라우저의 각종 요소들을 객체화한것을 말합니다.

전역객체 Windows 의 프로퍼티에 속한 객체들이 이에 속합니다.



4. DOM


웹페이지의 내용만을 담당합니다. Windows 의 프로퍼티인 document(객체) 속성에 할당된 document 객체가 이러한 작업을 담당하게 됩니다.



오늘은 정말 간단하게 오브젝트 모델에 대하여 알아보았습니다.

브라우저는 이미 JSC , BOM, DOM 형태로 객체를 제공해주고있고, JavaScript 는 그 제공되는 객체들을 컨트롤하는 언어입니다. 그렇기 때문에 document 객체로 제공되는 img 소스파일을 콘솔에서 javascript 코드로 제어할 수 있었던 것입니다. 그렇기 때문에 마찬가지로 JS 코드를 활용하여,  DOM, BOM 에 있는 객체들도 동적으로 컨트롤이 가능하다는 뜻입니다.


오늘은 이정도만 이해하면 충분합니다. 그리고 차차 모든 객체에 대하여 알아갈 것입니다.


그러면 지금까지 영감을 주는 개발자 방민방민이었습니다!

저작자표시

'Romantic Developer > Web JavaScript' 카테고리의 다른 글

(Web JavaScript) 웹 자바스크립트 BOM (3) Navigator 객체  (0) 2018.07.28
(Web JavaScript) 웹 자바스크립트 BOM (2) Location 객체  (0) 2018.07.28
(Web JavaScript) 웹 자바스크립트 BOM (1) 유저 커뮤니케이션  (0) 2018.07.27
(Web JavaScript) 웹 자바스크립트 (1) 웹에서의 자바스크립트  (0) 2018.07.25
(Web JavaScript) 웹 자바스크립트 시작  (0) 2018.07.24
'Romantic Developer/Web JavaScript' Related Articles more