TIL18⎟JavaScript : Coordinates

application programming interface

ex. 안드로이드나 맥 OS에서 제공하는 API를 이용하면 그것을 이용하여 간단하게 모바일 어플리케이션을 만들 수 있다.
유튜브에 있는 데이터를 받아와서 유튜브 어플리케이션도 만들 수 있다.

그래서 아래와 같이 다양한 API들이 있다.
DOM APIs,Network APIs,Graphics APIs,Audio/Video APIs,Device APIs,File APIs,Storage APIs...
​

WEB APIs

window에는
1. DOM(Document..)
(Document Object Model)
2. BOM(navigator, location, fetch, storage..)
(Browser Object Model)
3. JavaScript(Array, Map, Date..)

​
window는 global object
브라우저에서는 우리가 이용할 수 있는 기본 API를 제공하고 우리는 그 API를 호출하면서 브라우저에 있는 다양한 기능들을 쓸 수 있다.
우리가 웹페이지를 만들면 기본적으로 window는 global object이기 때문에 console.log(window.innerWidth);라 안하고 console.log(innerWidth)라고만 해도 출력된다.

window size, scrolling, load되었는지 안되었는지 이런걸 확인할 때 주로 많이 쓰임.

navigator : The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities.

A Navigator object can be retrieved using the read-only window.navigator property.

​
display window size

window.screen : 2560, 1440 :
모니터의 해상도, 즉 브라우저 바깥에 있는 아이들까지 다 합한 모니터 사이즈
window.outer: 2560, 1364 :
URL,TAP 전체적인 브라우저 사이즈
window.inner : 2560, 1285 :
보이는 웹페이지(document), 뿐만 아니라 스크롤바가 있다면 스크롤바가 표기되는 전체
documentElement.clientWidth : 2560, 1285
: 전체적인 페이지이긴 한데 만약 수직인 스크롤바가 있다면 스크롤바를 제외한 영역 사이즈

screen : 모니터 사이즈
outer : 페이지를 넘어선 브라우저 전체의 사이즈
inner : 브라우저 페이지가 표기되는 것 + 스크롤바가 있다면 스크롤바 포함
clientWidth : 스크롤바를 제외한 정말 순수 documnet page의 사이즈
**차이점을 아는 것이 중요!

​

coordinates

대부분의 자바스크립트 메서드는 다음 두 좌표 체계 중 하나를 이용한다.

• window 기준 – 전체 컨텐츠 영역(뷰포트)를 기준으로 현재 마우스 포인터의 위치를 반환. window 상단/왼쪽 모서리에서부터 계산 => clientX/clientY로 표시

• document 기준 – document 최상단(root)에서 position:absolute를 사용하는 것과 비슷하게 document 상단/왼쪽 모서리에서부터 계산 => pageX/pageY로 표시합니다.
  ​

client x,y 와 page x,y

어떤 스크롤링된 페이지가 있다고 했을 때,
사용자가 클릭했을 때 클릭 이벤트에 들어있는 client x,y의 값과 page x,y의 값이 다르다. 클릭을 하게 되면 등록한 리스너에 전달이 되는데, 이벤트에는 client x,y값이 들어있다. 즉, 이 값은 사용자가 보는 페이지와 상관없이 브라우저 window창에서 x와 y가 얼마나 떨어져 있는지가 전달된다.
page x,y는 client에 들어있는 사이즈가 아니라 페이지 자체에서 떨어져있는 x와 y를 의미. 즉, 여기서 페이지는 제일 위 우리 눈에 보이지 않는 저기 위에 있기때문에 y는 제일 위에서부터 여기까지(클릭한 때)까지 지정, x도.

client x,y : 브라우저 윈도우에 있는 좌표값에 해당하는 x,y
page x,y : 문서의 제일 시작점부터 x,y

​

Element.getBoundingClientRect()

요소가 브라우저 위에서 즉 window위에서 얼마나 멀리 떨어져있는지, 크기는 얼마인지등을 알아낼 수 있다.

elem.top elem.left elem.width elem.height elem.right elem.bottom

원하는 속성을 각각 구할 수 있다!

❗️and its position relative to the viewport. This means that the rectangle's edges (top, left, bottom, and right) change their values every time the scrolling position changes.

JavaScript에서는 항상 x축과 y축으로부터 좌표가 계산되고
CSS에서는 제일 브라우저 오른쪽(right)과 밑(bottom)에서부터 지정이 되기에 헷갈릴 수 있음 주의

scrollBy(x, y)
scrollTo(x, y)
rabbit.scrollIntoView({behavior : 'smooth', block : 'center'})

​

What's the size of the displayed content?

Element.clientWidth Element.clientHeight

border,margin은 제외한 padding 값만을 가진, 순수 실제 content의 크기를 구하고 싶을 때

​

How much room does it use up?

HTMLElement.offsetWidth HTMLElement.offsetHeight

margin을 제외,
If you need to know the total amount of space an element occupies

📕Absolute Positioning Inside Relative Positioning

https://css-tricks.com/absolute-positioning-inside-relative-positioning/

script asyn 와 defer의 차이점

• body끝에 script를 넣었을 때,

parsing HTML->(page is ready)->fetching js->executing js
서버에서 js를 받아오는 fetching하는 시간도 기다려야하고, executing 실행시키는 시간도 기다려야함

• head끝에 script asyn를 넣었을 때,

html를 parsing하다, 발견한 후 병렬로 fetching하자 다운로드받고, 다운로드가 되었으면 blocked한다음 실행하고 나머지 html를 다시 parsing한다. body끝에 사용하는 것보다는 fetching이 parsing하는 동안 병렬적으로 일어나기 때문에 다운로드 받는 시간을 절약할 수 있지만 js가 html이 parsing되기도 전에 실행이 되기 때문에, js에서 ex.dom요소를 실행시키려는 부분이 html에서 아직 실행되지 않을 경우가 있을 수 있다. 또한 blocked되기 때문에 사용자가 페이지 로딩하는데 오래걸릴 수도 있다.

script defer을 넣었을 때 :
parsing을 하다가 js를 다운받자 명령만 시켜놓고 나머지 html를 끝까지 parsing하게 됨. 그 후 다운로드 된 js를 실행하게 됨. parinsg하는 동안 필요한 js를 모두 받아놓고 먼저 parsing해서 사용자에게 보여주고 그 다음 다운로드된 js를 바로 실행시켜 보여준다.

Window Load vs DOMContentLoaded

//only document
window.addEventListener('DOMContentLoaded', () => console.log('DOMContentLoaded');
});

//after resources (css, images)
window. addEventListener('load', () =>
console.log('load');
});

//
js loaded (js file에 저장한 것먼저 loaded)
DOMContentLoaded
load

이 순서로 loaded되고 출력되는 걸 알 수 있다

DOMContentLoaded 이벤트는 html만 완료가 되면 호출이 된다. 그래서 페이지에 resource가 많은 경우는 DOMContentLoaded가 빨리 호출이 되고 load는 조금 나중에 모든 리소스가 다 다운된 다음에 이벤트가 발생

defer :
html를 parsing 하는 동안 필요한 js다운로드 받아놓고 page를 보여준다음 js를 실행시켜준다
async :
다수의 script를 작성하면 먼저 다운로드된 js를 먼저 보여준다. 작성 순서에 상관없이 다운로드가 먼저 된다면 먼저 보여줌. 순서가 중요한 작업이라면 추천x
defer은 parsing하는동안 필요한 js를 모두 다운로드한 후, 실행시킨다. 가장 효율적이고 안전하다고 할 수 있다.