티스토리 뷰

기타 개발/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 로 로드하기

<script></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 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
«   2024/05   »
일 월 화 수 목 금 토
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
글 보관함