'자바스크립트'에 해당되는 글 10건

  1. 2010.12.15 [자바스크립트] 주민번호를 기준으로 만 나이 체크 (2)
  2. 2010.09.25 jQuery 1.4.x 입문서, jQuery Cookbook (실전 jQuery 쿡북) v1.4.x 증보판 (17)
  3. 2010.05.03 xguru 님이 소개해 주신 scripty2, 자바스크립트는 잊어줘..요. (1)

[자바스크립트] 주민번호를 기준으로 만 나이 체크

|


이곳에 구현해 놓은 내용은..
만 14세 미만인 사람이 회원가입을 할때 부모 동의를 얻기 위해 부모 주민번호를 입력받는 상황에서,
부모가 만 19세 이상 성년자 인지를 확인하기 위해 주민번호를 기준으로 만 나이를 체크하는 것입니다.
물론, https:// 프로토콜을 사용하여 SSL 로 서버단 프로그램을 구현해야 되겠구요.
이외에 i-Pin 을 이용한 방법을 사용할 수도 있어야 합니다만..
여기서는 클라이언트단의 주민번호 기준 만 나이 체크를 하는 부분입니다.

isUnderAge 함수는 input 태그에 입력된 값이 만 나이 기준으로 파라미터값 미만인지 점검.
만 14세, 만 19세 등의 기준으로 체크 가능.

input 태그의 onBlur 에 isUnderAge(14) 대신에 if(isUnderAge(14)); 이 필요할 수도..
onBlur 시의 오류를 무시하고 form 을 사용하려고 할때,
chkValid 함수에 isUnderAge 함수를 다시 한번 입력.

chkAge 함수는 파라미터가 주민번호일때 내국인/외국인을 구분해서 만 나이를 점검.
isNumber6 과 isNumber7 함수는 input 태그에 입력된 값이 숫자로 6개 또는 7개인지를 점검.

<form name="frmBasic">
  <input name="parentUserNo1" value="123456" onBlur="isUnderAge(14)" maxLength="6" />
  <input name="parentUserNo2" value="7890123" onBlur="isUnderAge(14)" maxLength="7" />
</form>

<script>
function isUnderAge(n){
  var f = document.frmBasic;
  var v1 = f.parentUserNo1.value;
  var v2 = f.parentUserNo2.value;
  if(isNumber6(v1) && isNumber7(v2)){ // 아직 입력 중일 때는 만 나이를 체크할 수가 없고, 13 자리가 모두 차야 합니다
    if(chkAge(v1+v2) < n){ alert('만 나이로 '+n+' 세 미만입니다. '); return false; }
    else return true;
  }else return false;
}

function isNumber6(v){ return /^[0-9]{6}$/.test(v); } // 공백이 있어도 안 됩니다만..
function isNumber7(v){ return /^[0-9]{7}$/.test(v); }

function chkAge(s){ // s 은 13자리 주민번호
  var v1 = Number(s.substring(0,2));
  var v2 = Number(s.substring(6,7));
  var vy = (v2==1 || v2==2 || v2==5 || v2==6) ? 1900 +v1 : ((v2==3 || v2==4 || v2==7 || v2==8) ? 2000 +v1 : 0);
  var vm = Number(s.substring(2,4));
  var vd = Number(s.substring(4,6));
  var today = new Date();
  var thisYear = today.getYear();
  var thisMonth = today.getMonth()+1; // Date 를 사용할때 getMonth 는 0 이 1월이므로 1을 더한다
  var thisDay = today.getDate();
  var dy = thisYear - vy; // 년차
  var dmd = (thisMonth - vm) *100 + (thisDay - vd); // 단순 비교이므로, 월에 30을 곱할 필요 없음
  return dmd>=0 ? dy -1 : dy; // 생일이 지나지 않았으면 년차에서 1년을 제하고, 지났으면 년차값이 만 나이
}

function chkValid(){
  var f = document.frmBasic;
  if(!isUnderAge(14)) return false; // 이 부분 앞에서 주민번호 입력이 정확한지 체크하는 로직은 따로 만들어야 겠죠.
  return true;
}
</script>

