프론트엔드 공부한 거 정리하기

기하 프로퍼티 기하 프로퍼티는 픽셀(px) 단위로 측정. offset 요소 element의 거리 offsetParent : position이 설정되어 있는 조상 요소 반환. 없으면 body 반환 offsetTop : offsetParent 기준 top까지의 거리 offsetLeft : offsetParent 기준 left까지의 거리 요소의 크기 offsetWidth : width + padding + border + scrollbar offsetHeight : height + padding + border + scrollbar clientWidth : width + padding clientHeight : height + padding scrollTop : 세로로 스크롤되면서 가려진 영역의 높이를 반환 ..

event.clientX, Y 브라우저 기준 마우스 x, y 좌표 (스크롤 인식하지 않음) event.offsetX, Y 요소 기준 마우스 x, y 좌표 (스크롤 인식) event.pageX, Y 페이지 기준 마우스 x, y 좌표 (스크롤 인식) event.screenX, Y 디바이스 기준 마우스 x, y 좌표 (스크롤과 상관없음)

submit 이벤트와 메서드 정보를 검증 후 서버로 전송하기 때문에 클릭할 버튼에 적용 x 폼 요소에 적용 .submit() : 메서드. onsubmit : submit 속성 addEventListener('submit', 콜백함수) : submit 이벤트 속성 checkbox & radio 이벤트와 메서드 정보를 검증 후 서버로 전송하기 때문에 클릭할 버튼에 적용 x 폼 요소에 적용 'change' : 이벤트, 폼 요소 상태 변경이 끝날 때 (input, button, select) check 관련 속성 .checked : 체크 상태를 true, false로 반환 select 관련 속성 .selectedIndex : select option의 인덱스 번호 = 선택된 option의 인덱스 반환. .opt..

form 요소 탐색하기 form은 document.forms의 구성원으로 이름이나 순서를 지정해 탐색할 수 있다. document.forms[0] // 문서 내 첫 번째 폼 document.forms.[name속성] // 해당 name을 속성으로 가진 form 폼의 요소도 forms.elements로 탐색할 수 있다. const form = document.forms[0] // 문서의 첫번째 폼 탐색 const input = form.elements.[요소name] // 해당 name 속성을 가진 요소 탐색 radio 버튼은 name이 같아야하기 때문에 여러 개를 제어해야하는 상황이 생긴다. 탐색할 요소가 여러 개인 경우 유사 배열로 반환하는 성격을 이용해 작성할 수 있다. const form = doc..

객체가 원시데이터와 다른 점은 원시데이터는 값 그대로를 저장하고 복사하는 반면 객체는 참조에 의한 복사로 기존 객체에 저장된 값을 참조할 수 있는 값이 복사된다는 것이다. 예를 들어 변수를 복사할 때 메모리는 fruit라는 변수와 그에 대한 값 apple을 한 공간에 저장하고 복사된 변수 red와 값 apple 또한 메모리의 한 공간에 저장된다. 즉, 상자도 두개 내용물도 두개가 되는 것. apple이 담긴 fruit 상자 apple이 담긴 red 상자 하지만 객체는 다르다. 애초에 생성될 때 변수 fruit는 메모리의 어느 공간에 저장되고 name:apple이 되는 객체와 프로퍼티를 참조할 수 있는 값이 저장된다. 즉, 변수 자체에 객체가 담겨있는 게 아니라 변수는 단지 객체에 접근할 수 있는 권한과 ..

자바스크립트는 계속 발전하고 진화하는 언어로 기존에 없던 기능들이 계속 추가된다. 추가된 기능들은 분석을 거쳐 ECMAScript의 명세서에 등록되는데 먼저 새롭게 생겼다고 해서 먼저 등록되지는 않는다고 함. 바벨 명세서에 등록이 된 후에 재빠르게 새로운 기능을 활용하기 위해 코드를 작성한다 해도 모든 브라우저에서 지원하는 것은 아니기에 구현이 가능한 코드로 바꿔줘야 제대로 작동한다. 이 경우 사용하는 것을 바벨이라고 한다. 트랜스파일러 바벨은 코드를 번역해주는 트랜스파일러 프로그램으로 개발자의 컴퓨터에서 작동하며 작성한 코드를 구 표준을 준수하는 코드로 재작성해주는 역할을 한다. 웹팩(webpack) 같은 모던 프로젝트 빌드 시스템은 코드가 수정될 때마다 자동으로 트랜스파일러를 동작시켜줌. 폴리필(po..

이벤트란? - 무언가 일어났다는 신호 시스템에서 일어나는 사건(action) 혹은 발생(occurrence) 표준 이벤트 모델 eventTarget.addEventListener() 대상 : Element, Document, Window, XMLHttpRequest ... .addEventListener('이벤트 이름', 콜백함수 event handler); 고전 이벤트 모델 .onclick(function(){}) onblur() onmouseenter... (on 접두어) .on('click', function(){}) .on('blur', function(){}) .on('mouseenter', function(){}) ... 인라인 이벤트 모델 DOMContentLoad 자바스크립트는 위에서 아래..

JS에서의 클래스 제어 js에서의 클래스 제어 버튼 텍스트1 텍스트2 텍스트3 .classList.add() : 클래스 속성 추가 document.body.classList.add('bg') const btn = document.querySelector('.btn') btn.classList.add('style') .classList.remove() : 클래스 속성 삭제 btn.classList.remove('style'); .classList.toggle() : add, remove의 반복 btn.addEventListener('click', () => btn.classList.toggle('style')) // btn을 클릭하면 style 추가 한번 더 클릭하면 style 제거 .classList.c..

HTML 표준 모델에서 data - 사용자 정의 이름 data-color, data-name, data-size ... JavaScript에서 .dataset 사용자 정의 속성에 접근 가능 .dataset.color, .dataset.name, .dataset.size, ...

DOM 객체 문서 객체 모델 (The Document Object Model)을 말하며, HTML, XML 문서의 프로그래밍 인터페이스이다. 자바스크립트가 DOM구조에 접근하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 함. DOM은 웹페이지 내 모든 콘텐츠를 객체로 나타내주며 document 객체를 사용해 수정이 가능하다. { document 객체 } 웹 페이지의 진입점 역할을 하며 document 지시자를 작성해 페이지 내 모든 것을 수정할 수 있음. 페이지 내 특정 노드 탐색 script내에서 사용하기 위해 HTML 구조에 있는 요소를 불러와야하는데, 아래 코드를 통해 불러올 수 있음. 변수나 상수에 대입해서 사용하는 것을 권장. document.getElementById('id') : id ..