BOM(Browser Object Model)
BOM 은 DOM 보다 한 단계 더 큰 개념이다.
html 과 java script 는 브라우저 안에서만 실행된다.
최상위는 윈도우이기 때문에 DOM을 사용할 때에도 window를 작성해줘야 하지만 프로그래밍은 너무 큰 개념은 당연하니 생략하는 경우가 많기 때문에 없어도 사용할 수 있다.
ex) java 의 Object
window를 사용해야 하는 경우는 윈도우를 빌려와야 하는 경우 이다. 생략가능
예를들어 우리가 자주 사용하는 alert() 이 있다.
alert() 은 윈도우를 빌려서 사용하는 것이다. (원래는 chrome이 가진 기능) 그래서 window.alert() 로 작성을 해야 하지만 생략할 수 있기 때문에 alert()로만 작성해주는 것이다.
open 과 close
여기서 사용된 window 는 브라우저 "창" 을 의미한다.
그렇기 때문에 window 객체를 이용해 새로운 window를 open 할 수도 close 할 수도 있다.
요즘은 브라우저에서 기본적으로 막아주기 때문에 잘 사용하지 않는다. ex) 팝업 설정을 열어주세요 하는 사이트
open()
- open 함수는 새로운 윈도우 창을 생성해 준다. 총 3개의 인자값을 갖는다.
window('url', '창이름', '옵션');
옵션은,로 구분한다.- 옵션 : width (창넓이), height (창높이), top(Y좌표), left(X좌표)
내가 새로운 창을 띄우면 나는 부모가 되고, 열린 새창은 자식이 된다.
close()
- 열었던 새 창을 닫는 역할을 수행하는 함수
- 창을 닫을 때에는 누굴 닫아야 하는지 알아야 하기 때문에 변수가 있어야 한다.(오픈된 창(window.open) 변수에 담아준다.)
- 보통 닫기를 눌렀을 때 닫기보다는 일정 시간이 지났을 때 또는 어떤 행동을 했을 때 닫아주는 경우가 많다.
<body>
<button onclick="myWindow()">창 열기</button>
<button onclick="closeWin()">창 닫기</button>
</body>
<script>
function myWindow(){
win = window.open('https://www.w3schools.com/js/default.asp','',
'width=400, height=400, top=500, left=500');
}
function closeWin(){
win.close();
}
</script>부모창과 자식창
새 창을 열연 새 창은 "자식" 기존 창은 "부모"가 된다.
자식의 입장에서 부모창은 opener 라고 명명한다. (무언가를 오픈해주니까)
부모와 자식 사이에서는 다른 창이라고 하더라도 서로 데이터를 주고 받을 수 있다.
한 부모는 여러 자식을 가질 수 있기 때문에 자식을 변수에 담아 사용해야 하고,
자식은 한 부모만 가질 수 있기 때문에 opener 를 사용해주면 된다.
서로 데이터를 주고 받을 수 있기 때문에 서로의 함수에도 접근할 수 있는데, 아래 코드를 통해 살펴보자
🔽 자식 창
<body>
부모 창에서 받아온 값 : <input type="text" id="fromParent"/> <br/>
부모 창으로 보낼 값 : <input type="text" id="toParent"/?<br/>
<input type="button" value="보내기" onclick="sendVal()"/>
</body>
<script>
function sendVal(){
var op = document.getElementById('toParent').value;
// 부모의 값(fromChild)에 변수(op)를 넣어준다.
opener.document.getElementById('fromChild').value = op;
}
</script>🔽 부모 창
<body>
<button>창열기</button>
<button>창닫기</button> <br/>
<input type="button" value="보내기" onclick="sendVal()"/>
</body>
<script>
var btn = document.getElementsByTagName('button');
// 버튼을 눌러 click 이벤트 발생 시 자식창 열기
btn[0].addEventListener('click', function(){
win = window.open('자식창 주소', '타이틀', 'width=400', height=100');
});
// 버튼을 눌러 click 이벤트 발생 시 자식창 닫기
btn[1].addEventListener('click', function(){
win.close();
});
function sendVal(){
var val = document.getElementById('toChild').value;
// 부모창에서 입력한 값(val)을 자식의 변수에 넣어준다.
win.document.getElementById('fromParent;).value = val;
}
</script>
위 코드를 작성해주면 이렇게 부모창에서 보낸 값을 자식 창에서 확인할 수 있고,
자식 창에서 보낸 값을 부모 창에서 확인이 가능하다.
