드럼치는 프로그래머

정규표현식은 복잡한 조건 비교문 없이 패턴 단위로 문자열을 검증할 수 있어서 무척 유용하...지만...-_-;; 자주 사용하지 않으면 할 때마다 헷갈린다는 단점이 있다. 자바스크립트만 이용해서 사용자 입력값을 검증하는 것은 무조건 문제가 생길 수 있기 때문에 서버측 검증을 꼭 해야만 한다. 물론 서버측에서는 여러가지 다른 수단 (가령, 스토어드 프로시저 파라메터의 데이터 타입) 이 있기 때문에 자바스크립트에서 정규표현식 검증을 하고 서버단에서는 별도 Validation 을 하는 것도 좋은 방법이다 각설하고, 사용자 계정 생성시 자주 사용하게 되는 룰이 영문, 숫자만 허용하는 것인데 이를 자바스크립트 정규표현식을 사용하면 무척 간단하게 표현이 가능하다 var regType1 = /^[A-Za-z0-9+]*..

이 포스팅은 자바스크립트 정규식(정규표현식)에 대해서 상세히 알려드릴려는게 아니라.. 웹페이지 작성시 매번 찾게되는 아이디 체크 와 같은 스크립트를 포스팅 해봅니다. 기본적으로 자바스크립트에서 정규표현식은 / (슬래쉬)로 감싼다 "(큰따옴표) 또는 '(작은따옴표)로 감싸지 않는다. 그리고 마지막에 /g 또는 /i 또는 /gi 로 끝난다 왜 그런지 궁금하면 각자 찾아보는 걸로 한다~ 아래에서 뜻하는 정규 표현식은 영문 a-z 로 시작하고 이후에 a-z0-9 사이 문자열이 오면 된다는 것이다. 대괄호 앞에 ^가 붙으면 시작을 뜻하고 대괄호 안에 ^가 붙으면 제외를 뜻한다. ^[a-z]로 되어 있으니 시작을 영문 a-z로 하는 것을 뜻한다 + 연산자로 연결을 한다. {5,19}는 5~19자리를 뜻한다. 앞에서..

