웹 개발 & 정보/JavaScript (jQuery) 4

[JavaScript] 디바운스(debounce) js, 이벤트(함수) 중복 실행 방지

[JavaScript] 디바운스(debounce) 에 대하여 간만에 자바스크립트 관련 쓸만한 기능을 발견해서 포스팅 해봅니다. 디바운스(debounce)를 쉽게 설명해본다면, '과도한 이벤트 중복 실행 방지' 정도가 되겠습니다. (지극히 개인적인 생각입니다. 정확한 정의는 구글 검색을 참조해 주세요 ^^;) 예를 들면 중복 알림 방지 같은 기능 구현시 요긴하게 쓸 수 있을 것 같습니다. 그럼 본격적으로 한번 살펴보겠습니다. 아래는 먼저, 일반적인 상황의 예시입니다. 1234567function test(){ console.log(1);} window.addEventListener('resize', test);Colored by Color Scriptercs 이 소스에 따르면, 해당 페이지는 resize ..

[JavaScript/jQuery] input file 이미지 선택시, 미리보기 구현 (ie11+)

input 태그를 이용하여 이미지 파일을 업로드 할 때, 선택한 이미지의 미리보기 기능이 필요한 경우가 있습니다. (서버에 파일을 업로드하지 않고, 미리보기 기능을 구현하는 것) 해당 소스는 크롬, 파폭, 엣지 등 현재 많이 사용되는 최신 브라우저와 익스플로러 11버전 이상만 지원합니다. input file 이미지 선택시, 미리보기 구현 소스 (ie11+) ※ 해당 소스는 제이쿼리와 함께 사용해야합니다. 스크립트 부분 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 ..

[JavaScript] 날짜 더하기 빼기 함수

자바스크립트를 사용하여 날짜의 년, 월, 일을 더하고 빼는 함수 입니다. 123456789101112131415161718192021222324252627function dateAddDel(sDate, nNum, type) { var yy = parseInt(sDate.substr(0, 4), 10); var mm = parseInt(sDate.substr(5, 2), 10); var dd = parseInt(sDate.substr(8), 10); if (type == "d") { d = new Date(yy, mm - 1, dd + nNum); } else if (type == "m") { d = new Date(yy, mm - 1, dd + (nNum * 31)); } else if (type == ..

[JavaScript] input, textarea 등 입력창에 숫자만 입력 받기

보통 input 창에 숫자를 입력 받을 때는 input type="number", ime-mode:disabled 으로 한글 입력을 방지한 후 사용합니다. 1 결과화면) 그러나 이 방법은 브라우저마다 다르게 적용되거나 input 태그에 한해서만 사용할 수 있는 등의 단점이 있고 오른쪽에 생기는 화살표 등 디자인 상의 문제로 사용하기 난감한 경우가 종종 생기곤합니다. 이런 경우, 자바스크립트로 해결하는 방법을 소개해드리겠습니다. - 자바스크립트 onkeydown, onkeyup 이벤트를 이용하여 입력창에 숫자만 입력받는 방법 function onlyNumber(event){ event = event || window.event; var keyID = (event.which) ? event.which : e..