'팁&테크/Javascript'에 해당되는 글 19건

  1. 2022.11.14 [Javascript] Trim()
  2. 2021.07.05 [Javascript] Base64 encode
  3. 2021.01.26 rowspan 처리하기
  4. 2020.06.18 정규식 모음
  5. 2018.06.12 input form에 selection 및 deselection
  6. 2016.10.26 React 관련 메모
  7. 2013.11.19 socket.io 소켓방식 선언 및 플래시소켓 사용
  8. 2013.11.19 socket.io 쿠키가져오기
  9. 2011.12.08 가변적인 정규표현식이 필요할 경우
  10. 2011.04.01 주민번호,외국인번호,사업자번호 체크 Script 1
2022. 11. 14. 12:58

[Javascript] Trim()

if (!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
  };
}
2021. 7. 5. 07:30

[Javascript] Base64 encode

function convertBase64($target, str) {
    var Base64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=Base64._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/\r\n/g,"\n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}}

    $target.html(Base64.encode(str));
}

2021. 1. 26. 09:04

rowspan 처리하기

function rowspan(className){
var txt;
var rows;
$("." + className).each(function() {
txt = $(this).text();
if(txt.length === 0)
return true;

rows = $("." + className + ":contains('" + txt + "')");

if (rows.length > 1) {
rows.eq(0).attr("rowspan", rows.length);
rows.not(":eq(0)").remove();
}
});
}

rowspan("rowspan");

rowspan 을 원하는 td에 class 추가 호출하면 됨.

2020. 6. 18. 10:23

정규식 모음

정수

value.match(/^[0-9]+/);

실수

value.match(/^[0-9]+((\.[0-9]+)|\.)?/);

Date (월/일/년, 월-일-년)

value.match(/^(0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])[\/\-]\d{4}$/);

미국$(소수점 2자리)

value.match(/^[0-9]+((\.[0-9]{1,2})|\.)?/);


2018. 6. 12. 09:58

input form에 selection 및 deselection

$('#id').click(function() {
    $(this).select()
}).blur(function() {
    if(window.getSelection) {
        var sel = window.getSelection();
        if(sel.collapse)
            sel.collapse($(this)[0], 0); //firefox의 경우 removeAllRanges는 동작안되는 경우가 있음
        else
            sel.removeAllRanges();
    } else if(document.selection) {
        document.selection.empty();
    }
});
2016. 10. 26. 11:46

React 관련 메모

React 의 JSX 문법을 사용하기 위해서는 jsx 문법으로 파일(예 aaa.react.js)을 만들고 babel 로 .js 로 컴파일(aaa.js)해서 일반적인 js 문법 파일로 만드는 cli 방식 과

아래와 같이 npm 으로 babel 을 설치하면 생기는 browser.js 를 웹페이지에 포함하여 처리하는 방법이 있다.(아래 예제는 CDN사용)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="root">
 
    </div>
    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>
 
    <script type="text/babel">
        'use strict';
        ReactDOM.render(<h1>Hello</h1>document.getElementById('root'));
    </script>
</body>
</html>
cs


2013. 11. 19. 11:24

socket.io 소켓방식 선언 및 플래시소켓 사용


//기본적으로 flashsocket은 구동되지 않으므로 아래와 같이 사용할 소켓방식을 선언함
io.set('transports', ['websocket', 'flashsocket', 'htmlfile', 'xhr-polling', 'jsonp-polling']);

//플래시소켓을 사용할 경우 swf 파일을 페이접속할때 마다 다운받으므로
//정라우저 cache에 저장될 수 있도록 별도의 경로에 설정, socket.io.js 파일 이전에 선언함
WEB_SOCKET_SWF_LOCATION = '/public/fullbet/flash/WebSocketMainInsecure.swf';

//플래시 소켓을 사용할 경우 flash policy file server에서 정책파일을 다운로드 하는 동작을 한다

//port 843, 10843 포트를 방화벽에서 열고 아래 nodejs 3rd party 모듈인 FlashPolicyFileServer를 설치한다