자바스크립트로 아이디 체크 로직을 개발 할 일이 있어 개발 후 남겨봅니다. 공감 버튼 클릭해주세요!! 중복확인 영문, 숫자 조합 8자~10자리 function checkIdCombinationEngAndNum(ipbID, ipbIDText) { var retVal = false; var vId = ipbID.val(); if (vId.length 10) { ipbIDText.css("color", "red"); ipbIDText.text("아이디는 8자 이상, 10자 이하여야합니다."); } else if (/[^a-z0-9]+|^([a-z]+|[0-9]+)$/i.test(vId)) { ipbIDText.css("color", "red"); ipbIDText.text(..

ui.jqgrid.css 중 font-family를 추가하였습니다. .ui-jqgrid .ui-jqgrid-htable th div {overflow: hidden; position:relative; height:17px;font-family:'NanumGothicB','나눔고딕', "돋움", dotum;font-size:15px;} [출처] http://hwoarang757.tistory.com/entry/JQuery-JQGrid-%ED%97%A4%EB%8D%94-%ED%8F%B0%ED%8A%B8-%EB%B3%80%EA%B2%BD-%EC%98%88%EC%A0%9C

텍스트가 일정 길이 이상 길어지는 경우 생략 기호를 사용하여 표시하면 매우 효과적입니다. 길이가 더 길다는 것을 시각적으로 표시할 수 있고 공간 안에서 레이아웃을 효과적으로 꾸밀 수 있죠. 일반적으로 한줄인 경우에만 생략 기호를 사용하나 만약 폭(width)이 너무 좁아 두 줄 이상의 텍스트를 생략 기호를 사용해 보여주려면 가능할까요?? 이런 물음은 크롬의 경우 텍스트가 두 줄인 경우에도 적용되기 때문입니다. 하지만 항상 그렇듯 다른 브라우저에서는 정상 적용되지 않는데 이런 경우 해결 방법은 무엇이 있을까요?? 일단 IE에서 두 줄 이상의 멀티 라인에는 적용되지 않았습니다. 구글링을 해보았으나 정상적인 방법으로 해결할 수는 없다는 결론입니다. 그리하여 이런 경우 선택 할 수 있는 방법음 아래와 같이 세가..

fn:contains(string, sbustring) string이 substring을 포함하면 return True fn:containsIgnoreCase(string, sbustring) 대소문자 관계없이 string이 substring을 포함하면 return True fn:endsWith(string, suffix) string이 suffix로 끝나면 return True fn:escapeXml(string) stting에 XML과 HTML에서 특별한 의미를 가진 문자들이 있으면, XML엔티티 코드로 바꿔준뒤 문자열 반환 fn:indexOf(string, sbustring) string에서 substring이 처음으로 나타나는 인덱스 반환 fn:join(array, separator) array요..

현재 개발하고 있는 시스템에서 첨부파일을 다운로드할 경우 공백이 '+' 로 바뀌어서 저장이 됩니다. 예를들어 "불친절한 자수씨의 블로그.pdf" 라는 파일이라면 "불친절한+자수씨의+블로그.pdf" 라는 파일로 저장이 됩니다. 원인은 한글 파일명을 지원하기 위해 URLEncoder 를 사용하는데, 이것이 공백을 '+' 로 만드는 범인이였습니다. 기존 방식은 아래와 같았을 것 입니다. 1 String fileName = "불친절한 자수씨의 블로그.pdf"; 2 fileName = URLEncoder.encode(fileName, "UTF-8"); 3 response.setHeader("Content-Disposition", "attachment;filename=" + fileName + ";"); 개선 방법..

동적으로 요소를 추가하고 (createElement())하는 방법을 살펴보자 소개되는 예제코드는 예제페이지로 이동한후 개발자도구 콘솔을 열어서 실행하면 된다.//#box에 를 추가해 $('#box').append('난 div 요소'); 간단하다. 좀 다른느낌? 으로도 가능하다.// 요소를 #box에 추가해 $('').appendTo( $('#box') ) .text("난 div 요소") .addClass("border") .css("background-color","#fff"); 메소드 체이닝으로 요소의 어트리뷰트를 수정했다. 이 부분을 좀더 다른느낌으로 만져보자$('', { text : '난 div 요소', addClass : 'border', css : { "background-color":"#fff..

jQuery에는 이벤트등록을 할수 있는 흥미로운 방법이 존재한다. 바로 delegate()인데 1.7버전 이상부터는 on()메소드를 권장하니 on()으로 살펴보자. 소개되는 예제코드는 예제페이지로 이동한후 개발자도구 콘솔을 열어서 실행하면 된다. delegate형태로 이벤트 등록$(document.body).on('click', 'div', function(event){ console.log(event.target, event.currentTarget); }); on()메소드의 두번째 인자가 div이다. 해석해 보자면 document.body에 click이벤트를 주고 document.body > div 만 감시하겠다. 라는 의미 이런 delegate방식은 동적요소가 추가될경우 빛을 발한다! 동적요소 추가..

jQuery에서 이벤트 관련 메소드들은 무척 많다. 그중에 편한방식,마음에 드는 방식을 선택하면 되는데 하나씩 살펴보자. 소개되는 예제코드는 예제페이지로 이동한후 개발자도구 콘솔을 열어서 실행하면 된다. 이벤트 등록$('#box').on('click', function(event){ console.log(this,event); }); //이렇게도 가능 $('#box').click(function(event){ console.log(this, event); }); on메소드를 사용해서 간단하게 이벤트 등록이 가능하다. 이벤트콜백함수 안에서의 this는 이벤트가 발생된 엘리먼트 그대로를 가르키고 event인자는 jQuery Event객체를 가르킨다. 특이하게 click()처럼 이벤트명의 메소드들도 존재하는데..