안녕하세요, 코린이의 코딩 학습기 채니 입니다.
개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.
BOM (Browser Object Model)
navigator
- browser에 대한 정보를 가진 객체
- userAgent
HTML 코드
<button onclick="test1();">navigator</button>
Javascript 코드
const test1 = () => {
console.log(navigator);
};
brower에 대한 정보를 리턴해주는 것을 확인할 수 있습니다.
userAgent 속성
console.log(navigator.userAgent);
location
- 브라우저 주소 표시줄 관련 정보를 가진 객체
HTML 코드
<button onclick="test2();">location</button>
Javascript 코드
const test2 = () => {
console.log(location);
};
브라우저 주소 표시줄 관련 정보를 리턴해주는 것을 확인할 수 있습니다.
브라우저 주소 표시줄에 query (?type=abc&query=안녕)와 hash/bookmark(#qwerty)를 추가해보고 location을 가져와봤습니다.
const {href, protocol, hostname, prot, origin, pathname, search, hash} = location;
console.log('href : ', href);
console.log('protocol : ', protocol);
console.log('hostname : ', hostname);
console.log('port : ', port);
console.log('origin : ', origin);
console.log('pathname : ', pathname);
console.log('search : ', search);
console.log('hash : ', hash);
각 속성 값들을 가져와 출력해보았습니다.
location.href
- 페이지 이동 처리
HTML 코드
<button onclick="test3();">location.href</button>
Javascript 코드
const test3 = () => location.href = "https://naver.com";
지정한 url로 이동 되는 것을 확인할 수 있습니다.
location.reload()
- 페이지 새로고침
HTML 코드
<button onclick="test4();">location.reload()</button>
Javascript 코드
const test4 = () => location.reload();
history
- 브라우저 방문 기록 관리 객체
HTML 코드
<button onclick="test5();">history</button>
Javascript 코드
const test5 = () => {
console.log(history);
};
history.forward()
- 앞으로 가기 (다음 페이지 불러오기)
HTML 코드
<button onclick="test6();">history.forward()</button>
Javascript 코드
const test6 = () => history.forward();
history 상 다음 페이지를 불러오는 것을 확인할 수 있습니다.
history.back()
- 뒤로 가기 (이전 페이지 불러오기)
HTML 코드
<button onclick="test7();">history.back()</button>
Javascript 코드
const test7 = () => history.back();
history 상 이전 페이지를 불러오는 것을 확인할 수 있습니다.
history.go(n)
- 양수 : 제공된 숫자만큼 앞으로 가기
- 0 : 새로고침
- 음수 : 제공된 숫자만큼 뒤로 가기
HTML 코드
<button onclick="test8();">history.go()</button>
Javascript 코드
const test8 = () => {
const n = prompt('이동할 페이지에 대해 정수로 입력하세요');
history.go(n);
}
새로고침
screen
- os에 연결된 모니터(hw) 관련 정보를 가진 객체
HTML 코드
<button onclick="test9();">screen</button>
Javascript 코드
const test9 = () => {
console.log(screen);
};
const {width, height, availWidth, availHeight, availLeft, availTop} = screen;
console.log('width : ', width);
console.log('height : ', height);
console.log('availWidth : ', availWidth);
console.log('availHeight : ', availHeight);
console.log('availLeft : ', availLeft);
console.log('availTop : ', availTop);
width, height는 가로, 세로 해상도를 나타냅니다.
availWidth, availHeight는 작업 표시줄을 제외한 가로, 세로 해상도를 나타냅니다.
availLeft, availTop 또한 듀얼 모니터 여부, 메인 모니터 서브 모니터에 따라 달라집니다.
300 * 300 팝업창을 화면 정가운데 위치 시키기
const left = availLeft + (width - 300) / 2;
const top = availTop + (height - 300) / 2;
open("", "popup", `width=${300}px, height=${300}px, left=${left}, top=${top}`);
