브라우저의 구성요소들은 하나하나가 객체이다. 브라우저는 각각의 html 태그들을 객체화시켜둔다.
JS로 이 객체를 제어하면 브라우저를 제어할 수 있다. ex) 메서드 사용, 프로퍼티 값 가져오기 등
브라우저가 만들어둔 객체들은 서로 계층적인 관계로 구조화 되어 있다.
Window
DOM (Document Object Model)
BOM (Browser Object Model)
JS core
Window : 전역객체, 브라우저 창을 제어한다.
window 객체의 document 프로퍼티 중에는 document 객체가 있다.
window.document로 접근할 수 있으며 전역객체이므로 window는 생략가능하다
document 객체는 html의 태그들을 제어할 수 있다.
DOM : 웹페이지의 내용을 제어한다.
document 객체의 프로퍼티를 사용해 문서의 엘리먼트에 접근할 수 있다.
특정 엘리먼트의 객체를 얻을 수 있는 메서드도 제공한다.
BOM : 내용을 제외한 현재 웹브라우저의 각종 요소들을 객체화 시킨 것
window 객체의 프로퍼티이며 아래의 다양한 객체를 가지고 있다.
navigator, screen, location, frames, history, XMLHttpRequest
ex) url 가져오기, reload, alert, confirm 등
JavaScript core : 객체, 배열, 함수 등의 객체가 있다.
브라우저, 구글앱스스크립트, 노드js 등 제어할 수 있다.
브라우저가 아닌 것까지 제어 할 수 있다.
객체를 제어하는 방법 (DOM 예시)
브라우저가 준비해둔 객체에는 DOM 이라는 것이 있다.
DOM에는 getElementsByTagName 이라는 메서드가 있다.
document.getElementsByTagName(인자);
이 메서드의 인자로 태그를 넣으면 해당하는 모든 요소들을 리턴해준다.
여러개의 값을 리턴하니까 배열타입 → 인덱스를 활용해 요소를 가져올 수 있다.
가져온 요소는 객체이다. → 객체.style.width = '50px';
윈도우 창과 관련된 Window 객체도 있다.
window.alert('Hello world'); → 경고창을 띄울 수 있다.
결국 JS로 브라우저를 제어하려면 위에 있는 객체들을 활용할 수 있어야 한다.
모든 객체가 소속된 객체, 전역객체, 창이나 프레임
전역변수를 생성하고 함수를 선언하는 것 → window 객체의 프로퍼티와 함수를 만드는 것
(ECMAScipt에서 Global 객체라고 부른다.)
alert()
: 경고창
사용자에게 정보를 제공하거나 디버깅 등의 용도
실행 중에는 다른 동작들이 일시중지된다.
confirm()
: 확인창
확인을 누르면 true 리턴, 취소를 누르면 false 리턴
사용자의 피드백에 따라 실행을 달리 할 수 있다.
prompt()
: 입력창
사용자의 입력을 받아서 리턴해준다.
현재 열려있는 문서의 URL을 알아낸다.
location만 출력하면 해당 객체의 다양한 정보가 나온다.
다양한 프로퍼티를 이용해 특정 정보를 가져올 수 있다.
( href
, protocol
, host
, port
, pathname
, search
, hash
등 )
alert(location);
//alert의 입력값이 문자열이어야 하기 때문에 주소만 나온다.
console.log(location.toString(), location.href);
// 콘솔에 입력하면 같은 주소가 2번 출력된다.
// href 프로퍼티에 접근하면 현재 url 주소를 가져올 수 있다.
// 입력한 url로 이동시키는 2가지 방법 (re-direction)
location.href = 'http://다른사이트.net';
location = 'http://다른사이트.net';
// 현재 문서를 리로드
location.reload()
브라우저의 정보를 제공하는 객체.
크로스 브라우징 - 주로 호환성 문제 등을 위해 사용한다.
appName
, appVersion
, userAgent
, platform
등의 프로퍼티가 있다.
// 모든 프로퍼티 열람
console.dir(navigator);
// 브라우저의 이름
console.dir(navigator.appName);
// 브라우저의 버전
console.dir(navigator.appVersion);
// 브라우저가 서버에 전달하는 정보
console.dir(navigator.userAgent);
// 브라우저가 동작하는 운영체제 정보
console.dir(navigator.platform);
→ 모든 브라우저에 대응하는 것은 한계가 있다.
Object.keys
→ Object라는 객체가 keys라는 메소드를 가지고 있지 않을 때 실행하는 코드
→ 브라우저에 해당 메소드가 내장되어 있지 않을 때 기능을 추가하는 것
// From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
if (!Object.keys) {
Object.keys = (function () {
//코드생략//
}());
}
window.open()
메소드는 새 창을 생성한다.
첫번째 인자는 새 창의 URL
두번째 인자는 새 창의 이름 (_self
, _blank
, 임의 지정
)
→ 동일한 이름의 창이 있으면 그곳으로 문서가 로드된다.
세번째 인자는 새 창의 style (ex 'width=200'
)
새 창에 접근하여 상호작용 (같은 도메인 일때)
<!-- 새창열기 버튼, 입력칸 , 새창닫기 버튼 -->
<html>
<body>
<input type="button" value="open" onclick="winopen();" />
<input type="text" onkeypress="winmessage(this.value)" />
<input type="button" value="close" onclick="winclose()" />
<script>
function winopen(){
win = window.open('demo2.html', 'ot', 'width=300px, height=500px');
}
// 클릭해서 새로 연 창 demo2를 전역객체 win에 할당
function winmessage(msg){
win.document.getElementById('message').innerText=msg;
}
// 입력한 텍스트 value값을 새 창의 message에 할당
function winclose(){
win.close();
}
// 클릭해서 새로 연 창을 닫기
</script>
</body>
</html>
// 팝업 제한에 걸리는 코딩
window.open('demo2.html');
// 사용자의 인터렉션이 있으면 팝업 제한에 걸리지 않는다.