Global

RGB 색상 코드 변경하기

색상값을 입력할때 6자리 영문자를 입력하기도 하고 3개의 숫자를 지정하기도 합니다. 같은 값이지만 표시 방식이 16진수인지(HEX) 아니면 우리가 일반적으로 사용하는 10진수인지에 따라 다르게 표시될 뿐입니다. HTML에서는 6자리 영문자를 입력하는 방식이 편하기 때문에 HEX 코드를 주로 사용합니다.

예제

16진수 코드(HEX)를 입력하고 버튼을 클릭하면 RGB 값으로 표시해주고, RGB 값을 입력하고 버튼을 클릭하면 16진수 코드로 표시합니다. 값을 표시하면서 해당 값에 해당하는 색상으로 Form 배경색을 변경합니다.

sample_global_01.xfdl

예제에서 사용한 핵심 기능

parseInt

문자열을 정수로 반환해주는 메소드입니다. 두번째 파라미터로 진법을 지정할 수 있습니다. parstInt(16진수, 16) 이런 식으로 지정해주면 10진수로 변환된 값을 반환합니다.

예제 구현 방법

1

화면 구성하기

값을 입력할 수 있는 Edit 컴포넌트와 변환 기능을 처리할 Button 컴포넌트를 배치합니다.

예제에서는 Edit 컴포넌트가 자동으로 생성되는 순서에 따라 id값을 지정하는 기본 상태에서 수정하지 않았습니다. 하지만 이렇게 하는 경우에는 컴포넌트가 많아졌을때 어떤 id값이 어떤 컴포넌트인지 명확하게 아는 것이 쉽지 않습니다. 내부적으로 네이밍 규칙을 정해 지정하는 것이 작업에 도움을 줄 수 있습니다.

2

Button 컴포넌트 이벤트 함수 작성하기 (fn_hexToDec)

실제 변환 작업은 fn_hexToDec 라는 함수에서 처리합니다. 입력된 6자리 영문자 값을 받아서 대문자로 변환해주고(toUpperCase) 2자리씩 잘라서 10진수로 표기하도록 변경합니다(parseInt). 변환된 값은 Edit 컴포넌트에 표시하도록 value 속성값으로 지정합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.fn_hexToDec(this.Edit00.value);
};

this.fn_hexToDec = function(sHex)
{
	sHex = sHex.toUpperCase();
	var nRed   = parseInt(sHex.substring(0,2),16);
	var nGreen = parseInt(sHex.substring(2,4),16);
	var nBlue  = parseInt(sHex.substring(4),16);

	this.Edit01.set_value(nRed);
	this.Edit02.set_value(nGreen);
	this.Edit03.set_value(nBlue);

	this.set_background("#" + sHex);
}

3

Button 컴포넌트 이벤트 함수 작성하기 (fn_decToHex)

이번에는 10진수로 입력된 값을 HEX 값으로 표기합니다. 입력받은 값을 숫자로 바꾸어주고(toNumber) 16진수로 변환해줍니다(toString(16)). 이 과정에서 1자리 문자가 나올 수도 있는데 문자열 길이를 체크해서 2보다 작은 경우에는 앞에 "0"을 붙여줍니다.

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.fn_decToHex(this.Edit04.value, this.Edit05.value, this.Edit06.value); 
};

this.fn_decToHex = function(nRed, nGreen, nBlue)
{
	var sHexRed = nexacro.toNumber(nRed).toString(16);
	var sHexGreen = nexacro.toNumber(nGreen).toString(16);
	var sHexBlue = nexacro.toNumber(nBlue).toString(16);
	
	sHexRed = sHexRed.length<2?"0"+sHexRed:sHexRed;
	sHexGreen = sHexGreen.length<2?"0"+sHexGreen:sHexGreen;
	sHexBlue = sHexBlue.length<2?"0"+sHexBlue:sHexBlue;
	
	var sHex = sHexRed.toUpperCase() + sHexGreen.toUpperCase() + sHexBlue.toUpperCase();
    this.Edit07.set_value(sHex);
	this.set_background("#" + sHex);
}

4

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행한 후 값을 입력하면서 확인해봅니다.

입력할 수 있는 값의 범위를 제한하지 않았기 때문에 범위가 벗어나는 값을 입력하면 Form의 색상이 바뀌지 않습니다.

URI 변환하기