Trackback 0 And Comment 2
  1. 안세종 2011.01.15 13:26 address edit & del reply

    chkAge 함수에서 마지막에 dmd가 0이하일때가 생일 이후이므로 순서가 뒤바껴야 하지 않나요?

    dmd<=0 ? dy -1 : dy => dmd<=0 ? dy : dy -1

    이렇게요.

jQuery 1.4.x 입문서, jQuery Cookbook (실전 jQuery 쿡북) v1.4.x 증보판

|

깜장 바탕에 빨간 글씨 jQuery Cookbook.
울 회사 홈피가 까망 빨강인데, 딱 스타일이 맞네요.. ㅎㅎ

관리자 화면 만들다가 갑자기 돌아가지 않는 자바스크립트 코드를 보고,
몇 시간 동안 이리저리 해 보다 결국 포기했더랬어요.
그런데, 여기저기 뒤적이다 보니.. jQuery 는 어떨까 싶어서,
이쪽 코드를 몇개 테스트 했습니다.. 음.. 이제는 잘 되는군요.

범용성이라는 것이 이리 중요한 것을..
조금씩 다른 웹브라우저들을 모두 테스트 해서,
그리고, 동일한 코드로 여러 브라우저에서 작동하게 만들어진 자바스크립트 프레임웍..
jQuery. 이제 슬슬 공부해 봐야겠네요.
그동안 흐릿하게 나마 접해 왔던 jQuery 를 요리해서 맛나게 잘 먹겠습니다.

