'jQuery'에 해당되는 글 4건
얼랭을 공부하기 시작했습니다. :: 2008/10/09 10:14
^^.
요사이 새로운 프로그래밍 언어를 공부하는 것에 재미들린 것 같습니다.
올 초에는 공개형 가게부를 만들어 볼까해서 PHP를 공부했는데 생각보다는 개념이 좀 어렵더라고요.
C/C++이나 Java를 주 개발언어로 개발을 했던 나에게 PHP의 변수 정의라든가. foreach의 구분은 새로운 충격으로 다가왔습니다.
아직까지도 API들이 무진장 많이 있어서 다 외우지는 못하고 배열 또는 문자열 함수를 찾느라 아직도 API를 참조해 가면서 웹가게부를 만들어 보고 있습니다. PHP도 5버전에서는 객체 사용을 일반적인 객체언어와 비슷하게 사용할 수 있어서 그래도 좀더 객체에 맞게 만들 수가 있을 것 같은데 또 웹으로 제작을 해보니까 그렇게 객체로 만들 수 있는 것에 한계가 있는 것 같아요 아직은 PHP에 대해서 다 파악한게 아니라 확답은 못하겠지만요.
C나 Java를 벗어나 새로운 눈을 가지게 된 느낌입니다.
PHP로 무언가를 만들다 보니까 Javascript와 css는 필수라는 생각이 들더군요 그래서 Javascript도 좀 공부하기는 했는데 본격적으로 jQuery라는 javascript 라이브러리를 공부를 했어요 이것또한 client 측 프로그래밍 언어로 PHP와 비슷하다 생각이 듭니다. 또한 유연한 확장성이 일품인 것 같아요. jQuery를 사용한지는 얼마되지 않았는데 지금은 jQuery Plugin도 만들어보고 어렵지 않으면서 상당히 재미있는 언어인거 같아요.
그리고 어제부터 얼랭이라는 함수형 언어를 공부하기 시작했어요. 함수형언어라 개념이 상이할 것 같아서 걱정이 많이 되기는 하지만 또 다른 세상을 바라볼 수 있는 눈을 가질 수 있다는 생각에 재미있게 공부할 것같아요.
이러다가 원래 사용했던 C/Java를 잘못하게 될지 걱정이 들기도 하네요. ㅋㅋ
그래도 다음에는 스몰토크나 오브젝트-C, 리스프 등의 언어도 공부해보고 싶어요.
(0) 
(0)금액에서 자릿수를 표시해 주는 jQuery plugin :: 2008/10/02 23:25
밑에서 만들었던 javascript를 jQuery의 Plugin으로 개발했다.
기능은 동일하게 숫자의 3자리마다 자릿표시로 콤마(,)를 표시할 수 있고, 문자가 입력되면 제거한다.
jQuery의 체인연결이 가능하도록 했다.
두개의 메소드를 구현했다.
- toPrice(cipher)
- 엘리멘트의 value에서 문자열을 제거한 숫자값에 3자리수마다 콤마(,)로 구분해 금액형태로 변경하고 엘리멘트 체인을 반환한다.
- toPrice에 cipher의 숫자를 넣으면 해당 숫자의 자릿수만큼 콤마로 자릿수를 표시한다. 값을 넣지 않으면 자동으로 3이 설정된다.
- getOnlyNumber(data)
- 엘리멘트의 value에서 문자를 제거한 숫자만을 반환한다.
- data값이 있을 경우에는 선택된 엘리멘트에 data에서 문자를 제거한 숫자만의 집합을 value값으로 대입하고 해당 엘리멘트를 체인 반환한다.
- data값이 없을 경우에는 선택된 엘리멘트의 value에서 문자를 제거한 숫자 집합을 문자열로 반환한다.
주의 : 하지만 이 plugin은 21자리의 숫자까지만 처리가능하다. 그리고 음수와 실수는 표현하지 못한다.
이 데모는 여기에서 확인해 볼 수 있다.
다음은 plugin의 full source이다.
(function($) {
$.fn.toPrice = function(cipher) {
var strb, len, revslice;
strb = $(this).val().toString();
strb = strb.replace(/,/g, '');
strb = $(this).getOnlyNumeric();
strb = parseInt(strb, 10);
if(isNaN(strb))
return $(this).val('');
strb = strb.toString();
len = strb.length;
if(len < 4)
return $(this).val(strb);
if(cipher == undefined || !isNumeric(cipher))
cipher = 3;
count = len/cipher;
slice = new Array();
for(var i=0; i<count; ++i) {
if(i*cipher >= len)
break;
slice[i] = strb.slice((i+1) * -cipher, len - (i*cipher));
}
revslice = slice.reverse();
return $(this).val(revslice.join(','));
}
$.fn.getOnlyNumeric = function(data) {
var chrTmp, strTmp;
var len, str;
if(data == undefined) {
str = $(this).val();
}
else {
str = data;
}
len = str.length;
strTmp = '';
for(var i=0; i<len; ++i) {
chrTmp = str.charCodeAt(i);
if((chrTmp > 47 || chrTmp <= 31) && chrTmp < 58) {
strTmp = strTmp + String.fromCharCode(chrTmp);
}
}
if(data == undefined)
return strTmp;
else
return $(this).val(strTmp);
}
var isNumeric = function(data) {
var len, chrTmp;
len = data.length;
for(var i=0; i<len; ++i) {
chrTmp = str.charCodeAt(i);
if((chrTmp <= 47 && chrTmp > 31) || chrTmp >= 58) {
return false;
}
}
return true;
}
})(jQuery);
이 plugin은 다음의 html 구문에서 테스트 해볼 수 있다.
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript" src="jquery.money.js" ></script>
<script type="text/javascript">
$(function() {
$('#price').keyup(function(event) {
$(this).toPrice();
var strText = $(this).getOnlyNumeric();
// var strText = getOnlyNumeric($(this).val());
$('#number').text(strText);
})
});
</script>
<body>
<input type="text" id="price" name="price" style="text-align: right;" /><br>
<div id="number"></div>
</body>
</html>
(0) (0)-
plugin+event-으로 이어질 블로그링
Tracked from blogring.org | 2009/01/05 17:43 | DELplugin+event-에 관한블로그를 요약한 것입니다.
금액에서 자릿수를 표시해 주는 Javascript :: 2008/10/02 15:13
가계부에서 금액을 입력할 때 3자리마다 콤마(,)를 입력해야 금액을 쉽게 구분할 수 있을 것 같아서
기본적으로 3자릿수마다 ,를 자동으로 찍어주는 Javascript를 만들었다. 만들고 나서보니 문자열이 들어가면 자동으로 지우고 그리고 앞의 숫자가 0일 경우에는 0을 제거하는 로직까지 추가해 보니 쓸만한 금액 표시기가 된것 같다.
그리고 좀더 범용성을 위해서 2번째에 자릿수를 입력하게 해서 미화 같은 경우에는 4자릿수마다 표시하므로 4를 입력하면 4번째 자릿수마다 ,로 표시를 해준다. 설마 구분자를 콤마(,)말고 다른 것을 사용하는 없겠지 ^^
// 입력되는 값을 3자리마다 콤마(',')를 표시할 수 있게 한다.
// cipher로 ,를 표시한 자릿수를 입력한다. 입력하지 않으면 기본값으로 3이 설정된다.
function toPrice(money, cipher) {
var len, strb, revslice;
strb = money.toString();
strb = strb.replace(/,/g, '');
strb = getOnlyNumeric(strb);
strb = parseInt(strb, 10);
if(isNaN(strb))
return '';
strb = strb.toString();
len = strb.length;
if(len < 4)
return strb;
if(cipher == undefined)
cipher = 3;
count = len/cipher;
slice = new Array();
for(var i=0; i<count; ++i) {
if(i*cipher >= len)
break;
slice[i] = strb.slice((i+1) * -cipher, len - (i*cipher));
}
revslice = slice.reverse();
return revslice.join(',');
}
// 문자열을 제거하고 숫자만 반환한다.
function getOnlyNumeric(str) {
var chrTmp, strTmp;
var len;
len = str.length;
strTmp = '';
for(var i=0; i<len; ++i) {
chrTmp = str.charCodeAt(i);
if((chrTmp > 47 || chrTmp <= 31) && chrTmp < 58) {
strTmp = strTmp + String.fromCharCode(chrTmp);
}
}
return strTmp;
}
사용 예제로 다음을 만들어서 테스트할 수 있다.
<script type="text/javascript" src="money.js" ></script>
<script type="text/javascript">
function money() {
priceButton = document.getElementById("price");
// alert("priceButton : "+priceButton.value);
num = toPrice(priceButton.value);
priceButton.value = num;
document.getElementById('number').innerText = getOnlyNumeric(num);
}
</script>
<body>
<input type="text" id="price" name="price" style="text-align: right;" onkeyup="money()" /><br>
<div id="number"></div>
</body>
</html>
이제 이걸 jQuery Plugin 으로 만들어야 겠다. ^^
다음은 예제 파일이다.
money.zip(0) (0)