생각보다 정리할 내용이 많아서 이틀에 걸쳐서 모르는 부분을 정리 했다.
new 연산자와 생성자 함수
new 연산자와 생성자 함수는 유사한 객체 여러 개를 만들기 위해 사용한다.
생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없지만,
생성자 함수의 첫 글자는 대문자로 시작한다는 것과 new 연산자를 붙여 실행한다는 관례를 따른다.
function User(name){
//this={}; 빈 객체가 암시적으로 만들어진다.
//새로운 프로퍼티 this에 추가한다.
//property:값이 다른 값과 연관되어 있을 때 부르는 말로, 예시를 들어보면 문자열에 length라는 property가 포함되어 있고 문자열 안에 있는 문자의 양을 정수로 나타낸 값을 담고 있다.
this.name=name;
this.isAdmin=false;
//return this;
}
let user=new User("보라");
//let user={
//name:"보라",
//isAdmin:false};
alert(user.name);
alert(user.isAdmin);Intersection Observer
scroll 이벤트는 성능에 악영향을 줄 수 있는데, 이는 스크롤 시 짧은 시간 내에 수많은 이벤트가 동기적으로 발생할 수 있고, 페이지 내의 요소가 여러 이유로 scroll 이벤트를 리스닝하기 때문에 무수히 많은 콜백이 실행되면 메인 스레드에 부하를 줄 수 있다.
Intersection Observer API는 루트 요소와 타겟 요소의 교차점을 관찰하고, 타겟 요소가 루트 요소와 교차하는지 아닌지를 구별하는 기능을 제공한다. scroll 이벤트와 다르게 교차 시 비동기적으로 실행되며 reflow를 발생시키지 않아서 성능상 유리하다.
getBoundingClientRect
getBoundingClientRect() 메서드는 요소의 크기와 뷰포트에 상대적인 위치 정보를 제공하는 DOMRect 객체를 반환한다. (DOMRect은 직사각형의 크기와 위치를 나타내는 기능을 한다.) 반환값은 top or y, bottom, left or x, right, width, height가 있다.
data-
화면에 안 보이게 글이나 추가 정보를 요소에 담아 놓을 수 있다.
HTML 문법
HTML 문법은 간단하다.
<article
id="ID"
data-index="1"
data-parent="data">
</article>JavaScript에서 접근하기
JavaScript에서 이 속성 값들을 읽는 방법
var article =document.getElementById('ID');
article.dataset.id //"ID"
article.dataset.index //"1"
article.dataset.index=5 //"5"CSS에서 접근하기
데이터 속성은 HTML 속성이기 때문에 CSS에서도 접근할 수 있다.
article::before{ /*before은 'article'의 시작부분(<article>부분에 영향을 주고, */
content:attr(data-parent); /*content 속성의 attr은 해당 속성의 속성값을 표시한다.*/
}querySelector
querySelector() 함수는 선택자에 부합하는 요소 중 첫 번째 요소만을 반환한다.
querySelectorAll() 함수는 선택자에 부합하는 모든 요소를 반환한다.
addEventListener
지정한 유형(Element, Document, Window 등)의 이벤트(scroll , load등)를 대상이 수신할 때마다 호출할 함수를 설정한다.
window.innerHeight
윈도우의 내부 높이를 픽셀 단위로 반환한다. 윈도우 내부의 높이는 브라우저의 창 틀을 뺀 내용과 스크롤을 포함한 크기이다.
창 크기를 변경하는 명령어는 resizeTo(가로, 세로)이다. 이때 가로, 세로의 값은 outerWidth, outerHeight이다. outer는 브라우저의 창 틀의 길이도 포함한다.
setTimeout
특정 코드나 함수를 의도적으로 지연시킨 뒤 실행하고 싶을 때 사용하는 함수로, 호출될 콜백함수와 지연시간의 두 개의 인자를 설정하여 사용한다.
setTimeout(function() {//code
},delay);