개발자의 끄적끄적

[javascript/jquery] javascript scrollIntoView example / 자바스크립트 스크롤을 특정 영역으로 이동 시키는 방법 javascript 에서 현재 페이지의 특정 영역으로 스크롤을 이동시켜야 한는 경우 여러가지 방법이 있을 수 있는데요, 그중에서 대부분 브라우저나 엘리먼트들에서 동작하는 방식을 공유하려고 합니다. 바로 아래와 같이 scrollIntoView 를 이용하는 방법입니다. 아래는 기본 사용법입니다. document.getElementById('ID').scrollIntoView(); 예를들어 아래와 같이 test_div 라는 아이디를 가지는 div 태그가 있다고 가정하고, 현재 페이지의 스크롤을 위 태그로 이동 시키고 싶으면 아래와 같이 scrollIntoVi..

[javascript/jquery] javascript window.onload example / 자바스크립트 window.onload 사용법 javascript 에서 페이지가 로드된 다음에 특정 액션을 취해야 하는 경우 document.ready 를 많이 사용합니다. 하지만, 그래도 페이지가 로드가 되지 않은 상태에서 실행되는 경우가 있습니다. 그럴때는 아래와 같이 window.onload 를 사용하시면 됩니다. window.onload = function(){ // todo } 위 내용중 todo 에 하고자 하는 로직을 작성하시면 됩니다! 참고들 하세요!

[javascript/jquery] javascript indexOf example / 자바스크립트 문자열 찾는 방법 javascript 에서 문자열을 다루다 보면 특정 문자나 단어가 문자열에 포함되는지 확인을 해야하는 경우가 있습니다. 그럴때는 indexOf 를 이용하시면 됩니다. 예를들어 아래와 같이 test string 라는 문자열이 있는 str 이라는 변수가 있다고 가정하고, 그 문자열에 test 라는 문자가 포함되는지 확인하고 싶으면 아래와 같이 indexOf 를 사용하시면 됩니다. var str = "test string"; var result = str.indexOf("test"); 위에서 result 에 담긴 결과를 출력하면 아래와 같이 해당 단어의 시작 인덱스인 0이 출력됩니다! 0 만약..

[javascript/jquery] javascript pixelate library [링크] javascript 를 사용하다보면 이미지를 다뤄야 하는 경우가 종종 있습니다. 그중에서 이미지를 픽셀화 해서 흐릿하게 변경되는 이벤트를 주어야 하는 경우가 있는데요. 그럴때는 아래 나와있는 pixelate 를 사용하시면 됩니다! 아래 링크 들어가셔서 한번 보시면 바로 이해하실껍니다! 참고들 하세요! javascript pixelate library : https://github.com/miguelmota/pixelate GitHub - miguelmota/pixelate: Pixelate an image with canvas. Pixelate an image with canvas. Contribute to m..

[javascript/jquery] jquery 모션 그래픽 라이브러리 mo.js [링크] javascript 를 사용하다보면 모션그래픽에 관련된 플러그인이 필요한 경우가 있습니다! 인터렉션이 많은 페이지의 경우 요구될 가능성이 많은데요 그럴때는 jquery 플러그인중 하나인 mo.js 를 이용하시면 됩니다! 아래 링크 달아 놓을테니 들어가셔서 한번 확인해보시고 금방 적용하실 겁니다! 참고들 하세요! jquery 모션 그래픽 라이브러리 mo.js : https://github.com/mojs/mojs GitHub - mojs/mojs: The motion graphics toolbelt for the web The motion graphics toolbelt for the web. Contribute t..

[javascript/jquery] javascript facebook share example / 자바스크립트 페이스북 공유하기 스크립트 javascript 에서 게시물을 다루다 보면 컨텐츠를 sns 공유하기 위한 버튼을 구성하는 경우가 있습니다. 그중에서 facebook 공유하기 스크립트를 공유하고자 합니다. https://www.facebook.com/sharer/sharer.php?u=PAGE_URL 공유하기 버튼에 위 링크를 href 로 넣으면 페이스북 페이지가 열러 로그인 및 공유할 수 있는 화면으로 전환 됩니다. 참고들 하세요!

[javascript/jquery] javascript 한글 숫자 영문만 허용하는 정규식 javascript 에서 입력값을 다루다보면, 한글, 영문, 숫자만 입력받아야 하는 경우가 있습니다. 아래나와있는 정규식을 이용하시면, 한글, 영문, 숫자만 입력되었는지 체크할 수 있습니다! var regex = /^[ㄱ-ㅎ|가-힣|a-z|A-Z|0-9|\*]+$/; 참고들 하세요!

[javascript/jquery] javascript 영문과 숫자만 허용하는 정규식 javascript 에서 아이디 같은 부분의 입력값을 체크할때, 영문이나 숫자만 입력을 받아야 하는 경우가 있습니다. 그럴때는 아래 나와있는 정규식을 이용하시면 됩니다. var regex = /^[A-Za-z0-9+]*$/; 추가적으로 영문이나 숫자만 입력을 받지만, 6~12 자리만 입력을 받으려면 아래와 같이 추가해서 사용하시면 됩니다! var regex = /^[A-Za-z0-9+]{6,12}$/; 참고들 하세요!