BOM(Browser Object Model)

웹 브라우저의 창이나 프레임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단, Window 객체의 프로퍼티와 메소드의 사용법을 배우는 것

전역객체 Window

alert('Hello world'); //window를 생략한 것과 같은 효과

window.alert('Hello world');

bom, dom, jsCore 모두 Window에 소속되어 있는 객체

웹브라우저 자바스크립트에서 Window 객체는 ECMAScript의 전역객체이면서 동시에 웹브라우저의 창이나 프레임을 제어하는 역할을 합니다.

사용자와 커뮤니케이션 하기

alert 경고창 :  사용자에게 정보를 제공하거나 디버깅의 용도로 사용

confirm : 확인을 누르면 true, 취소를 누르면 false값을 리턴

prompt : 사용자가 입력한 값을 받아 js가 얻을 수 있는 기능

Location 객체

location객체는 문서의 주소와 관련된 객체로 window 객체의 프로퍼티입니다.

객체를 이용해 문서의 URL을 변경할 수 있고, 문서의 위치와 관련해 다양한 정보를 얻을 수 있습니다.

현재 윈도우의 URL 알아내기 : console.log(location.toString(), location.href);

http : 웹 페이지를 웹 서버와 클라이언트가 정보를 주고 받기 위한 통신 규약

host : 컴퓨터를 식별하는 것

port : 컴퓨터에 돌아가는 서버, 소프트웨어들 식별하는 것

location.protocol : http , location.host : opentutorials.org

location.port : 80, location.pathname : /module/904/6634

location.search : 물음표 뒤에 따라오는 정보, location.hash : #뒤에 정보

location객체는 URL변경과 reload의 기능도 합니다.

location.href = ‘http://www.naver.com’;

location = ‘animal-park.tistory.com’;

location.reload();

Navigator 객체

Navigator객체 : 브라우저의 정보를 제공하는 객체

크로스 브라우징(Cross Browsing) :

ie, ff, chrome, safari, opera 각각의 브라우저 동작 방법은 W3C(dom), ECMA(js) 국제 표준화 기구에서 정의한 스펙에 따라 브라우저를 만드는 것

넷스케이프              Internet Explorer

addEventListener      attachEvent

개발자의 고충을 해결하기 위해 등장한 것이 웹 표준

표준에 정의된 스펙을 따르며 효율적으로 성능의 면으로 경쟁을 하게 됩니다.

console.dir(navigator); // navigator객체 프로퍼티의 리스트를 알 수 있음

console.log(appName); // 웹브라우저의 이름으로 IE는 Microsoft Internet Explorer, 파이어폭스, 크롬등은 Nescape로 표시

console.log(appVersion); // 브라우저의 버전을 의미

console.log(platform); // 브라우저가 동작하고 있는 운영체제에 대한 정보

창 제어

window.open : 새창을 만드는 메소드

window.close : 새창을 닫는 메소드

팝업 차단

같은 도메인의 사이트라면 원격에 다른 웹 페이지를 제어하는 것을 허용합니다.

도메인이 다르다면 서비스에 접근해 악의적인 일을 할 수 있기 때문에 제어를 허용하지 않습니다.

팝업을 기본적으로 차단하고 명시적으로 허용할 때 사이트가 열리도록 함

스크립트 태그 안의 팝업은 차단되지만 window.open 시 팝업은 차단되지 않습니다.

출처 : 생활코딩 강의

HTML CSS JavaScript(웹 페이지를 제어하는 역할)

HTML에서 JavaScript로드하기

Inline 방식은 태그에 직접 자바스크립트를 직접 기술하는 방식입니다.

장점은 연관된 스크립트가 분명하게 드러난다는 점입니다. 하지만 정보와 제어가 같이 있기 때문에 정보로서 가치가 떨어집니다.

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

<script>태그 이용

<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>

html코드 안에 자바스크립트가 존재하지 않습니다. 또한, 자바스크립트 유지보수하기에 바람직합니다.

외부 파일로 분리

정보와 제어의 결합도를 낯추며 유지보수의 편의성이 높아집니다.

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

script2.js  파일 내 코드

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

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

    alert('Hello world');

})

Script파일의 위치

head 태그에 위치시킬 수 있지만 이 경우는 오류가 발생할 수 있습니다.

Id가 hw의 존재를 해석하기 전의 상태에서 조회를 하고 있기 때문에 null의 상태가 됩니다. 존재하지 않는 객체를 호출한 상태이기 때문에 오류가 발생합니다.

window.onload = function(){

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

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

        alert('Hello world');

    })

} //윈도우 객체 onload를 호출하도록 약속, 태그가 화면이 등장한 이후 스크립트 //코드가 실행되기 때문에 오류를 없앨 수 있습니다.

script 파일은 head 태그 보다 페이지의 하단에 위치시키는 것이 더 좋은 방법입니다.

Object Model

객체화란 무엇인가?

테두리와 같은 역할을 합니다.

각각의 태그마다 객체를 만들어 준비를 해놓은 상태, 태그에 해당하는 객체를 찾아 메소드를 호출하거나 프로퍼티를 가져오는 것

객체화 = 객체 제어 방법

var imgs = document.getElementsByTagName(‘img’);

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

JavaScript Core, BOM DOM(윈도우 객체의 프로퍼티)

window : 전역객체

JavaScript Core : JavaScript 언어 자체에 정의되어 있는 객체들

BOM(Browser Object Model) : 웹페이지의 내용을 제외한 브라우저의 각종 요소들을 객체화시킨 것

DOM(Document Object Model) : 웹페이지의 내용을 제어

출처 : 생활코딩 강의