javascript - isNaN, isNumeric

 

isNaN( value )

자바스크립트에서 isNaN 은 숫자가 아닌 값을 찾는 함수입니다.
isNaN ( value ) 의 value가 숫자가 아니라면 true, 숫자라면 false라는건데..원하는대로 나올까요?
숫자가 true로 반환하려면 반대로 해야겠죠? !isNaN( value )로 테스트 해봅시다.





















!isNaN( "-10" ) // true
!isNaN( "+10" ) // true
!isNaN( "0" ) // true
!isNaN( "0xFF" ) // true
!isNaN( "8e5" ) // true
!isNaN( "3.1415" ) // true
!isNaN( "0144" ) // true
!isNaN( ".423" ) // true
!isNaN( "" ) // true
!isNaN( "432,000" ) // false
!isNaN( "23,223.002" ) // false
!isNaN( "3,23,423" ) // false
!isNaN( "-0x42" ) // false
!isNaN( "7.2acdgs" ) // false
!isNaN( {} ) // false
!isNaN( NaN ) // false
!isNaN( null ) // true
!isNaN( true ) // true
!isNaN( false ) // true
!isNaN( Infinity ) // true
!isNaN( undefined ) // false
이건 누구든 원하는 결과가 아니죠?
"", null, true, false, Infinity 등  이런 값은 숫자가 아닌데 숫자라고 체크되네요.
이건 사용하지 말아야겠습니다.


jQuery.isNumeric( value )

jQuery에서 제공하고 있는 유틸리티 중에 하나인 jQuery.isNumeric() 에 대해 알아봅시다.
자세한 사항은 http://api.jquery.com/jQuery.isNumeric/ 에서 확인해 보세요.
$.isNumeric( value ) 의 value가 숫자인지 체크해서 boolean(true or false)값으로 반환합니다.
그러면 어떤 값이 숫자형인 true로 반환되고, 어떤 값이 숫자 아닌 false로 반환되는지 테스트해봤습니다.





















$.isNumeric( "-10" ) // true
$.isNumeric( "+10" ) // true
$.isNumeric( "0" ) // true
$.isNumeric( "0xFF" ) // true
$.isNumeric( "8e5" ) // true
$.isNumeric( "3.1415" ) // true
$.isNumeric( "0144" ) // true
$.isNumeric( ".423" ) // true
$.isNumeric( "" ) // false
$.isNumeric( "432,000" ) // false
$.isNumeric( "23,223.002" ) // false
$.isNumeric( "3,23,423" ) // false
$.isNumeric( "-0x42" ) // false
$.isNumeric( "7.2acdgs" ) // false
$.isNumeric( {} ) // false
$.isNumeric( NaN ) // false
$.isNumeric( null ) // false
$.isNumeric( true ) // false
$.isNumeric( false ) // false
$.isNumeric( Infinity ) // false
$.isNumeric( undefined ) // false

위 테스트 결과를 보시면, 16진수, 10진수 모두 체크하여 true 값을 반환해줍니다.
isNaN에서 있던 오류는 없어서 숫자형 체크에는 참 편리하게 사용할 수 있겠네요.
그런데, 만약에 숫자를 체크할때 숫자 단위 기호가 있는 432,000 를 true로 반환하고 싶거나,
10진수만을 true로 반환하고 싶을때도 있겠죠. 다음을 보시죠.





자바스크립트 정규식 숫자 체크

자바스크립트 정규식(RegExp)을 사용해서 함수를 만들어 봅시다.
일단 10진수를 체크하려면 여러 경우가 있는데요
양수/음수기호(+,-), 자릿수구분기호(12,000), 소수점(1.14159) 사용 여부를 선택해야합니다.
아래 주석을 보고 상황에 맞는 정규식을 사용하세요























function isNumeric(num, opt){
  // 좌우 trim(공백제거)을 해준다.
  num = String(num).replace(/^\s+|\s+$/g, "");
 
  if(typeof opt == "undefined" || opt == "1"){
    // 모든 10진수 (부호 선택, 자릿수구분기호 선택, 소수점 선택)
    var regex = /^[+\-]?(([1-9][0-9]{0,2}(,[0-9]{3})*)|[0-9]+){1}(\.[0-9]+)?$/g;
  }else if(opt == "2"){
    // 부호 미사용, 자릿수구분기호 선택, 소수점 선택
    var regex = /^(([1-9][0-9]{0,2}(,[0-9]{3})*)|[0-9]+){1}(\.[0-9]+)?$/g;
  }else if(opt == "3"){
    // 부호 미사용, 자릿수구분기호 미사용, 소수점 선택
    var regex = /^[0-9]+(\.[0-9]+)?$/g;
  }else{
    // only 숫자만(부호 미사용, 자릿수구분기호 미사용, 소수점 미사용)
    var regex = /^[0-9]$/g;
  }
 
  if( regex.test(num) ){
    num = num.replace(/,/g, "");
    return isNaN(num) ? false : true;
  }else{ return false;  }
}
아래 결과입니다.























isNumeric( "-10" ) // true
isNumeric( "+10" ) // true
isNumeric( "-10", 2 ) // false
isNumeric( "+10", 2 ) // false
isNumeric( "0" ) // true
isNumeric( "0xFF" ) // false
isNumeric( "8e5" ) // false
isNumeric( "3.1415" ) // true
isNumeric( "3.1415", 4 ) // false
isNumeric( "0144" ) // true
isNumeric( ".423" ) // false
isNumeric( "" ) // false
isNumeric( "432,000" ) // true
isNumeric( "432,000", 3 ) // false
isNumeric( "23,223.002" ) // true
isNumeric( "3,23,423" ) // false
isNumeric( "-0x42" ) // false
isNumeric( "7.2acdgs" ) // false
isNumeric( {} ) // false
isNumeric( NaN ) // false
isNumeric( null ) // false
isNumeric( true ) // false
isNumeric( false ) // false
isNumeric( Infinity ) // false
isNumeric( undefined ) // false

