[JavaScript (14)] Javascript window 객체 (setInterval, setTimeout, confirm, prompt, focus, blur 등)

[JavaScript (14)] Javascript window 객체 (setInterval, setTimeout, confirm, prompt, focus, blur 등)

안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 윈도우 객체 - 브라우저 객체 ] 입니다. : ) 

 

 

▶ 브라우저 객체

 - 자바스크립트를 통해 브라우저의 여러 기능들을 제어할 수 있다.
 - 전역 객체(global object)로 해당기능들을 제공 한다.

▶ Window 객체

 - 웹 브라우저의 창(window)을 나타내는 객체, 브라우저를 시작할 때 가장 처음 생성되는 객체이다.
 - 모든 객체, 전역 함수, 전역 변수, DOM등의 모든 요소들은 window 객체의 프로퍼티 이다.
 - window가 생성된 후 이 안에 다른 'window'나 'document'를 추가할 수 있다.

▶ frame

 - 'window'는 자식 'window'를 가질 수 있다.
 - frame은 각각 하나의 'window'라고 볼 수 있다.
ex)

<frameset>
  <frame src=''></frame>
  <frame src=''></frame>
</frameset>

▶ Window 객체 속성

 - document : Document 객체를 반환한다. (DOM에서 자세히 확인, https://goddaehee.tistory.com/237)
 - history : History 객체를 반환한다. (history 객체에서 자세히 확인)
 - location : Location 객체를 반환한다. (location 객체에서 자세히 확인)
 - navigator : Navigator 객체를 반환한다. (navigator 객체에서 자세히 확인)
 - screen : Screen 객체를 반환한다. (screen 객체에서 자세히 확인)

 - status : 상태바의 텍스트를 설정하거나 반환한다.
 - defaultStatus : 윈도우의 상태바의 기본 텍스트를 설정하거나 반환한다.
 - name : 윈도우의 이름을 설정하거나 반환한다.
 
 - parent : 현재 윈도우의 부모 윈도우 반환한다.
 - opener : 윈도우를 생성한 윈도우의 참조 반환한다.
 - top : 가장 위쪽의 브라우저 윈도우 반환한다.
 - self : 현 윈도우 반환한다.
 - length : 현 윈도우의 iframe의 개수 반환한다.
 - frames : 자식 윈도우 객체의 참조를 갖는 배열 반환한다.
 - frameElement : 현재 윈도우에 삽입된 iframe 요소 반환한다.

 - localStorage : 데이터를 저장하기 위해 사용되는 로컬 스토리지 객체의 참조 반환한다. 만료일이 없는 데이터를 저장한다.
 - sessionStorage : 데이터를 저장하기위해 사용되는 로컬 스토리지 객체의 참조 반환한다. 한개의 세션 데이터를 저장(브라우저 탭이 닫히면 사람짐)
  
 - screenLeft : 화면에 대한 윈도우의 수평 좌표 반
 - screenTop 화면에 대한 윈도우의 수직 좌표 반환한다.
 - screenX : 화면에 대한 윈도우의 수평 좌표 반환한다.
 - screenY : 화면에 대한 윈도우의 수직 좌표 반환한다.

 - innerHeight : 윈도우의 content 부분의 안쪽 높이 반환한다.
 - innerWidth : 윈도우의 content 영역의 안쪽 너비 반환한다.
 - outerHeight : 툴바와 스크롤바를 포함한 윈도우의 바깥쪽 높이 반환한다.
 - outerWidth : 툴바와 스크롤바를 포함한 윈도우의 바깥쪽 너비 반환한다.
 
 - pageXOffset(scrollX) : 윈도우의 상단 왼쪽 모서리에서 (수평으로) 스크롤 된 필셀 반환한다.
 - pageYOffset(scrollY) : 윈도우의 상단 왼쪽 모서리에서 (수직으로) 스크롤 된 필셀 반환한다.

▶ Window 객체 메서드

 - alert() : 확인 버튼이 있는 경고 박스 표시한다.
 - confirm() : 메시지, 확인, 취소 버튼이 있는 대화 상자 표시
 - prompt() : 방문자에게 입력을 요구하는 대화 상자 열기
 
 - focus() : 현재 윈도우에 포커스 주기.
 - blur() : 현재 윈도우에서 포커스 제거한다.
ex)

let input01 = document.getElementById("input01");
input01.addEventListener("focus", function( event ) {
  event.target.style.background = "pink";    
}, true);

input01.addEventListener("blur", function( event ) {
  event.target.style.background = "";    
}, true);

 - btoa() : base-64로 문자열 인코딩
 - atob() : base-64로 인코딩된 데이터 디코딩
ex)

console.log(btoa("abcde")); // YWJjZGU=
console.log(atob("YWJjZGU=")); // abcde

 - setInterval() : 지정된 시간 간격으로 함수 호출 또는 수식 실행 (밀리초)
 - clearInterval() : setInterval()로 설정된 타이머 제거
