Hello Jay's Programming World!

마우스 이벤트를 이용하여 개발을 하다보면 마우스 왼쪽 클릭인지 오른쪽 클릭인지 구분해서 개발해야할 때가 있습니다. 일반적으로 mousedown 이벤트를 추가하면 왼쪽 클릭을 해도 호출되고 오른쪽 클릭을 해도 호출이 되기 때문입니다. 오른쪽 클릭의 경우엔 mousedown 이벤트도 호출되고 메뉴바까지 나오게 됩니다.그렇다면, 마우스 왼쪽 클릭인지 오른쪽 클릭인지 판단하기 위해서는 어떻게 해야할까요? 아래 JSFiddle 샘플을 준비했습니다. 빨간색 Div를 왼쪽 마우스로 클릭하면 "Right mouse button was not clicked" 라는 alert이 뜨고 오른쪽 마우스로 클릭하면 "Right mouse button clicked" 라는 alert 창이 뜨는 것을 확인할 수 있습니다. mouse..

JavaScript은 여러가지 특징을 가지고 있는 언어이지만 그 중 하나를 말하라고 하면 함수가 일급(first-class)객체라는 것이 아닐까 생각합니다. 함수가 일급 객체로 취급 받아 변수에 대입하거나 매개변수로 전달할 수 있습니다. 그리고 JavaScript의 경우 var 키워드를 이용하여 변수를 선언하는데, 이 var 키워드로 생성된 변수는 타입에 상관없이 대입이 가능합니다. 아래 소스를 보면 a라는 변수는 처음에는 정수형으로 선언되었는데, 문자열로 대입되었다가 함수로 대입되었다가 실수로 대입되었다가 객체로 그리고 배열로 대입되며 그때 그때 다른 type 변수로 사용되고 있습니다. var a = 1; a = 'string'; a = function() { console.log('Function')..

배열에 데이터를 넣다보면 정렬이 필요할 때가 있습니다. JavaScript에서는 편리하게 정렬할 수 있도록 정렬 매서드를 지원합니다. JavaScript가 제공하는 sort 매서드를 한 번 사용해볼까요? 아래 배열에 sort 매서드를 사용해보도록 하겠습니다. var array = [1, 3, 10, 100, 2]; array.sort(); 결과는 어떨까요? JSFiddle을 이용해서 확인해보겠습니다. 결과는 어떤가요? OriginalArray: 1,3,10,100,2 SortedArray: 1,10,100,2,3 1, 2, 3, 10, 100으로 정렬될 줄 알았는데, 1, 10, 100, 2, 3으로 정렬이 되는 것을 확인할 수 있습니다. Array의 Sort 매서드는 기본적으로 유니코드 코드 포인트를 ..

splice 메서드는 배열 요소를 변경하는데 사용됩니다. 존재하는 요소를 제거하거나 요소를 추가할 수 있습니다. 특히, 원하는 위치에 배열의 요소를 추가하고 싶다면, splice() 메서드를 사용해야합니다. splice() 메서드의 형태는 아래와 같습니다. array.splice(start, deleteCount [, item1 [, item2 [, ...] ] ]) start: 기준이 되는 배열의 index를 지정합니다. deleteCount: start index부터 몇 개의 요소를 제거할지 지정합니다. item.. : 삽입할 요소를 지정합니다. 그럼 실제로 어떻게 실행하는지 확인해보겠습니다. 간단하게 JSFiddle을 이용하여 구현해보았습니다. 배열의 초기 상태는 ['a', 'b']입니다. arra..

안녕하세요. Jay입니다. 오늘은 배열에서 최대값, 최소값 구하는 방법을 알아보도록 하겠습니다. 일반적으로 배열에서 최대값, 최소값을 구하기 위해서는 반복문을 사용합니다. 아마도 아래 소스와 같이 구현해야하지 않을까 생각합니다. 아주 간단한 소스임에도 불구하고 변수, 반복문, 조건문이 하나씩 들어가 있는 길다면 긴 코드가 구현이 되었습니다. var array = [1, 2, 3, 4, 5, 6, 7]; function getMax() { var max = array[0]; for(var i = 1; i < array.length; i++) { if(max < array[i]) max = array[i]; } return max; } function getMin() { var min = array[0]; ..

안녕하세요. Jay 입니다. 오늘은 JavaScript를 이용한 클래스 제어 방법에 대해서 알아보도록 하겠습니다. 먼저 Element.classList의 반환형은 'DOMTokenList'입니다. 이 DomTokenList의 메서드는 많은 것이 있지만, 오늘은 세가지만 살펴보려고 합니다. Element.classList.toggle toggle, 전등 스위치를 껐다 켰다 하는 행위 처럼, 0과 1이 반복되는 행위를 의미합니다. 즉, 기존 값이 0이었다면 1로 바뀌고 기존 값이 1이었다면, 0으로 바뀌게 됩니다. 그래서 toggle 메서드는 클래스가 존재한다면 클래스를 제거하고, 클래스가 존재하지 않는다면 클래스를 추가하는 메서드입니다. Element.classList.add 명시된 클래스를 추가하는 메서..

Math Object는 수학적인 일을 수행한다. Math Object Properties Property 설명 E 오일러 수 값 (Euler's number, 약 2.718) LN2 자연로그 log2 값 (약 0.693) LN10 자연로그 log10 값 (약 2.302) LOG2E 2를 밑으로 하는 logE 값 (약 1.442) LOG10E 10을 밑으로 하는 logE 값 (약 0.434) PI PI 값 (약 3.14) SQRT1_2 루트 1/2 값 (약 0.707) SQRT2 루트 2 값 (약 1.414) Math Object Methods Method 설명 예제 예제 결과 abs(x) 절대 값을 반환한다. Math.abs(-10) 10 ceil(x) 가장 근접한 정수로 올림. Math.ceil(11...

IE9에서는 requestAnimationFrame이 동작하지 않습니다. 이를 동작하게 하기 위한 소스입니다. https://gist.github.com/paulirish/1579671

Internet Explorer에서만 발생한 오류입니다. var obj = {}; toString.call(obj); 위와 같이 toString을 호출하며 obj를 매개변수로 던졌더니 오류가 발생했습니다. 참고로 Chrome에서는 정상적으로 동작하지만 IE에서만 발생한 문제입니다. 오류가 발생한 이유는 toString.call(obj) 호출하면 Object.prototype.toString 함수가 호출되는 것이 아니라 window.toString 함수가 호출됩니다. window.toString의 경우 스펙이 없기 때문에 window.toString에 대한 구현은 브라우저마다 차이가 날 수 있습니다. Chrome에서는 자연스럽게 Object.prototype.toString 연결시켜줬지만, IE에는 그렇게..

localeCompare 문자열 비교 함수. 문자열을 비교하여 주어진 문자열이 정렬 순서상 앞에 위치하는지 뒤에 위치하는지 같은 위치에 위치하는지 숫자로 반환한다. alert('a'.localeCompare('b')); // -1alert('b'.localeCompare('a')); // 1alert('b'.localeCompare('b')); // 0