[JavaScript] 웹브라우저 Java Script (JavaScript Load, Object Model, BOM, DOM)

티스토리 뷰

기타 개발/Web

[JavaScript] 웹브라우저 Java Script (JavaScript Load, Object Model, BOM, DOM)

beankhan 2017. 6. 19. 23:25

출처

https://opentutorials.org/course/1375/6620

https://opentutorials.org/course/1375/6622

http://learn.javascript.ru/browser-environment

HTML 에서 JavaScript 로드하기

Inline 으로 로드하기

inline 방식은 태그에 직접 자바스크립트 코드를 작성하는 방식이다.

장점은 태그에 연관된 스크립트가 분명하게 드러난다는 것이지만,

정보가 제어가 섞여있기 때문에 정보로써의 가치가 떨어진다.

<!DOCTYPE html>
<html>
<body>
    <input type="button" onclick="alert('Hello world')" value="Hello world" />
</body>
</html>

Script 로 로드하기

장점은 html 태그와 JavaScript 코드를 분리할 수 있다는 점이다.

<!DOCTYPE html>
<html>
<body>
    <input type="button" id="hw" value="Hello world" />
    <script type="text/javascript">
        var hw = document.getElementById('hw');
        hw.addEventListener('click', function(){
            alert('Hello world');
        })
    </script>
</body>
</html>

외부 파일로 분리

별도의 파일로 분리할 수도 있다.

장점은 보다 엄격하게 정보와 제어를 분리할 수 있다.

하나의 js 파일을 여러 웹페이지에서 로드함으로서

js의 재활용성을 높일 수 있다.

캐쉬를 통해서 속도의 향상, 전송량의 경량화를 도모할 수 있다.

<html>

<!DOCTYPE html>
<html>
<body>
    <input type="button" id="hw" value="Hello world" />
    <script type="text/javascript" src="script2.js"></script>
</body>
</html>

<.js>

var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
    alert('Hello world');
})

Script 한 파일의 위치

script를 head 태그에 위치시킬 수도 있다. 하지만 이 경우는 오류가 발생한다.

<!DOCTYPE html>

<html>

<head>

    <script src="script2.js"></script>

</head>

<body>

    <input type="button" id="hw" value="Hello world" />

</body>

</html>

아래와 같이 script2.js의 코드를 수정해야 한다.

window.onload = function(){

    var hw = document.getElementById('hw');

    hw.addEventListener('click', function(){

        alert('Hello world');

})

}

그 이유는 <head></head> 에서 <script></script> 를 만나면

웹브라우저는 "script2.js" 파일을 다운받고 해석에 들어가는데

document.getElementById('hw') 에서 'hw' 값이 아직 해석되지 않았으므로

var hw 값은 null 이 되어 addEventListener 시 오류가 난다.

window.onload = function(){} 함수는

웹브라우저의 모든 구성요소에 대한 로드가 끝났을 때

브라우저에 의해서 호출되는 함수다.

위 오류를 방지하고 싶다면,

window.onload = function() { ... } 에서 addEvent 를 하면된다.

일반적으로 <script></script> 를 <head></head>

사이에 많이들 위치시키는데 좋지 않은 방법이다.

java script 를 해석하는 시간에

html 을 해석해서 브라우저에 먼저 렌더링 하는것이

사용자 반응성에 더 좋기 때문이다.

또한 window.onload event 를 받을 필요도 없다.

Object Model

개요

웹브라우저를 제어한다는 것은

JavaScriptCore, BOM, DOM 을 이용한다는 것이다.

웹브라우저는 HTML 파일을 해석하며

이미 <html>, <body>, <img> tag 들에 대해 객체화를 해놓는다.

객체를 제어한다는 것은 객체가 가리키고 있는 tag 를 제어한다는 것이다.

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

위 객체를 가져오기 위해서는

아래와 같이 하면된다.

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

imgs[0] -> <img src="./image.png"/>

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

imgs[0].style.width = '50px'

이미 HTML 코드를 통해 렌더링이 끝난 이미지는 변경할 수 없는데

위와같이 JavaScript 를 이용해 동적으로 변경할 수 있다.

위 예제처럼 웹 브라우저의 구성요소들은 하나하나 모두 객체화 되어있다.

자바스크립트로 객체들을 제어해서 웹브라우저를 제어할 수 있게된다.

이 객체들은 서로 계층적인 관계로 구조화 되어있다.

DOM, BOM 은 이 구조를 구성하고 있는 가장 큰 분류이다.

Window, BOM, DOM

window 란 전역객체로 window, frame 과 같은 것을 제어할 수 있다.

정확히는 window 객체 안에 document property 가 존재한다.

하지만 window.document 와 document 는 동일한데,

그 이유는 window. 를 사용하지 않아도

기본적으로 전역객체로써 window 의 document 라는 것을

암시적으로 의미하기 때문이다.

DOM (Document Object Model)

웹페이지의 내용, 즉 웹페이지 문서 (html, body, img, ...) 을 제어한다.

document 객체가 이러한 작업을 담당한다.

이를 DOM (Document Object Model) 이라고 말한다.

Document 객체의 프로퍼티는 문서 내의

주요 엘리먼트에 접근할 수 있는 객체를 제공한다.

<!DOCTYPE html>
<html>
<body>
    <img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
    <img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
    <img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
    <img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
    <img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
    <script>
        // body 객체
        console.log(document.body);
        // 이미지 객체들의 리스트
        console.log(document.images);
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
    <img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
    <img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
    <img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
    <img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
    <img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
    <script type="text/javascript">
        // body 객체
        console.log(document.getElementsByTagName('body')[0]);
        // 이미지 객체들의 리스트
        console.log(document.getElementsByTagName('body'));
    </script>
</body>
</html>

BOM (Browser Object Model)

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

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

BOM 을 이용하면 웹브라우저가 표시하고 있는 화면을 reload 하거나

주소창의 url 을 알아온다거나 alert 를 띄워주는 일을 할 수 있다.

<!DOCTYPE html>
<html>
<body>
    <input type="button" onclick="alert(window.location)" value="alert(window.location)" />
    <input type="button" onclick="window.open('bom.html')" value="window.open('bom.html')" />
</body>
</html>

JavaScript Core

BOM, DOM 객체들을 JavaScript 언어를 이용해 제어한다.

JavaScript 언어를 사용하므로

언어 자체에 정의되어 있는 Object, Array, Dictionary 등등을 사용할 수 있다.

'기타 개발 > Web' 카테고리의 다른 글

[BOM] 브라우저를 제어하기 위한 기능 (0)	2017.06.23
HTTP 프로토콜과 REST 소개 (0)	2017.05.22
[JSON] JSON 의 개요 (0)	2017.04.24

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/12 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

글 보관함

BeanKhaners

티스토리 뷰