영문 자판으로 한글 입력 시 자동 전환하기
간혹 영문 자판 상태에서 한글을 입력하는 경우가 있습니다. 이런 경우 잘못을 인지하지 못하고 계속 입력하는 경우가 있는데 이를 뒤늦게 발견하면 다시 입력해야 합니다. 검색창에서 이런 실수가 많이 나타나고 있어서 아예 검색 포털에서는 사용자가 영문 자판으로 한글을 입력하면 혹시 이걸 찾은 것이 아니냐고 물어보기도 합니다.
이번 예제에서는 어떤 방식으로 영문으로 입력된 텍스트를 한글로 변경할 수 있는지 살펴봅니다.
예제에서 사용한 스크립트는 공개된 스크립트 예제를 참조했습니다.
출처 : http://www.theyt.net/
예제
English라고 표시된 TextArea 컴포넌트에 영문을 입력하면 Korean 항목에 한글이 표시됩니다. 반대로 Korean 항목에 한글을 입력하면 English 항목에 영문이 표시됩니다.
예제에서 사용한 핵심 기능
- oninput
TextArea 컴포넌트에 문자열을 입력할 때 발생하는 이벤트입니다. 예제에서는 별도 명령을 처리하는 버튼이 없고 TextArea 컴포넌트에 입력할 때 영문을 한글로 변경하도록 합니다.
- fromCharCode
인수로 전달된 유니코드값을 문자열로 반환하는 메소드입니다.
예제 구현 방법
1
Form 화면 구성하기
Static 컴포넌트로 "English", "Korean"이라는 문구를 표시하고 해당 문구 옆에 TextArea 컴포넌트를 배치합니다.
2
TextArea 컴포넌트 이벤트 함수 작성하기
TextArea 컴포넌트에 문자열을 입력할 때 이벤트가 처리되도록 합니다. oninput 이벤트 함수를 아래와같이 작성합니다. oninput 이벤트 함수 내에서는 실질적인 변환 작업을 진행하지는 않습니다. TextArea 컴포넌트에 값을 지정하는 부분을 보면 engTypeToKor, KorTypeToEng 라는 함수를 다시 호출하고 있습니다. 실제 변환 작업은 해당 함수에서 처리하고 있다는 것을 알 수 있습니다.
this.TextArea00_oninput = function(obj:nexacro.TextArea,e:nexacro.InputEventInfo)
{
if(obj.value == null || obj.value== '') {
this.TextArea01.set_value('');
} else {
this.TextArea01.set_value(this.engTypeToKor(obj.value));
}
};
this.TextArea01_oninput = function(obj:nexacro.TextArea,e:nexacro.InputEventInfo)
{
this.TextArea00.set_value(this.korTypeToEng(obj.value));
};3
변수 설정하기
이번 예제에서는 사용자가 영문, 한글 설정을 잘못한 상태에서 입력한 것을 찾아내는 것이 중요한 점입니다. 그래서 영문으로 입력했을때 그 키보드를 한글 설정에서 입력하면 어떤 문자열이 나올지를 판단해주면 됩니다. 변수로 설정하는 값은 같은 키보드를 눌렀을때 한글과 영문에서 어떤 글자가 찍히는지를 미리 지정해줍니다.
this.ENG_KEY = "rRseEfaqQtTdwWczxvgkoiOjpuPhynbml"; this.KOR_KEY = "ㄱㄲㄴㄷㄸㄹㅁㅂㅃㅅㅆㅇㅈㅉㅊㅋㅌㅍㅎㅏㅐㅑㅒㅓㅔㅕㅖㅗㅛㅜㅠㅡㅣ"; this.CHO_DATA = "ㄱㄲㄴㄷㄸㄹㅁㅂㅃㅅㅆㅇㅈㅉㅊㅋㅌㅍㅎ"; this.JUNG_DATA = "ㅏㅐㅑㅒㅓㅔㅕㅖㅗㅘㅙㅚㅛㅜㅝㅞㅟㅠㅡㅢㅣ"; this.JONG_DATA = "ㄱㄲㄳㄴㄵㄶㄷㄹㄺㄻㄼㄽㄾㄿㅀㅁㅂㅄㅅㅆㅇㅈㅊㅋㅌㅍㅎ";
영문은 그대로 나열해주면 되지만, 한글과 같은 경우 초성, 중성, 종성을 합쳐주어야 하기 때문에 별도 데이터를 변수로 관리합니다.
4
engTypeToKor 함수 작성하기
영문을 한글로 변경하기 위해서는 입력된 영문 자판에 맞는 한글 데이터를 찾아서 보여주면 됩니다. 먼저 입력된 값이 앞에서 설정한 영문 키보드 변수에 있는지 확인합니다. 아래 스크립트에서 p라는 값이 -1이라면 영문 키보드 변수에 없는 값이라고 판단하고 그 외의 경우에는 값에 따라 한글 키보드 값을 찾을 수 있습니다.
var ch = src.charAt(i); var p = this.ENG_KEY.indexOf(ch);
영문과 한글 키보드가 1:1로 연결되어 그대로 표기하면 되는 것이라면 편하겠지만, 한글은 초성, 중성, 종성을 합쳐주어야 하기 때문에 좀 더 복잡한 과정을 거칩니다. 입력된 영문에 해당하는 한글이 초성, 중성, 종성 중 어느 것인지 확인하고 makeHangul라는 함수에서 이를 다시 하나의 문자로 만들어줍니다.
if (nJong == -1) {
nJong = this.JONG_DATA.indexOf(this.KOR_KEY.charAt(p));
if (nJong == -1) {
res += this.makeHangul(nCho, nJung, nJong);
nCho = this.CHO_DATA.indexOf(this.KOR_KEY.charAt(p));
nJung = -1;
}
}전체 스크립트 코드는 소스를 참조해주세요.
5
makeHangul 함수 작성하기
fromCharCode 메소드는 유니코드 값을 입력하면 문자를 반환해줍니다.
this.makeHangul = function (nCho, nJung, nJong) {
return String.fromCharCode(0xac00 + nCho * 21 * 28 + nJung * 28 + nJong + 1);
};6
korTypeToEng 함수 작성하기
한글을 영문으로 변환하는 경우에는 합쳐져 있는 한글의 초성, 중성, 종성을 분해해주어야 합니다. 한글이 조합되는 경우 "눩"과 같은 경우 5개의 영문 자판과 연결되기 때문에 이를 분해하기 위해 5개 길이의 배열을 생성하고 글자를 분해해주는 작업을 진행합니다.
for (var i = 0; i < src.length; i++) {
var ch = src.charAt(i);
var nCode = ch.charCodeAt(0);
var nCho = this.CHO_DATA.indexOf(ch), nJung = this.JUNG_DATA.indexOf(ch), nJong = this.JONG_DATA.indexOf(ch);
var arrKeyIndex = [-1, -1, -1, -1, -1];
if (0xac00 <= nCode && nCode <= 0xd7a3) {
nCode -= 0xac00;
arrKeyIndex[0] = Math.floor(nCode / (21 * 28));
arrKeyIndex[1] = Math.floor(nCode / 28) % 21;
arrKeyIndex[3] = nCode % 28 - 1;전체 스크립트 코드는 소스를 참조해주세요.
7
QuickView로 확인하기
QuickView(Ctrl + F6)로 실행한 후 English, Korean 항목에 다른 언어를 입력해보고 결과를 확인합니다.
이메일 주소값 검증하기
이메일 주소값을 입력받은 항목이 있는 경우 입력한 값이 유효한 이메일 주소값인지 확인합니다.
예제
e-mail 항목에 이메일 주소값을 입력하고 [check] 버튼을 클릭하면 입력값이 유효한 값인지 아닌지 result 항목에 true/false로 표시합니다.
예제에서 사용한 핵심 기능
- indexOf
입력받은 문자열 중에 이메일 주소에서 사용할 수 없는 문자가 있는지 확인합니다. 사용할 수 없는 문자가 있는 경우 -1을 반환합니다.
예제 구현 방법
1
Form 화면 구성하기
Static 컴포넌트와 Edit 컴포넌트, Button 컴포넌트를 배치합니다.
2
Button 컴포넌트 클릭 이벤트 함수 작성하기
Button 컴포넌트 클릭 시 실행할 이벤트 함수를 작성합니다. fn_checkEmail 함수에서 이메일 주소값을 검증하고 검증된 결과값을 Edit 컴포넌트에 표시합니다.
this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
var sRtn = this.fn_checkEmail(this.Edit00.value);
this.Edit01.set_value(sRtn);
};3
fn_checkEmail 함수 작성하기
이메일 주소값으로 사용할 수 있는 문자를 모두 vChk 라는 변수에 담습니다. 그리고 입력된 이메일 주소값을 for 문 내에서 indexOf 메소드를 사용해 확인합니다.
this.fn_checkEmail = function(sValue)
{
var vChk = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890-._@";
for (var i = 0 ; i<sValue.length ; i++) {
if (vChk.indexOf(sValue.charAt(i)) < 0) {
trace(vChk.indexOf(sValue.charAt(i)));
return false;
}
}
return true;
}위와 같이 작성한 경우에는 잘못된 문자가 포함되는 것만을 방지할 수 있습니다. 중간에 "@" 문자가 없거나 도메인 형식이 잘못된 경우에는 체크하지 못합니다. 나머지 검증 처리를 위해서는 함수의 보완이 필요합니다.
전체 스크립트 코드는 소스를 참조해주세요.
4
QuickView로 확인하기
QuickView(Ctrl + F6)로 실행한 후 잘못된 형식의 이메일 주소를 입력하고 확인해봅니다.
전각문자와 반각문자 변환하기
한국어나 영어만 사용하는 경우에는 유용하지 않지만 일본어를 지원하는 애플리케이션을 만드는 경우에 필요한 기능입니다.
예제
전각 또는 반각문자를 입력하고 버튼을 클릭하면 반각 또는 전각문자로 변환해줍니다.
예제에서 사용한 핵심 기능
- charCodeAt
입력된 문자열 중 특정 인덱스 위치의 문자에 대한 유니코드값을 반환합니다. 예제에서는 유니코드값을 확인하고 변환을 위한 값을 더하거나 빼서 전각 또는 반각문자로 변환합니다.
- imemode
IME 모드를 지정할 수 있습니다. 해당 속성값은 IE 브라우저와 넥사크로 브라우저만 지원합니다. IE 브라우저를 사용하는 경우에는 전각 입력은 지원하지 않습니다.
예제 구현 방법
1
화면 구성하기
Static 컴포넌트와 Edit 컴포넌트, Button 컴포넌트를 배치합니다. Static 컴포넌트는 Edit 컴포넌트 앞에 텍스트를 표시하기 위해 사용합니다.
2
Edit 컴포넌트 속성 지정하기
전각 문자를 입력할 Edit 컴포넌트의 imemode 속성값을 "alpha,full"으로 지정하고 반각 문자를 입력할 Edit 컴포넌트의 imemode 속성값을 "alpha"로 지정합니다. 해당 속성은 넥사크로 브라우저로 실행하는 경우에만 유효하게 동작합니다.
웹브라우저에서 동작하는 것을 쉽게 확인하기 위해 value 속성값으로 미리 전각문자와 반각문자를 입력해놓습니다. 일반적인 한국어 IME에서 영문 전각문자는 아래와 같이 입력할 수 있습니다.
변환될 문자를 출력하는 Edit 컴포넌트의 enable 속성값은 false로 지정합니다.
3
Button 컴포넌트의 onclick 이벤트 함수 작성하기
입력된 문자열을 변환하기 위해 fn_fullToHalf, fn_halfToFull 함수를 호출하고 반환된 값을 Edit 컴포넌트의 value 속성값으로 지정합니다.
this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
this.Edit02.set_value(this.fn_fullToHalf(this.Edit00.value));
this.Edit03.set_value(this.fn_halfToFull(this.Edit01.value));
};4
전각문자와 반각문자 변환하기
입력된 문자열을 받아 length 속성값으로 확인된 길이만큼 반복하면서 유니코드값을 확인(charCodeAt)하고 전각 또는 반각문자로 변환하기 위해 연산한 다음 ASCII 문자 형식으로 변환(unescape)합니다.
this.fn_fullToHalf = function(sFull)
{
var sHalf = "";
var sChar = "";
for (var i = 0; i < sFull.length; i++) {
sChar = sFull.charCodeAt(i);
if (sChar == 12288) {
sHalf += unescape("%20");
}
else if ((sChar >= 65281) && (sChar <= 65374)) {
sHalf += unescape("%" + (sChar-65248).toString(16));
} else {
sHalf += sFull.charAt(i);
}
}
return sHalf;
}this.fn_halfToFull = function(sHalf)
{
var sFull = "";
var sChar = "";
for (var i = 0; i < sHalf.length; i++) {
if ((sHalf.charCodeAt(i) >= 32) && (sHalf.charCodeAt(i) <= 126)) {
if (sHalf.charCodeAt(i) == 32) {
sChar = unescape("%u"+(12288).toString(16));
} else {
sChar = sHalf.charCodeAt(i) + 65248;
}
} else {
sChar = sHalf.charCodeAt(i);
}
if (sHalf.charCodeAt(i) == 32) {
sFull = sFull + (sChar);
} else {
sFull = sFull + String.fromCharCode(sChar);
}
}
return sFull;
}5
QuickView로 확인하기
QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭해 변환되는 문자를 확인합니다.
문자열이 지정된 길이가 되도록 다른 문자로 채우기
특정 자리수만큼 문자열을 입력해야 하는 경우가 있습니다. 예제에서 설명한 방법을 활용하면 "01"을 입력해야 하는 항목에 "1"만 입력하면 앞자리 "0"을 자동으로 채우도록 할 수 있습니다.
예제
문자열을 입력하고 길이를 선택한 후 버튼을 클릭하면 왼쪽과 오른쪽에 "*" 문자로 채운 문자열을 표시합니다.
예제에서 사용한 핵심 기능
- padLeft, padRight
지정한 길이만큼 문자열의 왼쪽 또는 오른쪽 공간을 특정 문자로 채웁니다. 문자열이 지정된 길이보다 긴 경우에는 동작하지 않습니다.
예제 구현 방법
1
화면 구성하기
Edit 컴포넌트, Spin 컴포넌트, Button 컴포넌트를 배치합니다. Spin 컴포넌트는 문자열의 길이를 지정하기 위한 용도로 사용합니다. value 속성값은 20으로 지정합니다.
2
Button 컴포넌트의 onclick 이벤트 함수 작성하기
입력된 문자열을 변환하기 위해 padLeft, padRight 메소드를 호출하고 반환된 값을 Edit 컴포넌트의 value 속성값으로 지정합니다.
this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
this.Edit01.set_value(this.Edit00.value.padLeft(this.Spin00.value, "*"));
this.Edit02.set_value(this.Edit00.value.padRight(this.Spin00.value, "*"));
};3
QuickView로 확인하기
QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭해 변환되는 문자를 확인합니다.
문자열에 있는 하이픈(-) 제거하기
입력된 문자열에 포함된 하이픈을 제거하는 방법을 살펴봅니다.
예제
하이픈(-)이 들어간 문자를 입력받고 해당 문자를 제거해 표시합니다.
예제에서 사용한 핵심 기능
- replace
지정된 문자를 다른 문자로 바꿀 수 있습니다. 정규식을 사용하면 여러 문자를 동시에 바꿀 수 있습니다. 예제에서는 하이픈 문자를 모두 제거하기 때문에 정규식을 사용합니다.
예제 구현 방법
1
화면 구성하기
Edit 컴포넌트와 Button 컴포넌트를 배치합니다.
2
onclick 이벤트 함수 작성하기
입력받은 문자열 중에서 하이픈(-) 문자를 삭제합니다.
this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
var sRtn = this.Edit00.value;
var sRomoveHyphen = sRtn.toString().replace(/[-]/g,"");
this.Edit01.set_value(sRomoveHyphen);
};replace 메소드 대신 replaceAll 메소드를 사용할 수도 있습니다.
var sRomoveHyphen = nexacro.replaceAll(sRtn, "-", "");
3
QuickView로 확인하기
QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭해 변환되는 문자를 확인합니다.
주민등록번호 유효성 검사하기
입력된 문자열을 규칙에 따라 유효성을 검토하는 방식을 살펴봅니다.
예제
주민등록번호를 입력하면 유효성을 검사하고 성별값을 반환합니다.
예제에서 사용한 핵심 기능
- substr
지정된 위치부터 지정된 길이만큼의 문자열을 반환합니다. 원본 문자열 자체를 변경하는 것은 아닙니다.
예제 구현 방법
1
화면 구성하기
Edit 컴포넌트와 Button 컴포넌트를 배치합니다.
2
onclick 이벤트 함수 작성하기
입력받은 문자열을 지정된 규칙에 따라 유효성을 검사합니다. 주민등록번호의 유효성을 검증한 후 유효한 경우에는 성별을 체크해 Edit 컴포넌트에 표시합니다.
this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
var sJuminNo = this.Edit00.value;
var returnValue = true;
var arrChk = [2, 3, 4, 5, 6, 7, 8, 9, 2, 3, 4, 5];
var sFNum = sJuminNo.substr(0,6).toString();
var sLNum = sJuminNo.substr(6).toString();
var sYY = sFNum.substr(0,2);
var sMM = sFNum.substr(2,2);
var sDD = sFNum.substr(4,2);
var sGenda = sLNum.substr(0,1);
var nSum = 0;
var sCC = "20";
if (sYY < "00" || sYY > "99" || sMM < "01" || sMM > "12" || sDD < "01" || sDD > "31")
{
returnValue = false;
}
if (sGenda < "1" || sGenda > "4")
{
returnValue = false;
}
if (sGenda == "1" || sGenda == "2")
{
sCC = "19";
}
if (this.fn_isYYYYMMDD(parseInt(sCC + sYY), parseInt(sMM), parseInt(sDD)) == false)
{
returnValue = false;
}
for (var i = 0; i < 12 ; i++)
{
nSum += parseInt(sJuminNo.substr(i, 1)) * arrChk[i];
}
nSum = 11 - (nSum % 11);
nSum = nSum % 10;
if (nSum != parseInt(sJuminNo.substr(12, 1)))
{
returnValue = false;
}
var sRtn;
if(returnValue)
{
var vGender = sJuminNo.substr(6, 1);
if (vGender == '1' || vGender == '3' || vGender == '5' || vGender == '7')
{
sRtn = "M";
}
else if (vGender == '2' || vGender == '4' || vGender == '6' || vGender == '8')
{
sRtn = "W";
}
else
{
sRtn = "X";
}
} else {
sRtn = "X";
}
this.Edit01.set_value(sRtn);
};입력된 값 중에서 날짜에 해당하는 부분의 유효성을 검토합니다.
this.fn_isYYYYMMDD = function(nYY, nMM, nDD)
{
switch (nMM)
{
case 2:
if (nDD > 29)
{
return false;
}
if (nDD == 29)
{
if ((nYY % 4) == 0)
{
if ((nYY % 100) != 0 || (nYY % 400) == 0)
{
return false;
}
}
}
break;
case 4:
case 6:
case 9:
case 11:
if (nDD == 31)
{
return false;
}
break;
}
if(nMM > 12) return false;
return true;
};3
QuickView로 확인하기
QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭해 반환되는 값을 확인합니다.
법인등록번호 유효성 검사하기
입력된 문자열을 규칙에 따라 유효성을 검토하는 방식을 살펴봅니다.
법인등록번호의 유효성 검사 방식은 "법인 및 재외국민의 부동산등기용등록번호 부여에 관한 규칙 - 오류검색번호산출방식"에 따릅니다.
예제
법인등록번호를 입력하면 유효성을 검사하고 성별값을 반환합니다.
예제에서 사용한 핵심 기능
- substr
지정된 위치부터 지정된 길이만큼의 문자열을 반환합니다. 원본 문자열 자체를 변경하는 것은 아닙니다.
예제 구현 방법
1
화면 구성하기
Edit 컴포넌트와 Button 컴포넌트를 배치합니다.
2
onclick 이벤트 함수 작성하기
입력받은 문자열을 지정된 규칙에 따라 유효성을 검사합니다. 주민등록번호의 유효성을 검증한 후 유효한 경우에는 성별을 체크해 Edit 컴포넌트에 표시합니다.
this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
var arrChk = [1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2];
var Sum = 0;
var sComp = this.Edit00.value;
for (var i = 0; i < 12; i++)
{
Sum += arrChk[i] * sComp.charAt(i);
}
Sum = Sum % 10;
trace("substring : " + sComp.substring(12, 13));
Sum = 10 - Sum;
if (Sum > 5 )
{
Sum = 0;
}
if (Sum == sComp.substring(12, 13))
{
this.Edit01.set_value(true);
} else {
this.Edit01.set_value(false);
}
};3
QuickView로 확인하기
QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭해 반환되는 값을 확인합니다.
NULL 값 체크하기
입력된 문자열이 유효한 값인지 확인합니다.
예제
입력된 문자열이 없으면 true를 반환합니다. 버튼을 클릭해 강제적으로 빈값이나 null, undefined 값을 설정할 수 있습니다.
예제에서 사용한 핵심 기능
- undefined
undefined는 변수가 생성된 후 값을 지정하지 않았을때 주어지는 값입니다. 예제를 실행하고 바로 [NULL check] 버튼을 클릭하면 undefined로 처리가 되는데, 실제 Edit00을 살펴보면 value라는 속성값 자체가 없습니다.
예제 구현 방법
1
화면 구성하기
Edit 컴포넌트와 Button 컴포넌트를 배치합니다.
2
onclick 이벤트 함수 작성하기
입력받은 문자열을 지정된 규칙에 따라 유효성을 검사합니다.
this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
this.Edit01.set_value(this.fn_checkNull(this.Edit00.value));
};
this.fn_checkNull = function(sValue)
{
if (new String(sValue).valueOf() == "undefined")
{
return true;
}
if (sValue == null)
{
return true;
}
var sChkStr = new String(sValue);
if (sChkStr == null)
{
return true;
}
if (sChkStr.toString().length == 0 )
{
return true;
}
return false;
};3
유효하지 않은 값 설정하기
강제적으로 유효하지 않은 값을 설정합니다. [set undefined] 버튼 클릭 시에는 undefined라는 값을 value 속성값으로 설정합니다. 이때 hasOwnProperty 메소드로 value 속성 유무를 확인해보면 false값을 반환합니다.
this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
this.Edit00.set_value(null);
};
this.Button02_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
this.Edit00.set_value("");
};
this.Button03_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
this.Edit00.set_value(undefined);
trace(this.Edit00.hasOwnProperty('value'));
};4
QuickView로 확인하기
QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭해 반환되는 값을 확인합니다.
앞뒤 공백문자 제거하기
입력된 문자열의 앞, 뒤 공백문자를 제거합니다.
예제
버튼 클릭 시 입력된 문자열의 앞, 뒤 공백문자를 제거한 결과값을 반환합니다.
예제에서 사용한 핵심 기능
- trim
예제에서 fn_trim 함수 대신 String 오브젝트의 trim 메소드를 사용해도 같은 결과를 얻을 수 있습니다. 다만, trim 메소드는 값이 null이나 undefined처럼 정해져 있지 않은 경우에는 사용할 수 없습니다.
- nexacro.trim
String 오브젝트의 trim 메소드와 비슷하지만, 공백문자 대신 제거할 문자를 지정할 수 있습니다. nexacro.trim("#TEST#","#")처럼 실행하면 "TEST"라는 문자열을 반환합니다.
예제 구현 방법
1
화면 구성하기
Edit 컴포넌트와 Button 컴포넌트를 배치합니다.
2
onclick 이벤트 함수 작성하기
입력받은 문자열에서 공백문자를 제거합니다.
this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
this.Edit01.set_value("*"+this.fn_trim(this.Edit00.value)+"*");
};
this.fn_trim = function(sValue)
{
if (sValue == null)
{
return "";
}
if (new String(sValue).valueOf() == "undefined")
{
return "";
}
if (new String(sValue) == null)
{
return "";
}
var retVal = (new String(sValue)).replace(/^\s+|\s+$/g, '');
return retVal;
}3
QuickView로 확인하기
QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭해 반환되는 값을 확인합니다.
숫자 형식 여부 확인하기
입력된 문자열이 숫자인지 확인합니다.
예제
입력된 문자열이 숫자인지 확인하고 결과를 표시합니다. nexacro.isNumeric 메소드 결과도 같이 표시하는데, 음수나 소수의 경우에 nexacro.isNumeric 메소드에서는 false 값을 반환합니다.
예제에서 사용한 핵심 기능
- isNumeric
입력된 문자코드 또는 문자열이 숫자인지 여부를 확인합니다. 확인할 수 있는 범위의 제약이 있습니다.
- charAt
입력된 문자열의 길이만큼 포함된 문자를 모두 체크하는 용도로 사용합니다. 음수 또는 양수를 표시하는 기호와 소숫점 포함 여부를 확인합니다.
예제 구현 방법
1
화면 구성하기
Edit 컴포넌트와 Button 컴포넌트를 배치합니다.
2
onclick 이벤트 함수 작성하기
입력받은 문자열이 숫자인지 확인하고 Edit 컴포넌트에 결과를 표시합니다.
this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
var strchecknumber = this.fn_checkNumber(this.Edit00.value);
var strisNumeric = nexacro.isNumeric(this.Edit00.value);
this.Edit01.set_value(strchecknumber+', '+strisNumeric);
};
this.fn_checkNumber = function(sNum)
{
var sChar;
var nCnt = 0;
var bRtn;
for (var i = 0; i < sNum.length; i++)
{
sChar = sNum.charAt(i);
if (i == 0 && (sChar == "+" || sChar == "-" ))
{
bRtn = true;
}
else if (sChar >= "0" && sChar <= "9")
{
bRtn = true;
}
else if (sChar == ".")
{
nCnt++;
if (nCnt > 1)
{
bRtn = false;
break;
}
}
else
{
bRtn = false;
break;
}
}
return bRtn;
}3
QuickView로 확인하기
QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭해 반환되는 값을 확인합니다.
영문이나 숫자 여부 확인하기
입력된 문자열이 영문 또는 숫자인지 확인합니다.
예제
입력된 문자열이 영문인지 또는 숫자인지 확인하고 결과를 표시합니다.
예제에서 사용한 핵심 기능
- charCodeAt
문자열 중 지정된 인덱스에 해당하는 문자의 유니코드 값을 반환합니다.
예제 구현 방법
1
화면 구성하기
Edit 컴포넌트와 Button 컴포넌트를 배치합니다.
2
onclick 이벤트 함수 작성하기
입력받은 문자열이 숫자인지 확인하고 Edit 컴포넌트에 결과를 표시합니다.
this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
var bRtn = this.fn_checkAlpaNum(this.Edit00.value);
this.Edit01.set_value(bRtn);
};
this.fn_checkAlpaNum = function(sString)
{
var sVal = "";
var bVal = false;
for (var i = 0; i < sString.length; i++)
{
var sVal = sString.charCodeAt(i);
if ((sVal >= 48 && sVal <=57) || (sVal >=65 && sVal <= 90) || (sVal >= 97 && sVal <= 122))
{
bVal = true;
}
else
{
bVal = false;
break;
}
}
return bVal;
}https://en.wikipedia.org/wiki/ASCII#Character_set
48부터 57까지는 0~9까지의 숫자
65~90까지는 영문 대문자, 97~122까지는 영문 소문자
3
QuickView로 확인하기
QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭해 반환되는 값을 확인합니다.
날짜, 시간 유효성 확인하기
입력된 문자열이 유효한 날짜, 시간값인지 확인합니다.
예제
입력된 문자열이 유효한 날짜, 시간값인지 확인하고 결과를 표시합니다.
예제에서 사용한 핵심 기능
- substr
시작 위치 인덱스부터 지정된 길이만큼의 문자열을 반환합니다. 예제에서는 YYYY-MM-DD 형식으로 텍스트가 입력된다고 가정합니다.
예제 구현 방법
1
화면 구성하기
Edit 컴포넌트와 Button 컴포넌트를 배치합니다.
2
onclick 이벤트 함수 작성하기
입력받은 문자열이 유효한 날짜값인지 확인하고 Edit 컴포넌트에 결과를 표시합니다.
this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
var bRtn = this.fn_checkDate(this.Edit00.value);
this.Edit01.set_value(bRtn);
};
this.fn_checkDate = function(sDate)
{
var nYear = Number(sDate.toString().substr(0,4));
var nMonth = Number(sDate.toString().substr(5,2));
var nDate = Number(sDate.toString().substr(8,2));
if ( nMonth > 12 || nMonth < 1)
{
return false;
}
switch (nMonth)
{
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
if (nDate > 31 || nDate < 1)
{
return false;
}
break;
case 4:
case 6:
case 9:
case 11:
if (nDate > 30 || nDate < 1)
{
return false;
}
break;
case 2:
if (((nYear % 4 == 0) && (nYear % 100 != 0)) || (nYear % 400 == 0))
{
if (nDate > 29 || nDate < 1)
{
return false;
}
}
else
{
if (nDate > 28 || nDate < 1)
{
return false;
}
}
break;
default:
break;
}
return true;
}2월인 경우에는 윤년 여부를 확인합니다. 윤년은 4로 나누어지면서 100으로 나누어 떨어지지 않고 400으로 나누어 떨어지는 년입니다.
입력받은 문자열이 유효한 시간값인지 확인하고 Edit 컴포넌트에 결과를 표시합니다.
this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
var bRtn = this.fn_checkTime(this.Edit02.value);
this.Edit01.set_value(bRtn);
};
this.fn_checkTime = function(sTime)
{
var nHH = Number(sTime.toString().substr(0,2));
var nMM = Number(sTime.toString().substr(3,2));
var nSS = Number(sTime.toString().substr(6,2));
if (nHH > 24 || nHH < 0)
{
return false;
}
if (nMM > 59 || nMM < 0)
{
return false;
}
if (nSS > 59 || nSS < 0)
{
return false;
}
return true;
}3
QuickView로 확인하기
QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭해 반환되는 값을 확인합니다.