jQueyr와 같은 여타 다른 JS라이브러리를 사용하지 않고 javascript만 사용하는 걸 pure javascript 혹은 vanillaJS 혹은 plain javascript라고 부른다. 요즘 순수 자바스크립트만으로 개발할 경우가 생겨서 이참에 자주 사용하는 코드들을 정리해봤다. $(document).ready(function() { console.log("jQuery document ready!"); }); document.addEventListener("DOMContentLoaded", function(event) { console.log("javascript document ready!"); }); // 1. 클래스명으로 값 가져오기. // jQuery $(".someClassName").v..
[jQuery] 유동적인 테이블 셀병합 - rowspan
위와 같이 소속에 같은 데이터가 있을 경우 하나의 셀로 병합해주는 코드다. $(document).ready(function(e){ genRowspan("td 클래스명"); }); function genRowspan(className){ $("." + className).each(function() { var rows = $("." + className + ":contains('" + $(this).text() + "')"); if (rows.length > 1) { rows.eq(0).attr("rowspan", rows.length); rows.not(":eq(0)").remove(); } }); }
페이징이 되어있는 게시판에서 1페이지에서 체크했던 값들이 2페이지에 갔다가 다시 1페이지로 돌아와도 체크된 상태로 남아있도록 하는 로직을 고객이 아닌 PM이 요구하여 만들게 됐다. 체크박스 체크 상태가 유지되는 게시판을 여태 본 적도 없고, 이용하는 사람 입장에서도 왜 그렇게 해야 하는지는 모르겠으나.. 만들라고 하니까 만들었다. 처음엔 체크할 때마다 ajax처리해서 session으로 들고다닐까 하다가, 겨우 체크박스 하나 때문에 불필요한 서버-클라이언트 통신이 발생하는 것도 아닐 뿐더러 띄엄띄엄 하는 체크에 많은 양의 체크를 할 것 같지도 않아서 그냥 쿠키로 해결하기로 했다. 좀더 정리가 필요한 소스이긴 하지만, 더이상은 귀찮다. ㅡ.ㅡ;; Javascript단 var cookieName = "item..
간단하게 짤 수 있는 코드지만, 항상 필요할 때마다 타이핑하자니 귀찮아서 여기에 저장해놔야겠다. function setPeriod(period){ var startDate = getPastDate(period); var endDate = getRecentDate(); $("#startDate").val(startDate); $("#endDate").val(endDate); } function getRecentDate(){ var dt = new Date(); var recentYear = dt.getFullYear(); var recentMonth = dt.getMonth() + 1; var recentDay = dt.getDate(); if(recentMonth < 10) recentMonth = "0..
간만에 간단한 것 하나 올려본다. 입력 화면에서 input 태그나 readonly인 태그를 제외한 타겟에서 백스페이스 키가 눌려서 이전 페이지로 이동하는 것을 막는 코드다. $(function() { $(document).keydown(function(e) { if(e.target.nodeName != "INPUT"){ if(e.keyCode == 8){ return false; } } if(e.target.readOnly){ // readonly일 경우 true if(e.keyCode == 8){ return false; } } }); });
[jQuery] jQuery Validation Plugin을 이용한 입력 값 검증.
입력 값에 대한 검증을 일일히 자바스크립트 코드를 짜서 검증하기란 여간 귀찮은 일이 아니다. jquery validation을 이용하면 아주 편리하게 입력 값에 대한 검증이 가능하다. 메시지를 한 곳에 모아놓을 수 있고, 다국어 지원도 한다. 다운로드 ☞ http://jqueryvalidation.org/ 필요한 js 파일은 기본적으로 jquery 파일이 있어야 하고, jquery.validate.js와 jquery.validate.min.js 중에 하나를 추가해준다. 총 2개의 js 파일이 필요하다. 여기에 메시지 관리나 다국어 메시지를 사용하고 싶다면, dist/localization에 있는 메시지js 파일들을 추가한다. 신용카드 번호 검증과 같은 additional-method 검증 메서드를 사용하..
보통 로그인을 할 때 보면 아이디를 입력하는 칸 오른쪽에 id저장하기 체크박스가 있는 것을 볼 수 있다. 체크를 하면 다음에 그 페이지를 열었을 때, 다시 입력하지 않아도 저장된 아이디가 입력되어있다. 아래 소스는 그것을 구현한 것인데.. 세션이 아닌 쿠키를 사용한 이유는 브라우저를 닫고 다시 열었을 때에도 ID가 남아있게 하기 위해서였다. 자바단에서 처리해야 할지 화면단에서 처리해야 할지 고민이 조금 있었지만, 가벼운 소스를 굳이 자바단에 태울 필요가 있을까 싶기도 하고, 어떤 것은 자바단에 어떤 것은 화면단에 넣는 것도 유지보수할 때 번거로울 것 같아서.. 그냥 자바스크립트로 다 화면단에서 해주기로 했다. id를 입력받는 input text 태그와 그 옆에 id 저장하기 input checkbox를 ..