가끔 한글로 표시된 문자열을 복사해서 다른 곳에 붙여넣으면 이상한 문자로 변환되는 경우가 있습니다. 예를 들어 위키피디아에서 유니코드 항목을 찾으면 주소창에는 유니코드라는 한글이 보이는데 URL을 복사해서 다른 곳에 붙여넣으면 이상하게 표시됩니다. 이런 문자를 인코딩된 URI(Uniform Resource Identifier)라고 합니다.

예제

문자열을 입력하면 인코딩된 URI값으로 변환하고 인코딩된 URI값을 입력하면 한글로 변환합니다.

sample_global_02.xfdl

예제에서 사용한 핵심 기능

encodeURI, decodeURI

텍스트 문자열을 인코딩된 URI로 변환하거나 인코딩된 URI를 텍스트 문자열로 변환합니다.

예제 구현 방법

1

화면 구성하기

Static 컴포넌트와 Edit 컴포넌트, Button 컴포넌트를 배치합니다. Static 컴포넌트는 Edit 컴포넌트 앞에 텍스트를 표시하기 위해 사용합니다.

2

Button 컴포넌트의 onclick 이벤트 함수 작성하기

입력된 문자열을 변환하기 위해 encodeURI, decodeURI 메소드를 바로 호출하고 반환된 값을 Edit 컴포넌트에 보여줍니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Edit02.set_value(encodeURI(this.Edit00.value));
	try	{
		this.Edit03.set_value(decodeURI(this.Edit01.value));
	}	catch (e)	{
		this.Edit03.set_value(e.name+": "+e.message);
	}
};

decodeURI 메소드 실행 시 인코딩된 URI값이 아닌 값을 입력한 경우에는 URIError로 처리합니다.

3

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭해 변환되는 문자를 확인합니다.

유니코드 변환하기

유니코드로 변환하는 작업은 사용자에게 보여주는 용도보다는 연산이나 다른 변환 작업을 위해 사용합니다.

예제

문자열을 입력하면 유니코드로 변환하고 다시 문자열로 변환합니다.

sample_global_03.xfdl

예제에서 사용한 핵심 기능

escape, decodeURI

텍스트 문자열을 유니코드로 변환하거나 유니코드값을 텍스트 문자열로 변환합니다.

예제 구현 방법

1

화면 구성하기

Edit 컴포넌트, Button 컴포넌트를 배치합니다. 첫번째 Edit 컴포넌트에 입력된 문자열을 두번째 Edit 컴포넌트에 유니코드로 변환해 보여주고 변환된 유니코드값을 다시 세번째 Edit 컴포넌트에 문자열로 변환해 표시합니다.

2

Button 컴포넌트의 onclick 이벤트 함수 작성하기

입력된 문자열을 변환하기 위해 encodeURI, decodeURI 메소드를 바로 호출하고 반환된 값을 Edit 컴포넌트에 보여줍니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Edit01.set_value(escape(this.Edit00.value));
	this.Edit02.set_value(unescape(this.Edit01.value));
};

3

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭해 변환되는 문자를 확인합니다.

function 찾아서 실행하기

typeof 메소드를 사용하면 Form 오브젝트의 자식이 어떤 형태인지 확인할 수 있습니다. 예제에서는 function을 찾아서 실행하는 방법을 살펴봅니다.

예제

function 이름을 입력하면 해당 이름의 function이 있는지 확인하고 있다면 해당 function을 실행합니다.

sample_global_04.xfdl

예제에서 사용한 핵심 기능

typeof

"number", "string", "boolean", "object", "function" 값을 반환합니다. 산언되지 않는 값인 경우에는 "undefined"를 반환합니다.

예제 구현 방법

1

화면 구성하기

Edit 컴포넌트, Button 컴포넌트를 배치합니다.

2

Button 컴포넌트의 onclick 이벤트 함수 작성하기

입력된 문자열이 Function인지 확인하고 Function인 경우에는 실행하고 그렇지 않은 경우에는 입력된 문자열의 타입을 반환합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var strfn = this.Edit00.value.toString();
	if(typeof(this[strfn])=='function')
	{
		this[strfn]();
	}
	else
	{
		this.Edit00.set_value(strfn+' is not Function. is '+typeof(this[strfn]));
	}
};

this.fn_test = function()
{
	this.Edit00.set_value(this.Edit00.value.toString()+' is Function');
}

Edit 컴포넌트 클릭 시 출력된 값은 지워줍니다.

this.Edit00_oneditclick = function(obj:nexacro.Edit,e:nexacro.EditClickEventInfo)
{
	this.Edit00.set_value();
};

3

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행한 후 function 명을 입력하고 버튼을 클릭합니다.