반응형

Window 객체의 프로퍼티

[광고 누르면 오늘의 행운 상승!!]

  • Explorer9 이전 : 인터넷 익스플로어 고유의 문서 객체모델 이용
  • Explorer9 이전 : 다른 웹 브라우저에서 사용되는 객체 프로퍼티와 동일한 방법 사용

웹 브라우저 창의 크기(브라우저 창의 UI 요소 포함)

var windowdWidth = window.outerWidth;
var windowdHeight = window.outerHeight;

 

웹 브라우저 창의 크기(브라우저 창의 UI 요소 제외)

var webViewWidth = window.innerWidth;
var webViewHeight = window.innerHeight;

 

창의위치 정보_ 모니터 좌측 상단부터 브라우저 창까지의 거리 반환

var windowPosX = window.screenX;
var windowPosY = window.screenY;

 

웹 브라우저 창 내부에서 스크롤 등의 조작을 통해 얼마나 이동했는지 파악

var scrollX = window.pageXoffest;
var scrollY = window.pageYoffest;

// 웹 문서 내부에서 특정 이미지 부분을 확대해 관찰할 수 있는 기능 구현할 때 중요

주의점

※ 위의 프로퍼티들은 읽기전용으로 브라우저 창의 크기 또는 위치 변경은 좋지 않기 때문에
    창의 크기와 위치를 변경하지 않는 방식으로 코드를 수정해야 한다.※

팝업 윈도우 생성

  • 부정적인 인식이 강함 → 사용자가 보고 있는 또는 보고자 하는 창을 가림 → 광고로 가득찬 팝업 윈도우 수십개가 동시 다발적으로 뜸

  • 팝업 윈도우를 차단하는 기능은 웹 브라우저의 기본 기능이 됨

  • 웹 문서 로딩과 함께 뜨는 팝업 윈도우는 기능을 상실함

윈도우를 생성하는 방법

  • window 객체의 open 메소드 사용
var newWindow = window.open("login/index.html" , "Login", "width = 500, height = 350,
menubar = yes, location = yes, resizable = yes, scrollbars = yes, status = yes");

login/index.html : 새로 생성된 창에서 열 HTML 페이지
Login : 새로 생성된 창의 이름
3번째 인자 : 창의 속성

 

윈도우의 생성

window.addEventListener("load", init, false);
//윈도우가 로딩이 완료되었으면 init 함수를 호출해라.
//웹 문서에 로딩이나 클릭과 같은 이벤트가 발생했을 때 처리하는 코드

function init(){
	var p = document.getElementsByTagName("p");
	// 요소명이 p인 요소를 모두 선택하여 변수 p에 할당하라는 의미

	p[0].addEventListener('click', poenSub, false);
	p[1].addEventListener('click', poenSub2, false);
	// HTML 문서 내부에 p요소가 2개 -> 변수 p는 배열로 선택된 요소를 받음
	// 첫 번째 p 요소를 클릭하면 openSub함수 호출
	// 두 번째 p 요소를 클릭하면 openSub2함수 호출
	function openSub(){
		var w = window.open("sub.html", "sub", "width = 500, height = 350, 
		menubar = yes, location = yes, resizable = yes, scrollbars = yes, status = yes");
		//openSub 함수 내부에 window 객체의 open 메소드가 있음
		//새 창에서 열릴 HTML 문서의 URL, 생성할 창의 이름, 창의 속성
		//생성된 창 객체는 변수w에 할당
	}
	
	function openSub2(){
		var w = window.open("sub2.html", "sub2", "width = 400, height = 350, 
		menubar = yes, location = yes, resizable = yes, scrollbars = yes, status = yes");
		//넓이와 창의 이름을 제외하면 위 코드와 동일
	}
}

 

윈도우의 수정

window.addEventListener("load", init, false);

function init(){
	var p = document.getElementsByTagName("p");

	p[0].addEventListener('click', poenSub, false);
	p[1].addEventListener('click', poenSub2, false);

	function openSub(){
		var w = window.open("sub.html", "sub", "width = 500, height = 350, 
		menubar = yes, location = yes, resizable = yes, scrollbars = yes, status = yes");
		//openSub 함수 내부에 window 객체의 open 메소드가 있음
		//새 창에서 열릴 HTML 문서의 URL, 생성할 창의 이름, 창의 속성
		//생성된 창 객체는 변수w에 할당
	}
	
	function openSub2(){
		var w = window.open("sub2.html", "sub", "width = 400, height = 350, 
		menubar = yes, location = yes, resizable = yes, scrollbars = yes, status = yes");
		//새로 생성하는 창의 이름을 기존 창의 이름과 같은 것으로 설정한 것
		//open sub.html 과 open sub2.html 텍스트를 차례로 클릭한 결과
		//-> 새로운 창이 생성되는 것이 아니라 openSub 함수에서 생성한 창에 sub2.html이 로딩됨
	}
}

 

window 객체의 close 메소드

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
			<h1>sub.html</h1>
			<p>close window</p>
			<script>
					var closeP = document.getElementsByTagName('p');
					closeP[0].addEventListener('click', closeWindow, false);

					function closeWindow(){
								window.close(); //현재 창을 닫는 역할
					}
			</script>
	</body>
</html>

alert

  • 경고 상자 생성
  • 실제 개발에는 거의 사용하지 않으나 디버깅 용으로 사용

→ window.alert("Hello World"); OR alert("Hello World");

window 객체 → 전역객체

  • JavaScript 내부에서 생성된 전역 변수 → window 객체의 프로퍼티
    ※ 전역 객체를 다음과 같이 설정하면 어디에서도 전역 변수를 선언할 수 있음
window.myVar = "global variable";
반응형

'5. 웹 프로그래밍 > 3. JavaScript' 카테고리의 다른 글

배열의 원소 접근 [JavaScript][배열원소]  (0) 2020.03.19
배열 [JavaScript][배열 리터럴][Array]  (0) 2020.03.19
문서객체모델 DOM [JavaScript]  (0) 2020.03.17
Math 객체 [삼각함수][난수][JavaScript]  (0) 2020.03.15
Date 객체/정규 표현식 [시간][JavaScript]  (0) 2020.03.15

+ Recent posts

티스토리툴바