'가계부'에 해당되는 글 8건
금액에서 자릿수를 표시해 주는 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)가계부에 설치 기능 추가 :: 2008/10/02 01:41
어제 오늘 열심히 가계부의 설치기능을 추가했다.
생각같아서는 쉽게 제작될 것 같았는데 의외로 시간이 참 많이 걸리고 손도 많이 갔다.
Textcube의 설치 기능을 많이 참조했다. ㅋㅋ 역시 모방은 창조의 어머니인 것 처럼 설치기능을 참조하면서 내가 생각한 것을 구현하니까. PHP의 구석 구석까지 다 알지는 못해도 원하는 기능은 구현할 수 있었던 것 같다.
그런데 설치기능을 추가하다 보니까. 이젠 라이센스를 생각해 봐야할 것 같다.
라이센스를 어떤 것을 써야할지.. GPL을 써야할 지 아니면 다른 것을 써야할 지 아직은 잘 모르겠다.
라이센스에 관한 정보를 좀더 찾아서 추가해 놔야 할 것 같다.
배포를 위해서 버그 게시판도 추가했다. 사람들이 많이 다운로드할지는 의문이지만 ㅋㅋ 그래도 구색은 갖춰야 할 것 같아서 게시판도 zeroboard로 구현해 본다. 오랜만에 제로보드를 보니까. 많이 발전되었다. 전에 제로보드 4로도 유용하게 썻는데 지금은 더욱 좋아진 것 같다. 내 가계부도 이렇게 되야할 텐데. ^^
아 버그가 눈에 보이는데 벌써 시간이 이렇게나 늦어버려서리 자고 내일 수정해야겠다.
내일은 디자인 부분 손을 보고 가계부 입출력 내역이 제대로 처리되는지 테스트 케이스 만들어서 테스트 하면서 버그 잡아야 겠다. 졸립다. 아흠~~`
(0) (0)가계부에 환경설정 디자인 추가 :: 2008/09/27 13:57
가계부에 로그인 기능을 넣으니까 생각보다 해야할 것들이 많이 생겼다.
비밀번호 찾기, 비밀번호 변경, 아이디 생성, 정보 관리등 그래서 우선은 아이디 생성과 로그인은 기능을 추가했고 비밀번호 변경 페이지를 환경설정에 추가했다.
역시나 디자이너가 아니다 보니까. 넘 단순하다 좀 고민고민해서 디자인을 해본다고 조금씩 손을 보기는 했는데 전혀 티가 안난다. ㅡㅜ 나중에 디자이너를 영입해야 할 것 같다.
왜 그렇게 제로보드나 다른 오픈 코드들이 스킨을 쉽게 할 수 있도록 고민을 하는지 이해가 될 것 같다.
그리고 아이디를 생성하고 로그인하는 폼에 이번에 공부한 jQuery로 처리해봤다.
처음 하는 거라서 API가 많이 생소해서 책을 다시 찾아보고 자료도 찾아보고 해서 아주 간단한건데도 제작하는데 시간이 많이 걸린 것 같다.
다음은 아이디를 생성할 때 사용한 코드이다. 처음 사용한 거라서 잘 사용한 것인지는 모르겠지만 잘 작동한다. ㅋㅋ
$(function(){
$('#joinform').submit(function() {
var result = true;
$('#joinform input:text, #joinform input:password')
.each(function(n) {
if(this.value == '') {
alert(this.title+"을 입력해주세요.");
this.focus();
result = false;
return false;
}
})
if(!result)
return false;
// 비밀번호 체크
if($('#password').val() != $('#password2').val()) {
alert("다시 입력하신 비밀번호가 다름니다. 다시 입력해 주세요.");
$('#password2').val('').focus();
return false;
}
// 이메일 체크
if($('#email').val().match(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/) == null) {
alert("이메일 형식이 틀렸습니다. 다시 입력해 주세요.");
$('#email').val('').focus();
return false;
}
return true;
})
$('input[type=reset]').click(function() {
window.location.href = 'login.php';
})
})
</script>
만들어 보니까 jQuery가 상당히 편리하기는 하다.
main과 자산관리 부분도 jQuery로 수정하면서 UI부분도 보완해야 겠다.
(0) (0)