Javascript
-
[ JS ] 요소의 좌표Javascript/이론 2023. 4. 15. 21:32
요소의 좌표는 창 기준(client), 문서 기준(page) 이 두 기준을 따라 계산됩니다. 즉 문서 기준인 pageX, pageY는 스크롤에 영향받지 않지만 clientX, clientY는 스크롤에 따라 그 값이 변경됩니다. 요소의 좌표 얻기 요소의 좌표는 element.getBoundingClientRect()를 통해 얻는 DOMRect 클래스의 인스턴스를 통해 얻을 수 있습니다. DOMRect의 주요 프로퍼티는 아래와 같습니다. x와 y – 요소를 감싸는 네모의 창 기준 X, Y 좌표 width와 height – 요소를 감싸는 네모의 너비, 높이(음수도 가능) 아래는 파생 프로퍼티입니다. top과 bottom – 요소를 감싸는 네모의 위쪽 모서리, 아래쪽 모서리의 Y 좌표 left와 right – ..
-
[ JS ] 브라우저 창 사이즈와 스크롤Javascript/이론 2023. 4. 15. 20:57
브라우저 창 사이즈 JS에서 브라우저 창의 너비와 높이를 얻기 위해서는 document.documentElement.clientHeight와 같이 window가 아닌 document.documentElement를 사용합니다. 그 이유는 window.innerHeight와 같은 방식이 스크롤바를 차지하는 영역을 고려하지 않기 때문입니다. window.inner... : 전체 창 너비 document.documentElement.client... : 전체 창 너비 중 스크롤바가 차지한 영역을 제외한 너비 문서 전체의 크기(가려져 있는 부분까지)를 구할 경우에 아래와 같이 구해야합니다. 그 이유는 아주 오래전부터 논리적이지 않은 방식이로 이어져온 것이기에 알아볼 필요가 없으니 그냥 받아들이시면 됩니다. let..
-
[ JS ] 요소의 크기와 상대위치Javascript/이론 2023. 4. 15. 20:29
위 이미지 중 첫번째 이미지는 브라우저에 출력되는 요소의 예시이며 각 css 프로퍼티를 나타냅니다. 두 번째 이미지는 js에서의 크기, 위치에 관련된 프로퍼티를 나타냅니다. js에서 요소의 크기, 위치를 나타내는 각 프로퍼티에 대해 정리하기전에 offsetParent에 대해 알아두어야 합니다. offsetParent는 offsetTop, offsetLeft 등의 프로퍼티가 계산되는 기준이될 수 있는 가장 가까운 조상요소이며, 아래 세 가지의 기준 중 하나에 속합니다. CSS position 프로퍼티가 absolute나 relative, fixed, sticky인 가장 가까운 조상 요소 나 , 혹은 1. 크기 1) offsetWidth, offsetHeight : border를 포함한 최외각 너비와 높이 ..
-
[ JS ] trigger HTTP requestJavascript/이론 2023. 3. 22. 22:25
1. XMLHttpRequest obj 사용 XMLHttpRequest의 instance 생성 open() 메서드를 통한 서버 연결. GET, POST 등 method와 url을 인자로 전달. setRequestHeadr() 메서드를 통한 헤더 설정 XMLHttpRequest의 obj의 propety인 onreadystatechange를 통한 response 정의 send()메서드를 통한 request 전송 const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://example.com/api/data'); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onreadystatechange = fu..
-
[ JS ] 이벤트 버블링(Bubbling) & 캡쳐링(Capturing)Javascript/이론 2023. 3. 11. 01:15
js 에서 요소에 발생한 이벤트의 전파는 bubbling, capturing 두 페이즈로 진행될 수 있습니다. bublling은 말단 요소, 즉, target 요소에서 window 요소까지 올라가며 해당 이벤트가 트리거되며, capturing은 그 반대로 window요소에서부터 target요소까지 내려오며 이벤트가 트리거 됩니다. Bubbling var divs = document.querySelectorAll("div"); divs.forEach((div) => { div.addEventListener("click", logEvent); }); function logEvent(event) { console.log(event.currentTarget); } 위는 핑크색 영역을 선택한 결과입니다. 콘솔의 ..
-
[ JS ] Layered illustJavascript/실습 2023. 3. 1. 19:25
layered illust는 '마우스와 상호작용하는 이미지를 만들어 볼까?'라는 생각이 들어 만들게 되었습니다. 요소에 적용된 동작은 마우스 오버에 따른 회전, 마우스 아웃에 따른 바운스 효과, 캔버스를 통한 비 내리는 효과 등이 있습니다. See the Pen illust_layered by OnnJE (@ogtitle) on CodePen. 목표로한 동작은 요소가 마우스를 바라보는 방향으로 3차원 회전을 하는 것입니다. 이러한 3D Rotation을 구현하기 위해서 생각한 방법은 요소 앞에 그리드 패널을 씌워 마우스의 위치를 특정하고 각 그리드에 대응하는 변환을 적용하는 것입니다. 따라서, 그리드 패널을 가운데 그리드가 (0, 0)인 좌표 평면으로 취급하여, 각 그리드에 마우스 오버 이벤트를 추가해 ..
-
[ JS / Canvas ] 비 내리는 효과 - rain effectJavascript/실습 2023. 2. 19. 17:53
이번에 만든 것은 canvas를 통해 구현한 비 내리는 효과입니다. 클래스를 통해 구현했으며, 총 두 가지 느낌을 표현해봤습니다. 인스턴스 생성 시 총 세 가지의 인자(효과를 입힐 대상 요소, 빗줄기 수, 빗줄기의 속도)를 받도록 했으며 이 중 빗줄기 수와 빗줄기의 속도는 디폴트값을 주어 필요시 조절하도록 했습니다. See the Pen rainEffect by OnnJE (@ogtitle) on CodePen. 1. Constructor constructor(target, intensity = 5, speed = 5) { //add canvas that same size as target element this.target = target; this.targetStyle = getComputedStyl..