출처: https://sometimes-n.tistory.com/34

jQuery - Selector (예문)

--------------------------------------------------------

    function ProdRemove() {

        var items = $("input:checkbox[name=chkBoxPRODADD]:checked");

        if (items.length == 0) {

            alert("선택한 상품이 없습니다.");

            return false;

        }

        if (confirm("선택한 상품을 삭제하시겠습니까?") == false) {

            return false;

        }

        $(items).each(function () {

            $(this).closest("tr").remove();

        });

        ProdAddCount();

    }

    function ProdAddCount() {

        var trCount = $("table#tablePRODADD tbody tr").length;

        $("#labProdCount").html(trCount);

        if (trCount == 0) {

            $("input:checkbox[name=all_chk]").prop("checked", false);

        }

    }

    function CheckBox_All(obj, cbName) {

        $("input:checkbox[name=" + cbName + "]").each(function () {

            $(this).prop("checked", $(obj).is(":checked"));

        });

    }

    function SeachProdSelectAdd(prodNum, prodName, prodStds, prodUnit, prodMaker) {

        var appendHtml = "<tr> ~~ </tr>"

        //$("#tablePRODADD").append(appendHtml);  // 자식(children) 뒤 요소에 추가

        $("#tablePRODADD").prepend(appendHtml);   // 자식(children) 앞 요소에 추가

    }

    function IsFindProd(prodNum) {

        var reValue = false;

        $("input:checkbox[name=chkBoxPRODADD]").each(function () {

            if ($(this).val() == prodNum) {

                reValue = true;

                return false;

            }

        });

        return reValue;

    }

    function ProdAdd() {

        var items = $("input:checkbox[name=chkBoxPROD]:checked");

        if (items.length == 0) {

            alert("상품을 선택해 주세요.");

            return false;

        }

        var ProdNum = "";

        var ProdName = "";

        var ProdStds = "";

        var ProdUnit = "";

        var ProdMaker = "";

        $(items).each(function () {

            var tdObj = $(this).closest("tr").find('td');

            ProdNum = $(this).val();

            ProdName = $(tdObj).eq(2).html();

            ProdStds = $(tdObj).eq(3).html();

            ProdUnit = $(tdObj).eq(4).html();

            ProdMaker = $(tdObj).eq(5).html();

            if (parent.IsFindProd(ProdNum) == false) {

                parent.SeachProdSelectAdd(ProdNum, ProdName, ProdStds, ProdUnit, ProdMaker);

            }

        });

        parent.ProdAddCount();

    }

    function AreaAddListOrderby() {

        var sortdir = 1;    // asc

        //var sortdir = -1;   // desc

        var rec = $("table#tableList1 tbody tr");

        rec.sort(function (a, b) {

            //var val1 = $(a).children('td').eq(column).text().toUpperCase();

            //var val2 = $(b).children('td').eq(column).text().toUpperCase();

            var val1 = a.getAttribute("data-Orderby").toUpperCase();

            var val2 = b.getAttribute("data-Orderby").toUpperCase();

            return (val1 < val2) ? -sortdir : (val1 > val2) ? sortdir : 0;

        });

        $.each(rec, function (index, row) {

            $('table#tableList1 tbody').append(row);

        });

    }

    function WindowCloseAndRefresh() {

        parent.opener.location.reload();

        window.close();

    }

--------------------------------------------------------

[예제] $(this)는 $(".me") 가정

<div class="grandmom">

        <div class="mom">

                <div class="me">

                        <div class="son">

                                <div class="grandson">

                                </div> //end grandson

                        </div> //end son

                <div> // end me 

                <div class="brother">

                </div> //end brother

                <div class="sister">

                </div> //end brother

        </div> //end mom

</div> //ent grandmom

1. parent()    

- 결과 : mom, grandmom

parent() 함수는 부모'들'을 호출한다. 위 상황에서 $(this).parent() 로 호출하면 mom, grandmom 이 모두 호출된다. grandmom만 선택하고 싶다면 $(this).parent().parent() 로 호출하는 법도 있지만, 보다 세련되게 하려면 index로 호출하는 eq() 함수를 쓰자. $(this).parent().eq(2); 이렇게 하면 2번째 상위의 parent 요소가 선택된다.

2. closest()

- 결과 : mom

closest() 함수는 함수 명처럼 가장 가까운 부모를 선택한다. 

3. siglings() 

- 결과 : brother, sister

형제 요소들'을' 호출한다. 만약 바로 옆에 있는 형제만 선택하고 싶다면 next() 함수를 쓰면 된다. $(this).next("div") 이렇게 선택하면 .brother 가 선택된다.

4. children()

- 결과 : son

직계 자식을 선택한다. son 밑에 grandson이 있지만 grandson 은 선택되지 않는다. grandson까지 선택하고 싶으면 find() 를 사용하자. find는 depth에 상관없이 자손들을 모두 선택한다. (jQuery 선택자에서 자손과 자식은 다른 의미로 사용된다. 자손은 depth 하위의 자식들도 포괄하고, 자식은 직계자식만을 의미한다.)

--------------------------------------------------------

.parent()

 선택한 요소의 부모(parent) 요소를 선택

.parents()

 선택한 요소의 부모(parent) 요소를 모두 선택

.parentsUntil()

 선택한 요소의 조상 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택

.closest()

 선택한 요소를 포함한 조상 요소 중에서 지정한 선택자에 해당하는 요소 중 가장 첫 번째 요소를 선택

--------------------------------------------------------