브라우저 관련 객체
window : 브라우저 창이 열릴 때마다 하나씩 만들어진다. 브라우저 창 안의 요소 중에서 최상위에 있다.
document : 웹 문서마다 하나씩 있으며 <body> 태그를 만나면 만들어진다. HTML 문서의 정보가 담겨 있다.
navigator : 현재 사용하는 브라우저의 정보가 들어 있다.
history : 현재 창에서 사용자의 방문 기록을 저장한다,
location : 현재 페이지의 URL 정보가 담겨 있다.
screen : 현재 사용하는 화면 정보를 다룬다.
브라우저 관련 객체 - window 객체
window 객체에는 많은 프로퍼티와 메서드가 있다.
이번 포스팅에서는 자주 사용하는 윈도우의 open()메소드와, close()메소드에 대해 살펴보겠다.
window객체의 open()메소드는 창을 여는 메서드이다.
open메소드의 두번째 인수인 "notice"는 창의 이름을 지정해주는것인데, 이름을 지정해줘야 계속 창이 열리는것을 막을 수 있다.
close()메소드는 창을 닫는 메소드이다. 닫기버튼을 누르면 공지사항 팝업창이 닫힌다.
브라우저 관련 객체 - location 객체, screen 객체
* location 객체
- 현재 문서의 URL 주소 정보가 담겨 있음
- 이 정보를 편집해서 브라우저 창에 열 사이트/문서 지정
* screen 객체
- 사용자의 화면 크기, 정보
팝업창을 화면 가운데, 중앙에 표시하고 싶다면 screen객체의 프로퍼티를 이용해서 화면가운데 표시할 수 있다.
사용할 프로퍼티는 availHeight과 availWidth를 사용한다.
- availHeight : UI영역(예를 들어 윈도우의 작업표시줄이나 Mac의 독)을 제외한 영역의 높이를 나타낸다.
- availWidth : UI 영역을 제외한 내용 표시 영역의 너비를 나타낸다.
팝업창을 가운데에 표시하기 위해선 left좌표값과 top좌표값을 구해야한다.
left 좌표 값은 사용할 수 있는 가용 너비값(availWidth)에서 팝업창의 너비값을 뺀뒤, 그 값에서 반으로 나눈값이다.
top좌표값은 가용 높이값(availHeight)에서 팝업창의 높이값을 뺀뒤 반으로 나눈값이다.
ex) 팝업창 가로 500px, 세로 400px일때 팝업창을 화면 가운데 표시하기
left 좌표 값 : (screen.availWidth - 500) / 2
top 좌표 값 : (screen.availHeight - 400) / 2
* Reference : Do it! HTML+CSS+자바스크립트 웹 표준의 정석
'JavaScript' 카테고리의 다른 글
| [에러해결] Uncaught TypeError: $.ajax is not a function (0) | 2023.04.25 |
|---|---|
| [JavaScript] 자바스크립트와 객체 (Date, Math) (0) | 2022.08.15 |
| [JavaScript] 자바스크립트 이벤트 (0) | 2022.08.15 |
| [JavaScript] 함수(일반함수, 익명함수, 즉시실행함수, 화살표함수) (0) | 2022.08.14 |
| [JavaScript] 자바스크립트 기본 문법 (반복문) (0) | 2022.08.13 |
