개발자의 끄적끄적

[javascript/jquery] javascript resize event listner example / 자바스크립트 리사이즈 이벤트 체크 방법 javascript 로 현재 페이지의 크기가 변화하는지 체크해야되는 경우가 있습니다. 대부분 반응형의 사이트에서 이러한 로직들이 동작하는데요 그럴때는 체크하고자 하는 페이지에 아래 스크립트를 추가하시면 됩니다. window.addEventListener('resize', function() { // to do } 위 내용 보시면 아시겠지만, event listner 를 등록하면 resize 이벤트가 발생할때 마다 안에 적힌 로직이 동작하게 됩니다! 참고들 하세요!

[javascript/jquery] jquery 전체 페이지 스크롤 하는 라이브러리 사이트 [링크] html 과 css 를 이용해서 페이지를 퍼블리싱 하다보면 마우스 스크롤 한번에 한 섹션씩 이동해야하는 이펙트를 주어야 하는 경우가 있습니다. 그럴때 사용하는 라이브러리가 fullpage 라이브러리 입니다. 이 라이브러리 소개와 2버전 3버전의 소스도 잘 정리되어 있는 사이트가 있어서 공유해보려고 합니다! 아래 링크 들어가셔서 사용법도 확인하시고 다운받으셔서 적용하시면 될듯 합니다! 참고들 하세요! jquery fullpage.js 다운로드 및 사용법 링크 : https://mariedays.tistory.com/40 전체페이지 스크롤 플러그인 fullPage.js 다운로드 및 사용법 / 버전2 무료 / ..

[javascript/jquery] javascript special character check example / 자바스크립트 특수문자 체크 정규식 함수 javascript 에서 input 박스의 입력값을 제어하다 보면 이름이나 아이디 같은 항목은 특수문자를 제외한 나머지만 허용하는 경우가 있습니다. 그럴때는 아래 정규식 함수를 이용하시면 됩니다! function checkSpChar(str) { const regExp = /[~!@#$%^&*()_+|?:{}]/; if(regExp.test(str)) { return true; }else{ return false; } } 위 내용 보시면 아시겠지만, 입력받은 str 이라는 문자값을 정규식으로 체크해서 특수문자가 포함되어 있으면 true 를 특수문자가 ..

[javascript/jquery] javascript Unexpected token o in JSON at position 1 에러 해결방법 javascript 에서 json 데이터를 parse 를 이용해서 javascript 객체로 변환하려고 하다보면 아래와 같은 에러가 발생하는 경우가 있습니다. Unexpected token o in JSON at position 1 위와 같은 에러는 이미 javascript 객체인 데이터를 javascript 객체로 변환하려고 시도했을때 발생하는 에러입니다! 참고들 하세요!

[javascript/jquery] javascript phone number hyphen example / 자바스크립트 휴대폰번호 하이픈 함수 javascript 에서 휴대폰 번호를 입력받다 보면 숫자로만 입력받아서 형식에 맞게 변경해야 하는 경우가 있습니다. 그럴때는 아래 함수를 사용하시면 됩니다! function phone_number(val){ var phone = val.replace(/(^02.{0}|^01.{1}|[0-9]{3})([0-9]+)([0-9]{4})/,"$1-$2-$3"); return phone; } 참고들 하세요!

[javascript/jquery] jquery autocomplete plugin / jquery 자동완성 플러그인 [링크] jquery 플러그인들 중에서 특정 input 에 입력받는 데이터를 자동완성으로 검색해서 보여주는 플러그인이 있어서 공유하려고 합니다. ajax 로 데이터를 불러와서 자동완성 배열에 담는것도 가능하니, 디비에 있는 내용검색을 활용하거나 할때 유용하게 쓰일수 있을듯 합니다! 아래 링크 달아놓을테니 들어가셔서 확인해보세요! jquery autocomplete plugin site : https://api.jqueryui.com/autocomplete/ Autocomplete Widget | jQuery UI API Documentation Description: Autocomplet..

[javascript/jquery] 자바스크립트 Cannot read properties of null (reading 'classList') 에러 해결방법 javascript 나 jquery 를 다루다 보면 아래와 같은 에러가 뜨는 경우가 종종 있습니다. Cannot read properties of null (reading 'classList') 위 에러의 원인은 스크립트 로드 우선순위가 잘못되었거나, 로드가 되지 않았거나, 스크립트가 로드될 당시 페이지에 아이디나 클래스에 해당하는 요소가 없거나 한 경우입니다. 우선 스크립트 로딩 순서를 확인해보시고 주석치면서 테스트 해보시면 금방 해결하실수 있을 겁니다! 참고들 하세요!

[javascript/jquery] 자바스크립트 비밀번호 체크 정규식 javascript 에서 정규식을 많이 사용합니다. 그중에서 회원가입이 비밀번호를 받을때 체크하는 정규식을 공유하고자 합니다. 바로 소문자, 대문자, 숫자, 특수문자를 포함하는 8~15 자리의 비밀번호를 체크하는 정규식 입니다. var pattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/; 참고들 하세요!