yeji

if (window.NodeList && !NodeList.prototype.forEach){ NodeList.prototype.forEach = Array.prototype.forEach; }

querySelector getElementById VS querySelectorAll getElementsByClassName 노마드코더님의 강의를 듣다가 과제를 수행하던 중 getElementsByTagName('h2'); 로 이벤트를 추가했다. 그런데 title.addEventListener is not a function 이라 오류가 나왔다. 그래서 다시 querySelector('h2')로 바꾸고 해보니 다시 됐다. 여러 요소를 선택하는 메소드 뒤에는 addEventListener를 붙일 수 없다고 추측했다. querySelector와 getElementById는 단일 DOM 객체를 불러오지만 복수 선택 메소드들은 NodeList를 가져오기 때문이라고 함. 해결방법 1) 해결방법은 NodeLis..

top버튼 몸체인 span을 하나 만든다...! 그리고 css로 예쁘게 꾸며주고, 동작하게 만들려면 span에게 id나 class를 준 뒤 그 값을 jquery에서 동작하게 만든다. ex) span class = "top-btn"; $('top-btn').on('click',function(){ const htmloffset = $('html').offset(); $('html,body').animate({ scrollTop : htmloffset.top }, 400 ); }); html body 자체의 offset.top값을 구해서 탑 버튼을 클릭했을 때 제일 위로 올라가게끔한다. 단! 여기서 중요한건, animate를 써야 스르륵 움직이는 효과를 느낄 수 있다.

setTimeout 일정시간 후 함수를 실행한다. setTimeout(fn, delay); setTimeout(funciton() {console.log('setTimeout')}, 1000); // 1초후 setTimeout 출력 setInterval 일정시간마다 함수를 실행한다. setInterval(fn, delay); setInterval(function() {console.log('setInterval')}, 1000) // 1초마다 setInterval 출력 clearInterval setInterval로 반복하고 있는걸 멈추게 한다. clearInterval(setInterval로 생성된 변수); var count = 0; var repeat = setInterval(function(){ c..

기본 크기 - $대상.width() - $대상.height() 기본 크기 + padding - $대상.innerWidth() - $대상.innerHeight() 기본 크기 + padding + border - $대상.outerWidth() - $대상.outerHeight() 기본 크기 + padding + border + margin - $대상.outerWidth(true) - $대상.outerHeight(true) [참고자료] 자바스크립트 + jQuery 완전정복 스터디 도서

getBoundingClientRect() 함수는 Viewport의 시작지점을 기준으로한 상대좌표라고 할 수 있습니다. viewport는 현재 사용자가 보는 브라우저의 화면입니다. 이 함수는 엘리먼트의 크기 좌표를 나타내는데 bottom, height, left, right, top, width, x, y 이렇게 많은 정보를 갖고 있습니다. top or y // 화면 상단 부터 대상의 처음 위치 값 bottom // 화면 상단 부터 대상의 끝 위치 값 left or x // 화면 좌측 부터 대상의 처음 위치 값 right // 화면 우측 부터 대상의 끝 위치 값 width // 대상의 길이 height // 대상의 높이

eq() 함수는 선택 요소의 index번째 요소를 선택한다. Index 는 '0' 부터 시작한다. index() 함수는 선택 요소에서 인자의 index 번호를 반환 즉, index()는 오로지 숫자만 반환해 준다. 몇번째에 당신이 찾고자 하는 요소가 있다라고 eq(index) : jquery 객체를 반환하다. 특정 엘리먼트의 :eq(index) 'index' 번째의 영역을 반환한다. Index 는 '0' 부터 시작한다. 출처 : http://dailylife8282.blogspot.com/2016/11/javascript-index-eq.html

event.preventDefault() 는? preventDefault 를 이해하기 위해서는 a 태그를 유심히 봐야 합니다. 위 슬라이드에 표시된 a 태그는 내부적으로 href="#" 속성을 가지고 있습니다. href 속성은 웹브라우저에게 a 태그 클릭시 이동하여야할 페이지를 나타냅니다. 예를 들면) yeji블로그 처럼 사용합니다. 위 a 태그는 click 이벤트 또한 가지고 있기 대문에 a 태그를 클릭했을 때는 두가지 행동을 하게 됩니다. 첫번째 click 이벤트를 실행합니다. 두번째는 브라우저에게 href 에 표시된 곳으로 이동하도록 합니다. href="#" 속성을 넣은 이유는 a 태그에는 click 이벤트가 있으니 click 이벤트만 실행하고 웹브라우저는 이동하지 말아라 하는 의도로 설정한 값입니..