npm install policyfile

https://github.com/3rd-Eden/FlashPolicyFileServer


var pf = require('policyfile').createServer(); pf.listen(); //flash socket 용 policy 서버 시작


2013. 11. 19. 11:16

socket.io 쿠키가져오기


//쿠키모듈이 설치되어 있어야함 : npm install cookie
var cookie = require('cookie');
io.sockets.on('connection', function(socket) {
	var cookies = cookie.parse(socket.handshake.headers['cookie']);
});

2011. 12. 8. 18:24

가변적인 정규표현식이 필요할 경우

정규표현식 등을 사용하여 치환을 해야 할 경우 replace 에 문자열 처리만 하면 한번밖에 치환이 되지 안는다.

아래와 같이 유동적이거나 여러개의 문자패턴을 치환하고자 할때 replace 의 정규표현식에서 문제가 생기게 된다.

var key = ['__A__','__B__'];
var str = '가나다__A__ 라마바 __A__ 사아자 __B__ 카타파 __B__';

for(var i in data) {
    str.replace(data[i], '문자'); -> 한개만 변경이 된다.
    str.replace(/data[i]/g, '문자'); -> 변경되지 않는다.
}


--------------------------------------------------------------------
해결 방법은 의외로 아주 간단한데 아래와 같이 정규식 객체를 생성해서 대입하는 것이다.

var key = ['__A__','__B__'];
var str = '가나다__A__ 라마바 __A__ 사아자 __B__ 카타파 __B__';
var reg_exp = null;

for(var i in data) {
   
reg_exp = new RegExp(data[i], 'g');
    str.replace(reg_exp, '문자');
}
2011. 4. 1. 10:26

주민번호,외국인번호,사업자번호 체크 Script

주민번호,외국인번호,사업자번호 체크 Script

1. 주민등록번호
2. 재외국인 등록번호
3. 사업자등록번호

등의 진위 여부를 체크할 수 있는 JavaScript입니다.
(정통부(?)에서 공개되어있던 스크립트일겁니다...)

사용법은
check_fgnno('외국인번호13자리');
check_juminno('주민번호13자리');
check_busino('사업자번호10자리');

----------------------------------------------------

<!--
// 재외국인 번호 체크
function check_fgnno(fgnno) {
       var sum=0;
       var odd=0;
       buf = new Array(13);
       for(i=0; i<13; i++) { buf[i]=parseInt(fgnno.charAt(i)); }
       odd = buf[7]*10 + buf[8];
       if(odd%2 != 0) { return false; }
       if( (buf[11]!=6) && (buf[11]!=7) && (buf[11]!=8) && (buf[11]!=9) ) {
               return false;
       }
       multipliers = [2,3,4,5,6,7,8,9,2,3,4,5];
       for(i=0, sum=0; i<12; i++) { sum += (buf[i] *= multipliers[i]); }
       sum = 11 - (sum%11);
       if(sum >= 10) { sum -= 10; }
       sum += 2;
       if(sum >= 10) { sum -= 10; }
       if(sum != buf[12]) { return false }
       return true;
}

