php number format for javascript

PHP 함수로 존재하는 number_format 함수를 Javascript 함수로 구현 하였습니다. 사용방법은 php와 동일 합니다. /** * PHP 함수 number_format 같이 천자리마다 ,를 자동으로 찍어줌 * @param num number|string : 숫자 * @param decimals int default 0 : 보여질 소숫점 자리숫 * @param dec_point char default . : 소수점을 대체 표시할 문자 * @param thousands_sep char default , : 천자리 ,를 대체 표시할 문자 * @returns {string} */ function number_format(num, decimals, dec_point, thousands_sep) { num = parseFloat(num); if(isNaN(num)) return ‘0’; if(typeof(decimals) == ‘undefined’) decimals = 0; if(typeof(dec_point) == ‘undefined’) dec_point = ‘.’; if(typeof(thousands_sep) == ‘undefined’) thousands_sep = ‘,’; decimals = Math.pow(10, decimals); Continue reading php number format for javascript

카테고리 셀렉트박스를 동적으로 생성하고 삭제하기

카테고리를 선택 등록을 위하여 셀렉트박스를 이용하는 경우가 있는대 이 때 셀렉트박스를 매번 만들어주고 삭제 해야 하는데 이를 동적으로 처리 하도록 하는 스크립트이다. 하위 레벨에 내용이 존재 하면 계속해서 추가적으로 셀렉트 박스를 생성한다. 하위 카테고리를 모두 펼친상태에서 다시 상위를 선택 하면 하위 카테고리를 자동으로 삭제 한다. 예제는 여기를 참고 : http://blog.munilive.com/ex/javascript/category_selectbox.php 데이터는 ajax를 통하여 json 형식으로 받아오면 된다. 해당부분은 구현하지 않았다. 스크립트 소스 function selectCategory(obj) { var ag_idx = obj.value; var ag_depth = obj.getAttribute(“depth”); var felm = getObjectFormAuthGroup(); for(var i=0;i<felm.ag_parent.length;i++) { if(ag_depth < felm.ag_parent[i].getAttribute(“depth”)) { felm.ag_parent[i].remove(); } else { if(ag_idx) felm.ag_parent[i].disabled = true; } } if(ag_idx) { ag_depth++; getAuthGroupChildren(ag_idx, ag_depth); } } Continue reading 카테고리 셀렉트박스를 동적으로 생성하고 삭제하기

javascript foreach 사용하기

Javascript에서 배열에 담긴 key와 value 를 가져오기 위해서는 for 문을 아래 예와 같이 이용하면 PHP에서 사용하는 foreach 와 같은 효과를 얻을 수 있다. var arr = new Array(‘aaa’, ‘bbb’, ‘ccc’, ‘ddd’); for(var key in arr) { document.write(key + ” = ” + arr[key] + “<br />”); }   덤으로 배열에 담긴 값을 셀렉트박스에 추가 하는 소스를 첨부한다. <select name=”fruit_selectbox” id=”fruit_selectbox”> </select> <script type=”text/javascript”> var data = new Array(“사과”, “배”, “귤”, “딸기”, “바나나”, “오렌지”); var obj = document.getElementById(“fruit_selectbox”); obj.options.length = 0; obj.options[0] = new Option(“과일선택”, “”); for(var key in data) { var value = data[key]; obj.options[obj.options.length] = new Option(value, key); } Continue reading javascript foreach 사용하기

웹페이지 로딩시 자바스크립트의 실행을 지연시키는 속성

브라우저가 웹페이지를 파싱할때 스크립트 부분을 만나면 파싱을 멈추고 해당 스크립트를 다운받아 실행 하는데 이를 지연시킬 수 있는 속성으로 defer, async 을 사용 할 수 있습니다. async 속성은 HTML5 부터 추가된 속성이다. 사용방법은 아래와 같이 script 태그에 해당 속성을 추가 해주면된다. <script defer src=””></script> // 또는 <script async src=””></script> 두개의 차이점으로는 스크립트가 실행되는 시점이 다른데 defer의 경우 문서의 스크립트 부분을 만나면 해당스크립트를 파싱과 동시에 다운 받은뒤 파싱이 끝나면 해당 스크립트를 실행하고, async의 경우 파싱과 동시에 스크립트 파일을 다운 받은뒤 스크립트의 다운이 모두 끝나면 바로 스크립트를 실행 한다. 아래 이미지는 http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/ 에서 제공하는 javascript의 실행 시점에 대한 이미지 이다. defer, async 속성은 브라우저별로 적용되는 Continue reading 웹페이지 로딩시 자바스크립트의 실행을 지연시키는 속성

자바스크립트로 주간(일~토) 셀렉트 박스 만들기

년도와 월을 선택하면 해당 년/월에 포함 되어있는 주 시작일과 종료일을 셀렉트박스로 만들게 하는 함수 입니다. 요령 모양의 셀렉트 박스 입니다. 작동되는 모습은 예제링크를 통해서 확인해주세요. 예제링크 function makeWeekSelectOptions() { var year = $(“#sh_year”).val(); var month = $(“#sh_month”).val(); var today = new Date(); var sdate = new Date(year, month-1, 01); var lastDay = (new Date(sdate.getFullYear(), sdate.getMonth()+1, 0)).getDate(); var endDate = new Date(sdate.getFullYear(), sdate.getMonth(), lastDay); var week = sdate.getDay(); sdate.setDate(sdate.getDate() – week); var edate = new Date(sdate.getFullYear(), sdate.getMonth(), sdate.getDate()); var obj = document.getElementById(“sh_week”); obj.options.length = 0; var seled = “”; while(endDate.getTime() >= edate.getTime()) { var sYear = sdate.getFullYear(); var sMonth = (sdate.getMonth()+1); Continue reading 자바스크립트로 주간(일~토) 셀렉트 박스 만들기