[JS] 10. BOM - window, location, history, navigator, screen

Kang So Hyun·2023년 4월 18일
0

1. window - 브라우저의 창을 의미하는 객체

📍 window 객체 속성

  • closed : 창이 닫혀 있는지 열려 있는지를 불표현식으로 반환. (닫혀 있으면 true반환, 열려 있으면 false반환)
  • innerHeight : 창의 콘텐츠 영역 높이를 반환 - 스크롤바나 제목표시줄 등은 제외
  • innerWidth : 창의 콘텐츠 영역 폭을 반환 - - 스크롤바나 제목표시줄 등은 제외
  • length : 현재 창의 아이프레임 개수를 숫자로 반환
  • outerHeight : 창의 모든 인터페이스요소(스크롤바등)을 포함한 높이를 반환
  • outerWidth : 창의 모든 인터페이스요소(스크롤바등)을 포함한 높이를 반환
  • pageXOffset : 현재 문서가 창의 왼쪽에서 얼마나 스크롤되어 있는지를 픽셀수치로 반환
  • pageYOffset : 현재 문서가 창의 위쪽에서 얼마나 스크롤되어 있는지를 픽셀수치로 반환
  • parent : 아이프레임으로 되어 있는 페이지의 부모가되는 페이지를 선택하는 속성
  • screenLeft : 창이 화면 좌측을 기준으로 얼마큼 떨어져 있는지 좌표를 반환
  • screenTop : 창이 화면 상단을 기준으로 얼마큼 떨어져 있는지 좌표를 반환
  • screenX : 창이 화면 좌측을 기준으로 얼마큼 떨어져 있는지 좌표를 반환
  • screenY : 창이 화면 상단을 기준으로 얼마큼 떨어져 있는지 좌표를 반환
  • self : 현재 창을 반환
  • top : 현재 창의 최상위 브라우저 창을 반환

📍 window 객체 메서드

  • close() : 창을 닫는 메서드 - 매개변수는 없음
  • moveBy(x,y) : 창을 상대적으로 이동시키는 메서드
  • moveTo(x,y) : 창을 절대적으로 이동시키는 메서드
  • open(url,name,specs,replace) : 새창 혹은 새탭으로 창을 여는 메서드
  • print() : 현재 창을 인쇄할수 있는 창을 띄워주는 메서드
  • resizeBy(w,h) : 창 사이즈를 상대적으로 변경시키는 메서드
  • resizeTo(w,h) : 창 사이즈를 절대적으로 변경시키는 메서드
  • scrollBy(x,y) : 창의 스크롤바 위치를 상대적으로 이동시키는 메서드
  • scrollTo(x,y) : 창의 스크롤바 위치를 절대적으로 이동시키는 메서드
  • stop() : 창이 로드되는 것을 멈추는 메서드 - ie 및 edge는 사용 불가능

📍 window 매개변수

  • URL : 창으로 띄울 주소를 담는 매개변수
  • name : 창이 띄워질 위치(대상)을 지정하는 매개변수
    → name 값 : blank(기본값), parent, self, top, name
  • specs : 띄워지는 창에 대한 옵션을 설정, 쉽표로 아이템을 구분해서 작성
    → 예시 : window.open('주소', '_blank', '옵션=값,옵션=값', true);

→ specs 값 (대부분의 값은 yes, no, 1, 0으로 지정)
| height : 새 윈도우의 높이
| width : 새 윈도우의 너비
| location : 주소 입력창 유무
| menubar : 메뉴 유무
| resizable : 화면 크기 조절 가능 여부
| status : 상태 표시줄 유무
| toolbar : 툴바 유무
| left: 왼쪽 기준 팝업 위치 지정
| top: 상단 기준 팝업 위치 지정
| scrollbars: 스크롤바 유무
| fullscreen: 풀스크린 출력
| channelmode: 채널모드 출력

  • replace : url로 작성한 주소를 새항목으로 만들지, history 목록의 현재 항목으로 대체할지를 지정
    → true : history 목록의 현재 문서로 대체
    → false : 주소를 새 항목으로 대체