// 주민번호 체크
function check_juminno(juminno) {
       if(juminno=="" || juminno==null || juminno.length!=13) {
               alert("주민등록번호를 적어주세요.");
               return false;
       }
       var jumin1 = juminno.substr(0,6);
       var jumin2 = juminno.substr(6,7);
       var yy         = jumin1.substr(0,2);     // 년도
       var mm     = jumin1.substr(2,2);     // 월
       var dd     = jumin1.substr(4,2);     // 일
       var genda = jumin2.substr(0,1);     // 성별
       var msg, ss, cc;

    // 숫자가 아닌 것을 입력한 경우
       if (!isNumeric(jumin1)) {
               alert("주민등록번호 앞자리를 숫자로 입력하세요.");
               return false;
       }
    // 길이가 6이 아닌 경우
       if (jumin1.length != 6) {
               alert("주민등록번호 앞자리를 다시 입력하세요.");
               return false;
       }
    // 첫번째 자료에서 연월일(YYMMDD) 형식 중 기본 구성 검사
       if (yy < "00" || yy > "99" ||
               mm < "01" || mm > "12" ||
               dd < "01" || dd > "31") {
               alert("주민등록번호 앞자리를 다시 입력하세요.");
               return false;
       }
    // 숫자가 아닌 것을 입력한 경우
       if (!isNumeric(jumin2)) {
               alert("주민등록번호 뒷자리를 숫자로 입력하세요.");
               return false;
       }
    // 길이가 7이 아닌 경우
       if (jumin2.length != 7) {
               alert("주민등록번호 뒷자리를 다시 입력하세요.");
               return false;
       }
    // 성별부분이 1 ~ 4 가 아닌 경우
       if (genda < "1" || genda > "4") {
               alert("주민등록번호 뒷자리를 다시 입력하세요.");
               return false;
       }
    // 연도 계산 - 1 또는 2: 1900년대, 3 또는 4: 2000년대
       cc = (genda == "1" || genda == "2") ? "19" : "20";
    // 첫번째 자료에서 연월일(YYMMDD) 형식 중 날짜 형식 검사
       if (isYYYYMMDD(parseInt(cc+yy), parseInt(mm), parseInt(dd)) == false) {
               alert("주민등록번호 앞자리를 다시 입력하세요.");
               return false;
       }
    // Check Digit 검사
       if (!isSSN(jumin1, jumin2)) {
               alert("입력한 주민등록번호를 검토한 후, 다시 입력하세요.");
               return false;
       }
       return true;
}

// 사업자등록번호 체크
function check_busino(vencod) {
       var sum = 0;
       var getlist =new Array(10);
       var chkvalue =new Array("1","3","7","1","3","7","1","3","5");
       for(var i=0; i<10; i++) { getlist[i] = vencod.substring(i, i+1); }
       for(var i=0; i<9; i++) { sum += getlist[i]*chkvalue[i]; }
       sum = sum + parseInt((getlist[8]*5)/10);
       sidliy = sum % 10;
       sidchk = 0;
       if(sidliy != 0) { sidchk = 10 - sidliy; }
       else { sidchk = 0; }
       if(sidchk != getlist[9]) { return false; }
       return true;
}


function isYYYYMMDD(y, m, d) {
       switch (m) {
       case 2:     // 2월의 경우
               if (d > 29) return false;
               if (d == 29) {
                    // 2월 29의 경우 당해가 윤년인지를 확인
                       if ((y % 4 != 0) || (y % 100 == 0) && (y % 400 != 0))
                               return false;
               }
               break;
       case 4:     // 작은 달의 경우
       case 6:
       case 9:
       case 11:
               if (d == 31) return false;
       }
    // 큰 달의 경우
       return true;
}
function isNumeric(s) {
       for (i=0; i<s.length; i++) {
               c = s.substr(i, 1);
               if (c < "0" || c > "9") return false;
       }
       return true;
}
function isLeapYear(y) {
       if (y < 100)
       y = y + 1900;
       if ( (y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0) ) {
               return true;
       } else {
               return false;
       }
}
function getNumberOfDate(yy, mm) {
       month = new Array(29,31,28,31,30,31,30,31,31,30,31,30,31);
       if (mm == 2 && isLeapYear(yy)) mm = 0;
       return month[mm];
}
function isSSN(s1, s2) {
       n = 2;
       sum = 0;
       for (i=0; i<s1.length; i++)
               sum += parseInt(s1.substr(i, 1)) * n++;
       for (i=0; i<s2.length-1; i++) {
               sum += parseInt(s2.substr(i, 1)) * n++;
               if (n == 10) n = 2;
       }
       c = 11 - sum % 11;
       if (c == 11) c = 1;
       if (c == 10) c = 0;
       if (c != parseInt(s2.substr(6, 1))) return false;
       else return true;
}
//-->