'팁&테크/Javascript'에 해당되는 글 19건
- 2022.11.14 [Javascript] Trim()
- 2021.07.05 [Javascript] Base64 encode
- 2021.01.26 rowspan 처리하기
- 2020.06.18 정규식 모음
- 2018.06.12 input form에 selection 및 deselection
- 2016.10.26 React 관련 메모
- 2013.11.19 socket.io 소켓방식 선언 및 플래시소켓 사용
- 2013.11.19 socket.io 쿠키가져오기
- 2011.12.08 가변적인 정규표현식이 필요할 경우
- 2011.04.01 주민번호,외국인번호,사업자번호 체크 Script 1
[Javascript] Trim()
if (!String.prototype.trim) {
String.prototype.trim = function () {
return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
};
}
[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));
}
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 추가 호출하면 됨.
정규식 모음
정수
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})|\.)?/);
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(); } });
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 |
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 서버 시작
socket.io 쿠키가져오기
//쿠키모듈이 설치되어 있어야함 : npm install cookie var cookie = require('cookie'); io.sockets.on('connection', function(socket) { var cookies = cookie.parse(socket.handshake.headers['cookie']); });
가변적인 정규표현식이 필요할 경우
아래와 같이 유동적이거나 여러개의 문자패턴을 치환하고자 할때 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, '문자');
}
주민번호,외국인번호,사업자번호 체크 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;
}
//-->