목록frontend/javascript (29)
DEVLOG
세팅을 하다보면 쿠키를 이용해 작업이 진행되어야하는 경우가 있다! 지금 하고 있는 이벤트의 경우 참여여부를 확인한다던지 뭐 그런경우..?! API접근전 상태를 체크해야할 때 주로 사용해주고 있다. 이벤트를 예로 들어 설명해보자! 쿠키 저장 setCookie 이벤트 참여가 완료되면 setCookie함수를 이용해 브라우저 쿠키에 저장 function setCookie(name, value, exp) { var date = new Date(); date.setTime(date.getTime() + exp * 24 * 60 * 60 * 1000); document.cookie = name + '=' + escape(value) + ';expires=' + date.toUTCString() + ';path=/';..
class값을 갖고있는지 판단하는 .hasClass() jQuery문법을 javascript로 바꾸려면?? classList를 활용하자! classList에는 add, remove, item, toggle, contains, replace등의 메서드들이 있다 이중에서 클래스가 포함되어있는지 확인해주는 contains를 메서드를 사용하면 아주우~ 쉽게 javascript로 바꿀 수 있다! if (!$('.event-btn').hasClass('on')) return; if (!document.querySelector('.event-btn').classList.contains('on')) return; 그 외 다른 메서드 살펴보고싶다면 요기↓↓↓ developer.mozilla.org/ko/docs/Web/..
addEventListener() 는 document내에 특정요소에 event를 등록할때 사용한다. var btn = document.querySelector(".btn1"); btn.addEventListener("click",btnClick,false); function btnClick(e){ alert("Click!"); } 단, 위와 같은 방법으로 작성하면 한개의 버튼에만 이벤트를 등록하는 방법이 된다. 그래서 querySelector로 여러개를 선택한 후 addEventListener를 적용하면? /*xxxxxxxxxxxxxxxx나쁜예xxxxxxxxxxxxxxxx*/ var btn = document.querySelectorAll(".btn1"); btn.addEventListener("clic..
includes는 배열안에 특정 문자열이 있는지 확인해주는 JavaScript 함수이다. 최근에 ES6나 리액트만 공부하면서 쓰다보니 아무 생각 없이 습관처럼 쓰다가 인터넷 익스플로러(Internet Explorer)에서는 동작하지 못하고 오류가 발생했다. 이 부분에 대해서는 같은 기능을 하는 다른 함수로 바꾸어서 해결할 수 있다. var weekTime = weekend.includes(dateSelVal) ? 16 : 18; ↓ var weekTime = weekend.indexOf(dateSelVal)>=0 ? 16 : 18; 이런식으로 배열.indexOf('확인할 문자') >= 0 을 이용해서 문자열이 존재하는지를 체크하는 것이다. indexOf는 찾고자 하는 문자열이 어디 위치하는지 반환해주는 ..