알쓸전컴(알아두면 쓸모있는 전자 컴퓨터)
[DOM,BOM,javascript]Object Model 학습 하기[중요 개념] 본문
Object Model
Object Model 을 익힌 다는것은 java script 를 웹브라이저를 제어하기 위한 목적으로 사용됩니다.
java script의 언어로 웹브라우저 의 Object 을 제어가는 것이 목적인 것이죠 .
object가 추상적으로 느껴 질수 있습니다.
그이유는 직접 코드를 작성한 부분이 아니고 웹브라우져에서 지원하는 개념이기 때문에 object 속에 웹브라이저와 어떻게 연동 되어 작동
되는지 일일이 알지 못해도 java script 를 이용해 제어 할수 있도록 브라우저 회사 또는 표준화 단체에서 메뉴얼을 주고서는 사용하라고
하는것이죠.
java script 를 이용하여 웹브라이저를 제어할때 쓰이는 객체는
위와 같은 구조를 보입니다.
windows 는 최상위 object 이며 이 object을 통해 다른 object에 접근 하고 또 그 접근한 object에서 다른 오브젝트를 접근 하는것이지요.
조금더 직관적으로 느껴지기 위해서 샘플 코드를 작성하는것이 좋을듯합니다.
DOM sample code
<!DOCTYPE HTML> <html> <body> <input type="button" onclick="alert(window.location)" value="alert(window.location)" /> </body> </html>
DOM object 부분은 alert(window.location) 입니다.
위와 같이 브라우저객체를 통해서 기능들을 제어 할수있습니다.
DOM sample code
<!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>
console.log(document.body);
console.log(document.images);
</script>
</body>
</html>
브라우저에서 콘솔을 보면 위와 같이 객체를 얻어서 리턴해줍니다.
보면 windows의 자식인 DOM,BOM 들의 객체들을 쓰면서 windwos 적는 부분도 있고 안적을때도 있습니다.
결론은 적어도 안적어도 상관없습니다. 브라우저에서 javascript 를 사용할때에는 암묵적으로 windows를
안적어도 windwos. 이 적용이 됩니다.
크게 브라우저 에서 지원하는 windows object 안에 DOM,BOM 으로 쓰는 기능에 따라 구분하여 객체들이 관리 됩니다.
그리고 이들을 제어하는게 javascript 언어를 통해서 하는것이구요 .
'Web > 웹브라우저 객체 API' 카테고리의 다른 글
| [DOM,BOM,javascript] 객체 제어 하기 (0) | 2017.08.19 |
|---|---|
| [javascript] alert,confirm,prompt 사용하기 (0) | 2017.08.19 |
| [DOM,BOM,javascript] 전역객체 윈도우 (0) | 2017.08.19 |
| HTML JavaScript 기본 구조 샘플 코드 (0) | 2017.08.16 |
| 웹브라우저 객체 사용법에 대한 강의 (0) | 2017.08.16 |