사용예시
1) 갤러리 형식의 이미지를 정해진 시간 간격으로 지속적으로 바꾸어 적용하는 경우
2) 일정 주기로 계속해서 서버와 통신이 필요한 경우
ex)

// setInterval 설정
const playIntervalAlert = setInterval(function() {
   alert('http://goddaehee.tistory.com');
}, 3000);
// setInterval 해제
clearInterval(playIntervalAlert);

 - setTimeout() : 지정된 밀리초 이후에 함수 호출 또는 수식 실행
 - clearTimeout() : setTimeout()로 설정된 타이머 제거
ex)
// setTimeout 설정
const playSetTimeoutAlert = setTimeout(function() {
   alert('타임아웃 예제');
}, 3000);
// setTimeout 해제
clearTimeout(playSetTimeoutAlert);

 - close() : 현 윈도우 닫기
 - open(URL,name,specs,replace) : 새 브라우저 창 열기, 브라우저 메뉴바, location bar 등의 브라우저 창의 옵션을 선택 할 수 있다.

 

1) URL

 - URL 지정 가능하다. URL이 지정되지 않으면 새창은 about:blank 로 열린다.

2) name(Optional)

 - target 속성 또는 window의 name 지정처리를 한다. 
2.1) _blank : 새창(기본값)
2.2) _parent : 부모 프레임으로 로드 된다. 
2.3) _self : 현재 페이지를 대체 한다.
2.4) _top : 로드할 수 있는 어떤 프레임이라도 대체 한다. 
2.5) name : 특정 윈도우 브라우저의 이름을 지정 한다.

3) specs(Optional, 콤마(,)로 분리)

 - 다양한 옵션이 있지만, 아주 기초적인 옵션만 확인 해보자.
3.1) height(pixels) : 높이값(최소 100)
3.2) left(pixels) : left 위치값(음수값 설정 불가능)

3.3) top(pixels) : top 위치값(음수값 설정 불가능)  
3.4) widh(pixels) : 너비값(최소 100)
3.5) menubar=yes|no|1|0 : 메뉴바 표시 여부.
3.6) status=yes|no|1|0 : 상태바 표시 여부.
3.7) titlebar=yes|no|1|0 : 타이틀바 표시 여부.

4) replace

 - 히스토리 목록에서 현재 URL을 대체 한다.
4.1) true - URL이 히스토리 목록에서 현재 도큐먼트를 대체한다.
4.2) false - URL이 히스토리 목록에 추가됨

ex)

function openLink(url)
{
   var features = ['left=10',
                'top=10',
                'location=0',
                'menubar=0',
                'resizable=0',
                'scrollbars=1',
                'status=0',
                'titlebar=0',
                'toolbar=0',
                'width=' + window.innerWidth - 300,
                'height=' + window.innerHeight - 150];

   window.open(url, "a", features.join(','));
}

 - createPopup() : 팝업 창 생성
   => 지원되지 않는 브라우저가 많다.

 - getComputedStyle() : 요소에 적용된 현 computed CSS 스타일 얻기
 - getSelection() : 선택된 텍스트의 범위를 나타내는 Selection 객체 반환
 - matchMedia() : 특정한 CSS 미디어 쿼리 스트링을 나타내는 MediaQueryList 객체 반환
ex)

window.getComputedStyle(document.querySelector('p')).getPropertyValue('font-size'); // 11.9px

 - moveBy(x, y) : 윈도우를 화면 현 위치에서 (x, y) 만큼 이동시킨다.
 - moveTo(x, y) : 윈도우를 화면 (x, y) 에 위치시킨다.
 - resizeBy(x, y) : 윈도우를 현재 넓이, 높이에서 지정된 픽셀(x, y)만큼 창 넓이, 높이 조절
 - resizeTo(x, y) : 윈도우를 지정된 픽셀로 (x, y)너비와 높이로 크기 조절
 - scrollBy(x, y) : 지정된 픽셀의 수만큼 도큐먼트 스크롤
 - scrollTo(x, y) : 지정된 좌표로 도큐먼트 스크롤

ex)

// popup 객체를 생성한다.
const popup01 = window.open('','','width=300px, height=300px');
popup01.moveTo(100, 100);   // 초기 위치 : x=100, y=100
 
// 호출시 세로(y 만큼) 이동
popup01.moveBy(0, 10);
popup01.moveBy(0, -10);

// 호출시 가로(x 만큼) 이동
popup01.moveBy(10, 0);
popup01.moveBy(-10, 0);

// 호출시 현재의 넓이, 높이에서 전달된 넓이, 높이만큼 조절
popup01.resizeBy(-100, -100); 
// 호출시 전달된 넓이, 높이로 사이즈 조절
popup01.resizeTo(200, 200); 

 - print() : 현재 창의 내용 인쇄
 - stop() : 창 로딩 중단