개발자의 하루

자바스크립트에서 input 요소에 숫자 포맷팅하기 위해

다음과 같이 jQuery NumBox 라이브러리 (Library)를 사용할 수 있다.

    <script src="../../public/libs/jquery.numbox/1.1.1/jquery.numbox-1.1.1.min.js"

            th:src="@{/libs/jquery.numbox/1.1.1/jquery.numbox-1.1.1.min.js}"></script>

    <link rel="stylesheet"

          href="../../public/libs/jquery.numbox/1.1.1/jquery.numbox-1.1.1.css"

          th:href="@{/libs/jquery.numbox/1.1.1/jquery.numbox-1.1.1.css}" />

    <script>

        $(function () {

            $('#currentSalary').NumBox({places: 0, symbol: '', max: 100000000});

        });

    </script>

    <input id="currentSalary" name="currentSalary" type="number" class="form-control" />

안타깝게도 크롬 (Chrome)에서 다음과 같은 에러가 발생한다.

Uncaught InvalidStateError: Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('number') does not support selection.

5Uncaught InvalidStateError: Failed to read the 'selectionEnd' property from 'HTMLInputElement': The input element's type ('number') does not support selection.

다행히도 동작에는 문제가 없다.

Stable 버전인 1.1.0은 파이어폭스 (Firefox)에서 동작하지 않는다.

파이어폭스에도 사용될 예정이라면 Hotfix 버전인 1.1.1을 사용해야만 한다.

-----

모바일 크롬에서 입력을 위해 입력창을 두번 터치해야되는 문제도 있다.

Reference:

http://www.numbox.org/guide/

자바스크립트에서 자바의 Integer.toHexString()을 다음과 같이 구현할 수 있다.

        Number.prototype.toHexString = function () {

            return (this >>> 0).toString(16);

        };

        var i = 1234;

        console.log(i.toHexString());

자바의 Integer.toHexString()은 Integer를 Unsigned로 변환해서 처리하기 때문에

자바스크립트의 Number.toString(16)을 바로 사용할 수 없음에 유의한다.

자바스크립트에서 숫자는 모두 Number 타입으로 Double로 취급된다.

비트 연산자 (Bitwise Operator) >>> 사용 시 Unsigned 32-bit Integer로 변환되기 때문에

다음과 같이 h를 Unsigned 32-bit Integer로 변환할 수 있다.

h >>>= 0;

Reference:

http://stackoverflow.com/questions/1908492/unsigned-integer-in-javascript

자바스크립트에서 숫자는 모두 Number 타입으로 Double로 취급된다.

비트 연산자 (Bitwise Operator) 사용 시 Signed 32-bit Integer로 변환되기 때문에

다음과 같이 h를 Signed 32-bit Integer로 변환할 수 있다.

h &= h;

혹은

h |= 0;

Reference:

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators

자바스크립트로 <a> 요소 (Element) 클릭 시 로그를 남기기 위해

onclick 속성 (Attribute)에 Ajax 요청을 보내는 함수 (Function)를 호출하고,

return false;한다.

Ajax 응답이 오면, document.location = href;한다.

하지만 same-origin policy에 위배되면,

CORS (Cross-orgin resource sharing)을 사용하지 않는 이상 Ajax 요청이 불가하다.

이 경우 다음과 같이 JSONP로 해결하거나,

        var script = document.createElement("script");

        script.src = url;

        script.onload = function (event) {

            document.location = href;

        };

        document.getElementsByTagName("head")[0].appendChild(script);

다음과 같이 이미지 (Image) 객체를 사용하면 된다.

            var image = new Image();

            image.onerror = function (event) {

                document.location = href;

            };

            image.src = url;

References:

http://en.wikipedia.org/wiki/Same-origin_policy

http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

자바 문자열의 hashCode() 구현은 다음과 같다.

    public int hashCode() {

        int h = hash;

        if (h == 0 && value.length > 0) {

            char val[] = value;

            for (int i = 0; i < value.length; i++) {

                h = 31 * h + val[i];

            }

            hash = h;

        }

        return h;

    }

자바스크립트에서는 다음과 같이 하면 된다.

        String.prototype.hashCode = function(){

            var h = 0;

            if (this.length > 0) {

                for (var i = 0; i < this.length; i++) {

                    h = 31 * h + this.charCodeAt(i);

                    // NOTE:

                    // Convert to signed 32-bit integer.

                    h |= 0;

                }

            }

            return h;

        };

        console.log("1234".hashCode());

Reference:

http://werxltd.com/wp/2010/05/13/javascript-implementation-of-javas-string-hashcode-method/

자바스크립트 (JavaScript)에서 다음과 같은 예외에 직면할 수 있다.

Uncaught ReferenceError: xxx is not defined

다음과 같이 script 태그를 닫은 경우에 다음 script 태그가 제대로 해석되지 않아 발생할 수 있다.

<script src="../lib/jquery/2.0.3/jquery-2.0.3.min.js" />

다음과 같이 시작 태그와 끝 태그를 구분해주면 해결된다.

<script src="../lib/jquery/2.0.3/jquery-2.0.3.min.js"></script>

jQuery $(document).ready()의 콜백 (Callback)은

DOM (Document Object Model)이 준비되면 호출된다.

window.onload에 설정된 콜백은 이미지 (Image)와 같은 리소스들이 모두 로딩된 후에 호출된다.

References:

http://api.jquery.com/ready/

http://www.dotnetbull.com/2013/08/document-ready-vs-window-onload.html

자바스크립트로 GET 파라미터를 가져오기 위해 다음과 같이 할 수 있다.

        document.getElementById("tel1").setAttribute("href", "test");

        function getParameters() {

            var parameterMap = {};

            var parameters = window.location.search.substr(1);

            var splitParameters = parameters.split("&");

            for (var i = 0; i < splitParameters.length; i++) {

                var parameter = splitParameters[i];

                var splitParameter = parameter.split("=");

                parameterMap[splitParameter[0]] = splitParameter[1];

            }

            return parameterMap;

        }

        var parameters = getParameters();

        console.log(parameters);

Reference:

http://stackoverflow.com/questions/5448545/how-to-retrieve-get-parameters-from-javascript

RequireJS에서 require()는 의존성 (Dependency)을 가져와서 코드를 실행한다.

define()은 의존성을 가져와서 모듈 (Module)을 정의한다.

Reference:

http://www.sitepoint.com/understanding-requirejs-for-effective-javascript-module-loading/