반응형 전체 글269 [JS] 이벤트(Event) Event Object(이벤트 객체)란 무엇인가? 이벤트 객체란, 이벤트를 발생시킨 요소와 발생한 이벤트에 대한 정보를 제공하는 것을 말한다. 이벤트가 발생하면, 이벤트 객체는 동적으로 생성되어, 이벤트 핸들러에 인자로 암묵적으로 전달된다. 1. 이벤트 추가하기 - addEventListener() 객체에 이벤트를 추가하려면 addEventListener() 메소드를 사용합니다. element.addEventListener(type, eventListener); - type : 이벤트 타입 - eventListener : 이벤트가 발생했을 때 실행할 함수 2. 이벤트 제거하기 - removeEventListener() 이벤트를 삭제할 때는 removeEventListener() 메소드를 사용합니다. el.. 2023. 10. 28. [JS] DOM : 크기와 좌표 window.innerWidth / innerHeight Viewport(현재 화면)의 크기를 얻음 window.scrollX / scrollY Viewport의 현재 스크롤 위치를 얻음 (페이지 좌상단 기준) E.scrollLeft / E.scrollTop 스크롤 요소의 현재 스크롤 위치를 얻음 (요소의 좌상단 기준) window.el = document.querySelector('.scrollElement') el.scrollLeft // 수평 스크롤 위치 el.scrollTop // 수직 스크롤 위치 window.scrollTo() / 스크롤요소.scrollTo() 지정된 위치로 스크롤 하기 대상.scrollTo(X, Y) // 또는 대상.scrollTo({ left: x좌표, top: y좌표, b.. 2023. 10. 28. [JS] dom DOM이란 무엇인가? DOM은 Document Object Model의 약자입니다. DOM은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미합니다. 조금 좁은 의미로 본다면 document 객체와 관련된 객체의 집합을 의미할 수도 있습니다. DOM은 어떻게 생겼을까? DOM을 제대로 이해하기 위해서는 tree라는 자료구조를 이해할 필요가 있습니다. DOM이 tree 형식의 자료구조를 가지고 있기 때문입니다. Javascript에서 DOM의 특정 요소(element)를 찾는 방법 1. getElementById() [HTML] Div1입니다. Div2입니다. [JS] function getDiv1() { const div1 = document.getElementById('div_1'); .. 2023. 10. 28. [JS] fetch 메소드 fetch('https://jsonplaceholder.typicode.com/posts/1') .then(res => console.log(res)) fetch 매서드는 JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드이다. fetch 함수로 HTTP 요청하기 1. GET: 존재하는 자원을 요청 2. POST: 새로운 자원 생성 요청 3. PUT: 존재하는 자원 변경 요청 4. DELETE: 존재하는 자원 삭제 요청 2023. 10. 28. 이전 1 ··· 42 43 44 45 46 47 48 ··· 68 다음 반응형