Object.prototype.toString()

 

toString() 은 문자열을 반환하는 object의 대표적인 방법입니다.

obj.toString();

위와 같은 방법으로 많이 사용합니다.

 

객체가 텍스트 값으로 표시되거나 객체가 문자열이 예상되는 방식으로 참조 될 때 자동으로 호출되는 toString() 메서드가 있습니다. 기본적으로 toString() 메서드는 Object에서 비롯된 모든 객체에 상속됩니다.

이 메서드가 사용자 지정 개체에서 재정의되지 않으면 toString()은 "[object type]"을 반환합니다. 여기서 type은 object type입니다.

 

.... 까지는 대부분 알고 있고 사용하고 있는 기능입니다만.

 

 

toString() 편리한 기능이 있습니다. 

10진수의 값의 경우 toString(arg) 매개변수를 이용하여 다른 진수로 변경할 수 있습니다. 

let baseTenInt = 10;
console.log(baseTenInt.toString(2));   // 2진법으로 변환

let bigNum = BigInt(20);
console.log(bigNum.toString(2))    // 2진법으로 변환

 

예를 들자면 16진법으로 변경하여 랜덤 색상을 생성할 수 도 있습니다. 

'#' + Math.floor(Math.random() * 16777215).toString(16);

해당 코드는 16777215를 hex로 표현하면 ffffff가 되므로 해당 코드는 000000부터 ffffff 값을 반환합니다.

 

참고 Link https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/toString

 

Object.prototype.toString() - JavaScript | MDN

The toString() 은 문자열을 반환하는 object의 대표적인 방법이다

developer.mozilla.org

 

저작자표시 비영리

'Web > Javascript' 카테고리의 다른 글

TypeScript를 공부 가이드  (0) 2023.02.27
조건문 좀더 편하게 사용하기  (0) 2023.01.13

ES6이다 뭐다... 모든브라우저에서 작성한 코드가 동작을 안하는 경우 난감한 상황이 발생 할 수 있다.

그중에 하나가 javascript 작성시 중복제거 코드를 작성했는데 IE에서 동작하지 않는 경우를 볼 수 있다.

 

findindex나 화살표함수(ES6) 문법을 사용하는 코드의 경우 문제가 될 수 있다.

아직까지 IE가 사라지지 않았으므로.. jQuery를 이용한 중복제거 함수를 작성해 보았다.

1
2
3
4
5
6
7
8
9
var valueArr = ["11","22","33","44","11","55","66"]; // 원본배열
var uniqueArr = []; // 중복이 제거된 배열이 생성될 변수
$.each(valueArr, function(k, val){ 
    if($.inArray(val, uniqueArr) === -1){
        uniqueArr.push(val); 
    }
});
 
console.log(uniqueArr);
 cs

 

저작자표시 비영리

'Web > JQuery' 카테고리의 다른 글

jQuery Selector(선택자) - #2 자식/형제요소 및 조합 선택자  (0) 2020.03.25
jQuery Selector(선택자) - #1 개요 및 기본 사용법  (0) 2020.03.25
jQuery replaceAll() 함수 만들기  (0) 2020.03.13
jQuery UI dialog와 Bootbox(bootstrap) 기능을 사용할때 오류  (0) 2017.08.04
Button Click 시 Submit이 되는현상  (0) 2017.02.21

jQuery에 대해서 업무 중 교육을 할 일이 생겨 정리합니다.

 

  • jQuery를 왜 사용하는 것인가?

   jQuery는 Selector가 없다면 사용을 안 할 수도 있다 라는 생각이 될 정도로 편리한 Selector를 제공합니다. 

   CSS 선택자를 그대로 사용할 수 있어 코드 선택이 매우 간단합니다. 물론 document.querySelector   

   와 document.querySelectorAll이 있기도 하지만 모르는 사람이 더 많을뿐더러 이미 jQuery가 자리 잡은 상황이기

   때문에 jQuery가 개발하는 사람들에게는 더 친숙합니다. 

 

 

 

 

