[TIL] 210926

Lee Syong·2021년 9월 26일

JavaScript TIL

TIL

목록 보기

39/204

📝 오늘 한 것

WEB APIs / screen.width / outerWidth / innerWidth / document.documentElement.clientWidth / element.getBoundingClientRect() / offsetX(Y) / screenX(Y) / clientX(Y) / pageX(Y) / scrollBy() / scrollTo() / scrollIntoView() / DOMContentLoadead / load / defer

📖 학습 자료

드림코딩 '프론트엔드 필수 브라우저 101' 강의

📚 배운 것

1. WEB APIs

1) 필기

2) 실습

📌 윈도우 사이즈 표기 (맨 앞의 window는 생략 가능)

모니터 크기 : window.screen.width (height)
브라우저 크기 : window.outerWidth (outerHeight)
(스크롤 포함) 웹 페이지 크기 : window.innerWidth (innerHeight)
(스크롤 미포함) 웹 페이지 크기 : document.documentElement.clientWidth (clientHeight)

const all = document.querySelector('.all');

function changeSize () {
  all.innerHTML = `
  window.screen: ${screen.width}, ${screen.height}<br/ >
  window.outer: ${outerWidth}, ${outerHeight}<br/ >
  window.inner: ${this.innerWidth}, ${innerHeight}<br/ >
  documentElement.clientWidth: ${document.documentElement.clientWidth}, ${document.documentElement.clientHeight}`;
}

changeSize();

window.addEventListener('resize', () => changeSize());

📌 클릭한 곳의 좌표 표기

element.getBoundingClientRect()

DOMRect 객체를 반환한다. 여기에는 요소의 크기와 함께 뷰포트를 기준으로 하는 '요소'의 상대적인 위치에 대한 정보가 담겨 있다

top, left, bottom, right 값을 갖는다. 이때 bottom과 right은 '요소'의 bottom과 right을 의미하며, CSS에서의 bottom, right이 의미하는 바와 다르다.

DOMRect 객체의 bottom, right 값은 브라우저의 왼쪽과 위쪽을 기준으로 해당 요소가 얼만큼 떨어져 있는지를 계산해 그 거리만큼의 값을 가진다.
mouseEvent.clientX(Y)

'마우스 이벤트(클릭, 더블클릭 등)가 발생한 곳'이 브라우저의 X축, Y축으로부터 얼마나 떨어져 있는가
mouseEvent.pageX(Y)

'마우스 이벤트(클릭, 더블클릭 등)가 발생한 곳'이 문서가 시작하는 X축, Y축으로부터 얼마나 떨어져 있는가

const box_7 = document.querySelector('.box-7');

box_7.addEventListener('click', event => {
  console.log(box_7.getBoundingClientRect()); // 브라우저 기준, 요소의 위치 (클릭한 지점의 위치 x)

  console.log(`offset: ${event.offsetX}. ${event.offsetY}`) // 클릭한 요소 기준, 클릭한 지점의 위치
  console.log(`screen: ${event.screenX}, ${event.screenY}`); // 모니터 기준, 클릭한 지점의 위치
  console.log(`client: ${event.clientX}, ${event.clientY}`); // 브라우저 기준, 클릭한 지점의 위치
  console.log(`page: ${event.pageX}, ${event.pageY}`); // 문서 기준, 클릭한 지점의 위치
});

📌 윈도우 스크롤링 (특정 위치, 특정 요소로 이동하기)

const by = document.querySelector('.by'); // by 버튼
const to = document.querySelector('.to'); // to 버튼
const into = document.querySelector('.into'); // into 버튼

by.addEventListener('click', () => scrollBy({top: 100, left: 0, behavior: 'smooth'}));
// y축으로 100px만큼 부드럽게 이동

to.addEventListener('click', () => scrollTo(0, 100));
// y축으로부터 100px 지점으로 한번에 이동

into.addEventListener('click', () => box_7.scrollIntoView({behavior: 'smooth', block: 'end', inline: 'nearest'}));
// box_7 요소로 이동 → behavior: 부드럽게 이동, block: 수직 정렬, inline: 수평 정렬

📌 좌표 찾아 007 (마우스 좌표 따라 움직이는 원 만들기)

position: absolute left(top) 값 = clientX(Y) 값

🔎 HTML

<html>
  <body>
    <div class="line horizon"></div>
    <div class="line vertical"></div>
    <img src="img/target.png" class="circle">
    <span class="coord"></span>
  </body>
</html>

🔎 CSS

body {
  background-color: black;
}

.line {
  background-color: white;
  position: absolute;
}

.horizon {
  width: 100%;
  height: 1px;
  top: 50%;
}

.vertical {
  width: 1px;
  height: 100%;
  left: 50%;
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 여기서 50%는 해당 요소의 크기의 50%를 말한다 */
}

.coord {
  color: white;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(30px, 30px);
  font-size: 30px;
}

🔎 javascript

const horizon = document.querySelector(".horizon");
const vertical = document.querySelector(".vertical");
const circle = document.querySelector(".circle");
const coord = document.querySelector(".coord");

document.addEventListener("mousemove", (event) => {
  console.log(event.clientX, event.clientY);

  const x = event.clientX;
  const y = event.clientY;

  horizon.style.top = `${y}px`; // 수평선엔 top 값만
  vertical.style.left = `${x}px`; // 수직선엔 left 값만

  circle.style.left = `${x}px`;
  circle.style.top = `${y}px`;

  coord.style.left = `${x}px`;
  coord.style.top = `${y}px`;

  coord.innerHTML = `${x}px, ${y}px`;
});