TIL/HTML, CSS, JS 이것저것24 JS30 - Follow Along Link Highlighter JS30 22강을 진행하면서 배운 내용을 정리해두려 합니다. 1. getBoundingClientRect() https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect Element.getBoundingClientRect() - Web APIs | MDN The Element.getBoundingClientRect() method returns a DOMRect object providing information about the size of an element and its position relative to the viewport. developer.mozilla.org 이번 프로젝트를 진행하면서 특정 DOM 요소의.. 2021. 6. 21. JS30-Local storage, Mouse Move, Sort JS30 15~17강을 진행하면서 배운내용을 정리해두려 합니다. 1. This와 Event.target은 다를수 있다. ${plate.text} const itemsList = document.querySelector('.plates'); itemsList.addEventListener('click', handleChecked) function handleChecked(e) { console.log(this, e.target) //this는 ul e.target은 input과 label로 2개가 나온다. } 위의경우 this는 이벤트리스너가 붙은 것을 가리키며(이벤트를 감시하는 객체) e.target은 이벤트가 발생한지점을 나타낸다. 다만 currentTarget은 항상 this와 같음. https://.. 2021. 6. 16. JS30-Slide in on Scroll JS30 의 slide in on scroll을 진행하던준 알게된점을 정리해두려 합니다. 1.Debounce 함수 Debounce 함수는 JS에서 기본으로 지원하는 함수는 아니고 여러 라이브러리에서 지원하는 함수라고 한다. Debounce 함수의 기능은 입력이 단시간에 여러번 들어오더라도 한번만 입력되게 하는 것이다. 처음 해당함수를 보고 이해가 안가는 점이 너무 많았다 ㅜㅜ function debounce(func, timeout = 300){ let timer return (...args) => { clearTimeout(timer); timer = setTimeout(() => { func.apply(this, args) }, timeout); }; } function saveInput(){ con.. 2021. 6. 15. JS30-Video Player JS30 의 Video player를 해보던 중 놓쳤거나 개선이 필요했던 부분을 기록해두려 합니다. 1. data- 로 HTML 문서에서 attribute로 지정한 속성은 element.dataset으로 접근해서 활용이 가능하다. //원본 HTML TAG //« 10s //25s » // 내가 작성한 방식 const backSkipBtn = document.querySelector('button[data-skip="-10"]') const forwardSkipBtn = document.querySelector('button[data-skip="25"]') backSkipBtn.addEventListener('click', moveBack) forwardSkipBtn.addEventListener('cli.. 2021. 6. 12. JS30-Checkboxes JS30 10강의 체크박스 예제를 혼자 해봤는데 강의 본문에 나온 코드에 비해 너무 지저분하게 구현해서 몰랐던 부분들을 정리해두려 합니다. 이번 예제는 위에나온 체크박스를 쉬프트 누르고 클릭하면 그사이에 있는 것들이 전부 체크가 되도록 하는 것이었는데 아래는 내가 구현한 코드다. const inbox = document.querySelector(".inbox"); const checkLists = inbox.children //inbox내의 children 리스트 가져오기 const checkListsArr = Array.from(checkLists); // 배열메서드 활용을 위해 배열로 변환 let firstClickedCheckboxIndex; //처음 클릭한 체크박스 저장용 변수 let shiftH.. 2021. 6. 6. JS30 - HTML Canvas HTML에 Canvas 기능을 이용하여 화면상에 그림을 표현할수 있다는걸 처음 알게되어 간단히 정리해두려합니다. this is canvas HTML 캔버스 태그로 특정영역을 지정하면 해당 구역내에서 원하는 도형을 표현할 수 있다. const canvas = document.querySelector("#draw"); const ctx = canvas.getContext('2d'); //캔버스의 컨텍스트를 가져온뒤 canvas.width = window.innerWidth; canvas.height = window.innerHeight; //캔버스 크기를 조절하고 //컨텍스트에서 그려질 내용을 조작한다1(선의 색, 크기...etc). ctx.strokeStyle = '#BADA55'; ctx.lineJoin.. 2021. 6. 2. 이전 1 2 3 4 다음
