브라우저 객체
: JavaScript 코드에서 웹 브라우저 환경에서 실행되는 객체들의 집합
- 브라우저 객체는 자바스크립트의 내장 객체
- 내장 객체에는 브라우저 객체와 Array, Math, Date 등의 객체가 있음
- 이 객체들은 전역 객체인 window객체에 속해 있고, 웹 페이지를 통해 접근 가능
- 계층 구조를 이룸
◉ 관련된 객체들
- window 객체 : 브라우저 창을 나타내는 객체
- 브라우저 창이 열릴 때마다 하나씩 만들어짐
- 브라우저 창 안의 요소 중 최상위 요소
- 웹 페이지의 전역적인 속성과 메서드를 제공
- document 객체 : 웹 페이지의 문서를 나타내는 객체
- 웹 문서마다 하나씩 존재
- <body> 태그를 만나면 생성
- HTML 문서의 정보가 담겨 있음
- 웹 페이지의 구조와 내용에 접근하고 조작하는 기능 제공
- navigator 객체 : 브라우저의 정보와 기능에 대한 정보를 제공하는 객체
- history 객체 : 브라우저의 세션 기록을 관리하고, 앞뒤로 페이지를 이동하는 기능 제공
- 현재 창에서 사용자의 방문 기록 저장
- history.back() 과 history.forward() 로 이전과 다음 페이지로 이동
- location 객체 : 현재 페이지의 URL 정보를 제공하는 객체
- location.href를 통해 현재 페이지의 URL에 접근하거나 변경 가능
- screen 객체 : 사용자의 화면 정보를 제공하는 객체
window 객체
주요 속성
window.innerHeight,window.innerWidth: 내용 영역의 뷰포트의 높이와 너비 반환window.outerHeight,window.outerWidth: 브라우저 창의 바깥 높이와 너비 반환window.screenX,window.screenY: 브라우저 창의 왼쪽/위쪽 테두리가 모니터 왼쪽/위쪽 테두리에서 떨어져 있는 거리window.scrollX,window.scrollY: 스크롤했을 때 수평/수직으로 이동하는 픽셀 수window.name: 브라우저 창의 이름을 반환하거나 수정window.document,window.navigator, 'window.location: 현재 문서/브라우저정보/URL정보 객체
주요 메서드
window.alert(메시지): 경고창 표시window.confirm(메시지): 확인창(확인/취소 버튼) 표시window.prompt(메시지): 프롬프트 창 표시, 입력받은 텍스트 반환window.open(url, 창 이름, 창 옵션): 새로운 브라우저 창을 열고, 지정된 URL 로드// 예시 : 팝업 창 표시하기 window.open("notice.html", "pop", "width=500, height=400, left=100, top=200");- 왼쪽에서 100픽셀, 위에서 200픽셀 떨어진 위치에 가로 500픽셀, 세로 400픽셀인 팝업 창 열기
- 팝업 창 이름은 pop
window.close(): 현재 창 닫기<!-- 예시 : button 요소를 클릭하면 현재 창 닫음 --> <button onclick="javascript:window.close();"> 닫기 </button>window.scroll(x, y),window.scrollTo(x, y): 지정한 위치(좌표)까지 스크롤// 예시 : 문서 끝까지 스크롤 하는 방법 window.scrollTo(0, document.body.scrollHeight);- 브라우저 창을 세로로 문서(body요소)의 전체 높이만큼 스크롤
window.scrollBy(x, y): 현재 스크롤 위치를 기준으로 지정된 양(x, y)만큼 스크롤
history 객체
주요 메서드
history.back(): history목록에서 이전 페이지를 현재 화면으로 불러옴 (뒤로 가기 동작)history.forward(): history목록에서 다음 페이지를 현재 화면으로 불러옴 (앞으로 가기 동작)history.go(정수): history목록에서 지정한 정수만큼 상대적인 위치에 있는 페이지를 현재 화면으로 불러옴history.go(1);: 다음 페이지 가져오기history.go(-2);: 2번 뒤로가기한 페이지 가져오기
location 객체
주요 속성
location.href: 현재 문서의 URL 전체를 문자열로 반환하거나, 새로운 URL을 설정하면 이동console.log(location.href); // 현재 URL 출력 location.href = "https://new_url.com"; // 새로운 URL로 이동
주요 메서드
location.assign(url): 현재 문서에 새 문서 주소를 할당하여 새 문서를 가져옴location.replace(url): 현재 문서의 URL을 지우고 다른 URL의 문서로 교체location.reload(): 현재 문서를 다시 로드
href속성, assign()메서드, replace()메서드 차이점
공통점 : 새로운 URL을 지정하는 방법
- href : 새로운 URL을 지정하여 이동하며, 이동한 페이지가 히스토리에 기록
- assign(url) : 새로운 URL로 이동하며, 이동한 페이지가 히스토리에 기록
- replace(url) : 현재 페이지를 새로운 URL로 교체하며, 이동한 페이지가 히스토리에 기록되지 않음
즉, href와 assign()은 페이지 이동과 히스토리 기록 모두 수행하여 뒤로 가기를 누르면 이전 페이지로 이동 가능, replace는 페이지 이동은 수행하지만 히스토리 기록은 수행하지 않으므로 뒤로 가기를 눌러도 이전 페이지로 돌아갈 수 없음
개발, 분석 배운 내용 정리하기!