jQuery Selector를 사용함에 있어 몇 가지만 알아도 사용하는 데에는 큰 무리가 없습니다. 

 

 

  • Id로 해당 Object 찾기(#)

단순히 #뒤에 아이디를 입력하여 해당 오브젝트를 선택할 수 있습니다.

//javascript
document.getElementById('objId');

//jQuery
$('#objId');

 

 

  • class로 Object 찾기(.)|

단순히. 뒤에 해당 css class 명을 입력하여 해당 오브젝트를 선택할 수 있습니다. 이때 동일한 class가 여러 개인 경우

. eq(숫자)를 이용하여 해당 인덱스에 해당하는 오브젝트를 선택할 수 있습니다.

 

//javascript
document.getElementsByClassName('your_class_name');

//jQuery
$('.your_class_name');

// 4번째 오브젝트 선택 (0부터 시작)
$('.your_class_name').eq(3);

 

  • tag로 Object 찾기

$() 안에 해당 tag를 입력하여 사용할 수 있습니다. 또한 여러 개의 동일한 tag가 존재하는 경우 eq()를 이용하여 해당 인덱스에 해당하는 오브젝트를 선택할 수 있습니다. 

//javascript
document.getElementsByTagName('table');

//jQuery
$("table");

//첫번째 table
$("table").eq(0);

 

  • 속성으로 Object 찾기( [ ] )

해당 기능은 javascript는 제공하지 않으므로 별도의 함수를 만들어서 사용해야 합니다. 

[ ] 안에 속성명 또는 속성에 해당하는 값의 형태로 작성하여 사용할 수 있습니다. 

//jQuery
$('[type]'); // type 라는 속성을 가진 Object

$('[type="button"]'); // type이 button인 Object

$('[type="button"]').eq(1);

 

 

저작자표시 비영리

'Web > JQuery' 카테고리의 다른 글

jQuery 배열 중복제거  (0) 2021.08.11
jQuery Selector(선택자) - #2 자식/형제요소 및 조합 선택자  (0) 2020.03.25
jQuery replaceAll() 함수 만들기  (0) 2020.03.13
jQuery UI dialog와 Bootbox(bootstrap) 기능을 사용할때 오류  (0) 2017.08.04
Button Click 시 Submit이 되는현상  (0) 2017.02.21

replace() 함수

  • 자바스크립트에서 특정문자 또는 특수문자를 제거할때 replace() 함수를 사용하는 경우 , #가 여러번 있는 문자열(주민번호,전화번호)을 단순히 replace('#','')로 하면, 처음 #기호만 삭제되고 나머지는 삭제되지 않습니다.
var testStr = "#1#2#3";
testStr.replace("#","");

//결과값 : 1#2#3



replace()함수와 정규식을 활용하여 Java의 replaceAll() 함수와 동일한 기능을 하도록 만들어 보겠습니다. 

var testStr = "#1#2#3";
testStr.replace(/\#/g,"");

//결과값 : 123

해당 코드를 이용하여 replaceAll() 함수를 생성하여 사용하도록 합니다.

 

 

추가내용

  • 자주쓰는 정규식
    • 특정문자 제거(#제거)   : str.replace(/\#/g,'');
    • 앞의 공백 제거           : str.replace(/^\s+/,'');
    • 뒤 공백 제거              : str.replace(/\s+$/,'');
    • 앞 공백 제거              : str.replace(/^\s+|\s+$/g,'');
    • 문자열 내의 공백 제거 : str.replace(/\s/g,'');
    • 줄바꿈 제거               : str.replace(/\n/g,'');
    • 엔터 제거                  : str.replace(/\r/g,'');
    • 0 제거                      : str.replace(/[^(1-9)]/gi,"");
저작자표시 비영리

'Web > JQuery' 카테고리의 다른 글

jQuery Selector(선택자) - #2 자식/형제요소 및 조합 선택자  (0) 2020.03.25
jQuery Selector(선택자) - #1 개요 및 기본 사용법  (0) 2020.03.25
jQuery UI dialog와 Bootbox(bootstrap) 기능을 사용할때 오류  (0) 2017.08.04
Button Click 시 Submit이 되는현상  (0) 2017.02.21
[jqGrid] 그리드의 해더와 내용이 밀리는 현상  (0) 2017.02.13


jQuery UI 를 이용하여 일반적으로 팝업창을 사용을 많이 합니다. 


다이알로그 창을 이용해서 많이들 하시죠 


그런데... 다이알로그 창에서 기타 플러그인을 이용한 Confirm이나 alert를 사용할 경우 


Uncaught RangeError: Maximum call stack size exceeded.


오류를 만날때가 있습니다. 


이 문제는 추가로 발생된 alert이나 confirm 창이 기존에 열려있는 다이알로그과 충돌이 발생하여 무한루프가 발생하여 생기는 오류 입니다. 

(정확히는 jQuery Dialog와 bootbox 의 alert/confirm 이 서로 focus를 가져오려고 싸우다가 무한루프에 빠지는 현상입니다.)


현재시점(2017.08.04)에는 아직 완벽한 해결책을 찾지 못하였으나... 


오류가 없이 사용할 수 있는 방법을 공유해드릴려고 합니다. 



해당문제는 추가로 발생한 alert이나 confirm에서 해당 영역을 벗어난 부분을 클릭 할 경우 차동 창 닫기 기능이 동작하면서 발생하는 기능입니다. 

 



위의 그림과 같이 진행되었을경우 마지막 이미지의 닫히는 행위가 수행 될때 Uncaught RangeError: Maximum call stack size exceeded. 가 발생하게 됩니다.

 

본론으로 들어가서 해결하는(?) 방법.. 그러니까 닫히는 기능을 사용안하게 하여 오류를 피해가는 방법을 소개해드립니다.

 

1. bootstrap[.js 혹은 bootstrap.min.js 을 Open

 

2. c.prototype.enforceFocus 항목을 찾은뒤 해당 함수를 주석처리 합니다.

 

3. enforceFocus 를 사용하는 항목을 주석처리하기 위해 d.enforceFocus()를 찾아 주석처리 합니다.

 

4. 정상동작하는지 확인합니다.

 

<참고 프로그램 소스 : 아래 붉은색 부분 참조>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var c = function(b, c) {
 
 
....
...
..
 
 
        this.$element.trigger(e), this.isShown || e.isDefaultPrevented() || (this.isShown = !0, this.checkScrollbar()
        , this.setScrollbar(), this.$body.addClass("modal-open"), this.escape(), this.resize()
        , this.$element.on("click.dismiss.bs.modal", '[data-dismiss="modal"]', a.proxy(this.hide, this))
        , this.$dialog.on("mousedown.dismiss.bs.modal", function() {
            d.$element.one("mouseup.dismiss.bs.modal", function(b) {
                a(b.target).is(d.$element) && (d.ignoreBackdropClick = !0)
            })
        }), this.backdrop(function() {
            var e = a.support.transition && d.$element.hasClass("fade");
            d.$element.parent().length || d.$element.appendTo(d.$body), d.$element.show().scrollTop(0)
            , d.adjustDialog(), e && d.$element[0].offsetWidth, d.$element.addClass("in") /*, d.enforceFocus()*/;
            var f = a.Event("shown.bs.modal", {
                "relatedTarget": b
            });
            e ? d.$dialog.one("bsTransitionEnd", function() {
                d.$element.trigger("focus").trigger(f)
            }).emulateTransitionEnd(c.TRANSITION_DURATION) : d.$element.trigger("focus").trigger(f)
        }))
    }, c.prototype.hide = function(b) {
        b && b.preventDefault(), b = a.Event("hide.bs.modal"), this.$element.trigger(b), this.isShown && !b.isDefaultPrevented() && (this.isShown = !1, this.escape(), this.resize(), a(document).off("focusin.bs.modal"), this.$element.removeClass("in").off("click.dismiss.bs.modal").off("mouseup.dismiss.bs.modal"), this.$dialog.off("mousedown.dismiss.bs.modal"), a.support.transition && this.$element.hasClass("fade") ? this.$element.one("bsTransitionEnd", a.proxy(this.hideModal, this)).emulateTransitionEnd(c.TRANSITION_DURATION) : this.hideModal())
    }
    
    
    //, c.prototype.enforceFocus = function() {
    //    a(document).off("focusin.bs.modal").on("focusin.bs.modal", a.proxy(function(a) {
    //        this.$element[0] === a.target || this.$element.has(a.target).length || this.$element.trigger("focus")
    //    }, this))
    //}
    
 
 
....
...
..
 
 cs

 

 

 

 

저작자표시

'Web > JQuery' 카테고리의 다른 글

jQuery Selector(선택자) - #1 개요 및 기본 사용법  (0) 2020.03.25
jQuery replaceAll() 함수 만들기  (0) 2020.03.13
Button Click 시 Submit이 되는현상  (0) 2017.02.21
[jqGrid] 그리드의 해더와 내용이 밀리는 현상  (0) 2017.02.13
[JavaScript] 데이터 타입 - 수 (Numbers)  (0) 2016.10.14

jQuery.ajax() 사용시 중복호출 방지하는 방법

jQuery.ajax() 함수를 버튼 이벤트 같은 곳에 걸어두었을 경우 버튼을 여러번 클릭시 request 요청이 여러번 날아가서 오동작을 일으키는 경우가 있다.

이 때 아래와 같은 방법들로 해결할 수 있다.

1. jQuery.ajax() 세팅 옵션에 async: false 추가하는 방법

jQuery.ajax() 는 default 세팅 값이 true 로 되어 있어 요청을 비동기로 처리하게 되는데 async: false 옵션을 추가하면 동기로 처리하게 된다.

동기로 처리하게되면 아까 위와 같은 상황에서 버튼을 눌러 request 요청을 날렸을 때 response 요청이 올 때까지 다른 request 요청은 받지 않게 되어 중복호출을 방지한다.

 

 

 

2. 버튼에 클릭 이벤트를 jQuery.bind(), jQuery.unbind() 로 처리하는 방법

아래와 같이 jQuery.ready() 에 클릭 이벤트를 bind 시켜놓고, 한 번 클릭시 클릭 이벤트를 unbind 시켜 ajax 요청이 끝나면 다시 bind 시키는 방법이다.

  
     $(document).ready(function() {
           $('#foo').bind('click', function() {
                 doSomething();  
           });
           var doSomething = function(){
           $('#foo').unbind('click');
           $.ajax({ 
                         type: "POST",
                         url: "some.do"
            }).done(function() {
                         $('#foo').bind('click', function() {
                                 doSomething();
                     });  
             });
}
3. jQuery Block UI Plugin을 사용하는 방법

플러그인을 사용하는 방법으로 위 플러그인을 사용하게 되면 요청이 들어왔을 때 Please wait… 와 같은 Progress 메세지를 띄우면서 페이지에서 다른 이벤트를 막아버린다.

띄울 메세지를 css를 사용하여 커스텀으로 작성할 수도 있다.

 

 

 

저작자표시

'Web > JQuery' 카테고리의 다른 글

checkbox checked 설정  (0) 2014.10.17
Datepicker 대만 번체 zh-TW 번역자료  (0) 2014.07.28
JavaScript Class 상속  (0) 2014.05.21
Javascript override 방법  (0) 2014.05.21
[IE9 짜증남] IE 버전 체크  (0) 2014.05.21

+ Recent posts

티스토리툴바