[FC] Window 객체 / Navigator Day-13

ex) main.js

// (브라우저) 안쪽의 넓이 값을 구할 때
console.log(window.innerWidth);

// (브라우저) 안쪽의 높이 값을 구할 때
innerHeight

// (브라우저) 프레임을 포함한 넓이의 반환
outerWidth

// (브라우저) 프레임을 포함한 높이값 반환
outerHeight

// 현재 스크롤 된 브라우저의 Y축 거리값
scrollY

// 현재 스크롤 된 브라우저의 X축 거리값
scrollX

ex) 브라우저 리사이즈 할 때 마다 값을 구할 때

window.addEventListener("resize", (e) => {
	console.log(window.InnerHeight);
})

ex) 스코롤 할 때 마다 거리값 구하기

window.addEventListener("scroll", (e) => {
	console.log(window.scrollY);
})

Navigator

현재 우리가 보고 있는 화면을 브라우저가 어떤 정보값을 보유하고 있는지 확인하고, 각 브라우저마다의 고유값을 이용해서 원하는 브라우저마다 특정 코드를 실행할 수 있는 조건까지 걸 수 있다.

ex) main.js

const version = navigator.userAgent;

console.log(version);

if(/whale/i.test(version)){
	console.log("whale 브라우저를 사용중..");
}

if(/edg/i.test(version)){
	console.log("Edge 브라우저를 사용중..");
}

// 크롬 브라우저를 사용하고 있는 걸 확인하는 또 다른 방법
const isWhale = /whale/i.test(version);
const isEdge = /edg/i.test(version);

if(!isWhale && !isEdge){
	console.log("Whale도 아니고, Edge도 아니고, 아마 Chrome을 사용하고 있습니다.);
};