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 ] rotate3d 값 얻기Javascript/이론 2023. 2. 8. 13:55
JS를 통해 요소의 rotate3d 프로퍼티를 얻기 위해서 만든 클래스입니다. 1. Constructor constructor에서는 transform property를 얻고자 하는 요소를 parameter로 두었습니다. 따라서 클래스 성성시 요소를 받아 요소의 matrix3d 데이터를 저장합니다. class Transform { constructor(ele) { this.ele = ele; this.matrix3d = window .getComputedStyle(ele) .getPropertyValue("transform") // column priority .split("(")[1] .split(")")[0] .split(",") .map((ele) => Number(ele)); } } 2. Metho..
-
[ JS ] Date 객체와 메서드Javascript/이론 2023. 1. 1. 19:04
1. 객체 생성 1) 인수 없이 호출 현재 날짜 및 시간이 저장된 객체 반환 let date = new Date(); // Sun Jan 01 2023 17:54:39 GMT+0900 (한국 표준시) // 현재 날짜 및 시간이 저장된 객체 반환 2) 숫자 인수를 전달하여 호출 UTC 기준 1970년 1월 1일 0시 0분 0초에서 date 객체 생성시 전달한 arg 밀리초 후의 시점이 저장된 객체 반환 let date = new Date(24 * 3600 * 1000); console.log(date) // Fri Jan 02 1970 09:00:00 GMT+0900 (한국 표준시) // UTC 기준 1970년 1월 1일 0시 0분 0초에서 date 객체 생성시 전달한 arg 밀리초 후의 시점이 저장된 객..
-
[ JS ] 표준 입력 - process.stdinJavascript/이론 2022. 12. 29. 14:30
먼저 짚고 넘어가야할 것은 process.stdin stream은 표준 입력 데이터를 읽기위해 사용되는 Node.js의 내장 stream이다. 실제로 브라우저에서는 사용할 수 없고 window.prompt, window.alert 등을 사용해야한다. process.stdin.setEncoding('utf8') process.stdin의 인코딩 방식을 세팅. 주로 모든 유니코드 문자를 나타낼 수 있는 UTF-8을 사용한다. process.stdin.on('data', dat a => { ... } ) 데이터를 수신할 때 마다 호출되는 이벤트 리스너이다.콜백 함수로 넘겨지는 'data' 인자는 수신받은 데이터를 담고있는 buffer 객체이다. * process.stdin은 읽기 전용 스트림이며 표준 출력을 ..