2. location - 브라우저의 주소표시줄을 의미하는 객체

📍 window 객체 속성

  • hash : url의 해시기호(#)를 포함하여 주소를 설정하거나 반환
  • href : 현재 페이지의 전체 url을 설정하거나 반환
  • host : url의 호스트명과 포트를 설정하거나 반환
  • hostname : url의 호스트명을 설정하거나 반환
  • origin : url의 프로토콜, 호스트명, 포트번호를 반환하는 속성
  • port : 서버가 url에 사용하는 포트번호를 설정하거나 반환
  • pathname : url의 경로이름을 설정하거나 반환
  • search : ?(물음표)를 포함하여 url의 쿼리 문자열을 설정하거나 반환
  • protocol : 콜론을 포함하여 현재 url의 프로토콜을 설정하거나 반환

📍 window 객체 메서드

  • assign(url) : 주소표시줄의 주소를 매개변수의 url주소로 변경하는 메서드. 현재 문서 기록에서 url 남음. 원래 페이지로 복귀 가능.
  • replace(url) : 주소표시줄의 주소를 매개변수의 url주소로 변경하는 메서드. 현재 문서 기록에서 url 제거. 원래 페이지로 복귀 불가.
  • reload : 주소표시줄을 새로고침하는 메서드

3. history - 브라우저의 주소기록을 보관하는 객체

📍 history 객체 속성

  • length : 현재 브라우저 창의 기록 목록에 있는 URL 수를 반환

📍 history 객체 메서드

  • back() : 현재 브라우저 창의 기록 목록 중 이전 목록으로 보내는 메서드
  • forward() : 현재 브라우저 창의 기록 목록 중 다음 목록으로 보내는 메서드
  • go(n) : 현재 브라우저 창의 기록 목록에서 매개변수 숫자를 이용하여 그 목록으로 보내는 메서드(음수는 이전으로 보내고, 양수를 작성하면 다음으로 처리함.)

4. navigator - 브라우저 정보를 뜻하는 객체

📍 navigator 객체 속성

  • appCodeName : 브라우저의 코드명을 반환
  • appName : 브라우저의 이름을 반환
  • appVersion : 브라우저의 버전 정보를 반환
  • cookieEnabled : 브라우저에서 쿠키 사용 여부를 지정하는 불표현식(true/false)을 반환
  • geolocation : 사용자의 위치를 찾는데 사용할 수 있는 Geolocation 객체를 반환
  • language : 브라우저의 언어버전을 반환
  • onLine : 브라우저가 온라인 또는 오프라인 모드인지 불표현식(true/false)을 반환
  • platform : 브라우저가 컴파일되는 플랫폼을 반환
  • product : 브라우저의 엔진 이름을 반환
  • userAgent : 브라우저에서 서버로 보낸 사용자 에이전트 헤더의 값을 반환

📍 navigator 객체 메서드

  • javaEnabled() : 브라우저에서 java를 사용할 수 있는지 불표현식(true/false)으로 반환

5. screen - 운영체제의 화면

📍 screen 객체 속성

  • availHeight : 운영체제의 작업표시줄과 같은 인터페이스 기능을 제외한 사용자 화면의 높이를 픽셀 단위로 반환
  • availWidth : 운영체제의 작업표시줄과 같은 인터페이스 기능을 제외한 사용자 화면의 폭을 픽셀단위로 반환
  • colorDepth : 이미지를 표시하기 위한 색상 팔레트의 비트심도(픽셀 당 비트수)를 반환
  • height : 사용자의 화면 총 높이를 픽셀단위로 반환
  • pixelDepth : 방문자 화면의 색상 해상도(픽셀 당 비트)를 반환
  • width : 사용자의 화면의 총 폭을 픽셀단위로 반환
profile
중국어랑 코딩하기 (❛ ֊ ❛„)

0개의 댓글