반응형 javascript58 배열 유사배열 1 2 3 4 5 6 7 8 9 10 const btns = document.getElementsByClassName("btn"); btns.forEach(btn => { btn.addEventListener("click", () => console.log("클릭")) }); 버튼을 클릭할때마다 콘솔이 찍히게 하려하지만 위의 코드는 에러가 납니다. btns가 배열처럼 보이지만 사실은 유사배열이기 때문에 forEach같은 배열 메서드를 사용할 수 없습니다. Array.isArray(btns) 을 찍어보면 false가 나오는걸 보실 수 있습니다. Array.from(btns).forEach(btn => { btn.addEventListener("click", () => console.log("클릭")) }).. 2020. 6. 3. pushState SPA 방식으로 만들어진 사이트들은 새로고침이 일어나지 않고 내용을 바꿀 수 있습니다. 하지만 url은 바뀌지 않아서 이를 해결할 수 있는 방법이 History API의 pushState() 입니다. history.pushState(state, title, url); state에는 저장할 데이터 객체, title에는 브라우저 제목, url은 바뀔 주소입니다. state와 title은 넣을 값이 없으면 null을 넣어도 됩니다. pushState로 주소를 바꾼 후 뒤로가기를 하면 popState라는 이벤트가 발생합니다. window.addEventListener('popstate', function () { console.log('popstate::', history.state) }); pushState의.. 2020. 5. 22. es6로 0부터 n까지 숫자범위 배열 생성 var arr = []; for(var i = 0; i i); var range2 = [...Array(5).keys()].map(i => i); var range3 = Array.from({length: 5}, (v,i) => i); // 모두 [0,1,2,3,4] 출력 2020. 5. 12. IntersectionObserver 이용한 인피니티 스크롤 예제 IntersectionObserver는 대상 요소와 뷰포트의 교차 영역에 대한 변화를 비동기적으로 감지하도록 도와줍니다. 비동기로 실행되기 때문에 scroll 이벤트 요소에서 발생하는 이벤트가 연속으로 호출되는 문제가 없습니다. const io = new IntersectionObserver(callback, options) io.observe(element) // 대상 요소 감시 시작 const io = new IntersectionObserver(entries => { if (entries[0].intersectionRatio { entries.forEach(entry => { if (entry.isIntersecting) { add(); } }); }); io.observe(ele); functio.. 2020. 4. 3. getBoundingClientRect getBoundingClientRect는 요소의 크기와 뷰포트를 기준으로 한 위치값을 객체로 반환합니다. let elem = document.querySelector('div'); let rect = elem.getBoundingClientRect(); for(var key in rect) { if( typeof rect[key] !== 'function' ){ let para = document.createElement('p'); para.textContent = `${key} : ${rect[key]}`; document.body.appendChild(para) } } References https://developer.mozilla.org/en-US/docs/Web/API/Element/getBou.. 2020. 3. 23. 프로그래머스 레벨1 완주하지 못한 선수 프로그래머스 레벨 1 문제입니다. 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요. 제한사항 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다. 예제 #1 leo는 참여자 명단에는 있지만, 완주자 명단에는 없.. 2020. 3. 17. 이전 1 ··· 3 4 5 6 7 8 9 10 다음 반응형