역시나 인터넷으로 서적을 구매할 때는 예스24 가 낫겠다 싶어, jQuery 관련 서적들을 고르고 고르다 발견하였는데..
구매하고 배송 관련 SMS 를 접하는 순간, 이게 뭐야.. '이노지스' 그 악명 높다던 배송업체..?
오늘 중으로 받는다 했는데.. 갑자기 우울해졌지 뭡니까.
그런데, 아니네요. 오후 2시에 책을 받았습니다. 암튼, 어제 구매하고 오늘 책을 받으니 기분 좋아요.
Trackback 0 And Comment 17
  1. Favicon of https://rabbitchris.tistory.com BlogIcon 래빗 크리스 2010.10.26 08:53 신고 address edit & del reply

    o 초보는 '1장 jQuery 기초' 필독.
    - JScript 코드는 웹페이지 끝부분에 기술
    jquery.js 조차도 head 태그에 기술하지 않고 웹페이지 끝부분에 기술.
    다만, jQuery 를 사용하는 코드 앞에 jquery.js 를 기술
    그리고, 적어도 body 태그가 끝나는 곳 앞에서는 반드시 기술
    - 코딩량을 최소화

  2. Favicon of https://rabbitchris.tistory.com BlogIcon 래빗 크리스 2010.10.30 09:06 신고 address edit & del reply

    o 대소문자를 구별한다.
    이를테면, bind 함수 사용시 "mouseEnter" 라고 하면 마우스 커서가 올려졌을때 작동하지 않는다.
    그리고, slideUp fadeIn 등은 대소문자를 섞어 사용.

    o jQuery 뿐만 아니라 JS 는 body 가 끝나기 바로 전에 위치하는 것이 요즘 추세. 본문이 먼저 나오고, 거기에 애니메이션이 얹혀지는 효과라는 건가.. 암튼, 속도도 더 빠르다는..

  3. Favicon of https://rabbitchris.tistory.com BlogIcon 래빗 크리스 2010.11.11 08:26 신고 address edit & del reply

    o Json
    - pp. 182-185. 외부 Json 파일을 읽어서 사용.

  4. Favicon of https://rabbitchris.tistory.com BlogIcon 래빗 크리스 2010.11.11 08:52 신고 address edit & del reply

    o jQuery 최적화
    - 여러개의 tr 요소 대신 단일 table 또는 tbody 삽입
    - DOM 조작 대신 .innerHTML 이나 .html() 사용
    - 문자열 결합 대신 배열과 .join() 사용
    - $.each 대신 순수 for 루프 사용
    - 이름 조회 최소화
    - 개체를 변수로 Caching

    o for(var i=-1, n=array.length; ++i<n;){ ... }
    - 배열의 길이를 캐시
    - ++i 이 i++ 보다 몇몇 브라우저에서 빠르다
    - 이름 조회를 줄이기 위해 루프 변수의 증가와 테스트를 결합
    - while, do~while 보다 for 루프가 느리지 않고, 가독성도 높다.
    - 배열이 아닌 개체의 반복은 for(var key in object){ var item=object[key]; .. } (단, jQuery prototype 등에서는 사용금지)

  5. Favicon of https://rabbitchris.tistory.com BlogIcon 래빗 크리스 2010.12.02 08:19 신고 address edit & del reply

    $(..).removeAttr('a')
    $(..).attr('a','b')
    $(..).attr('a')

  6. Favicon of https://rabbitchris.tistory.com BlogIcon 래빗 크리스 2010.12.02 08:57 신고 address edit & del reply

    o 애니메이션
    toggle()
    slideUp(), slideDown(), slideToggle()
    animate()
    fadeIn(), fadeOut(), fadeTo()

  7. Favicon of https://rabbitchris.tistory.com BlogIcon 래빗 크리스 2010.12.08 08:41 신고 address edit & del reply

    $(..).removeClass('a b c..')
    $(..).addClass('a b c..')
    $(..).hasClass('a b c..')

    $(..).css({width:100px, display:'none'})

  8. Favicon of https://rabbitchris.tistory.com BlogIcon 래빗 크리스 2010.12.08 08:45 신고 address edit & del reply

    o
    $(..).next().filter(':not(:first)')
    $(..).prev()

  9. Favicon of https://rabbitchris.tistory.com BlogIcon 래빗 크리스 2010.12.08 08:47 신고 address edit & del reply

    o toggle

    $('..').show() 대신 $('..').toggle() 사용
    $('..').slideToggle() 또는 $('..').slideToggle('slow'), $('..').slideToggle(100)
    $(..).animate({opacity:'toggle',height:'toggle'})

  10. Favicon of https://rabbitchris.tistory.com BlogIcon 래빗 크리스 2010.12.10 09:01 신고 address edit & del reply

    o 매크로

    function clicked(e){
    $('div.pan').hide();
    $('#pan'+e.data.pan).show();
    $('#desc').text('..'+e.data.col);
    }
    $(..).bind('click',{pan:1, col:'red'}, clicked);

    $.each(['red','green','blue'],function(p,c){
    n++;
    $(..+n).bind('click',function(e){
    $('div.pan').hide();
    $('#pan'+n).show();
    $('#desc').text('..'+c);
    });
    });

  11. Favicon of https://rabbitchris.tistory.com BlogIcon 래빗 크리스 2010.12.14 08:43 신고 address edit & del reply

    o animate
    - CSS 속성 제어
    - scrollTop, scrollLeft DOM 속성 제어
    - CSS 계측단위 pixel, em, inch, % 사용
    - 상대값 고정값
    - toggle, $('..').animate({opacity:'toggle', height:'toggle'});
    - easing
    - callback
    - Queue
    - 속도, Mili-Second 단위, slow 600, fast 200 정도. Default 400. 0 은 애니메이션 없음.

    $(요소1).animate({scrollTop:요소2},300); 위로 스크롤 되는 애니메이션

    animation 은 jQuery 큐에 쌓였다가 순차적으로 실행.
    animation 중지는 stop()
    stop(true) jQuery 큐에 쌓인 모든 애니메이션 중지

    카멜 표기법 사용
    html 태그가 margin-left 이면 marginLeft 사용

  12. Favicon of https://rabbitchris.tistory.com BlogIcon 래빗 크리스 2011.01.10 08:41 신고 address edit & del reply

    o trigger
    페이지가 새로 고침되는 순간, 라디오 버튼 체크박스 등의 상태가 유지되는 웹브라우저를 위해 초기 세팅할때 이용

  13. Favicon of https://rabbitchris.tistory.com BlogIcon 래빗 크리스 2011.01.10 08:49 신고 address edit & del reply

    o each
    $('..').click(function(){..}); 와 $('..').change(function(){..}); 등을
    $('..').each(function(){ .. $(this).click(function(){..} $(this).change(function(){..} } 으로 통합.

  14. Favicon of https://rabbitchris.tistory.com BlogIcon 래빗 크리스 2011.01.11 08:59 신고 address edit & del reply

    o bind, unbind

    bind 첫번째 파라미터, click keydown keyup input paste

    $(..).bind('click',function(p){..}); bind 표현
    $(..).click(function(p){..}); 단축 표현

    function funcA(e){..}
    $(..).click(funcA).keydown(funcA);
    $(..).bind('click keydown',function(p){..});
    $(..).bind({click:function(){..}, keydown:function(){..}});

    function handler(e){..}
    $(..).unbind('click keydown'); // click 과 keydown 이벤트에 설정된 모든 bind 제거
    $(..).unbind('click keydown',handler); // click 과 keydown 이벤트에 설정된 handler 함수만 unbind

    IE 는 paste 이벤트 발생후에 붙여넣기가 이루어지므로..
    $('..').bind('input keyup paste',function(){ setTimeout(fucnA,0); });

  15. Favicon of https://rabbitchris.tistory.com BlogIcon 래빗 크리스 2011.01.19 08:52 신고 address edit & del reply

    o 유효성검사
    $(document).ready(function($){
    $('..').validate();
    });
    $.validator.addMethod('..',function(value,element){
    return this.optional(element) || /../.test(value);
    },'메시지');
    $.validator.addMethod('..',function(value,element,params){
    return this.optional(element) || value==(params[0]+params[1]);
    },'메시지 {0} {1}');

  16. Favicon of https://rabbitchris.tistory.com BlogIcon 래빗 크리스 2011.02.09 08:57 신고 address edit & del reply

    o Drag&Drop 드래그 앤 드랍
    http://jqueryui.com/demos/draggable/#sortable 드래그 해서 사이에 넣으면 자리가 자동으로 바뀜.

  17. Favicon of https://rabbitchris.tistory.com BlogIcon 래빗 크리스 2011.02.10 08:11 신고 address edit & del reply

    o 태요(김태영) 님의 jQuery 입문자용 초급 강좌,
    http://taeyo.net/Columns/List.aspx?SEQ=29
    Cookbook 은 입문서 + α 정도.
    각버전에 담긴 기능은 공식 홈페이지 참조.

    o 본문 예제. http://jquery-cookbook.com/examples/

    o jQuery 공식 홈페이지 (다운로드)
    http://jquery.com/
    jquery-1.4.2.js 과 jquery-1.4.2.min.js 의 차이는..
    주석의 유무와 난독화의 여부 정도.
    디버깅 시에는 전체버전, 실사용 시에는 min 버전.
    http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
    http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js
    http://docs.jquery.com/Downloading_jQuery
    http://www.opensource.org
    http://www.fsf.org
    http://dev.aol.com/dhtml_style_guide
    http://gsgd.co.uk/sandbox/jquery/easing/

    o jQuery 자체는 MIT License
    Cookbook 에 들어 있는 예제는 라이센스 필요.
    응용하는 것까지 라이센스를 달라하지는 않을듯..

    o 알아두면 좋을 웹사이트
    http://docs.jquery.com/Tutorials
    http://jquery14.com/
    http://plugins.jquery.com/
    http://code.google.com
    http://github.com
    http://sourceforge.net

    o 애니메이션 플러그인 cycle
    http://www.malsup.com/jquery/cycle/
    scrollUp/Down/Left/Right
    slideX/Y, blindX/Y/Z, growX/Y, curtainX/Y
    shuffle
    turnUp/Down/Left/Right, cover, uncover
    zoom, fadeZoom
    toss
    wipe

    o http://jqueryui.com/download

    o 유효성검사 Plug-ins
    http://plugins.jquery.com/project/validate

xguru 님이 소개해 주신 scripty2, 자바스크립트는 잊어줘..요.

|



MIT 라이센스랍니다. LGPL 의 새로운 명칭이 MIT 라이센스라는뎅..
아래 URL 로 가 보세요. 정말 놀랍습니다. 플래시가 앞으로 필요해지지 않을 수도 있지 않을까, 잠시 생각해 봅니다.



http://scripty2.com/

Trackback 0 And Comment 1
  1. Favicon of https://rabbitchris.tistory.com BlogIcon 래빗 크리스 2010.05.03 20:13 신고 address edit & del reply

    follow @xguru
    xguru.net

prev | 1| 2| 3| 4 | next