오식랜드

참고 링크 : https://velog.io/@awesomelon/jquery-this.index%EB%A5%BC-javascript%EB%A1%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0 $(this).index()를 javascript로 만들기[JS] jquery를 쓰다보면 현재 클릭한 요소의 인덱스 값을 구하는 것을 많이 쓰는데 코드로 보면 다음과 같다. 어떻게 구현하는 걸까? 생각해보자. 우선 현재 클릭한 요소의 부모 요소부터 찾아야 할 듯 velog.io 나는 참고 링크에서 사용하는 부분만 긁어왔다. 원글이 친절히 순서대로 설명되어 있으니 한번은 읽어보길 권장합니당 getElementIndex : 현재 클릭한 요소의 index값 구하는 함수 btn 클릭 시 getElementIndex..

jquery 없이 vanilla javascript로 class관련 함수를 구현해보자 1. addClass element.classList.add('추가할 class명'); function addClass(e, c) { e.classList.add(c); return e; }; 2. removeClass element.classList.remove('삭제할 class명'); function removeClass(e, c) { e.classList.remove(c); return e; }; 3. toggleClass element.classList.toggle('토글할 class명'); function toggleClass(e, c) { e.classList.toggle(c); return e; }; 4...

1. 사용법 let regexp = /^[0-9]*$/, val = document.querySelector('input).value; if( !regexp.test(val) ) { alert("숫자만 입력하세요"); val = val.replace(regexp,''); } 2. 정규식 모음 // 숫자만 let regex= /[^0-9]/g // 한글만 let regex= /[a-z0-9]|[ \[\]{}()?|`~!@#$%^&*-_+=,.;:\"'\\]/g; // 자음/모음 불가 let regex= /([^가-힣\x20])/i; // 자음/모음 가능 let regex= /([^가-힣ㄱ-ㅎㅏ-ㅣ\x20])/i; // 이메일 let regex= /^[-A-Za-z0-9_]+[-A-Za-z0-9_.]*[@]..

숫자 자료에서 자주 쓰이는 3자리마다 콤마 찍기 정규식입니다. 숫자만 입력되게 : /[^0-9]/g 3자리 마다 콤마 : /\B(?=(\d{3})+(?!\d))/g const input = document.querySelector('input'); input.addEventListener('input', function(e){ e.value = e.value.replace(/[^0-9]/g,'').replace(/\B(?=(\d{3})+(?!\d))/g, ',') })

name값을 onlyNumber로 셋팅한 input에 'input' 이벤트리스너를 걸어주었다. input이 여러개일 때에는 forEach 또는 for문을 이용해서 이벤트 리스너를 걸어주면 된다. 숫자 정규식 : /[^0-9]/g input event : 키보드 이벤트 뿐만 아니라 어떤 방법으로든 input의 value값이 변경된 직후에 사용된다. 정규식을 이용해 숫자가 아닌 값이 입력됐을 시 ''(공백)으로 바꿔서 숫자만 남기도록 한다. document.querySelector('input[name="onlyNumber"]').addEventListener('input', function(e){ e.value = e.value.replace(/[^0-9]/g,'') })

드래그된 값을 출력하는 range slider를 만들어보자 처음에는 아주 복잡할 줄 알았는데 input type 중 range를 사용하면 아주 간단히 사용할 수 있다! span#value에는 js로 값을 출력할 예정이다 속성 - max : input의 최댓값 - min : input의 최솟값 - step : input에 입력할 수 있는 숫자들 사이의 간격 - value : input의 초깃값 Range Slider Value: 드래그 대상인 동그란 버튼은 css에서 ::-webkit-slider-thumb , ::-moz-range-thumb로 커스텀 해주면 된다 값을 화면에 출력하는 스크립트는 oninput을 사용하면 된다. oninput은 값이 변경된 직후에 발생하는 이벤트이다. 처음 초기값을 한번 ..