브라우저 관련 객체

브라우저 관련 객체

window	브라우저 차이 열릴 때마다 하나씩 생성, 브라우저 객체 중 최상위 요소
document	웹 문서마다 하나씩 있으며 body 태그를 만나면 생성, HTML 문서 정보가 담겨 있음
navigator	현재 사용하는 브라우저의 정보가 담겨 있음
history	사용자의 방문 기록이 담겨 있음
location	현재 페이지의 URL 정보가 담겨 있음
screen	현재 사용하는 화면 정보를 다룸

 

window 객체 - 프로퍼티

document	브라우저 창에 표시된 웹 문서에 접근 가능
innerHeight	내용 영역의 높이
innerWidth	내용 영역의 너비
localStorage	웹 브라우저에서 데이터를 저장하는 로컬 스토리지 반환
location	window 객체의 위치 또는 현재 URL
name	브라우저 창의 이름을 가져오거나 수정
screenX, screenY	브라우저 창의 왼쪽(위쪽) 테두리가 모니터에서 떨어져 있는 거리
scrollX, scrollY	스크롤 했을 때 수평(수직)으로 이동하는 픽셀 수
sessionStorage	웹 브라우저에서 데이터를 저장하는 세션 스토리지 반환

window.프로퍼티 명 으로 사용

 

window 객체 - 메소드

alert()	알림창 표시
close()	현재 창 닫기
confirm()	[확인], [취소] 버튼이 있는 창 열기
open()	새로운 창 열기
prompt()	입력할 수 있는 창 열기

window.메소드 명 으로 사용

==> window는 기본 객체이므로 window.이 생략 가능

 

open() 예시

window.open("https://www.naver.com", "popup", "width=400, height= 500, left=100, top=200");
//왼쪽에서부터
//팝업창에 표시할 문서나 사이트의 경로 / 창 이름 / 팝업창의 너비, 높이, 팝업창이 왼쪽에서 떨어진 너비, 위에서 떨어진 높이

open() 결과

 

 

history 객체

방문한 사이트의 주소가 배열 형태로 저장

읽기 전용이므로 수정 불가

프로퍼티	length	현재 브라우저 창의 history 목록 개수
메소드	back()	history 목록에서 이전 페이지 불러오기
	forward()	history 목록에서 다음 페이지 불러오기
	go()	상대적 위치의 페이지를 불러옴. go(1)은 다음 페이지, go(-1)은 이전 페이지

 

 

location 객체

현재 문서의 URL 주소 정보

프로퍼티	host	URL의 호스트 이름과 포트 번호
	href	전체 URL
	port	URL의 포트번호
	protocol	URL의 프로토콜
	search	URL 중 ?의 뒷부분, 검색 내용
메소드	reload()	현재 문서 다시 불러오기
	replace()	현재 문서 URL을 지우고 다른 URL의 문서로 교체

 

  <script>
    document.write("<p>href는 " + location.href + "</p>");
    document.write("<p>host는 " + location.host + "</p>");
    document.write("<p>protocol은 " + location.protocol + "</p>");
    document.write("<p>port는 " + location.port + "</p>");
  </script>
  <button onclick="location.replace('https://www.naver.com')">네이버로 이동하기</button>
  <!-- replace()는 아예 새로운 주소로 대체되므로 브라우저 창의 [뒤로가기] 버튼이 비활성화 됨-->

location 객체 활용

 

screen 객체

사용자의 화면 정보

프로퍼티	availHeight	UI 영역을 제외한 높이
	availWidth	UI 영역을 제외한 너비
	height	UI 영역을 포함한 높이
	width	UI 영역을 포함한 너비
메소드	lockOrientation()	화면 방향 잠금
	unlockOrientation()	화면 방향 잠금 해제

 

    document.write("<p>UI 영역 제외 높이는 " + screen.availHeight + "px</p>");
    document.write("<p>UI 영역 제외 너비는 " + screen.availWidth + "px</p>");
    document.write("<p>UI 영역 포함 높이는 " + screen.height + "px</p>");
    document.write("<p>UI 영역 포함 너비는 " + screen.width + "px</p>");

screen 프로퍼티

 

 

 

 

 

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 교재를 참고하여 작성했다.