브라우저 객체란?
브라우저에 내장된 객체를 '브라우저 객체'라고 함.
window는 브라우저 객체의 최상위 객체이며, window 객체에는 하위 객체가 포함되어 있음.
계층적 구조이며, 이를 BOM(Browser Object Model)이라고 함.
window 객체: 브라우저 객체의 최상위 객체
| open("URL, "새 창 이름", "새 창 옵션") | URL 페이지를 새창 |
| alert(data) | 데이터로 된 경고창을 보여주며, 사용자가 [확인] 버튼을 누르면 다음 코드를 수행 |
| prompt("질문, "답변") | 질문과 답변으로 구성된 질의응답 창을 보여줌 |
| confirm("질문 내용") | 질문 내용으로 확인이나 취소 창을 보여주며, [확인] 버튼은 true, [취소] 버튼은 false를 반환 |
| moveTo(x,y) | 새 창의 위치를 이동 |
| resizeTo(width, height) | 새 창의 크기를 변경 |
| setlnterval(function() {자바스크립트 코드}, 일정 시간 간격) |
일정한 시간 간격으로 함수를 호출하여 코드를 실행 |
| setTimeout(function() {자바스크립트 코드}, 일정 시간 간격) |
1회 일정한 시간 간격으로 함수를 호출하여 코드를 실행 |
alert(), confirm(), prompt() 메서드와 관련해서는 이전 포스팅을 참고
[Javascript] alert() / confirm() / prompt()에 관해서
alert() 또는 window.alert() 확인 버튼을 가지며 메시지를 지정할 수 있는 경고 대화 상자를 띄움. window.alert("반갑습니다."); 모달 창으로 대화 상자가 닫힐 때까지 사용자가 프로그램 인터페이스의 나
starting-coding.tistory.com
open() 메서드
open("URL", "새 창 이름", "새 창 옵션")지정한 URL 페이지를 새 브라우저 창에 나타내며, 광고에 자주 사용되는 팝업 창을 만드는데 사용.
저의 티스토리 블로그 메인화면을 URL로 지정해보겠습니다.
이렇게 작성한 HTML 문서를 열었을 떄, 자동적으로 티스토리 블로그 메인화면 열립니다.
window.open( "https://starting-coding.tistory.com/" );
새창의 옵션
| width | 새 창의 너비 설정 |
| height | 새 창의 높이 설정 |
| left | 새 창의 수평(X축) 위치 설정 |
| top | 새 창의 수직(X축) 위치 설정 |
| scrollbars | 새 창의 스크롤바 숨김/노출 설정 숨김 = no / 노출 = yes |
window.open( "https://starting-coding.tistory.com/", "winopen", "width = 300, height= 400" );
html <a> 링크(href)에 window.open 메서드 함수를 적용
<body>
<a href="">다음 모바일</a><br>
<a href="">네이버 모바일</a><br>
<a href="">창닫기</a><br>
</body>
위에 소스 코드를 통해 웹 브라우저에 아래와 같이 출력
추가) html <a> 링크(href)에 대해서 알고가기
기본적으로 아래와 같이 링크를 사용하여 페이지를 이동하는 속성이지만,
<a href="https://www.tistory.com/"></a>
자바스크립트의 함수 등을 사용할 수 있습니다.
<a href="javascript:doSomething()">click me</a>
두 개의 함수를 생성하여,사용했습니다.
<a href="javascript:openWin ~~~~">
<a href="javascript:closeWin ~~~~">
<script>
let child;
const openWin = function(url) {
child = window.open(url, "winopen", "width = 300, height= 400" );
};
const closeWin = function() {
child.close();
}
</script>
</head>
<body>
<a href="javascript:openWin('https://daum.net')">다음 모바일</a><br>
<a href="javascript:openWin('https://www.naver.com/')">네이버 모바일</a><br>
<a href="javascript:closeWin()">창닫기</a><br>
</body>
응용) 새 창이 열린 후 5초뒤 자동적으로 꺼지는 프로그램
setTimeout() 메서드는 일정 시간이 지나면 코드를 실행하고 종료.
<script type="text/javascript">
'use strict';
const closeWin = function(url) {
let child = window.open( url, 'window', 'width = 640, height = 500');
setTimeout( function() {
child.close();
}, 5000);
}
</script>
</head>
<body>
<a href="javascript:openWin('https://daum.net')">다음 모바일</a><br>
<a href="javascript:openWin('https://www.naver.com/')">네이버 모바일</a><br>
<a href="javascript:closeWin()">창닫기</a><br>
</body>screen 객체
사용자의 모니터 정보(속성)를 제공하는 객체이며, 모니터의 너비나 높이 등을 반환
screen.속성;
screen 객체의 속성 종류
| screen.width | 화면의 너빗값 반환 |
| screen.height | 화면의 높잇값 반환 |
| screen.avilWidth | 작업 표시줄을 제외한 화면의 너빗값 반환 |
| screen.availHeight | 작업 표시줄을 제외한 화면의 높잇값 반환 |
| screen.colorDepth | 사용자 모니터의 컬러 bit 반환 |
사용자의 모니터의 너비와 높잇값을 자동으로 계산해서 중앙에 새 창이 나타내려면?
다음과 같은 그림을 머릿속이나 그려서 생각해보려고 할 겁니다.
새 창의 크기를 500 * 500으로 설정하고,
<script>
const openWin = function(url) {
let width = 500;
let height = 500;
};
</script>
(사용자의 모니터 크기 / 2) / (새 창의 크기 /2)를 통해
아래와 같은 위치를 구할 수 있습니다.
| left | 새 창의 수평(X축) 위치 설정 |
| top | 새 창의 수직(X축) 위치 설정 |
그러므로, 다음과 같은 함수를 생성할 수 있습니다.
<script>
const openWin = function(url) {
let width = 500;
let height = 500;
let left = (screen.width/2) - (width/2);
let top = (screen.height/2) - (height/2);
let option = "width = " + width + ",height = " + height + ",top = " + top + ",left = " + left;
window.open( url, "window", option);
};
</script>
댓글